HTML Basics
advertisement
HTML Basics HTML Introduction • Stands for HyperText Markup Language. • HTML files are plain text files with mark ups. • Some characteristics of HTML: – – – – No variables. No commands. Robust. A way to format documents. Tags • Tags are used to mark up a HTML document. • HTML tags have the following syntax: – < keyword > • Many tags have a ‘begin’ tag and an ‘end’ tag – Marks up the text between the tags. • The syntax is: – < keyword > … < /keyword > – e.g. <html> … </html> <b> … </b> Tag Attributes • Some tags have attributes to describe or modify what it is doing. • The syntax is: – < keyword key = value > … < /keyword > • Some examples: – <a href=http://www.utexas.edu>…</a> – <font color=“blue”>…</font> – <tr align=“center”>…</tr> Structure of HTML Documents • HTML documents are enclosed by html tags – <html>…</html> • The rest of the document has two sections – the head and body. <html> <head>…</head> <body>…</body> </html> Head Section • The head section contains information about the document. – e.g. the title of the document. • For example: <head> <title>My Home Page</title> </head> • “My Home Page” will appear in title bar of the browser. Body Section • The body section contains text that will be displayed in the browser window. • Some useful/common tags used in the body: – <br> - line break. White spaces are ignored. – <p> - paragraph break. – <center>…</center> - Centers the enclosed text. Body Section (cont.) • <font>…</font> - Sets the font property of the enclosed text. • The tag attributes are: – color: color=“blue”, color=“0000ff” – size: size=12, size=“+4” – face: face=“Courier”, face=“Times New Roman” More Tags • Links, • Tables • Lists Links • Links allow one html document to reference another. • The syntax is: – <a href = “URL”> … </a> • Example: – <a href=“http://www.utexas.edu”>Texas</a> • Texas appears in the browser, and clicking on it takes you to www.utexas.edu Tables • Tables are created using the following tags – Only the first 3 tags are required. • The 4 tags are: – – – – <table>…</table> - encloses the entire table. <tr>…</tr> - encloses a single row of a table. <td>…</td> - encloses a single cell of a table. <th>…</th> - encloses the column heading of a table. Example <table> <tr> <th>Item</th> <th>Cost</th></tr> <tr> <td>Shirt</td> <td>12.00</td> </tr> <tr> <td>Pants</td> <td>32.00</td> </tr> <tr> <td>Shoes</td> <td> 25.00</td> </tr> </table> Example (cont.) Item Cost Shirt 12.00 Pants 32.00 Shoes 25.00 Lists: Ordered • There are 3 kinds of lists: – ordered, unordered, and definition. • An ordered list is a list where the elements are numbered. • The syntax is: <ol> <li>…</li> <li>…</li> … </ol> Lists: Unordered • An unordered list is a list where the elements are bulleted. • The syntax is: <ul> <li>…</li> <li>…</li> … </ul> Lists: Definition • A list of definitions. • The syntax is: <dl> <dt>…</dt> <dt>…</dt> … </dl> <dd>…</dd> <dd>…</dd> • <dt>…</dt> - encloses the term. • <dd>…</dd> - encloses the definition. Macros • Some texts are reserved or ignored. – e.g. <, white space, etc.. • Special macros are needed for these. • Some common macros: – – – – – &lt &gt &amp &quot &nbsp → → → → → < > & “ non-breaking white space
