Making a simple webpage in 2010

Getting started

Start by making a folder called Html

Open up Notepad. It’s in start all programs accessories

Save your work as index.htm like this

Basic code to tell a browser it has got html coming its way and other basic stuff

Type the following exactly as written into notepad.

<!DOCTYPE html>

These two lines tell the browser its getting html and all text is in englsih.

Next ad these bits in straight after the first two lines

<head>

</head>

These lines are a part of the webpage called the HEAD things in the head don’t appear on the part of the webpage itself

Save your work (CTRL S)

Ok I now want you to open the webpage in internet explorer.

Go into your documents find your HTML folder and in that you should see index.htm. Double click on it it should open in internet explorer.

Don’t get to excited. At this point you will be staring at a blank screen. Can you see that the explorer window is called My Page?

And actually the fact that Internet Explorer can open the file means all that coding wasn’t wasted.

Actually making something appear on the screen

Ok we are now going to add divisions or DIVs to or page you don’t have to use divs. But most modern websites use them they make great looking websites possible.

Add this to your code after the </head> bit.

<body>

<div id="banner"> This is where my banner will go </div>

<div id="menu"> This where is my menu will go </div>

<div id="content"> This where is my content will go </div>

<div id="footer"> This is wheremy footer will go </div>

</div>

</body></html>

Oh and you can use copy and paste to save time here quite a lot

Save your work (ctrl s) and hit the refresh arrow in internet explorer

I saw this

I know. Still not very exciting is it? The next stage will start to make it look better though

Adding a certain style to our web page

We are now going to use a style sheet to make our webpage look better

Make sure you have saved your index.htm page(ctrl s)

Now go file new in notepad and save a new file as style.css in the html folder with your index.htm page. This page is called a stylesheet. It is going to make your page look way better

Type this into your blank style sheet (you must use curly brackets).

body

{
background-color: red;

}

Save your style.css file then go back to internet explorer and hit refresh

I saw this.

Hopefully you can see that the style sheet decides how the page looks

Next change your body statement in your stylesheet to this

body

{
background-color: #ccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 140%;

}

I now saw this.

Hopefully you can see we have now set the background to a grey and we have set the font for the page as well as the font size and spacing.

Next job is to make the page look a little better by doing some layout

Firstly type this in below existing code in your stylesheet.

#container

{
width: 800px;
background-color: #ffffff;
margin: 10px auto;
}

This centres up the page and makes a white background to the main page contents, like this;

Next job is to add a banner image to the top of the page

add this code in below the container code. Sorry it a terrible picture

#banner

{
height:70px;
background-image: url(http://princehouse.co.uk/vark.jpg);
}
Now modify the banner style so you have a space between the bottom of the banner and the top of the menu

{
height:70px;
background-image: url(http://princehouse.co.uk/vark.jpg);
margin-bottom:10px;
}

Set the menu div up and add borders top and bottom

#menu

{
height: 20px;
border-style:solid;
border-top:1px #aaa;
border-bottom:1px #aaa;
border-left: none;
border-right:none;
margin-bottom:10px;
padding-top: 5px;
padding-left: 10px;

}

I saw this

Ok that is the basic page set up done

Remove the unwanted “this is where the banner will go” text

Time to remove the this is where the banner will go text and change the content to something to do with Aardvarks

Open the index.htm file in notepad

Remove the text that say this is where the banner will go so it reads like on the right.

Add some text to the content div

copy and paste this text about Aardvarks in to your page

The Aardvark (Orycteropus afer) (afer: from Africa) is a medium-sized, burrowing, nocturnal mammal native to Africa. It is the only living species of the order Tubulidentata, although other prehistoric species and genera of Tubulidentata are known.

It is sometimes called "antbear", "anteater", "Cape anteater" (after the Cape of Good Hope), "earth hog" or "earth pig". The word "aardvark" is famous for being one of the first entries to appear in many encyclopaedias and even abridged dictionaries. The name comes from the Afrikaans/Dutch for "earth pig" or "ground pig" (aarde earth/ground, varken pig), because early settlers from Europe thought it resembled a domesticated pig. However, the aardvark is not closely related to the pig; rather, it is the sole recent representative of the obscure mammalian order Tubulidentata, in which it is usually considered to form a single variable species of the genus Orycteropus, coextensive with the family Orycteropodidae. The aardvark is not closely related to the South American anteater, despite sharing some characteristics and a superficial resemblance. The closest living relatives of the aardvark are the elephant shrews, along with the sirenians, hyraxes, tenrecs, and elephants. Together, these animals form the superorder Afrotheria.

I saw this when I had put the text in

Next job clean up the content by putting some padding on the edges of the content DIV

Add this to your stylesheet

#content
{
padding: 10px;
}

Add some breaks and paragraphs to the text in the index page

Add in <br> tags for a line break and <p> for a paragraph to make the text easier to read

Style a header class for headings

A class is something that we can apply to an element in the page be that a piece of text a picture or a video

Add this to your style sheet

{
font-family:georgia,garamond,serif;
font-size: 18px;
color: #aaaaaa;
}

Then to apply it to the title of the text put this into your index.htm page

<h1>The Aardvark (Orycteropus afer) (afer: from Africa) </h1> <p>

I saw this

Add a picture to the text

Pictures are awkward they don’t just go where you want them

To put the picture in

Add this text after the start of the content div and before the aardvark text starts

I saw this

So the picture is in but not exactly looking great is it.

Resize the image by adding this to the img src tag

Create a class to “float” the image to the right

Add this to your style sheet

.floatmeright
{
float:right;
}

Apply the class to the image

Add this o the image tag for the picture

I saw this.

So that it that is a basic page laid out.

You have done some html and a some CSS

And you are making cutting edge web pages for the new millenium