The Internet DigestThe Internet Digest

HTML Tutorial

Basics

Most web pages are created using HTML

HTML stands for Hyper Text Markup Language so an web/HTML file is a text file containing MARKUP.

MARKUP is a method of telling a web browser how to display a page - which text is to be underlined or bold etc.

HYPER TEXT refers to the fact that you can link HTML pages together in such a way that you can jump form one page to the next.

You can create HTML pages using a text editor such as Notepad. Don't try and use a word processor such as Microsoft's Word. It isn't suitable.

Open your text editor and type (or copy 'n' paste) the following:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>This is my very first web page.</p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Save the file as firstpage.html.

Now, either:

  • Open your web browser, select File/Open. A dialog box will appear. Select Browse and navigate to the web page you just saved (firstpage.html). select it and click Open, then OK.
  • Or find the folder in which you saved firstpage.html and double- click on the icon for that page.

You should now see your first web page.

Congratulations!

Explanation:

All web pages are basically comprised of two sort of information:

  1. Content - this is the information/text you actually want to display
  2. Markup - instructions about HOW you want the Content displayed.

Markup instructions, or ELEMENTS, are held in 'tags'. A web browser can differentiate between Content and Markup because each 'tag' starts with a '<' and ends with a '>'.

Each ELEMENT can also have ATTRIBUTES associated with it which supply additional information if needed. You'll be meeting ATTRIBUTES when we look at adding images to web pages

So, let's go through your first page and see what all those tags did.

For a start, notice that all the tags are in lower-case. Some of the older forms of HTML did allow for upper-case tags, however, the World Wide Web Consortium (W3C) - the international body that sets the guidelines for HTML Markup - has declared that lowercase tags are mandatory for XHTML. As this is the newest form of HTML Markup, it would be a good idea to stick to lower-case tags right from the start.

Next, note that all of the tags come in pairs:

  • one without a '/' at the start of a piece of text. This is called an opening tag.
  • one with a '/' at the end of a piece of text. This sis called a closing tag.

With few exceptions, all tags have both opening and closing forms. You should get into the habit of including both types.

<html></html>

The first line in your HTML document is <html>.

All web pages must begin with a <html> and end with a </html>.

<html> is an opening tag

</html> is a closing tag.

So <html> told the browser that we are opening an HTML document and </html> told the browser that we were closing our HTML document.

<head></head>

The text between these two tag is called Header Information. Header information is not displayed in a web page itself but can contain information about the page such as information for search engines etc.

<title></title>

You place the title for your web page between these two tags and it will be displayed in the top bar of the browser window.

<body></body>

The text between the <body></body> tags is the all of the text that you want to be displayed in a browser window. In other words, the actual displayed web page.

<p></p>

These paragraph tags are called BLOCK ELEMENTS as they are used to enclose whole blocks of text. Text to be displayed should always be placed between two, BLOCK ELEMENT tags.

<strong></strong>

Text placed between these tags will be displayed in a bold font.

<em></em>

Text placed between these tags will be displayed in italics.

Mixing, or nesting, tags

Notice how you were able to have bold and italic text by using both the <strong></strong> and <em></em> tags?

Take a closer look at the code for that last displayed line.

<p><strong><em>This is bold, italic, text</em></strong></p>

See how the first tag opened is always the last tag closed?

This is known as nesting and refers to the fact that, if you use a number of tags together, you must always close them in the reverse order that you opened them.


Page Headings

Open up your web page in a text editor.

You should see the following:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>This is my very first web page.</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic,
text</em></strong></p>
</body>
</html>

Now, immediately after the <body> tag, press the ENTER key and then type in the following:

<h1>Welcome to My Page!</h1>

You should now see:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<p>This is my very first web page.</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Resave your web page and then view it in your web browser. If you still have it loaded in the browser window just select Refresh to view the updated version.

You have just added a page heading!

Headings

There are 6 heading tags in HTML.

They are numbered

<h1>,<h2>,<h3>,<h4>,<h5> and <h6>

Each one is accompanied with their respective closing tags(eg. <h1>...</h1> etc.

This is an h1 heading!

This is an h2 heading!

This is an h3 heading!

This is an h4 heading!

This is an h5 heading!
This is an h6 heading!

Whenever you use a heading tag, the browser automatically adds an extra blank line before and after the displayed heading text.

Try this:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Play around with different heading tags to get a feel for the displayed text size.



Line Breaks

The <br /> tag is used when you want to end a line, but don't want to start a new paragraph. The <br /> tag forces a line break wherever you place it.

Unlike most of the other tags, <br /> has no closing tag so the closing '/' has been combined into the opening tag to make a composite, or empty, tag.

Have a look and see how it works:


<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic,
text</em></strong></p>
</body>
</html>

Note: The <br /> tag is an INLINE ELEMENT which means that it must always be used inside a pair of BLOCK ELEMENT tags (such as <p></p> or similar)!

Comments in HTML

You can add comments to your HTML Markup. These can be useful when your page becomes very large or complex and you need to insert small markers to remind you what each part of the markup is for.

You can insert a comment by starting it with a <!-- and ending the comment with a -->

Anything between these two comment markers will not be displayed by a web browser

<!-- This is a comment -->

 

Horizontal Rules

Now try this:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

You have added a horizontal rule by using the <hr /> tag after your first heading.

Note that, like <br />, the horizontal rule tag is a composite tag.

 

Special Characters

Some text for display cannot be entered directly into an HTML document - such as & or £.

Instead these symbols must be entered using CHARACTER ENTITIES.

A character entity has three parts:

  1. an ampersand (&)
  2. an entity name or a # and an entity number
  3. a semicolon (;).

For example:

To display < in a web page when it is not meant to be part of the markup, you must use &lt;

To display > in a web page when it is not meant to be part of the markup, you must use &gt;

To display " in a web page when it is not meant to be part of the markup, you must use &quot;

Common Character Entities:

Symbol Meaning Character Entity
< less than &lt;
> greater than &gt;
& ampersand &amp
" quotation marks &quot;
¢ cent &cent;
£ pound &pound;
© copyright &copy;
® registered trademark &reg;

 

Adding Colour or wallpaper

Remember the Header section <head></head> tags in our example page that we've ignored so far?

Well, we're about to start adding information here.

The information we are going to add will relate to the way we want our page displayed - what background colour the page should have; what colour the text should be etc.

This sort of information is known as the page STYLE and can eiither be stored inside the web page markup itself or as a separate file. We'll be using the former method for now.

Open up your example web page in a text editor.

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Now add the following immediately BEFORE the </head> tag:

<style type="text/css"> body { background-colour: #ccffcc; color: #003300; } </style>

Your markup should now look like this:

<html>
<head>
<title>My First Page</title>
<style type="text/css">
body {
background-colour: #ccffcc;
color: #003300;
}
</style>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Now view the page in your web browser.

The background should now be a plain, pale green and the text is very dark green.

So, how did we do this?

<style></style>

The opening tag <style> tells the browser that it is about to receive some information relating to colour and text formatting. The addition of "type=text/css" tells it what form that information will be in.

CSS is short for Cascading Style Sheet - the W3C recommended method for incorporating such information into a web page.

Like most tags, there is an appropriate closing tag (</style>) to indicate when we've finshed supplying this information.

Inside the <style></style> tags

All style information follows the same format. First you tell the browser what part of the page you intend to describe. In our case, we are describing everything between the <body> </body> tags, so we begin by using the word:

body

The rest of the information gives specific instructions to the browser on what sort of display we want and is always enclosed between { and }.

Each line should include a single 'item', a colon (:), a space (for human readability), the colour or formatting information and, finally, a semi-colon (;).

For example:

background-colour: #ccffcc;

This tells the browser that the background of all text is to be set to pale green. Colours are referred to using hexidecimal codes ie a # followed by six letter and, or, numbers. You can find a list of colours and their associated codes here.

color: #003300;

This tells the browser that all text is to be displayed in dark green. Note the spelling of 'color' rather than 'colour'.

Add this altogether and you should end up with:

body {
background-colour: #ccffcc;
color: #003300;
}

Wallpaper

You can have a wallpaper/image background for your web page but be careful that it doesn't make the text difficult to read!

Download this background file by rightclicking the link and selecting Save Target As.. and place it in the same folder as your web page.

Edit your style information as follows:

<html>
<head>
<title>My First Page</title>
<style type="text/css">
body {
background-colour: #ccffcc;
background-image: url(paintblur.gif)
color: #003300;
}
</style>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>

Save and view your web page. You should now have a lightly patterned, yellow, background!


Graphics

In HTML, images are defined with the <img> tag.

The <img> ELEMENT has a composite tag, which means that one tag contains all the attributes and the closing slash (/).

To display an image on a page, you need to use the SRC ATTRIBUTE. src is an abbreviation of "source". The value of the src attribute is the URL (location) of the image you want to display on your page.

The syntax of defining an image is as follows:

<img src="the_location_of_the_image" width=
"how_wide_it_is_in_pixels" height=
"how_high_it_is_in_pixels" alt=
"what_to_display_if_the_image_cannot_be_viewed" />

The location should be the web address where the image is stored.

For example, this image:
Black Widow Small Logo

is in the main images folder on Black Widow's site and is defined in the markup for this page as:

<img src=" http://www.blackwidows.org.uk/images/logo.gif width="80" height="80"
alt="Black Widow Small Logo" />

The browser places the image where the image tag occurs in the markup of the document. If you place an image in your first paragraph markup, it will be displayed in the first paragraph. If you place it in the second paragraph markup, it will be displayed in the second paragraph etc.

All images should always be placed with BLOCK ELEMENTS such as <p></p> tags

Note: Images can be useful in decorating a web page or provide additoinal information in themselves, However, every images you place in an HTML document will need to be downloaded before your page can be displayed properly. Loading images take time, so use images sparingly.

Warning

When adding images, do not be tempted to link directly to other people's images on their site to display on your web pages. This is known as Bandwidth Theft and can be viewed as serious abuse. After ensuring that you are allowed to copy such an image (if neccessary email the site owner), save a copy on your own site and link to it there.


Links

The <a> Tag and the href Attribute

HTML markup uses the <a> (the link or anchor) tag to create a link to another document.

An link can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating a link is as follows:

<a href="web_address_of_the_page_or_image_etc">Text to be displayed</a>

Link markup should always be placed inside a BLOCK ELEMENT such as between <p></p> tags.

Links inside documents

You can create links inside long documents to allow people to move straight to a particular sub-section.

To create such links, first place a reference anchor at the point you want people to jump to your markup and then place a link to allow people to jump to that point.

For example, the following markup is placed at the top of this page:

<a name="top"></a>

And this link will allow you to jump straight to the top of the page by using:

<a href="#top">this link</a>

Right click on this page and select View Page Source to see if you can locate these particular pieces of markup.

Email Links

Let's say you want to enter an email address, foo@bar.com, and make it clickable.

The syntax for this would be:

<a href="mailto:foo@bar.com">foo@bar.com</a>

The URI inside the <a> tag is is the email address you want to link to.

The text surrounded by the <a> and </a> is the link text that you want displayed on your page.

So if Joe Smith's email address is joe@bar.com, you could use:

<a href="mailto:joe@bar.com">Joe Smith</a>


Lists

There are three types of list formats:

  • ordered (eg. numbered lists)
  • unordered (bulletted lists)
  • definition lists.

All lists are BLOCK ELEMENTS which means that you do not have to nest them inside tags pairs such as <p></p>.

Unordered Lists

An unordered list starts with the <ul> tag and ends with the </ul> tag.

Each list item starts with the <li> tag and ends with the </li> tag.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Add this to your example web page like so:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
<hr />

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

</body>
</html>

The line break before and after the list isn't actually required - it just makes the markup easier to read!

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers or letters.

An ordered list starts with the <ol> tag and ends with the </ol> tag.

Each list item starts with the <li> tag and ends with the </li> tag.

For example:

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>

Add this to your example web page like so:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
<hr />

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>

</body>
</html>

Definition Lists

A definition list is a list of terms and explanation of those terms - rather like definitions in a dictionary.

A definition list starts with the <dl> tag and ends with the </dl> tag.

Each definition term starts with the <dt> tag and ends with the </dt> tag.

Each explanation starts with the <dd> tag and ends with the </dd> tag.

For example:

<dl>
<dt>Unordered List</dt>
<dd>A bulleted, list</dd>
<dt>Ordered List</dt>
<dd>A list with numbers or letters for each
item</dd>
<dt>Definition List</dt>
<dd>list of terms and explanations - like this
list!</dd>
</dl>

Add this to your example web page like so:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
<hr />

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>

<dl>
<dt>Unordered List</dt>
<dd>A bulleted, list</dd>
<dt>Ordered List</dt>
<dd>A list with numbers or letters for each
item</dd>
<dt>Definition List</dt>
<dd>list of terms and explanations - like this
list!</dd>
</dl>

</body>
</html>

 

Tables

Tables are defined with the <table> tag.

Each row of a table is contained in the <tr></tr> tags.

Within each row, individual cells are contained within the <td></td> tags.

For example:

<table border="1" summary="test
Table">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Add this to your example web page like so:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>

<h3>This is a table</h3>
<table border="1" summary="test
Table">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

</body>
</html>

The Border Attribute

This specifies the width of the table border.

Try changing your border attribute to:

border="0"

A setting of zero causes the border to disappear. You can achive the same effect by simply removing the border attribute altogether.

For example:

<table>

Now try setting it to:

border="3"

This will create a much thicker border

The Summary Attribute

This provides highly useful information for people who maybe reading your page via a text-to-speech reader. The summary attribute should reflect the information content of your table.

Headings in a Table

You can provide automatically formatted headings in a table by using the <th></th> tags.

For example:

<table border="1" summary="Yet Another
Test Table">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Add this to your example web page like so:

<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>

<h3>This is a table</h3>
<table border="1" summary="test
Table">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<p><br /></p>
<table border="1" summary="Yet Another
Test Table">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

</body>
</html>

 

This concludes our basic HTML Tutorial.

Editor's note: For more HTML tips and tricks we recommend checking out Web Design Mastery, a thorough Web Design Ebook by Shelley Lowery.


This tutorial is courtesy of Black Widow Web Design, a UK based web design firm offering high quality, cost-effective web design and IT consultancy service with an emphasis on jargon-free, individualised, support.

As a female-led consultancy, Black Widow Web Design specialises in providing web services to women managed businesses, communities and social enterprises. Their specialist skills also include designing sites with high accessibility levels.