KMUTNB - Internet Programming 3/7


Published on

Lecture for King Mongkut's University of Technology North Bangkok (KMUTNB) / Computer Science / Internet Programming Course by PHUPHA

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

KMUTNB - Internet Programming 3/7

  1. 1. HTML Basic and Cascade Style Sheet By: Mr. PHUPHA PUNYAPOTASAKUL ( ภูผา ปัญญาโพธาสกุล )
  2. 2. What’s HTML <ul><li>Hypertext Markup Language </li></ul><ul><li>Why we need to have markup </li></ul><ul><ul><li>Represent how content displays </li></ul></ul><ul><ul><li>Represent various objects </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
  3. 3. Elements and Tags <ul><li>Element composes of </li></ul><ul><ul><li>Start tag </li></ul></ul><ul><ul><li>Sub element or Text </li></ul></ul><ul><ul><li>End tag </li></ul></ul><ul><li>E.g. <EM>This is emphasized text</EM> </li></ul><ul><li>Nested element </li></ul><ul><li>Overlap? </li></ul><ul><li>Empty tag E.g. <br/> </li></ul>
  4. 4. Attributes <ul><li>An element's attributes define various properties for the element . </li></ul><ul><li>Format: Attribute-name =&quot; Attribute-value &quot; </li></ul><ul><li>E.g. <IMG SRC =&quot; wdglogo . gif &quot; ALT =&quot; Web Design Group &quot; > </li></ul><ul><li>An attribute is included in the start tag only </li></ul>
  5. 5. Special Characters <ul><li>some character make browser confuse </li></ul><ul><li>Replace with escape character </li></ul><ul><li>Reference http :// htmlhelp . com / reference / html40 / entities / </li></ul><ul><li>Unicode escape character E.g. &#169 </li></ul>&quot; “ &amp; & &gt; > &lt; <
  6. 6. Comments <ul><li>Begin a comment with &quot; <!-- “ </li></ul><ul><li>end it with &quot; --> “ </li></ul><ul><li>and do not use &quot; -- &quot; within the comment . </li></ul><ul><li>E.g. < !-- An example comment -- > </li></ul>
  7. 7. A Complete HTML 4 Document <ul><li>Compose of </li></ul><ul><li>DOCTYPE declaration </li></ul><ul><li>HTML element </li></ul><ul><ul><li>Head element contains information about the document, such as its title and keywords </li></ul></ul><ul><ul><li>Body element contains the actual content of the document </li></ul></ul>
  8. 8. Example <ul><li>< ! DOCTYPE HTML PUBLIC &quot;-// W3C // DTD HTML 4.01 // EN &quot; </li></ul><ul><li>&quot; http :// www . w3 . org / TR / html4 / strict . dtd &quot; > </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>The document title< / TITLE> </li></ul><ul><li>< / HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><H1>Main heading< / H1> </li></ul><ul><li><P>A paragraph . < / P> </li></ul><ul><li><P>Another paragraph . < / P> </li></ul><ul><li><UL> </li></ul><ul><li><LI>A list item . < / LI> </li></ul><ul><li><LI>Another list item . < / LI> </li></ul><ul><li>< / UL> </li></ul><ul><li>< / BODY> </li></ul><ul><li>< / HTML> </li></ul>
  9. 9. Basic Tag <ul><li>Heading h1-6 <h1>this is a header</h1> </li></ul><ul><li>Paragraph <p>this is a paragraph</p> </li></ul><ul><li>Line break (br) <p>this is a <br> a paragraph</p> </li></ul>
  10. 10. Basic Tag <ul><li><b> Defines bold text </li></ul><ul><li><big> Defines big text </li></ul><ul><li>< em > Defines emphasized text  </li></ul><ul><li><i> Defines italic text </li></ul><ul><li><small> Defines small text </li></ul><ul><li><strong> Defines strong text </li></ul><ul><li><sub> Defines subscripted text </li></ul><ul><li><sup> Defines superscripted text </li></ul><ul><li><ins> Defines inserted text </li></ul><ul><li><del> Defines deleted text </li></ul>
  11. 11. HTML Links <ul><li><a href=“URL”>link</a> </li></ul><ul><li>External link </li></ul><ul><ul><li>Relative path ../img/logo.gif </li></ul></ul><ul><ul><li>Absolute path /img/logo.gif </li></ul></ul><ul><ul><li>Full path http://www.example/img/logo.gif </li></ul></ul><ul><ul><li>Don’t use only </li></ul></ul><ul><li>Internal link point </li></ul><ul><ul><li>Link point <a name=“topic1”></a> </li></ul></ul><ul><ul><li>Link <a href=“thispage.htm#topic1”> </li></ul></ul>
  12. 12. URL Encode <ul><li>href=“test.htm?a=a&b= กง ” </li></ul><ul><li>Encoded URL test . htm?a = a&b =% E0%B8%81%E0%B8%87 </li></ul><ul><li>If value have character = or & href=“test.htm?a=a&b= กง &c=1=2&d=&&” </li></ul><ul><li>Use escape character = use %3d, & use %26 </li></ul><ul><li>Full reference http :// www . w3schools . com / html / html_urlencode . asp </li></ul>
  13. 13. HTML Frames <ul><li>Example </li></ul><ul><li><frameset cols =&quot; 25%,75% &quot; > </li></ul><ul><li><frame src =&quot; frame_a . htm &quot; > </li></ul><ul><li><frame src =&quot; frame_b . htm &quot; > </li></ul><ul><li>< / frameset> </li></ul><ul><li>Nested Frame </li></ul><ul><li><frameset cols =&quot; 25%,75% &quot; > </li></ul><ul><li><frame src =&quot; frame_a . htm &quot; > </li></ul><ul><li><frameset cols =&quot;* ,100 &quot; > </li></ul><ul><li> <frame src =&quot; frame_a . htm &quot; > </li></ul><ul><li> <frame src =&quot; frame_b . htm &quot; > </li></ul><ul><li>< / frameset> </li></ul><ul><li>< / frameset> </li></ul>
  14. 14. HTML Frames <ul><li>Specify size </li></ul><ul><ul><li>Percentage – 10% </li></ul></ul><ul><ul><li>Pixel - 100 </li></ul></ul><ul><ul><li>Automatic - * </li></ul></ul><ul><li>Specify Link Target <a href=“..” target=“_blank”>.. </li></ul><ul><ul><li>_blank: new window </li></ul></ul><ul><ul><li>_parent: parent frame </li></ul></ul><ul><ul><li>_self: current frame </li></ul></ul><ul><ul><li>_top: root frame </li></ul></ul>
  15. 15. HTML Table <ul><li><table border =&quot; 1 &quot; > </li></ul><ul><li><tr> </li></ul><ul><li><td>row 1, cell 1< / td> </li></ul><ul><li><td>row 1, cell 2< / td> </li></ul><ul><li>< / tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 2, cell 1< / td> </li></ul><ul><li><td>row 2, cell 2< / td> </li></ul><ul><li>< / tr> </li></ul><ul><li>< / table> </li></ul>
  16. 16. Attributes <ul><li>Table attributes </li></ul><ul><ul><li>border=“0” </li></ul></ul><ul><ul><li>cellspaceing=“5” </li></ul></ul><ul><ul><li>cellpadding=“3” </li></ul></ul><ul><ul><li>bgcolor=“#efefef” </li></ul></ul><ul><li>TD attribute s </li></ul><ul><ul><li>colspan=“2” </li></ul></ul><ul><ul><li>rowspan=“2” </li></ul></ul><ul><ul><li>align=“center” </li></ul></ul><ul><ul><li>valing=“middle” </li></ul></ul><ul><ul><li>bgcolor=“#efefef” </li></ul></ul>
  17. 17. HTML Lists <ul><li>Unordered List </li></ul><ul><li><ul> </li></ul><ul><li><li>Coffee</li> </li></ul><ul><li><li>Milk</li> </li></ul><ul><li></ul> </li></ul><ul><li>Ordered List </li></ul><ul><li><ol> </li></ul><ul><li><li>Coffee</li> </li></ul><ul><li><li>Milk</li> </li></ul><ul><li></ol> </li></ul>
  18. 18. Image <ul><li>E.g. <img src =&quot; url &quot; > </li></ul><ul><li>Attributes </li></ul><ul><ul><li>alt : alternate text </li></ul></ul><ul><ul><li>border : border size </li></ul></ul><ul><ul><li>width : image width </li></ul></ul><ul><ul><li>height : image height </li></ul></ul><ul><li>What if actual image size is not the same as width or height attribute value? </li></ul><ul><li>Use image as a link? </li></ul>
  19. 19. Background <ul><li>Some objects may have background E.g. body, table, td </li></ul><ul><li>bgcolor: specify background color e.g <body bgcolor=“#efefef”.. </li></ul><ul><ul><li>#efefef </li></ul></ul><ul><ul><li>rgb ( 0,0,0 ) </li></ul></ul><ul><ul><li>black </li></ul></ul><ul><li>background: specify background image e.g. <body background=“logo.gif”.. </li></ul><ul><ul><li>Absolute path / full path </li></ul></ul><ul><ul><li>Relative path </li></ul></ul>
  20. 20. HTML Form <ul><li>Form represent a group of inputs </li></ul><ul><li><form name=“f1” action=“url”> </li></ul><ul><li><input ..> <input ..> <input ..> </li></ul><ul><li></form> </li></ul><ul><li>Content inside form tag can be any HTML elements </li></ul><ul><li>Submitting form, only value of input object inside the form will be submitted to server </li></ul>
  21. 21. Input type <ul><li>Text box </li></ul><ul><li><input type=“text” name=“iname”> </li></ul><ul><li>Radio button </li></ul><ul><li><input type=“radio” name=“iname”> </li></ul><ul><li>Check box </li></ul><ul><li><input type=“checkbox” name=“iname”> </li></ul><ul><li>Selection </li></ul><ul><li><select name=“iname&quot;> </li></ul><ul><li><option value=“1&quot;>Fresh Milk</option> </li></ul><ul><li><option value=“2&quot;>Coffee</option> </li></ul><ul><li></select> </li></ul>
  22. 22. Input Type <ul><li>Password input </li></ul><ul><li><input name =&quot; iname &quot; type =&quot; password &quot;/ > </li></ul><ul><li>Textarea </li></ul><ul><li><textarea name=&quot;iname&quot;></textarea> </li></ul><ul><li>Hidden field </li></ul><ul><li><input type=&quot;hidden&quot; name=&quot;iname&quot;> </li></ul><ul><li>Button </li></ul><ul><li><input type=&quot;submit&quot; name=&quot;iname&quot; value=&quot;Submit&quot;> </li></ul><ul><li><input type=“reset&quot; name=&quot;iname&quot; value=&quot;Submit&quot;> </li></ul><ul><li><input type=“button&quot; name=&quot;iname&quot; value=&quot;Submit&quot;> </li></ul>
  23. 23. Input Type <ul><li>Image field <input type=&quot;image&quot; name=&quot;iname&quot; src=&quot;logo.gif&quot;> </li></ul><ul><li>File field </li></ul><ul><li><input type=&quot;file&quot; name=&quot;iname&quot;> </li></ul>
  24. 24. Head Element <ul><li>The elements inside the head element should not be displayed by a browser </li></ul><ul><li>According to the HTML standard, only a few tags are legal inside the head section . These are : <base>, <link>, <meta>, <title>, <style>, and <script> </li></ul>
  25. 25. Head Elements <ul><li><head> Defines information about the document </li></ul><ul><li><title> Defines the document title </li></ul><ul><li><base> Defines a base URL for all the links on a page </li></ul><ul><li><link> Defines a resource reference </li></ul><ul><li><meta> Defines meta information </li></ul>
  26. 26. Meta Elements <ul><li>general information ( meta - information ) about a document </li></ul><ul><li>Content Type <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=tis-620&quot; /> </li></ul><ul><li>Keyword for search engine <meta name=&quot;description&quot; content=“ .. &quot;> <meta name=&quot;keywords&quot; content=“ .. &quot;> </li></ul><ul><li>Refresh or redirect every interval time <meta http - equiv =&quot; refresh &quot; content =&quot; 5 &quot; / > <meta http - equiv =&quot; refresh &quot; content =&quot; 5;url= &quot; / > </li></ul>
  27. 27. Scripts <ul><li>External script <script type =&quot; text / javascript &quot; src =&quot; myscript . js &quot; >< / script> </li></ul><ul><li>Internal script <script type=&quot;text/javascript&quot;> document.write(&quot;Hello World!&quot;) </script> </li></ul><ul><li>To handle older browser <script type =&quot; text / javascript &quot; > <!-- document . write (&quot; Hello World !&quot;) //--> < / script> </li></ul>
  28. 28. Styles <ul><li>External style sheet <head> <link rel =&quot; stylesheet &quot; type =&quot; text / css &quot; href =&quot; mystyle . css &quot; > < / head> </li></ul><ul><li>Internal style sheet <head> <style type=&quot;text/css&quot;> body {background-color: red} p {margin-left: 20px} </style> </head> </li></ul><ul><li>Inline styles <p style=&quot;color: red; margin-left: 20px&quot;> .. </p> </li></ul>
  29. 29. Common Attributes <ul><li>Common attributes can use with almost all tags except base, head, html, meta, param, script, style, and title elements </li></ul><ul><ul><li>class : The class of the element </li></ul></ul><ul><ul><li>id : A unique id for the element </li></ul></ul><ul><ul><li>style : An inline style definition </li></ul></ul><ul><ul><li>title : A text to display in a tool tip </li></ul></ul>
  30. 30. Question & Answer