CORC 1312
Lab 3: HTML I

Make Your Own Home Page - Part I

Basic HTML

  1. HTML uses tags to instruct the browser how to display the text on the screen. Most tags come in pairs, one before the text on which they work, and one immediately after.

  2. The first line of a file to be displayed as a Web page is <html> ; the last line of the file is </html> All content that is to be displayed on the Web page must come between those two tags.

  3. A Web page is typically divided into two parts - the head and the body. The head is delimited by <head> and </head>, the body by <body> and </body>.

  4. The purpose of the head is to hold formatting information and the Web page title that will NOT be displayed on the Web page. To include a title for the Web page, precede it with the tag <title>. After the text for the title put </title> . The title appears in the title bar, if the browser has one, and it is used in internet searches.

  5. The text to be displayed on the screen goes in the body of the HTML page. Any spacing or line breaks in the HTML file are ignored by the browser when the text is displayed on the screen. In order to insert a new line, we must use the <br /> tag which inserts a line break.

  6. The paragraph tag, <p>, is used to break the text into paragraphs. The end of a paragraph is marked with </p>.

  7. If we want some text to appear in bold face we use the <b> and </b> tags around the text. For example:
    <b> This will appear in bold face</b> .
    8. displays as
    This will appear in bold face.

  8. To display text in italics, we use <i> and </i> around the text.

  9. To divide the Web page into sections, headings can be inserted in the page. There are six different heading sizes - h1 is the largest, h6 is the smallest.
    <h1>Size 1</h1> displays as

    Size 1

    and
    <h6>Size 6</h6> displays as
    Size 6

  10. To organize information in a list (just like the list of HTML information on this page!) we first specify whether we want an ordered list which uses numbers, or an unordered list which uses bullets.
    • For an ordered list, use <ol> to begin the list and </ol> to end the list.
    • For an unordered list, use <ul> to begin the list and </ul> to end the list.
    • Within the list, mark the beginning and end of each item with the "list item" tags <li> and </li>

An example of the HTML tags for an ordered list is given below:

<ol>
<li>HTML is easy to use</li>
<li>Just learn the tags!</li>
</ol>

The ordered list display looks like:
  1. HTML is easy to use
  2. Just learn the tags!

Similarly, an example of the HTML tags for a bulleted list is:

<ul>
<li>An ordered list has numbers</li>
<li>An unordered list has bullets</li>
</ul>

When the above is displayed, it appears as follows: