Introduction to HTML II Shih-Heng Chin
Preface Structure of a HTML File Elements used frequently Tables
Structure of a HTML File (HTML Version Information) Head Title Meta Data Body
Important Meta Data Content-type Type Charset Refresh
Example <!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN" "http:/ /www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Home - Web</title> <meta http-equiv="Content-Type" content="text/html; charset=Big5"> <meta http-equiv="refresh" content="10;URL=http:/ /www.yam.com"> </head> <body> Hi </body> </html>
Result
Elements Used Frequently Text: FONT, B, I Paragraph: P, BR, PRE. ❋ Space characters (Block: DIV , SPAN) List: OL, UL, LI Figure: IMG Hyperlink: A
Structure of A Tag <BODY bgcolor=”#FFFFFF”> Element name: BODY Attribute: Name: bgcolor Value: #FFFFFF Start tag: <BODY> End tag: </BODY>
Attribute of FONT size Value: 1, 2, 3, 4, 5, 6, 7 +n or -n color face
Example of FONT <FONT size=”3” color=”#FF0000”>3</FONT> <FONT size=”5”>5</FONT> <FONT size=”7”>7</FONT> <FONT size=”+3”>6</FONT>
B, I B Text in Bold Font <STRONG> I Text in Italic Font <EM>
P, BR P Form a paragraph BR Add a line break Start tag only, there isn’t </BR>
PRE and Space Characters In HTML, all continued space characters, include space and tab, are merged into one space only. Use PRE to control space character manually.
Example of PRE Without PRE: int main(void)<br> {<br> return 0;<br> } With PRE: <pre> int main(void) { return 0; } </pre>
List - OL, UL, LI OL Ordered lists UL Unordered lists LI List items
Example of List <ol> <li>Project Name</li> <li>Team Member</li> <li>Timeline </li> </ol> <ul> <li>CD</li> <li>LD</li> <li>DVD</li> </ul>
Attributes of IMG src - Location of image file, URI (protocol:/ / host/folder/resouse) width height alt - Text for user can’t display images border Start tag only
Attributes of A href target Frame id Window id _blank, _top, _parent, _self
Tables Basic Table Structure Merge cells
Basic Table Structure Table Cell Row
Table Elements TABLE Row: TR Cell: TD, TH
Attribute of TABLE bgcolor border width, height cellspacing cellpadding
width, height of TABLE pixels width=”300” percent width=”90%”
border, cellspacing, cellpadding cellpadding border cellspacing
Example of TABLE <table> <tr> <td>1</td> <td>2</td> <td>3</td> 1 2 3 </tr> <tr> <td>4</td> <td>5</td> 5 6 4 <td>6</td> </tr> <tr> 7 8 9 <td>7</td> <td>8</td> <td>9</td> </tr> </table>
Merge Cells Attributes of TD rowspan Merge cells in the same column colspan Merge cells in the same row
Example of Merging Cells <table align="center"> <tr> <td colspan="2">1</td> 1 3 <td>3</td> </tr> <tr> <td>4</td> 5 6 4 <td>5</td> <td rowspan="2">6</td> </tr> 7 8 <tr> <td>7</td> <td>8</td> </tr> </table>
Recommend
More recommend
