LECTURE 3. Web-Technology

Size: px

Start display at page:

Download "LECTURE 3. Web-Technology"

Caren George
5 years ago
Views:

1 LECTURE 3 Web-Technology

2 Household issues Blackboard o Discussion Boards Looking for a Group Questions about Web-Technologies o Assignment 1 submission Announcement ? Have to be in a group Homework 1 questions: o Using material from other websites o Iframe for embedding YouTube videos o Language of the website content Lab Rooms Group 1 Group 3 Group 4 Wednesday BBG-161 BBG-115 CLZ BBG-175 CLZ Friday BBG-214 BBG-115 CLZ BBG-112 CLZ 2

3 Pop-Quiz How many levels does the OSI model have? Consider the following protocol combinations TCP-IP, UDP-IP, TCP-UDP o Which is faster? o Which is safer? o What about TCP-UDP? Which HTTP method is used to retrieve Web resources? o If your resource has been retrieved, what will be the code of HTTP response? o If you resources has not been found, what will be the code of HTTP response? Which HTTP method is used to launch a program at a Web-server? o If you crash a Web-server what will be the code of HTTP response? What should be the first line of an HTML document? 3

4 New Features of HTML5 4

Graphics <canvas> - Define on-the-fly graphic drawing using JavaScript <canvas id="mycanvas"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.

5 Graphics <canvas> - Define on-the-fly graphic drawing using JavaScript <canvas id="mycanvas"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getelementbyid('mycanvas'); var ctx = c.getcontext('2d'); ctx.fillstyle = '#FF0000'; ctx.fillrect(0,0,80,100); </script> <svg> - Scalable vector graphics in XML format <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> 5

New media elements <audio>: defines sound or musing content <video>: defines video or movie content <source>: defines sources for <video> and <audio> <track>: defines tracks for <video> and

6 New media elements <audio>: defines sound or musing content <video>: defines video or movie content <source>: defines sources for <video> and <audio> <track>: defines tracks for <video> and <audio> <video width="320" height="240" autoplay controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> 6

7 New form elements New features to make Web forms easier, more powerful, and more consistent across the Web New input types o type= number o type= range o type = date o type= time 7

telephone numbers, email addresses and URLs.

8 New form elements <input type="tel"> <input type=" "> <input type="url"> Related to telephone numbers, addresses and URLs. Browsers will render these as normal text inputs 8

9 <input = color > Brings up a color picker 9

<datalist> Dropdown list which allows users to add their own options <p> Select your program: <input type="text" list="mydata" /> <datalist id="mydata"> <option label="msis"

10 <datalist> Dropdown list which allows users to add their own options <p> Select your program: <input type="text" list="mydata" /> <datalist id="mydata"> <option label="msis" value="master's of Information Science"> <option label="mlis" value="master's of Library Science"> <option label="mst" value="master's of Telecommunication"> </datalist> </p> 10

11 New attributes - placeholder Placeholder: placeholder content in text entry fields o Better usability o To give more information about the expected type of information we want the user to enter How would you do that in HTML 4? What is the problem with that? HTML5 placeholder: disappears when the form control gets focus. Name: <input type="text" placeholder= Last Name, First Name"> 2/16/18 11

12 New attributes - autofocus Autofocus: having a form field automatically focused when a page is loaded. HTML 4: could only be done with scripting HTML 5 Name: <input type="text" placeholder= Last Name, First Name, autofocus> 2/16/

13 Validation Help users avoid and correct mistakes Stop malicious users from submitting data that could cause damage to application HTML 4 : Scripting was necessary HTML 5: native form validation 13

and pattern: o Use pattern attribute to specify custom regular

14 Form validation Enforcement of required fields: required attribute <input type="text" placeholder="last Name, First Name" required> Type and pattern: o Use pattern attribute to specify custom regular expression to apply to text input Age: <input type="text" pattern="[0-9]+"> 14

15 New semantic elements Document structure within the body before HTML5.0 HTML5 clearly defines different parts of a web page: <header> <hgroup> <nav> <section> <article> <aside> <figure> <figcaption> <footer> <details> <summary> <mark> <time> 15

o Examples: a magazine, newspaper, technical or scholarly article, an essay or report, a

16 <article> W3C HTML5 documentation: o a complete, or self-contained, composition in a document, page, application, or site. o Examples: a magazine, newspaper, technical or scholarly article, an essay or report, a blog post.. Should include an h1-h6 element <article> <h1>semantic elements in HTML5</h1> <p>html5 introduces several new tags </p> </article> 16

17 <section> Defines a section in a document. W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading. Should include an h1-h6 element <section> <h1>assignments</h1> <p>the course includes five assignments</p> </section> 17

<article> vs <section> vs <div> Article a complete, self-contained composition Section - a

W3C HTML5 Spec: Authors are strongly encouraged to view the div element as an element of last

<article> <section> </section> </article> <article> <article> </article> </article> <section>

18 <article> vs <section> vs <div> Article a complete, self-contained composition Section - a thematic grouping of content Div generic container used purely for styling or scripting purposes o W3C HTML5 Spec: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. <article> <section> </section> </article> <article> <article> </article> </article> <section> <section> </section> </section>.. All of these are fine <section> <article> </article> </section> <section> <div> </div> </section> <div> <section> </section> </div> 18

19 <nav> Defines a set of navigation links Intended for large blocks of navigation links. Not all links in a document should be inside a <nav> element! 19

20 <aside> Defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content. 20

21 <header> Specifies the header of a document or section The <header> element should be used as a container for introductory content or navigational aids You can have several <header> elements in one document Do not mix it with the <head> element! <footer> 21

22 Why bother? Cleaner code Teaches good habits o Why do we use comments or descriptive names? Explicit semantics of the page organization o Can be further enhanced with metadata from schema.org or other standards defining the role or meaning of certain elements Improves accessibility o Screen readers have a better idea what to skip or where to navigate Improves interoperability across devices and platforms o Think of a mobile browser folding a nav, scrolling through a page header or re-ordering sections arranged as columns vertically 22

23 Tip of the iceberg New APIs: o Canvas o Timed Media Playback o Offline Browsing o Editable content o Drag and drop o History o Web Messaging o Web Storage Additional technologies: o o o o Web workers WebSocket Server-sent events Web Components 23

24 W3C Markup Validator / CSS Validator

25 A couple words about SEO in HTML5 <title> very important <meta name= description > also important <h1>-<h6> important HTML5 semantics important <a>anchors</a> that s what page rank started with <img alt= > can be very important <strong>, <em> - important <meta name= keywords > Google says it s not important, but - Not everyone believes them - Google is not everyone 25

26 Cascading Style Sheets: CSS

27 Golden rule in standardization Separate content from appearance Style sheet should be provided in external files 27

28 Cascading Style Sheets Style sheets language introduced by W3C Cascading: process of determining the priority of styling rules To define the presentational semantics of structured documents Typical features o Fonts o Colors o Backgrounds o Margins 28

29 CSS levels Various versions of CSS are often referred as levels Each CSS level is based on the previous level and adds new properties and features Three most significant versions o CSS 1 o CSS 2.1 o CSS 3 29

30 CSS 1 First cascading style sheet specification Published in 1996 A W3C recommendation Introduced styles for o Font properties o Element color o Alignment o Tables o Margins o Border o Padding o Positioning CSS1 properties can be applied to uniquely identified elements or element groups. 30

31 CSS 2 and CSS 2.1 Was developed as a superset of CSS 1 Several new features o Layer order (z-index) o Three types of element positioning (absolute, relative, and fixed) o Aural media type o Bidirectional text CSS 2.1 has been the ultimate styling solution on the Web for many years Became a W3C recommendation in

32 CSS 3 In contrast to other CSS specifications, CSS3 is modularized o Selectors, Box model, Background and borders, Text effects, o Each module has its own description o The modules are in different stages of development and browser implementation. o Most of the CSS3 modules are W3C recommendations o For some of the modules CSS4 drafts already exist New functions and features Border-radius (rounded borders) Box-shadow Background-origin Color declaration in HSL, HSLA, and RGBA Text-shadow Text-overflow Word-wrap Box-sizing Attribute selectors Multicolumn layout Web Fonts Speech 32

33 CSS grammar and conventions The grammar ensures correct CSS syntax o Avoiding parsing errors Non-existing properties Incorrect values Malformed declarations o Makes it possible for browsers to handle parsing rules, selectors, properties, values, and unit notations correctly. Although the fundamental rules are similar, each CSS version has its own syntax 33

Identifiers for id s and classes id can be used to style a unique element of a page o An element with an id attribute is unique within a web page class can be used to style multiple elements the same

34 Identifiers for id s and classes id can be used to style a unique element of a page o An element with an id attribute is unique within a web page class can be used to style multiple elements the same Styling is not the only usage of these attributes of course The id and class identifiers should always start with a letter. o Identifier names are case sensitive. o Using letters a z and numbers 0 9 is highly recommended o Underscores and hyphens are also allowed o Names should be meaningful and semantic o Unique names should be applied <a class= internal > <a id= home > 34

35 Units of measurement Unit Description % Percentage in cm mm em ex pt pc px Inch Centimeter Millimeter defines the proportion of the width and height of a given letter with respect to the point size of a given font 1 em is equal to the current font size can be used to automatically adapt the font size proportions to the font size chosen by the user in the browser 1 ex is the x-height of a font 1 point is equal to 1/72 inch 1 pica is equal to 12 points 1 pixel is a dot on the screen 35

colors are adequate to mix any color o #ff0000; #0000FF;.. o rgb(255, 0, 0); rgb(0, 0, 255) ; o rgba(255, 0, 0, 0.

36 Color declarations Predefined/Cross-browser color names: o white, black, blue Hexadecimal, RGB, RGB(a) o Any color represented by additive color mixing, using different intensity variants of three Red, Green, and Blue colors o 256 shades of the three base colors are adequate to mix any color o #ff0000; #0000FF;.. o rgb(255, 0, 0); rgb(0, 0, 255) ; o rgba(255, 0, 0, 0.3) last value foralpha channel / opacity HSL(a) colors o hue, saturation, lightness (alpha) o hsl(120, 100%, 50%) o hsl(120, 100%, 50%, 0.3) hue 36

37 CSS rule structure Selector h1{ Rule color: #006600; Declaration } Property Value 37

38 CSS selector syntax Identifies those markup elements to which the CSS style(s) will be applied Specific element groups are styled by various types of selectors o Element selector p { font-size: 1.2em; font-family: Garamond;} o Class selector o ID selector o Attribute selector.abstract { font-size: 1.1em;} p.abstract { font-size: 1.2em;} #abstract { font-size: 1.2em;} a[target] { font-size: 1.2em;} a[target= _blank ] { font-size: 1.2em;} Applies to all paragraphs Applies to elements with this class Applies to paragraphs with this class Applies to the element with this ID Applies to the links with targets specified Applies to the links with targets = _blank 38

39 CSS selector syntax Descendant selector: matches all elements that are descendants of a specified element td a { font-weight: bold; } Applies to all hyperlinks within table data cells <td><p>one of the unique attractions of <a href=" Kenya</a> is the Nairobi National Park.</p></td> Pseudo classes: used to define a special state of an element o Use colons to separate an element o Frequently used to determine the style of hyperlinks, depending on their states a:hover { color: #000080; } Applies to all links, but only when the mouse hovers over the link 39

40 Property value types CSS property values can be the following: okeywords example: auto obasic data types example: % ocombination of keyword and custom data example: url( ) 40

2em; font-family: Garamond; font-style: normal; } o Background properties body { background-color: #232323; background-image:

41 Shorthand notation Certain CSS properties can be grouped into a single property declaration o Font properties p { p { font-weight: bold; font: bold 1em/1.2em Garamond; font-size: 1em; } line-height: 1.2em; font-family: Garamond; font-style: normal; } o Background properties body { background-color: #232323; background-image: url('images/bg.jpg'); background-repeat: no-repeat; background-position: 100% 0%; background-attachment: fixed; } p { background: # url('images/bg.jpg') no-repeat 100% 0% fixed; } 41

Shorthand notation List properties Padding, border, and margin properties o Four properties: padding-top, padding-right, padding-bottom, padding-left o Combined: top, right, bottom, left

42 Shorthand notation List properties Padding, border, and margin properties o Four properties: padding-top, padding-right, padding-bottom, padding-left o Combined: top, right, bottom, left #decor { padding: 10px 5px 20px 30px; } #decor { padding: 10px 5px 20px; } #decor { padding: 10px; } Left and bottom will be set the same (20px) One value sets an equal padding for all sides 42

43 Implementation Three ways to implement CSS Chosen method determines the scope of styling oinline style oembedded (internal) style oexternal style sheet 43

44 Inline style Styling with the most limited scope Embedded in an (X)HTML tag to which it exclusively applies Defined by the style attribute that can be provided on most markup elements <img src="logo.png" style="margin: 10px;" alt="logo" /> 44

45 Embedded style A code block usually located in the document head Unique to that webpage <head> <style type="text/css"> #disclaimer { text-align: center; margin-top: 30px; margin-bottom: 60px; } </style> <head> 45

46 External style sheet An external style sheet is a separate file with the.css extension that contains style rules for multiple web documents, such as an entire web site. Link to an external style sheet file <link rel="stylesheet" type="text/css" href="main.css" /> Import style rules from other style "styles/alter.css"; 46

47 Example main.css body { background: url( ) no repeat 100% 0% fixed; background-color: #004C25; color: #FFF; font-family: Garamond, serif; } ( main.css ); body { background-color: #00254C; } ( main.css ); body { background-image: none; max-width: 640 px; } 47

48 Question? <head> <style type= text/css > p.desc { color: #00FF00; } </style> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <p class="desc" style="color:#ff0000">what is my color?</p> <body> main.css p.desc { color: #0000FF; } 48

49 Cascading CSS: Cascading Style Sheet Mechanism that determines one declaration among a set of styling rules that should be applied for a certain element-property pair Browsers consider three features in the following order to choose that declaration: o Weight: declaration with the highest weight is chosen o Specificity: declaration with the highest specificity is chosen o Declaration order 49

50 Weight of style sheets Origin of declaration o Author (developer) o User o User agent (e.g. browser) Level of importance o Normal (default) o Important (should be marked) Order: 1. User style sheets (important) 2. Author style sheets (important) 3. Author style sheets (normal) 4. User style sheets (normal) 5. Default style sheets of rendering engines #menu { margin-top: 12px!important; } 50

51 Specificity of style sheets The specificity of selectors can be calculated as follows: o The number of ID attributes in the selector is counted. o The number of other attributes and pseudoclasses in the selector is counted. o The number of element names in the selector is counted. The concatenation of these numbers is the specificity. a { color: #000; } div a { color: #0f0; } div.tip a { color: #00f; } div.tip a:hover { color: #f00; }

52 Inheritance Property values of parent elements can be set to children o Example: the background color of a web document is defined, all container elements, divisions, and paragraphs within the document will inherit that property. 52

53 The box model The actual markup content of block elements is wrapped around by optional paddings, borders, and margins, called the CSS box model 53

54 Visibility In CSS, elements can be displayed in the following ways: o Block: display : block Uses the full width available, along with a new line before and after o Inline: display : inline Uses only as much width as needed without breaking the row o Not displayed: display: none Removes the element completely from the document so it does not take up any space o Hidden: display: hidden Hides the element but still takes up space in the layout 54

55 CSS positioning CSS positioning properties allow you to position an element. o Place an element behind another o Specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. There are four main different positioning methods: o Static o Fixed o Relative o Absolute o + Sticky = scrolling dependent (relative fixed) o + Inherit = inherits from a parent container o + Initial = sets back to default (static) 55

56 Static positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. <!DOCTYPE html> <html> <head> </head> <body> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> <p>some text</p> </body> </html> 2/15/18 56

57 Fixed positioning An element with fixed position is positioned relative to the browser window It will not move even if the window is scrolled: <!DOCTYPE html> <html> <head> <style> p.pos_fixed { position:fixed; top:30px; right:5px; color: #FF0000;} </style> </head> <body> <p class="pos_fixed">some text</p> <p>some text</p> <p>some text</p> </body> </html> 2/15/18 57

58 Relative positioning A relative positioned element is positioned relative to its normal position. <!DOCTYPE html> <html> <head> <style> p.pos_left { position:relative; left: 20px color: #FF0000;} </style> </head> <body> <p class="pos_left">some text</p> <p>some text</p> <p>some text</p> <p>some text</p> </body> </html> 2/15/18 58

59 Absolute positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html> <!DOCTYPE html> <html> <head> <style> p.pos_left { position: absolute; left: 20px color: #FF0000;} </style> </head> <body> <p class="pos_left">some text</p> <p>some text</p> <p>some text</p> <p>some text</p> </body> </html> 2/15/18 59

60 Overlapping elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order An element with greater stack order is always in front of an element with a lower stack order. img { position:absolute; left:0px; top:0px; z-index:-1; } 60

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text