Beginners Guide to HTML and Website Design
The Technology eZine - The Internet


This Website is Best Viewed Using Firefox

Learning HTML

By Charles Moffat - March 2008.

HTML is quite likely the easiest computer language to learn. It is about as hard as setting your alarm clock (which apparently is a challenge for some people).

In my case I learned HTML by being curious. I right clicked on a website and then selected "View Page Source", which revealed what all the HTML coding looked like. From that I was able to quickly decipher the meaning of individual codes (which are very easy and logical to figure out) and then experiment with.

To experiment with HTML all you need is your Windows Notepad. Type the codes you want in there and "Save As" the file to your desktop as "testing.html" (or some similar name). Then go to your desktop and drag the new file into Internet Explorer or Firefox (I recommend Firefox because IE has regular glitches) and see what it looks like.

HTML uses < and > signs to indicate the shifts between HTML code and actual text to be shown on the website.

Lesson #1: The Basics.

Experiment with each of the codes below to see what happens. When using these codes always remember to end the code with a /, as demonstrated below.

<p>A New Paragraph with a space above it.</p> =

A New Paragraph with a space above it.

Note: Using </p> to end a paragraph is not a necessity, unless you changed the alignment to right or center (see Lesson #4).

<b>Bold</b> = Bold

<i>Italic</i> = Italic

<h1>Header One</h1> =

Header One

<h2>Header One</h2> =

Header One

<h3>Header One</h3> =

Header One

<h4>Header One</h4> =

Header One

<h5>Header One</h5> =

Header One

Note 1: When you use a header, marquee or center it automatically makes a new paragraph. Headers are usually used for making titles or sub-headings. See the font section in Lesson #2 to make large or small fonts.

Note 2: Blink and Marquee may not work in all browsers. For best results I recommend using/downloading Firefox.

<blink>Blink</blink> = Blink

<marquee>Marquee</marquee> = Marquee

<center>Center</center> =

Center

<br> =
Creates a break. Similar to a paragraph, but only 1 line down instead of 2. There will be no space in between breaks.

<hr> = Horizontal Line


Lesson #2: Titles, background and font colours.

Below are some slightly more complicated codes. Try experimenting with these too.

<title>Insert the Title of Your Website Here</title> and the title will appear at the top of your browser.

<body bgcolor="green" text="red" link="blue" alink="yellow" vlink="orange"> and the background colour, text colour and the colour of the links will change. Your choices will effect the whole page, with the exception of font HTML codes (see below). Notice: vlink is for the colour of links you have recently visited and alink is the colour a link changes the moment you click it.

If you want to change the size, colour or font face of individual pieces of text you will need to use font codes. These codes will override the body codes mentioned above.

<font face="arial narrow" size="-2" color="red">Small, narrow, red text.</font> =
Small, narrow, red text.

<font face="arial" size="+2" color="yellow">Slightly larger yellow text.</font> =
Slightly larger yellow text.

<font face="arial black" size="+4" color="blue">Big, thick, blue text.</font> =
Big, thick, blue text.

I recommend playing around with different fonts, sizes and colours until you get used to them. You can also use a colour chart to get the HTML codes for more complicated colours.


Lesson #3: Images and Links.

It is highly recommended that you save your images in a separate folder labelled "images". It will save you a lot of time coding.

I also recommend labelling your image files precisely and with a -01, -02, etc. in the event that you have multiple files on the same topic.

For images "img" stands for image and src is the location. Be careful where you put "s and /s. You can also control the width and height of images using height=200 or width=300

<img src="images/South-Korea-01.jpg" width=300 height=200> =

Or you can directly link to the file like this:

<img src=http://www.lilith-ezine.com/articles/technology/images/South-Korea-02.jpg width=300 height=200> =

Links follows the same concept as images, except "a" stands for link and href is for the location.

<a href=http://www.lilith-ezine.com/articles/technology/>The Technology eZine</a> = The Technology eZine

Lesson #4: Alignment of Images and Text.

You can control the alignment of your paragraphs and your images by using align="right", align="left" and "align="center" like the examples below.

<p align="right">Right Paragraph</p>

<p align="left">Left Paragraph</p>

<p align="center">Center Paragraph</p>

You can also use the <center> from Lesson #1 to center your images, not just your text.

<img src="images/South-Korea-01.jpg" width=150 height=100 align="left"> =

<img src="images/South-Korea-01.jpg" width=150 height=100 align="right"> =




<center><img src="images/South-Korea-01.jpg" width=150 height=100></center> =

Note: When you use alignment on your images notice that it will automatically wrap text and anything else (including other images) around it automatically.


Lesson #5: Tables.

Tables are one of the most complex things you can do with HTML. It is excellent for making graphs and creating a more complicated layout for your website. TRs are for horizontal rows and TDs are for individual dimensions of the table.


<table border=2 cellpadding=2 cellspacing=2>
<tr>
<td width=120>Inside a table you control individual sections of code and text, a bit like a checkerboard.</td>
<td width=120>You can change the table's border size with border=5.</td>
<td width=120>Etc, etc.</td>
</tr>
</table>

Inside a table you control individual sections of code and text, a bit like a checkerboard. You can change the table's border size with border=5. Or the padding around the text with cellpadding=5. You can make different sections different colours using bgcolor=gray, green, white, red, etc. Or the spaces between sections using cellspacing=5. If you put too much text in one area the table automatically expands to create a large enough area to fit all the text.
You can use headers inside the individal td's (table divider).

<h1>

<h2>

<h3>

<h4>

<h5>
You can also control the size of columns and rows using width=pixel#, height=pixel# and the shape of columns and rows using colspan=2 or rowspan=2.
You can also control the vertical alignment of text using valign="top". Or valign="bottom". Or valign="middle".
You can also put images and links inside the table.
And center them.
Try Right Clicking on this website and go to View Page Source. Then scroll down and look at the HTML code for this table.

Also note that this table is INSIDE another table. You can put any number of tables inside of each other, but try not to get confused about which one is which.


Conclusions

HTML is fantastically easy.

Practice these five basic lessons above and you will be well on your way to designing websites. Or you could get a WYSIWIG program, which stands for "What You See Is What I Get" (or don't get as is often the case). WYSIWIG programs don't always work properly, and they are annoying slow and only allow the most basic of functions. To do really interesting things you will want to be able to hardcode HTML so you will know what you can and can't do, and more importantly you will know why.

Remember that once you build the website, youíre also going to need to protect it. Click here for more information on network security, as it is incredibly unfortunate to spend hours upon hours building a website just for a few hackers to come and tear it down. Network security is necessity for anyone who owns a website and holds their data in a high regard. Donít take any risks you donít have to! The cost of a security breach is far more than the relatively small amount of time and effort needed for online security.

For people looking to learn more I recommend learning mouseovers, iframes, frames, non-basic colours and eventually learning javascript (which is more complex language than HTML but allows you to make clocks, gadgets and variety of fun stuff).

Happy HTMLing!

About Us - Advertise - News Blog - Art History - Automotives - Canada - Entertainment - Environmental - Fashion - Feminism - Gothic - Health - Politics - Religion - Technology