Learning HTML step by step

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 HTML 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 specify 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 id="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/Lec2/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/Lec2/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 "image.jpg" in the same folder/directory as your HTML file. It is 112 pixels wide by 109 pixels high. When you type:

<img src="image.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="image.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="image.jpg" alt="Info Tech Class web page"></a>

you get:

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

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