revised Feb2005, Mar2007, May2010
___ / _/ | \,^%--- |_____| <_ \ Fear not. It's quite simple.... --- == >/ [_____] __>,^ ejm | | //| |
header title : style : closing the header | body colours : headline : paragraph : line break (carriage return) : unordered list : fixed width font (ASCII-art) : italic : bold : big font : small font : center : image : link : using more than one tag : special characters : extra colours | closing
Warning! While I am not an expert in HTML, the following instructions using the simplest of coding do work. This method will get you started and should display a working page on all the later browsers and most of the earlier ones. Bear in mind that HTML is interpreted by a machine and if there are errors in coding that the machine doesn't recognize, it will guess your intentions. Depending on the machine, the guess will be far or close to what you intended. A good rule of thumb is to remember that if a tag is opened, it must be closed. Naturally, because all languages are perverse, there are a few exceptions to this rule and they will be noted in what follows. (You can check for coding errors at the Web Design Group's page validator.)
header title : style : closing the header | body | closing
To get started, open up a text editor (notepad). The first part of the coding in the header won't actually show up on your web page. Type the following:
<html>
<head>
The title of your page shows up on the task bar of the browser. After the opening tag <title>
, type in the title of your page. Always make sure that you close the opening title tag. The closing tag looks like this: </title>
.
<html> <head>
<title>
The title of your page</title>
CSS is used more and more for the finer points of formatting. This page will only touch on it. But once you get a handle on these basics, please do read more about it at the Web Design Group.
</title>
<style type="text/css"> <!-- --> </style>
The closing tag looks like this:
</style>
</head>
And that's the end of the hidden part of your page. Now start formatting what will actually be seen.
header | body colours : headline : paragraph : line break (carriage return) : fixed width font (ASCII-art) : italic : bold : big font : small font : center : image : link : using more than one tag : special characters : extra colours | closing
Underneath</head>
, type:
</head>
<body>
If you want your page to be coloured differently from the browser default colours, there are two ways to do so.
</head>
tag inside <style type="text/css">[...]</style>
. While named colours can work, it is probably better to represent the colours using hexadecimal numbers. Please consult a colour chart for hexadecimal numbers you can use.
<style type="text/css"> <!-- body { background:
#ffffff; color:
#000000;} a:link {background:
#ffffff; color
:#0000ff;} a:visited {background:
#ffffff; color:
#006600;} a:active {background:
#ffffff; color:
#ff0000;} a:hover {background:
#0000ff; color:
#ffffff;} --> </style> </head> <body>
a:link
and a:visited
.
<body>
tag. Please note that this following method is somewhat outmoded and is being phased out.</head> <body bgcolor="
white" text="
black" link="
blue" vlink="
green" alink="
red">
bgcolor
.)link
and vlink
different.For more information about CSS, please consult the Web Design Group.
colours : headline | paragraph | line break (carriage return) | unordered list | fixed width font (ASCII-art) | italic | bold | big font | small font | center | image | link | using more than one tag | special characters | extra colours
All of the following tags go somewhere BELOW <body>
<h1>
a very large headline</h1>
<h2>
a large headline</h2>
<h3>
a medium headline</h3>
<h4>
a small headline</h4>
<h5>
a very small headline</h5>
Separate paragraphs by putting <p>
at the beginning of the paragraph. Try not to make your paragraphs too long. It is difficult to read huge expanses of text on a computer screen. (You'll have noticed this already if you've persevered this far. Make sure to end each paragraph with </p>
.
Maybe you would like to indent your paragraphs. You can do this by forcing extra space. Place as many nonbreaking spaces as you require right after <p>
. Note that you can simply hit the space bar to signify one space but in order to signify more than one space, you must type the character entity for the nonbreaking space (
). The coding for indenting the paragraph looks like this:
<p>
Place as many nonbreaking spaces as you require right after the opening p tag. Note that you can simply hit the space bar to signify one space but in order to signify more than one space, you must alternate by hitting the spacebar then typing the character entity for the nonbreaking space, which is (ampersand nbsp semicolon).</p>
new paragraph
<p> </p>
another new paragraph
<p> </p>
This can also be done more elegantly with style sheets (CSS). Bear in mind CSS cannot be viewed by the older browsers (earlier than version 4 of IE and NS). Nor can it be viewed if "style sheets" are disabled. The coding looks like this:
<style type="text/css">
<!--
[...]
p.indent { text-indent:10px; }
-->
</style>
</head>
<body>
<p class="indent">
Bear in mind CSS cannot be viewed by the older browsers (earlier than version 4 of IE and NS). Nor can it be viewed if "style sheets" are disabled. For more information about CSS, please consult the Web Design Group.</p>
<p class="indent">
new paragraph</p>
If you would like to specify where a new line should begin, place <br />
at the end of the line. It's like the carriage return on a typewriter. Please note that this is one of the tags that is an exception to the rule. It does NOT need to be closed and stands alone.
For instance for an address:
your name
your occupation
your address
your contact number
Note that there are two line breaks after "address". Here is the coding:
your name<br />
your occupation<br />
your address<br /><br />
your contact number<br />
The default for lists is for the browser to place bullets before each item on the list:
Here is the coding:
<ul> <li>
listed item</li> <li>
another listed item</li> <li>
yet another listed item</li> </ul>
The <ul>
at the beginning tells the computer where the start of your unordered list is. The <li>
is placed at the beginning of each listed item. And</li>
is placed at the end of each item. The final </ul>
goes at the very end of the list to tell the computer that the list is finished.
This is ideal for ASCII-art and charts. You don't have to use <br />
to break lines.
<pre>
Note that what you see is what you get. All the letters in the font are the same width. Hit the return button to change lines. blah = = = = = = = = = = = = = = = = = blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</pre>
One problem with the pre tag is that when it is closed, the following text automatically goes to new line with a space between. Sometimes you might want to have one or two words in a fixed width font in the same sentence. This is how to do it:
regular text<tt>
letters to be viewed in fixed width</tt>
regular text
This can also be done using CSS. Once again, bear in mind that the formatting will not be viewed if stylesheets are disabled or unsupported.
<style type="text/css">
regular text
<!-- code { font-family:monospace; } --> </style> </head> <body><code>
letters to be viewed in fixed width</code>
regular text
Coding to display italic text:
This is how to display<i>
italic text</i>.
This is how to display<b>
bold text</b>
.
This is how to display<big>
big font</big>
text.
This is how to display<big><big>
very big font</big></big>
text.
This is how to display<small>
small font</small>
text.
This is how to display<small><small>
very small font</small></small>
text.
This text should look centred.
There are 3 ways to center text. The last two methods do work but are being phased out with the advent of CSS.
<style type="text/css">
<!-- .center { text-align:center; } --> </style> </head> <body><p class="center">
This is how to display centred text in a paragraph.</p>
<center>
This is how to display centred text.</center>
align="center"
inside the tag. The following shows a headline and a paragraph being centered. (please note that this is out-moded coding):
<h3 align="center">
Centered headline</h3>
<p align="center">
This is how to display centred text in a paragraph.</p>
The image seen here is named "CW_PalmLogo.gif" (image © crosswinds.net). It is 68 pixels wide and 50 pixels high.
The image tag is another exception to the rule. It stands alone and does not require a closing tag. The coding for the above image with a no border around it looks like:
<img src="
CW_PalmLogo.gif"alt="
CW palmtree logo (©crosswinds.net)" width="
50" height="
40" border="
0" />
N.B. The file name of your image is case sensitive. You must enter it into your coding eXacTly aS it aPpears. If you would like to have a border around the image, change the number assigned to the border from zero to a higher integer. The higher the number, the wider the border.
If you do not know the dimensions of your image, drag the image into a Netscape browser. The dimensions (width followed by height) will appear on the upper task bar where page titles appear. (At least this method works for NS4.79....) The filename for the image will appear in the title bar.
<a href="
URLexactlyASitAPPears">
title of link</a>
Please click on the image of the links to see to the coding for a linked image.
Link coding for a 40x50pixel image with a 2 pixel border:
<a href="
URLexactlyASitAPPears"><img src="
LinkSpIctuRe.gif" alt="
links (©llizard 2003)" width="
30" height="
40" border="
2" /></a>
image and text link Please click on either the image of the links OR the text link beside it to see to the coding.
Coding for image and text link
<a href="
URLexactlyASitAPPears">
<img src="
imAgeFileNAMEexactlyasitapPears.gif/jpg/png" alt="
brief description of link" width="
xx" height="
yy" border="
?" />
title of link</a>
Once again, if you do not know the dimensions of your image, drag the image into a Firefox or Netscape browser. The dimensions (width followed by height) will appear on the upper task bar where page titles appear. The filename for the image will appear in the title bar.
This is how the coding should look.
<h1><i>
italic headline with<a href="URL">
a link</a></i></h1>
Note that the closing tags are symmetrically placed. The <h1>
is first; its closing tag </h1>
goes last. The <i>
is second; its closing tag </i>
goes second last. And so on.... (Just remember ...the last shall be first and the first shall be last.
) For headlines or paragraphs, with the exception of the center tag, all subsequent tags go inside the headline or paragraph tags.
Because the characters > & < are integral to HTML coding itself, if you wish to display them on your page, you should replace >
(greaterthan), &
(ampersand) and <
(lessthan) with character entities.
Replace > with >
Replace & with &
Replace < with <
Please take a look at a list of character entities to see what to do about accented letters and special symbols.
Maybe you want specific parts of text to be coloured differently from your default colours, you can add instructions.
There are two ways to display the following:
Red Green Blue
<style type="text/css"> <!-- .red { background:transparent; color:#ff0000; } .blue { background:transparent; color:#000099; } .green { background:transparent; color:#009900; } --> </style> </head> <body> <span class="red">
Red</span> <span class="green">
Green</span> <span class="blue">
Blue</span>
</span>
when you want to change colours. If you wish to colour <pre> text, please consult How to put ASCII-art in your website.
<font color="#ff0000">
Red</font> <font color="#009900">
Green</font> <font color="#000099">
Blue</font>
</font>
when you want to change colours.
To finish the page, close the <html>
and <body>
tags:
</body>
</html>
Save your work as pagetitle.html and you're done. You can look at your page by dragging the file into your favourite browser.
N.B. Ideally, the opening page for your site (your home page) should be entitled index.html
To review the order that these things should go on your page to produce simple formatting, take a look at the following coding.
Copy the following section between the dotted lines and paste it into your text editor (notepad)
-------------------------dotted line-------------------------<html> <head> <title>
Title of your page</title> <style type="text/css"> <!-- --> </style> </head> <body>
Type contents of your page here - organize the contents of your page...</body> </html>
Save your work as pagetitle.html
I hope all that helps you!
\_,^^%--- <\_ \ See? It's easy when you know how.... > >^^ /| ejm | \
For more detailed information about HTML, please consult W3Schools Introduction to HTML, HTML Dog: HTML Beginner Tutorial and/or HTMLisEasy.com: So, you want to make a Web Page!.
© llizard 1996-2001, 2003, 2005, 2007, 2010
CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page