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).