Basic HTML

Goals

Spend about 1 hour 10 minutes

Learning basic HTML tags
Practicing authoring via HTML

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.

Lower Level Headings

We can use H2, H3, ... headings
Like an outline

<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>

Adding Anchors

We use <A href="url"> any text </A>

If we want to add a link to a page about folding bicycles, we may add HTML which looks something like Be sure to read about the <A href="www.cs.unc.edu/~barman/bikeFriday.html">Bike Friday</A> folding bicycle.

A special kind of anchor is an email mailto anchor You can drop me email at <a href="mailto:funperson@veggie.net"> funperson@veggie.net</a>!
or even You can drop me <a href="mailto:funperson@veggie.net">email</a>!

Creating Lists

We can create unordered or ordered (or simple or definition) lists
The start tag is either <ul> or <ol>
Each list item starts with <li>

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>

Adding Images

The tag used is <img> and it takes attributes like
- <src="URI"> to specify a source file or URL where the image resides (typically of .jpg or .gif format)
- <height=x>
- <width=x>
- <alt=x> for a textual representation
How do you create images? Digital cameras, scanners, clip art, web repositories, image programs, ...
How would you take a file home.gif and make it an anchor so that if somebody clicks it, they would go to http://www.abc.com? <a href="http://www.abc.com"> <img src="home.gif" height=82 width=60 alt="Return Home"></a>

Formatting Text

Generally, we specify what and the browser handles the how of its appearance, but sometimes we want to specify bold, italic, no formatting, etc.
Some relevant tags are <em> for emphasis (typically italics), <b> for bold, and <pre> for mono-spaced unformatted text
Remember to close these tags - e.g., this is <b>bold</b>

Suggestions

Use all of these elements to create an HTML file from scratch
Feel free to use HTML references to try new tags
Browse to a page that looks interesting and inspect its HTML. Does it make sense?
Try using Moyra's Web Jewels to design an attractive page
Note this is just a point of departure and there are many additional topics such as tables, java and Active X controls, animated icons, and much more; if you would rather use an HTML editor, simply look at this exercise as giving you a bit of insight that can help in a pinch