Barton's Picture linux counter image.

How To Write HTML


Write simple HTML

This tutorial shows you how to write simple HTML. We will not explore all of the HTML tags just the most useful.

HTML code will appear in gray <p>This is some HTML code<p>. The examples are inside a yellow box with a red boarder.

This is an example


Headers

So lets start. First you will need headers. A header is written like this:

<h1>Some text to be a header</h1>

It looks like this:

Some text to be a header

You can have headers with number from 1 through 6; for example: <h3> or <h5>.

<h3>This is an &lt;h3&gt; header</h3>
<h5>While this is an &lt;h5&gt; header</h5>

This is an <h3> header

While this is an <h5> header

For more information on headers go to w3school.com HTML Headers.


<br/>, <hr/> and <img .../> Tags

Most HTML tags have a start tag and an end tag. Start tags look like <tag> and end tags look like </tag>. The end tag has a forward slash '/' before the tag name like </h3> or </h5> above.

There are a few exception tags that need only a start tag. These tags look like <tag />. The forward slash is include in the start tag after the tag name (the space is not necessary but allowed). The trailing '/' is not required in traditional HTML but is required with XHTML. You can either use it or not. For example the following line will break with or without the '/'.

<p>This is a text line<br/>with a 'br' with a trailing '/'<br>and this 'br' has no trailing slash.
If this were XHTML the 'br' without the trailing slash would be a mistake.</p>

The paragraph looks like this:

This is a text line
with a 'br' with a trailing '/'
and this 'br' has no trailing slash. If this were XHTML the 'br' without the trailing slash would be a mistake.

The following useful tags do not have an end tag:

There are more but the above are the most important for now.

For more information on 'br', 'hr' and 'img' click the links.


Paragraphs

To indicate a paragraph you use the <p> tag like this:

<p>This is a paragraph. Paragraphs wrap around if they are longer than their containing
element.</p>

Here is how that looks:

This is a paragraph. Paragraphs wrap around if they are longer than their containing element.

Here is some HTML that illistrates what we have seen so far:

<h1>This Is A Page Title</h1>
<p>This is a paragraph on our page. This can have long lines that can break
any where but will be rendered to fit the
width of the page. Extra spaces like this       will be removed as will line breaks.

This HTML will render like this:

This Is A Page Title

This is a paragraph on our page. This can have long lines that can break any where but will be rendered to fit the width of the page. Extra spaces like this will be removed as will line breaks.

Notice that the line breaks and extra spaces are not rendered. To force a space you can use an entilty &nbsp;. Also to have a less than < or a greater than > sign you would enter &lt; or &gt;. For example:

<p>This paragraph has three spaces here&nbsp;&nbsp;&nbsp; and a less than &lt;
and greater than &gt; sign.
It also has some line
breaks that will be removed as well as these extra spaces   .</p>

This paragraph has three spaces here    and a less than < and greater than > sign. It also has some line breaks that will be removed as well as these extra spaces .

For more information on paragraphs go to w3school.com HTML Paragraphs.


Lists

Lists are nice in pages. To create lists one uses code like this:

<ul>
  <li>This is a bullet list. This the first bullet</li>
  <li>This is the second bullet</li>
</ul>

This list looks like this:

You can have numbered lists. The <ul> stands for 'unordered list'. An 'ordered list' tag is <ol>. Here is some code:

<ol>
  <li>This is a bullet list. This the first bullet</li>
  <li>This is the second bullet</li>
</ol>

The only change is the 'ul' tag is changed to a 'ol' tag. This code looks like this:

  1. This is a bullet list. This is the first bullet
  2. This is the second bullet

For more information on 'lists' go to w3school.com HTML Lists


Tables

Tables are also very popular in pages. There are several tags associated with tables.

Each of these tags have a coresponding end tag: </table>, </tr>, </th>, and </td>. Tables are formed by having a 'table' tag and then one or more 'tr' row tags. Each 'tr' row tag can have 'th' or 'td' column tags. Here is an example table:

<table border="1">
  <tr><th>Column One</th><th>Column Two</th></tr>
  <tr><td>Date 1</td><td>Date 2</td></tr>
  <tr><td>Date 3</td><td>Data 4</td></tr>
</table>

This table looks like this:

Column OneColumn Two
Data 1Data 2
Data 3Data 4

Did you notice the 'border="1"' in the 'table' tag? That is an attribute. Most tags can take attributes. In this case the 'border' attribute makes the table render with borders as seen above. If we removed the border attribute the table would look like this:

Column OneColumn Two
Data 1Data 2
Data 3Data 4

We could also make the borders bigger by saying 'border="5"' which would produce a border of five pixles width like this:

Column OneColumn Two
Data 1Data 2
Data 3Data 4

For more information on tables go to w3school.com HTML Tables.


Images

We showed you the 'img' tag above but here are some examples. The 'img' tag needs some attributes to be useful. The 'src' attribute lets you give the address of the image file you want to display.

<img> src="/images/msfree.png" />
MS Free image

There are several other attributes for the 'img' tag that are useful:

The 'width' and 'height' attributes control the size of the image. The 'alt' provides a textual description of the image which is useful when a site is accessed by a brower that does not render images, for example a braill reader used by a blind visitor. The 'border' attribute is used the same way as with the 'table' tag.

<img> src="/images/msfree.png" width="200" height="200" border="5" alt="MS Free" />
MS Free

As you can see the image is distorted. The actual image size is 100 by 31 pixles which is rectangular. By setting the width and height to 200 pixles each we have forced the image to be square. To keep the original ratios you can specify only the width or the height then the unspecified attribute will be scaled to maintain the same ratio.

<img> src="/images/msfree.png" width="200" border="5" alt="MS Free" />
MS Free

You will notice that the image becomes 'pixalized' as the size is expanded beyond the original dimentions.

For a list of all attributes for the 'img' tag go to w3school.com img tag.
For further information about Images go to w3school.com HTML Images.


Hyperlinks, Anchors and Links

The final tag we will discuss is the 'anchor' tag: <a ... >. This tag also needs attributes to be useful, and it takes an end tag </a>. In web terms, a hyperlink is a reference (an address) to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element <a>, is used to define both hyperlinks and anchors. We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document.

To define a link you use the relative or absolute URL (Universal Resource Locator) and the 'href' attribute.

<a href="http://www.w3schools.com/html/html_links.asp">Link to w3schools.com</a>
Link to w3schools.com

Using a relative URL to an image looks like this:

<a href="/images/msfree.png">View the MS Free Image</a>
View the MS Free Image

The absolute URL in the first example links to an external page on another server. The relative URL in the second example links to an image on our server.

A page anchor lets you specify a location on a page and then return to that location using a link later in your page. Here I have placed an anchor at the top of this page it looks like this:

<a name="top-of-page></a>

I can put a link here to go to the top of the page like this:

<a href="#top-of-page">Go To The Top Of This Page</a>
Go To The Top Of This Page

If you click on the above example you will move to the top of the page.

For further information about HTML Anchors and Links go to w3school.com HTML.


You can view the source of this page Click Here.

For further information about HTML go to w3school.com HTML Links.


Now You Can Practice

I hope this tutorial has been helpfull. You can try out some HTML by entering text in the 'textarea' below and then clicking the 'Render' button.

Enter HTML Into Text Area

Preview Area