HTML
What is a Web Page?
A web is a page with hypertext links that cross-reference text in the Internet .A web page is also know as HTML pages because it is coded in HTML language.
Today web pages(HTML pages ) are the standard interface of the internet.
Power of HTML
Earlier HTML pages could only hold text.However, since the boom of Internet people have added more and more capabilities to this langauge.
It can now have images,animations,multimedia contents and even interactive application.
What is HTML ?
Most HTML tags have two parts the strarting tag that indicates the start of text or formatting and the closing tag that indicates the end of text of formatting .
The closing tag is the same as the starting tag,the only differneces is that it begins with a / just after the < sign
Creating and editing web pages
Since a web page is a text file it can be created or edited in any text editor. However, there is application specially made for designing web pages. These applications are known as HTML editors.
Use any editor of your choice to create web pages.
A blank HTML page
A blank HTML page has the following code:
<html>
<head>
<title>It appears in the title bar</title>
</head>
<body>
It appears in the page
</body>
</html>
Creating your first web page
The above written code is a blank web page.Copy it to Notepad.Write the title of the page between the <TITLE> and </TITLE> tags.And write some one or two paragraphs of the between the <BODY> and </BODY> tags.
Give the save command and in the file name box type the filename inside double quotation("")with an extension of '.htm'.Now you can open the document in any browser and view it.
Tags and their Properties
Most of the HTML tags have their properties. The properties of every tag goes inside the opening tag .A tag can have any number of properties separated by space .Most of the properties have a value.For example if you are specifying the color property then its value will be the name of the color. A tag with properties will be written like.
<tag property1="value" property2="value">
Body tags and their meaning
Opening Tag Closing Tag Use <body> </body> Visible area of the HTML Page <Font> </font> Formatting start and end. <p> </p> Paragraph start and end <hr> [None] Horizontal line <br> [None] Line Break <B> </B> Start and end bold text. <I> </I> Start and end Italic text. <u> </u> Start and end Underline text.
Example
<html>
<head>
<title>First page</title>
</head>
<body>
<p align="center">
<font size="5" color="green" face="verdana"><b><i><u>Welcome to my site</u></i></b></font>
</p>
<hr size="3" width="100%"color="red">
</body>
</html>
More tag propeties.
Propeties Value
<p> tag align Paragraph alignment[left,center,right and justify]
<h1>to<H6>Tag Heading one(It is the greatest font size) <H2>....<h6>It is smallest font then the previous font size
<hr> tag width Width of line in pixel or percent
align alignment[left,center and right]
Color Color or line(IE only)
size size of the Horizontal line
<Font> Tag Font face
Font size
Font color
List tags and their use
Opening Tag Closing Tag Use <ul> </ul> Start and end of the bullet list <ol> </ol> Start and end of the number list <dir> </dir> Start and end of directory list <li> </li> Start and end of the list item <div> </div> Start and end of division or paragraph <img> none Insert image. <a> </a> Hyperlink or anchor.
Tag Proepeties
<UL>tag
Type Type of bullet(circle,sqaure or disc)
<OL> tag
Type Type of numbering(1,A,a,I or i)
Start Beginning count of numbering (e.g.1,2,3,4 etc)
<div>tag
Align Alignment of paragraph(left,center,right ro justify)
Example
<html>
<head>
<title>List </title>
</head>
<body>
<p><strong>Computer Course</strong> </p>
<ol >
<li>Java</li>
<li>Oracle</li>
<li>C++</li>
<li> HTML</li>
<li>Javascript</li>
</ol>
</body>
</html>
img tag properties
Property Value SRC Location of the image(e.g."c:\windows\circle.gif") WIDTH Width of the image in pixel HEIGHT Height of the image in pixel ALT Alternate or tool-tip text VSPACE Space to the right and left of image in pixels HSPACE Space to the right and left of image in pixels NAME Name of the image. LOWSRC Location of a lower resolution image ALIGN Alignment of text with imag.(top,middle,bottom etc) Example
<html>
<head>
<title>Image</title>
</head>
<body>
<p align="center"><strong>Welcome to My site</strong></p>
<p align="center"><strong><img src="C:/scene.jpg" alt="Click here" name="Image1" width="200" height="200" hspace="10" vspace="10" id="Image1"></strong></p>
</body>
</html>
Anchor tag properties
Property Value
<A>Tag
Name Name of the anchor
HREF Location of the file that is referenced.
TARGET Name of the window or frame to open the target file.
NOTE: Hyperlink is the part of the references another document. When you click on a hyperlink the referenced document is opened. Anchor is a reference point inside a document that can be referenced by a hyperlink. When<A>tag is used as anchor it doesn't have a closing tag.
Table in an HTML document
In HTML a table begins with a <TABLE> tag and ends with a </TABLE>tag.
Between the <TABLE> tag there are the rows that are enclosed between <TR>and </TR>tags. So there is one pair of <TR>and </TR>tags for each row.
Inside these rows are the cells, which are enclosed between the <TD> tag pairs inside every row should be the same. The contents of the cell goes between the <TD>and </TD> tags.
Example
<HTML>
<HEAD><TITLE>Table </TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
</table>
</BODY>
</HTML>
Contents of a cell
The context of a cell is written between the <TD>and </TD>tags.A cell of table can contain any text,HTML,image or even another table(i.e.you can have a table inside another table).
Tables are used in web pages to arrange the layout and /or to display tabular data.
Table/cell Properties
<Table>and <TD>tag
Property Value WIDTH Width of table /cell in pixel or percent HEIGHT Height of table/cell in pixel or percent BGCOLOR Background color of table/cell BACKGROUND Background image of table/cell <Table> Tag only
Property Value BORDER Thickness of table border in pixel BORDERCOLOR Color of table border CELLSPACNING Space between cells in pixel CELLPADDING Space between cell border and content in pixel
More tag properties
Property Value
<Td>tag only
ROWSPAN Number of rows the cell spans
Example
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<table border="1" align="center" cellpadding="3" cellspacing="2" width="60%" height="80%">
<caption>Simple Table With Formatting</caption>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
<tr>
<td colspan="2" rowspan="2" align="center" valign="center">
This is a double-width, double-height cell with centered contents.
</td>
</tr>
</table>
</BODY>
</HTML>
Images in HTML document
As we learnt earlier, a web page can only store text. So any images that appear inside the page is not inside the HTML document.Actually the image is a different file and there is a tag in the HTML page specifying the location of the image.The browser displays the image in the page as if it were a part of that document.
Image Formats in a HTML page
There are two types of image formats used in web pages.GIF(Graphics Interchangeable Format ".gif")and JPEG(Joint Photographics Expert Group ".jpg").The PNG(Portable Network Graphic ".png") format is still consideration and most probably will be used as web graphic format in the future.
Inserting image into the HTML page
IF you have a JPEG or GIF image you can insert it into HTML page by inserting the<IMG>tag.Refer to lecture 3 for the properties of the <IMG> tag looks like:
<IMG SRC="image surce" width="image width" height="image height">
Example <img src="images/picture.gif" width="150" Height="30>
The SRC property of the <IMG> tag is must.All other tags are optional.If you dono't specify the width and height property the image dimesion is calculated automatically.If you don't specify the width and height property the image resized in the browser while displaying. If the width and height property is not specified then the browser will take a little longer time to display the image as it has to calculated the values, so it is better to specify them at design time.
Other properties the<IMG> tag are ALT and LOSRC.The ALT property is used to specify the text that will appear if the image cannot be shown in the page or when the mouse moves will be loaded before the actual high-resolution image is loaded .This property is used when low source image instead of a blank page before the large image appears.
The format will be something like this:
Example:
<IMG SRC="image/picture.gif width="150" height="30" ALT="Home Buttom" lowsrc="images/smalliamge.gif">
Forms in a HTML document
Forms are used in a web page to collect information form the user .Generally user cannot write or edit a web page in the browser but in a form he can type and enter data,which can be collect by the web site owner.
For example a from can be used to accept the username and password of a user to log him onto the system or to take his details for any other purpose.
Tags for inserting a form
A form is inserted into a web page using the <FORM> and</FORM>tag.All the elements of a form tag are put between these tags inside the <INPUT >tag.The Type property of the <INPUT>tag determines the type of form element it is.For example <INPUT > will be a text box and <INPUT >will be a password box.The <INPUT>Tag doesnot have a closing tag.
All types of form fields are inserted using the <INPUT>Tag except the Drop Down and list Box.These are enclosed between <Select> and </select>tags.The list items are placed between these tags.Each list item is enclosed between a pair of <Option> and </option>tags.
The type of elements in a from
From Element <INPUT>Tag Type Description Text Box Text Field where the user can enter any text Password Box Password Field where the user can enter password Text Area Textarea Field where the user can enter multiple line of text Check box Checkbox Filed where the user can check one or more of available option Radio Button Radio Filed where the user can select any one of available option Button Button Command buttton used to enter a command Submit Button Submit Command button used to submit the form Reset Button Reset Command button used to reset the form Drop Down Box Filed where the user can select an item from the drop down menu List Box Field where the user can select one or more items from a list Example
here is a blank web page with only a from
<HTML>
<HEAD>
<TITLE>Form Page</TITLE>
</HEAD>
<BODY>
<form>
Full Name:<INPUT NAME="name"><br>
Gender:<INPUT name="gender" value="male">Male<input name="Gender" value="female">Female<br>
Age Group:<select name ="age">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
<Input value="submit form"<input value="reset From">
</form>
</body>
</html>
From Elements and their properties
<FORM>Tag properties
Property Value NAME Name of the Form METHOD How the form data will be sent(Get or Post) ACTION The script or program file that will handle the form data Text Field/Password Field/File Field
Property Value NAME Name of the Field SIZE Width of field in number of characters MAXLENGTH Themaximum number of character allowed (Including space) Check BOX/Radio Button(INPUT ><INPUT >
Property Value NAME Name of the check box/radio button VALUE Value to pass when checked CHECKED Doesnot have a value,the box will appear checked initially BUTTON /SUBMIT BUTTON /RESET BUTTON
<input >/<input >/<input type "reset">
Property Value NAME Name of the Button(optional) VALUE Text on the button face Hidden field <input type ="hidden">
Property Value NAME Name of the field VALUE value of pass Drop Down/List Box<select><option></select>
<Select> Tag
Property Value NAME Name of the field SIZE Number of lines in the list box . <option>Tag
Property Value VALUE Value to be passed when selected SELECTED Doesnot have a value,appears selected initially
Text Area<textarea></textarea> Property Value NAME Name of the field ROWS Height of the field in number of line COLS Width of the field in number of characters WRAP Type of text wrapping[off,virtual or physical] Frame
Until now wach web page when opend takes over the entire browser screen.The browser screen could not be split into separate(unique) sections,showing different but related information.
The HTML tags that divide a browser screen into two or more HTML recognizable unique region is the <FRAMESET></FRAMESET> tags.Each unique region is called a frame.Each frame can be loaded with a different document and hence,allow multiple HTML documents to be seen concurrently.
The HTML frame is a powerful feature that enables a web page to be broken into different unique section that,although realated ,operate independently of each other.
The <FRAMESET> Tag
The spliting of a browser screen into frames is accomplished with the <FRAMESET> and </FRAMESET> tags embedded into the HTML document .The <FRAMESET></FRAMESET>tags require one of the following two attributes depending on whethher the screen has to be divided into rows and columns.
ROWS This attribute is used to divide the screen into multiple rows.It can be set equal to a list of values.Depending on the require size of each row.The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen COLS This attribute is used to divide the screen into multiple columns.It can be set equal to a list of values.Depending on the require size of each Columns..The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen Example
<FRAMESET ROWS="33%,33%,33%>
<FRAMESET COLS="50 %,50%">
</FRAMESET>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</FRAMESET>
The <FRAME> Tag
Once the browser screen is divided into rows(Horizontal sections)and columns (Vertical Sections),Each unique section defined can be loaded with different HTML documents.This is achieved by using the <FRAME>tag,which takes in the following attributes :
Propery Value SRC Indicates the URL of the document to be loaded into the frame. MARGINHEIGHT Specifies the amount the amount of white space to be left at top and bottom of the frame MARGINWIDTH Specified the amount of white space to be along the sides of the frame NAME Gives the frame a unique name so it can be targeted by other documents.The name given must begin with an Alphanumeric character. NORSIZE Disables the frames resizing capability SCROLLING Controls the appearance of horizontall and vertical scrollbars in a frame.This takes the values YES/NO/AUTO Example
<FRAMESET ROWS="30%,*">
<FRAMESET COLS="50%,50%">
<FRAME SRC="file1.htm">
<FRAME SRC="file2.htm">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="file3,htm">
<FRAME SRC="file4.htm">
</FRAMESET>
</FRAMESET>
A web is a page with hypertext links that cross-reference text in the Internet .A web page is also know as HTML pages because it is coded in HTML language.
Today web pages(HTML pages ) are the standard interface of the internet.
Power of HTML
Earlier HTML pages could only hold text.However, since the boom of Internet people have added more and more capabilities to this langauge.
It can now have images,animations,multimedia contents and even interactive application.
What is HTML ?
Most HTML tags have two parts the strarting tag that indicates the start of text or formatting and the closing tag that indicates the end of text of formatting .
The closing tag is the same as the starting tag,the only differneces is that it begins with a / just after the < sign
Creating and editing web pages
Since a web page is a text file it can be created or edited in any text editor. However, there is application specially made for designing web pages. These applications are known as HTML editors.
Use any editor of your choice to create web pages.
A blank HTML page
A blank HTML page has the following code:
<html>
<head>
<title>It appears in the title bar</title>
</head>
<body>
It appears in the page
</body>
</html>
Creating your first web page
The above written code is a blank web page.Copy it to Notepad.Write the title of the page between the <TITLE> and </TITLE> tags.And write some one or two paragraphs of the between the <BODY> and </BODY> tags.
Give the save command and in the file name box type the filename inside double quotation("")with an extension of '.htm'.Now you can open the document in any browser and view it.
Tags and their Properties
Most of the HTML tags have their properties. The properties of every tag goes inside the opening tag .A tag can have any number of properties separated by space .Most of the properties have a value.For example if you are specifying the color property then its value will be the name of the color. A tag with properties will be written like.
<tag property1="value" property2="value">
Body tags and their meaning
Opening Tag Closing Tag Use <body> </body> Visible area of the HTML Page <Font> </font> Formatting start and end. <p> </p> Paragraph start and end <hr> [None] Horizontal line <br> [None] Line Break <B> </B> Start and end bold text. <I> </I> Start and end Italic text. <u> </u> Start and end Underline text.
Example
<html>
<head>
<title>First page</title>
</head>
<body>
<p align="center">
<font size="5" color="green" face="verdana"><b><i><u>Welcome to my site</u></i></b></font>
</p>
<hr size="3" width="100%"color="red">
</body>
</html>
More tag propeties.
Propeties Value
<p> tag align Paragraph alignment[left,center,right and justify]
<h1>to<H6>Tag Heading one(It is the greatest font size) <H2>....<h6>It is smallest font then the previous font size
<hr> tag width Width of line in pixel or percent
align alignment[left,center and right]
Color Color or line(IE only)
size size of the Horizontal line
<Font> Tag Font face
Font size
Font color
List tags and their use
Opening Tag Closing Tag Use <ul> </ul> Start and end of the bullet list <ol> </ol> Start and end of the number list <dir> </dir> Start and end of directory list <li> </li> Start and end of the list item <div> </div> Start and end of division or paragraph <img> none Insert image. <a> </a> Hyperlink or anchor.
Tag Proepeties
<UL>tag
Type Type of bullet(circle,sqaure or disc)
<OL> tag
Type Type of numbering(1,A,a,I or i)
Start Beginning count of numbering (e.g.1,2,3,4 etc)
<div>tag
Align Alignment of paragraph(left,center,right ro justify)
Example
<html>
<head>
<title>List </title>
</head>
<body>
<p><strong>Computer Course</strong> </p>
<ol >
<li>Java</li>
<li>Oracle</li>
<li>C++</li>
<li> HTML</li>
<li>Javascript</li>
</ol>
</body>
</html>
img tag properties
Property Value SRC Location of the image(e.g."c:\windows\circle.gif") WIDTH Width of the image in pixel HEIGHT Height of the image in pixel ALT Alternate or tool-tip text VSPACE Space to the right and left of image in pixels HSPACE Space to the right and left of image in pixels NAME Name of the image. LOWSRC Location of a lower resolution image ALIGN Alignment of text with imag.(top,middle,bottom etc) Example
<html>
<head>
<title>Image</title>
</head>
<body>
<p align="center"><strong>Welcome to My site</strong></p>
<p align="center"><strong><img src="C:/scene.jpg" alt="Click here" name="Image1" width="200" height="200" hspace="10" vspace="10" id="Image1"></strong></p>
</body>
</html>
Anchor tag properties
Property Value
<A>Tag
Name Name of the anchor
HREF Location of the file that is referenced.
TARGET Name of the window or frame to open the target file.
NOTE: Hyperlink is the part of the references another document. When you click on a hyperlink the referenced document is opened. Anchor is a reference point inside a document that can be referenced by a hyperlink. When<A>tag is used as anchor it doesn't have a closing tag.
Table in an HTML document
In HTML a table begins with a <TABLE> tag and ends with a </TABLE>tag.
Between the <TABLE> tag there are the rows that are enclosed between <TR>and </TR>tags. So there is one pair of <TR>and </TR>tags for each row.
Inside these rows are the cells, which are enclosed between the <TD> tag pairs inside every row should be the same. The contents of the cell goes between the <TD>and </TD> tags.
Example
<HTML>
<HEAD><TITLE>Table </TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
</table>
</BODY>
</HTML>
Contents of a cell
The context of a cell is written between the <TD>and </TD>tags.A cell of table can contain any text,HTML,image or even another table(i.e.you can have a table inside another table).
Tables are used in web pages to arrange the layout and /or to display tabular data.
Table/cell Properties
<Table>and <TD>tag
Property Value WIDTH Width of table /cell in pixel or percent HEIGHT Height of table/cell in pixel or percent BGCOLOR Background color of table/cell BACKGROUND Background image of table/cell <Table> Tag only
Property Value BORDER Thickness of table border in pixel BORDERCOLOR Color of table border CELLSPACNING Space between cells in pixel CELLPADDING Space between cell border and content in pixel
More tag properties
Property Value
<Td>tag only
ROWSPAN Number of rows the cell spans
Example
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<table border="1" align="center" cellpadding="3" cellspacing="2" width="60%" height="80%">
<caption>Simple Table With Formatting</caption>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
<tr>
<td colspan="2" rowspan="2" align="center" valign="center">
This is a double-width, double-height cell with centered contents.
</td>
</tr>
</table>
</BODY>
</HTML>
Images in HTML document
As we learnt earlier, a web page can only store text. So any images that appear inside the page is not inside the HTML document.Actually the image is a different file and there is a tag in the HTML page specifying the location of the image.The browser displays the image in the page as if it were a part of that document.
Image Formats in a HTML page
There are two types of image formats used in web pages.GIF(Graphics Interchangeable Format ".gif")and JPEG(Joint Photographics Expert Group ".jpg").The PNG(Portable Network Graphic ".png") format is still consideration and most probably will be used as web graphic format in the future.
Inserting image into the HTML page
IF you have a JPEG or GIF image you can insert it into HTML page by inserting the<IMG>tag.Refer to lecture 3 for the properties of the <IMG> tag looks like:
<IMG SRC="image surce" width="image width" height="image height">
Example <img src="images/picture.gif" width="150" Height="30>
The SRC property of the <IMG> tag is must.All other tags are optional.If you dono't specify the width and height property the image dimesion is calculated automatically.If you don't specify the width and height property the image resized in the browser while displaying. If the width and height property is not specified then the browser will take a little longer time to display the image as it has to calculated the values, so it is better to specify them at design time.
Other properties the<IMG> tag are ALT and LOSRC.The ALT property is used to specify the text that will appear if the image cannot be shown in the page or when the mouse moves will be loaded before the actual high-resolution image is loaded .This property is used when low source image instead of a blank page before the large image appears.
The format will be something like this:
Example:
<IMG SRC="image/picture.gif width="150" height="30" ALT="Home Buttom" lowsrc="images/smalliamge.gif">
Forms in a HTML document
Forms are used in a web page to collect information form the user .Generally user cannot write or edit a web page in the browser but in a form he can type and enter data,which can be collect by the web site owner.
For example a from can be used to accept the username and password of a user to log him onto the system or to take his details for any other purpose.
Tags for inserting a form
A form is inserted into a web page using the <FORM> and</FORM>tag.All the elements of a form tag are put between these tags inside the <INPUT >tag.The Type property of the <INPUT>tag determines the type of form element it is.For example <INPUT > will be a text box and <INPUT >will be a password box.The <INPUT>Tag doesnot have a closing tag.
All types of form fields are inserted using the <INPUT>Tag except the Drop Down and list Box.These are enclosed between <Select> and </select>tags.The list items are placed between these tags.Each list item is enclosed between a pair of <Option> and </option>tags.
The type of elements in a from
From Element <INPUT>Tag Type Description Text Box Text Field where the user can enter any text Password Box Password Field where the user can enter password Text Area Textarea Field where the user can enter multiple line of text Check box Checkbox Filed where the user can check one or more of available option Radio Button Radio Filed where the user can select any one of available option Button Button Command buttton used to enter a command Submit Button Submit Command button used to submit the form Reset Button Reset Command button used to reset the form Drop Down Box Filed where the user can select an item from the drop down menu List Box Field where the user can select one or more items from a list Example
here is a blank web page with only a from
<HTML>
<HEAD>
<TITLE>Form Page</TITLE>
</HEAD>
<BODY>
<form>
Full Name:<INPUT NAME="name"><br>
Gender:<INPUT name="gender" value="male">Male<input name="Gender" value="female">Female<br>
Age Group:<select name ="age">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
<Input value="submit form"<input value="reset From">
</form>
</body>
</html>
From Elements and their properties
<FORM>Tag properties
Property Value NAME Name of the Form METHOD How the form data will be sent(Get or Post) ACTION The script or program file that will handle the form data Text Field/Password Field/File Field
Property Value NAME Name of the Field SIZE Width of field in number of characters MAXLENGTH Themaximum number of character allowed (Including space) Check BOX/Radio Button(INPUT ><INPUT >
Property Value NAME Name of the check box/radio button VALUE Value to pass when checked CHECKED Doesnot have a value,the box will appear checked initially BUTTON /SUBMIT BUTTON /RESET BUTTON
<input >/<input >/<input type "reset">
Property Value NAME Name of the Button(optional) VALUE Text on the button face Hidden field <input type ="hidden">
Property Value NAME Name of the field VALUE value of pass Drop Down/List Box<select><option></select>
<Select> Tag
Property Value NAME Name of the field SIZE Number of lines in the list box . <option>Tag
Property Value VALUE Value to be passed when selected SELECTED Doesnot have a value,appears selected initially
Text Area<textarea></textarea> Property Value NAME Name of the field ROWS Height of the field in number of line COLS Width of the field in number of characters WRAP Type of text wrapping[off,virtual or physical] Frame
Until now wach web page when opend takes over the entire browser screen.The browser screen could not be split into separate(unique) sections,showing different but related information.
The HTML tags that divide a browser screen into two or more HTML recognizable unique region is the <FRAMESET></FRAMESET> tags.Each unique region is called a frame.Each frame can be loaded with a different document and hence,allow multiple HTML documents to be seen concurrently.
The HTML frame is a powerful feature that enables a web page to be broken into different unique section that,although realated ,operate independently of each other.
The <FRAMESET> Tag
The spliting of a browser screen into frames is accomplished with the <FRAMESET> and </FRAMESET> tags embedded into the HTML document .The <FRAMESET></FRAMESET>tags require one of the following two attributes depending on whethher the screen has to be divided into rows and columns.
ROWS This attribute is used to divide the screen into multiple rows.It can be set equal to a list of values.Depending on the require size of each row.The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen COLS This attribute is used to divide the screen into multiple columns.It can be set equal to a list of values.Depending on the require size of each Columns..The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen Example
<FRAMESET ROWS="33%,33%,33%>
<FRAMESET COLS="50 %,50%">
</FRAMESET>
<FRAMESET COLS="50%,50%">
</FRAMESET>
</FRAMESET>
The <FRAME> Tag
Once the browser screen is divided into rows(Horizontal sections)and columns (Vertical Sections),Each unique section defined can be loaded with different HTML documents.This is achieved by using the <FRAME>tag,which takes in the following attributes :
Propery Value SRC Indicates the URL of the document to be loaded into the frame. MARGINHEIGHT Specifies the amount the amount of white space to be left at top and bottom of the frame MARGINWIDTH Specified the amount of white space to be along the sides of the frame NAME Gives the frame a unique name so it can be targeted by other documents.The name given must begin with an Alphanumeric character. NORSIZE Disables the frames resizing capability SCROLLING Controls the appearance of horizontall and vertical scrollbars in a frame.This takes the values YES/NO/AUTO Example
<FRAMESET ROWS="30%,*">
<FRAMESET COLS="50%,50%">
<FRAME SRC="file1.htm">
<FRAME SRC="file2.htm">
</FRAMESET>
<FRAMESET COLS="50%,50%">
<FRAME SRC="file3,htm">
<FRAME SRC="file4.htm">
</FRAMESET>
</FRAMESET>