Basic HTML

Goals

Spend about 1 hour 10 minutes

Divider Line

Titles and Main Heading

Example

<HTML>

  <head>
  <title>Tara's Home Page</title>
  </head>

  <H1>Tara's Home Page for Bicycling in Hawaii</h1>

  <P>Hi.  I love to bicycle on my folding bicycle in Hawaii.
  I hope to post a lot of information and pictures.

</html>
   

Try copying the text to an HTML file to see what it looks like in the browser.

Divider Line

Lower Level Headings

<HTML>

  <head>
  <title>Tara's Home Page</title>
  </head>

  <H1>Tara's Home Page for Bicycling in Hawaii</h1>

  <P>Thanks for visiting my home page!  I hope you'll like it.

  <H2>My Plans</H2>

  <P>Hi.  I love to bicycle on my folding bicycle in Hawaii.
  I hope to post a lot of information and pictures.

  <H2>How to Reach Me</H2>
  <P>I'd love to hear from you.  You can drop me email at 
  funperson@veggie.net!

</html>
   

Divider Line

Adding Anchors

Divider Line

Creating Lists

Let's try a list where order is important.

  <P>The recipe is quite simple.
  <ol>
    <li>Mix the dry ingredients in a bowl
    <li>In a food processor, blend the tofu and raspberry preserves
    <li>Once the tofu mixture is creamy, quickly mix in 2T turbinado
       sugar and 2t vanilla, and let it sit for 5 minutes
    <li>Mix the two bowls together and bake at 350 degF
  </ol>
      

Here, order is not important.

  <P>When travelling, remember to:
  <ul>
    <li>Have the mail stopped
    <li>Send itinerary to family
    <li>Take spare contact lenses
    <li>Have plants cared for
  </ul>
      

Divider Line

Adding Images

Divider Line

Formatting Text

Divider Line

Suggestions

Divider Line
Created September 17, 1998
HTML by Dilip Barman, background courtesy of Moyra's Web Jewels
Return Home