Basic HTML

• adding headings
• creating paragraphs & forcing line breaks
• adding images
• adding links to other pages
• three kinds of lists

Add Headings

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.

Here is how to add an important heading:

<h3>An important heading</h3>

This is a slightly less important heading:

<h4>A slightly less important heading</h4>

Creating Paragraphs & Forcing Line Breaks

Each paragraph you write should start with a <p> tag and end with a </p> tag. For example:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

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>Stewart Title Guaranty Company<br>
1980 Post Oaks Blvd, Suite 230<br>
Houston, Texas 77056</p>

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

Adding Images

Images can be used to make your Web pages distinctive and are very helpful 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 "7758.gif" in the your graphics library.. It is 200 pixels wide by 150 pixels high.

<img src="/imageLibrary/7758.gif" width="200" height="150">

The width and height are not necessary, but recommended so that the image is not stretched by the browser. The dimensions also speed the time it takes a browser to display the image.

The src attribute names the image file. People who cannot see the image need a description they can read in its absence. You can add a short description as follows:

<img src="/imageLibrary/7758.gif" width="200" height="150" alt= "Staff Picture">

The alt attribute is used to give the short description, in this case "Staff Picture"

You can place the image in different areas of the page using the align tag.

<img src="/imageLibrary/7758.gif" align=right>

Align choices include left, right, center, bottom, top, and middle.

You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files. Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.

Adding links to other pages

Links are defined with the <a> tag. Let's define a link to a file called example.doc in the file library:

<a href="/download/596/docs/example.doc">Example Document</a>.

The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.

To link to a page on another Website you need to give the full Web address (commonly called a URL), for instance to link to www.stewart.com you need to write:

<a href="http://www.stewart.com/">Stewart Home Page</a>.

When linking to a page that is not on your site, you want to have the link open the page in a new window.

<a href="http://www.stewart.com/" target=_blank>Stewart Home Page</a>.

The target=_blank tells the browser to open the page in a new window.

You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

<a href="http://www.stewartoe.com" target=_blank><img src="stewartoe.gif" border="0" alt="Stewart OE"></a>

The border="0" clears any border surround the image when it is turned into a hyperlink.

Three types of lists

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

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

Note that you always need to end the list with the </ul> end tag.

The second type of list is a numbered list, often called an ordered list . It uses the <ol> and <li> tags. For instance:

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

Like bulleted lists, you always need to end the list with the </ol> end tag, and end each list item with the </li> tag.

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

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

Note that lists can be nested, one within another. For instance:

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