HTML stands for HyperText Markup Language, and is one of the standard languages of the internet. HTML cannot perform the many tasks that real programming languages perform, it is, as the name suggests, simply a markup language. That is, that it can take text and images and arrange them and format them into the way that you want them to look. It is becomming more and more powerful as it is developed further and further, though.
All HTML commands appear between angle brackets, < and >:
like so, where *HTML* is whatever command you are using at that point. A web browser will begin reading an HTML document at the beginning, and work through it, like we would reading a page of a book. When it encounters a tag, it will apply the effects of that tag to everything that comes after it, until it encounters a tag that ends the command. For example, if you are centering text, then you will turn on the center tag:
It must also be noted that although HTML was developed in Cern, it was decided that American spellings of some words should be used to standardise it, this menas that the spelling of some of the tags is in American spelling, such as <center>, shown above, and <color>, when declaring colours.This Tutorial
In this tutorial, I am going to work through the basic ideas of HTML, and teach some of the most widely used, and useful tags. Every example that we come across will more than likely work differently on different browsers, so it's worth while trying out the examples, and seeing what happens, as the results you get may differ from mine.
Finally, when building a website, it is best to do it on your machine, rather than directly onto the web. The way to do this for most browsers is to type:file:/
into the location bar at the top of your browser window, followed by the full directory and file name of the file that you wish to look at. Then simply edit the file with some sort of text editing application, and read it with your web browser. Then, when you've updated your file, you'll simply need to press "reload", and the browser will reload the file. If you've made some changes in the file, but "reload" doesn't cause the page to look any different, then you will need to empty your disk cache, before continuing, or find out how to tell your browser to load directly from the source, as opposed to from it's cache.
The first tag that you need to know for HTML is:<html> and </html>
These two tags tell a web broswer that everything it reads after the HTML tag is to be read as an HTML document, and not as a plain text document. So when you write any HTML file, you must always begin it with <html> and end it with </html>. Everything else on the page goes in between.
All HTML documents follow a certain form. They all have a header and a body. In this section of the tutorial, we will look at how these both work, and the parameters that you can define for each one.
This part of the page is defined first, and is enclosed by the following tags:<head> and </head>
Using the tags:<title> and </title>
You can define what the browser displays in the title bar at the top of the window. For example, if you were to put:<head>
Then in the case of Netscape, the title bar would something like the following:Netscape: HTML Tutorial
This is a good way to let search engines know what your page is called.
There are other things that can go into the header tags, but for the purposes of this tutorial, I shall leave them out, as they are not so fundamental.
Again, the body of a document in not an essential item, but if it is not defined, the the page will revert to default settings, which are not that pretty to look at.
The beginning and end of the body of the document is given respectively by:<body> and </body>
and all other page contents go inbetween.
The body tag is the first tag that we have encountered so far, that can have parameters set, to define how it is going to act, and that's what I'd like to look at next. Here, we can learn how to define a background colour or a background pattern, as well as text and link colours.
So, our body tag would look something like this:<body background="back.png" bgcolor="white" text="black" link="red" vlink="blue" alink="green">
Note, that you can define a background image, and a background colour. The reason for this is so that people who are browsing without downloading images will still get a coloured background, as opposed to the default. Also note that if you do not define any one of the above parameters, then they will simply take their default values. Text becomes black, and the links become various shades of blue. Sometimes that is what you want, so in those cases, it is easy just not to define them in the body tag.
There is one more thing that you will need to know for opperating the body tag succesfully, and this will also have relevance in other parts of this tutorial, and that is the use of colours. Above, I've defined the colours by using words. This is OK, as long as you don't want to do anything fancy.Defining Colours
If you want to use any colour that the computer can produce, then you need to be able to define any one of the 16.7 million available with ease. To do this, we have to use a hexidecimal code to represent the quantities of red, green, and blue in the colour. For each primary colour, we assign a two digit hexidecimal number. A hexidecimal number can be any of the following: 0123456789abcdef, so a two digit hexidecimal number can represent as much as 255 in decimal terms.
We lay out the colour declaration as follows:
RR GG BB # ** ** **
where the *'s represent a digit from 0 - f.
Here are some examples of hexidecimal colours:Red: #ff0000
In total, there are 16.7 million combinations of the above 6 digit code, for you to use on your website. So, the body tag that we built earlier could also be written:<body background="back.gif" bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#0000ff" alink="#00ff00">
Now that you've seen how to create a document in HTML, it's time to do one for yourself. Here's what you have to do:
Create a document that has the title "My First Document". Make the background white (don't worry about an image background, you can try them out at your own leasure), leave the text as the default colour, and make the links red. When the link is clicked on, we don't want it to change colour as it is activated, but once the link has been visited, make it a darker shade of red than before it was visited. Try and do this using hexadecimal code for the colours.
For the moment, you won't be able to see if the text has worked out as you want it, as there's no text there yet for you to look at, but as this tutorial proceeds, you will soon find out if you've made a mistake.
Once you've built your document, you are ready to start putting things onto your page. Undoubtedly, you are going to want to have some text. HTML will, by default, print any text in one continuous line, wrapping at the edge of the browser window to a new line, no matter how many spaces or hard returns you put in the text document from which the browser is reading. It is here that you need the text operators to deal with formatting the text as you want it.
Here are some of the most important text formatting tags that you will use:<b>text</b> - Make the text BOLD
Note that these tags can all be used in conjunction with eachother, so for example, if you were to have:<pre><u><b><i>Text</i></b></u></pre>
Then the word "Text" would appear as a bold, italic, underlined, fixed width font.
Note the use of strict nesting of tags inside one another
Now that you can format the style of text, you will need to deal with the spacing of the text. Here are the tags that you will need for that:<br> - Line Break. This has no closing tag. For each BR tag, the browser inserts a line break, and then continues reading the rest of the HTML document.
Note that this tag is Netscape specific, and will have no effect on any other browser
Finally, we can adjust the size, type, and colour of particular bits of text in the document using the following tag:<font size="*" face="selection1|selection2|selection3" color="colour">
Here, * stands for a number, between 1 and 7. You can also insert a + or - in front of the number, if you want to make the font size relative to the base font of the page.
The face section allows you to define 3 different selections of the type face that you wish to use. If the browser does not have selection 1, then it will look for selection 2, and then selection 3. If none of the font faces are found, then it will revert to the default system font, which can vary from machine to machine, and the user's preferences.
The color section allows you to define the colour of the text between the on and off font tags. It works exactly the same way as we talked about in the last section, with a choice between predefined colours, and hexidecimal declarations of colour. Don't forget to put the "#" before the hex-code though, if you use it.
If you don't define any of these values, then each section will remain as it has already been defined. That is, at default size, and font face, and the same colour as defined in the body tag. As soon as the font tag is ended, then all text after that will revert to this as well.
Finally, as you build larger and larger, and more complex files, you may find it hard to see exactly which section of the page you are looking at, when looking at the source. To help you round this, you can comment as often and as much as you like, and hide all those comments from the browser, so that it does not interpret them:<!-- Place your comment here -->
Everything between <!-- and --> will be hidden, no matter how far apart then beginning and ending tags are. Get used to commenting often, as it will help other people understand what you've written.
You've now seen some of the easier things that you can do with the text formatting abilities of HTML. Now it's your chance to implement them. Using the HTML file that you started in the previous exercise, do the following:
Make a header for the page at a reasonable size, and centre it. Have it say: "Welcome to my Homepage" or something similar. Now have some text that isn't centred, and make it a paragraph. In that paragraph, write something, and have some of the text in bold, some of it in italics, and some of it underlined. End the paragraph, and have a few line breaks before putting "End of Page" in the centre, at the bottom. Comment each secion of the page appropriately.
Now you'll be able to see your text at the default colour of your browser. From now on, you'll be updating that same document at each exercise, so don't delete it.
You aren't just going to want a website entirely made of text. It would be uninteresting to look at, and wouldn't carry as much weight as a website that backed up its information with pictures. You do have to be careful, though, as the image has got to download, so for people with slow web connections, or servers that are running slowly, large images can take a long time, and become irritating, so it's best to keep your image sizes (and your page sizes for that matter) as small as possible.
To place an image on your page, you need to invoke the image tag:<img>
This is another tag that not only does not have an "off" command, but can take parameters within the brackets. In fact, this tag by itself will achieve absolutely nothing, as it has no reference to the image that you want to display. Here are the parameters that you can set inside this tag:
So here, as an example, is a possible image tag:<img src="image.jpg" alt="My Image" width="100" height="100" border=0>
Also, be aware that the internet is not very tolerant of images. Good client software will be able to cope with any image, but if you want to be on the safe side, GIF format or JPG format are the most common at the moment, but GIF format is being phased out shortly.
Now you'll want to have a picture on your website, it's time to have a go at putting one there:
Place an image in between your heading and you paragraph of text. Center it, and define it's height and width. You don't actually have to have an image to use here. If you define the height and width, a template for the image will appear, and nothig will appear in that image's space. So just define an image name that doesn't actually exist, and tell the computer that it's 100 pixels wide by 100 pixels tall. Have the alternative text say: "Your Homepage Builder", and leave the border width to default. Leave as much space around it as you see fit, and don't forget to comment. Also, try and keep the amount of HTML that you use to a minimum, to optimise the loading speed of the page.
From now on, I'll not remind you to comment your pages, but you should get into the habit of doing it.
These are probably the thing that HTML is most well renowned for. Anchor tags allow you to define links, that, when clicked on, take you to another page on the web. Here I shall be teaching you the different types of anchor tags, and how they are used. I'll start with a basic hyperlink:
Using the following code, you can define a link to another website:<a href="http://www.newpage.com/">Link Text</a>
Here, <a> is the anchor tag, and </a> is the end anchor tag. Make sure that you always remember to end an anchor, or everything else on your page after the link is defined will become part of that link.
The anchor tag cannot be used without defining the parameter, which is "href", meaning "hypertext reference". After that you simply place the location of the file or website that you want to link to, type the text that you want to act as the link, and then insert the ending tag.
That's about as hard as anchor tags get.Mail Links
Here is another useful form of the anchor tag:<a href="mailto:email@example.com">Mail Me!</a>
Here, instead of putting a URL, we can put an email address, as long as we put the "mailto:" protocol in front of the address. This will attempt to open a new email window in whatever the user's default mail tool is.Targeting
Later on we will learn to use frames, and then the use of anchor tags can become a little more complex, but in order to make it easier, I'm going to teach you what you need to know about opening links in different sections of the webpage now. All you need to do is use the "target" function. This function can be used outside of a frames page, to open a new browser window in which to view a link. Let me demonstrate:<a href="http://www.url.com/" target="display">Link</a>
Here, "display" tells the browser to open a new window, and display the link in there.Indexing your Page
Finally, there's the issue of indexed pages. If you have created a page that is quite long, or has a lot of sections, then you may want to have links at the top of the page to take the reader down to the relevant section, or at the bottom, to take them back to the top. There are two things that you need to know to achieve this. The first is that for a link to work, it must have a location to go to, else it will return an unfound error when you click on it. This means that if you are linking to further down the page that you're already on, then simply putting in the URL of that page is insufficient, because it will always take you to the top of the page. What you have to do, then, is label the section of the page that you wish to link with an anchor tag, thus:<a name=section>
And in this case, you do not need to use the </a> tag.
What this has done is told the web browser that from that point on in the HTML is part of the section "section", and that if that section is linked to, then to put the next bit of HTML at the top of the page, and then carry on as normal.
To link to this, the second thing that you need to know is that links that occur within a page are written thus:page.html#section
Where the "#" tells the browser that once it's loaded the page "page.html", it's to look for the section "section". So you would write the following:<a href="page.html#section">Go to Section</a>
Note, also, that anchor tags are not just for text, they can be applied to images also. As I said briefly in the previous section, you can turn off the border around images if you've used them as a link. You cannot, though, turn off the underlining of a link in text (except with the use of style-sheets, which we shalln't go into here), it will always appear as you have defined it in the body tag.
OK, now it's time to get some links onto your website:
Turn your image into a link to another page of yours (the page doesn't have to exist, you'll just get an "unfound" error if you click on it - don't worry about it), and don't adjust the borders on the image. Then, underneath your paragraph of text, create a header that's smaller than the main header, and says "Links" - don't centre it. Underneath that, create a link to:http://members.tripod.com/~Drahcir/
And have the link text say: "Drakir's Homepage".
Underneath that, have a link that opens a mailer window, with your email address already in the "To:" field. Have the text say something like: "Email Me: Your email address".
Now, at the top of your page, create an indexed point, and call it whatever you like. Then, at the very bottom of your page, leave a few line breaks, and put "Back to Top of Page". Make this a link that returns the browser to the index point that you've just created. This will only look like it does something if the top of the page is not at the top of the screen when you click it. You may need to readjust the window size to test it.
It is now that you find out if you've got your link colours right from the first exercise. If you havn't, try and change them. If you don't like them, then feel free to go ahead and change them to something you do like. Likewise with the text.
Tables are very useful functions in HTML. They allow for the convenient presentation of images and text in an organised fassion without too much hassle. Here, I'm going to teach you everything that you will need to know for now about tables, which will make this lesson the longest so far, as they are extremely versatile.
When you begin and end a table, you will always need to use:<table> and </table>
The TABLE tag is a tag that has a lot of optional parameters, which we shall look at now:
A possible table tag, therefore, could look something like this:<table width="50%" height="500" border=1 cellpadding=5 cellspacing=5 align=left valign=top background="table_back.gif" bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#00ff00" alink="0000ff">
Remember, of course, that all of these parameters are optional, and if you leave any out, then they will return to a default value, whilst the colours of text and links and so on will remain as defined in the body tag.
Now that you can define your table environment, it is time to learn how to put things into your table. The two tag pairs that you need to know are:<tr> and </tr> - Table Row
The way that these tags, and indeed a table, works, is that you define a table row, and then you divide that row up into cells, thus:
<table> <tr> <td> Contents of cell 1 </td> <td> Contents of cell 2 </td> </tr> </table>
And of course, you can define as many rows and cells as you want to.
Each one of these tags has many parameters that can be set. Here are the parameters for <tr>:
All parameters specified in this section will only be in effect throughout that particular table row. As soon as you end the row, then the values will all revert to what they were before.
So a possible table row tag might look like this:<tr width=50% height="200" align=right valign=middle>
You won't find that you use many parameters in the TR section, but rather, that you'll put most of them in the TD section. Here are the optional functions for that:
This means that you may find a TD tag that looks something like this:<td width=50% height="200" align=center valign=bottom rowspan=2 colspan=2 nowrap>
The final tag that you need to know for creating tables, and actually a tag that you may not use much is:<th> and </th>
This stands for Table Header, and acts in exactly the same way as table division (so see above for the parameters that can be used), except that the default for the alignment is "center" rather than "left", and the text is automatically bold, so does not need to have a bold tag inside it.
To end this section, we need now only understand the way in which tables must be laid out.
Whenever building a table, you must perform it in the following order, before you can enter any contents:
<table> <tr> <td> or <th>
This is the point at which you can enter your first text. Then you can declare as many table divisions as you want (remembering that they've all got to fit on the page, side by side), before moving onto your next table row. You must make sure, though, that you do things in the right order. A good way to keep track of where you are in a table is to indent each section as you go, so that you can see whereabouts in the table you are:
<table> <tr> <td> Contents </td> <td> Contents </td> </tr> <tr> <td> Contents </td> <td> Contents </td> </tr> </table>
So you can probably see that if I were to enter the right parameters, then the above code would produce a 2 x 2 table grid.
Tables can be interpreted strangely by browsers, so it's always a good idea to play around with them until you get it right. Be aware that different browsers will have the table looking different to other browsers. It may also be necessary to specify the default values just to make sure that the table appears correctly.
To make your page a little more interesting to look at, we're going to use a table. Have a go at the following:
Create a table, that starts at the very top of the page, excluding the anchor tag there, and spans across the whole width of the page. We want to make it so that there are three cells in the first table row. So create a table with no borders, but with cellpadding of about 8 pixels. Leave the alignment to default.
Now in the first table row, create a cell that is 10% the width of the page, and set it's background to a colour of your choice. I recommend a light colour, that's easy on the eyes. Now define another cell, into which all the information on your page should go, apart from the "End of Page" text, and the "Back to Top of Page" link. Leave this cell with default background colour. Then create a third cell which you should make identicle to the first cell.
Now you want to create a new table row, and in that table row, create a singe cell that spans across the whole table, and in this cell, you should put the bits of your page that didn't go into the cell above. Now set the colour in this cell to be something else, that hopefully complements the other colours.
Now feel free to adjust the sizes of the table cells until you think that they're right for your page. You may also find, that the first and last cells in the first row don't come out the colour you want them to. In this case, it is necessary to put something between the TD start and end tags. I recommend:
Which is a non-breaking space, and shouldn't cause any problems with the table.
This section is more of a reference to the less common, and more advanced text operators provided by HTML. Explanations will be forthcoming if necessary.
Now that you've seen alignment parameters in the case of tables, here are a few other places that the alignment option can be used:
Finally, here are some other text operators which you may want to use at some point:
There are lots of other tags that you may come across, and as you discover them, then you can add them to your list of potential commands. For now, though, these are quite enough to put your text into almost any format that you desire.
Now it's time to spruce up the text on your page a little.
The first thing that you shoud do, is align your paragraph of text to the centre of the page. Next, you want to place some text next to your image, so uncentre the image, and wrap some text around it, starting from the top of the image, leaving at least 5 pixels all the way round it. In that text, you should have some text that's struck out, some fixed width font, some subscript and some superscript. Now in the bottom cell of your table, use whatever method you like to align the "End of Page" text to the right, leaving the rest of the text where it is.
This is all fairly simple, and shouldn't cause any problems. Although you may find that the wrap around text on the image can upset the order of the rest of your page. The way to deal with this is to build a single cell table around both the text and the image, and that way, everything else on the page is separated from it. Have a go and see what happens.
There are several different forms of list. There are ordered lists, unordered lists, glossary lists, menu lists, and directory lists. Here we will only look at the first three, as the others are not widely used, or vastly different.
Also known as numbered lists, they are, by defualt, numbered by most browsers.
The tags that start and end ao Ordered List are:<ol> and </ol>
Each entry in the list must be started and ended with an <li> and </li> tag, meaning "List Item".
When declaring the OL tag, there are several optional properties available:
So an ordered list might be coded like this:
<ol compact start=5 type=i> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ol>
Which would look something like this:
These begin and end with:<ul> and </ul>
This looks a bit like the Ordered Lists, except the List Items are not numbered, and they are not gauranteed to be in the same order as they are entered in the source. The parameters that can be called are:
Again, you will need to use the <li> and </li> tags, so you might write something like this:
<ul compact type=square> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Which will look something like this:
Which you should recognise from the format of parts of these pages.
With regard to the <li> tag, you can define the type of bullet or number that you want in there, depending on whether you're using an Ordered List or an Unordered List. Simply apply the relevant "type" specification for the type of list that you're using:Eg:
<li type="A">Item</li> for Ordered lists <li type=disc>Item</li> for Unordered Lists
These are sometimes also known as Definition Lists, because they consist of two tags for the List Items (the <li> tag is not used here), one as a term, and one as a definition.
They begin and end with:<dl> and </dl>
With the only preference being "compact".
The other two tags are:<dt> - Term
Neither of these tags have a closing tag. The way that it is structured is as follows:
<dl compact> <dt>Term 1 <dd>Definition <dt>Term 2 <dd>Definition </dl>
Which might look like this:
Lists are a good way to present information such as links, so that's what we're going to do here.
Beneath your "Links" header, create an Unordered List, and make each link that you have there into a List Item, with a single blank line in between each entry (hint: it's not that hard, just think line breaks). Add some more links. They don't have to go anywhere, just put them there to pad out the list. Now, create a sub-list underneath one of your List Items, and make it an Ordered List, starting couting at 1, in Roman Numerals, and have a few entrys, it doesn't really matter what.
Once you've got this idea of lists, then they're all easy, because they're all the same in their basic format.
A Client-Side imagemap on your page is a useful way to implement a neat looking point and click environment. An imagemap, basically, is a picture on your page which has links to other places from different parts of the image. Building an imagemap can take some time, although the theory is not at all complex. The problem is that you are going to have to work out coordinates, in pixels, for each section of the picture that you want to use.
Let us start at the beginning, and explain how to declare an image as an image map:
First, we do not declare the image as a link using an anchor tag, instead, we put a parameter inside the IMG tag that tells it to look for an image map to apply. This parameter is the "usemap" function:<img src="image.jpg" alt="clickable image-map" usemap="mapfile.html#map1">
What "usemap" does is act as a pointer for the browser to obtain the map information. You can either have an entire HTML file dedicated to your page's image maps, which is what's done above, with the file mapfile.html being refered to, or you can place the map in the same HTML file as the one that the actual image is called from. Either way is just as good. No matter which method you use, though, you will have to make sure that you point the browser at the right part of the document. As you can see above, the map file name is suffixed by "#map1". If you remember from the section on anchor tags, this is the way to direct a browser part way down a page. This is how we direct the browser to the right image-map information. We select a name for the image map, in this case "map1", and call it that. But you should get into the habbit of calling these things meaningful names, so that you can follow what you're doing more easily.
For the browser to find the information, we need to make sure that we've labeled the it. This is done as follows:
When declaring the information for an image map, we store it between the tags:<map> and </map>
Inside the MAP tag, we must define the parameter:name="name"
Where in the case of our example we would have to put:
<map name="map1"> ...Map Information... </map>
To provide the browser with the map information is the most involoved part of this function. You will need to define the area that the link should cover, and the location to which it should take you. The tag inside which all this will go is:
<area> - It has no closing tag.
And the parameters that you have to put in are as follows:
It is also helpful to remember that if you've got two areas that overlap, then the one that was defined first is the one that will take precedence. This is especially important with regard to the default shape, which should be defined last.
So a typical image map data section might look something like this:
<map name="map1"> <area shape=rect coords="100,80,200,100" href="location1.html"> <area shape=cirlce coords="300,50,50" href="location2.html"> <area shape=poly coords="100,0,300,0,300,100" href="location3.html"> </map>
The hardest part about producing an image map is probably working out which pixels you're trying to refer to for each link.
We already have a small image on our page, so what you need to do, is define it as an imagemap, and then we can go on and define all the areas. Keep the map definition in this same HTML document. It's probably a good idea to keep it out of the way of the rest of the page, so either put it right at the top, or right at the bottom.
What we want to define is a circle that has it's centre in the centre of the image, and has a radius of about 40 pixels. Then we want to make the rest of the image a link to somewhere else. It doesn't matter what locations they are that you link to, at the moment. At this point, you may want to set the image borders to 0, and add to the alternative text that this is now an Imagemap.
The other window function that is useful is the status bar:Window.Status
At the bottom of most browsers, there is a status bar. This is the bar that tells you where the browser is going, and how quickly things are loading, etc... If you wish to change what appears in this bar, then you can use this function, as follows:window.status=Status Bar Entry Here";
Again, either enter this at the beginning, in the <head> section, or put it inside the HTML tag. We'll come onto how to call those functions now, with the "On" events:
There are several different types of what we're calling "On" events here. These are events which depend on where your mouse pointer is at any point. Here are the ones that you might find useful at this stage:
So this is what this script would look like inside a link (note that also, these events can only be used inside <a> tags or <area> tags):<a href="location.html" OnClick="window.alert('Going to location.html');"> Link Text</a>
Place a Window.Alert in the <head> of the document, so that when the page loads, you get a window come up saying "This Page is Currently Under Construction". Inside the <area> tags of the imagemap, make it so that when you put your mousepointer over the relevant section, the status bar tells you where that link takes you. Then, in one or more of your links at the bottom of the page, create a function that opens an alert window when you click on it, telling you where you're going. And finally, over your "Email Me!" link, make it so that if you put your mousepointer over it, and then move it away, it brings up a window saying "Oh go on ... Please Email Me!".
Frames are a useful way of presenting information to the reader. They allow for you to maintain a static HTML front end, whilst other parts of the page change, and for the user to adjust the arangement of the screen to their satisfaction. You must be aware, though, that many browsers do not support frames, so we must make allowances for those users.
The way that a frame works, is that it replaces the <body> section of an ordinary HTML document, so you do not have to define your body preferences here. Instead, the frames document that you create will draw its source from other HTML files, and place them inside the windows that you create in the browser window, and those are the files in which you must define the body attributes.
So, instead of a <body> and </body> document, you have a:<frameset> and </frameset>
Just like the BODY tag, there are preferences that you can set inside these tags:
So a frameset could look something like this:<frameset rows="100,*,100" border=0 frameborder=yes bordercolor="#000000">
You will notice one thing about this, and that is that although there is a declaration for the rows, there is no declaration for the columns. This is because you cannot define rows and columns in the same frameset tag. You will need to include a separate frameset tag to work inside one of the frames defined in the first frameset tag. This is called nesting, and we will look at this in more depth in a minute.
Once you have declared your frameset, you must define the properties of the individual frames. This is done using the following tag:<frame>
The properties of this tag are as follows:
So a potential frame set up might look something like this:<frameset cols="20%,80%" border=0 frameborder=2>
There are several things that you should understand about this. First, the way that a browser allocates frames means that the frame that has been named "left", as it is declared first, will indeed end up being put in the left hand frame, thus the second frame, named "right" will end up in the right hand frame. This is because it allocates the frames just like you would read a book. left to right and top to bottom. So, for example, if we were to exchange the "cols" parameter for a "rows" parameter, then the frame labelled "left" would end up in the top frame, and the frame labelled "right" would end up in the bottom frame.
This leads us on to a very important structuring technique, that you will need to build frames that consist of both rows and columns of frames.
To define a frameset with both horizontal and vertically partitioned frames, you must put one frameset inside another, just like you put the FRAME tag inside a frameset. The only thing that you must remember is that once you've declared the first frameset, the browser will put all subsequent frames and framesets into the window that it's ready to work on next. That is, if you are defining a page with a vertical frame on the left hand side as an index, for example, and then want to split the larger frame on the right into a top frame and a bottom frame, you would have to allocate the FRAME information in the left hand frame before allocating the FRAMESET in the right hand frame. Then you could proceed to allocate the FRAME information for the second frameset in the same way. You can have as many sub-framesets as you want, but remember that you've only got a little bit of space to play with in a browser window.
So here's one way that you could perform the above suggested layout for a frames page:<frameset cols="100,*" border=1 frameborder=1>
[Note that you must have the right number of </frameset> tags, and remember that the last one opened is the first one closed, and so forth, as I have commented in the code]
Now that you can create almost any frames page (there are other, more powerful applications of frames, which involve Dynamic HTML [dHTML], but we shan't discuss that here), the last thing that you need to know is how to link between them. We've already seen the option that you need to use. Inside the <a> tag, or the <area> tag, we can use the parameter "target". You already know that if you set:target=display
Then a new browser window is opened. All we do is put the target parameter in as follows:target="Frame Name"
So a link from the side frame in the above example, that changes what appears in the main frame, would appear in the HTML document that fills the side frame (here, it's left_index.html) would look like this:<a href="main_frame2.html" target="main">Link</a>
If you don't put in a target for the link, then the HTML document that you call will be opened in the same frame as the link that you clicked on, just like it would if you click it in a non-frames window.
This is all fine, until you want to go to a page that you don't want to appear inside the frames document. In these cases, you must set the target as "_top":<a href="http://www.otherpage.com/" target="_top">Link</a>
And that is how you use frames. Often, for most websites, you will only need to build the one frames document into which to place all the information on the page. Remember that the frames document must be the document that the browser looks at when viewing the page, so it's best to name it as your index page.
The last thing you need to know is that once you have finished defining your frames and framesets, you ought to put in:<noframes> and </noframes>
To allow people who cannot see frames to have something in their browser window. For browsers that do not support frames, the HTML between these tags will be what is interpreted, instead of the framesets. So in between you may want to put in a link to a version of the page that doesn't have frames, or you might want to put in a link to somewhere where the user can download a frames capable browser, if they have a platform on which it will run.
For example:... FrameSet ...
For this exercise also, if you don't have a frames capable browser, then you may want to skip it, as you won't be able to see what's happening.
OK, this is where it is going to get a little more complicated. What you're going to need to do is start a new file, and call it something different to the other one. Then you'll need to copy and paste all the <head> information in from the file that we've been creating all along.
Now you'll need to make sure that all of your links to external pages are targeted to take up the whole browser window, instead of getting loaded into your frames page. You needn't worry about the ones from the imagemap, as they're part of your page.
As always, we shall start this section with a look at how to declare a forms existance, simply by using the tags:<form> and </form>
There are a few preferences that you can set inside the FORM tag. This is the part where it can get confusing:
So a form declaration might look something like this:<form name="form1" action="script.cgi" method="post" enctype="multipart/form-data" target="main">
Most of the time, if you're setting up a form front-end, you will find it easy enough to find out from your server what parameters to set inside the tag.
Now that you can set up the existance of a form, you will want to put things in it. To do this, what you have to do is employ the <input> tag. This particular tag is very versatile indeed, so listing and explaining the attributes is going to be fairly lengthly. Here we go:
So you might see a form code that looks something like this:
<form name="form2" action="form.cgi" method=post> <input type=text name="text1" value="Type Here" size=50 maxlength=100> <input type=image src="image.gif" align=middle height=100 width=100 name="image1"> <input type=submit name="submit" value="Send Me!"> </form>
Which would produce a form looking something like this, depending on how you formatted the layout, which I have not shown above:
Note that INPUT tags are stand-alone tags, and need no closing.
INPUT tags are not the only way to supply information to forms, though. If you want to have something that will look really good, then you can use a menu, which are interpreted as pull-downs by many browsers, although not all of them. The tags that control this are:<select> and </select>
And to define the menu items, you put everything between the tags after an <option> tag. This tag has only one parameter that can be set, and this is:<option selected>Menu Item
Which defines that menu item as being the default value.
There are more attributes that go inside the SELECT tag, though, and here they are:
So you could add this to the above code, between the form tags:<select name="menu" size=3 multiple>
Which might look something like this:
Finally, the last way to have an input field in your form is to use the following:<textarea> and </textarea>
This is a strange function, because unlike the input tags, the text that appears as the default is typed between the beginning and end textarea tags. You'll see how it works in a moment, let us just look at the parameters that can be set.
So, you could add a textarea window now to our above form thus:<textarea name="text_input" rows=4 cols=50 wrap="virtual">Hello</textarea>
The last thing that you need to know, with regard to forms is that once you define a FORM tag, then not everything between the begin and end tags has to be relevant to forms. You can define a form, and then build a table, in which to put your entry fields, and this will cause no problems. Only INPUT, SELECT, and TEXTAREA will be interpreted as form items, and everything else will act just like it did outside the form.
Right, what we're going to do here is create a form that will (if you're browser supports frames) go on the left hand side of our frames page. If your browser doesn't support frames, then just ignore all references that I make to them, and just build the forms page.
First of all, create another new HTML file. Give it a header and define a background colour, and text etc... however you want them. I encourage the use of lighter colours for backgrounds, because generally they're less hard on the eyes to look at.
Give the page a heading, saying something like "My Guestbook". Now define a form, and have some text inputs for the visitors name and email address and homepage address. Then have a menu that allows the visitor to select how he came to be at your page. Then maybe a textarea of moderate size in which they can put their comments. Finally, have two buttons, one to Submit the form, and the other to Reset it. Format the layout of the page as you see fit.
Once this is done, add a link to it from your main page, saying something like "Sign My Guestbook", and have that link targetted into the left hand frame on your frames page. To make this work, unfortunately, you'll also have to create a totally empty HTML document (apart from an <html> and a </html> tag pair), and define it as the intial source of the "left" side of the frames page.
Well, now you know pretty much all you'll need to know about HTML, for the time being, at least. But knowing the language doesn't mean that you're good at writing websites. You'll need to practice, and experiment. You'll find that HTML can do strange things, and things you never expected it to do. You might also find that some things don't work with other things, and you have to make compromises. It's also a challenge setting up a page with the exact format that you want, rather than a ball park sort of arrangement.
I recommend getting yourself a website that you can play around with. Don't try and build sites that don't really have any point, though. Unless you've got something that you really think you'd like to put into a web page, then don't do it, because anything that's done for the hell of it is generally uninteresting to read or look at.
As you're learning to write HTML, you will build some terrible websites, and there's no getting away from it. One good way of making yourself, and your website, better, is to build it with what you know, and then learn something new, and "revamp" what you did before, with some new features.
There are a couple of things that you should bear in mind, also, when building websites, largely to do with the graphics. Remember that not everyone uses the same web browser, so what you see on your screen may differ from what other people are seeing on their screens. Also, people's screen resolution differs, so something that may be just the right size on your screen may be far too big, or too small, on someone else's. And finally, be careful about using animations and large images, because they take a long time to load, and some people may just loose interest, and go somewhere else, if your page is taking too long.
So, I hope that you've found this useful, and good luck with your site ...
Below I have listed out all of the tags at which we have looked, and their individual attributes. This won't tell you how to use them, but it should be helpful as a quick reference to functions that you already know.
To define special characters in HTML, it is necessary to use their code. Below is a list of all the special characters, and the codes that you must use to display them. You won't find most of them any use, but this is just intended as a reference guide, and you never know what you're going to need ...
Description Code Entity name =================================== ============ ============== quotation mark " --> " " --> " ampersand & --> & & --> & less-than sign < --> < < --> < greater-than sign > --> > > --> > Description Char Code Entity name =================================== ==== ============ ============== non-breaking space   --> --> inverted exclamation ¡ ¡ --> ¡ ¡ --> ¡ cent sign ¢ ¢ --> ¢ ¢ --> ¢ pound sterling £ £ --> £ £ --> £ general currency sign ¤ ¤ --> ¤ ¤ --> ¤ yen sign ¥ ¥ --> ¥ ¥ --> ¥ broken vertical bar ¦ ¦ --> ¦ ¦ --> ¦ &brkbar; --> &brkbar; section sign § § --> § § --> § umlaut (dieresis) ¨ ¨ --> ¨ ¨ --> ¨ ¨ --> ¨ copyright © © --> © © --> © feminine ordinal ª ª --> ª ª --> ª left angle quote, guillemotleft « « --> « « --> « not sign ¬ ¬ --> ¬ ¬ --> ¬ soft hyphen ­ --> ­ --> registered trademark ® ® --> ® ® --> ® macron accent ¯ ¯ --> ¯ ¯ --> ¯ &hibar; --> &hibar; degree sign ° ° --> ° ° --> ° plus or minus ± ± --> ± ± --> ± superscript two ² ² --> ² ² --> ² superscript three ³ ³ --> ³ ³ --> ³ acute accent ´ ´ --> ´ ´ --> ´ micro sign µ µ --> µ µ --> µ paragraph sign ¶ ¶ --> ¶ ¶ --> ¶ middle dot · · --> · · --> · cedilla ¸ ¸ --> ¸ ¸ --> ¸ superscript one ¹ ¹ --> ¹ ¹ --> ¹ masculine ordinal º º --> º º --> º right angle quote, guillemotright » » --> » » --> » fraction one-fourth ¼ ¼ --> ¼ ¼ --> ¼ fraction one-half ½ ½ --> ½ ½ --> ½ fraction three-fourths ¾ ¾ --> ¾ ¾ --> ¾ inverted question mark ¿ ¿ --> ¿ ¿ --> ¿ capital A, grave accent À À --> À À --> À capital A, acute accent Á Á --> Á Á --> Á capital A, circumflex accent Â Â --> Â Â --> Â capital A, tilde Ã Ã --> Ã Ã --> Ã capital A, dieresis or umlaut mark Ä Ä --> Ä Ä --> Ä capital A, ring Å Å --> Å Å --> Å capital AE diphthong (ligature) Æ Æ --> Æ Æ --> Æ capital C, cedilla Ç Ç --> Ç Ç --> Ç capital E, grave accent È È --> È È --> È capital E, acute accent É É --> É É --> É capital E, circumflex accent Ê Ê --> Ê Ê --> Ê capital E, dieresis or umlaut mark Ë Ë --> Ë Ë --> Ë capital I, grave accent Ì Ì --> Ì Ì --> Ì capital I, acute accent Í Í --> Í Í --> Í capital I, circumflex accent Î Î --> Î Î --> Î capital I, dieresis or umlaut mark Ï Ï --> Ï Ï --> Ï capital Eth, Icelandic Ð Ð --> Ð Ð --> Ð Đ --> Đ capital N, tilde Ñ Ñ --> Ñ Ñ --> Ñ capital O, grave accent Ò Ò --> Ò Ò --> Ò capital O, acute accent Ó Ó --> Ó Ó --> Ó capital O, circumflex accent Ô Ô --> Ô Ô --> Ô capital O, tilde Õ Õ --> Õ Õ --> Õ capital O, dieresis or umlaut mark Ö Ö --> Ö Ö --> Ö multiply sign × × --> × × --> × capital O, slash Ø Ø --> Ø Ø --> Ø capital U, grave accent Ù Ù --> Ù Ù --> Ù capital U, acute accent Ú Ú --> Ú Ú --> Ú capital U, circumflex accent Û Û --> Û Û --> Û capital U, dieresis or umlaut mark Ü Ü --> Ü Ü --> Ü capital Y, acute accent Ý Ý --> Ý Ý --> Ý capital THORN, Icelandic Þ Þ --> Þ Þ --> Þ small sharp s, German (sz ligature) ß ß --> ß ß --> ß small a, grave accent à à --> à à --> à small a, acute accent á á --> á á --> á small a, circumflex accent â â --> â â --> â small a, tilde ã ã --> ã ã --> ã small a, dieresis or umlaut mark ä ä --> ä ä --> ä small a, ring å å --> å å --> å small ae diphthong (ligature) æ æ --> æ æ --> æ small c, cedilla ç ç --> ç ç --> ç small e, grave accent è è --> è è --> è small e, acute accent é é --> é é --> é small e, circumflex accent ê ê --> ê ê --> ê small e, dieresis or umlaut mark ë ë --> ë ë --> ë small i, grave accent ì ì --> ì ì --> ì small i, acute accent í í --> í í --> í small i, circumflex accent î î --> î î --> î small i, dieresis or umlaut mark ï ï --> ï ï --> ï small eth, Icelandic ð ð --> ð ð --> ð small n, tilde ñ ñ --> ñ ñ --> ñ small o, grave accent ò ò --> ò ò --> ò small o, acute accent ó ó --> ó ó --> ó small o, circumflex accent ô ô --> ô ô --> ô small o, tilde õ õ --> õ õ --> õ small o, dieresis or umlaut mark ö ö --> ö ö --> ö division sign ÷ ÷ --> ÷ ÷ --> ÷ small o, slash ø ø --> ø ø --> ø small u, grave accent ù ù --> ù ù --> ù small u, acute accent ú ú --> ú ú --> ú small u, circumflex accent û û --> û û --> û small u, dieresis or umlaut mark ü ü --> ü ü --> ü small y, acute accent ý ý --> ý ý --> ý small thorn, Icelandic þ þ --> þ þ --> þ small y, dieresis or umlaut mark ÿ ÿ --> ÿ ÿ --> ÿ
Base Font - This is the basic font of the page, and depends on the web browser's user's preferences. It is risky to assume that the font will be any particular size.
CGI (Common Gateway Interface) - Environment in which programs or scripts run on a Server to perform operations, including generating web-pages on-the-fly when asked to by a client browser. An example of this might be a search engine that takes your search string, and runs a cgi program which generates a page consisting of the results of the search.
CPU - Central Processing Unit. This is the chip inside your computer that makes most of the calculations that are required to operate software.
Client/Server - A way of doing things, such that one machine (the Client) asks the other (the Server to do something such as provide it with information. On the Web, the client is the computer in front of the person doing the browsing, whilst the server is generally a bigger and more powerful machine on which this information is stored.
Client-Side - When one computer contacts another, the one who makes the call becomes known as the "Client" machine. So when you dial in to a website, that website is stored on a large computer called a "server", and your computer becomes the "Client". If the page contains some operation (in this case an imagemap), that is downloaded onto your machine before it is executed, then that operation is running "Client-Side", as opposed to "Server-Side".
Downloading - Copying information from a server to a client. This is what your browser does when it reads a website. It transfers the information from the place where the website is stored, to your machine. The opposite of this is called Uploading.
Hexadecimal - This is a system of counting that uses a base of 16, instead of 10, like decimals. So, as decimals go 0123456789, hexidecimals go 0123456789abcdef. Counting works exactly the same, but using more digits. So the last 2 digit number in decimals is 99, while the last 2 digit number in hexidecimals is ff.
High-Level Programming-Language - A programming language which attempts to be closer to some human language (generally English), and is thus easier to understand. BASIC is a good example of a high-level programming language. The resemblance between what the programmer writes, and what the computer actually does is not close, and another piece of software is required to make the machine understand the program.
Internet - Collective name for all the millions of computers and the connections between them which constitute the largest network on the planet. Your computer is connected to the internet if it can talk to any other computer on the internet using one of the standard protocols.
Interpreted Language - A programming language which requires another program (an interpreter) to run at the same time on the same machine, to perform its functions.
Mutually Exclusive - If several events are mutually exclusive, then at most one can be "on" at any one time. If there are 20 buttons, and they are mutually exclusive, with regard to being "on", then if one of them is "on", then the others must be "off".
Nesting - This is where one command is put inside another. For example, if we were making some text that was bold and italic, then we should put <b><i>Text</i></b>. See that both the italic tags are between the two bold tags. This could just as legitimately be written: <i><b>Text</b></i>. As you can see, as long as the nesting is correct, then the order of the tags is not so important.
Pixel - Abbreviation of "Picture Element", a pixel is the single smallest unit on the screen of a computer, ie, a single dot.
Protocol - A defined way of communicating, in this case between two computers. Essentially, it is a list of the possible things each can say, and what this means, and this allows information to be passed.
Source - This is the raw text of the HTML document. What you see in the browser window is an interpretation of that source. If you want to see the source of a page, most web browsers will have a "View Source" option somewhere - often in the "View", the "Document", or the "Page" menu, if there is one.
Syntax - This just means the way that something is layed out. If it has a specific way that it has to be written, then that is the syntax.
Thumbnail - This is a smaller version of an image that you have on your website. It is used mainly for having large indexes of pictures to look at, with the thumbnail giving you an idea what they're like. The way I've described making thumbnails is one way of doing it, but it requires quite a lot of CPU time, thus not making the page load any faster, which is often the point of thumbnails. The best way to do it, if you can, is to actually shrink the image yourself using some graphics software, and then the save it as something else, and use that instead.
URL - Universal Resource Locator. This is what you type in to find the website that you want to look at.
Web Browser - Software on the user's machine that can download and interpret information from the Web, and present it on the screen. More common examples would be Netscape, or MS Internet-Explorer.
Web, the - This is a term meaning the information that is stored on, and accessable via the internet, using a web browser. This doesn't include Usenet, or Email.