Scribd
Upload
90 views

XHTML

XHTML (extensible hypertext markup language) is a markup language that is very similar to HTML but conforms to XML standards. Key points about XHTML include that all tags and attributes must be in lowercase, tags must be properly nested, end tags are required for non-empty elements, and attribute values must be quoted. A standard XHTML document structure includes elements like <html>, <head>, <title>, and <body>. Tags are used to structure different types of content like paragraphs, headings, quotes, and more.

Uploaded by

Likith
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
90 views

XHTML

XHTML (extensible hypertext markup language) is a markup language that is very similar to HTML but conforms to XML standards. Key points about XHTML include that all tags and attributes must be in lowercase, tags must be properly nested, end tags are required for non-empty elements, and attribute values must be quoted. A standard XHTML document structure includes elements like <html>, <head>, <title>, and <body>. Tags are used to structure different types of content like paragraphs, headings, quotes, and more.

Uploaded by

Likith
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 57

XHTML

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 1


XHTML
▪ Tag : html composed of tags. Tag is a code that describes how web page is
formatted.
▪ Tags are surrounded by angular bracket <>
▪ Text inside of angular brackets called tag name
▪ HTML tags normally come in pairs like <b> and </b>.
▪ The first tag in a pair is the start tag, the second tag is the end tag.
▪ HTML element : start tag , content ,end tag
▪ Attributes : specifies properties of a tag
▪ Attributes come in name/value pairs like: name="value"
▪ Use lowercase attributes.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 2


XHTML
▪ XHTML: Extensible Hyper Text Mark up Language
o Html and xhtml both are used to design static web pages
o Xhtml is derived from html and conform to XML standards.
o XHTML is in many ways similar to HTML, but it is more stricter and cleaner than HTML.

▪ Important points to remember while creating a new XHTML document


o All XHTML tag and attribute names must be written in lower case.
o All the tags must be nested properly.
o End tags are required for non-empty elements.
o The start tag of an empty element must end with />.
o All the attribute values must be quoted.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 3


Standard XHTML document structure
▪ Every XHTML document must begin with an xml declaration element that simply
identifies the document as being one based on XML.
▪ This element includes an attribute that specifies the version number, which is still 1.0.
▪ The xml declaration usually includes a second attribute, encoding, which specifies the
encoding used for the document.
<?xml version = “1.0” encoding = “utf-8”?>
▪ The xml declaration element is followed immediately by an SGML DOCTYPE
command, which specifies the particular SGML document-type definition (DTD) with
which the document complies, among other things.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
▪ The html element includes an attribute, xmlns, that specifies the XHTML namespace.
<html xmlns = “http://www.w3.org/1999/xhtml”>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 4


Standard XHTML document structure
▪ An XHTML document must include the four tags <html>, <head>, <title>, and <body>.
▪ The <html> tag identifies the root element of the document.
▪ The <head> element contains the head part of the document, which provides
▪ information about the document and does not provide the content of the document.
The body of a document provides the content of the document.
▪ The content of the title element is displayed by the browser at the top of its display
window, usually in the browser window’s title bar.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 5


Standard XHTML document structure
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML Document</title>
</head>
<body>
<p>This is an example of XHTML document.</p>
</body>
</html>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 6


Comments
▪ Comments in xhtml to increase readability
▪ Syntax:
<!- - write any thing -- >

▪ Browsers ignore XHTML comments that will not be displayed on the web browser

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 7


Type of elements in XHTML
1. Block level elements
2. Inline elements
Block elements
▪ New lines appears before and after the elements.
▪ List of block level elements are: p, h1,h2,h3,h4,h5,h6, div, table, form, dl, ol, ul.
Inline elements
▪ Do not begin in new line.
▪ Inline elements are: b, i, sub, sup, button, input, textarea, label..

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 8


Paragraph(<p>…</p>)
▪ Text is normally organized into paragraphs in the body of a document.
▪ The XHTML standard does not allow text to be placed directly in a document body.
Instead, textual paragraphs appear as the content of a paragraph element, specified
with the tag <p>.
<p>
wish u
a many more
happy returns of the day
</p>
Output : wish u a many more happy returns of the day

▪ Multiple white spaces are ignored by the browser.


▪ Browser supplies a line break at the end of each line.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 9


Paragraphs
▪ If the content of a paragraph tag is displayed at a position other than the beginning of
the line, the browser breaks the current line and inserts a blank line.

<p> Mary had a little lamb, </p> <p> its fleece was
white as snow. </p>

Output:
Mary had a little lamb,

its fleece was white as snow.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 10


Line Breaks(<br />
▪ Line Break(<br>) breaks the line without the preceding blank line.
▪ It has no closing tag.
▪ The break tag is specified as <br />.
<p> Mary had a little lamb, <br />its fleece was
white as snow. </p>

Output:
Mary had a little lamb,
its fleece was white as snow.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 11


Preserving White Spaces(<pre>…</pre>)
▪ It preserves the white spaces.
▪ It prevents the browser from eliminating multiple spaces and ignoring embedded line
breaks.

<pre>
CBIT
B.E-3/4,CSE-2
hyderabad
</pre>

OUTPUT:
CBIT
B.E-3/4,CSE-2
hyderabad

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 12


HEADING(<h1>,<h2>,….,<h6>)
▪ Text is often separated into sections in documents by beginning each section with a
heading.
▪ In XHTML, there are six levels of headings, specified by the tags <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>,
▪ where <h1> specifies the highest-level heading. Headings are usually displayed in a
boldface font whose default size depends on the number in the heading tag.
▪ On most browsers, <h1>, <h2>, and <h3> use font sizes that are larger than that of
the default size of text, <h4> uses the default size, and <h5> and <h6> use smaller
sizes.

OUTPUT

Output
21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 13
Block Quotations
▪ Block quotations set off the block of text from the normal flow of text in a document.
▪ Browser designers determine how the content of <blockquote> can be made to look
different from the surrounding text.
<body>
<blockquote>Browsers generally render blockquote text as indented text. If your
quoted text needs to display within a non-quoted paragraph, you should use the
HTML q tag. Most browsers surround q text with quotation marks.</blockquote>
<q>Browsers generally render blockquote text as indented text. If your quoted text
needs to display within a non-quoted paragraph, you should use the HTML q tag.
Most browsers surround q text with quotation marks.</q>
</body>

OUTPUT:

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 14


Content-based style tags
▪ Content based tags indicate the particular kind of text that appears in their content.
▪ Most commonly used content-based tags are the emphasis tag, the strong tag, and
the code tag.
▪ The emphasis tag, <em>, specifies that its textual content is special and should be
displayed in some way that indicates this distinctiveness. Most browsers use italics
for such content.
▪ Browsers often set the content of strong elements in bold.
▪ The code tag, <code>, is used to specify a monospace font, usually for program code.
eg: <code> cost = quantity * price </code>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 15


Font Styles
▪ Subscript and superscript characters can be specified by the <sub> and <sup> tags,
respectively.
eg: X<sub>2</sub><sup>3</sup> + y<sub>1</sub><sup>2</sup>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 16


Character Entities
▪ XHTML provides a collection of special characters that are sometimes needed in a
document but cannot be typed as themselves.
▪ These special characters are defined as entities, which are codes for the characters.
▪ An entity in a document is replaced by its associated character by the browser.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 17


Horizontal Rules
▪ The <hr /> tag causes a line break (ending the current line) and places a line across
the screen.
▪ The browser chooses the thickness, length, and horizontal placement of the line.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 18


Meta Element
▪ The meta element is used to provide additional information about a document.
▪ The meta tag has no content; rather, all of the information provided is specified with
attributes.
▪ The two attributes that are used to provide information are name and content.
▪ The user makes up a name as the value of the name attribute and specifies
information through the content attribute.
▪ Web search engines use the information provided with the meta element to
categorize Web documents in their indices.
◦ Eg: <meta name = “keywords” content = “binary trees, linked lists, stacks” />

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 19


Images
▪ Displays an image.
▪ No closing tag for <img> tag
▪ Commonly used file formats are .jpg, png,gif.

Example
<img src=“file.jpg” widht=“500” height= “400” alt= “ no image”/>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 20


Hypertext Links
▪ A link that points to a different resource specifies the address of that resource.
▪ Links are specified in an attribute of an anchor tag (<a>), which is an inline tag.
▪ The anchor tag that specifies a link is called the source of that link.
▪ The document whose address is specified in a link is called the target of that link.
▪ For creating links, only one attribute is required: href
▪ The value assigned to href specifies the target of the link.
◦ Eg: <a href="url">Link text</a>
Note: Link text need not be text it may be an image or HTML element.
◦ <a href=http://www.cbit.ac.in>visit cbit</a>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 21


Hypertext Links
▪ By default, links will appear as follows in all browsers:
◦ An unvisited link is underlined and blue
◦ A visited link is underlined and purple
◦ An active link is underlined and red
▪ href links to documents or services at other internet sites.
▪ Links to documents within the same website, or links to a specific part of either

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 22


Hypertext Links

Opening Tag Closing Attribute Description


Tag
<BODY> </BODY> Contents of Document

link="#color code" Unvisited Link Color

alink=“#colorcode” Active link Color

vlink="#color code" Visited Link Color

<A HREF = "Item </A> Creates hyperLink/


Location"> destination of link
<A HREF=“#target” </A>
Moves to Other Section of
Web Page

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 23


Hypertext Links
▪ Example:
<body link="#0000FF" alink="#FF0000" vlink="#800080">
<font size="20">
<a href="http://www.yahoo.com">yahoo</a><br>
<a href="http://www.facebook.com">facebook</a></br>
</font>
</body>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 24


Hypertext Links
▪ Connect to other page
< a href=“abc.html”>visit next page</a>

▪ create image as link

<a href="http://www.cbit.ac.in">
<img src=“cbitlog.jpg" alt="notvisiting" width=“50" height=“50"/>
</a>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 25


Lists
▪ Three kinds of lists are available in XHTML
1. Ordered List
2. Unordered list
3. Definition list

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 26


Ordered Lists
▪ Ordered lists are lists in which the order of items is important.
▪ This orderedness of a list is shown in the display of the list by the implicit attachment
of a sequential value to the beginning of each item.
▪ The default sequential values are Arabic numerals, beginning with 1.
▪ An ordered list is created within the block tag <ol>.

Example:
<ol>
<li>IT</li>
<li>CSE</li> OUTPUT
<li>ECE</li>
<li>EEE</li>
</ol>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 27


Ordered Lists
▪ Attributes
type (ordered list)
A Uppercase

a Lowercase

I Large roman numbers

i Small roman number

1(default) Numbers

start Defines the starting number

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 28


Unordered List
▪ The <ul> tag, which is a block tag, creates an unordered list.
▪ Each item in a list is specified with an <li> tag (li is an acronym for list item).
▪ Any tags can appear in a list item, including nested lists.
▪ When displayed, each list item is implicitly preceded by a bullet.

Example:
<ul>
<li>IT</li> OUTPUT
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ul>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 29


Unordered List
▪ Attributes
type (un ordered list)
DISC Default solid bullet

SQUARE Solid square

CIRCLE Hollow bullet

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 30


Definition Lists
▪ definition lists are used to specify lists of terms and their definitions, as in glossaries.
▪ A description list is a list of terms/names, with a description of each term/name.
▪ A definition list is given as the content of a <dl> tag, which is a block tag.
▪ Each term to be defined in the definition list is given as the content of a <dt> tag.
▪ The definitions themselves are specified as the content of <dd> tags.
▪ The defined terms of a definition list are usually displayed in the left margin
▪ The definitions are usually shown indented on the line or lines following the term.
Example:
<dl>
<dt>apple</dt> OUTPUT
<dd>-it is in red</dd>
<dt>banana</dt>
<dd>-it is in yellow color</dd>
</dl>
21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 31
Tables
▪ Tables are common fixtures in printed documents, books, and, of course, Web
documents.
▪ Tables provide a highly effective way of presenting many kinds of information.
▪ A table is a matrix of cells.
▪ The cells in the top row often contain column labels, those in the leftmost column
often contain row labels, and most of the rest of the cells contain the data of the
table.
▪ The content of a cell can be almost any document element, including text, a heading,
a horizontal rule, an image, and a nested table.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 32


Basic Table Tags
▪ <table>- creates table in XHTML
▪ Table is divided into rows and each row has data called table data.
▪ <tr>- creates row in a table.
▪ <td>- holds data in the cell.
▪ Border attribute- sets the borders to table. Value is integer specifies thickness of
border.
▪ <th> - table header

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 33


Tables

Example:
<table border="2">
<tr>
<th>studentName</th>
<th>Rollno</th>
<th>phoneno</th>
</tr> OUTPUT
<tr>
<td>RAm</td>
<td>999</td>
<td>123456789</td>
</tr>
</table>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 34


Opening Tag Closing Tag Attribute Description

TABLES <TABLE> </TABLE>


BORDER="number"
Adds Table
Border for Rows & Columns
CELLPADDING=“number” Spacing between wall of a cell and
the content in the cell
CELLSPACING= “number” Spacing between cells
BGCOLOR Background Color of Cells
<TR> </TR> Table Row (Start & End)
ALIGN="Left, Center, Right" Aligns Text in Row Horizontally

VALIGN="Top, Middle, Aligns Text in Row Vertically


Bottom"
<TD> </TD> Defines Data Cell
COLSPAN="number" Spans Cells across Column
ROWSPAN="number" Spans Cells across Row
<TH> </TH> Header Cell in Table
COLSPAN="number" Spans Cells across Column
ROWSPAN="number" Spans Cells across Row
<CAPTION> </CAPTION> Text outside Table

ALIGN="Top, Bottom" Aligns Caption at Top or Bottom

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 35


TABLES
▪ Cellpadding gives the more space between the cell content and border.

Example:
<table border="2" cellpadding="15">
<tr>
<th>studentName</th>
<th>Rollno</th>
<th>phoneno</th> OUTPUT
</tr>
<tr>
<td>RAm</td>
<td>999</td>
<td>123456789</td>
</tr>
</table>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 36


TABLES
▪ Cell spacing increases the space between cells.

Example:
<table border="2" cellspacing="15">
<tr>
<th>studentName</th>
<th>Rollno</th>
<th>phoneno</th>
</tr> OUTPUT
<tr>
<td>RAm</td>
<td>999</td>
<td>123456789</td>
</tr>
</table>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 37


Split the column- colspan attribute
▪ Split the column into two or more cells using the attribute colspan with <th> tag.

Example:
<table border="2">
<tr>
<th>studentName</th>
<th>Rollno</th>
<th colspan="2">phoneno</th>
OUTPUT
</tr>
<tr>
<td>RAm</td>
<td>999</td>
<td>123456789</td>
<td>9412698267</td>
</tr>
</table>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 38


Split the row- rowspan attribute
Example:
<table border="2">
<colgroup>
<col style="background-color:pink">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>studentname</th>
<td>SriRama</td> OUTPUT
</tr>
<tr>
<th rowspan="2">telephone</th>
<td>234156789</td>
</tr>
<tr>
<td>567788887</td>
</tr>
</table>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 39


Table Example
<center><b> <caption > Table Example </caption></b> </center>

<table border="2" align="center" bgcolor="pink" cellpadding="10" cellspacing="2">

<tr align=“center”>

<th> RollNo </th>

<th> Name </th>

</tr>

<tr> OUTPUT
<td align=“right”> 1 </td>

<td> abc </td>

</tr>

<tr>

<td align=“right”> 2 </td>

<td> pqr </td>

</tr>
21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 40
</table>
HTML FORMS
▪ HTML elements gives styles and meaning to a web site. To add interactivity to a web
page forms to be used.
▪ User needs to provide his own input . These type of interaction include:
◦ Sign up and login into a web site
◦ Enter personal information ( name, address, email, phone no etc)
◦ Filtering content( dropdowns, checkboxes)
◦ Perform a search
◦ Uploading files

▪ To accommodate all these needs, html provides form controls:


◦ Text input(one line or multiple lines)
◦ Checkboxes
◦ Radio buttons
◦ Dropdowns
◦ Submit and reset buttons

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 41


How does XHTML form works?
▪ A visitor visits a web page that contains a
form.
▪ The web browser displays the HTML form.
▪ The visitor fills in the form and submits
▪ The browser sends the submitted form data
to the web server
▪ A form processor script running on the web
server processes the form data
▪ A response page is sent back to the browser.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 42


<form> element
▪ -<form> block level element that defines an interactive part of a web page. All form
control elements like textbox, buttons appear within a <form> element.
▪ Form attributes
◦ action: specifies address where form information to be sent.
◦ Method: could be GET or POST how form information will be sent.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 43


<input> tag
▪ form elements use the <input> tag, with a type="..." attributes to tell which kind of
element it is.
▪ Input tag attributes
◦ Type - specifies type of the input control
◦ Name – name of the control

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 44


Textfield
<form>
Rollno<input type="text" name="rollno" size="20” maxsize=“10”/><br/>
stuname<input type="text" name="studentname" size="30“/><br/>

</form>

OUTPUT:

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 45


Password field
<form>
Username<input type=“text” name=“user” /><br/>
Password: <input type="password" name="pwd“/>
</form>

OUTPUT:

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 46


Checkbox
<form>
<input type=“checkbox” name=“branch” value=“it”/>IT<br/>
<input type=“checkbox” name=“branch” value=“cse”
checked=“checked”/>CSE<br/>

</form>

OUTPUT:

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 47


Radio Buttons
▪ If two or more radio buttons have the same name, the user can only select one of
them at a time. This is how you make a radio button “group”
▪ If you ask for the value of that name, you will get the value specified for the selected
radio button.

Radio buttons:<br/>
<input type="radio" name="radiobutton" value="1“/>male<br/>
<input type="radio" name="radiobutton" value=“2”checked=“checked”/> female

OUTPUT:

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 48


Buttons
• submit: send data
• reset: restore all form elements to their initial state
• button: take some action as specified by JavaScript

A submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset"> OUTPUT
A plain button:
<input type="button" name="Submit3" value="Push Me">

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 49


Textarea
▪ To insert a text area we use the tag <textarea>
▪ Syntax:
<textarea name=“string” rows=“n” cols=“n” > … </textarea>
▪ Note: rows represents the no. of lines the user can view at a time in that text area
and cols gives the no. of chars the user can enter in each line

<form>
<center>
<h1>using text area</h1>
<textarea name="textarea" rows="2" cols="24">hello</textarea> OUTPUT
</center>
</form>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 50


Drop down list
<Select> :
▪ To create a drop down list we use <select> tag
▪ syntax:
<select name=“string” > …… </select>

▪ To insert the values in the dropdown list we use the tag <option>
▪ Syntax:
<option value= “string” [selected]> …. </option>

Example:
<select name=“countries”>
<option value=“1” selected=“selected”> India</option>
OUTPUT
<option value=“2”> Srilanka</option>
<option value=“3”> Bangladesh</option>
</select>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 51


List box with multi section
<p> select your interested
branches</p>
<select multiple name="interests"
size="2">
<option value="1">CSE</option>
<option value="2">IT</option>
<option value="3">ECE</option>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 52


Frameset
▪ The <frameset> tag serves as a container element to hold a collection of frames. This
tag determines the number of frames, whether the frames are to be of a column or
of a row configuration, and sets the spacing for either case.
▪ The frameset tag is used in place of the body tag.
▪ The only tags that are valid inside the frameset tag are the frame, frameset, head,
and noframe.
▪ You can nest frameset tags inside of frameset tags.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 53


Frame
▪ The <frame> tag sets a single frame in the framed page.
▪ The frame tag is contained in a <frameset> tag.
▪ A frame element displays content, including forms, images, multimedia, other
frames, tables, etc.
▪ The frames can have either a column (vertical) or a row (horizontal) configuration,
but not both.
▪ The configuration must be set using either the cols or the rows attribute of the
frameset tag, but not both.
▪ This tag is self-closing tag. The blank space before the slash (/) is recommended for
maximum browser compatibilty.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 54


Frame tab attributes
ATTRIBUTE VALUE DESCRIPTION
src URL of the source page Src indicates the URL of the page or
image that has to be put into the frame.

Name Name of the frame Name defines a unique name for the
frames. It works like the name attribute
of other tags.

scrolling Yes/no/auto Yes means there will be a scrollbar even


when it is not needed. No means there
will not be a scrollbar even when it is
needed. Auto is the default value that
indicates there will be scroll bars as and
when required.

noresize Noresize means that the user cannot


make the frame bigger or smaller by
sliding the borders.
21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 55
Frame tab attributes
ATTRIBUTE VALUE DESCRIPTION

frameborder Yes/no Yes sets the border to on and no


sets the border to off. The default
value is yes.

bordercolor Color name/code Bordercolor sets the color of the


borders around the frame

marginwidth Value In pixels Marginwidth sets the internal left


and right margins of a frame.

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 56


Frames Example

<html xmlns="http://www.w3.org/1999/xhtml">
<frameset cols="50,50">
<frame src="framelinks_swa.xhtml" name="col1"/>
<frame name="col2"/> OUTPUT
</frameset>
</html>

21-08-2020 PREPARED BY: E. SWATHI, ASST. PROF., CSE, CBIT 57

You might also like