Introduction to HTML

The HyperText Markup Language (HTML) is a set of tags that defines the structure and appearance of Web documents. HTML source code is plain-text. You can learn it by example, by looking at the HTML code of any Web page that catches your eye; just select Page Source from your browser's View pull-down menu.

HTML Tag Syntax

  1. <tagname> some content
  2. <tag-name> some content </tag-name>
  3. <tag-name attribute-name=argument ...>
    some content
    </tagname>

Web Page Skeleton 

<html>
   <head>
       <title> some text for title bar </title>
   </head>
   <body>
       <H1>A Document Heading</H1>
 
       This is the text of the first paragraph.
       ...
 
       <p>
       A second paragraph. ...
   </body>
</html>

Common HTML Tags

  1. To set a background:
    <body background="background-graphic.gif">
  2. To create an unordered list:
    <ul>
    <li>    Item 1
    <li>Item 2
    <li>Item 3
    </ul>
  3. To get a horizontal rule: <hr size=4 width="75%">
  4. Bold text: <b> some text </b>
  5. Italic Text: <i> some text </i>
  6. Typewriter text: <tt> some text </tt>
  7. Increasing the font size:
    <font size="+"> some text </font>
  8. Changing the font size and color:
    <font color="#xxxxxx" size=n> some text </font>
  9. To embed an image: <img src="graphic.gif" align=middle>
  10. A relative hyperlink:
    <a href="somepage.html">Linked text</a>
  11. A relative link using a graphic as the linked text:
    <a href="syllabus.html"><img src="syllabus.gif"></a>
  12. A relative link of a graphic to another graphic:
    <a href="photograph.jpg"><img src="thumbnail.jpg"></a>
  13. An absolute hyperlink:
    <a href="http://www.uic.edu">UIC Home Page</a>
  14. Defining an anchor name for a link within the same document
    <a name="WK2">Lecture Materials for Week 2</a>
  15. A relative link using an anchor name:
    <a href="WK2">Click for Week 2 materials</a>

HTML code for a simple Table

<table>
    <tr>
        <th>Column One</th>
        <th>Column Two</th>
    </tr>
    <tr>
        <td>Contents of row 1, column 1 </td>
        <td>Contents of row 1, column 2 </td>
    </tr>
    <tr>
        <td>Contents of row 2, column 1 </td>
        <td>Contents of row 2, column 2 </td>
    </tr>
</table>

Last Modified: January 27, 1998 ITL