Presentation is loading. Please wait.

Presentation is loading. Please wait.

HyperText Markup Language (HTML) – Part 2 Laboratory of Intelligent Networks KUT Youn-Hee Han from

Similar presentations

Presentation on theme: "HyperText Markup Language (HTML) – Part 2 Laboratory of Intelligent Networks KUT Youn-Hee Han from"— Presentation transcript:

1 HyperText Markup Language (HTML) – Part 2 Laboratory of Intelligent Networks (LINK) @ KUT Youn-Hee Han from http://www.w3schools.com

2 HTML Color Color Values HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value: 0 (hex #00) The highest value: 255 (hex #FF). The basic color table Web Programming2

3 HTML Color W3C Standard Color Names W3C has listed 16 color names The color names are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow The 216 cross-browser color palette The palette of most colors Web Programming3

4 HTML Color Color combination Colors are displayed combining RED, GREEN, and BLUE light sources Web Programming4

5 HTML Color 16 Million Different Colors The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of supporting the number of colors Shades of Gray Gray colors are displayed using an equal amount of power to all of the light sources Web Programming5

6 HTML Layout HTML Layout - Using Tables use HTML tables to format the layout of an HTML page. use a table without borders, and maybe a little extra cell-padding Does not recommend to use tag for HTML layout Web Programming6 This is some text. Another text. Another text. Another text.

7 HTML formatting Spaghetti code including contents and formatting HTML coding where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process Web Programming7 This is a paragraph. This is another paragraph. The above coding has old style!!! (HTML 3.2 style)

8 HTML formatting Removing all fonts and color information from HTML page HTML 4.0 separates the presentation from the document structure Do not use presentation attributes inside your HTML tags if you can avoid it. Start using styles (CSS)! Web Programming8

9 HTML Head tag It contains general information about a document. The elements inside the head element should not be displayed by a browser. Legal tags inside the head section. Defines a base URL for all the links on a page Defines a resource reference Defines meta information "Meta" means "information about". Defines the document title Defines a style definition Web Programming9

10 HTML Head tag – 1 It specifies a base URL for all of the links in a page Web Programming10 hi

11 HTML Head tag - 2 Where to open all the links on the page. This attribute is used as the target attribute in each link. Web Programming11 This link will load in a new window because the target attribute is set to "_blank". This link will also load in a new window even without a target attribute.

12 HTML Head tag It specifies an external document and defines the relationship between HTML and the document. A usual example Link to an external style sheet document Web Programming12 I am formatted with a linked style sheet Me too!

13 HTML Head tag It provides meta-information about the document Usually, it provides information that is relevant to browsers or search engines like describing the content of your document. A usual example 1 Document description Web Programming13 Hello

14 HTML Head tag A usual example 2 Document keywords since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely. Web Programming14 Hello

15 HTML Head tag A usual example 3 Redirect a browser to a new page It is not recommended to use this technique to redirect a browser to different pages, as this makes the page inaccessible to some browsers. Instead, automatic page forwarding should be done using a server- side script (e.g., JSP or PHP) Web Programming15 This page is under construction

16 HTML Attributes Core Attributes Not valid in,,,,,,, and elements Keyboard Attributes Web Programming16 AttributeValueDescription classclass_name or style_nameThe class of the element idid_nameA unique id for the element stylestyle_definitionAn inline style definition titletooltip_text A text to display in a tool tip AttributeValueDescription accesskeycharacterSets a keyboard shortcut to access an element tabindexnumberSets the tab order of an element

17 HTML Attributes accesskey attribute Syntax The following elements can support accesskey attribute a, area, button, input, label, and textarea. Web Programming17 user name Daum alt+u alt+b

18 HTML Attributes tabindex attribute Syntax Range of "iIndex " 1~32767: used for normal tabbing order 0 (default): used for the lowest tabbing ( ) The following elements can have focus a, button, iframe, img, input, object, select, textarea… Web Programming18

19 HTML Attributes tabindex attribute Web Programming19 Item 1 (no tab) Item 2 (no tab) Item 3 (no tab) Tab Item 1 Tab Item 2 Tab Item 3 Tab Item 4 Tab Item 5

20 HTML Events Window Events Only valid in body and frameset elements. Form Element Events Only valid in form elements Web Programming20 AttributeValueDescription onloadscriptScript to be run when a document loads onunloadscriptScript to be run when a document unloads AttributeValueDescription onchangescriptScript to be run when the element changes onsubmitscriptScript to be run when the form is submitted onresetscriptScript to be run when the form is reset onselectscript Script to be run when the element is selected onblurscript Script to be run when the element loses focus onfocusscript Script to be run when the element gets focus

21 HTML Attributes Window Events Example Web Programming21 function load() { window.status="Page is loaded"; } function mymessage() { alert("This message was triggered from me"); }

22 HTML Attributes Form Element Events Example - onchange Web Programming22 function upperCase(x) { var y=document.getElementById(x).value; document.getElementById(x).value=y.toUpperCase(); } Enter your name:

23 HTML Attributes Form Element Events Example - onblur Web Programming23 function upperCase() { var x=document.getElementById("fname").value; document.getElementById("fname").value=x.toUpperCase(); } Enter your name:

24 HTML Attributes Form Element Events Example - onselect Web Programming24 Select text: Select text: