HTML Tutorial
Posted: October 30th, 2004, 5:22 pm
I thought I'd write a basic HTML tutorial if anyone wants one 
HTML Tutorial - Building a basic website
HTML stands for 'Hyper Text Mark-up Language'. It's a mark-up language which uses tags (These little critters '<', '>'). They support the language and define normal text to HTML. Don't confuse > and < tags with 'less than' and 'greater than', but if you're new then it can be an easy mistake
.
Spelling in HTML is American, so Colour to us Brits and other fine connisours of the English language is now Color
When building a website, there are multiple languages to consider using. The most basic and commom language is HTML which is simple and easy to use. You can build web pages using editors, such as Microsot Frontpage, Microsoft Publisher and Dreamweaver. The best was (In my opinion) is via Notepad (Yes, that common ol' program kicks more arse than you can imagine). Using Notepad, you can implement html script and make webpages, which I will hopefully show you below.
You should open up Notepad, Wordpad works fine, but Notepad's a personal preference. To save as a web page you just save it as "index.html" - the index part indicates that this is your homepage, and you can save it as a different name if you wish to create another page, such as "contact.html" etc.
The first part of the script comprises of writing:
This shows the browser that the script is in html. Always put this at the top of any HTML page you are creating.
Now, you want to create the head of you web page. The head is used to appoint the title of the page, the thing you see in the top left corner of your browser. The head can also be used for a variety of other things, such as Javascript. But we'll not go into detail about that.
The code for the header is:
This now shows that you are in the head part of the document. This is also a must when writing web pages in HTML.
The next part is the title of the page, like we discussed earlier. The code for this is:
Catching on? Easy really...
Now we input the title of our webpage, and this is where we first come across closing the tags. Each open tag like <title> requires a closing one to make sure you stop it. It's like pressing record on a tape recorder, and then pressing stop. The stop is the closing tag. To close a tag, you simply insert a / into the beginning of the tag. An example would be:
Now, back to the title. The example below shows how you can put together the title:
So far we have this:
This is with all of the tags being closed off. This will display a blank web page with the title 'Your webpage'.
[Moderator's Note: the web page's title is displayed in the top left part of the window called the title bar. If you view the source of this page and look at what's between the title tags, you'll see the text HTML Tutorial, which is what shows up in the title bar.]
Now we move on to the body section of the web page. You can think of it as a person, with no feet. It has a Head, a body, and the title is like a dog tag around the neck
To start our body section, you write the code:
If you want to have a background colour you can write:
The bgcolor part indicates the desired background colour when coupled with the ="######"
You may have seen the six digit numbers before, and, in hex, they are the background colours. You can simply write orange, black, white, green etc in place of the numbers, but it is often seen as unprofessional. I cannot remember all of the colours, but black is "000000" and white is "FFFFFF".
If you want a background image (Not advisable, often looks really unprofessional unless used with immense style) you can use the code below:
The 'background' part shows that an image will be used, the ="image.jpg" part is the name of the image you want to use. You just have to change the image.jpg to change the background image to one of yours. Remember, if you use an image in a different folder to the one that your webpage is in then you have to include the full file path of it, so for example:
You can just change the .jpg bit to .bmp if the image is a bitmap, or .gif if it is a graphics interchange format file. Just change it according to the relevant file format.
Now we have covered the background in a brief detail (See the oxymoron? *cheese*) we can move on to the actual content.
The content of the page can be in any order, so I will put the following parts in a series and you can choose to use them at your will.
INSERTING IMAGES
Inserting images is easy. Study the following script:
This code displays the basic image on the page. The 'img' part shows that it is an image, and the src part, when accompanied by the ="image.jpg" shows the source of the image, like we covered in the background image part.
If you want to give the image a simple border, simply adjust it into the script below:
You can change the border width by changing the 1 part, to 2, 3 etc.
Ever wondered how people get that text to display when you hold the cursor over the image, you know, in the pale yellow box?
Well, the code below, included in the image part, shows this:
The 'alt' part is the part which displays the Alternate text, or the bit that comes in when you hover your cursor over the image.
If you wish to modify the width and height of an image you use the code below:
This means that the image is 500 pixels wide and 200 high. the image overall will have a border of '1', have the alternate text of 'This is an image' and be 500 pixels wide and 200 pixels high. You never have to close an image tag, this is one exception to the rule. This concludes the images section.
HYPER-LINKS
Hyper links are links which provide the user with quick and easy access to a location or document on a webpage. You can use hyperlinks for images and text alike, as demostrated below:
The above code creates a hyper-link to a page called contact.html. We have to then write 'Contact', or another piece of text or image which is the object hyper-linked to the contact.html page. The </a> part ends the hyper-link so that the entire webpage doesn't become a hyper-link. I am led to believe that the 'href' part is something to so with hyperlink reference, though don't quote me on that. Again, the ="whatever.html" part is the source page. If you wish to link to a document / file to give people access to download the file, then just put 'thefile.exe' or 'thingus.zip', or whatever format is relevant. If you wish to link to another web page then use ="http://www.whatever.com" and change the address accordingly.
To change the colour of hyper-links, you have to include the following code in the top body section of your web page, though not the head:
As already mentions, you just need to change the "FFFFFF" to change the colour. The ' body link="FFFFFF" ' part changes the colour of hyper links in general. The alink="FFFFFF" part changes the active links, or the selected one which the user has clicked on. The vlink="FFFFFF" part changes the
visited links, so if the user has lciked on that link before then it can be a different colour. You do not need to replace the <body> tag with the new link one even though it does have a body part of its' own.
Hyper links for images are exactly the same as a Hyper link for text, only you may want to include the border="0" part in it because browsers automatically give a hyperlinked image a border. Only do this is if you do not want a border for your image.
SCROLLING MARQUEES
Scrolling marquees allow text to scroll across the page. This may sound like something tricky, but it's so simple, it's funny.
The code for the marquee is below:
See? The marquee tag means that any text within the two (Open and closing tags) will scroll across the page. This is a simple yet effective method, though use it with caution as some people regard it as cheesey.
ALIGNMENT
Page alignment, such as centering text and images is easy. Much like all HTML, it is of course.
To center any objects, such as images or text, you merely use:
And voila! centered.
Page alignment is automatically left, so you have to use:
The 'p' part of it is the paragraph and the ="right" part is well, right. Close it with </p>.
OTHER BASICS
Other basics which include starting new lines and paragraphs are below.
To start a new line directly below the one you're currently on, simply write:
This breaks the line into a new one right below the one above.
To start a new paragraph, you have to use:
This creates a gap of about 2 lines between the object above it.
Both of these are vital and you will find them useful to you if you design a web page.
FONTS
Fonts are another vital element of your web page. They also help people read text and determine how experienced you are. The worst pages I have seen are just all Times New Roman font. This, in my opinion, is a sign of amaturism. While I can't actually spell amaturism, I can tell a good page from a bad page and font is very important in this process. The default font is Times New Roman for most browsers, this is why it's considered bad. All the formatting that applies to normal text applies to hyper-links, apart from underlining, which is slightly more complicated.
To cut to the chase, the code to change your font is below:
The face="Arial" part shows the font you want to use. Be careful with fonts, as spelling is everything. Verdana is my personal favourite, operating best at size 10, or 2 in HTML terms. The </font> tag ends all font formatting, so use it carefully.
To change the colour of text, use the code below:
This means that any text within the font="000000" boundaries, is black. Of course you can change the colour, as I have mentioned so many times already.
To change the size of text, use the code below:
The font size="2" functions to change the size of text (!). Sizes in HTML are different to that of normal word processors, or anyhing else on the whole basically. HTML font size 1 is quivalent to about size 8 in a word processor, HTML size 2 is equivalent to size 10 in a word processor, and so on. Again, </font> closes the formatting.
Quick headings are also useful. They are easy to use and efficient.
The following quick headings are shown below with equivalents:
This carries on for a few, I think...
E-MAILING
I debated whether to put this under the hyper-links heading, but I couldn't be bothered.
Ever wonder how when you click a "Contact Us" hyper-link, you get taken to your inbox, or to your default mail service?
Well, using the following code, you too can do this:
As you see it has the same layout as a normal hyper-link, only with the addition of the "mailto:" at the start of the link. This allows the browser to interpret it as an e-mail address and so you can then, after the colon (hehe), put the e-mail address. This then functions as 'one of those links which takes you to your e-mail thingy'.
OTHER FORMATTING
Other formatting, such as italics, underline and bold are really easy to use.
The code for bold is:
This should give you a desirable bold effect on your text.
Underline is:
Italics are:
They are simple and can add a great effect to some web pages.
QUICKIES
Another quickie -
By adding '#top' to the end of a link to the desired page, you can create a link which takes you back to the top of the page.
Example:
This should work, and take you to the top of your page. Useful for long documents.
This concludes the HTML tutorial, and if you have any questions don't hesitate to ask Also, if you want anything as in code or how to do something, just ask (Also if you spot an error, which I'm sure there are plenty of).
HTML Tutorial - Building a basic website
HTML stands for 'Hyper Text Mark-up Language'. It's a mark-up language which uses tags (These little critters '<', '>'). They support the language and define normal text to HTML. Don't confuse > and < tags with 'less than' and 'greater than', but if you're new then it can be an easy mistake
. Spelling in HTML is American, so Colour to us Brits and other fine connisours of the English language is now Color
When building a website, there are multiple languages to consider using. The most basic and commom language is HTML which is simple and easy to use. You can build web pages using editors, such as Microsot Frontpage, Microsoft Publisher and Dreamweaver. The best was (In my opinion) is via Notepad (Yes, that common ol' program kicks more arse than you can imagine). Using Notepad, you can implement html script and make webpages, which I will hopefully show you below.
You should open up Notepad, Wordpad works fine, but Notepad's a personal preference. To save as a web page you just save it as "index.html" - the index part indicates that this is your homepage, and you can save it as a different name if you wish to create another page, such as "contact.html" etc.
The first part of the script comprises of writing:
Code: Select all
<html> Now, you want to create the head of you web page. The head is used to appoint the title of the page, the thing you see in the top left corner of your browser. The head can also be used for a variety of other things, such as Javascript. But we'll not go into detail about that.
The code for the header is:
Code: Select all
<head>The next part is the title of the page, like we discussed earlier. The code for this is:
Code: Select all
<title> Now we input the title of our webpage, and this is where we first come across closing the tags. Each open tag like <title> requires a closing one to make sure you stop it. It's like pressing record on a tape recorder, and then pressing stop. The stop is the closing tag. To close a tag, you simply insert a / into the beginning of the tag. An example would be:
Code: Select all
</html> or </title> Code: Select all
<title> Your webpage </title> Code: Select all
<html>
<head>
<title> Your webpage </title>
</head>
</html>
[Moderator's Note: the web page's title is displayed in the top left part of the window called the title bar. If you view the source of this page and look at what's between the title tags, you'll see the text HTML Tutorial, which is what shows up in the title bar.]
Now we move on to the body section of the web page. You can think of it as a person, with no feet. It has a Head, a body, and the title is like a dog tag around the neck
To start our body section, you write the code:
Code: Select all
<body> Code: Select all
<body bgcolor="000000"> You may have seen the six digit numbers before, and, in hex, they are the background colours. You can simply write orange, black, white, green etc in place of the numbers, but it is often seen as unprofessional. I cannot remember all of the colours, but black is "000000" and white is "FFFFFF".
If you want a background image (Not advisable, often looks really unprofessional unless used with immense style) you can use the code below:
Code: Select all
<body background="image.jpg"> Code: Select all
C:\Documents and Settings\Person\My Documents\My Pictures\image.jpg Now we have covered the background in a brief detail (See the oxymoron? *cheese*) we can move on to the actual content.
The content of the page can be in any order, so I will put the following parts in a series and you can choose to use them at your will.
INSERTING IMAGES
Inserting images is easy. Study the following script:
Code: Select all
<img src="image.jpg"> If you want to give the image a simple border, simply adjust it into the script below:
Code: Select all
<img src="image.jpg" border="1"> Ever wondered how people get that text to display when you hold the cursor over the image, you know, in the pale yellow box?
Well, the code below, included in the image part, shows this:
Code: Select all
<img src="image.jpg" border="1" alt="This is an image"> If you wish to modify the width and height of an image you use the code below:
Code: Select all
<img src="image.jpg" border="1" alt="This is an image" width="500" height="200"> HYPER-LINKS
Hyper links are links which provide the user with quick and easy access to a location or document on a webpage. You can use hyperlinks for images and text alike, as demostrated below:
Code: Select all
<a href="contact.html"> Contact </a> To change the colour of hyper-links, you have to include the following code in the top body section of your web page, though not the head:
Code: Select all
<body link="FFFFFF" alink="FFFFFF" vlink="FFFFFF"> visited links, so if the user has lciked on that link before then it can be a different colour. You do not need to replace the <body> tag with the new link one even though it does have a body part of its' own.
Hyper links for images are exactly the same as a Hyper link for text, only you may want to include the border="0" part in it because browsers automatically give a hyperlinked image a border. Only do this is if you do not want a border for your image.
SCROLLING MARQUEES
Scrolling marquees allow text to scroll across the page. This may sound like something tricky, but it's so simple, it's funny.
The code for the marquee is below:
Code: Select all
<marquee> This Text Will Scroll Like A Cat, Baby! </marquee> ALIGNMENT
Page alignment, such as centering text and images is easy. Much like all HTML, it is of course.
To center any objects, such as images or text, you merely use:
Code: Select all
<center> This text is centered! </center> Page alignment is automatically left, so you have to use:
Code: Select all
<p align="right"> This text is right! </p> OTHER BASICS
Other basics which include starting new lines and paragraphs are below.
To start a new line directly below the one you're currently on, simply write:
Code: Select all
<br> To start a new paragraph, you have to use:
Code: Select all
<p> Both of these are vital and you will find them useful to you if you design a web page.
FONTS
Fonts are another vital element of your web page. They also help people read text and determine how experienced you are. The worst pages I have seen are just all Times New Roman font. This, in my opinion, is a sign of amaturism. While I can't actually spell amaturism, I can tell a good page from a bad page and font is very important in this process. The default font is Times New Roman for most browsers, this is why it's considered bad. All the formatting that applies to normal text applies to hyper-links, apart from underlining, which is slightly more complicated.
To cut to the chase, the code to change your font is below:
Code: Select all
<font face="Arial"> This is Arial font! </font> To change the colour of text, use the code below:
Code: Select all
<font color="000000"> This is Black text! </font> To change the size of text, use the code below:
Code: Select all
<font size="2"> This is Size 2 font! </font> Quick headings are also useful. They are easy to use and efficient.
The following quick headings are shown below with equivalents:
Code: Select all
<H1> This is the largest heading, Around size 72 in a word processor </H1>
<H2> This is the second largest heading, Around size 48 in a word processor </H2>
<H3> You get the idea, Around size 24 in a word processor </H3>
E-MAILING
I debated whether to put this under the hyper-links heading, but I couldn't be bothered.
Ever wonder how when you click a "Contact Us" hyper-link, you get taken to your inbox, or to your default mail service?
Well, using the following code, you too can do this:
Code: Select all
<a href="mailto:[email protected]"> Contact Us! </a> OTHER FORMATTING
Other formatting, such as italics, underline and bold are really easy to use.
The code for bold is:
Code: Select all
<b> this is bold text! </b> Underline is:
Code: Select all
<u> Underlined text! </u> Code: Select all
<i> Italicised text!</i> QUICKIES
Another quickie -
By adding '#top' to the end of a link to the desired page, you can create a link which takes you back to the top of the page.
Example:
Code: Select all
<a href="index.html#top"> Back To Top </a> This concludes the HTML tutorial, and if you have any questions don't hesitate to ask
Also, if you want anything as in code or how to do something, just ask (Also if you spot an error, which I'm sure there are plenty of).