Making a simple webpage in to a simple website

This is lesson two in the simple webpage primer don’t do this one until you have had a go at making the basic page and stylesheet as I am assuming you have got Aardvark world under way

Ok to make a second and third web pages for the site

Make two more files in notepad one called aardvark.htm and one called anteater.htm save them into the html folder.

When you have done that open up the index.htm file from lesson one

How to put links in the menu div

Delete the this is where my menu will go text and type this in its place

<a href =”aardvark.htm”>aardvark page</a>

Have a look at your page in Internet explorer it should have a link when you click it a blank page should show. Hardly surprising there is nothing on the Aardvark.htm page yet

Add the following code after the last line

<a href =”anteater.htm”>anteater page </a>

My view in notepad looked like this

And my page looked like this screenshot below.

The links are in but they look ugly

Tidying up the position of the links in the menu div

Make a link spacer class

First job is to make a link spacer class in your style sheet. Type this in.

.linkspacer
{
padding: 60px:
}

Next apply the class to the links

Modify each of the lines of code in your index.htm to add the class in so

<a href =”aardvark.htm”>aardvark page</a>

Changes to

<span class=”linkspacer”><a href =”aardvark.htm”> aardvark page</a> </span>

Also change the anteater and home links to add the class using the <span> tag in the same way.

I had this when I finished.

Style the links for colour font and different states

The links are, underlined and in the same font as the rest of the site at the moment I want them better colours a different size and a different font.

To style a basic link you add the following to your style statement.

a:link

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

But there are actually three more states a link can be in;

1. Visited –you have clicked on the page before

2. Hover – you have your cursor over it ready to press

3. Active – you are moving through a page using the tab or cursor keys and have selected a particular link.

So next I added the following to my page to style the other three states as well.

a:visited

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

a:hover

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

a:active

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

When I finished my links looked like this which I quite liked

Adding some text to the footer and styling it

Last piece of content before we make the other pages

In your Index.htm file change the this is where my footer will go text to read

For more information contact 01424 889 or email aardy@vark.co.uk

I then put the following into my style sheet to style the footer a little

#footer
{
font-family:georgia,garamond,serif;
margin-top:10px;
color: #aaaaaa;
font-weight:bold;
}

That is it the first page is done the links are ready now we put code into the other pages.

Making a second page

Open up the aardvark.htm page you made earlier in Notepad. You should see a blank text file there is no code in it.

Copy all the code from index .htm and paste it in to Aardvark.htm (ctrl A), (Ctrl C),(Ctrl V)

Ok we now have an exact copy of the first page all we need to do is change the bits of code for anything we want to be different.

Change the title

Making sure you are working in the aardvark.htm file

Find the <title> tag change the title name from

my page to more about Aardvarks.

Delete the existing content in the content div between the <div id=”content”> and the </div>

tags.

My aardvark page looked like this. Note as here is no content in the content div it does not display.

Adding more relevant aardvark content to the aardvark page

Put this text into the content div

Aardvarks live throughout Africa, south of the Sahara. Their name comes from South Africa's Afrikaans language and means "earth pig." A glimpse of the aardvark's body and long snout brings the pig to mind. On closer inspection, the aardvark appears to include other animal features as well. It boasts rabbit like ears and a kangaroo tail yet the aardvark is related to none of these animals.

Aardvarks are nocturnal. They spend the hot African afternoon holed up in cool underground burrows dug with their powerful feet and claws that resemble small spades. After sunset, aardvarks put those claws to good use in acquiring their favorite food—termites.

While foraging in grasslands and forests aardvarks, also called "antbears," may travel several miles a night in search of large, earthen termite mounds. A hungry aardvark digs through the hard shell of a promising mound with its front claws and uses its long, sticky, wormlike tongue to feast on the insects within. It can close its nostrils to keep dust and insects from invading its snout, and its thick skin protects it from bites. It uses a similar technique to raid underground ant nests.

Female aardvarks typically give birth to one newborn each year. The young remain with their mother for about six months before moving out and digging their own burrows, which can be extensive dwellings with many different openings

Adding a nested div in the content div

I want you to put this content in a fact box on the right

Fast Facts

Type: Mammal

Diet: Omnivore

Average life span; 23 years

Size: Head and body, 43 to 53 in (109 to 135 cm); Tail, 21 to 26 in (53 to 66 cm)

Weight: 110 to 180 lbs (50 to 82 kg)

I started by adding this to my style sheet it makes a feature display box that floats to the right of the text you just added.

#featured
{
margin-left:10px;
background-color:#eeeeee;
border-style:solid;
border: 1px #000000;
float:right;
padding:5px;
line-height:180%;
width:250px;
}

To add the fact text you now have to do something a bit weird.

Add the fact text before the main aardvark text and then call up the div.

Put <div id=”featured> before the word fast and finish the div with </div> at the end of the fact text.

Cleaning up the fact text

I added <br> tags after each line to get each fact on a new line

I used <h1> and </h1> tags wrapping round the words fast facts to set that as a heading.

Finally I put the fact headings into bold using <b> and </b>

At this point I had this.

Next I changed the b declaration in my style sheet to change how text in bold looked as I wasn’t happy with it.

So I added this in my stylesheet

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

I ended up with this

The finished page

Making an anteater page

So you should now be able to make an anteater page so can you?

1. Make a page with this text content

Giant anteaters range throughout most of tropical America from northern Argentina to Guatemala and Honduras. Anteaters live in tropical savannas and forests of these regions.

The anteater has an elongated snout. The sticky substance of its tongue traps insects. It eats up to 30,000 ants, termites and other insects each day.

The claws of the anteater's front feet are hooked backward and serve the animal for ripping into ant and termite nests.

Anteaters seldom spend more than a couple of minutes feeding at any one nest. Only a few thousand insects are removed at one feeding and then the nest is abandoned to repairs. The anteaters circulate around their territories, feeding lightly here and there, never destroying any one nest and, therefore, never eliminating any of their food base. Termites and ants recover losses very rapidly.

Anteaters have a good sense of smell, but poor eyesight.

The anteater is toothless. The order name Edentata means "no teeth."

The anteater's body is from 4 to 6 feet long, with course hair and a long, wide tail. They weigh from 40 to 85 pounds.

The giant anteater walks clumsily on the soles of its back feet and on the in-turned claws of its front feet. The claws are curved inward to keep them from being dulled.

Adults are normally solitary.

The mother anteater carries her single offspring on her back for a considerable length of time, even though the baby anteater is capable of a slow gallop four weeks after birth

2. Use this code to embed a youtube video of an anteater and float it right (hint use your floatmeright class)

3. Name the page anteaters

Congratulations you have a mini site about aardvarks and anteaters now go and conquer the html world