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