1. HyperText Markup Language (HTML) – Part 2 Laboratory of Intelligent Networks (LINK) @ KUT http://link.kut.ac.kr Youn-Hee Han from http://www.w3schools.comhttp://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 http://link.kut.ac.kr/2008_1/WP/216color-code.html The palette of most colors http://link.kut.ac.kr/2008_1/WP/color-code.html 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 <meta name="keywords content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" /> 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: <input type="text" value="Hello world!" onselect="alert('You have selected some of the text.')" /> Select text: <textarea cols="20" rows="5" onselect="alert('You have selected some of the text.')" /> Hello world!

25. HTML Events Keyboard Events Not valid in br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Web Programming25 AttributeValueDescription onkeydownscript What to do when key is pressed onkeypressscript What to do when key is pressed and released onkeyupscript What to do when key is released

26. HTML Attributes Keyboard Events Example - onkeydown Web Programming26 cnt=1; function showkey(){ if (cnt%20==0){ cnt=1; showchar.innerHTML+=' '; showcode.innerHTML+=' '; } cnt++; showchar.innerHTML+='('+String.fromCharCode(event.keyCode)+') '; showcode.innerHTML+='('+event.keyCode+')'; } : <input id="textobj" type="text" onkeydown="showkey()" onfocus="this.style.backgroundColor='cfc'" onblur="this.style.backgroundColor='fff'" />

27. HTML Events Mouse Events Not valid in br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. Web Programming27 AttributeValueDescription onclickscript What to do on a mouse click ondblclickscript What to do on a mouse double-click onmousedownscript What to do when mouse button is pressed onmousemovescript What to do when mouse pointer moves onmouseoutscriptWhat to do when mouse pointer moves out of an element onmouseoverscriptWhat to do when mouse pointer moves over an element onmouseupscript What to do when mouse button is released

28. HTML Attributes Keyboard Events Example - onkeydown Web Programming28 function mouseTest(){ str='event.srcElement.tagName='+event.srcElement.tagName+' '; str+='event.srcElement.id='+event.srcElement.id+' '; str+='event.srcElement.type='+event.srcElement.type+' '; str+='event.type='+event.type+' '; show.innerHTML=str; }..

29. URL Encoding What is URL Encoding? the process of converting "a string" into "a valid URL format" by converting "prohibited characters" into "valid characters" URL encoding is normally performed to convert data passed via html forms, because such data may contain special character, such as "/", ".", "#", and so on What characters need to be encoded ASCII Control characters e.g.] carriage return (CR) %0d Non-ASCII characters e.g.] %26%2354620%3B%26%2344397%3B Reserved characters e.g.] ampersand ("&") %26 Unsafe characters e.g.] 'Less Than' symbol ("<") %3c Web Programming29

30. URL Encoding Encoding of reserved and unsafe characters Web Programming30

31. URL Encoding Example One of the most common encounters with URL Encoding is when dealing with s. Form methods (GET and POST) perform URL Encoding implicitly Web Programming31 http://icl.kut.ac.kr/example.html?var=This+is+a+simple+%26+short+test http://icl.kut.ac.kr/example.html?var=%24+%26+%3C+%3E+%3F+%3B+%23+%3A +%3D+%2C+%22+%27+%7E+%2B+%25

32. Recommandation http://www.w3schools.com http://www.cadvance.org/ Web Programming32