Drugs
08-08-2006, 02:08 PM
HTML Basics - Written By Ryan
HTML stands for Hyper Text Mark-Up Language and was the first server side scripting code for the internet. When the internet was first developed websites were made up so simply it was just plain text and images, now we have PHP Scripts, Visual Basics, Forums and all sorts of new things to add to our site.
Anyway, the most known HTML tag is probably <html> which you must put at the beginning of your site to make the internet browser understand it and display the webpage. Normally, straight after the <html> tag goes the <head> tag which is there to use for some codes, for example CSS and some Javascript, within the <head> tag goes the <title> tag which when typed into like this '<title>YourSiteName </title>' will display YourSiteName on the bar at the top of the screen where it normally says the name of the internet browser. As you will see after we have typed in the site name after the <title> tag, we have put in a <title> end tag, when you have finished using a certain tag, for example <html> you will put the tag again, but with a '/' directly after the '<' character. So now we have;
<html>
<head>
<title>YourSiteHere</title>
We still have quite a way to go, because now we have finished using the <head > tag so we will need to close it by putting in a <head> tag with a '/' after the '<' so we now have;
<html>
<head>
<title>YourSiteHere<title>
</head>
If you just used that as a web page, there would be nothing! So lets make the content! The tag for this is <body> and you will put the content after this, obviously after you have typed out the content you will need to end the <body> tag by inserting </body> which makes the code so far look like this;
<html>
<head>
<title>YourSiteHere<title>
</head>
<body>
Welcome to my website!
</body>
But still, that isn't completed as you haven't ended the <html> tag! So all you need to do now to make a simple web page complete is put in </html> so it should look like this;
<html>
<head>
<title>YourSiteHere<title>
</head>
<body>
Welcome to my website!
</body>
</html>
So that's your basic website done, this is what it would look like when displayed on the web;
Welcome to my website!
Although, you must agree it does look rather boring so lets add some colour to it! To start with, lets add a background colour, to make the background a different colour, instead of just having the <body> tag you would have it as <body bgcolor="colourhere"> but where colour here is, you would insert a colour, you can use basic colours like <body bgcolor="blue"> or <body bgcolor="red"> which would just make the background a standard blue or red, or whatever other colour you choose. When you understand how to make the background colours different colours using for example 'red' or 'blue' you could go on to using hex codes, which has hundreds of colours, so instead of <body bgcolor="blue"> you would have <body bgcolor="#FFCC00"> which would display a shade of purple, you can find a list of hex codes by searching for 'Hex Codes' on a search engine [www.google.com] for example.
So if you use a background colour, you would have the following code, and as you can see, we don't make the closing tab for <body> into </body bgcolor> we just keep it as </body>
<html>
<head>
<title>YourSiteHere<title>
</head>
<body bgcolor='colourhere'>
Welcome to my website!
</body>
</html>
Now to make the text look better, normally text will be displayed in the default font 'Times New Roman' but we could change that buy simply putting this tag;
<font face='verdana'> Text Here </font>
That would display the text in the Verdana font, now to make it differant sizes you would do this;
<font face='verdana' font size='1'> Text Here </font>
And as you can see, we still only need the one </font> tag. If you want to make your text a differant colour, you can use the following tg, which is similar to the background colour tag;
<font face='verdana' font size='1' font color='colourhere'> Text Here </font>
One again you only need the one </font> tag and you can use a basic colour, I.E. 'Blue' or a hex code, I.E. '#FFCC00'! So the web page script now should look more like this;
<html>
<head>
<title>YourSiteHere<title>
</head>
<body bgcolor='colourhere'>
<font face='verdana' font size='1' font color='colourhere'> Welcome to my website! </font>
</body>
</html>
There we go, thats your basic HTML tutorials, to learn more about HTML, keep an eye out for the Basic HTML Tutorial Part 2!
Thanks, Ryan.
For any help, please e-mail [email protected]
Tutorial made strictly for the use of www.PixelResources.co.uk ©
HTML stands for Hyper Text Mark-Up Language and was the first server side scripting code for the internet. When the internet was first developed websites were made up so simply it was just plain text and images, now we have PHP Scripts, Visual Basics, Forums and all sorts of new things to add to our site.
Anyway, the most known HTML tag is probably <html> which you must put at the beginning of your site to make the internet browser understand it and display the webpage. Normally, straight after the <html> tag goes the <head> tag which is there to use for some codes, for example CSS and some Javascript, within the <head> tag goes the <title> tag which when typed into like this '<title>YourSiteName </title>' will display YourSiteName on the bar at the top of the screen where it normally says the name of the internet browser. As you will see after we have typed in the site name after the <title> tag, we have put in a <title> end tag, when you have finished using a certain tag, for example <html> you will put the tag again, but with a '/' directly after the '<' character. So now we have;
<html>
<head>
<title>YourSiteHere</title>
We still have quite a way to go, because now we have finished using the <head > tag so we will need to close it by putting in a <head> tag with a '/' after the '<' so we now have;
<html>
<head>
<title>YourSiteHere<title>
</head>
If you just used that as a web page, there would be nothing! So lets make the content! The tag for this is <body> and you will put the content after this, obviously after you have typed out the content you will need to end the <body> tag by inserting </body> which makes the code so far look like this;
<html>
<head>
<title>YourSiteHere<title>
</head>
<body>
Welcome to my website!
</body>
But still, that isn't completed as you haven't ended the <html> tag! So all you need to do now to make a simple web page complete is put in </html> so it should look like this;
<html>
<head>
<title>YourSiteHere<title>
</head>
<body>
Welcome to my website!
</body>
</html>
So that's your basic website done, this is what it would look like when displayed on the web;
Welcome to my website!
Although, you must agree it does look rather boring so lets add some colour to it! To start with, lets add a background colour, to make the background a different colour, instead of just having the <body> tag you would have it as <body bgcolor="colourhere"> but where colour here is, you would insert a colour, you can use basic colours like <body bgcolor="blue"> or <body bgcolor="red"> which would just make the background a standard blue or red, or whatever other colour you choose. When you understand how to make the background colours different colours using for example 'red' or 'blue' you could go on to using hex codes, which has hundreds of colours, so instead of <body bgcolor="blue"> you would have <body bgcolor="#FFCC00"> which would display a shade of purple, you can find a list of hex codes by searching for 'Hex Codes' on a search engine [www.google.com] for example.
So if you use a background colour, you would have the following code, and as you can see, we don't make the closing tab for <body> into </body bgcolor> we just keep it as </body>
<html>
<head>
<title>YourSiteHere<title>
</head>
<body bgcolor='colourhere'>
Welcome to my website!
</body>
</html>
Now to make the text look better, normally text will be displayed in the default font 'Times New Roman' but we could change that buy simply putting this tag;
<font face='verdana'> Text Here </font>
That would display the text in the Verdana font, now to make it differant sizes you would do this;
<font face='verdana' font size='1'> Text Here </font>
And as you can see, we still only need the one </font> tag. If you want to make your text a differant colour, you can use the following tg, which is similar to the background colour tag;
<font face='verdana' font size='1' font color='colourhere'> Text Here </font>
One again you only need the one </font> tag and you can use a basic colour, I.E. 'Blue' or a hex code, I.E. '#FFCC00'! So the web page script now should look more like this;
<html>
<head>
<title>YourSiteHere<title>
</head>
<body bgcolor='colourhere'>
<font face='verdana' font size='1' font color='colourhere'> Welcome to my website! </font>
</body>
</html>
There we go, thats your basic HTML tutorials, to learn more about HTML, keep an eye out for the Basic HTML Tutorial Part 2!
Thanks, Ryan.
For any help, please e-mail [email protected]
Tutorial made strictly for the use of www.PixelResources.co.uk ©