Dan Williamson
17-11-2005, 12:06 AM
Well first off i'm really bored so i thought i'd do another HTML and CSS guide.
This one will probably be longer than my last if you all remember it.
We will go into some depth with HTML and CSS Coding.
We will look at the differences :)
Be prepared for a long read.
HTML - Hypertext Mark-up Language.
HTML is used to create webpages and to start of a webpage tag by doing this following tag.
<HTML>
Then usually after that you start the header section which is where the title shown on top of the Internet Browser.
<Head>
Various codes can be put into this tag.
These include Javascript, PHP, CSS, Titles.
We will know go into the basic Head tags.
<Title>Enter Your Title Here</Title>
This tag is used to create the title on top of the browser.
And notice how the end tag has a / before the word this is how you close a HTML tag.
So know we look at adding background images or background colours.
<Body Bgcolor="HexademicalCodeHere">
So here is how we place a background colour to our webpage, don't forget try to make it look professional.
Hexademical codes are HTML codes for colours, they can be found in a good list on www.HTMLGoodies.com
Heres how to insert an image onto your background.
<Body Background="Theimageyouwouldlife.gif">
Don't forget also you have to have the image uploaded into your hosts directory when your trying to display it onto an online webpage.
There are many different image formats which they can be saved as such as:
BMP, PNG, JPEG, GIF, PSD.
Now we move onto a much more better way to add background images/wallpapers and colour onto our webpage.
This is the CSS way.
<STYLE TYPE="text/css">
BODY {background-color: #HexademicalCodeHere;}
</STYLE>
CSS Is more browser friendly and quicker most webpages use CSS ( Cascading Style Sheets ) for many things now as they have Excellent effects.
Heres the CSS background image code.
<STYLE TYPE="text/css">
BODY {background-image: url(whereinyourdirectorythattheimageis.gif); }
</STYLE>
You can also have much more effects in CSS
These are some of the effects you can add onto your background image code in CSS
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: widthpx heightpx;
The repeat codes means how the background repeats itself if it's a small image the Repeat-x repeats it horizontaly for the Axis.
And the other does it vice versa.
You also have more control with CSS as you can see with the positioning tag.
So know we need a actual header with an image.
Well we could use tables so heres a very basic table code with no effects.
<Table>
<Tr>
<Td>
</Td>
</Tr>
</Table>
Now as you can see all thats happened is i've merely opened and closed the tags placing no other tags/information into them.
You could add your header image straight away by adding an image to the Td tag as this is your table cell.
<Img Src="Yourimage.gif">
This is the image code so you add this in the table cell and you have your header. But you can have table effects to make it looks a hell of a lot better.
<Table Border="1">
<Table Cellspacing="0">
<Table Cellpadding="0">
<Td align="Center/Right/Left">
The border is the outline of the table.
The cellspacing is the amount of space between table cells.
The Cellpadding is the amount of space between the table cell border.
And the align i'm sure everyones familiar with is where to place it most layouts are centered.
Basic Tags
Here are some basic tags you will probably use a lot while we're doing the font section.
<P> - Starts a new paragraph
<B> - Boldens your text
<I> - Italicalizes your text
<BR> - Does a line break
Font and Text
Well obviously font and text will play a massive factor in your website.
As it should be easy to read fit in look smart and good.
As the background codes etc you can use CSS for fonts as well but i'll teach you the HTML way first as HTML is probably easier to understand at first than CSS.
<Font Face="Ariel">Insert the text that you wish to be ariel font</Font>
<Font Color="HexademicalCode">Font which is the colour you set it to</Font>
Now these are old tags not used much but i think you get the drift of what they do. Now for the CSS way *Claps* much more fun :)
font-family
font-style
font-size
text-align
color
This doesn't actually tell you how to use them but it's the main CSS tags in which you want.
I bet your thinking, aww i'm going to have millions of silly little font tags in my source code and your wrong :)
Heres how to use them in your Head code.
<STYLE TYPE-"type/css">
<!--
BODY {background: #Hexcode}
H1 {font-size: 10pt; font-family: arial}
-->
</STYLE>
So here you can set all your fonts for the webpage in one fell swoop i bet your thinking ooh thats clever i know i was when i first found out how to do this.
You can change the information to however you want.
Linking to an External Stylesheet
If your fussy about your source code looking nice and wanting to save loading time you can do this neat trick.
<LINK REL=stylesheet HREF="http://www.thepageyouron/yourcsspage.css" TYPE="text/css">
This links to the page and on yourcsspage.css you put in your CSS code so thats good :)
I bet your bored to hell of reading now but i'm going to keep going on as me Raremandan is bored :p
Links
Well the correct term for links are Hyperlinks. They link one page of your site to another page of your site or to a completely different site.
<A href="index.html">Index</A>
This is a Hyperlink the bit before the tag closes is what it will appear as on your navigational bar.
Now lets move on as i'm getting kind of tired as it is 23:44 so...
What we've learnt so far is how to create tables, backgrounds, fonts, links, images now we don't need to tell you how to create more tables as we've done that. But theres something we haven't done theres more CSS to come.
CSS Content
I bet your not even reading anymore because your totally bored out of your minds reading me babble on lol.
#content {
margin-left: insetpixelspx;
padding: insertpixelspx;
margin-right: insertpixelspx;
}
</style>
</Head>
<Body>
<div id="content">Content and whatever</Div>
So now we're getting onto DIVs and whatnot so we're all little experts now but you've got a long way to go if you wanna be a succsessful webdesigner or just a miniscule cool dude with a good personal website.
Iframes
I'm doing a section on Iframes ( Inline Frames ) because all i see is people getting stuck on them when they're not hard.
<Iframe name="YourIframesName" src="YourPage.html" width=pixel height=pixel marginwidth=insertnumber marginheight=insertnumber frameborder=insertnumber scrolling=auto></IFRAME>
These are very easy and i'm not going to explain them as all people need is the code.
Advanced Link Rollovers In CSS
Just a simple code doesn't really need explaining
<style type="text/css">
A:link { text-decoration: none; color:#YourColor; }
A:visited { text-decoration: none; color:#YourColor; }
A:hover { text-decoration: none; color:#YourColor; }
</style>
Link is the links colour before it's clicked or hovered over.
Visited is after you've clicked it.
Hover is when your curser hovers over it.
See not too much to explain.
You can also set images as links
<A Href="TheURL.php"><Img Src="AnImage">
Thats how you set images as links.
Not much to go now as i'm really tired and bored of typing.
PHP Includes
OK i wasn't planning on putting any PHP into this but people are asking me on MSN how to do PHP includes.
So here it is.
Well first if your going to use PHP includes then you have to rename your index or whichever HTML files your using to .php
<?
include ('yourpage.php');
?>
Not hard people often use these to seem more professional than Iframes.
SSI includes are more a less the same as well but i'm not going into that.
The End
Well as this is all i can really think of off the top of my head, put all these together and you can make good layouts using programs such as AdobePotoshop i suggest using tables to code your layouts at first as you'll need to practice, read www.Slicingguide.com and then getting into DIV's and also you could practice on dreamweaver until your confident enough to hand code in Notepad.
I thank you if you read this all the way through it's supposed to be for newcomers to HTML and CSS and i hope you had fun lol *Snores*
Any comments will be gladly accepted and if you ever want any help with HTML,CSS,PHP i can usually help :)
- Dan
This one will probably be longer than my last if you all remember it.
We will go into some depth with HTML and CSS Coding.
We will look at the differences :)
Be prepared for a long read.
HTML - Hypertext Mark-up Language.
HTML is used to create webpages and to start of a webpage tag by doing this following tag.
<HTML>
Then usually after that you start the header section which is where the title shown on top of the Internet Browser.
<Head>
Various codes can be put into this tag.
These include Javascript, PHP, CSS, Titles.
We will know go into the basic Head tags.
<Title>Enter Your Title Here</Title>
This tag is used to create the title on top of the browser.
And notice how the end tag has a / before the word this is how you close a HTML tag.
So know we look at adding background images or background colours.
<Body Bgcolor="HexademicalCodeHere">
So here is how we place a background colour to our webpage, don't forget try to make it look professional.
Hexademical codes are HTML codes for colours, they can be found in a good list on www.HTMLGoodies.com
Heres how to insert an image onto your background.
<Body Background="Theimageyouwouldlife.gif">
Don't forget also you have to have the image uploaded into your hosts directory when your trying to display it onto an online webpage.
There are many different image formats which they can be saved as such as:
BMP, PNG, JPEG, GIF, PSD.
Now we move onto a much more better way to add background images/wallpapers and colour onto our webpage.
This is the CSS way.
<STYLE TYPE="text/css">
BODY {background-color: #HexademicalCodeHere;}
</STYLE>
CSS Is more browser friendly and quicker most webpages use CSS ( Cascading Style Sheets ) for many things now as they have Excellent effects.
Heres the CSS background image code.
<STYLE TYPE="text/css">
BODY {background-image: url(whereinyourdirectorythattheimageis.gif); }
</STYLE>
You can also have much more effects in CSS
These are some of the effects you can add onto your background image code in CSS
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position: widthpx heightpx;
The repeat codes means how the background repeats itself if it's a small image the Repeat-x repeats it horizontaly for the Axis.
And the other does it vice versa.
You also have more control with CSS as you can see with the positioning tag.
So know we need a actual header with an image.
Well we could use tables so heres a very basic table code with no effects.
<Table>
<Tr>
<Td>
</Td>
</Tr>
</Table>
Now as you can see all thats happened is i've merely opened and closed the tags placing no other tags/information into them.
You could add your header image straight away by adding an image to the Td tag as this is your table cell.
<Img Src="Yourimage.gif">
This is the image code so you add this in the table cell and you have your header. But you can have table effects to make it looks a hell of a lot better.
<Table Border="1">
<Table Cellspacing="0">
<Table Cellpadding="0">
<Td align="Center/Right/Left">
The border is the outline of the table.
The cellspacing is the amount of space between table cells.
The Cellpadding is the amount of space between the table cell border.
And the align i'm sure everyones familiar with is where to place it most layouts are centered.
Basic Tags
Here are some basic tags you will probably use a lot while we're doing the font section.
<P> - Starts a new paragraph
<B> - Boldens your text
<I> - Italicalizes your text
<BR> - Does a line break
Font and Text
Well obviously font and text will play a massive factor in your website.
As it should be easy to read fit in look smart and good.
As the background codes etc you can use CSS for fonts as well but i'll teach you the HTML way first as HTML is probably easier to understand at first than CSS.
<Font Face="Ariel">Insert the text that you wish to be ariel font</Font>
<Font Color="HexademicalCode">Font which is the colour you set it to</Font>
Now these are old tags not used much but i think you get the drift of what they do. Now for the CSS way *Claps* much more fun :)
font-family
font-style
font-size
text-align
color
This doesn't actually tell you how to use them but it's the main CSS tags in which you want.
I bet your thinking, aww i'm going to have millions of silly little font tags in my source code and your wrong :)
Heres how to use them in your Head code.
<STYLE TYPE-"type/css">
<!--
BODY {background: #Hexcode}
H1 {font-size: 10pt; font-family: arial}
-->
</STYLE>
So here you can set all your fonts for the webpage in one fell swoop i bet your thinking ooh thats clever i know i was when i first found out how to do this.
You can change the information to however you want.
Linking to an External Stylesheet
If your fussy about your source code looking nice and wanting to save loading time you can do this neat trick.
<LINK REL=stylesheet HREF="http://www.thepageyouron/yourcsspage.css" TYPE="text/css">
This links to the page and on yourcsspage.css you put in your CSS code so thats good :)
I bet your bored to hell of reading now but i'm going to keep going on as me Raremandan is bored :p
Links
Well the correct term for links are Hyperlinks. They link one page of your site to another page of your site or to a completely different site.
<A href="index.html">Index</A>
This is a Hyperlink the bit before the tag closes is what it will appear as on your navigational bar.
Now lets move on as i'm getting kind of tired as it is 23:44 so...
What we've learnt so far is how to create tables, backgrounds, fonts, links, images now we don't need to tell you how to create more tables as we've done that. But theres something we haven't done theres more CSS to come.
CSS Content
I bet your not even reading anymore because your totally bored out of your minds reading me babble on lol.
#content {
margin-left: insetpixelspx;
padding: insertpixelspx;
margin-right: insertpixelspx;
}
</style>
</Head>
<Body>
<div id="content">Content and whatever</Div>
So now we're getting onto DIVs and whatnot so we're all little experts now but you've got a long way to go if you wanna be a succsessful webdesigner or just a miniscule cool dude with a good personal website.
Iframes
I'm doing a section on Iframes ( Inline Frames ) because all i see is people getting stuck on them when they're not hard.
<Iframe name="YourIframesName" src="YourPage.html" width=pixel height=pixel marginwidth=insertnumber marginheight=insertnumber frameborder=insertnumber scrolling=auto></IFRAME>
These are very easy and i'm not going to explain them as all people need is the code.
Advanced Link Rollovers In CSS
Just a simple code doesn't really need explaining
<style type="text/css">
A:link { text-decoration: none; color:#YourColor; }
A:visited { text-decoration: none; color:#YourColor; }
A:hover { text-decoration: none; color:#YourColor; }
</style>
Link is the links colour before it's clicked or hovered over.
Visited is after you've clicked it.
Hover is when your curser hovers over it.
See not too much to explain.
You can also set images as links
<A Href="TheURL.php"><Img Src="AnImage">
Thats how you set images as links.
Not much to go now as i'm really tired and bored of typing.
PHP Includes
OK i wasn't planning on putting any PHP into this but people are asking me on MSN how to do PHP includes.
So here it is.
Well first if your going to use PHP includes then you have to rename your index or whichever HTML files your using to .php
<?
include ('yourpage.php');
?>
Not hard people often use these to seem more professional than Iframes.
SSI includes are more a less the same as well but i'm not going into that.
The End
Well as this is all i can really think of off the top of my head, put all these together and you can make good layouts using programs such as AdobePotoshop i suggest using tables to code your layouts at first as you'll need to practice, read www.Slicingguide.com and then getting into DIV's and also you could practice on dreamweaver until your confident enough to hand code in Notepad.
I thank you if you read this all the way through it's supposed to be for newcomers to HTML and CSS and i hope you had fun lol *Snores*
Any comments will be gladly accepted and if you ever want any help with HTML,CSS,PHP i can usually help :)
- Dan