HTML Basics

What software do I need?

There are lots of software on the market, two popular ones are Microsoft FrontPage, and the class of the market Macromedia Dreamweaver. They both are able to operate WYSIWYG (What you see is what you get) and pure HTML code. But the most basic and easiest software to use, is one that you already have on your computer and is called Microsoft Notepad. it will do the same job as the other two, but does not offer WYSIWYG.

What ever software you have the coming tutorials will work for all as we are operating in code.

What is it and how do I form it?

You are probably all wandering what the hell is HTML, HTML is you could say the language of the web, it is the back bone of all websites. And you are also probably wandering what it stands for, well here it is: HTML = Hyper Text Mark-up Language and here is a breakdown of it:

• Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
• Text is what you will use. Real, honest to goodness English letters.
• Mark up is what you will do. You will write in plain English and then mark up what you wrote. More to come on that in the next Primer.
• Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English.

A html document is made up of a few 'sections', as below, I will talk you through it after.

A HTML document is built up of several 'commands' that are all included in 'tags'. Tags consist of a smaller than sign (<) and a greater than sign (>).

Most tags have a closing tag, which has a forward slash (/) after the first smaller than sign (<). As can be seen in the above code.

All HTML documents have two parts the 'head' and the 'body'. The head contains things that are not included on the main page. Whereas the body contains things that are included in the main page. If you look up at your browsers top bar it will say 'Randoman.co.uk' that information would be included in the head. Whereas the text you are reading now would be included in the body.

Here is an example:

The basic text page

At the end of this tutorial you will be able to make this.

First of all we shall have a look at the code, then I will explain it in detail.

From the previous tutorial, you know about the head and body, and also about tags.

Well the tags are the important things.

There is a list of the ones used on this page, and a few extra further down.

If you look in the head section you will see the tag <title> then some text, then the closing tag </title>, well what ever you type in the text part will appear in the bar at the top of your screen, before your browser name.

Setting the background colour is easy. First of all colour is always spelt the American way - color. To set a back ground color you need to add bgcolor="#hex" inside the boy tag, as can be seen above. Where you see the number #0000FF that is a hex code, you will need to know them. An extensive list can be found here.

Instead of using #0000FF, which is blue, you can write the name of the color - blue. But it is standard practice to use hex codes.

Right, on to the tags for the text. When using text you need to open a paragraph using the <p> tag, and closing the tag with </p>. You can include as many of these in your page as needed. Normally one for each little section of text.

To align your text use the following and add it into your <p> tag, as can be seen above. You do not need to add it to your closing paragraph tag, leave that as normal - </p>

Centre is also spelt the American way - center.

To use 'effects' such as italics, bold and underline. You need to use the following tags within the paragraph tags, as can be seen above.

You may use more than one 'effect' on text.

Now you want to know how to change the text? Well here goes.

Changing the text is all included in one tag - <font HERE>.

Where the HERE is you need to change it too one or more of the following.

face="FONT"

size="1-7" - sizes go from 1 - 7 (1 being the smallest, 7 the largest)

color="HEX"

You can more than one 'effect'.

The closing tag is always the same </font>

Nearly the end, here are a few more tags you may want to use:

Links and Images

Now you have your basic text page, you will probably want to add some images and/or links to other pages/websites. Well we will start with the images.

Very simple. Here is the code (I will explain it after.) :

Okay the first bit is simple, where it says logo.jpg replace that with where the image is saved on your computer. Also you can change the height and width, and also the border. They are straight forward. Where it says alt="test" that will be shown when you hover over the image, or if the image cannot be shown.

That is the basics of images. Very, very simple!

Now onto links, or hyperlinks as they are called.

Here is the code:

The a href bit tell the computer it is a link, where it says file.html Is the file it will link, can be any type of file, + it can be a website URL, but must include http://

Where it says TEXT, that is the text that will be linked.

If you want to link an image you can replace TEXT with the image html code, that we have just learned.

There are more things you can add to the standard hyperlink code.

To add the code below you need to add target="CODE" inside the first tag. By default it opens the page in the same window, this changes the way it opens.

Very simple again.

Well that's the end of this tutorial, I feel it is a bit jumbled up and may re-write it in the future. It will do for now.