Elementary HTML - Part 1

Barbara Sommer

basommer@ucdavis.edu

NOTE This tutorial is new and subject to improvement. Please send me your comments and suggestions (see e-mail address above). Click here to find out who else helped on this project. B. Sommer 1/12/99

Introduction

For a decent, quick and easy webpage, it is hard to beat Composer in Netscape, or the HTML features in Microsoft Word. But if you want to be able to make changes and know how things work, then this is the tutorial for you. You will learn the nuts-and-bolts basics that will allow you to create a web page. HTML is very easy.

If you start to feel overloaded, just skim and return later to particular sections on a need-to-know basis. Then when you are ready to move on, check the resource list at the end or search the web for more advanced tutorials.

What you need

  1. Disk to use as your workspace and for saving your files - hard drive, floppy, ZIP disk, etc.
  2. Web browser - Netscape Communicator, Microsoft Explorer, or equivalent
  3. Text editor - a program within which you can create a document -- SimpleText for Macintosh users, NotePad for PC Windows users (found under Programs -- Accessories), or some other word processing software that allows you to create text-only files.

You will be creating files and moving them to folders/directories. A file is a single document or image. A folder (Macintosh) or directory (PC) is the larger container in which you place files. I will be using folder and directory interchangeably.

Note: I will use Courier font for file and folder/directory names, as well as for code that you will need to type.

Preliminary steps

  • Plan to work from hard copy (printed) as you will need to use your browser (Netscape or Explorer) to check your work.
  • This is Part 1. To print it,
  • When you have the 3 parts (either printed or downloaded) and the pictures (in the visuals folder/directory on your computer), you can go offline (turn off your modem) -- no need to tie up your Internet connection while going through this tutorial.

    #1 Create a Web Page

    What is HTML?

    HTML (HyperText Markup Language) is a code that uses tags enclosed in < > to instruct the computer to display text or images or to perform operations such as linking to other pages or sites. It is also used to format text. For example, the HTML code for the heading fo this section is

    The "/" slash character indicates "end." Most of the tags require an ending tag containing / thereby telling the browser to stop tagging the text.

    You may use upper or lower case (i.e., <h3> or <H3> gives the same result).

    If you make a mistake in HTML you will not bomb or crash; your web page just won't look right. It is easy to correct the code.

    Ready? Let's get started. (Reminder: You need a web browser and text editor installed on your computer -- see Intro section for specific information.)

    To Create an HTML file

    An HTML document contains two distinct parts, the head and the body. The head contains information that is not displayed on the screen. The body contains everything that is displayed on the web page. The basic structure of an HTML page is:


    Enclose all HTML work within     <html>...</html> tags. To begin:

    1. Create a new directory/folder on your disk to hold your work.
    2. Open a new document in your text editor (SimpleText or NotePad), and type the following: .
        <html>
        <head>
        <title>SS78</title>
        </head>

        <body> Welcome to Social Science 78, the Psychology of Domestic Cats.

        </body>
        </html>


      NOTE: The       <title>. . . . </title> tags are located. within the <head> . . . . </head> portion and will not be visible on the screen. You will see it at the very top in the title bar of your web page. (Later we will add a title that will appear on the page itself.)

      The information within <title>. . . . </title> is used by search engines such as WebCrawler or Yahoo for their keyword searches. .

    3. Save the document as a file called "SS78.html" and save it on your disk in the folder for this work.

      If you are using a Word editor instead of SimpleText or NotePad, be sure to save as a text document. The browsers will not read Word documents.

      Windows 3.1 users only -- use .htm instead of .html, e.g., SS78.htm

      Displaying Your Document in a Web Browser

      1. Leave your text editor window open. You will be moving back and forth between the browser and your text editor window.
      2. Open the browser. It probably will begin to log on to the Internet. Cancel the log-on process. You do not need to be online. If you downloaded files, as instructed in the beginning of this tutorial, you will be working only on your own computer.
      3. In the browser, Open "SS78.html" (instructions follow).

        NETSCAPE - File menu, select Open and then Open Page .

          or File menu, select Open and then Page in Navigator.

        EXPLORER - File menu, select Open and then Browse to see files on your local disk.

      4. You should now see the one sentence oftext you wrote, "Welcome to Social . . . . "

      Modifying an HTML Document

      1. Return to the text editor window.
      2. Below the text you typed, press RETURN a few times and add the following text:

        A cat is a carnivourous mammal (Felis catus) long domesticated and kept by humans as a pet or for catching rats and mice.

        Note that this text should be above the </body> and </html> tags at the bottom of your HTML file.

      3. Select Save from the File menu to update the changes in your HTML file.

      Reloading the Document in your Web Browser

      Return to the browser where the previous version of your file was displayed. To see the changes, click the RELOAD button in the browser. If there is a mistake, return to your text file, correct it, and SAVE it. Then return to the browser, and RELOAD to view the corrected version.

      Do not use SAVE when you are in the browser (Netscape or Explorer).

      Experiment with your window arrangements, positioning them so that you can easily switch back and forth between your text editor (SimpleText or NotePad) and your browser (Netscape or Explorer) windows.

      #2 Adding Headings

      Headings can be created in 6 sizes:

        Heading Level 1

        Heading Level 2

        Heading Level 3

        Heading Level 4

        Heading Level 5
        Heading Level 6

      The format for an HTML heading tag is:

      <hN>Text to Appear in Heading</hN>

      where N is a number from 1 to 6 identifying the heading size -- level 1 (largest) down to to level 6 (smallest).

      Adding Headings to Your Document

      1. Use the <h1> tag to display a title as the largest header. In your text document add some space between the two sentences by pressing the RETURN key a few times. After the first sentence (the welcome line), type

        <h1>SS78 Psychology of Domestic Cats</h1>

        Note: Use the RETURN to add spaces to make your text file easier to read. The spacing will not show up in the browser version.

      2. Below cat description sentence, add a few spaces and type the following headings (Note that some are H3 and others are H2 tags):

        <h2>Introduction</h2>

        <h2>Course information</h2>

        <h2>Feline behavior</h2>

        <h3>Social relationships</h3>

        <h3>Birthing</h3>

        <h2>Visual portrayal</h2>

      3. Save changes in your text editor.
      4. Return to the browser, open and reload the HTML file.

        Check Your Work

        Your web page should look something like this.

          Welcome to Social Science 78, the Psychology of Domestic Cats

          SS78 Psychology of Domestic Cats

          A cat is a carnivourous mammal (Felis catus) long domesticated and kept by humans as a pet or for catching rats and mice.

          Introduction

          Course information

          Feline behavior

          Social relationships

          Birthing

          Visual portrayal

        If your page doesn't look right, check your HTML code in your text editor. It should look like this.

          <html>
          <head>
          <title> SS78 </title>
          </head>

          <body>

          Welcome to Social Science 78, the Psychology of Domestic Cats

          <h1>SS78 Psychology of Domestic Cats</h1>

          A cat is a carnivourous mammal (Felis catus) long domesticated and kept by humans as a pet or for catching rats and mice.

          <h2>Introduction</h2>
          <h2>Course information</h2>
          <h2>Feline behavior</h2>
          <h3>Social relationships</h3>
          <h3>Birthing</h3>
          <h2>Visual portrayal</h2>

          </body>
          </html>

          Don't worry about blank spaces in your code. They won't show up on the web page.

      5. See what happens when you make a coding error. Go back to SS78.html in the text editor and delete the slash (/) in the <h1> tag, after the header SS78 ....

        <h1>SS78 Psychology of Domestic Cats<h1> [missing "/"]

      6. Save the change and reload into your web browser. Without the correct ending of the <h1> tag, your web browser interprets all of the succeeding text as part of that header. After trying this, be sure to re-insert the slash in the correct spot, and SAVE the change.

      Centering Text

      1. To center headings (or any other text) on a page, use

        <center> . . . . </center>

      2. Change

        <h1>SS78 Psychology of Domestic Cats</h1>
        to
        <center><h1>SS78 Psychology of Domestic Cats</h1></center>

        Note: The principle for tag order is to embed or nest each set within another set.
        <h1><center> . . . </center></h1> produces the same result.

      3. Save the file.
      4. Reload in the browser. That header should now be centered on the page.

        #3 Inserting Breaks

        You have created and modified an HTML document and should feel comfortable with the process of editing text and reloading it into your web browser. This easy lesson is on inserting breaks in the text.

        Paragraph Breaks <p>

        A web browser ignores all of the CARRIAGE RETURNS typed into your text editor. You need to add these by using HTML tags. For example, the HTML code for forcing a paragraph break is <p>. Wherever a browser sees the paragraph tag, it inserts a blank line.

        This tag is special in that it does not require an ending tag; you do not need to use </p>

        Also, the header <h > tags have a built in break so it is unnecessary to put <p> tag before a header tag, such as

          <h2>Bold Header</h2>

        To insert a paragraph break

        1. Go to the text editor window.
        2. Open your working document SS78.html in the text editor (if not already opened).
        3. First move the sentence ("A cat is .....") so that it is under the Introduction heading. Use the mouse to cut and paste this text in the proper location.
        4. Following that sentence, add some more text. Type in

          It appears to be of Egyptian or Eastern origin.

        5. Save the changes in the text editor.
        6. Return to the browser.
        7. Reload -- you should see the two sentences of the Introduction. We will put a paragraph break between these sentences.
        8. Return to your HTML document in the text editor.
        9. After the first sentence under <h2>Introduction<h2> (the one that ends "...rats and mice."), press RETURN (it is not necessary but it makes the HTML more readable as you work on it), and then enter the paragraph tag:
            <p>

          This section should now look like

          <h2>Introduction</h2> A cat is a carnivorous mammal (Felis catus) long domesticated and kept by humans as a pet or for catching rats and mice.
          <p>It appears to be of Egyptian or Eastern origin.

        10. Save the changes in the text editor.
        11. Return to your web browser and reload the document. The two sentences of the introduction should now be separate paragraphs.

          Horizontal line break - Hard rule <hr>

          In order to separate the opening sentence of the page from the other portions that follow,

          1. place an <hr> tag right after the Welcome to .... line.

            Welcome to Social Science 78, the Psychology of Domestic Cats.
            <hr>

          2. Save
          3. Reload in the browser and check the horizontal rule.

          Simple break <br> -- to the next line

          And finally, there is the <br> tag which forces text to a new line like the <p> tag, but without inserting a blank line. You might use this tag when making a list of items, when writing the lines of a poem, etc. Compare the differences between using the <p> and <br> in these two examples:

          Paragraph <p> tags Only

            HTML
              CAT
              <p>One Hell of a nice animal, frequently mistaken for a meatloaf.
              <p>B. Kliban, author

            Result

              CAT

              One Hell of a nice animal, frequently mistaken for a meatloaf.

              B. Kliban, author

          Paragraph <p> and Line Break <br> tags

            HTML
              CAT
              <br>One Hell of a nice animal,
              <br>frequently mistaken
              <br> for a meatloaf.
              <p>B. Kliban,
              <br>author

            Result

              CAT
              One Hell of a nice animal,
              frequently mistaken
              for a meatloaf.

              B. Kliban,
              author

          #4 Style

          HTML offers several tags for adding style to your text. Don't overdo it -- too many changes clutter the text and make it difficult to read.

          Style tags
          HTML Result
          <b>This is Bold... </b> This is Bold...
          <i>This is Italic... </i> This is Italic...

          You can combine the style tags as long as they are correctly nested; one set within the other.
          <i><b>This Bold AND Italic</b></i> This is Bold AND Italic
          <b><i>And So is This </i></b> And So is This

          Enter Styled Text in Your HTML Document

          1. Return to your HTML document "SS78.html" in the text editor.
          2. Find the word "cat" in the first sentence of the Introduction.
          3. Insert the tags to make this word appear as bold text:

            <b>cat</b>

          4. And add italic tags around the words (Felis catus) to indicate the Latin:

            A <b>cat</b> is a carnivourous mammal <i>(Felis catus)</i> long domesticated and kept by humans as a pet or for catching rats and mice.

          5. Save in the text editor and reload in your web browser.

            #5 Indented Lists & Sublists

            Listed items may be preceded by bullets (Unordered) or numbers (Ordered), or neither. Lists are easy to format in HTML and can be nested (lists of lists) to build an outline .. Lists are also handy for creating an index or table of contents to a series of documents or chapters.

            Unordered Lists

            Unordered Lists, or ul tags, are ones that appear as a list of items with bullets or markers in the front.

            1. Return to your HTML document in the text editor.
              By now you know that you can add as many spaces as you wish to your HTML document, without their showing up on the browser version.
            2. We will use an unordered list to add some specifics. In SS78.html under the header <h2>Course information</h2> type

              <ul>
              <li>Schedule
              <li>Reading list
              <li>Past exams
              </ul>

            3. Save the text file, reload in the browser, and view the list.

            Ordered Lists

            Ordered lists are ones where the browser numbers each successive list item starting with "1." Note that the only difference is changing the <ul> tag to <ol>.

            1. In the text file under <h2>Visual portrayal </h2> heading, type

              There are many sources in which to study humans' perceptions of the cat's appearance and behavior. These include:
              <ol>
              <li>Painting
              <li>Photography
              <li>Cinema
              <li>Cartoons
              </ol>
              <p>For more information, consult the course reading list.

            2. Save your HTML file, reload in your web browser, and view the unordered and ordered lists.
            3. CHECK your web page with the example at the end of this module.

            Lists without bullets or numbers

              Instead of <ul> (or <ol>) and <li>, use
              <dl>
              <dd>
              <dd>
              </dl>

              Another option is to use the <ul> or <ol>tag, omitting the <li> tags, using <br> or <p> between items.

              Layout note: An easy way to indent a chunk of text is to surround it with
              <ul>. . .</ul>, omitting the <li> tags.

            Lists within lists

            You can embed any of the above list types within another list type, for example

            1. Item #1 of 1st set
            2. Item #2 of 1st set
              • Item #1 of 2nd set (bullets instead of numbers)
                1. Item #1 of 3rd set
                2. Item #2 of 3rd set
                3. #3 It can get a little tricky.
              • Item #2 of 2nd set
              • Item #3 of 2nd set
            3. Item #3 of 1st set

            Here is the HTML for producing this format (indented to make it easier to read). We won't do it now, but it is here for future reference. Don't forget the ending tags, (e.g., </ol>,</ul>, etc.).

              <ol>
                <li>Item #1 of 1st set
                <li>Item #2 of 1st set
                  <ul>
                  <li>Item #1 of 2nd set
                    <ol>
                    <li>Item#1 of 3rd set
                    <li>Item#2 of 3rd set
                    <li>#3 It can get a little tricky.
                    </ol>

                  <li>Item #2 of 2nd set
                  <li>#3 of 2nd set
                  </ul>

                <li>Item #3 of 1st set

              </ol>

            You get the idea. Take a rest, and then move on to section#6 VISUALS (the best part)

            CHECK ... Your web page should look something like this....CHECK

              Welcome to Social Science 78, the Psychology of Domestic Cats

              SS78 Psychology of Domestic Cats

              Introduction

              A cat is a carnivourous mammal (Felis catus) long domesticated and kept by humans as a pet or for catching rats and mice.

              It appears to be of Egyptian or Eastern origin.

              Course information

              • Schedule
              • Reading list
              • Past exams

              Feline behavior

              Social relationships

              Birthing

              Visual portrayal

              There are many sources in which to study humans' perceptions of the cat's appearance and behavior. These include:

              1. Painting
              2. Photography
              3. Cinema
              4. Cartoons


              For more information, consult the course reading list.

            Here is the HTML code.

            <html>
            <head>
            <title>SS78</title>
            </head>
            <body>
            Welcome to Social Science 78, the Psychology of Domestic Cats
            <hr>
            <center><h1>SS78 Psychology of Domestic Cats</h1></center>
            <h2>Introduction</h2>
            A <b>cat</b> is a carnivourous mammal <i>(Felis catus)</i> long domesticated and kept by humans as a pet or for catching rats and mice.
            <p>It appears to be of Egyptian or Eastern origin.
            <h2>Course information</h2>
            <ul>
            <li>Schedule
            <li>Reading list
            <li>Past exams
            </ul>
            <h2>Feline behavior</h2>
            <h3>Social relationships</h3>
            <h3>Birthing</h3>
            <h2>Visual portrayal</h2>
            There are many sources in which to study humans' perceptions of the cat's appearance and behavior. These include:
            <ol>
            <li>Painting
            <li>Photography
            <li>Cinema
            <li>Cartoons
            </ol> For more information, consult the course reading list.
            </body>
            </html>

            If your code looks good, you are ready for Part 2.