This is the top of Page

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.

---

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>

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:

The following useful tags do not have an end tag:

• Break <br/>
• Seperator line <hr/>
• Image <img .../> the ... represent attriblutes which we will get into later

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.</p>

This HTML will render like this:

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>

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:

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.

• <table> the start of a table tag.
• <tr> the start of a table row.
• <th> the start of a column header.
• <td> the start of a column detail.

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:

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:

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

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

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

• 'width'
• 'height'
• 'alt'
• 'border'

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

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="https://bartonphillips.net/images/msfree.png" width="200" border="5" alt="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>

Using a relative URL to an image looks like this:

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

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>

You can also use the 'id' attribute as the link address like this:

<div id="top-of-page2>This is the top of the page</div>

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>

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

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

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

---

Show source code of this file

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

Other articles in this series:

• The History of the Internet
• How the Internet Works
• So You Want to Build a Website