Basic HTML How to use Hyper Text Markup

Basic HTML How to use Hyper. Text Markup Language

Markup Tips a. Write HTML tags in lowercase (�� HTML tags �� ) b. Indent code to improve readability (�� ) c. Use HTML comments to improve clarity (�� )

HTML Comments (�� ) a. Use to explain more about the code (�� ) b. Browsers will ignore these lines (�� ) c. Not displaying on the front-end (�� ) d. Example :

HTML Coding Standards (�� ) a. DOCTYPE (�� ) b. General HTML Structure (�� HTML) c. Structural Markup (�� HTML)

DOCTYPE (�� ) a. Stands for "document type declaration" (DTD) b. What are document types? (�� ? ) This tells the browser which HTML or XHTML specification the document uses. (�� browser �� ) b. DOCTYPE need to declare for validation (�� ) a. c. How to use them? These are found at the very top of the a HTML page, (�� HTML) b. before the <html> tag. (�� <html> tag) c. Enclosed in the <!DOCTYPE> tag. (�� <!DOCTYPE>) a. <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd">

HTML DOCTYPE a. HTML Strict DTD b. <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> c. HTML Transitional DTD d. <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> e. HTML Frameset DTD f. <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Frameset//EN“ "http: //www. w 3. org/TR/html 4/frameset. dtd">

XHTML DOCTYPE a. XHTML Strict DTD b. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> c. XHTML Transitional DTD d. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> e. XHTML Frameset DTD f. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -frameset. dtd">

HTML Validator a. Local Validator b. Homesite (Shift + F 6) c. Online Validator d. http: //validator. w 3. org • Sample Sites: http: //www. sanook. com http: //www. manager. co. th

General HTML Structure <!DOCTYPE> <html> <head> <title>title</title> <meta name="keywords" content=". . . " > <link rel="stylesheet" href=". . . "> <script type="text/javascript" src=". . . " ></script> </head> <body> . . . </body> </html>

Structural Markup a. Markup information in a structured way using the appropriate containers. a. Headers <h 1>, <h 2>. . . b. Divs <div> c. Paragraphs <p> d. Lists <ul><li></ul>, <ol><li></ol> e. Tables <table> f. Media such as images <img src=". . . " alt="description" g. Links <a href=". . . "> h. Forms <form> />

Headers (�� ) a. For defining headings (�� ) b. <h 1>This is a top level header</h 1>, there should only be one <h 1> on a page (�� ) c. Sub-headers can be defined by using a number greater than 1. e. g. <h 2>, <h 3> (�� ) d. We are able to have multiple sub-headers. (�� ) e. We should not use headers greater than 6 (�� 6 �� )

Divs a. The <div> tag is used to define a division/section in a document (�� ) b. It can contain block-elements, e. g. headers, <p> etc. (�� ) c. Use the <div> tag to group block-elements to format them with styles. (�� <div> �� )

Paragraphs (�� ) a. The <p> tag is used to define a paragraph of text. (�� ) b. It can not contain block-level elements, e. g. table, headers, divs etc. (�� block-level element �� table, headers divs �� ) c. We should always close this tag. (�� ) E. g. <p>This is a paragraph</p>

Lists (�� -�� ) a. These are used to specify lists of information (�� ) b. There are 3 types of lists (�� 3 �� ) a. b. c. Unordered list <ul><li></ul> (�� ) Ordered lists <ol><li></ol> (�� ) Definition lists <dl><dt></dt><dd></dd><dl> (�� ) c. We can combine these lists. So it is valid to have a order list within an unordered list. (�� )

Unordered list (�� ) <ul> <li>Home</li> <li>Products</li> <li>About Us</li> <li>Sitemap</li> </ul> �� a. Home • Products • About Us • Sitemap

Ordered lists (�� ) <ol> <li>Home</li> <li>Products</li> <li>About Us</li> <li>Sitemap</li> </ol> �� 1. Home – Products – About Us – Sitemap

Definition lists (�� ) <dl> <dt>HTML</dt> <dd>Hypertext Mark up Language</dd> <dt>XHTML</dt> <dd>EXtensible Hyper. Text Markup Language</dd> </dl> �� HTML a. Hypertext Mark up Language XHTML a. EXtensible Hyper. Text Markup Language

Tables (�� ) a. Used for displaying tabular information (�� ) <table summary="table of client names and their contact number"> <caption>Client’s Number</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Contact Number</th> </tr> </thead> <tbody> <tr> <td>Jack</td> <td>0837858135</td> </tr> <td>Rose</td> <td>0860532282</td> </tr> </tbody> </table>

Media (�� ) a. <img> tags must have a descriptive alt attribute. A value must be assigned to this if it is for information purposes (�� <img> �� alt �� ) b. Example: providing an alt tag for a logo image <img src="http: //www. google. co. th/intl/en_com/images/logo_plain. png" alt="Google">

Links (�� -�� ) a. <a> use for display link that can jump to specified location (�� <a> �� ) b. Use a ‘title’ attribute if the link is not clear (�� title �� ) E. g. <a href="contact. html" title="contact us">click here</a> <a href="contact. html">To contact us please click here</a>

Forms (�� ) a. Forms allow us to capture information from the user. (�� ) b. Tags needed to increase accessibility (�� ) <fieldset> to group related form controls and labels (�� ) b. <legend> to describe a fieldset (�� ) c. <label> to describe an input control (�� ) a.

Forms <form name="form 1" method="post" action="signin. php"> <fieldset> <legend>Member Login</legend> <label for="username">User Name</label> <input type="text" id="username" name="username"> <label for="password">Password</label> <input type="password" id="password" name="password"> </fieldset> <input type="submit" value="Submit"> </form>

Form elements and attributes

Form elements a. <input> use to create form elements b. Text fields <input type="text" name="test" value="Default text" size="12" maxlength="20"> • Radio Buttons <input type="radio" name="city" value="Los_Angeles" checked>Los Angeles <input type ="radio" name ="city" value="San_Diego">San Diego <input type ="radio" name ="city" value="San_Francisco">San Francisco

Form elements a. Checkboxes b. <input type="checkbox" name="city" value="Los_Angeles" checked>Los Angeles <input type="checkbox" name="city" value="San_Diego">San Diego <input type="checkbox" name="city" value="San_Francisco">San Francisco c. Submit buttons d. <input type="submit" name="Submit" value="Submit">

Form elements a. Selection List (Dropdown list) Use <select>, <option> <label for="test">Your Gender: </label> <select name="test" id="test"> <option>Please select. . . </option> <option>Male</option> <option>Female</option> </select>

Form elements a. Textareas: allow users to type in much more information and are useful for obtaining user feedback. <textarea name="Text_Box" cols="20" rows="4" value="">Some text in textarea. </textarea>

Online Resources a. http: //www. w 3 schools. com

Session Summary a. Able to Identify DOCTYPE b. Able to hand-coded HTML pages and forms following the standards c. Know how to validate HTML code