A HTML + CSS Basic Tutorial

**Zenax** · 08-05-2006, 07:32 AM

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

Code:

<html>
<head>
 
</head>
<body>

</body>
<html>

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!

--> Anything that is placed in between these tags will become bold!
--> Anything that is placed in between these tags becomes italic!
--> 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!

Now you can mix these tags together so you get multiple effects, such as bold and italic! Here is a few examples:

Code:

<b>Hello World!</b>

Creates this effect:
Hello World!

Code:

<i>Hello World</i>

Creates this effect:
Hello World!

Code:

<b><i>Hello World!</i></b>

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:

<html>
<head>
 
<title>Blah</title>
 
</head>
<body>
 
<!-- This is a comment -->
 
</body>
</html>

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:

<html>
<head>
 
<style>
body
{
background-color: black
}
</style>
 
... rest of html code

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:

 
<html>
<head>
 
<title>whatever your page title is</title>
 
<link rel="stylesheet" href="where the stylesheet is" type="text/css" />
 
... rest of code

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

**dillbertdabomb** · 08-07-2006, 01:32 PM

Now for php and mysql!

**omnirom** · 08-16-2006, 03:01 PM

Nice tutorial!

How about a link to some html color codes
--> http://gotomy.com/color.html (this and photoshop are what I use)

**Zenax** · 08-16-2006, 03:22 PM

Finishing from where I left off!

Before we move onto the divs I must insist on showing you how to place a comment inside your stlyesheet!

Code:

 
... code here
 
<style>
 
 
/* This is a comment in a stylesheet! */
 
</style>
 
... code here

Ok so now we come to divs!

Divs are now more commonly used in web design instead of tables. Apparrently as a proffessional web designer you are supposed to use Divs to create your website, and only use tables for tabular data!

So here is what you do to create a Div!

Code:

<html>
<head>
 
<title>Div Example</title> <!-- Gives the page the title "Div Example -->
 
 <!-- Again i reccomend external stylesheet but for this purpose the inline style is being used -->
 
<style>
.div1
{
background-color: #000000;
color: #FFFFFF;
}
 
/*This Style is going to give Div1 a background colour of black and a font colour of white */
</style>
 
</head>
 
<body>
 
<div class="div1">
Content in here
</div>
 
</body>
</html>

So that is a div with a background color of black and a font colour of white. Now there are many more properties that you could add to this and I am going to show you some right now!

Code:

 
... code here
 
<style>
 
.div1
{
background-color: #000000;
color: #FFFFFF;
width: 200px;
margin-left: 50px;
margin-top: 300px;
}
 
</style>
 
</head>
 
<body>
 
<div class="div1">
Content here
</div>
 
.... code here

That is the same div as I coded earlier, however I added some extra properties to it! I made the width of the div 200 px (Ideal for navigation areas!) and I made it start 50px from the left and 300px from the top!

Now for those of you that don't know this already px stands for pixels. I always code my layouts using pixels, and so do many others, however there are others out there, which you can find on a different website! (Just Place w3schools.com into google and you will find it!)

So below are explained some of the other attributes that you can add to a div!

margin - Now the value you set on this will apply to all sides top, bottom, left and right! You can change it so it only applies to the one side e.g. margin-left applies it to the left hand side only
width - This sets the width of the div itself so a decent size for a navigational area I believe is 200px!
height - This sets the height of it, but this doesn't always need to be added as the div will expand to the height of its content!
position - This will determine the position of the Div! I believe you can get, absolute, static, and a few others

Now that is the end of the tutorial! I have covered the basics of HTML and the basics of CSS and I have shown you how to combine the two together!

Again I reccomment you use external stylesheets on all your websites, which makes it a hell of alot easier when your coding and making small tweaks to the layout etc!

This tutorial will soon available on my website as a whole!

Regards,
Zenax

A Link to colour code chart : Click Here

**sambosch** · 08-29-2006, 07:05 AM

Nice tutorial

**shadowmist82** · 10-31-2007, 04:00 PM

thats a really good tutorial

**ryoko126** · 11-05-2007, 12:17 PM

And yet... It doesn't help a person if they can't pick good colors. I have a site like that but it's bare bones with whites and greys. Any good combination colors for a dark theme?

**Banner** · 02-24-2008, 04:49 PM

I will have to study this for days but i have a simple questioin. Where do i actually put these codes?

**frankfriend** · 03-31-2008, 02:14 PM

Hi Zenax,

This is a really useful, simple, and clear tutorial. I think that in about four pages you have made clear what another guy in 150 pages [I've just read] made really murky!

**nikolaydyankov** · 06-11-2011, 07:58 AM

Hey, I've got a video tutorial teaching the basics of CSS, have a look and comment if you like it! Cheers!

http://blog.nikolaydyankov.com/06/vi...-3-css-basics/

Thread: A HTML + CSS Basic Tutorial

LinkBack

Thread Tools

Search Thread

Display

A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Re: A HTML + CSS Basic Tutorial

Similar Threads

a real Html tutorial

[IPB] Contiguous Board Index

What is XML!

Basic sig tutorial

Posting Permissions