Home : Web : Blog : Bio : Contact

 

Tutorial

The following is a simple tutorial explaining the basics of how to write a simple web page. If you are using Microsoft Windows, all that is needed is Note Pad to write the pages and Internet Explorer to view your results. It is important to save your file in Note Pad with an .htm extension. After you have saved the file you can open it a view it using the File Open command in Internet Explorer.

Introducing tags

The language of the web is call hypertext markup language which is commonly referred to as html. Text is formatted by placing it between special tags that are used to describe the formatting. Tags are not case sensitive and take the form of <format>your text</format>. Notice that the end tag includes a "/ "

At its simplest a web page needs the following tags to make a properly formed html page.

<html>
<head>
<title>
Text that appears at the top of the browser goes here
< /title>
</head>
<body>
The document text goes here
</body>
<html>

Paragraph formats

The basic text tags are the <p> and </p> tags which are used to define paragraphs. There are also six levels of headings that are available, with the largest being <h1></h1> and the smallest being <h6></h6>.

Here is an example

<p>This is some paragraph text. This is some paragraph text. This is some paragraph text.</p>
<h1>This is heading one<h1>
<h2>This is heading two</h2>
<h5>This is heading five</h5>
<h6>This is heading six</h6>

It looks like this

This is some paragraph text. This is some paragraph text. This is some paragraph text.

This is heading one

This is heading two

This is heading five
This is heading six

If you want to create a line break you use the <br> tag. This is one tag that does not have a closing tag.

Here is an example

<p>This is some paragraph text. This is some paragraph text<br> This is some paragraph text.</p>

It looks like this

This is some paragraph text. This is some paragraph text.
This is some paragraph text.

Changing how fonts look

The ability exists to be able to change the font type, colour and size.

Here is an example

<p><font face="courier" size="+4" color="blue">This is some text</font></p>
<p><font face="times new roman" size="+3" color="green">This is some text</font></p>

You should note that color uses the American spelling and the attribute values are inside double quotes. It looks like this

This is some text

This is some text

Text can be formatted to display as bold or italic.

Here is an example

<p><b>This text is bold</b></p>
<p><i>This text is italic<i></p>
<p><b><i>This text is italic<i><b></p>

It is important when combining more than one tag type that they are properly nested as illustrated in the above example. Alternatives to the <b> and <i> tags are <strong> and <em> (for emphasis) respectively. It looks like this.

This text is bold

This text is italic

This text is bold and italic

Text alignment

Text alignment can be controlled using alignment tags

Here is an example

<p align="left">This text is left justified</p>
<p align="center">This text is centered</p>
<p align="right">This text is right justified</p>

It looks like this

This text is left justified

This text is centred

This text is right justified

Lists

Lists are simple to do in html. The two main types of lists are ordered (i.e. numbers) and unordered (i.e. bulleted)

Here is an example of an ordered list

<ol>
<li>Item one
<li>Item two
<li>Item three
</ol>

It looks like this

  1. Item one
  2. Item two
  3. Item three

Here is an example of an unordered list

<ul>
<li>Item one
<li>Item two
<li>Item three
</ul>

It looks like this

  • Item one
  • Item two
  • Item three

Linking to other pages

What makes html so useful is the ability to make links from one html document to another. links are defined using anchor tags <a> and </a>.

Here is an example

<a href="http://www.google.com.au">Here is a link to Google</a>

It looks like this

Here is a link to Google

Adding graphics

To finish we will look at how you can include graphics in your web page. The image tag allows you to include a number of attributes such as alignment, alternative text for text only browsers. The two most common formats for image files are gif and jpeg.

Here is an example

<img scr="logo25.jpg" align="left" alt="Frying Pan">

This is how it looks

Frying Pan

This image is left aligned. This means that text will align with the right side of the image.

 

 

Where to from here

Only a small subset of what can be done with html has been covered here. There are numerous tutorials on html available on line. Here is a list of tutorials suitable for beginners you might want to look at.

 

Web > Tutorial