Starting with HTML

(adapted from Ellen Whyte/Maria O’Daniel Beginning With Basics columns 73 to 76 published February 98)

The Computer Currents On-line Dictionary at http://www.currents.net/resources/dictionary/dictionary.phtml defines HTML as " HyperText Markup Language. The language used to create World Wide Web pages, with hyperlinks and markup for text formatting (different heading styles, bold, italic, numbered lists, insertion of images, etc.)."

To start you need to have a text editor and a browser.

In your text editor, create a folder called Homepage. This is where you are going to store all files related to your homepages.

Open up one window for your file editor and another for your browser.

Now go to your file editor and open up a new page by clicking on File and New or the top icon. At the top of the page type <html> Then at the bottom of your page type </html> then save the file by clicking on File and Save or the third icon from the top. Call this file Welcome.html and then save the file to your Homepage folder.

You want all your text to be in between these two tags.

Different font sizes

Next to insert the header. To tell the browser you want a title, you have to put "tags" around the text. Type

<h1>Always Married To The Man On My Right </h1>

The <h1> tag tells your browser you want the letters to be in large font until further notice. The </h1> tag tells your browser it can stop using large font.

To see what it will look like on the Net, save this file again. Then open up the browser. Click on File, Open, Browse and look for your folder called Homepage and your file called Welcome.html Open this file by double clicking on it and then selecting OK. Now you see what it will look like when published on the Net.

A quick note about a web design. Some people specify font type and size, e.g. Courier 12, but this approach causes problems. If you design a web page too rigidly, then surfers may have problems customising your page to their specifications.

Now you can experiment with different types of headers. Try using these tags around some text:

To see what each header will look like, save after each change made, go to the browser window and click on Refresh.

Paragraphs

OK, next you want to write the first paragraph.

At this point you have to make a decision about style. When writing HTML I like to leave a line between commands, other people omit it. The important thing is to keep things tidy as you may want to go back to this page one day and make some changes, or *horror* you might have to come back and look for an error. A tidy and organised page of HTML coding is easier to work with than a messy page.

Back to the paragraph. You tell your browser you want to start up a new paragraph by putting in the <p> tag to start and </p> tag to finish. It should look like this:

<p>I suppose it's culture shock, but the thing that always manages to get under my skin is the way people in Jakarta assume I'm married to the man on my right.</p>

Forcing a break

You can force a sentence to break rather than wrap round by inserting the code <br>

Putting in lists

To put in items in a list you need to use <li> </li> tags around your text like this:

<li>Do you think these experiences are common ?</li>

<li>How would you feel if this happened to you ?</li>

<li>Do women have different problems in business situations from men ?</li>

<li>How can you prevent this problem from occurring ?</li>

Numbering items in a list

To number items in a list you must use <ol> </ol> tags. Put the <ol> tag at the start of your list and the </ol> tag at the end of the list.

<ol>

<li>Do you think these experiences are common ?</li>

<li>How would you feel if this happened to you ?</li>

<li>Do women have different problems in business situations from men ?</li>

<li>How can you prevent this problem from occurring ?</li>

</ol>

Adding bold text.

Let's say you decide you want to have the copyright notice in bold.

Go to your text editor and insert a line that says:

To make this line in bold simply add <b> and </b> tags, like this:

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see that the copyright notice is now in bold text.

Adding italics

Let's say you want the list of four questions to appear in italics. Go to the text editor and find the lines which say:

<li>Do you think these experiences are common ?</li>

<li>How would you feel if this happened to you ?</li>

<li>Do women have different problems in business situations from men ?</li>

<li>How can you prevent this problem from occurring ?</li>

To make the text in this list appear in italics, simply add <i> and </i> tags like this

<i>

<li>Do you think these experiences are common ?</li>

<li>How would you feel if this happened to you ?</li>

<li>Do women have different problems in business situations from men ?</li>

<li>How can you prevent this problem from occurring ?</li>

</i>

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see that the list is now in italics.

Adding in background colour

To change the page colour from grey to white you must add in the <body bgcolor="#ffffff"> tag, after the <html> tag and before the text so that the start of your page in the text editor looks like this:

<html>

<h1>Always Married To The Man On My Right </h1>

If white is not your preferred colour, then you can change the code. To have a red background, for example, you add in the tag <body bgcolor="#FF0000"> Here is a short list of colours available.

White	<body bgcolor="#ffffff">
Red	<body bgcolor="#FF0000">
Lime green	<body bgcolor="#00FF00">
Shocking pink	<body bgcolor="#FF00FF">
Yellow	<body bgcolor="#FFFF00">
Black	<body bgcolor="#000000">
Electric blue	<body bgcolor="#0000FF">
Orange	<body bgcolor="#FF7F00">
Dark brown	<body bgcolor="#5C4033">
Dark green	<body bgcolor="#2F4F2F">

For a look at more colours take a look at http://en.wikipedia.org/wiki/List_of_colors where you will find a large list of RGB codes and their associated colours at the same time.

Adding in coloured text

You can make words and phrases appear in their own colour by adding tags such as <font color="#rrggbb"> and </font> For example, let's say we want the title of our page to appear in lime green. To do this we find the header in the text editor:

<h1>Always Married To The Man On My Right </h1>

To make it lime green we look at the table above for the right code and we add

<h1>Always Married To The Man On My Right </h1>

</font>

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see that the title is now in lime green.

Adding in a link to another internet resource

Let's say that you want to link this page to a fantastic blog called Katz Tales. You know that the URL is http://www.lepak.com/katztales.html. At the end of your page, before the copyright notice you want to add a line which says:

For similar resources have a look at Katz Tales

And Katz Tales should be a hyperlink.

OK, so go to your text editor and find the bottom of the page which looks like this:

</html>

Add in the link first with <a href=". . .">, the name, and </a> tags. So our link should look like this:

<a href="http://www.lepak.com/katztales.html">Pot-Pourri</a>

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see the link appear.

Now simply add the text before the link. The finished HTML in the text editor should look like this:

<p>For similar resources have a look at

<a href="http://www.lepak.com/katztales.html">Katz Tales</a>

</p>

</html>

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see the link appear with your words before it.

(skip this in class) Making links within your document

If you have a long document, such as a FAQ or you want people to be able to skip from one place to another, you must use <a name="# . . . "></a> and <a href=". . ."></a> tags.

Let's say you want people to be able to skip to the questions section, before reading the text. This means that after the title, you will want a sentence:

Click here to go to the questions section

With "here" as a link.

To do this go to the text editor and find the top section which reads:

<h1>Always Married To The Man On My Right </h1>

</font>

Immediately after this add in this line:

<p>Click <a href="#01">here </a>to go to the questions section.</p>

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see the link appear with your words before it. However, there is nowhere in your text marked as 01.

In the text editor go the line that reads:

<h3>Answer the questions</h3>

Make this the 01 link by adding this in:

<h3><a name="01">Answer the questions</a></h3>

You can name links with words as well if you like. Remember that the link to somewhere needs the # whereas the named link does not!

Inserting images

On the Web, you will find the two most types of images are GIF and JPEG. GIF is used for most non-photographic images. It can support up to 256 colours. JPEG is used for photographs or anything that requires higher colour resolution, because JPEG supports about 16 million colours. Images are not stored within your document, the browser downloads the image file from the server and places it in the document where the tag is located.

There are lots of free picture libraries on the Net but please remember to check for copyright. Let's say you love bears and want to use a bear image as a personal trademark. You find an image you like at the Wiki Commons images library at http://commons.wikimedia.org. Say we use a brown bear from the national park. First you must save this file to your own Homepage folder. So click on File, Save As and put this in your folder labelled bear.gif.

Next go into your text editor. Go to the bottom of the page and find:

Before that line insert

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see the bear image appear before the copyright notice. Rest your mouse on the image. You see nothing, right? A well designed website labels all the images so that anyone visiting your site with a text only browser (or who doesn't allow images to load) knows what is supposed to be there. Add this into the tag,

alt="Name"

So the new line looks like this:

When you've saved and reloaded, put your mouse over the bear image. You will see a box appear labelled "bear".

Of course you can scan in photographs and use them to illustrate your web pages in exactly the same manner.

Adding in a link to your email address

If you want to include a link to your email box on your homepage, you have to add in the <a href="mailto:youraddress></a> tags. Let's say your address is ellenwhyte@lepak.com. You want the email address to come in one line before the copyright notice, and after the bear graphic.

<p>Mail me at <a href="mailto: ellenwhyte@lepak.com">Ellen </a></p>

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will see the line:

Mail me at Ellen

Anyone who clicks on this see a window pop up with your address in the send line. You can also put in your whole address so that people can cut and paste if they prefer to use a mail software package, which is independent from their browser.

Using META tags

META tags are places where you can store information about your web page. For example, you can use the tags to enter a brief description of your site. This way you control what description surfers see when they find your site. This description is picked up by search engines who will use this rather than the first thirty words which appear on your site.

Go to your text browser and find:

<html>

Enter the following line:

For this page the description I entered was this:

Save this file by clicking on File and Save or by clicking on the third icon from the top. Then go to your browser and click on Refresh. You will not see any difference as this information is hidden. To see the change, you must go to View, Source.

Another great META tag is the one which allows you to store keywords for search engines to pick up. Just underneath the line with the description add this:

I added:

Don't try to be clever and cheat the search engines by repeating the same keywords over and over! Many search engines are smart and will ignore your keywords list if you do this.

Now you can publish your site.