Make your own free website on Tripod.com

What is HTML?

H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms you'll be talking acronyms ASAP).

 

HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else. You can use NotePad and WordPad. If you are using another word processor, like WORD, then you should save file as text. For all HTML documents, you need to add suffix either ".htm" or ".html". (".htm" for PCs running Windows 3.x and ".html" for MAC and Windows 95/98 Machines). You can also use editors of browsers (Netscape Communicator, Internet Explorer, etc.) or other HTML editors (Microsoft Front Page, HotMetal, etc.) kullanabilirsiniz.

 

You can open the html document in the browser using FILE menu and OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.

 

You can look at an HTML document (known as the "source code") using VIEW menu and DOCUMENT SOURCE or SOURCE.

 

HTML PAGE

A web page consists of two blocks: head and body. Head block carries document information where in body block you can find the document itself. Tags are the basic building block of the web page. Elements (title, paragraph, list, table, image, etc.) can be added onto a page using HTML tags. Regardless of whether it's to format text or to define sections, tags can be recognized from the "<" and ">" signs. Tags come in two flavors: Empty tags and Container tags.

 

Empty tags do not require a closing complimentry tag. Generally, empty tags are sign posts. Two examples of empty tags are the IMG (image) tag and the HR (Horizontal Rule) tag.

 

Container tags on the other hand 'hold' something between their opening and closing tags. You can always tell a container tag because it always has a complementing closing tag following it. Whatever the purpose of the tag, it only affects the text that it holds.

 

An example of a container tag is the underline tag: <U>This text is underlined!</U>

 

HTML tags can be written using small letters only, capital letters only, or mixed. If there is a tag that is not defined for a browser, then the browser will ignore that definition and will not give an error message.

 

BASIC TEMPLATE

<HTML>

<HEAD>

<TITLE> BASIC TEMPLATE </TITLE>

<BASE ahref="http://www.geocities.com/SiliconValley/Park/1787/Example.html">

<META HTTP-EQUIV="Keywords" CONTENT="HTML, JAVA">

<LINK REV="made" HREF="mailto:spiritwriter@full-moon.com">

<SCRIPT language="JavaScript">

{JavaScript Script that is place between these two tags.}

</SCRIPT>

</HEAD>

 

<BODY>

A Little Bit of Text

</BODY>

 

</HTML>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

This is a tag that you may not find on all of the web pages that you surf to. Placed even before the opening element, this tag states what version of HTML you're using to write your page. If you're using HTML 3.2, this is the tag that you would want to place at the top of your page. What is does is to tell the computer what kind of document it is that is being uploaded to it.

 

<HTML> </HTML>

This tag identifies what kind of document is being presented to the browser. While it's function is much like the DOCTYPE tag it's tanslated a bit different. A loose analogy would be: DOCTYPE tells the world that this is a book in english using terms from the 1990's including sporadic references to browser extensions. <HTML> says, "book" and not anything else helpful.

 

Many designers will tell you that this tag isn't necessary. Browsers will correctly translate a html document anyhow when it hits the first HTML tag and so it doesn't really do anything for you to include this tag. While not a large piece of identification it does serve as documentation for your page.

 

<HEAD> ... </HEAD>

Within the HEAD section lies all of the identification data for the page.

 

HEAD ELEMENTS

These elements are all found within the HEAD section of the page. They define the page as much as anything does. Of the head elements the TITLE, STYLE and SCRIPT are container tags and require closing tags. The remaining elements are empty and closing tags are forbidden to them.

 

<TITLE> </TITLE>

Like the HEAD tag, the TITLE tag is a container element. It requires an opening and closing tag and only effects the text that it encloses. This tag identifies the title that you would like to be displayed for the page. This title doesn't show up on the page itself but is displayed at the top of the browser.

 

ISINDEX Used for simple keyword searches, see PROMPT.

BASE Defines the absolute address of the current page to help resolve relative addressing issues.

STYLE Reserved for future use with style sheets.

SCRIPT Used to define inclusion of scripting languages. Most notably JavaScript.

META Used to supply META information as name/value configuations.

LINK Used to show the relationship of the page with other documents.

 

<BODY> A Little Bit of Text + Image + </BODY>

Within the BODY section lies all of the content for your page (Frames, forms, tables, lists, pictures, and anything else that you might be able to stick into it).

 

<BODY background="http://www.fortunecity.com/skyscraper/sun/520/gretdimpledpaper.gif"

bgcolor="#aaaaaa" text="#000000" link="#aa0000" vlink="#00ff00" alink="ffffff">

 

Body Attributes

 

BACKGROUND=

The background attribute allows you to take a small image and have it as a background layer for your page.

background="http://www.fortunecity.com/skyscraper/sun/520/background.jpg"

 

What your browser does is take the image and lays it down in the upper left hand corner of the browser and then copies it across, left to right, and down, top to bottom, until the entire screen is covered (tile). After that, it lays out the contents of your page over the background. If you need to scroll up or down to see the entire page, the background is scrolled with it so it appears that the content has been glued to the background.

 

BGCOLOR=

This attribute controls the color that the background will be if you are not using the background attribute. Even if you are using the background attribute you should still define the bgcolor. This is because some older browsers do no recognize the background attribue and will not tile (copy the file across and down) the image for your page. When this occurs the older browser will display the bgcolor instead.

bgcolor="#aaaaaa"

 

TEXT=

This attribute controls the color of your text as it is displayed on your page.

text="#000000"

 

 

LINK, VLINK=, ALINK=

Link defines the color that all links on your page will be displayed in before they are followed. Vlink controls the color after they are followed. Alink controls the color that your link is displayed in while you are clicking on it.

link="#aa0000" vlink="#00ff00" alink="#ffffff"

 

If you choose not to define the colors within the BODY tag, you're browser uses the colors that have been chosen in the preferences section of your browser. Because of that, when someone else is looking at your page it can be quite a different experience. From The Hidaho Color Center you can select different colors and see how well they work together.

 

 

TEXT FORMAT TAGS

 

<H1> </H1> , <H6> </H6>

There are 6 fixed font sizes where 6 is the smallest and 1 is the largest of these sizes.

<H6> Hello </H1> Hello

<H4> Hi </H6> Hi

 

<B> </B>

Makes the characters bold.

<B> Hello </B> Hello

 

<I> </I>

Makes the characters italic.

<I> Hello </I> Hello

 

<U> </U>

Makes the characters underlined.

<U> Hello </U> Hello

 

<SUP> </SUP>

Makes the characters superscript.

<SUP> Hello </SUP> Hello

 

<SUB> </SUB>

Makes the characters subscript.

<SUB> Hello </SUB> Hello

 

<B><I></I></B> and others

All text format tags can be nested.

<B><U> Hello </U></B> Hello

 

 

BLOCK LEVEL ELEMENTS

Block level elements cause paragraph level breaks. They usually act as container elements and require a closing tag. They hold both text and text level (style formatting) elements.

 

P

This element defines a paragraph. The closing tag does not need to be explicitely stated.

DIV

Groups related items togethers and may be used with the align option

CENTER

Centers all text that is between the opening and closing tag.

HR

Horizonta ruler, displays a seperation rule on the web page.

BLOCKQUOTE

Used to note a quotation taken from outside of the present text

UL

The beginning tag for an unordered list

OL

The beginning tag for an ordered list

DL

The beginning tag for a definition list

FORM

Used to define a fill out form processed by http servers.

ISINDEX

This predates the FORM tag. Used for simple kinds of forms that have a single text input field.

TABLE

Denotes the beginning of a table grouping

<P> </P>

Used for paragraphs. Puts an empty line between two lines.

 

<ALIGN>

Aligns the text of a paragraph.

 

<CENTER> </CENTER>

Aligns paragraphs as centered.

 

<BR>

Cursor moves to the next line without adding an empty line.

 

HORIZONTAL RULER

The horizontal rule supplies a bar that runs the width of the page.

<HR width=? size=? noshade align=?>

 

WIDTH=

Can be specified as an absolute in pixels (140, 160, etc...) or as a percentage (30%, 75%, etc...). It defines the actual width of the bar on your page.

 

SIZE=

This defines the height of the bar. Unlike the width tag, the size tag may be defined only as a specification of pixels.

 

NOSHADE

This displays the rule as a solid line with no shadow.

 

ALIGN=

Left, right, and center are the valid options. These options aligns the ruler against the left margin, right margin, or centers it between the two.

 


LIST

Elements within a list may contain both block level and text level items. The exception to this is that no headings or address elements may be included.

OL An Ordered list

UL An Unordered List

DL A Definition List

LI A List Item

DT Define Term

DD Definition Description

 

Unordered List

<ul type=square>

<li> Apple

<li> Pear

</ul>

n      Apple

n      Pear

<ul type=circle>

<li> Apple

<li> Pear

</ul>

         Apple

         Pear

<ul >

<li> Apple

<li> Pear

</ul>

        Apple

        Pear

 

(type=disc can also be used)

 

 

Ordered List

<ol>

<li> Apple

<li> Pear

</ol>

1.      Apple

2.      Pear

<ol type=I>

<li> Apple

<li> Pear

</ol>

I.                    Apple

II.                 Pear

<ol type=A>

<li> Apple

<li> Pear

</ol>

A.     Apple

B.     Pear

<ol type=a>

<li> Apple

<li> Pear

</ol>

a.       Apple

b.      Pear

<ol type=i>

<li> Apple

<li> Pear

</ol>

i.                     Apple

ii.                   Pear

 

Nested List

There can not be more than 3 nesting for lists.

 

<ol>

<li>FIRST

<ul>

<li>SUB-1</li><li>SUB-2</li>

</ul>

<li>SECOND

</ol>

 

1.      FIRST

        SUB-1

        SUB-2

2.      SECOND

 

 


<TABLE> </TABLE>

All of the elements within a table are container elements.

TABLE Shows the beginning of the Table within the page.

TR Shows the beginning of the Row within the table.

TH Shows the beginning of cell heading within the table.

TD Shows the beginning of a data cell within the row of a table.

 

 

<TABLE> </TABLE>

Defines start of a table command. Border is used to draw border around cells (in pixels).

<TABLE border=3 cellspacing=3 cellpadding=3>

 

<CAPTION></CAPTION>

Defines title of table.

 

<TR>

Adds a row to the table. Text is aligned using ALIGN command.

<TR align=center>

 

<TH></TH>

Used for titles, writes bold and centered.

 

<TD></TD>

Adds a column to the table. Text is aligned using ALIGN command.

 

Example-1

<TABLE border=1>

<tr><th>Title1</th><td>1</td> <td>2</td> <td>3</td></tr>

<tr><th>Title2</th><td>4</td> <td>5</td> <td>6</td></tr>

<tr><th>Title3</th><td>7</td> <td>8</td> <td>9</td></tr>

</TABLE>

 

Title1

1

2

3

Title2

4

5

6

Title3

7

8

9

 

Example-2

<TABLE border>

<tr> <td>1</td> <td rowspan=2>2</td> <td>3</td> </tr>

<tr> <td>4</td> <td>5</td> </tr>

</TABLE>

 

1

2

3

4

5

 

 

Example-3

<table border>

<tr> <td>1</td> <td colspan=2>2</td> </tr>

<tr> <td>3</td> <td>4</td> <td>5</td> </tr>

</TABLE>

 

1

2

3

4

5

 

 


SPECIAL ELEMENTS

A Holds either name information or linking data.

BASEFONT Redefines the base size of text.

Hx Shows the beginning of a header (x is a variable from 1 to 6).

HTML Shows the beginning of an HTML document.

IMG An empty element used to include graphics within a page.

APPLET Used to include JAVA applets within a page. Placed within the HEAD section.

FONT Used to alter the size and color of text.

BR Used to induce a line break within the text.

MAP Begins a map file for a client sided image map.

 

CHARACTER ENTITIES

Character Entities are also called escape codes. These are characters that browsers aren't able to deal with easily.

For example, all tags begin with < and end with >. So if you used those characters in your regular text it could cause you all kinds of problems when it was displayed. Instead, you need to use escape codes for these characters. To show < you would use the code &lt;. To display the > you would use &gt;. You also need to avoid the & sign because most browsers use it to begin all character entities. &amp; is the code for that. If you have a choice you should use the numeric escape codes. This is because many older browsers do not know the letter equivalents. The letter codes are easier to remember but they are not known by all browsers.

 

Character Numeric Escape

< &#60; &<

> &#61; &gt;

& &amp;

" &quot;

[space] &160; &nbsp;

 

x &gt; 10 x>10

x &lt; 10 x<10

&quot; aa &quot; "aa"

&amp; aa &amp; &aa&

 

 

COMMENT LINE

Comment line can be recognized by its beginning "<!--" and ending "-->" symbols. Anything between the two parts of the tag is ignored by the browser.

 

Comment lines help you to remember what part of your source code controls what area of your page. A good practice you may want to develop is to leave a blank line before and after the comment line.

 

 

 


IMAGE TAG

<img alt="text" align=" " width="999" height="999" vspace="999" hspace="999" border="9" src="url address">

 

To put an image or picture onto your page the IMG tag is your main tool. Text is positioned next to the image using the align option. The SRC part of the IMG statement specifies where your image is located. And the ALT option displays the specified text if a browser is unable to display the image. The alt="txt" option should be included in each IMG tag. This option tells the browser to display a short message in place of the image if the graphic does not display or if the surfer has turned graphics off.

 

Two useful options within the IMG element is WIDTH=? and HEIGHT=?. These options are used to let the browser know what size the graphic is that's being used in the page. It then reserves the space for the image (outlining it in a blank square), displays the text for the page, and then returns to load the image. As you can imagine, this saves time for the user in that he/she can begin reading the text while they wait for the graphic to load.

 

Additionally the WIDTH and HEIGHT options will let you change the size of the image to either enlarge or shrink it. This doesn't change the storege requirements of the image.

 

Netscape also allows you to specify the gutter around the image. "The gutter" is just a term referring to the amount of white space around the image. VSPACE refers to the amount of space above and below the graphic. HSPACE refers to the space to the left and right. If you don't specify these values the default is to butt the text right up against the image.

 

The final atribute for the IMG statement is border=? What this option does is to specify the border, which is placed around images that are used as a link. This border around image links lets the user know that the image is clickable. Be careful not to set the border to 0 (BORDER="0"). This erases the border around the image link and the user may not know that the image is actually a link!

 

The exception to this is when using the mailto option as a link. The graphic for the mailto option is usually self- explanatory. So the border can be set to 0 (border=0) for opening an email window.

 

Netscape Extensions

Netscape Navigator extensions pertaining to the align option of the IMG statement.

 

Align="left" and Align="right" determine which margin the image rests against. Additionally, instead of a single line of text aligning against the image, multiple (2) lines of text are now displayed.

Align="texttop" aligns the baseline of your text with the top of the tallest text.

Align="absmiddle" aligns the middle of the text with the middle of the inline graphic.

Align="absbottom" aligns the bottom of the text with the bottom of the inline image.

Align="baseline" behaves just as the normal bottom align option does, aligning the current text with the bottom of the image.

 

Microsoft Internet Explorer Extension Here Microsoft has added a file type rather than a code. The .BMP (bitmap) file type is now allowed with Microsoft.

 

 

LINKS

There are three types of links: absolute, relative, and jumps. URLl addresses are case sensitive and must be spelled the same way in the links as they are in the directory.

 

Absolute addresses point to the full address of the page. Beginning at the site name and continuing thru to the page name if need be.

<a href="http://www.tripod.com">Tripod</a>

 

A relative address is how you would reference a page that was in the same directory that the current page is. So if your directory were that above, to reference the page planet, all that you would have to write would be:

<a href="planet">Tripod planet</a>

 

Note that relative addresses can be used only when you are linking from one address (page) to another that is within the same directory.

Section anchors (jumps) are used primarily to move from one section to another within the same page. The jump comes in two parts: the first is the name where the link points to and the second is the link itself. To name the receiving point for a jump you need to use the following tag:

<a name="section">section</a> (section is defined by you)

 

This must be the same name (case sensitive) as you use with the linking tag. To link to a section within the same page your link would look like this:

<a href="#section">section></a>

 

To link to a section that is within a different page your link would be:

<a href="page#section">section></a>

 

 

OTHER TAGS

 

BASE

BASE tag lets you specify, explicitely, what the url for the current page is. This allows you to use relative links in your page without worrying weather or not your browser will actually go there.

<BASE ahref="http://www.fortunecity.com/skyscraper/sun/520/Example.html">

 

META

META tags are used as a major source for documentation within your page. These tags help identify the maker of a page and may help you pursue your rights under copyright infringement.

 

META tags are also used by some search engines to include your page in their index.

 

META tags which have the HTTP-EQUIV are used to generate a response header for the page when a computer queries it. What this does is help the server side computer identify your page and what it should do with it.

 

<META NAME="description" CONTENT="This is a tutorial site">

This tag is used just as the keywords tag is. The description tag tells the search engine how you would like your page to be described..

 

<META NAME="author" CONTENT="William Cinton">

Tells who wrote the page.

 

<META HTTP-EQUIV="Reply-to" CONTENT="spiritwriter@geocities.com ">

Tells anyone who's interested how they can contact the author.

 

<META HTTP-EQUIV="Keywords" CONTENT="HTML, JAVA">

<META NAME="Keywords" CONTENT="HTML, JAVA">

Specifies the keywords for some of the search engines.

 

LINK

LINK tags behave very much like META tags do but they're purpose is slightly different. Through LINK tags you are able to show where in relation to the other pages, the current page is within the site. You are able to point to the main page of your site, the previous page (if in your mind you've meant for one page to be viewed before another), The Table of Contents, and other items that the page may have a relation to.

 

<LINK REV="made" HREF="mailto:spiritwriter@full-moon.com">

Specify an e-mail address where the author of the page may be contacted.

 

<LINK REL=REL="copyright" HREF="http://learnhtml.home.ml.org">

Points to the page where the copyright information for the site is kept.

 

VIDEO OR SOUND ADDITION

<EMBED src=dosya.avi> width=100 height=100>

 

 

 

FORMS

With forms you can put a survey on your page to see what people think. You can use forms as an order form for your site, or just as a questionnaire to see what people think of you pages. Regardless of why you use them, forms may just be the trick you need to get the feedback you desire.

 

<FORM>

<FORM> is a container tag and holds whatever form elements you might decide to use.

<FORM method="post" name="views" action="mailto:spiritwriter@full-moon.com">

 

This command does 3 things. First, it tells the browser you've begun a form and you want to call it 'views'. Second, it says that "Post" is the method you want the results to be handled. And third, you want the data posted to an e-mail address. Note that there are no spaces between 'mailto:' and the e-mail address you specify.

 

<INPUT>

INPUT type tells the browser the name, type and size of the input box.

<INPUT Type="text" name="My_name_is" size="30">

"text" tells the browser that this is a textbox form.

name=? defines the name of the form

size=? Defines the size of this form to be x characters in length.

<TEXTAREA>

Instead of a one row input this is used to input more than 1 rows.

<TEXTAREA name="I_think" rows=6 cols=30></textarea>

rows=? tells the browser that this textarea box is x rows tall.

cols=? tells the browser that this textarea box is x characters long.

 

<INPUT - Radio Buttons>

The post would only take the radio button selected. It will only let you select 1 (one) button. So the name will be the same regardless with the value differing per your suggestion.

 

<FONT color="#ff0000"> A </font> <INPUT type="radio" name="Letter_Grade" value="It's an A">

<FONT color="#00a500"> B </font><INPUT type="radio" name="Letter_Grade" value="It's a B">

 

<INPUT - Checkboxes>

As opposed to Radio Buttons, check boxes can have more than 1 option selected. So, while you might ask what computer brand a reader prefers using radio buttons, you would ask what peripherals a reader has hooked up with checkboxes and present a list of choices.

<INPUT type="checkbox" name="periphrials" value="mouse">

 

Pop - Up Boxes

A pop - up box is a text box with a difference. This is a box that displays one option of several possible. An Arrow is displayed next to the box. When the user clicks on the arrow, the pop up box opens and displays all of the possible options that are available.

<SELECT Name="I_Use_The_Web_moslty_for" size="1">

<OPTION SELECTED>Surfing

<OPTION>Playing Games

<OPTION>Chatting

</SELECT>

 

SELECT begin the pop - up box

SIZE=? defines how many options will show before you have clicked on the pop - up box.

OPTION SELECTED notes the option that will be initially displayed in the box.

OPTION notes the item that can be selected.

Submit and Reset Buttons

At the end of your forms page you insert the buttons that either submit or reset your forms.

<INPUT TYPE="submit"> or <INPUT TYPE="reset">

 

If you like you can use an image of your own devising for the submit button.

<INPUT TYPE="IMAGE" src="foo.gif">

FORM EXAMPLE

 

<HTML>

<HEAD>

<TITLE> Application Form </title>

</HEAD>

 

<BODY>

<FORM method="POST" action="mailto:egeli@boun.edu.tr">

<p>Your Name &nbsp &nbsp <input type="text" name="NAME" size="20"></p>

<p>Your Surname <input type="text" name="SURNAME" size="20"></p>

<p> <input type="submit" value="Post">

<input type="reset" value="Reset"> </p>

</FORM>

</BODY>

</HTML>

 

FORM POSTED FROM MOZILLA

ATTACHMENT:

 

File Name: Part_1 text file

File Type: Type: application/x-www-form-urlencoded

Content: NAME=Birgul&SURNAME=Egeli

 

 

 

MAPS

 

<IMG SRC="turkeym.gif" BORDER=1 USEMAP="#Turkey" ISMAP>

 

<MAP NAME="Turkey">

<AREA SHAPE=POLY COORDS="40,40,40,110,160,110,160,40" HREF="istanbul.gif">

<AREA SHAPE=POLY COORDS="170,10,170,80,270,80,270,10" HREF="safranbolu.jpg">

<AREA SHAPE=POLY COORDS="230,85,230,150,320,150,320,85" HREF="sumela.jpg">

<AREA SHAPE=POLY COORDS="330,20,330,130,420,130,420,20" HREF="yayla.jpg">

</MAP>

 

RECT (4 COORDINATES)

CIRCLE (CENTER COORDINATE, RADIUS)


FRAMES

FRAMESET tag is the first element of the frames page. <FRAMESET> is used to set the size of the frames to be displayed.

 

<HTML>

<HEAD>

<TITLE>

Page Title

</title>

</head>

 

<FRAMESETcols="140,*">

<FRAME name="nav" src="navbar.html">

<FRAMESET rows="25%,*">

<FRAME name="top" src="banner.html">

<FRAME name="main" src="start.html">

</FRAMESETt>

 

<NOFRAMES>

<BODY bgcolor="green" text="orange" link="red" vlink="blue">

YOUR BROWSER IS NOT CAPABLE OF SHOWING FRAMES.

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

 

 

Note that you can define the frames as being rows (rows="25%,*" or rows="140,*") or columns (cols="25%,* or cols="140,*"). The number of rows or columns is determined by the number of sizings that are defined. You can define as many frames in a frameset as you like.

 

<FRAMESET cols="15,125,*" border=0>

The first column here would be 15 pixels in width, the second measures 125. And the third (noted with the '*') would be given whatever space is left over after the implicitly sized frames were laid out.

 

<FRAMESET cols="10%,10%,10%,*">

Here, in the second example, the first column would have been laid out using 10% of the available window space. As would the second and third columns. The fourth column would have been laid out with whatever space had been laid out after the first three frames had been drawn.

 

border=0

This attribue is used if you wish no frame borders to be displayed anywhere within the frameset's window. When this attribute is found, the browser lays out the pages for the frames directly against the frames' edges.

 

<FRAME name= src= NOWRAP scrolling=[yes|no|auto] border=0 marginheight= ? marginwidth= ?>

Frame itself is defined with the <FRAME> element. The order in which the frames are defined must follow the same order as when they were sized in the frameset tag.

 

Name=?

Name is what you wish to refer to the frame itself as. You'll need this when you're wanting to load a document into the frame.

 

src=?

This attribute specifies what page will be loaded into this frame when it is first laid out. Technically, the src attribue is optional. However, if you do not specify it, there are some browsers out there that will not be able to load you frames and will crash as a result.

 

NOWRAP

This will cause your browser to lay out the frame's contents in a single line until it comes to an explicit line break, such as &nbsp;, <BR>, or <P>. If the content of the page being loaded has large paragraphs, and this attribue is being used, the paragraphs will be displayed as very long lines that you will have to scroll to the right in order to read.

 

border=0

As in the frameset tag, this attribute tells the browser not to display any borders. Used within the <FRAME> element however, it tells the browser to restrict the frame borders to the one frame only!

 

marginheight=

This attribute instructs the browser to display the frames document with x amount of space between the frame border and the document being loaded. Space is measured as a number of pixels in this case.

 

marginwidth=

Like marginheight, marginwidth places space between the document and the frame edge. But in this case, it's the side of the document and the frame border.

 

scrolling=

When specified as "yes" it will define a scrolling frame.

 

noresize

Will lock the size of the frame.

 

Nested Frames

<FRAMESET cols="50%,50%">

<FRAME name="rex" src="page1.html">

<FRAMESET rows="40%,*">

<FRAME name="secondcolumnfirstrow" src="thrrpt.html">

<FRAME name="secondcolumnsecondrow src="thrrpt2.html">

</FRAMESET>

</FRAMESET>

Note that when you're dividing a frame, the rows=/cols= attribute of the <FRAMESET> tag is switched. Meaning that a column has to be divided into rows and that a row must be divided into columns. You can't divide a column into more columns.

 

<NOFRAMES> .. </NOFRAMES>

The noframes tag is used to supply information to the reader if their browser isn't capable of viewing frames.

 

When defining the default page within the <NOFRAMES> section it's a good idea to treat the page as you would a normal web page. Set colors and the background. Inform the viewer that they do not have a frames capable browser. Show a link where they can see a non-frames version of your page and/or a place where they can get a frames capable browser.

 

Targeting Links

<A href="TheSecondPage.html" target="fred"> Goto the Second Page </a>

You can see that the value for the name in the frame tag and the value in the target field for the link are the same. What the target attribute does is tell the browser to find a frame with the same name as the target. Once found, load the page into that frame.

 

 

"_parent"

This word is used when you've loaded a second frames page into a frame of another frames page (nested frames). What it does is load the specified page into the original frame of the first set. In other words, it erases the second frames page that was loaded into the first.

 

"_top"

This word is used to load the page into the top of the window. It erases all frames within the current window and loads the specified page into it.

 

 

 

"_self"

This word loads the defined page into the same frame where the link is shown Thereby erasing the current page in that frame.

 

"_blank"

This word loads the defined page into a new, unnamed, window. You would want to use this word when you are linking to a site outside of your own but would like to keep your page displayed on the surfer's monitor at the same time.

 

target="rex"

Anytime that you put a name into the target attribute that is not a name within the frames page, your browser loads the page into a new window, and names the window with the value of the target attribute. In this case "rex". After the window is initally opened up, any page that has the same target value will be loaded into that window for as long as the window is opened. While this has a limited use when you're only using html, once you enter into the world of JavaScript it's a nice little short cut for establishing new windows.

 

 

Refreshing Multiple Frames

A common problem with frames is that, at some point, most aspiring web masters would like to change the contents of two or more frames at the same time.

 

Method-1

The easiest is simply to load a new page using the target="_top" attribute.

<A href="secondframepage.html" target="_top"> Goto second frames page </a>

When this is done, the first frames page is erased from the window. The "secondframepage.html" is then loaded into the empty window.

 

Method-2

Each frame of a frameset could be called a child of the parent frames set. And just as you wouldn't want one child telling the other kids what to do, neither did the frames designers want one frame to tell other multiple frames what to do. But along comes javascript and let's you do it anyway.

<FRAMESET ROWS="140,*">

<FRAME NAME = "Top" SRC="top.html">

<FRAME NAME = "Bottom" SRC="fill.html">

</FRAMESET>

 

Now, it's important to note that each frame has been given a name. The name attribute is optional but when your renewing multiple frames it's something that you have to include without fail.

 

These tags placed within the head section allow you insert JavaScript into your page.

<SCRIPT language="JavaScript">

function CHANGE(){

parent.Top.location="banner.html";

parent.Bottom.location="fill.html";

}

</SCRIPT>

 

parent.Top.location = "banner.html";

parent is JavaScript's way of calling back to the original frameset. "Top" is the name of the first frame, telling the parent frameset that you are wanting something done in the frame named "Top". Location, is the method, or action, that you're wanting to be applied to the frame. In this case your telling the browser of the location of the new document that you would like set into the frame named "Top". The puntuation mark, the semi-colon, is just telling your browser that this is the end of this paticular statement of JavaScript.

 

So, to trigger loading the pages into the frames, using an image as your link:

<FORM>

<INPUT type="image" src="gotobutton.gif" onClick="CHANGE()">

</FORM>

 

Remember that "CHANGE" is upper case when it was defined so must be uppercase when you're referencing it.