Last week I took you through the basic steps of planning a web site. This
week I am going to show you how to create your own pages by hand.
GeoCities comes with a number of nifty little tools that will help you get a
page up in next to no time. They are well documented on the GeoCities web site.
Instead of talking about these tools, I will discuss HTML, the language used to
create web pages. Using HTML you can create web pages on any computer. You can
view them in Internet Explorer, whether you are connected to the internet or not.
HTML creates hypertext documents for the World Wide Web. HTML stands for
Hyper Text Mark-up Language. Hyper text is a form of writing that is non-sequential.
That means you don’t have to read it from start to finish. You can read page 3,
then page 1, then page 2 if you like. On web pages this is achieved by linking
different pages together.
All web pages are written using HTML. In Internet Explorer you can view this
source code by opening the View menu, then clicking Source. Does that look
scary? Don’t worry – complex web sites use HTML in a complex way, but HTML
itself is really very simple.
A basic page
<html> <head> <title>A basic HTML page</title> </head> <body> <p>Hello. I am a basic web page!</p> </body> </html>
That is about as basic as it gets. Open Notepad in Windows (Start Menu
>Programs>Accessories), type in the above and save it on the desktop as
example.html. If you open this file now it will open in your browser and you
will see your first hand crafted web page.
What does it all mean?
HTML is made up of tags. Everything surrounded with < and > is a tag.
Pairs of tags surround content, telling web browsers what the content is so the
browser knows how to display it.
For example, the title of the page is marked using the <title> and
</title> tags. <title> is the opening tag, and </title> is the
closing tag. The text in-between is, you guessed it, the title!
All web pages have a few things in common. They should start and end with
the <html> and </html> tags. They must have a <head> section
followed by a <body>. The <head> contains information about the
page, such as the <title> (which is compulsory). The <body> is
where the, hmm, body of the web page goes. See if you can identify all the
parts of the page above.
Anything in the <body> section of the HTML appears on the page. You
can format that content using more tags.
- Divide text into paragraphs using the <p> tag.
- Make words bold by surrounding them with the <b> tag
- Make them italic using <i>
Open the page you just made in Notepad. Try adding <b> and <i> tags
to format the text.
There are many other tags you can use.
- To create a heading you can use the <h1> tag. There are heading tags of
smaller and smaller sizes up to <h6>. Try them out.
Using these tags see if you can create the pages you planned last week. Save
each page to the desktop. Make sure they each have different names, and that
they all end with “.html” – e.g. example2.html, mypage.html. Have a look at
them in Internet Explorer.
Joining the pages together with links
Linking is also done with tags. The <a> tag creates links. You have
to say where the link is going or where the image is coming from. This is done
with what is called an attribute. The attribute goes within the < and >
of the starting part of the tag. For links you have to add an href attribute,
like so – <a xhref=”mypage.html” mce_href=”mypage.html”> where mypage.html is the page
you want to link to.
Create a link from one of your pages to another using the <a> tag.
In Internet Explorer you will see that the text is now blue and underlined.
Click on the text and you will follow the link to the page you specified.
Your first link!
If you want to link to a web page on another site you need to put the whole
address in the href attribute – e.g.
<a xhref=”http://www.geocities.com/duncandrury” mce_href=”http://www.geocities.com/duncandrury”/> will link to
my site. Don’t forget to include http:// at the start or your link will not
work. Also, don’t forget the closing </a> tag after the text you want to
be a link, otherwise everything on your page will become the link!
Using these different tags, see if you can assemble the site you planned last
week. Link the pages together where you underlined the words that would be links.
You can look at the Nyama Choma page I made for examples –
http://www.geocities.com/mynyamachoma/ – view the source and see how I did it.
Next week we will add some pictures to your site and make it more colourful
and interesting to look at.
Originally published in Arusha Times 286