Another Long HTML/CSS Guide

~~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 Code:

<HTML>

Then usually after that you start the header section which is where the title shown on top of the Internet Browser.

HTML Code:

<Head>

Various codes can be put into this tag.

These include Javascript, PHP, CSS, Titles.

We will know go into the basic Head tags.

HTML Code:

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

HTML Code:

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

HTML Code:

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

HTML Code:

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

HTML 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

HTML Code:

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.

HTML Code:

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

HTML Code:

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

HTML Code:

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

HTML Code:

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

HTML Code:

<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

HTML Code:

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.

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

HTML Code:

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

HTML Code:

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

HTML Code:

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

HTML Code:

<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

HTML Code:

<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

HTML Code:

<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

PHP Code:




<?

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

Michael. · 17-11-2005, 07:29 AM

Fantastic Dan! If I were still a mod, this'd be going to the Tutorials forum.

+ Rep

~~pechie100~~ · 17-11-2005, 07:36 AM

That has helped

Thankyoui

---MAD--- · 17-11-2005, 08:40 AM

very good, well done and keep the good help up :p

Sygon · 17-11-2005, 10:17 AM

Well done

~~Dan Williamson~~ · 17-11-2005, 10:07 PM

Thanks for the comments dudes

- Dan

Nintendo™ · 17-11-2005, 10:09 PM

I Aint Readin All That!

~~Dan Williamson~~ · 17-11-2005, 10:14 PM

LOL,

Why ever not...

Naw it's good for newbies to HTML and CSS.

- Dan

nets · 17-11-2005, 11:04 PM

I just glanced down it, and it looks pretty good.
Although:

Code:

#content {

  margin-left: insetpixelspx;
  margin-right: insertpixelspx;
}

Could of just been, for example margin left and right 5px, top and bottom 0px:

Code:

margin: 5px 0px 5px 0px;

~~Dan Williamson~~ · 17-11-2005, 11:15 PM

Originally Posted by Nets

I just glanced down it, and it looks pretty good.
Although:

Code:

#content {

  margin-left: insetpixelspx;
  margin-right: insertpixelspx;
}

Could of just been, for example margin left and right 5px, top and bottom 0px:

Code:

margin: 5px 0px 5px 0px;

Yes, as it says it's just a beginning to CSS.

- Dan

Thread: Another Long HTML/CSS Guide

Thread Tools

Another Long HTML/CSS Guide

Posting Permissions