Made with Notepad<HTML GUIDE>

Introduction:

HTML stands for Hyper Text Markup Language and describes a format of ASCII text, with
"Tags". The pages of the Internets' World Wide Web (WWW) are written in HTML. These tags
allow formatting of the text, images, etc. If you want to know about the revisions of HTML
or the full listing of tags, you've come to the wrong place - try here.

Is this guide too tricky? Try the HTML Guide by Niels Rune Bøggild. Spot on!


Contents:

<HTML>

This tag is the very first tag in an HTML file. When a web browser reads the file it knows that is written in HTML. The very last command in an HTML should be </HTML>.


<TITLE>

The title tag allows you to give the web page an overall title that will be displayed in the top of the web browsers window, i.e.: "My Web Page - Internet Explorer". After the <TITLE> tag, enter the title you want and then close the title tag with </TITLE>.


<BODY>

The <BODY> tag serves two purposes; 1) it tells the web browser that everything after the body command is the actual web page, and 2) it tells the web browser the characteristics of that page, i.e.: background color, color of the text, background pictures, etc..

    There are several parameters that the <BODY> tag can take:

    text=color - This is the color of the text
    bgcolor=color - The is the background color of the webpage
    link=color - This is the color of a link (see links below)
    vlink=color - This is the color of a visited link (see links below)
    alink=color - This is the color of an active link (see links below)

    You can put all these commands in one body command, like so:
    <BODY text="green" bgcolor="blue" link="red" vlink="magenta" alink="white">

    You should substitute "color" for either a keyword such as "red" or a hex value (red would be "#FF0000" for a pure red color). The hex value is derived from RRGGBB (so "#FF0000" means full red (RRggbb) and nothing else). Don't panic - if you want to use hex values (because you can get an accurate color) then you can get free programs from the net that work them out. For basic web page building you can stick to the pre-defined colors such as red, green, blue, yellow, gray, black, white, magenta, and probably a few more.
The second to last command in an HTML file should be </BODY>.


<FONT>

When starting a web page you must have <HTML> - (<TITLE>) - <BODY> in that order so the web browser knows how to display the page. After the <BODY> tag you can specify anything, although setting what font you want to use is probably a good idea.
    There are a couple of parameters and a nifty trick that the <FONT> tag can do:

    face=fontname: This allows you specify which font to use. You can specify more than one font by adding a comma and then another name. You should use this to your advantage; pick a font that looks cool - but if someone hasn't got it your page may be unreadable - so add another font that is readable (things like Arial and Times New Roman and as a last resort something like Courier which may be basic, but most different types of computer have it.).

    size=sizenumber: This tells the browser how big to make the text. Unlike font sizes you've probably used in Word, sizenumber is not like 8,10,11,12, etc. There are six sizes for fonts, and they go from 1 to 6 (1 being the biggest and 6 being the smallest).

    You can combine the parameters for the <FONT> tag like so:
    <FONT face="mycoolfont,arial,courier" size=2>
If you want to use the <FONT> tag only for a specific part of the web page then you can turn it off using </FONT>. You can use as many <FONT> tags as you want in a page.


<H1> to <H6>

The <Hx> tag is called the Header tag. You can use it to make text that stands out in your web page. For example, you may want the top of your web page to say "My Homepage" in big letters. You can just do <H1>My Homepage</H1> and voila! The header tag goes from H1 (largest) to H6 (smallest).


<A HREF="">

The <A HREF=> tag is known as a hypertext link. By using the <A HREF=""> tag you can make links to other web pages. You may know a friend who has a web page too, so you may want a bit on your web page about your friend and a link to their site.

You would use:
<A HREF="http://www.myfriendssite.com">My friends web page</A>
Don't forget the ending </A> - this turns off the link. If you don't turn it off, all the text on your page will be a link.


<IMG SRC="">

This tag allows you insert a picture on your web page. All Web browsers support JPEG (Joint Photographic Encryption Group) format and GIF (Compuserve GIF) format. There are several advantages/disadvantages to using either format but for simplicity I'll sum them up quickly;
    Compuserve GIF: Using a program such as GIF Movie Gear you can make animated pictures. GIF images can only have 256 colors.

    JPEG: JPEGs are compressed smaller than GIFs and can handle 16 million colors. If you can get hold of Adobe Photoshop 4 or Jasc Paint Shop Pro 5 you can do some fancy things with JPEGs.

    Parameters for the IMG SRC command:

    border=value: This will put a border around the picture, value is the number of pixels thick the border will be.
    alt="text": Before the picture downloads there will be a box where the picture goes. Specifying the ALT="text" command allows you put text in that box... useful for people who have images turned off in their browser. A bit tricky to explain - just try it.
    align="position": Using the ALIGN command allows to align the picture with text and other pictures. "position" can be; TOP, BOTTOM, MIDDLE, LEFT, RIGHT, CENTER, ABSMIDDLE. Use ABSMIDDLE to align a picture to text on the same line.

    To insert an image on a page you would use:
    <IMG SRC="http://www.mywebsite.com/logo.jpg" alt="My website logo" border=1>


<BR>

This is called a Break tag. A break tag is a line feed (go onto next line) in HTML.


<P>

This is called the Paragraph tag. It's used to format large bodies of text. It can be turned off with </P> or you can start another one but doing another <P>. The Paragraph tag allows you to use the ALIGN command on text, like so; <P align="right"> - which align text to the right.


<CENTER>

Do I need to explain this one? Put this on your page and everything after it gets centered. Use </CENTER> to turn off centering.


<B> <I> <U>

These three tags allow you to format your text. The tags <B>, <I>, and <U> are Bold, Italic, and Underline. Put them around the text you want effect. But like most tags, you must turn them off if you don't want them to effect your entire page and this is done with either </B>, </I>, or </U>.


<UL>

This tag indents everything around it. You can use more than one <UL> tag to make the indentation bigger. Use </UL> to turn it off.


<LI>

Putting a <LI> tag on your page will put a bullet point on it.


<HR>

This is the Horizontal Rule tag. The lines seperating the text on this page are made by using a <HR> tag. You can specify how wide you want the line by doing <HR width="value"> where value can be either the number of pixels across or the percentage of the page. I.e.: <HR width="600"> or <HR width="40%">.


<TABLE>

Tables are very handy things - used correctly, you can design almost any page the way you want. To understand how a table works, you must visualise it in your head. For example, before creating my index to my website, I thought of a layout and then worked out a table which would do it. I ended up with this:

The three rectangles (cells) make up one table.
    The parameters for a table are:

    width="number of pixels or perecentage of page" - The width of the table
    border="number of pixels" - How wide the tables border should be
    cellspacing="pixels" - How many pixels to space out the table border
    cellpadding="pixel" - How many pixels to add around the contents of the cell as a border
    ...and the usual color parameters mentioned in above sections

However, a table is composed of cells. You always start a table with a row across. This is done by using <TR> (table-row) and creating a column <td> (or division, hence table-division). So now you have a cell in your table. So to have three cells going across your page (like my picture above), you would use <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR>. So obviously, to make another row down, you'd put another <TR> in here. You really need to play with this one before you get the hang of it. If it's that difficult, use something like MS FrontPage Express which comes with Windows and just look at the code its done for you when you make a table.

    Parameters for <TD>'s are:

    width="number of pixels or perecentage of table" - The width of the cell
    align="center" - The horizontal alignment of the contents of the cell
    valign="top" - The vertical alignment of the contents of the cell
    ...and the usual color parameters mentioned in above sections

No example for this one, the code would be quite big I think.
Just have a look at the source code for this page. A table is responsible the alignment of the text and picture at the very top of this page.



Web Site Utilities

Spending hours doing trivial tasks? Not any more...

First of all, stick your web address in that box below and click "Check". The WebSite Garage checks all kinds of things, like browser compatability, spelling, working links, and more. And before you ask, it's free.
Web Site Garage

Looking for the tools to get things done? Try one of these...

tucows.cableinet.co.uk - Internet/Network related software.

www.winfiles.com - The biggest collection of Windows related software.


Want your pages to do something clever? These'll help...

www.developer.com



Don't Forget...

Design is everything. And be original.

Don't start a website that has nothing on it apart from a bit of text and a couple of pictures.

Register your finished site in search engines so that people can find it. Try Submit It.

Don't make links to other peoples images and files. If your going to have files to download, keep the files on your own site.

Always keep in mind how fast the connection to the webite is. Don't have lots of images if the connection is slow.

If you visit a page that has a layout that you don't know how to do, right click on the page and save its source code. Then you can play with it later. For Gods sake, don't rip off peoples' HTML code or their content or their pictures! They may get incredibly upset.

Many sites give away free Internet stuff such as webcounters and guestbooks. Good, but don't go overboard.



Home