HTML the easy way
- how to write a webpage -
Created 17 May 1999 ... Updated
20 April 2000
Contents
Where to start
HTML is actually really easy, I always use the notepad editor for the best
results as it will give you small files and you can easily edit them.
In order to see what you get you first type the file in your notepad
editor and save it to disk. You can then open Internet Explorer or
Netscape
and open the file, you don't have to be connected to the internet.
Note that everytime you make a change in your Notepad file, you will
have to reload (or refresh) the page in Explorer or
NetScape to get the updates.
This page will give you just a bit of insight in the process of
creating webpages. The best way to learn however is to look
at the sourcecode for a page, do this by going to View-Source in
Explorer or Edit-View Source in Netscape.
One important tip before you start: keep it simple. The
more pictures and moving things you use the longer the ned user has to
wait before he can see the complete page. Also not every
option can be used by every browser. Everyone seems to
concentrate only at IE and NetScape and I have to agree, they
can do great things but there are users with other systems out
there so try to bear them in mind too.
Okay, here we go....
The structure of an HTML file
The structure of an HTML file (Webpage) is as follows:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
As you can see, the file starts with the tag HTML. This will
tell the browser that it's an HTML file. The next tag is HEAD, this
will tell the browser that all the information regarding the page
is stored there. This is for example the place where the Title (see
in the window caption bar) is stored.
Note that the HEADer is started with the <HEAD> tag and
stopped with the </HEAD> tag. This is the way it works
for most tags, you use the tag itself to start and you use the /tag
to stop. The BODY tag contains the page itself. See, again, how the
</BODY> tag cancels the <BODY> tag. Of course you will
also have to cancel the <HTML> tag so that's done in the last
line.
What to put in the header
The most important information you can put in the header is:
- The title of the page, you can see it in the caption
<title> </title>
example: <title> HTML the easy way </title>
- Meta tags
These are used to guide search robots. Don't worry about
them now, if you want to know have a look at the source of
this page.
What to put in the body
Well as said before, the body contains the actual page so
whatever you want to share with other people you'll have to
put in the body. The official rule is to put the actual text
in paragraphs, you don't really have to, it will still
work but in order to do it right....
- Paragraph
you should really split your data in paragraphs,
always.
<p> note that this is closed again with </p>
Simple text and Fonts
- Text
for normal text you can just type. Nothing else needed, there
is not something like Start-text and Stop-text.
- Italics
to make text appear Italic
<i> </i>
This is italic
- Boldface
to make text appear Bold
<b> </b>
This is bold
- Underline
to make text appear Underlined
<u> </u>
This is underlined
- Fontsizes
you can easily change the fontsize via these
commands
<h1></h1> Note that the lower the number, the
bigger the fontsize (not everything makes sense)
h1
h2
h3
h4
h5
h6
Formatting and Layout
A block of text is informative but the layout makes it much nicer to read.
So there are plenty of options in HTML to format text.
- New line
go to the next line. Note that normally the text
you type is put into one big line and only broken at the
edges of the browser window. With This tag you can make
the line breaks yourself.
<br>
this is line one
this is line two
- Center
Text can easily be centered using the following command
<center></center>
- Lists
you can make lists, just like this one. There are
more types but generally you would use the simple numbered or
unnumbered lists:
<ul> </ul> for the unnumbered list, like this one
<ol> </ol> for the numbered list, the points are
replaced by the itemnumber.
Every item on the list should be proceeded by <li>
This will increase the number on a numbered list and will
start a new line with a circle for the unnumbered list. When
you have alist in a list the circle will normally change,
depending on the browser
- Not quite lists
A list can be made which is officially not a list using the
<li> command outside an <ul> or <ol> It will
look like a list but is inserted all the way to the left
instead a bit off-left.
- Table
this is an important item in webpages
and
I've put it as separate item on this page.
Tables
Tables are really important on Webpages. Making one looks
difficult but they are pretty easy to build once you get the
hang of it
You start and finish a a table with
<table> </table>
Sometimes you want to have a header in the table to show
what the column represents: <th> </th> note that
it will automatically leave the left column open for the
row descriptions.
Every row (horizontal) of the table will start and stop with
<tr> </tr>
Every cel in a row will start and stop with
<td> </td>
Example table:
<table>
<tr>
<td> item 1 </td>
<td> item 2 </td>
</tr>
<tr>
<td> item 3 </td>
<td> item 4 </td>
</tr>
</table>
Will look like
item 1 | item 2 |
item 3 | item 4 |
In order to get borders around the fields for easier reading,
you can do this with
<table border=1> try it yourself
Options for table cells include
align=left, center or right and of course anything you
can do to text, even pictures are possible in a cell.
Hyperlinks
The nicest feature of HTML is hyperlinks. Hyperlinks is the
reason the web really exists as the guy who started the idea
was trying to get libraries linked together. This
finally resulted in the Web.... A hyperlink has the
form of <a></a>
In between these you would normally put some text describing the
link.
examples are
- Go to a webpage
<a href="http://kingaroo.op.het.net/">Kingaroo's page</a>
Kingaroo's page
- Go to a anchor on the current page
<a href="#start">Where to start </a>
Where to start
- Get email
<a href="mailto://mkoning@hotmail.com">Talk back</a>
Talk back
Note that in the second case you would add an anchor on a
page like this: <a name="start"></a>
Images
Text alone won't sell so you'd better include some pictures
as well. Do this via <img src="picture.jpg">
Yu can also add images as hyperlink, just put the <img>
tag in between the <a></a> tags.
Lots of picture control is possible, some options to put
in between the brackets are
- src="..." - you can even use hyperlinked pictures, just give the full
URL
- width=100 - to define the width of the picture in pixels
- width=100mm - to define the width of the picture in millimeters
- height=100 - to define the width of the picture in pixels
- align=left, center, right - for image alignement
- border=1 - to give the image a thin border (2 is more thicker)
- alt=picture - you can include a description of the picture. Typically
the user will only see it while the image is loading or when
he moved the mouse over the picture.
Maybe you've seen the moving gifs already and wondered
how they've made it. It's quite simple actually. Someone made several
pictures of different stages in the movement. These pictures
were put into one GIF file and once the browser sees that
it will swap the pictures after a certain time. The GIF file now
appears to be moving. So it's not a cool trick in HTML...
More fun you can do with the body part
Between the brackets in the BODY tag you can put many options
to change the appearance of the body.
- background="world.jpg" - for an image in the background
- bgcolor - the background colour in case there is no background
- text="#000000" - text colour, see below
- link="blue" - colour of unvisited links
- vlink="blue" - colour of visited links
- alink="blue" - colour of links when clicked on (active links)
Colour is always entered as RRGGBB, in hexidecimal
digits. RR is for the Red value, GG is for the Green
value, BB is for the blue value and it's somewhere between
00 and FF as it is hexadecimal. 00 means pure white, FF means
pure black. To make it easier there are 16 standard colours:
aqua,
black(black),
blue,
fuchsia,
gray,
green,
lime,
maroon,
navy(navy),
olive,
purple,
red,
silver,
teal,
white(white), or
yellow
So there are quite a few possibilities. Notice that not
all users can see colours on their screens so be careful
with what you choose.
Miscellaneous
Some other interesting tags are given below
- Horizontal Ruler
To make a horizontal line on your page use the HR tag
<hr>
options include
- width=100 - width in pixels
- width="60%" - width in percentage of the browser window
- height=3 - height in pixels
- Resources on the Web
This was of course just a small overview of the basic commands.
To get into details, have a look on the following sites:
Copyright of M. Koning 1999
return