Unit I

MUTHAYAMMAL COLLEGE OF ARTS & SCIENCE, RASIPURAM.
DEPARTMENT OF COMPUTER SCIENCE
Staff Name: M.SUDHA Class: III CS ‘A’ Paper Code:12UCS10

Paper Name: WEB DESIGNING Unit: I
INTRODUCTION:
 HTML, which stands for HyperText Markup Language, is the predominant markup language for
web pages.
 A markup language is a set of markup tags, and HTML uses markup tags to describe web pages.
 HTML is an interpreted programming language.
 HTML is written in the form of HTML elements consisting of "tags" surrounded by angle brackets
(<html>) within the web page content. HTML tags normally come in pairs.
 The first tag in a pair is the start tag; the second tag is the end tag (they are also called opening tags
and closing tags respectively).
 The purpose of a web browser is to read HTML documents and display them as web pages.
 The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
 HTML elements form the building blocks of all websites.
 HTML allows images and objects to be embedded and can be used to create interactive forms.
 It provides a means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes and other items.
 It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.
 HTML can also be used to include Cascading Style Sheets (CSS) to define the appearance and
layout of text and other material.
 HTML tags are not case sensitive.
UNDERSTANDING HTML:
A web page is a plain text file encoded using Hypertext Markup Language (HTML).
HTML means word by word:
 Hypertext – Text that helps to jump from document to document.
 Markup – Tags that apply layout and formatting conventions to plain text
 Language – A reference to the fact that HTML is considered as a programming language.
WORKING OF HTML:
o The code within an HTML file is enclosed in tags.
o These tags indicate where the formatting should be applied, how the layout should appear, what
pictures should be placed in certain location.
Ex:
<i> Everything </i> is on sale.
This is a two- sided tag which encloses text between opening and closing tags.
o A person may connect to Internet by using a dial-up modem at speeds ranging 2400bps –
28.8 kbps.
o The text files transfer much faster than binary files.
o Instead of sending the formatted pages over the Internet, they created an application a web
browser that could interpret plain text code (HTML tags) as formatting instructions.
o The text could be sent quickly and efficiently in plain text format and then be processed and
displayed attractively and graphically on the local PC.
o The <img> tag was created to refer to a graphic stored on a server.
o It is one-sided meaning it does not have a closing tag, and it takes arguments.
o An argument is a text within the tag that contains information about how the tag should behave.
Ex: <img src=”tree.gif”>
o Where src = argument and specifies that the file tree.gif be displayed.
o Many tags accept arguments, either optional or required.
o With HTML, we can also create hyperlinks from one page to another.
o When a visitor to a web site clicks a hyperlink, the web browser loads the referenced page or
jumps to a marked section within the same page.
o To create hyperlinks the tag used is <a> a two sided tag.
Ex: <a href=”index.html”> Click here </a>
o Plain text is marked up with tags that indicate where elements such as formatting, hyperlinks and
graphics should be placed, and a web browser interprets those tags and displays the page in its
formatted state.
EX: <!doctype html>
<html>
<!- - Created 2011-01-01- - >
<head>
<title>Sample</title>
</head>
<body>
<p>Hello World! </p>
</body>
</html>
HTML ELEMENTS
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<b> Bold </b>
<br /> Break
 HTML Attributes
 HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
 Attribute Example
 HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.google.com">This is a link</a>
2
Always Quote Attribute Values:
 Attribute values should always be enclosed in quotes. Double style quotes are the most common, but
single style quotes are also allowed.
Use Lowercase Attributes:
 Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.
HTML Text Formatting Tags:
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Example:
<html>
<head>
<title> mcas college</title>
</head>
<body>
<b> SACHIN</b> </br>
<i> ABDULKALAM </i> </br>
<big> GANDHIJI</big> </br>
3
H<sub>2</sub>SO<sub>4 </sub> </br>
AREA OF SQUARE:A<sup>2</sup> </br>
<em> hello</em> </br>
</body>
</html>
OUTPUT:
Creating paragraphs and Line breaks:

 Each paragraph of text should be enclosed in a two-sided tag that indicates its type.
 The most basic paragraph type is the body paragraph, indicated by the <p> tag. It is a two-sided tag.
 The paragraph text is placed between a <p> and a </p>.
 In HTML the </p> can be omitted, but in XHTML it is required.
 To create a line break, use the <br/> tag.
 This is a one-sided tag that is placed within a paragraph, at the end of each line.
Note: In HTML <br> without the ending slash is acceptable usage, but in XHTML must use <br/>.
Ex: <p> welcome </p>
<p> hai this is an example for break <br/>
in paragraph tag </p>
Specifying a Page Title and keywords:

The text is specified by a <title> tag placed in the <head> section (also called the header).
Ex: <title> AVS College web site </title>
Another element that is placed in the header is the <Meta> tag, which is used to identify keywords
related to our page. When search engines index our page, they rely not only on the full text of the page, but
also on any keywords it finds in the <Meta> tag area
Caution: Not all search engines refer to <Meta> tags. Google does not for example it indexes only
the text contained in the <body> area.
Ex: <Meta name =” keywords” content =” flowers, vegetables”/>
The <Meta> tag in this code is a single-sided tag that contains two arguments:
name = and content=.
The values for each of those arguments are contained in quotation marks and ends with a
space and a slash (/).
4
Tips: The <meta> tag can also be used to redirect visitors to another page.
Ex: <meta http=” refresh” content=”5”; url =http://www.yahoo.com/new.html”/>

To add a page title and some keywords.
 Between the <head> and </head> tags type <title> AVS College </title>
 After the title, type the following <Meta> tag:
<Meta name=”keywords” content=”flowers, vegetables”/>
 Save the work and view it in IE.
Creating headings:
 Headings are used on web pages and used in printed documents.
 They breakup text into sections.
 The HTML standard defines six levels of headings <h1> through <h6>
 <h1> defines the largest heading and <h6> defines the smallest heading.
 There are no sizes or fonts assigned to the heading tags.
 The lower heading styles can be used for special purpose, such as tagline or mottos
Applying superscript and Subscript formatting:

o Superscript formatting makes text smaller and raises it off the baseline.
o It is commonly used for exponents in math equations and footnote number and symbols.
o Use superscript for ordinal numbers such as 1st, 2nd and 3rd.
o Subscripts make text smaller and move it below the baseline.
o The most common use for subscript is in chemical formulas.
To apply superscripts formatting to create a footnote and an ordinal.

Steps:
1. At the end of the last line of text between the </b> and the </p> tags type the following:
<sup > 1 </sup>
2. Immediately above the <body> tag type the following:
<p> <sup> 1 </sup> closed the 1 < sup> st </sup>
Saturday in January </p>
3. Save the file & refresh the IE display to view the result.
Using Monospace and preformatted text:

In a proportional font, characters take up various amount of space horizontally depending on their
sizes. The letter M takes up more space than the letter I
Ex: MMMMM
IIIII
Most web pages use proportional fonts are attractive and professional looking. A monospace font is
one in which each letter occupies the same amount of horizontal space, regardless of its actual size and
shape.
Common uses for monospace text include:
 Lines of programming code.
 Text that you are instructing a user to type.
 ASCII art (artwork created by using text characters)
To apply monospace you can use any of these tags.
Tag Description
<tt> TyperWriter text
<tbd> Keyboard
5
<code> Code
<samp> Sample
Monospace don’t work with ASCII art. ASCII is a code set representing English character as
numbers. 128 characters in the standard ASCII character set and 256 in the extended character set.
The problem with displaying ASCII art on a page is that a web browser removes any extra spaces.
Each line in the graphics has a number of blank spaces at the beginning.
Use the <pre> tag, which stands for “preformatted”. The <pre> tag not only displays the text in
mono space, but also preserves all the spaces and line breaks.
One common use for the <pre> tag is in poetry achieves.
Ex:1
` <p> 1. Loging box <br/>
2. <tt> premium </tt><br/>
3. Click in the password box <br/>
4. Type <tt> Customer </tt> <p/>
Ex:2
<p> 1. Loging box <br/>
2. <tt> <b> premium </b></tt><br/>
3. Click in the password box <br/>
4. Type <tt> <b> Customer </b> </tt> <p/>
Configuring IE view settings:

To view HTML pages in IE and specify a variety of settings.
1. On the View menu in IE, point to Text Size and then click Largest. All the text on the page increases in
size.
2. On the View menu point to Text Size and then click Smallest. All the text on the page decreases in size.
3. On the View menu point to Text Size and then click Medium. The text returns to its default size.
4. On the Tools menu click Internet options. A dialog box will appears.
5. In that dialog box, On the General tab, click the Font’s button. A dialog box will appears.
6. In the Web Page Font list click Arial.
7. In the Plain Text font list, click Lucidaconsole.
8. Click Ok to close the Fonts dialog box.
9. Click Ok to close the Internet options dialog box.
10. Open the XXXX file in IE.
11. Repeat steps 4 through 9 changing the web page font back to Times New Roman and the plain text font
back to courier new.
4. UNORDEREDLIST&NESTEDAND ORDERLIST
 To create several types of lists with HTML bulleted lists numbered lists and definition lists.
 We know how to create nested lists within lists, how to use styles to specify the bullet character or
numbering style and how to create horizontal lines that further helps to divide a page.
TYPE OF LIST:
The most common HTML lists are ordered and unordered lists
HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
6
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
Syntax of order list:
<ol>
<li>text </li>
<li>text</li>
</ol>
optional arguments:
 type= specifies the number style; valid values are decimal, decimal leading zero, lower
roman ,upper-roman, lower-alpha, upper-alpha, and none.
 Start= specifies the starting number ,deprecated
ORDERED LIST:
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items are
marked with numbers.
EXAMPLE
<html>
<head>
<title> mcasCOLLEGE</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
</body></html>
7
DIFFERENT TYPE OF ORDER LIST:
EXAMPLE:
<html>
<head>
<title> mcasCOLLEGE</title>
</head>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
8
OUTPUT:
NESTED LIST
Lists can also be nested within one another. A bulleted list embedded within a numbered list. The
bulleted list is placed within one of the <li> tags within the numbered <ol> list.
EX:
<ol> <li> Year : 2011 </li>
1. Year: 2011
<li> Months
2. Months
<ul> <li> January </li>
 January
<li> February </li>
 February
<li> March </li>
 March
3. Days
</ul><\li> <li> Days
 Saturday
<ul> <li>Saturday<\li>
 Sunday
<li> Saturday <\li>
</ul> </li></ol>
EXAMPLE PROGRAM
<html>
<head>
<title>MCAS COLLEGE</title>
</head>
<body>
<ol>
<li>Coffece</li>
<li>Tea</li>
<ul> <li>Black tea</li>
<li>Green tea</li>
</ul>
<li> Milk</li>
9
</ol>
</body> </html>
OUTPUT
HTML UNORDERED LISTS
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are
marked with bullets (typically small black circles).
<html>
<head>
<title> MCAS COLLEGE</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>
10
DIFFERENCE TYPE OF UNORDERED LIST
<html>
<head>
<title> MUTHAYAMMAL COLLEGE</title>
</head>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
11
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body></html>
OUTPUT:
HTML DEFINITION LISTS:

 A definition list is a list of items, with a description of each item.The <dl> tag defines a definition
list.
 The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the
item in the list):
Program:
<html>
<head>
</head>
12
<body>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:
BASIC HTML TABLES:

INTERMEDIATE HTMLTABLE&FORMATTING:
 A table is a grid of rows and columns, the intersections of which form cells. Each cell is a distinct
area, into which you can place text, graphics, or even other tables.
Use of table
 Html handles tables very well and you can use tables to organize complex data to be presented to
your site visitors.
Syntax of a table:
<table>
<tr>
<td> data</td>
<td> data </td>
</tr>
</table>
13
creating simple table:
<html>
<head>
</head>
<body>
<table>
<tr>
<td> cell 1</td>
<td> cell 2</td>
</tr>
<tr>
<td> cell 3</td>
<td> cell 4</td>
</body>
</html>
HTML TABLES AND THE BORDER ATTRIBUTE:

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be
useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
<html>
<head>
</head>
<body>
<h4>One column:</h4>
<table border="1">
<tr> <td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="3"> <tr>
14
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="5"><tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
OUTPUT:
15
HTML TABLE HEADERS
Header information in a table are defined with the <th> tag.
The text in a th element will be bold and centered.
<html>
<head>
</head>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
16
</table>
</body>
</html>
OUTPUT:
SPECIFYING THE SIZE OF A TABLE:

 by default, a table sizes itself to a accommodate all its cells,and each cell’s height and width changes
to accommodate the largest entry in that or column.The table structure expands or contracts as
needed when you add or remove cells or content within cells.
EXAMPLE:
<html>
<head>
</head>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th width="100px">Name</th>
<th width="400px">Telephone</th>
<th width="100px">Telephone</th>
17
</tr>
<tr>
<td width="100px">Bill Gates</td>
<td width="400px">555 77 854</td>
<td width="100px">555 77 855</td>
</tr>
</table>
</body>
</html>
OUTPUT:
FORMATTING TABLES
TABLE CELLS THAT SPAN MORE THAN ONE ROW/COLUMN
How to define table cells that span more than one row or one column
Merging table cells:
 Every cell in a given row must be the same height and every cell in a give column must be the same
width. you can’t make individual cells different heights or widths ,but you can span two or more
adjacent cells so that one cell spans multiple rows and /or columns.
<html>
<head>
<title> MUTHAYAMMAL COLEGE</title>
</head>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
18
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
19
OUTPUT:
HTML FORMS&FORMATTING
5. CREATING HYPERLINKS AND ANCHORS

 The web is based on hyperlinks.
 Each web page contains active links to other pages, which is turn links to other pages, which in turn
link to even more pages.
 Hyperlinks can connect to other places on a web page to other pages within our web site, to pages
outside our site, and to many types of web and non-web content.
HYPERLINK:
A hyperlink is a bit of text or a graphic that we can click to move to a different location on the page,
start an email message download a file, view a movie, listen to a sound clip, active a web based program and
so on. The <a> tag used to create various types of hyperlinks.
Hyper linking to a web page:

It starts with a <a> tag and then uses a href = argument that provides the URL or the path to the
destination.
Ex:
<a href=” http://www.microsoft.com”> Microsoft.com </a>
Hyperlinks are underlined by default.

Using partial paths and Filenames:
There is no need to provide a filename or a complete path to the destination in a hyperlink. It
depends on the context and the file’s name.
The home page is named either index or default and will load such a page automatically. In IE, type
the following URL in the Address bar.
www.microsoft.com/ windows/mp10
20
Note: Asp stands for Active Server Pages an advanced technology used for commercial web development.
Pages created with ASP typically have .asp or .aspx extensions.
Using relative and absolute paths:

Paths that contain a complete address that anyone, could use to get to that page are called absolute
paths. Absolute paths are very reliable, but they are also long and awkward to type. When the file is in the
same folders, we need to supply only the file name.
Ex: <a href=”ex.htm”> Welcome </a>
This is called a relative path, because the destination file is relative to the current file’s location.
Relative paths make it easier to develop and test our web site in a different file location.
Setting a Target Window:

By default, a hyperlink opens the referenced page in the same browser window. That means the new
page replaces the previous page onscreen. To direct the hyperlink to open its page in a new window, add the
argument target=”blank” to the <a> tag.
Ex: <a herf=”ex.htm” target =”blank”> samples </a>
Hyper linking to an E-mail Address:

Email hyperlinks are useful when we want to direct someone to send email to a particular person. To
create a hyperlink to an email address, use the same href= argument as before but instead of a web address
type mailto: followed by the email address like this:
Ex: <a href=”mailto: support @adatum.com”> contact us </a>
Not all browsers support live email hyperlinks. It’s a good idea to also include the actual email
address in text form on the page.
Ex: Contact < a href=”mailto: support @ adaterm.com </a>
To add a default subject line to the email add ? subject= subject after the email address, like this
Ex: <a href=”mailto: subject=comment”> contact </a>
Another optional argument, title= specifies a screen tip for the hyperlink, by default, the screen tip for a
hyperlink shows the address of the link. Screen tips are visible in most browsers including IE4.0 and higher.
To make the screen tip say please contact as with questions or comments add the following code:
Ex: <a href=”mail:support@adatum.com title=”pleasecontact”> support @ adatum.com<a>
Creating and Hyper linking to Anchors:

An anchor is a marker within an html document, define a specific location in the document with an
anchor name and then we can hyperlink directly to that anchor.
Anchors are most valuable in long documents with multiple sections. There are two parts to the
process: mark the anchor location, and then create a hyperlink that refers to it. To define an anchor create an
<a> tag around the destination text and include a name= argument.
Ex: <a name=” conclusion”> conclusion </a>
To refer to the anchor point, include it in the href= argument. Precede the anchor name with a pound
sign (#). If the anchor point is in the same document as the hyperlink, use a relative reference like this:
Ex:
<a href=”#concusion”> view the conclusion </a>
If the anchor were in the another file it would look like this,
<a herf=”report.htm#conclusion”> view the conclusion </a>
If the document is not in the same folder, we must refer to the folder either absolutely or relatively.
21
Hyper linking to other content:
A hyperlink can reference any file not just a web document but it links to other content such as
Microsoft office document, compressed archive files such as .zip files and even executable program files
such as setup utilities.
Some of the popular viewers and the address where they can be downloaded.
 Adobe Reader
 Ms-PowerPoint 2003
 Ms-Word Processor 2003
Ex: <li><a herf=”spray.doc”> Microsoft word </a></li>

HTML FORMS
 HTML forms are used to pass data to a server.

 A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
HTML Forms - The Input Element

 The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type
text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
Password Field
<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
22
EXAMPLE:
<html>
<head>
<title> MUTHAYAMMAL COLLEGE</title></head>
<form>
firstname:<input type="text"name="firstname"\><br/>
lastname:<input type=""text"name="lastname"\><br/>
Password: <input type="password" name="pwd" />
</form>
</html>
OUTPUT:
MORE COMPLEX HTML FORMS

HTML Frames:
23
The HTML frame element let you partition the canvas area of the browser into multiple windows
called frames. Each frame can display a separate, independent HTML document.
Discuss about frames in detail.
HTML frames were introduced by Netscape for the 2.0 release of its browser. Frames allow dividing
browser windows into several independent sections, each displaying a separate HTML document.
Each of these frames displays a separate HTML file.
Frame 1
Frame 2 frame3
Benefits:
 Allows user to scroll independently in one frame without affecting the content of
an adjoining frame.
 The frames can be scrolled independently; the table of contents and search tool are
always visible to the user.
 Frames group information; visitors can more easily find what they want.
 It is widely used on the Internet and often perceived as a hallmark (trade mark) of
a technically sophisticated site.
 It reduces downloading time.
 It can improve site usability.
 Frames separate content from navigation elements and structural elements, users
can easily and quickly update pages and provide new content.
 Designing two or three frames per frameset should be enough to accommodate the
information needs.
List the drawbacks of using frames.

Drawbacks:
1. Bookmarks: Most browsers do not let the user bookmark individual pages from a web site. Because
the pages are all referenced from a single HTML frames file, the user cannot return to an exact page
within a site, only to the main framed page.
2. Download overhead: Because the browser is loading more than one document, the initial download
time can be higher for a framed set of documents than for a single HTML document.
3. Confusing Navigation: Users can become confused if complicated framed document sets without
enough navigation choices to let users jump to the page of their choice. The BACK button in the
browser only lets the user load the previous page displayed within the frame, which may not be what
the user expects.
4. Visual Confusion: Too many frames within the browser window, each with its scroll bars, can
confuse the user and provide a poor use of the available screen. Limit the number of frames to avoid
breaking window into too many sections.
5. Frames and Search engines: frameset code contains no actual content. The content is contained in
the HTML files displayed in the frames. Search engines that read the content of a page for indexing
will find no information on a framed page.
6. User Preferences: Users can force their browsers to display a page outside of the frameset.
FRAMESET ELEMENT & NESTED FRAMESET
Explain frame elements with its usage.
HTML frameset documents contain the code that assembles the frames and their contents. Frameset
documents themselves have no actual content: therefore they have no <body> element.
24
The <frameset> element:
It is the container for the frameset code. The cols and Rows attributes are used to specify the
characteristics of the frameset.
Ex:
<HTML>
<HEAD> 50%
<TITLE> FRAME ROWS</TITLE>
</HEAD>
<FRAMESET ROWS = “50%, 50%”>
<FRAME SRC= “top.htm”> 50%
<FRAME SRC= “bottom.htm”>
</FRAMESET>
</HTML>
The <frame> element:

It informs the browser the file to display in the top row, and the second frame element points to the
file for the bottom row.
<frame> is an empty element. The SRC provides the location of the file that displays within the
frame.
Ex:
<HTML>
<HEAD>
<TITLE> FRAME COLUMNS</TITLE>
</HEAD> 70%
<FRAMESET COLS = “70%, *”> remaining
<FRAME SRC= “left.htm”> Portion
<FRAME SRC= “right.htm”>
</FRAMESET>
</HTML>
The asterisk (*) character tells the browser to fill the right column to the remainder of the browser
window.
The <NOFRAMES> Tag:

Explain the NOFRAMES Tag & Nesting frames.
This tag lists to provide an alternate page for users who do not have a frames-complaint browser.
ex:
<FRAMESET COLS = “75%, 25%”>
<FRAME NAME = “index” SRC= “index.htm”>
<FRAME NAME = “title” SRC= “title.htm”>
</NOFRAMES>
<BODY>
Nesting Frames:
Nesting allows to break the screen into both row and column frames. The following code shows the
nesting of the framesets.
Ex: <FRAMESET ROWS = “40%,*”>
<FRAME SRC= “topnav.htm”>
<FRAMESET COLS = “20%, 80%”>
<FRAME SRC= “left.htm”>
<FRAME SRC= “right.htm”>
25
</FRAMESET>
</FRAMESET>
Restricting resizing:
Ex: <FRAMESET ROWS = “50%,*”>
<FRAME SRC= “search.htm” noresize>
<FRAMESET COLS = “135*”>
<FRAME SRC= “contents.htm” noresize>
<FRAME SRC= “article.htm” noresize>
</FRAMESET>
</FRAMESET>
Controlling scroll bars:

Scroll bars in frames are set to appear automatically if the content is not accessible within the frame
window. The valid values are “yes”, “no” or “auto”, which is the default setting.
Ex:
<FRAMESET ROWS = “50 ,*”>
<FRAME SRC= “search.htm” scrolling = no>
<FRAMESET COLS = “135*”>
<FRAME SRC= “contents.htm”>
<FRAME SRC= “article.htm”>
</FRAMESET>
</FRAMESET>
Controlling frame borders:
<FRAMESET COLS = “150, *” frameborder = no framespacing = 0 border = 0>

<FRAME SRC= “leftgray.htm”>
<FRAME SRC= “x.htm” name =”content”>
</FRAMESET
Controlling frame margins:
Two frame attributes let the user to control the pixel width of both the vertical and horizontal
margins in a frame.
Margin width lets to control the left and right margins, while margin height affects the top and
bottom margins.
Setting these attribute to zero(0) lets you remove the margins entirely allowing your content to touch
the sides of the frame.
Add the margin height and margin width attributes to the <frame> element for the frame you want to
affects.
Targeting in framesets:
The power of frames comes form the ability to have one frame display information consistently
while the contents of a second frame might change based on the user’s choice.
By default, a link loads into the same frame from which it was selected. We can change this default
behavior and target the destination of a link to another frame in the frameset.
To target from one frame to another, two tasks are:

1. Name your frames using the name attribute in the frame element.
2. Target links to display their content in the named frame.
Naming frames:
Add the name attribute to the <frame> element.
Ex:
<frameset cols = “150, *”>
<frame src =”navcol.html”>
<frame src =’article.html” name =”main”>
26
</frameset>
Targeting named frames:
To do this, we must edit the HTML document that contain the <A> elements and provide target
attributes that tell the browser which frame displays the content. This target attribute is used either in
<base> or <a> element.
Targeting in the <base> element:
Adding the base element lets you set the default target frame for all of the links in the document.
<base> is an empty tag that resides in the <head> section of the document.
<head><title> frame links </title>
<base target =”main”>
</head>
Targeting in the <a> element:

This allows you to target a specific link to a destination different from the base target.
<A HREF=”article.html” target=”frame2”> article </a>
Special target names:
Name Description
_self This is the default behavior for link in a frameset. The linked
Using content is loaded into the same window as the <a>element _blank:
_Blank This name opens a new browser window to display the linked It is a
special content. This result can cause navigation confusion for the users, target
name who neither may nor relative that they are looking at a new lets you
to load instance of the browser. the
linked _Parent This name lets to breakout of a child frameset and displays the content
in to a link in the parent frameset one level up in the frameset hierarchy. new
instance This name only is useful when a link in a frameset displays an of
embedded frameset.
_Top The most useful of all the special names, top lets the user to
remove frames and display the linked content in a fresh browser
window.
Netscape navigator.
Using _top:
Use _top to load the lotus web page to the top of the existing window.
Planning Frame Content:
Planning on building a framed site, must prepare content for display within a frameset. Frameset
display is affected by the base screen resolution, it must be decided to display the frameset effectively.
Frames and Screen Resolution:
 Frame scroll bars and borders add to the screen space requirements of frames.
 Many web sites that use frames build them for a base resolution of 800*600, forcing users to change
their screen resolutions in order to view the content.
 Even when coded in higher resolution, it is necessary to test at lower resolution because some users
will view web sites at this resolution. Small differences between the ways browsers display frames
can affect the look significantly.
 The additional scroll bars in IE distract from the seamless nature of the frameset.
Designing effective frames:
 Build web pages to fit within the frames in which it is displayed.
 Accommodate different screen resolutions that can affect the size of the frame within the frameset.
 Decide whether to use fixed or relative framesets.
27
Mixing Fixed and Variable Frames:
Examine the following sample frameset that mixes a fixed frame and a variable frame to
accommodate different resolutions.
The code for a sample frameset:
<HTML>
<HEAD>
<TITLE>Designing Frame Content</TITLE>
</HEAD>
<FRAMESET COLS=“125, *”>
<FRAME SRC=“X.htm>
<FRAME SRC=“Y.htm” NAME=”MAIN”>
</FRAMESET>
</HTML>
It should be noticed that the code for the left column is fixed at 125 pixels. The asterisk (*) wild
character sets the right column to a variable width that changes, based on the browser size.
[UNIT-I COMPLETED]
28

Unit I

Uploaded by

Copyright:

Available Formats

Unit I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit I

Uploaded by

Copyright:

Available Formats

MUTHAYAMMAL COLLEGE OF ARTS & SCIENCE, RASIPURAM.

DEPARTMENT OF COMPUTER SCIENCE

Staff Name: M.SUDHA Class: III CS ‘A’ Paper Code:12UCS10

Start tag * Element content End tag *

<p> This is a paragraph </p>

<b> Bold </b>

<br /> Break

<a href="http://www.google.com">This is a link</a>

HTML Text Formatting Tags:

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

Creating paragraphs and Line breaks:

Specifying a Page Title and keywords:

Ex: <meta http=” refresh” content=”5”; url =http://www.yahoo.com/new.html”/>

Applying superscript and Subscript formatting:

To apply superscripts formatting to create a footnote and an ordinal.

Using Monospace and preformatted text:

Configuring IE view settings:

HTML List Tags

<h4>Lowercase letters list:</h4>

<h4>Roman numbers list:</h4>

<h4>Lowercase Roman numbers list:</h4>

HTML UNORDERED LISTS

HTML DEFINITION LISTS:

BASIC HTML TABLES:

HTML TABLES AND THE BORDER ATTRIBUTE:

SPECIFYING THE SIZE OF A TABLE:

5. CREATING HYPERLINKS AND ANCHORS

Hyper linking to a web page:

Hyperlinks are underlined by default.

Using relative and absolute paths:

Setting a Target Window:

Hyper linking to an E-mail Address:

Creating and Hyper linking to Anchors:

Ex: <li><a herf=”spray.doc”> Microsoft word </a></li>

 HTML forms are used to pass data to a server.

The <form> tag is used to create an HTML form:

HTML Forms - The Input Element

MORE COMPLEX HTML FORMS

List the drawbacks of using frames.

The <frame> element:

The <NOFRAMES> Tag:

Controlling scroll bars:

<FRAMESET COLS = “150, *” frameborder = no framespacing = 0 border = 0>

To target from one frame to another, two tasks are:

Targeting in the <a> element:

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.