HTML Tutorial (or how to make web pages)


First off, I want to let you know that this is a very old tutorial. Still, the principles explained here continue to be valid for the creation of web pages. However, this document only talks about HTML, and does not cover other highly important aspects of webmastering such as JavaScript, Stylesheets, or server side languages. With what is explained here you should still be able to create some very basic web pages, though. Many forums and other online sites also allow HTML, so this knowledge can help make your messages look cooler as well. :)


-Introduction
-How to assign text and background colors
-How to make links
-How to load images and embed multimedia
-How to use fonts and align objects
-How to create tables
-How to use frames
-Ten questions and answers



Introduction

Welcome to the HTML Tutorial Page. This page will basically teach you how to program HTML, or if you know it, it may perhaps show you some tricks you might not know. HTML stands for Hypertext Markup Language, and is used mainly to program web pages (like this very one).

Is special software needed to program HTML web pages?

Well, a number of different softwares are out there in the market that lets you program HTML. Some are more complete than others. Even so, they might not eventually be enough to program a sophisticated web page. So I will answer the main question, no, no special software is needed to program HTML, just Notepad! (Mac users should be able to use Simple Text). However, there are a few details to know before you can use any of these. First off, open up Notepad and type in the following:

TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTYour web page titleTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

Hello World!

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


Now, choose save the file as hello.html Please notice that you can't miss putting that .html at the end of the name because that is what defines an HTML file. Once saved, open your browser and take a look at your page. The output should be something like this:

Hello World!

If you have closed Notepad but want to do further editing of your page, open Notepad again, choose File | Open and on File Types choose "All files". Now look for the one you want and double click it and it should be ready for further editing. (Mac users might drag the file on Simple Text's icon or try to get it from Simple Text's Open command.)

OK, let me now explain how this file goes. The TAGINLINELTHTMLTAGINLINEGT must be always be in a web page, this is what allow thebrowsers to know it is HTML indeed. Anyways, always use TAGINLINELTHTML> Next is TAGINLINELTHEAD>, which defines the head of the file, such as titles and the such. Then TAGINLINELTHEAD> closes, and comes TAGINLINELTBODY> , which must also be on all web pages you do. Hello World! is normal text, it is between TAGINLINELTBODY> and TAGINLINELT/BODY> and it is not inside a TAGINLINELT> so it will show to the screen. Now, you might have noticed that most, if not all tags in here (for example, TAGINLINELTHTML> is a tag) are paired with another that starts with a "/". The one with the "/" closes the specific tag and it is no longer in effect after that.


Text and background colors

Well, lets get a bit more sophisticated, lets now define the text and background color as well as the links colors. This is the same HTML that you just copied, so only add the new stuff. The new stuff are in bold.

TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTYour web page titleTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" ALINK="#000080" VLINK="#800080"TAGINLINEGT

Hello World!TAGINLINELTBRTAGINLINEGT
Hello World once again!TAGINLINELTBRTAGINLINEGT
And Hello World even again!TAGINLINELTBRTAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


OK. These are attributes of the TAGINLINELTBODY> tag. TEXT will define default text color in page, BGCOLOR will define default background color in page, LINK will define of which color links will be, ALINK will define which color to turn to temporarily when you click on a link (to give the effect of a flash), and VLINK defines which color links you have already visited will be. All of these attributes are optional, but highly recommended to ensure that most browsers will render the page the same or in a similar way. It is possible that when you view this new HTML you just did perhaps you won't notice any changes, or maybe will. Anyways, it is always good to set the TAGINLINELTBODYTAGINLINEGT attributes to something to ensure that most browsers will render the page in quite the same way. Also, you will notice that all of these attributes are set equal to an hexadecimal number. That number defines the color. These colors are defined as follows: "#RRGGBB" So the first two letters are for the red color, the middle two for the green color and the last two for the blue color. 0 in hexadecimal is 0, 128 in hexadecimal is 80, and 255 in hexadecimal is FF. Lets look at some colors here:

#000000 #FFFFFF #800000 #008000 #000080 #FF0000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF


Well, there I displayed you a list of just a few color combinations you can do in HTML. Everything that needs to set a color in HTML will equal to such an hexadecimal number. Some browsers understand color names, such as red, green, blue, etc, although I don't personally recommend using these yet since they aren't supported by a large number of browsers, and may cause many visitors to look at your site very poorly. Well, anyways, it is up to you.

The TAGINLINELTBRTAGINLINEGT tag has the task to take the cursor to the next line. It equals to a carriage return.



How to make links

Now we will talk about links. What is a link? Most web users already know it, directly or indirectly, but to make sure there are no holes left, I will say what a link is. A link is a word or series of words you can click on that will generally take you to another page. Hmmm... Seems familiar now? Well, lets do an example:

With Notepad (or wathever), create a file called pagea.html and add the following code to it:

TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTPage ATAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" ALINK="#000080" VLINK="#800080"TAGINLINEGT

Welcome to page A! This web page demonstrates how to add links. They are real easy!TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTA HREF="pageb.html"TAGINLINEGTLink to Page BTAGINLINELT/ATAGINLINEGT
TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


Now make the file pageb.html with this code:

TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTPage BTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" ALINK="#000080" VLINK="#800080"TAGINLINEGT

Welcome to page B! This web page demonstrates how to add links. They are real easy!TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTA HREF="pagea.html"TAGINLINEGTLink to Page ATAGINLINELT/ATAGINLINEGT
TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


Well, first off, we just did two web pages. Why? To make both of them to link to the other. A clever programmer will find out how all of this works perfectly with no problems. What defines a link is the TAGINLINELTATAGINLINEGT tag. The TAGINLINELTATAGINLINEGT tag has an attribute here, HREF. HREF equals the filename you intend to load. This is case sensitive. Then you see the respective link text, which were "Link to Page A" and "Link to Page B", respectively. Then comes TAGINLINELT/ATAGINLINEGT, indicating that this link is not affecting any further text or graphics. There is more related to links but this is basically it.

Lets now have a quick talk about another type of links also commonly found throught the web. This type of link I will talk about, rather than jumping to a different page, it jumps to a different place on the very same page the link is on. This is used a lot on pages that have large contents to find specific topics very quickly without having to scroll through the whole thing. This very same page uses this type of links. Well, lets see some example code!

Hello, user!TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
Click TAGINLINELTA HREF="#END"TAGINLINEGThereTAGINLINELT/ATAGINLINEGT to see the end of this HTML page.TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTA NAME="END"TAGINLINEGTTAGINLINELT/ATAGINLINEGTHere you are :-)TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT

OK, the previous example puts a link on screen that will take the user to the end of the HTML page. Please notice that the HREF attribute in the first TAGINLINELTATAGINLINEGT tag points to "#END", and that in the second TAGINLINELTATAGINLINEGT tag NAME is set to "END". That is what makes the user travel from the link to the bottom of the page, as the second TAGINLINELTATAGINLINEGT tag is in the bottom of the page. The # in the HREF attribute in the first TAGINLINELTATAGINLINEGT tag is what tells the browser that "END" is not a file, but a link that leads to another place inside the same page. This is also known as an anchor.



How to load images and embed multimedia

Well, I think you should be going OK with links as of what I said here already. Now lets see something fun. How to load images and embed videos and sounds!!! Lets start with the images which are easy to load in HTML (is not that embedding videos and sounds is hard, but well, I have to start somewhere, right? :-) ) OK, once again, lets get our hands into HTML, here it goes:

TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTLoading ImagesTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

Normally, images on The Internet are in either .GIF or .JPG (JPEG) formats. The one I am going to load next iscalled animage.gif TAGINLINELTBRTAGINLINEGTTAGINLINELTBRTAGINLINEGT

TAGINLINELTIMG SRC="animage.gif"TAGINLINEGT

TAGINLINELTIMG SRC="animage.gif" ALT="This is an example image." WIDTH="26" HEIGHT="28"TAGINLINEGT TAGINLINELTBRTAGINLINEGT TAGINLINELTBRTAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT

Well, that loaded two images, both were the same image. See the line where it says TAGINLINELTIMG SRC="animage.gif"TAGINLINEGT? Well, basically, thats all you need to load an image. The IMG attribute is what makes the browser understand that it is about to load an image. The SRC attribute is the filename of the image. Again, this is case sensitive! After that, you see another line, TAGINLINELTIMG SRC="animage.gif" ALT="This is an example image." WIDTH="26" HEIGHT="28"TAGINLINEGT , well, this one also loads the image as before, but as you can see it has some more attributes, ALT points to some text to be displayed in case the image can't load or while it is loading. Also, if the visitor puts the mouse on it, that text will pop-up over the image. The WIDTH and HEIGHT attributes, obviously, defines the image's width and height, respectively. I specified a width of 26 pixels and a heigth of 28 pixels (which is the image's current size). You may also enter different values which will cause the image to be resized. By the way, the image I used isn't a great thing ( This is an example image. ), but I think it works for the purpose of teaching :-)

OK, now, lets go with embedding, and lets jump off rigth into HTML:

TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTEmbeddingTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

TAGINLINELTEMBED SRC="tone.wav" WIDTH="144" HEIGHT="60" HIDDEN="false" AUTOSTART="false" LOOP="false"TAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT

OK, thats all to embedding something. Here I embedded sound "tone.wav" In reality, to embed something, you only need to put TAGINLINELTEMBED SRC="filename"TAGINLINEGT However, since I like to get people confused, I used a more complete syntax ;-) Well, the EMBED attribute tells the browser that it is about to embed something (such as a sound or video file). The SRC works in the same way it does with images; it specifies the file to embed. WIDTH and HEIGHT, on some browsers, alter the display of the controls, HIDDEN tells browser if controls are hidden or not. "false" means it is not hidden, to hide it, specify "true". AUTOSTART tells if sound or video will play as soon as page is loaded or if rather to wait until the user plays the sound or video from the controls. LOOP tells the browser to (or not to) loop the sound. Specify "true" if you want sound or video played repeatedly.


I don't know if I said this before, but now it is a good time to say it. Many things, such as embedded objects, will look different on different browsers, or will have a different interface. Even text can differ from browser to browser. Some features are not even supported at all by many browsers!!! So, for example, I, test most of the pages I do with both my Netscape and Internet Explorer browsers to make sure the page will look reasonably good on both, or that at least there might not be a bad bug in the pages. As of embedding, it can embed sound files such as .wav and video files such as .avi I don't know everything it can embed, so it is worth testing, and probably different browsers will be able to embed different things as well.



How to use fonts and align objects

Now we are going to talk how to use fonts and how to align objects in a web page. The first thing we are going to see is how to use fonts. They are easy to understand, and as ussual, lets get right into the HTML code for it:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTUsing fontsTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

TAGINLINELTFONT SIZE="5"TAGINLINEGT
This is font size 5. Valid sizes for fonts are numbers from 1 to 7.
TAGINLINELT/FONTTAGINLINEGT TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT

TAGINLINELTFONT SIZE="4" COLOR="#FF0000"TAGINLINEGT
These letters are supposed to be red and somewhat smaller than those above.
TAGINLINELT/FONTTAGINLINEGT TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT

TAGINLINELTFONT SIZE="4" COLOR="#000000" FACE="Verdana"TAGINLINEGT
These letters should have font Verdana. If your computer does not have the font, then the browser should switch to another font automatically. TAGINLINELT/FONTTAGINLINEGT TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT

TAGINLINELTFONT SIZE="4" COLOR="#000000" FACE="Verdana, Arial, Geneva"TAGINLINEGT
This is the same as the above, but notice I specified more than one font face. Well, I explain this easily: if the computer does not find font Verdana, it will try Arial, if it does not find Arial, then it tries Geneva, and if Geneva isn't found, then the computer decides which font to use (but by God, if you don't have one of these three fonts, then I don't know what computer or operating system you have :-) )
TAGINLINELT/FONTTAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT

Well, what interests us in this example is the TAGINLINELTFONTTAGINLINEGT part. FONT tells the browser it is about to change the font, its size, and/or color. The attributes are obvious, SIZE tells which size make the letters, valid values are numbers from 1 to 7 (on normal HTML, font sizes are not like 12pt or 24pt, but numbers from 1 to 7, 1 being smallest and 7 being biggest). Color specifies font color in hexadecimal numbers, which I explained earlier in this page. FACE specifies what type of font to use (like Verdana, Geneva, Arial, Helvetica, System, etc). Finally comes the TAGINLINELT/FONTTAGINLINEGT statement that ends the current font and goes back to default.

Now lets talk about how to align objects in your web page. HTML offers at least two ways to do this. You can use tags like TAGINLINELTDIV ALIGN="CENTER"TAGINLINEGT and close with TAGINLINELT/DIVTAGINLINEGT, and everything in between these should be aligned to the center of the web page. Another way to align objects to the center is to TAGINLINELTCENTERTAGINLINEGT and TAGINLINELT/CENTERTAGINLINEGT, respectively. Values of RIGHT and LEFT are also supported by both tags. Lets have a small example:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTAligning objectsTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000080" ALINK="#0000FF" VLINK="#800080"TAGINLINEGT

TAGINLINELTDIV ALIGN="LEFT"TAGINLINEGT This text should be aligned to the left.TAGINLINELT/DIVTAGINLINEGT
TAGINLINELTDIV ALIGN="CENTER"TAGINLINEGT This text should be aligned to the center.TAGINLINELT/DIVTAGINLINEGT
TAGINLINELTDIV ALIGN="RIGHT"TAGINLINEGT This text should be aligned to the right.TAGINLINELT/DIVTAGINLINEGT

TAGINLINELTLEFTTAGINLINEGT This text should be aligned to the left.TAGINLINELT/LEFTTAGINLINEGT
TAGINLINELTCENTERTAGINLINEGT This text should be aligned to the center.TAGINLINELT/CENTERTAGINLINEGT
TAGINLINELTRIGHTTAGINLINEGT This text should be aligned to the right.TAGINLINELT/RIGHTTAGINLINEGT

TAGINLINELTLEFTTAGINLINEGTTAGINLINELTDIV ALIGN="LEFT"TAGINLINEGT You can combine tags like this for greater compatibility as some of them are not supported by some browsers.TAGINLINELT/DIVTAGINLINEGTTAGINLINELT/LEFTTAGINLINEGT
TAGINLINELTCENTERTAGINLINEGTTAGINLINELTDIV ALIGN="CENTER"TAGINLINEGT You can combine tags like this for greater compatibility as some of them are not supported by some browsers.TAGINLINELT/DIVTAGINLINEGTTAGINLINELT/CENTERTAGINLINEGT
TAGINLINELTRIGHTTAGINLINEGTTAGINLINELTDIV ALIGN="RIGHT"TAGINLINEGT You can combine tags like this for greater compatibility as some of them are not supported by some browsers.TAGINLINELT/DIVTAGINLINEGTTAGINLINELT/RIGHTTAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT

Well, I think it is clear enough so I don't really think it needs an explanation :-) So, this way, you can easily align an object and make it always look good where it is without too much trouble.


How to make tables

Tables are used for more sophisticated formatting, and often can look good. For example, so far, all source code I have given you before, has appeared inside a rectangle; well, that rectangle is a table. Tables are not really hard to use or make, but it needs a bit of practice still. Now, lets have some source code to work with:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTCreating tablesTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000080" ALINK="#0000FF" VLINK="#800080"TAGINLINEGT
TAGINLINELTTABLE BORDER="1"TAGINLINEGT
TAGINLINELTTDTAGINLINEGT
This is a table with only one rectangle, so to say.
TAGINLINELT/TDTAGINLINEGT TAGINLINELT/TABLETAGINLINEGT

TAGINLINELTHRTAGINLINEGT Lets now do something a bit more complicated:

TAGINLINELTTABLE BORDER="1" WIDTH="95%"TAGINLINEGT

TAGINLINELTTRTAGINLINEGT
TAGINLINELTTDTAGINLINEGTThis is rectangle 1TAGINLINELT/TDTAGINLINEGT
TAGINLINELTTDTAGINLINEGTThis is rectangle 2TAGINLINELT/TDTAGINLINEGT
TAGINLINELT/TRTAGINLINEGT

TAGINLINELTTRTAGINLINEGT
TAGINLINELTTDTAGINLINEGTThis is rectangle 3TAGINLINELT/TDTAGINLINEGT
TAGINLINELTTD BGCOLOR="#FF0000"TAGINLINEGTThis is rectangle 4TAGINLINELT/TDTAGINLINEGT
TAGINLINELT/TRTAGINLINEGT

TAGINLINELT/TABLETAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT

Well, there I did a few examples of how to use tables. I will explain a bit now. The whole thing starts at TAGINLINELTTABLETAGINLINEGT and ends at TAGINLINELT/TABLETAGINLINEGT. If you pay attention you will notice that there are two tables, a simple one at first, then another a bit more complicated below. There are attributes set to TAGINLINELTTABLETAGINLINEGT, such as BORDER="1". If BORDER was equal to zero, no lines would appear at all. Inside TAGINLINELTTABLETAGINLINEGT and TAGINLINELT/TABLETAGINLINEGT, there is TAGINLINELTTDTAGINLINEGT and TAGINLINELT/TDTAGINLINEGT, it is inside these that you put any objects to be shown in the screen. Every TAGINLINELTTDTAGINLINEGT and TAGINLINELT/TDTAGINLINEGT defines another rectangle. If you want rows of rectangles you have to enclose TAGINLINELTTDTAGINLINEGT and TAGINLINELT/TDTAGINLINEGT in TAGINLINELTTRTAGINLINEGT and TAGINLINELT/TRTAGINLINEGT, each of which defines a new row. On one of the TAGINLINELTTDTAGINLINEGT you saw I specified BGCOLOR, well, you can color each rectangle differently. And on TAGINLINELTTABLETAGINLINEGT you saw I specified WIDTH="95%", well, tables can have a fixed width, numbers can be in pixels or in percentage (in which case number is ended with %, like I did). Other atributes that can be used with TAGINLINELTTABLETAGINLINEGT are CELLSPACING and CELLPADDING, both adjusted by a number. These attributes have to do with how close a rectangle is to the other and such. TAGINLINELTTDTAGINLINEGT can have an attribute, VALIGN, which can have a value of TOP or BOTTOM, this is sort of a vertical alignment. The best way to understand tables is to experiment with them.


How to use frames

What are frames? Frames is a feature of HTML used to enable the user to view two or more pages at once, thus making for more sophisticated site interface. It has two majos disadvantages; one is that frames are not widely supported yet by most browsers, and two, it can take up valuable space on screen. It is up to the designer to make the call whether or not to use frames. Fot this example we will use four files to explain the purpose of frames a bit better, and lets get started.

Step 1: Make a file named main.html with the following contents:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTUsing framesTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTFRAMESET COLS="160,*"TAGINLINEGT
TAGINLINELTFRAME SRC="menu.html" NAME="PAGEMENU"TAGINLINEGT
TAGINLINELTFRAME SRC="page1.html" NAME="PAGECONTENT"TAGINLINEGT

TAGINLINELTNOFRAMESTAGINLINEGT
Your browser doesn't seem to support frames. Something must be done about it (here web page designer can make a link to a page without frames or to download a browser that supports them).
TAGINLINELT/NOFRAMESTAGINLINEGT

TAGINLINELT/FRAMESETTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


Step 2: Make a file named menu.html with the following contents:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTMenuTAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

This is a menu page:TAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTA HREF="page1.html" TARGET="PAGECONTENT"TAGINLINEGTLoad Page 1TAGINLINELT/ATAGINLINEGTTAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT
TAGINLINELTA HREF="page2.html" TARGET="PAGECONTENT"TAGINLINEGTLoad Page 2TAGINLINELT/ATAGINLINEGTTAGINLINELTBRTAGINLINEGT
TAGINLINELTBRTAGINLINEGT

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


Step 3: Make a file named page1.html with the following contents:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTPage 1TAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

This is page number 1 and we really suggest you to choose page number 2!

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT


Step 4: Finally, make a file named page2.html with the following contents:
TAGINLINELTHTMLTAGINLINEGT
TAGINLINELTHEADTAGINLINEGT
TAGINLINELTTITLETAGINLINEGTPage 2TAGINLINELT/TITLETAGINLINEGT
TAGINLINELT/HEADTAGINLINEGT
TAGINLINELTBODYTAGINLINEGT

Welcome to this page, the page number 2! As you can see, the menu at the left can change the page shown in this frame.

TAGINLINELT/BODYTAGINLINEGT
TAGINLINELT/HTMLTAGINLINEGT

OK, now, to see what you just did, view file main.html with your browser. OK, we did four files. File main.html has the code for the frames using TAGINLINELTFRAMESETTAGINLINEGT and TAGINLINELT/FRAMESETTAGINLINEGT. Notice the COLS attribute, it has "160,*". It means that the first frame is 160 pixels wide and the second one takes the rest since thats how HTML represent that asterisk (*). Besides COLS you could also specify ROWS, which sorts the frames horizontally (one above the other). A clever designer can even combine the COLS and ROWS attributes to make an interesting effect. Then comes TAGINLINELTFRAME SRC="menu.html" NAME="PAGEMENU"TAGINLINEGT and TAGINLINELTFRAME SRC="page1.html" NAME="PAGECONTENT"TAGINLINEGT, meaning that in the first frame page menu.html and in the second frame page page1.html will load by default. This is done by the SRC attribute (case sensitive!). Then comes NAME, and on the first one I specified PAGEMENU and on the second one PAGECONTENT. Setting that attribute is really important, as it will help the links on menu.html to decide in which frame to load the page using TARGET. Then, after that, TAGINLINELTNOFRAMESTAGINLINEGT and TAGINLINELT/NOFRAMESTAGINLINEGT are there so that the web page designer can put a message like "Your browser does not seem to support frames" and maybe even a link to another page without frames or to download a browser that supports them.

Now, there in file menu.html, in the TAGINLINELTA HREF=...TAGINLINEGT attribute you might notice another attribute not previously explained: TARGET. TARGET tells the browser on which frame the linked page wil load onto. Notice that the values entered here are the names of the frames previously defined in main.html. About the other two files they don't have anything that I don't have explained already in this HTML tutorial, so I believe that this can get you going with frames, and like tables, they require some practice and experiment to understand better.



Ten Questions and Answers

1- Is special software needed to program HTML?
Nope. PC users can use Notepad and MAC users can use Simple Text. However, avoid using fonts or any other fancy stuff, just input the tags as normal text, and don't forget to add .html to the end of the filename (this is better done and more effective by selecting Save As... then typing filename.html).

2-What does HTML stand for?
It stands for Hypertext Markup Language.

3-How do I put my pages online?
You need web space for that. You can find free web space on places like ueuo.com You may decide to host your web pages yourself, but this is more difficult (it is out of the focus of this tutorial to get on this) and can be expensive. To upload files you need a software known as FTP (File Transfer Protocol), so search for it on the major search engines.

4-Can I view the source HTML of other pages?
You can view the source code of other web pages. How? Well, suppose you find a site and you want to know how they did their web pages, well, you first must save the page to disk (most browsers allow you to do this from their File menu), and once in disk, you can open it with Notepad or wathever and view the code. You may as well right click on the screen into the page, and you will be given the opportunity, often, to view the page's source code.

5-How do I add a guest book or message board?
There are services online that can make it pretty easy to add guest books and message boards to your page.

6-Can I change the URL of my actual page without moving it?
You can search for a domain name online, some are even for free; they can help make your web page address shorter and easier if it ins't so already.

7-How I add a background picture to my page?
The TAGINLINELTBODYTAGINLINEGT tag has an attribute that I didn't speak of; BACKGROUND, which will equal an image to put as the background in your page. It appears as this: TAGINLINELTBODY TEXT="#000000" BGCOLOR="#FFFFFF" BACKGROUND="backpict.gif"TAGINLINEGT

8-Can I be offline to edit my pages?
Yes, you can edit your pages offline, and then just upload with a program such as FTP as mentioned. If you are new to the concept of uploading, then ask the people who gave you your web space as to how files can be uploaded.

9-Is it good idea to test my pages with several browsers?
Well, yes. Suppose you have more than one browser, Netscape and Internet Explorer, then it could be a good idea to test your pages with both to make sure it will not look bad with one of these browsers, so that your page can attract more users!

10-Is there any good books about HTML?
Lots and lots of books on HTML have been published, and a lot more knowledge can be obtained from them; in this tutorial we have just grasped the subject.



By Al originally written on September 14, 1999




123Bit Marketing - Copyright (C) 2014-2016

Terms Of Service | Privacy Policy





====================================
These sites are part of the 123Bit network
====================================

DatingNetworkToday.Com | DogeClix.Com | Galactic123.Com