Summary Tag Info Version Attributes <!-- --> Comment 4/5 <!DOCTYPE Document type 4/5 <a> Hyperlink 4/5 href: destination resource of the hyperlink target: specify where the content will be displayed [_blank or _parent or _self] <article> A section of a 5 page <aside> Outside the main 5 flow of the narrative <audio> Sound content 5 autoplay: determine if the audio will automatically play controls: indicates a set of basic control loop: sets whether the aduio will start once the end is reached src: URL of the audio to play Body element 4/5 (main content) <br /> Inserts a single 4/5 line break <canvas> Graphic area 5 Height Width <div> Document block: 4/5 creates a block level element <em> Emphasized text 4/5 <font> Text font, size and 4 color <footer> Footer for a 5 section <form> Form element 4/5 action: URL that specifies a form processing agent enctype: specifies the content type used to submit the form to the server [application/x-www-formurlencoded or multipart/form-data or text/plain] method: specifies the HTTP method used to submit the form data [ get or post or put] name: elements name <h1> to Headers 4/5 <h6> <head> Head element (contains info about the html) 4/5 <hr> Horizontal rule 4/5 <iframe> Inline frame 4/5 src: URL of a page that the inline frame would contain name: elements name height: width: <img> Image 4/5 src: URL to the image file
height: width: <input> Input field 4/5 name: element name pattern: specifies a regular expression for the control readonly: determines if the control is readonly required: determines if the input is required before the form is submitted. size: specifies the number of characters that is allowed type: controls the data type [ hidden or text or tel or url or email or password or datetime or date or month or week or time or number or range or color or checkbox or radio or file or submit or image or reset or button] <label> Label for a form control 4/5 for: specified to indicate a form control with which the caption is to be assiciated <li> List item 4/5 value: used in an Ordered List to set the display value <nav> Navigation links 5 <ol> Ordered list 4/5 start: the ordinal value of the first list item reversed: indicates that the list is in descending order <option> Option in a dropdown list 4/5 label: provides a label for element selected: determines if the option is selected by default value: provides a value for element <p> Paragraph 4/5 <select> Selectable list 4/5 multiple: specifies whether selection of multiple items be allowed size: gives the number of options to be displayed <span> Inline element 4/5 <strong> Strong text 4/5 <table> Table element 4/5 <td> Talbe cell 4/5 colspan: sets the number of columns a cell would span rowspan: sets the number of rows a cell would span <textarea> Text area 4/5 cols: specifies the maximum number of characters per row readonly: specifies whether the text can be edited required: specifies whether a value needs to be entered before form submission rows: specifies the number of lines to show maxlength: specifies the maximum number of characters that can be entered <tr> Table row 4/5 <ul> Unordered list 4/5 <video> Video element 5 poster: URL of an image file that is show n when no video content is available autoplay: control: indicates a set of basic control loop: src: width: height:
1. Basic Tags <html> <head> <title> Defines a html document Defines the head element Defines the title Defines the body element <html> <head> <title> Title, displayed in IE </title> </head> this is the main content </body> </html> o Background= image1.jpg Defines a background image <h1> <h6> to Defines header 1 to header 6 <html> <head> <title>heading Size </title> </head> <h1> This is level 1 header </h1> <h2> This is level 2 header </h2> <h3> This is level 3 header </h3> <h4> This is level 4 header </h4> <h5> This is level 5 header </h5> <h6> This is level 6 header </h6> </body> </html> <p> Defines a paragraph <html> <head> <title>common Tags </title> </head> <h1>hypertext MarkUp Language (HTML) </h1> <p> HTML is the programming language used to create documents for the world wide web. Using HTML, you define a web document's structure by using such components as attributes and tags. </p> <p> HTML tags are used to format a web page's look, to position graphics and multimedia elements, and to incorporate components created in other programming languages such as Java or Flash. </p> </body> </html>
<br /> <hr /> <!-- comment --> Inserts a single line break Defines a horizontal rule width: defines length of the horizontal rule e.g., <hr width= 50% /> Defines a comment <html> <head> <title>common Tags </title> </head> <h1 align="center"> HTML </h1> <p> Paragraph 1 </p> <p> Paragraph 2 </p> <hr /> <p> Paragraph 3 </p> <br /> <p> Paragraph 4 </p> 2. Char Format <em> <strong> <u> Defines emphasized text Defines strong text Defines underlined text <html> <head> <title> Common Tags </title> </head> <h1 align="center"> HTML </h1> <p> HTML is the <u> programming language </u> used to create documents for the world wide web. Using HTML, you define a web document's structure by using such components as <em> attributes </em> and <em> tags </em>. </p> <p> HTML tags are used to format a web page's look, to position graphics and <strong> multimedia </strong> elements, and to incorporate components created in other programming languages such as Java or Flash. </p>
3. Blocks <center> Defines centered text <html> <head> <title> Title </title> </head> <center> <h1> HTML </h1> <p> Paragraph 1 </p> <p> Paragraph 2 </p> <hr width="70%" /> </center> 4. Links <a> Defines an anchor Attributes: target: define where the target document will be opened title: specify a tool tip when the mouse moves over the anchor text e.g., <a href= http://www.eie.polyu.edu.hk title= EIE Home Page target= _blank > To an email: <a href= mailto: a@b.com > <a href= mailto: a@b.com?subject=a > <a href= mailto:a@b.c,d@e.f > Internal Linking: 1. first mark a point <a name= point1 > <html> <head> <title> Title </title> </head> <hr width="90%" /> <h1> Some linking points </h1> <p> <a href="http://www.eie.polyu.edu.hk"> <strong> EIE Home Page </strong> </a> </p> <p> <a href="http://www.polyu.edu.hk"> <strong> Poly Univ Home Page </strong> </a> </p>
2. make the linking <a href= #point1 > 5. Images <img> Defines an image o border= 1 specifies the border width (in terms of the numbers of pixel) <html> <head> <title>common Tags </title> </head> <h1 align="center"> HTML </h1> <p> <a href="http://www.eie.polyu.edu.hk/~nflaw"> <img src="baby.jpg" height="20" width="20" alt = "My home page" /> </a> </p> Lists <ul> <li> Defines an unordered list Defines a list item <html> <head> <title> Title </title> </head> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <ol> Defines an ordered list Attributes: type= o 1: decimal o I: upper roman o i: lower roman o A: upper Latin o a: lower Latin <html> <head> <title> Title </title> </head> <p> Decimal Ordering </p> <ol type="1"> <li> Item 1 </li> <li> Item 2 </li> </ol> <hr /> <p> Upper Romain Ordering </p> <ol type="i"> <li> Item 1 </li> <li> Item 2 </li> </ol> <hr /> <p> Lower Romain Ordering </p> <ol type="i"> <li> Item 1 </li> <li> Item 2 </li> </ol> <hr /> <p> Uppercase Latin Ordering </p>
<ol type="a"> <li> Item 1 </li> <li> Item 2 </li> </ol> <hr /> <p> Lowercase Latin Ordering </p> <ol type="a"> <li> Item 1 </li> <li> Item 2 </li> </ol> Tables <table> <caption> <th> <tr> <td> <thead> <tbody> Defines a table Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body <html> <head> <title> Table </title> </head> <table border="1" width="60%"> <caption> Price of Fruit </caption> <thead> <tr> <th> Fruit </th> <th> Price </th> </tr> </thead> <tbody> <tr> <td> Apple </td> <td> $2.00 </td> </tr> <tr> <td> Orange </td> <td> $3.00 </td> </tr> <tr> <td> Banana </td> <td> $1.50 </td> </tr> </tbody> <tfoot> <tr> <th> Total </th> <th> $6.50 </th> </tr> </tfoot> </table>
colspan rowspan border cell-padding cellspacing Defines groups of table columns Defines groups of table rows Specifies the border width in terms of the numbers of pixel Specifies spacing between the cell walls and the contents Specifies spacing in between cells <html> <head> <title> Table </title> </head> <table border="1" width="80%"> <caption> Average Grades </caption> <tr> <th colspan="4"> Report </th> </tr> <tr> <th> </th> <th> 2002 </th> <th> 2003 </th> <th> 2004 </th> </tr> <tr> <td> Maths </td> <td> A </td> <td rowspan="2" valign="center"> B </td> <td> C </td> </tr> <tr> <td> English </td> <td> C </td> <td> A </td> </tr> </table> Input <form> <input> Defines a form <form name= myform id= myform action= a.php method= post > Defines an input field <html> <head> <title>form </title> </head> <form name="myform" id="myform" method="post" action="mailto:a@b.c?subject='enquire'"> <label> First name: </label> <input type="text" name="firstname" size="25" /> <label> Last name: </label> <input type="text" name="lastname" size="10" /> <hr />
<textarea> <select> <option> <label> <button> type: can be: o text: text box o submit: o reset: checkbox o radio Defines a text area Defines a selectable list Defines an item in a list box Defines a label for a form control Defines a push button <p> <input name="things" type="checkbox" value="1" /> Ham <input name="things" type="checkbox" value="mushroom" /> Mushroom <input name="things" type="checkbox" value="chicken" /> Chicken <input name="things" type="checkbox" value="5" /> Peas </p> <p> <input name="size" type="radio" value="large" checked="checked" /> Large <input name="size" type="radio" value="medium" /> Medium <input name="size" type="radio" value="small" /> Small </p> <p> How would you like to pay? <select name="paymethod"> <option value="2" selected="selected" > Cash </option> <option value="3">visa </option> <option value="4">master </option> </select> </p> <p> Your comment: </p> <textarea name="comment" rows="10" cols="40"> Your comment please. </textarea> <p> <input type="submit" value="submit" /> <input type="reset" value="clear" /> </p> </form>