Learning HTML step by step

These are notes that were initially created by Smaranda Muresan to accompany an earlier version of the 550 Class on HTML.
These notes show you how to use HTML tags to build a simple Web page step by step.
In future lectures in this course, you will learn how to use standards-compliant XHTML and CSS to create web pages.

Add headings and paragraphs

If you have used Microsoft Word, you will be familiar with the built in styles for headings of differing importance. In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important. To speccify H1 you type

 <h1> This is most important heading </h1>

and you see

This is most important heading

To specify a less important heading H2 you type

 <h2> This is a less important heading </h2>

and you see

This is a less important heading

You can use paraphgraps using <p> </p> tags. You type

<p> This is paragraph one </p>

<p> This is paragraph two </p>

And you see:

This is paragraph one

This is paragraph two

Adding emphasis to your text

You can change the emphasis of your text by using <em> or <strong> or <b> or <i> For example:

<em>cat</em>

renders cat

<strong>cat</strong>

renders cat

<b>cat</b>

renders cat

  <i>cat</i>

renders cat

Lists in HTML

HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance when you type:

<ul>
  <li>the first list item</li>
  <li>the second list item</li>
  <li>the third list item</li>
</ul>

you get:

the first list item
the second list item
the third list item

Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance when you type:

<ol>
  <li>the first list item</li>
  <li>the second list item</li>
  <li>the third list item</li>
</ol>

you get:

the first list item
the second list item
the third list item

Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance when you type:

<dl>
  <dt>the first term</dt>
  <dd>its definition</dd>
  <dt>the second term</dt>
  <dd>its definition</dd>
  <dt>the third term</dt>
  <dd>its definition</dd>
</dl>

you get:

the first term: its definition
the second term: its definition
the third term: its definition

The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance when you type:

<ol>
  <li>the first list item</li>
  <li>
    the second list item
    <ul>
      <li>first nested item</li>
      <li>second nested item</li>
    </ul>
  </li>
  <li>the third list item</li>
</ol>

you get:

the first list item
the second list item
- first nested item
- second nested item
the third list item

Hyperlinks

What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!

Links are defined with the <a> tag, from "anchor".

Internal anchors: provide a link inside the same page. Similar to MS Word Cross-reference. For example if you want to add an internal anchor (cross-reference) here to the section about Lists you need to:

type

<a href=#lists>Example of internal anchor - Go back to Lists </a>

Go to the List header and modify it like this
```
<a name="lists"><h2>Lists in HTML</h2></a>
```

So you will have Example of internal anchor- Go back to Lists

External anchor . This provide a link to an external page. We can provide a link to a page which exists in the same folder as the HTML file you are editing. Let's say we want to add a link to the notes.html page you have saved in your own directory. For this you type:

This a link to <a href="notes.html">Today's notes on HTML</a>.

and you get:
This a link to Today's notes on HTML

You can also have link to a page in a subdirectory. Let's assume we have created a directory "notes" and we saved the "notes.html" file in that subdirectory. In order to create a link to the notes.html page we type:

This a link to <a href="notes/notes.html">This week's notes on HTML</a>.

And last, there can be links to any page on the web. Let's create a link to the notes.html directory found on my web site. For this you type:

This a link to <a href="http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec4/Steps/notes.html">This week's notes on HTML from the class web page</a>.

and you get

This a link to This weeks's notes on HTML from the class web page.

You can also combine external and internal anchors. For example you want to point to the section about lists in the notes.html page from the class web page. You type:

This a link to <a href="http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec4/Steps/notes.html#lists">Today's notes on List in HTML from the class web page</a>.

and you get

This a link to Today's notes on List in HTML from the class web page.

Images

Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "images.jpg" in the same folder/directory as your HTML file. It is 112 pixels wide by 109 pixels high. When you type:

<img src="images.jpg" width="112" height="109">

you will get:

The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:

When you type:

<img src="images.jpg" width="112" height="109" alt="An angry computer">

you will get:

An angry computer

You can turn an image into a hypertext link, for example,you can click on a company logo to get to the home page of that company. In our example let's say that if you click on the images.jpg we want to go to the class web page. If you type:

<a href="http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Home.html"><img src="images.jpg" alt="Info Tech Class web page"></a>

you get:

Clicking on the above image will link you to the class web page.

Flowing text around images

With HTML, you can choose whether any given image is treated as part of the current text line or is floated to the left or right margins. You control this via the align attribute. If the align attribute is set to left the image floats to the left margin. If it is set to right the image floats to the right margin.For instance when you type:

<p><img src="images.jpg" alt="angry computer"
width="55" height="50" align="left"> This text will be
flowed around the right side of the graphic.</p>

you will get

angry computer This text will be flowed around the right side of the graphic.

If you type:

<p><img src="images.jpg" alt="angry computer"
width="55" height="50" align="right"> This text will be
flowed around the left side of the graphic.</p>

you will get:

angry computer This text will be flowed around the left side of the graphic.

You can also position the text with respect to the top, center or bottom. If you type:

<p><img src="images.jpg" alt="angry computer"
width="55" height="50" align="top"> This text will be
flowed around the top part of the graphic.</p>

you will get the text aligned to the top of the image:

angry computer This text will be flowed around the top part of the graphic.

Spacing

Forcing new lines

Just occasionally, you will want to force a line break. You do this using the br element, for example when you want to include a postal address:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

The Willows
21 Runnymede Avenue
Morton-in-the-marsh
Oxfordshire OX27 3BQ

The br element never needs an end-tag. In general, elements that don't take end-tags are known as empty elements.

Introduce non-breaking spaces

Browsers automatically wrap text to fit within the margins. Line breaks can be introduced wherever space characters appear in the markup. Sometimes you will want to prevent the browser from wrapping text between two particular words. For instance between two words in a brand name such as "Coca Cola". The trick is to use   in place of the space character, for example:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.

will give:

Sweetened carbonated beverages, such as Coca Cola, have attained world-wide popularity.

It is bad practice to use repeated non-breaking spaces to indent text. Instead, you are advised to set the indent via style rules.

Special Characters

For example, the characters < or > are used for tags in HTML and cannot be rendered as such. If you want to display them in your web page you should use: < or > For a list of all special characters see the class web resource page, Special Characters in HTML.

Preformatted Text

One advantage of the Web is that text is automatically wrapped into lines fitting within the current window size. Sometimes though, you will want to disable this behavior. For example when including samples of program code. You do this using the pre element. For instance:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Which renders as:


    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Setting the color and background

In case you are not using CSS, you can set the color using the BODY tag. The following example sets the background color to white and the text color to black:

<body bgcolor="white" text="black">

The BODY element should be placed before the visible content of the Web page, e.g. before the first heading. You can also control the color of hypertext links. There are three attributes for this:

link for unvisited links
vlink for visited links
alink for the color used when you click the link

Here is an example that sets all three:

<body bgcolor="white" text="black"
  link="navy" vlink="maroon" alink="red">

You can also get the browser to tile the page background with an image using the background attribute to specify the Web address for the image, e.g.

<body bgcolor="white" background="image2.jpeg" text="black"
  link="navy" vlink="maroon" alink="red">

It is a good idea to specify a background color using the bgcolor attribute in case the browser is unable to render the image. You should check that the colors you have chosen don't cause legibility problems. As an extreme case consider the following:

<body bgcolor="black">

Most browsers will render text in black by default. The end result is that the page will be shown with black text on a black background! Lots of people suffer from one form of color blindness or another, for example olive green may appear brown to some people.

A separate problem appears when you try to print the Web page. Many browsers will ignore the background color, but will obey the text color. Setting the text to white will often result in a blank page when printed, so the following is not recommended:

<body bgcolor="black" text="white">

Setting the font, its size and color

The FONT tag can be used to select the font, to set its size and the color (Note: keep in mind that CSS makes it possible to specify the font and other properties in a better way :). This example just sets the color:

This sentence has a <font color="red">word</font> in red.

will render

This sentence has a word in red.

The face attribute is used to set the font. It takes a list of fonts in preference order, e.g.

<font face="Garamond, Times New Roman">some text ...</font>

will render

some text ...

The size attribute can be used to select the font size as a number from 1 to 6. If you place a - or + sign before the number it is interpreted as a relative value. Use size="+1" when you want to use the next larger font size and size="-1" when you want to use the next smaller font size, e.g.

<font size="+1" color="maroon"
  face="Garamond, Times New Roman">some text ...</font>

will render

some text ...

There are a couple of things you should avoid: Don't choose color combinations that make text hard to read for people who are color blind. Don't use font to make regular text into headings, which should always be marked up using the h1 to h6 tags as appropriate to the importance of the heading.