Zenax
Active Member
- Messages
- 1,377
- Reaction score
- 4
- Points
- 38
I know there are quite a few on here but heres mine, and I hope to help others with this tutorial. It will basically be on HTML and CSS so it will cover background colours to Divs, for the more advance person.
I will try and expalin in "Lamens Terms" (Simple as Possable) for the begginners!
HTML Basics:
First off, when ever you start to write your web page you have to put
All HTML tags must be marked placed inbetween < > brackets. If you miss of one of the end of one of your tags, it will mess up your page!
In between the Head tags is the parts of the page, that you want to be read "first", so to speak. So in there you would place stuff like javascript, if told to, and also you would place your style in there, which we shall cover later on in the tutorial.
In between the body tags is what you want on the page, so this will contain all your content and so it will contain DIVS (also covered later) and tables etc.
So a list of basic HTML tags that might be useful for you to know, as basics, are as follows, as we will cover other ways to place these in later on!
Creates this effect:
Hello World!
Creates this effect:
Hello World!
Creates this effect:
Hello World!
That is basically what these tags are used for and what happens when you mix them together!
Now we come on to comments in HTML! To place a comment in a web page you put the following:
Now we come on to CSS!
Now CSS stands for Cascading Style Sheet! and this is what defines the properties for your document!
There are two ways of putting CSS into your page! There is the inline style, which is where you place the CSS within the header tags of your web page, and there is external CSS which is where you place all your CSS in a global stylesheet!
In this tutorial I will be using the inline style, as I can't place an external stylesheet onto this thread, but I can show you how it is done!
For an inline style you would do the following:
That bit of CSS shows that the background colour of the web page is black. Now for professional web design, you use hex colours or RGB in the folowing form:
#000000 - This is black in Hex
rgb(0,0,0) - This is black in RGB code
Now if you have a lot of pages, and a lot of CSS then it is normally best to place your style in an external page. Not only is this easier, as it makes the changes to all the pages, it saves a lot of room on the page!
This is how it is done:
Now when I prefer to code using the External Stylesheet method, and I think that you should as well.
Now for the basics of CSS you have the following:
I shall finish this tutorial at a later date, due to the fact I have to go watch a football match right now!
Regards,
Zenax
I will try and expalin in "Lamens Terms" (Simple as Possable) for the begginners!
HTML Basics:
First off, when ever you start to write your web page you have to put
Code:
[/SIZE][/FONT]
[FONT=Tahoma][SIZE=1]<html>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=1]<head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=1][/SIZE][/FONT]
[FONT=Tahoma][SIZE=1]</head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=1]<body>[/SIZE][/FONT]
[FONT=Tahoma]
[SIZE=1]</body>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=1]<html>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=1]All HTML tags must be marked placed inbetween < > brackets. If you miss of one of the end of one of your tags, it will mess up your page!
In between the Head tags is the parts of the page, that you want to be read "first", so to speak. So in there you would place stuff like javascript, if told to, and also you would place your style in there, which we shall cover later on in the tutorial.
In between the body tags is what you want on the page, so this will contain all your content and so it will contain DIVS (also covered later) and tables etc.
So a list of basic HTML tags that might be useful for you to know, as basics, are as follows, as we will cover other ways to place these in later on!
- <b></b> --> Anything that is placed in between these tags will become bold!
- <i></i> --> Anything that is placed in between these tags becomes italic!
- <u></u> --> Anything that is placed in between these tags becomes underlined!
- <marquee></marquee> --> Anything that is in between these tags will scroll from right to left! However this tag is hardly used any more, and javascript/DHTML marquees are more common!
Code:
[/SIZE]
[SIZE=1]<b>Hello World!</b>[/SIZE]
[SIZE=1]Creates this effect:
Hello World!
Code:
[/SIZE]
[SIZE=1]<i>Hello World</i>[/SIZE]
[SIZE=1]Creates this effect:
Hello World!
Code:
[/SIZE]
[SIZE=1]<b><i>Hello World!</i></b>[/SIZE]
[SIZE=1]Creates this effect:
Hello World!
That is basically what these tags are used for and what happens when you mix them together!
Now we come on to comments in HTML! To place a comment in a web page you put the following:
Code:
[/SIZE]
[SIZE=1]<html>[/SIZE]
[SIZE=1]<head>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]<title>Blah</title>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]</head>[/SIZE]
[SIZE=1]<body>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]<!-- This is a comment -->[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]</body>[/SIZE]
[SIZE=1]</html>[/SIZE]
[SIZE=1]Now we come on to CSS!
Now CSS stands for Cascading Style Sheet! and this is what defines the properties for your document!
There are two ways of putting CSS into your page! There is the inline style, which is where you place the CSS within the header tags of your web page, and there is external CSS which is where you place all your CSS in a global stylesheet!
In this tutorial I will be using the inline style, as I can't place an external stylesheet onto this thread, but I can show you how it is done!
For an inline style you would do the following:
Code:
[/SIZE]
[SIZE=1]<html>[/SIZE]
[SIZE=1]<head>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]<style>[/SIZE]
[SIZE=1]body[/SIZE]
[SIZE=1]{[/SIZE]
[SIZE=1]background-color: black[/SIZE]
[SIZE=1]}[/SIZE]
[SIZE=1]</style>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]... rest of html code[/SIZE]
[SIZE=1]That bit of CSS shows that the background colour of the web page is black. Now for professional web design, you use hex colours or RGB in the folowing form:
#000000 - This is black in Hex
rgb(0,0,0) - This is black in RGB code
Now if you have a lot of pages, and a lot of CSS then it is normally best to place your style in an external page. Not only is this easier, as it makes the changes to all the pages, it saves a lot of room on the page!
This is how it is done:
Code:
[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]<html>[/SIZE]
[SIZE=1]<head>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]<title>whatever your page title is</title>[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]<link rel="stylesheet" href="where the stylesheet is" type="text/css" />[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]... rest of code[/SIZE]
[SIZE=1][/SIZE]
[SIZE=1]Now when I prefer to code using the External Stylesheet method, and I think that you should as well.
Now for the basics of CSS you have the following:
- background-color: #000000 ---> This leaves the background colour of the page Black
- colour: #FFFFFF ---> This sets the pages font colour to white
- font-family: Tahoma ---> This sets the pages font to Tahoma
- font-size: 10px ---> This sets the font size of the page to 10px
I shall finish this tutorial at a later date, due to the fact I have to go watch a football match right now!
Regards,
Zenax
Last edited:
