Very Basic HTML

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.)

HTML header

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>

Entitle your page:

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>

to header organization

Prepare to put in styles

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>

to header organization

Close the header:

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.

to header organization

Body of your page:

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>

colours:

If you want your page to be coloured differently from the browser default colours, there are two ways to do so.

You can add instructions using CSS. These instructions are placed ABOVE the </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">

</style>
</head>
<body>
```
background is the background colour.
color is the colour of the text. (Note that the American spelling for "color" is used in the coding.)
a:link is the colour of a clickable link BEFORE it has been clicked.
a:visited is the colour of a clickable link AFTER it has been clicked.
a:active is the colour of a clickable link AS it is being clicked.
a:hover is the colour of a clickable link WHILE the cursor is hovering overtop.

It's a good idea to use different colours for a:link and a:visited.
You can add instructions into the <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 is the background colour. (Note that the American spelling for "color" is used in bgcolor.)
text is the colour of the text.
link is the colour of a clickable link BEFORE it has been clicked.
vlink is the colour of a clickable link AFTER it has been clicked.
alink is the colour of a clickable link AS it is being clicked.

It's a good idea to make the colours of link and vlink different.

For more information about CSS, please consult the Web Design Group.

Organize the contents of your page

All of the following tags go somewhere BELOW <body>

headlines

To show:

a very large headline

<h1>a very large headline</h1>

To show:

large headline

<h2>a large headline</h2>

To show:

medium headline

<h3>a medium headline</h3>

To show:

small headline

<h4>a small headline</h4>

To show:

very small headline

<h5>a very small headline</h5>

to page organization

paragraphs

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> <p>     new paragraph</p> <p>     another new paragraph</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>

to page organization

line breaks

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 />

to page organization

unordered list

The default for lists is for the browser to place bullets before each item on the list:

listed item
another listed item
yet another listed item

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.

to page organization

large amounts of fixed-width font

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 or two words in fixed-width font

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">

<!--
code { font-family:monospace; }
-->
</style>
</head>
<body>

regular text <code>letters to be viewed in fixed width</code> regular text

to page organization

italic text

Coding to display italic text:

This is how to display <i>italic text</i>.

to page organization

bold text

Coding to display bold text:

This is how to display <b>bold text</b>.

to page organization

big font

Coding to display big font text:

This is how to display <big>big font</big> text.

Coding to display very big font text:

This is how to display <big><big>very big font</big></big> text.

to page organization

small font text

Coding to display small font text:

This is how to display <small>small font</small> text.

Coding to display very small font text:

This is how to display <small><small>very small font</small></small> text.

to page organization

center

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.

using 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>

out moded coding for centering:

<center>This is how to display centred text.</center>

Another outmoded coding for centering is achieved by placing 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>
```

to page organization

image

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.

to page organization

link

<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.

to page organization

using more than one tag

Perhaps you would like to have an

italic headline with a link

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.

to page organization.

You should replace all > & <

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.

to page organization

extra colours

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

You can use CSS to colour text.


<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>

For more information about CSS, please consult the Web Design Group.

Please take a look at a colour chart for hexadecimal numbers. Remember to put </span> when you want to change colours. If you wish to colour <pre> text, please consult How to put ASCII-art in your website.

The following is an out-moded way and is being phased out:
```
<font color="#ff0000">Red</font>
 <font color="#009900">Green</font> <font color="#000099">Blue</font>
```
Remember to put </font> when you want to change colours.

to page organization

Final step

header | body | closing

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

Review

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>

-------------------------dotted line-------------------------

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!.

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page

Crosswinds WebHosting