Website Tutor

Shared on

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Html tute 6: Frames

July 31st 2006 01:05

Today I'm going to deal with frames. Frames are a controversial part of HTML web design, with many people feeling that they aren't a good design mechanism. However, I'll show you how to use them and then you can judge for yourself.

Frames divide the page into different sections. One major use for this is allowing you to have a menu down the left hand side and clicking on the options changes what is on the right hand side.

The first tag I will introduce is the frameset tag, which takes the following form.

<frameset division="something%, something%>

If you want to divide the page into two columns, each of which takes up 50% of the page you would write:

<frameset cols="50%,50%>

On the other hand if you wanted two rows you would type:

<frameset rows="50%,50%>

Either of these pieces of code will create two frames, but it wont add any content to either.

To add content to a frameset you use the: <frame src> tag. Your first use of this tag will define the contents of the first frame, and the second use will define the contents of the second frame (and so on).

This tag takes the following form:

<frame src="webpage.html">

As always, if the frames contents is in the same directory as webpage then you can just write the webpage name, but if it isn't you have to provide the whole URL.

So, lets create a new website, which we will call frames.html

Add the following code to it:

<html>
<head>
<title>Frames demonstration</title>
</head>
<frameset cols="25%,75%">
<frame src="lesson3.html">
<frame src="lesson4.html">
</frameset>
</html>

Note that the frameset tag is also closed by the </frameset> tag at the end.

Now, the next thing we'll do is make it so that when you click on a link in the left frame it opens it in the right one.

To do this we first need to give our right hand frame a name. So lets call it display. We do this with the following code:

<frame src="lesson4.html" name="display">

Now, we need to open lesson3.html and change the code below:

<a href="lesson1.html">This is the first lesson we learned</a> 
<a href="lesson2.html">This is the second lesson we learned</a> 
<a href="http://www.google.com">This is a link to Google</a>
 
<a href="extra.html">This links to the extra website</a> 
<a href="extra.html#second">This takes us straight to the second part of extra</a>

To each link here we add the following code:

target="targetframe"

So the first link would become:

<a href="lesson1.html" target="display">This is the first lesson we learned</a> 

Do this for all the links.

So lesson3.html would now look like:

<html>
<head>
<title>Lesson 3</title>
<head>
<body>
<a href="lesson1.html" target="display">>This is the first lesson we learned</a> 
<a href="lesson2.html" target="display">>This is the second lesson we learned</a> 
<a href=http://www.google.com target="display">>This is a link to Google</a>
 
<a href="extra.html" target="display">>This links to the extra website</a> 
<a href="extra.html#second" target="display">>This takes us straight to the second part of extra</a>
</body>
</html>

Now, going back to our frames page we will try a few more things. Firstly, the use of the <noframes> tag.

This tag takes the following form.

<noframes>
<body>Message<body>
</noframes>

The purpose of this tag is to provide an alternative page for people whose browsers do not display frames. So, we will add:

<noframes>
<body>This webpage requires frames<body>
</noframes>

To our frames page. So, in its final form our frames page should look as follows:

<html>
<head>
<title>Frames demonstration</title>
</head>
<frameset cols="25%,75%">
<frame src="lesson3.html">
<frame src="lesson4.html" name="display">
<noframes>
<body>This webpage requires frames<body>
</noframes>
</frameset>
</html>

Hope you found this useful.

Adam

121

Shared on

Comments (2)

[ Link ]

Posted By: AdamB - Category: No Category

Email this Post to a Friend

Html tute 5: page backgrounds

July 27th 2006 01:05

Today I'm going to deal with website backgrounds and at this point I am going to make a warning. This basic html faq is aiming to teach you how to put up a very basic website. However, that means it ignores some of the recommended ways to do things for the sake of simplicity. In the intermediate section of these tutes style sheets are used, and they are better then the following background tags.

Unlike previous lessons we wont be creating a new website this week. Instead, I suggest you go back to previous weeks and play with their background colours or add background pictures.

Background Colour

The background tags are defined within the body and take two main forms. The first of these are colour, which is written as follows:

<body bgcolor=colourdesignator>

The colour designated can either be a colour name, in which case it is enclosed in quotation marks (ie, <body bgcolor="red">

, an RGB – or Red, Green, Blue value, which is written as follows:

<body bgcolor="rgb(255,0,0)">

The first number in the bracket recommends the amount of red, the second the amount of green and the third the amount of blue. So blue would be (0,0,255) and white, the combination of all colours, would be (255,255,255).

Finally, these colours can be defined as hexidecimal values, which take the following form:

<body bgcolor="#FF0000">

if you want to know why it takes that form then either look into hexidecimal or drop me a comment and I'll explain it.

Body background

To add an image as the background of a page you use the following code:

<body background="imagesource">

As with the images discussed last week this can either be the URL of a picture of a picture in the local directory, in which case you just write the image name. So:

<body background="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">

or

<body background="picture1.jpg">

And that's it for this week. Next week we discuss frames and their associated problems.

Adam

112

Shared on

[ Link ]

Posted By: AdamB - Category: No Category

Email this Post to a Friend

Basic Html 4: Pictures

July 18th 2006 10:21

This weeks lesson is going to deal with pictures. So create a new page called lesson4.html to your website folder and save a .jpg image of your choice to your website folder and call it image1.jpg.

Now, to include an image on your web page the basic code is

[ Click here to read more ]

Shared on

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Basic Html 3: Hyperlinks

July 13th 2006 05:35

Well today we're going to deal with links: those pieces of writing that take you to another website when you click on them.

These links are called anchors and use the <a>your text here</a> tags. However, as with the tag, you generally add more information to these. So the general link to a website is:
[ Click here to read more ]

Shared on

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Html Tutorial 2: Text Editing

July 6th 2006 01:03

Last lesson we constructed a simple web page and this time we are going to make it look a little neater and more presentable. We will start with a website as coded below. If you saved it last time then open it up again in your text editor. However, click save as and choose "lesson2.html" as a file name and choose save as type: "all files".

[ Click here to read more ]

Shared on

[ Link ]

Posted By: AdamB - Category: Basic Html Tutorial

Email this Post to a Friend

Html tutorial 1: the basics

July 3rd 2006 09:55

This first lesson will aim to teach you how to produce a html website itself and wont worry about producing any particular content for it. If you plan to follow through all of these lessons I advise you create a folder for the lessons (called "HTML lessons" or whatever) and each week store all the files in this folder.

All lessons in the basic HTML section of this website will use notepad (but you can use any text editor).
[ Click here to read more ]

Shared on

Comments (1)