HTML and Web Notes

MAHENDRA
ARTS & SCIENCE COLLEGE

(AUTONOMOUS)
(NAAC ACCREDITED & AFFILIATED TO PERIYAR UNIVERSITY, SALEM)
KALIPPATTI (PO) – 637 501, NAMAKKAL (DT)
DEPARTMENT OF
COMPUTER SCIENCE & APPLICATIONS
COURSE MATERIAL
COURSE MATERIAL
EVEN SEM
Class : II B.Sc. MATHS

Subject : HTML AND WEB DESIGN
Subject Code : M16UCSN04
Semester : IV
R.UMAMAHESWARI, M.Sc., M.Phil.,
1
HTML AND WEB DESIGN
NMEC: II SEMESTER: III SUBJECT CODE: M16UCSN04
UNIT – I
HTML Basics: Understanding HTML – Setting Up the Document Structure – Formatting Text by Using
Tags – Using Lists and Backgrounds – Creating Hyperlinks and Anchors. Style Sheets and Graphics:
Introduction to Style sheets
UNIT- II
Graphics: Selecting a Graphics format – Preparing Graphics for web use – Inserting Graphics –
Arranging elements on the page – Controlling Image size and Padding.
UNIT III
Hyper linking from Graphics – Utilizing Thumbnail Graphics – Including Alternate Text for
Graphics Navigation: Creating Navigation Aids – Creating Tables – Formatting Tables.
UNIT IV
Layouts: Creating Division based layouts – Creating user forms – Using frames for Layout –
Incorporating Audio and Video.
UNIT V
Introduction to the Internet: World Wide Web – Networking – Internet –Electronic mail –
Resource sharing – Gopher – Usenet – Telnet. Internet technologies: Modem- Internet addressing –
Physical connections. Internet browsers: Internet explorer - Netscape Navigator
Text book:
1. “Microsoft step by step- HTML and XH”, Faithe Wempen, Prentice Hall of India pvt Ltd, New
Delhi, 2006
2. “World Wide Web design with HTML”, C.Xavier, TMH 2007
2
HTML BASICS
INTRODUCTION:
 HTML stands for Hyper Text 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.
1. 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.
3
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 2019-01-01- - >
<head>
<title>Sample</title>
</head>
<body>
<p>Hello World! </p>
</body>
</html>
How xhtml fits in?
 A standard organization for managing HTML emerged the World Wide Web Consortium (W3C).
 Each new version of the HTML standard introduces new best practices and deprecates certain old
tags.
 A good web browser should support every tag and every version of HTML it can because the various
HTML version differences should be completely invisible to the web site visitor.
 There is a language related to HTML called Extensible Markup Language (XML) that programmers
use to create their own tags, which is widely used for web databases.
 The W3C recreate the entire HTML language in XML and called it as Extensible HTML version 1.0
was released in 2001 and the current version is XHTML 2.0, released in 2004.
 XHTML is a separate language that began as a reformulation of HTML 4.01 using XML 1.0.
 We use XHTML to create new tags and extensions, which is a valuable feature for advanced web
developers.
How cascading style sheets work?

 The current version of HTML (4.01) supports cascading style sheets. (Based on the same principles as
style templates in a Word Processor or page-layout program).
 Web designers use cascading style sheets to specify the formatting for a particular tag type-usually in
a separate style sheet document and then apply that style sheet to multiple pages.
 A cascading style sheets (CSS) is a text document that defines formatting for the various tags.
 When formatting a large web site we can save lot of time by creating single CSS and applying it to
every page.
Selecting a tool for creating web pages:

There are two broad types of tools for creating web pages:
1. Editors – Programs which helps to create plain text files and manually enter the code for each
HTML tag, such as notepad.
2. Converters – Programs which helps to create formatted documents and then allow a built in
converter to create the HTML tags such as Microsoft word or FrontPage.
Opening a web page in notepad:

Notepad is included with all versions of windows. The default file extension is .txt. That means each
time you browse for a file, change the file type to All Files so you can browse for Web Pages (.htm or .html
extensions).
Steps:
1. On the Start menu, point to All Programs, point to Accessories and then click Notepad.
2. In the untitled notepad window, on the File menu click Open.
3. Navigate to the folder containing the practice files. On the places bar, click My Documents and then in
the open dialog box, double click the sample folder.
4. Click the files of type down arrow, and then click all files.
5. In the open dialog box, click welcome.htm and then click open. The welcome file opens in notepad.
4
6. Locate the <html> and </html> tags. These tags signify the beginning and end of the HTML code.
7. Locate the <body> and </body> tags. These tags signify the beginning and end of the visible portion
of the web page when viewed in a browser.
8. Locate the <p> and </p> tags. These tags signify the beginning and end of the paragraph.
9. Leave the page open in notepad for later use.
Tips: A quick way to open most file types in their default applications is to be double- click
them from any Windows Explorer Window.
Previewing a web page in Internet Explorer (IE):

Notepad is not a WYSIWYG (“What You See Is What You Get”) program. Internet Explorer is a
good choice because it’s the most popular browser. To display an HTML file in IE and see the displayed
file and the underlying code at the same time.
Steps:
 On the Start menu, click Internet Explorer.
 On the File menu, click Open ( The Open Dialog Box appears)
 Click the Browse button and then browse to My Documents\ ….
 Click welcome.htm and then click Open.(The complete path to the file appears in the Open
dialog box)
 Click OK. (The file opens in Internet Explorer).
Making, saving and viewing changes:

Save the work in notepad, and then refresh the display in Internet Explorer.
Steps:
 In notepad, locate the word X College and change it to Mahendra Arts and Science College.
Ex: <p> Welcome to Mahendra Arts and Science College </p>
 On the File menu, click Save.
 On the Internet Explorer toolbar click the Refresh button.
 Close the file and exit notepad and Internet Explorer.
5
2. SETTING UP THE DOCUMENT STRUCTURE
HTML helps to create our web content. This means the document must contain certain tags to
underlying structure of the content in web page.
Specifying the document type:
There are 3 document types when writing HTML and XHTML code.
 Transitional:
This document type is based on HTML standard coding but it is backward-compatible
with old HTML conventions, including deprecated tags.
 Strict:
This document type dose not accepts any deprecated tags. It gets the benefit of
XHTML, by including its ability to connect to databases.
 Frameset: This document type allows frames in a web site.
Tips: A frameset is a grid that divides the web browser screen into separate panels.
Framesets are no longer popular because cascading style sheets make it easy to apply
consistent formatting on related pages.
We can use the DOCTYPE tag to specify the web page.
 It should always be uppercase.
 It is an optional tag.
 When a browser encounters a DOCTYPE tag, it processes the page in
standard mode.
 When it doesn’t encounter the DOCTYPE tag, it processes the page is quirks
mode.
Note: If we write code in XHTML, the DOCTYPE is required and not optional.
The DOCTYPE tag always begins with an exclamation point, and is always placed at the beginning
of the document, before the <html>tag.
Ex: <!DOCTYPE HTML PUBLIC “-//W3C/ DTD HTML 4.01 TRANSITIONAL // EN “
“http:// www.w3.org/tr/html4/loose.dtd”>
In XHTML, the syntax for the tag is:
Ex: <! DOCTYPE HTML PUBLIC “-//W3C /DTD XHTML 1.0 TRANSITIONAL // EN”
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitiona.dtd>
Creating the HTML, HEAD and BODY sections:

The tags <html> and </html> serves as a “wrapper” around all the other tags in the document. The
document should have two sections: A head and a body.
o The Head section is defined by the two-sided tag <head>. It contains the page title, which is the
text that will appear in the title bar of the web browser and on the Microsoft windows taskbar button.
It also includes information about the document that is not displayed, such as its Metatags.
o The Body section is defined by the two-sided tag <body>. It contains all the information that
appears in the web browser when you view the page.
The <html>, <head> and <body> tags are all optional in HTML but required in XHTML.
Ex: <html xlmns= “http:// www.w3.org/1999/xhtml”>
To create two template documents:
Steps:
 In notepad, click the Format menu, and if word wrap does not already have a check mark next to it,
click it to select the Word Wrap feature.
 In the Notepad window type the following:
<! DOCTYPE HTML PUBLIC “-//W3c/ DTD HTML 4.01 Transitional // en “
6
 Press enter and type the following:
<html>
<head>
 Press enter a few times to add some blank lines and then type the following :
</head>
<body>
 Press enter a few time to add some blank lines and then type the following :
</body>
</html>
 Save the file as x.htm on our windows desktop.
 Change the DOCTYPE tag to this:
<! DOCTYPE HTML PUBLIC “-//W3C/ DTD HTML 4.01 Transitional // EN “
 Edit the <html> tag as follows: <html xlmns=“http:// www.w3.org/xhtml”>
 Save the file as xhtml.htm on our windows desktop.
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> Mahendra Arts and Science 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 (/).
7
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> MAKENDRA College </title>
 After the title, type the following <Meta> tag:
<Meta name=”keywords” content=”flowers, vegetables”/>
 Save the work and view it in IE.
Publishing a file to a server:

When a page is finalized, it wants to be transferred to a publicly accessible web server so that others
can view it. There are several ways to transfer files to a server. Some of the possibilities are:
 Uploading through an FTP connection by using IE  This is done by entering the address of
an FTP server in the address bar of IE.
 Uploading through an FTP connection by using FTP software  There are many third-party
FTP applications. It helps to restart uploads that are interrupted due to communication errors.
Ex: Ws_ftp and BulletproofFTP ( www.bptfp.com)
 Saving directly to a web folder  It use the save as Dialog box to save files to a web
location. Save directly to the server.
To connect to a web server through windows Explorer follows the steps given bellow.
Steps:
 On the Start menu, click my Network places.
 In the network tasks area, click Add a network place. The Add network place wizard starts.
 Click next
 Click “Choose another network location” and then click Next.
 Type the web address you want to connect to including the http:// at the beginning. The exact
address will vary depending on the server you are accessing. Then click Next.
 It prompted, enter the users name and password have been assigned for the server and click
ok.
 Type a name by which to refer to this network place. By default, the web address itself is
used which is fine. Then click Next.
 Click finish.
 In notepad, open the step-by-step file.
 On the File menu, click save as.
 Display the save as dialog box on the places bar, click My Network places or click the Save
in drop-down list and the click My Network places.
 Double-click the network shortcut you created.
 Enter the username and password required to connect to the server and click ok.
 Browse to the folder in which you want to save the file.
 Click save as type down arrow and then click all files.
 Clicks save. The file is saved directly to the server.
3. FORMATTING TEXT BY USING TAGS

o Early versions of HTML used a <font> tag to specify a particular typeface (font style), size and
color.
o But the <font> tag has been deprecated in favor of styles in both HTML and XHTML.
o Descriptive tags, also called logical tags it describes the function of the text, rather than provide
directions for formatting.
o The <h1> heading tag specifies that the text within it should be formatted as a major heading, but it
provides no specific as to what that means.
8
The formatting specifies for descriptive tags can come from a variety of sources:
 The web browser used to view the page  Each web browser has defaults for the standard
HTML tags. The default for <h1> tag is left-aligned, 18 point times new roman. Most browsers
use the same defaults for the very basic tags, but non-standard browsers, such as those on cell
phones and PDAs, often display text very differently.
 Individual user customization  Each user can customize the web browser to suit his or her
preferences.
 Styles  We can specify the font families and sizes to use throughout our entire web site. We
can select a font family that will be suggested to the browser whenever a certain tag is applied.
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
To create some headings for opening page.

Steps:
1. Immediately below the <body> tag type the following :
<h1> Mahendra Arts and Science College </h1>
<h5> Salem -103 </h5>
2. Immediately above heading 5, type the following
<h2> Accredited with Five Star status </h2>
3. Save the file and refresh the IE, display to check the page.
Applying Bold and Italic Formatting:

Boldface and italics are two ways of making text. They are generally used in paragraphs rather than
in headings but they can be used anywhere. It uses the <b> and <i> tags. That is two-sided tags that enclose
the text to be formatted.
Ex: <p> Have a<i> great </i> time </p>
<p> welcome to <b> Mahendra Arts and
Science </b> College</p>
To apply both bold and italic formatting, we can nest one tag inside the
other. When nesting tags, the rule is first in, last out.
Ex: <p> Welcome to our <b> <i> college site </i> </b> </p>
Tips: HTML also allows the <strong> tag as a substitute for <b>
and the (emphasis) <em> tag as a substitute for <i>.
Applying superscript and Subscript formatting:

o Superscript formatting makes text smaller and raises it off the baseline.
9
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
<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/>
Formatting a block quotation:

When quoting blocks of text from other sources, it is customary both on web pages and in print, to
indent those blocks from the main body of the text. The <blockquote> tag does exactly that.
10
Note: There is also a <q> tag, which is used for formatting inline quotations. It’s only functionality is to
place quotation marks around the text that is encloses.
Ex: To add a block quotation to a web page.
<blockquote cite=” http://www....com/topic/robert”> </blockquote>
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.
11
4. USING LISTS AND BACKGROUNDS
 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.
Creating Bulleted and Numbered Lists:

o HTML has tags designed specifically for creating lists.
o They accept arguments to control formatting and they create hanging bullets and numbers.
o The tag for a numbered list is <ol> which stands for ordered list.
o A bulleted list, the tag is <ul> which stands for unordered list.
o Each numbered or bulleted item within the list is tagged <li>, for list item.
o To end the list use </ol> or </ul> tag.
Ex: <ol>
<li>Chocolates </li> 1. Chocolates
<li> Sweets</li> 2. Sweets
<li> Ice-creams</li> 3. Ice-creams
<li> Fruits</li> 4. Fruits
<li> Vegetables</li> 5. Vegetables
12
</ol>
Note: The indentation is added to make it easier for you to read. The browser ignores extra spaces.
In UL tag
<ul>
 Vanilla
<li> Vanilla </li>
 Strawberry
<li> Strawberry </li>
 Choclate
<li> Choclate</li>
 Butterscotch
<li> Butterscotch</li>
</ul>
Nesting Lists:
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> Days
 Saturday
<ul> <li>Saturday<\li>
 Sunday
<li> Saturday <\li>
</ul> </li></ol>
Changing the bullet or number character:
Bulleted and numbered lists can be styled by using a list-style-type: type argument. We can use the
values shown in the table for the list-style-type argument.
To apply the argument, place it in the opening <ul> or <ol> tag.  Month :
Ex:
<ul style=”list-style-type: square “>
January
<ol style=”list-style-type: upper-roman”> I. Year: 2011
List style Value Result

Bulleted Disc Filled circle
Circle Unfilled circle
square Filled square
Numbered Decimal 1,2,3,4
Decimal-leading-zero 01,02,03
Low-roman i,ii,iii,iv
Upper-roman I,II,III,IV,V
Lower-alpha a,b,c,d,e
Upper-alpha A,B,C,D,E
none nothing
Note: Another way of specifying the bullet or number type is to use the type = ”type” argument for the <ol>
and <ul> tags. But this method has been deprecated in HTML.
Specifying the start of a numbered list:

To start a numbered list at a number other than 1, use the start = ”n” argument with the <ol> tag,
where n is the starting number.
Ex: <ol start=”3”>
Use the value =”n” argument for an individual list item <li> to change the numbering for one item only.
Ex: <li value=”5”>
13
The start = and value = arguments are both deprecated.
Creating Definition lists:
o A definition list is a list in which terms are presented and then defined, such as in a glossary.
o The word being defined serves as a heading and the definition paragraph is indented under it.
o The complete list is contained within a <dl> tag, which stands for definition list.
o Each word to be defined is contained in a <dt> (definition term) tag and the definition paragraphs
are in <dd> (definition description) tags.
Ex: <dl> HTML Hyper Text Markup Language
<dt> HTML </dt> XHTML Extensible Hyper Text Markup
<dd> Hyper Text Markup Language </dd> Language
<dt> XHTML</dt>
<dd> Extensible Hyper Text Markup Language </dd>
</dl>
Note: HTML permits us to omit the closing </dt> and </dd> tags, but XHTML requires them.
Inserting Special characters:

 Special characters are characters that are not included on a Standard English Keyboard.
 The special characters such as © or ™ are referred to as entities, and they are created by using codes
beginning with an ampersand (&), followed by an entity name or an entity number and ending with
the semicolon.
 The entity names and entity numbers both represent the same thing.
 The most common symbols are the ampersand (&), the greater than sign (>), and the less than sign
(<).
 Type these symbols in html code because a browser would interpret them as tags rather than
characters to display.
List of common entities:
Symbol Entity Name

Ampersand (&) & amp;
Less than (<) <
Greater than (>) >
Nonbreaking space
Cent (¢) ¢
Pound (£) £
Yen (¥) ¥
Copyright (©) ©
Registered trademark (®) ®
Trademark(™) ™
Note: The nonbreaking space entity is very popular for creating spaces.
Ex: <p> Copy right © <br/> </p>
Inserting Horizontal lines:

 Horizontal lines can be useful as dividers between sections of text in a web page.
 To add a horizontal line, simply add the following one-sided code. (Ex :< hr/>).
 The closing space and slash or optional in HTML, but required in XHTML.
 We can change the attributes by applying arguments within the tag.
 The attributes of <hr> such as align, color, size and width.
 We can also add the arguments directly to the <hr/> tag by simply including the style=”attributes”
argument.
 The attributes we can set or color, background-color, width and height.
Ex: <hr style =”color: green; background-color: green; height: 3; width: 50% “/>
14
HTML recognizes these 16 basic color names:
Aqua White
Black Yellow
Blue Silver
Fuchsia Red
Green Olive
Lime Gray
Navy Teal
Ex: <hr style =”color: green; background-color: green; height: 3”/>
Choosing background and foreground colors:
 Specifying colors:
The 16 basic colors are the best colors to use on web pages because of their universal acceptance.
One way to specify a color is by its RGB (Red-Green-Blue) values. Every color can be described by using a
series of three numbers from 0 to 255, to represent the amount of red, green and blue that makes up the
color. Ex: pure red is 255, 0, 0 and shade of orange is 255, 153, and 0.
Color values can also be expressed in HTML by using a hexadecimal value. The hexadecimal values
represent the RGB values converted to the base-16 numbering system.
Ex: The value 255 converts to FF, the RGB value 255, 255, 0 can also be expressed as the
hexadecimal value #FFFF00.
Dithered  Formed with a cross-hatch pattern of two colors blended together.
Web-safe color  it is one that exactly matches one of the colors in a standard 8-bit display. It uses
only the following numeric value for red, green and blue: 0, 51, 102,153, 204 and 255.
Another way to express color values is with extended names.
 Applying a background color:

To specify a background color for an entire page, put the style = “background-color: color”
argument into the opening <body> tag.
Ex: <body style = “background-color: #ffff00”>
<body style = “background-color: 255, 255, 0”>
 Applying a foreground color:

The foreground color is the default text color for the page. We can set the foreground color with the
style = “color: color” argument. It can be combined with the argument for the background color in a single
style = statement.
Ex: <body style = “background-color: navy; color: yellow”>
When we combine two arguments in a single style = statement, we separate them with a semicolon.
Note: The deprecated way of applying background and foreground colors in the body tag is <body bgcolor =
“color” color = “color”>
 Specifying a background image file:
 A background image appears behind the text on a page.
 By default, the image is tiled to fill the page, and scrolls with the page.
 Choose images that are designed to be tiled, so each copy blends smoothly into the next, when the
images edges blend well, it will look like a single large image.
 Use subtle patterns that don’t distract from the text.
 The background color is especially important if we use a dark background image and light
foreground color, because if the image does not appear, the text still must be on a dark background to
be readable.
 To use a background image file, use a style = “background-image: image” argument in the opening
<body> tag.
Ex: <body style = “background-image: URL (grass.gif)”>
15
The <body> tag can hold many style specifications in a single style = argument. Separate them with
semicolons.
Ex: <body style = “background-image: URL (grass.gif); color: green; background-color: beige”>
By default, the background image is repeated both horizontally and vertically to fill the window. You
can force it not to repeat by adding the background-repeat = argument to the <body> tag and specifying
repeat-x, repeat-y or no-repeat.
Ex: <body style = “background-image: URL (grass.gif); background-color: green; background-repeat:
beige”>
By default, the background images scrolls with the text when the user scrolls down the page. To
force the image to stay fixed, add the background-attachment = fixed argument to the <body> tag;
Ex: <body style = “background-image: URL (grass.gif); background-color: green; background-
attachment: fixed”>
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.
What is meant by 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
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>
16
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.
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>
 Points To Remember:
 Links:
Ordinary link: <a href="http://www.example.com/">Link-text goes

here</a>
Image-link: <a href="http://www.example.com/"><img src="URL"
alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
17
 A named anchor:
<a name="tips">Tips Section</a>

<a href="#tips">Jump to the Tips Section</a>
6. INTRODUCTION TO STYLE SHEETS

A CSS is code that specifies formatting based on styles. This code can be placed in a separate file
with a .CSS extension in the <head> section of an individual page.
Understanding styles:
A style is a formatting rule. That rule can be applied to an individual tag, to all instances of a certain
tag within a document or to all instances of a certain tag across a group of documents.
To use a square bullet character in an unordered list use the style = argument with the <ul> tag like
this: <ul style = “list-style-type: square”>
We can create a <style> section within the <head> section that creates a global style rule for all <ul>
tags in the document. The <style> section might look like this:
<style type = “text/css”>

ul {
List-style-type: square
}
</style>
This code could also be written like this:

<style type = “text/css”> ul {list-style-type: square} </style>
We can define multiple rules within one <style> section.
Ex: <style type = “text/css”>
ul {
list-style-type: square
}
ol {
list-style-type: lower-alpha
}
</style>
We can create an external cascading style sheet, and then refer to that style sheet in the <head>
section of each document to which it should apply.
ul {
list-style-type: square
}
ol {
list-style-type: lower-alpha
}
Constructing style rules:
An embedded style sheet consists of a two-sided <style> tag placed in the <head> section of a
document. A style rule begins with the name of the tag or other element to which the style applies.
Ex: <style> h1 </style>
To create a rule that makes the text of a first-level heading red:
Ex: <style> h1
{
color : red
}
</style>
18
If we have more than one rule to apply such as a color plus a typeface, separate the rules with
semicolons within the curly braces.
To specify that the heading text must be both red and 14 pixels in height.
Ex: <style> h1
{
color : red;
font-size :14px;
}
</style>
If all heading styles <h1> through <h6> should be red:
Ex: <style> h1, h2, h3, h4, h5, h6
{
color : red;
font-size :14px;
} </style>
Creating styles for nested tags:
Instead of using a single style name at the beginning of the rule, specify that the item is nested by
listing the parent style name followed by the descendent style name to use round bullets for all bulleted lists
that are nested within numbered lists:
Ex: ol ul { list-style-type : circle }
Multiple nested levels are
Ex: ol ul ul { list-style-type : circle }
To make all the bold text that appear in blue.
Ex: ul b { color : blue }
Creating classes and IDs for applying styles:
Style rules can modify the built-in tags in HTML by redefining their formatting. We can make our
own styles by creating classes and IDs.
Classes and IDs mark certain elements we can refer to them in our style sheet. A class can be
applied to multiple selections, whereas an ID uniquely identifies a specific selection within a document.
Ex: An unordered list of products with red color is style = “color:red”
<li style = “color:red”> Fruits </li>
To create a class, add a class = argument to the opening tag for the element.
<li class = “new”> Fruits </li>
The only differences between defining a class and redefining a standard tag are to put a period in
front of a class name:
Ex: <style>
,new {
color : red
}
</style>
IDs can be only once per document. To create an ID, add an id = argument to the tag, like this
<li id = “special”> Fruits </li>
Then define the ID in the <style> area, preceding the ID name with a hash symbol (#) like this:
Ex: <style>
#special {
color : red
}
</style>
WHAT IS MEANT BY PSEUDO CLASS?
19
Applying styles to hyperlinks:
By default in most browsers, textual hyperlinks appear as underlined blue text and visited hyper links
appear as underlined purple text.
Hyperlink formatting can be controlled by placing arguments in the <a>tag for each link
<a href=”ex.htm” style= “color: magenta”> </a>
To apply different colors use pseudo classes. A pseudo class is a class that uses a variable to
determine membership. HTML defines pseudo classes called link and visited, for unvisited and visited
hyperlinks. It makes all visited links magenta and all unvisited links black.
Ex: <Style>
a: link { color: black }
a: visited { color: magenta }
</style>
There are 3 additional pseudo-classes
 Focus: Used for links that are selected by using the keyboard.
 Hover: Used for links that the mouse is positioned over.
 Active: Used for links when it is clicked. A link can be in more that one state at once.
Creating and linking to external style sheets:
 Embedded style sheets work well for single page web sites, but to really take advantages of what
cascading style sheets can do, you need to make an external style sheet.
 A single external style sheet can be linked to multiple documents, ensuring complete consistency even
in a large site.
 An external style sheet also makes it easy to change the formatting of out site after the pages have
been constructed.
 An externals style sheets is a plain text file, just like an html file.
 The only difference is that we assign it as .css rather that an .htm extension.
 It contains anything we would place within the <style> tag if we were creating the style sheet
internally.
 After creating the style sheet, we create a link to it in the <head> area of each document that will use
it.
Ex: If the style sheet is named default .css we would link to it by inserting this code in the
documents <head> area:
<link rel=”stylesheet” type=”text/css href = ”default.css”/>
 An embedded style sheet takes precedence over an external one.

 Any tag-specifies styles we apply take precedence over both embedded and external style sheets.
UNIT –I COMPLETED
20
UNIT- II
GRAPHICS
INTRODUCTION
 Web pages are more interesting and attractive when they include graphics.
 In HTML, each graphics displayed on a web page is stored in a separate file, which must be stored
on the web server.
 The term graphics is more popular in everyday usage.
1.SELECTING A GRAPHICS FORMAT:

 are dozens of graphics formats, but most web browsers can display only a few of them: GIF, JPG and
PNG. Older browsers can display only GIF and JPG.
 Graphics formats differ from each other in the following ways:
Color Depth:
 The more bits used to uniquely describe the color of each pixel. Color depth is not a major issue for
drawings.
 Full color is 24 bit, if a graphics has more bits than that, the extra bits are used to further define the
color and / or to set special image attributes, such as transparency.
Compression / File size:
 Graphics files tend to be a large, so there are compression schemes that decrease their file size.
 Lossless compression makes a file smaller with out losing any images quality, lossy compression
shrinks a file at the expense of some quality.
Animation:
 Some graphics formats support, a very primitive kind of animation, in which several versions of a
graphics are stored in a single file and the web page displaying those cycles through the images.
 Simple animations displayed on a web page are usually animated graphics rather than video clips.
Transparency:
 Some graphics formats can make an image background appear transparent so that when we place the
image in a document with text, the text wraps around the image.
 Different graphics formats have different color depths and compression types.
 To convert a graphic to different format, open it in any graphics program that saves in multiple
formats, and then save it in a different format.
Difference between the major web-supported graphics formats:
Name Color Depth Compression Animation Transparency
Graphics Interchange 8 bit

Lossless Yes Yes
Format (GIF) (256 Colors)
Joint Photographic 24 bit
Expert Groups (1.6 million Lossy No No
(JPEG, JPG) colors)
Portable Network
24 bit or 48 bit Lossless Yes Yes
Graphics(PNG)
2.PREPARING GRAPHICS FOR WEB USE
21
To decide the image size, first we should know ‘how many pixels should a graphics comprise it’.
This is called the resolution, and it is expressed in width and height.
Ex: An image that is 800*600 is 800 pixel wide and 600 pixels tall. A graphics file sizes - how
many bytes the file will take up on disk- have a direct relationship to its resolution.
There are two ways of controlling the size of a graphic on a web page.
(i) Use a graphics-editing program to resize it before inserting it.
(ii) Use arguments within the HTML code to specify the height and width at which the graphic is
shown.
Another consideration for graphics preparation is the color palette.
3.INSERTING GRAPHICS
 Inserting a graphic on a web page is as simple as placing an <img/> where we want the graphic to
appear.
Ex: <img src=”snooze.gif”/>
 It is a one sided tag, no needs to be closed with a space and slash (/) at the end in XHTML. If we want
to store our graphics in a sub folder of the folder containing the text files we must refer to the graphic
with the sub folder name, like this
Ex :<img src=”images/snooze.gif”/>
 To refer to a file that is up one level in the folder structure use two periods and a forwarded slash (…/)
Ex : <img src=”…/.../snooze.gif”/>
 To refer to an image that is stored somewhere else perhaps on our company’s main web server or at a
partners server use the computer absolute path to the file.
Ex: <img src=” http://i2.microsoft.com/h/all/snooze.jpg”/>
 To force the image to the left or right side of the screen and wrap surrounding text around the image,
apply a float style rule that uses a left or right argument.
Ex: <img src=”snooze.gif” style=”float: left”/>
Ex:
1. Immediately after the opening < body> tag, add the
following
<img src=”snooze.gif”/>
2. Save the file and refresh Internet Explorer
3. Modify the code to float the image to the left.
<img src=”snooze.gif” style=”float:left”/>
4. Save the file and refresh Internet Explorer
4.ARRANGING ELEMENTS ON THE PAGE

To move down text vertically until the space occupied by the
graphic becomes “clear”, use the clear style rule. To apply this rule to the
text’s tag, not to the graphic’s tag.
Ex: <h2 style=”clear : left”> Recent Articles </h2>
Steps:
 Examine the document in Internet Explorer. Notice the placement of the text in relation to the
graphic.
22
 In notepad add a clear style rule to the <hr/> tag near the top:
<hr style=”clear : left”/>
 Save the file and refresh Internet Explorer.
5.CONTROLLING IMAGE SIZE AND PADDING

 Image size is expressed in pixels. The user can specify only the width, and the height will be
resized proportionally or vice versa. To specify the width and height
Ex: <img src=”book.gif” style=”float:left” height=100 width= 300/>
ORIGINAL SIZE HEIGHT = 200
Width = 300
 The padding argument controls the space around content on the inside of the element.
 The main argument controls the space surrounding the element.
Ex: <img src=”book.gif” style=”float:left”; margin-right:10px” height=”200” width=”300”/>
Steps:
 In notepad edit the <img> tag for the graphic so that the image is exactly 70 pixels in height.
<img src=”book.gif” style=”float: left” height=”70” />
<html>
<body>
<title> welcome </title>
<img src="book.gif" style= "float: left" height="70">
<h2> AIR-VOICE COMPANY </h2>
<hr style=”clear : left”/>
<h3> Connecting Peoples </h3>
<h6>Image size is expressed in pixels.
The user can specify only the width, and the height will
be resized proportionally or vice versa. </h6>
23
</body>
</html>

 Add a margin of 5 pixels to the image

<img src=”book.gif” style=”float: left ; margin: 15px” height=”70” />
 Save the file and refresh Internet Explorer.
 Open the file in notepad and in Internet Explorer

 Edit the <img> tag, so that the image is 350 pixels in width and has 15 pixels of padding
<img src=”book.gif” style=”float: left ; padding =15px” width=”350” />
 Edit the <img> tag. So that the image floats to the right.
<img src=”book.gif” style=”float: left”; padding =15px” width=”350” />
UNIT –II COMPLETED

24
UNIT III
1. HYPER LINKING FROM GRAPHICS
 To create text hyper linking by using the <a> tag place the hyperlink text between the <a> and </a>
tags.
 Create a graphical hyper linking in much the same way by placing an <img> tag in an <a> tag.
Ex:
<a href = “www.MASCcollege.com” title=”college”>
<img src=”maingate.jpg” style=”float:left; margin:5px”/>
</a>
 The graphic appears as usual in the document, but when the user moves the mouse pointer over it,
the pointer changes to hand to indicate that the graphic is a hyperlink.
 By default, hyperlinked graphics have a border that is the same color as hyperlinked text.
 We can remove the border by adding border: none to the style rule for the graphic, like this,
Ex:
<a href = “MASC.htm” title=”home page”>
<img src=”maingate.jpg” style=”float:left; margin:5px; border:none”/>
</a>
2. UTILIZE THUMBNAIL GRAPHICS

 High resolution graphics can make a page load slowly.
 A compromise is to include thumbnail images, which are low-resolution copies of the
images that are linked to the larger, high resolution versions.
 Some web development programs, such as MS-FrontPage, create thumbnail images,
automatically when you set up a photo album page.
 To create a thumbnail, we need small versions of each of the graphics.
 Then place the thumbnail images on the page, and create hyperlinks to the layer files.
 Set each of the larger files to open in its own window by using the target =” _blank”
argument.
Ex:
<a href=”tree.jpg” target=”blank”>
<img src=”maingate.jpg”> </a>
INCLUDING ALTERNATE TEXT FOR GRAPHICS NAVIGATION
Placing an alt argument in an <img> tag creates alternate text for the graphics. This alternate text is a
pop-up box that contains a text explanation of the graphics, much like the title does for a hyperlink.
Just place an alt=”text” argument in the <img> tag like this
<img "picture.gif" alt="picture of a bridge" >
Steps:
1. <img src=”apple.png” style=”float:right; padding : 15px”, width=”350” alt=”Apples on tree”>
2. Save the file and refresh IE.
3. Move the mouse pointer over the picture
4. The alternate text appears.
3. CREATING NAVIGATIONAL AIDS
Navigational bar.
One way to make our web site easily accessible is to place a consistent navigation bar on each page.
A navigational bar is a set of hyperlinks that connect to the major pages of the web site.
25
These hyperlinks can be either text-based or graphical.
Planning your site’s organization:
a. Navigation bars can be easy to create, but they require some planning to be effective. A navigation bar
should contain links to the most important sections of the web site, plus a link to the home page.
b. The navigation bar should not contain hyperlinks to every page in the site unless the site is extremely
small and simple.
c. Before building the navigation bar, create an organization chart outlining the sites planning structure.
Note:
 Some web sites have navigation bars in which each hyperlink opens a menu of options when the user
points to or clicks on it.
 We cannot create that with plain HTML, it is constructed with JS or another web-based programming
language.
Creating A Text-Based Navigation Bar

A text-based navigation bar is the simplest and easiest, and it is also very user-friendly. On simple
web pages, text-based navigation bars are usually placed at the top of the page, in a single horizontal line.
Some web designers also place a copy at the bottom of each page too, so the visitor does not have to scroll
back up to the top of a page to access the links. Tip When a navigation bar is placed at the bottom of a
page, it is customarily a text-based bar rather than a graphical one.
Steps:
 Immediately after the first <hr/> tag, Type the code given below.
 Insert a nonbreaking space between each section title, like this:
 To help set off the navigation bar from the rest of the text, insert a horizontal like below the
navigation bar.
 Set the margin for the paragraph to zero.
 Add hyperlinks to each of the six items in the navigation bar to the corresponding pages.
 Save the file and refresh IE.
Ex:
<HTML>
<BODY>
<hr/> <p style=”margin:0px”>
<a href =”home.htm”> Home </a>
<a href =”tips.htm”> Tips and Tricks </a>
<a href =”problem.htm”> Problem solving </a>
<a href =”product.htm”> Product </a>
<a href =”contact.htm”> Contact Us</a> </P><hr/>
</HTML>
Output:
26
Creating a graphical navigation bar:
 Text hyperlinks are clear and unambiguous, but not all that attractive.
 Prefer to create a navigation bar that uses buttons or other graphics instead of text links.
 We can create the graphics in a graphics-edition program.
Guidelines:
 Keep the size of each button small. (150 pixels wide at the most).
 Make each button the same size and shape. They should vary only in the text on them.
 Save each button as a separate file in GIF or JPG format.
There are thousands of sites with free graphical buttons where we can download. Make several
copies of a button, and then use a text tool in a graphics-editing program to place different text on each copy.
Some web sites that offer free buttons are:
 www.aaa-button.com
 www.eosdev.com/eosdev-words.htm
Most professional web site designers do not create their own buttons. Instead they use button-
creating programs to generate them. Such programs make it very easy to create groups of identical buttons
with different text on each one.
Set up a graphical navigation bar just like a text-based navigation bar, but hyperlink from a graphic
by placing the <img> tag within the <a> tag, like this:
<a href =”click.html”> <img src =”click_button.gif”> </a>
Steps:
1. In notepad, in the upper navigation bar, change hyperlinks to reference the button graphics in the
images folder rather than displaying text.
<hr/>
<p style="margin:0px">
<a href ="home. htm"> <img src ="Home.gif" style ="border:none"> </a>
<a href ="books.htm"><img src ="books.gif" style ="border:none"> </a>
<a href ="music.htm"> <img src ="music.gif" style ="border:none"> </a>
<a href ="cdrom.htm"> <img src ="cdrom.gif" style ="border:none"> </a>
<hr/>
Output:
Image Map
 To make different areas of the image to hyperlink to different locations use an image map.
 An image map is an overlay for a graphic that assigns hyperlinks to certain defined areas (hotspots)
on the image.
 The hotspots can be rectangular, circular or irregularly shaped (called a poly hotspot).
 A rectangular hotspots position is defined by two points.
 its upper-left and lower-right corners.
 Each point is expressed as a pair of numbers that represent the horizontal and vertical distance in
pixels, from the upper-left corner of the image.
 The code for defining this particular hotspot is:
<area shape = “rect” coords= “280,180,252,214” href =”enter.html” />
To define a circular hotspot, we use three coordinates: two for the circles center point (horizontal and
vertical values) and one for the radius of the circle.
27
<area shape = “circle” coords= “280,180,252” href =”index.html” />
To define a poly hotspot, use as many coordinates as are needed to define all the vertexes of the
shape. Poly hotspots consist of straight lines that connect each of the points we define.
<area shape = “poly” coords= “280,71,413,286,314,446,188,267” href =”enter.html” />
 The easiest way to determine the coordinates of various points is to open the image in a graphics-
editing program that displays the mouse pointer position in the status bar.
 Move the mouse pointer over any spot on the image, and the program will display its coordinates.
 To construct an image map, start with a two-sided <map> tag. In it, place name and id arguments.
 The name and ID can be the same; name is needed for the map itself, and ID can be used to refer to the
image map in the style sheet, if desired.
<map name =”entrance” id =”entrance”> </map>
 Then within the <map> tag, insert the lines for the areas:
<map name =”entrance” id =”entrance”>
<area shape = “poly” coords= “280,71,413,286,314,446,188,267” href =”enter.html” />
</map>
 We can also include title argument for an area to make a ScreenTip appear when the user points at it.
<area shape=“poly” coords=“280,71,413,286,314,446,188,267” href=”enter.html”
title=”home page” />
 Finally, reference the map’s name in the <img> tag for the image with the usemap argument. Just
include a pound or hash sign (#) before the map name.
<img src =”entrance.jpg” usemap=”#entrance” style =”border:none”/>
Note:
Even though ScreenTips simply display the text that the user is clicking, they are still useful because
they spotlight the fact that the text is clickable.
Redirect The Url From One Location To Other
 Sometimes the web site is restructured by its organization by renaming some pages, placing pages in
folders, or hosting the site at a different location with a different URL.
 When we remove the old content entirely, and they won’t have any way of finding the page in its new
location Page not found message will be displayed.
 To help the past visitors to find the new page, we can leave the old page in place and replace its text with
a hyperlink that tells the visitors about where the new page is located.
 To create a hyperlink is to set up the old page to actually redirect to the new page.
 In other words we can make the old page automatically display the new page.
 It is customary for a redirection to include five seconds of delay, so the user can cancel the redirect
operation if desired.
 It is also customary to include a text hyperlink to the new page.
 A redirect operation is an argument in the <meta> tag, which is in the <head> section of the page.
 We must create a new <meta> tag for this operation, we cannot add the arguments to any existing
<meta> tag that the document might have.
Exe:
To redirect to the page support.microsoft.com after a five-second delay:
<meta http-equiv = “refersh” content=”5”; url=http://support.microsoft.com”/>
Steps:
1. In the <head> section, add a new <meta> tag as follows:
<meta http-equiv =”refresh” content =”5; url=newfile.htm” />
2. In the <body> section, make the text click here into a hyperlink to newfile.htm
<p> This page has been moved from old location to the following location. <br>
If your browser supports automatic redirection, the new page will appear in 5 seconds <br>
If the new page does not appear, <a href =”newfile.htm”> click here </a> </p>
4. Click the browsers Back button, and then quickly click the Click here hyperlink to test it.
28
4.CREATING TABLES
Table:
 A table is a grid of rows and columns, the intersections of which form cells.
 Each cell is a distinct area; into you can place text, graphics or other tables.
Creating a simple table:
The <table> tag creates an HTML table. Within that tag, include one or more <tr> tags, which
define the table’s row and within each <tr> tag define one or more <td> tags, which define the cells.
Ex:
<TABLE><TR><TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD></TR>
<TR>
<TD>Orange</TD> <TD>Yellow</TD> <TD>Purple</TD>
</TR> </TABLE>
<TABLE BORDER="1">
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>
Specifying The Size Of A Table

A table size itself to accommodate all its cells and each cell’s height and width changes to
accommodate the largest entry in that row or column. One way to add extra spacing in this instance would
be to set the overall size of the table to 100 percent. This forces the table to expand horizontally to fill the
available space in the browser window.
<table width=100%>
or
<table style=”width:100%”>
To apply the width specification to all tables, place it in a style sheet:
Table {width: 100%}
In smaller window, it become just as cramped as before, and the text wraps to multiple lines. In
larger window, the extra space between the columns becomes exaggerated. An alternate method is to specify
a number of pixels for the table’s width.
<table width=”750px”>
When displayed in a larger window the extra space appears to the right of the table. To specify the
height <table height=”400px”>. To specify height in a style Table (height: 400 px)
Ex:1
29
<TABLE BORDER="1"
width=100% height=100px>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>
Ex:2
<TABLE BORDER="1"
width=50% height=100px>
<TD>Red</TD>
<TD>Green</TD>
<TD>Blue</TD>
</TR>
<TR>
<TD>Orange</TD>
<TD>Yellow</TD>
<TD>Purple</TD>
</TR>
</TABLE>
Specifying The Width Of A Column

To set the width of each column separately. To set the width of a column to a certain minimum
amount, specify a width in the <td> tag for any cell within that column.
<td width=”200 px”>
To specify the width of a column through a style sheet:
<td style=”width: 200px”>
To use fixed amounts percentages to specify the column width.
Ex:
<table border=”1”>
<tr>
<td width=”100px”> & nbsp; </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Output:
30
Ex:
<tr>
<td width=”100px”> </td>
</tr>
<tr>
<td> Welcome to MASC college
</td>
<td> </td>
<td> </td>
</tr>
</table>
If the browser window been smaller the column would have expanded as much as it could, and then
wrapped the text to a send line if needed.
MERGING TABLE CELLS

Every cell in given row must be the same height, and every cell in a given column must be the same
width. To merge two or more adjacent cells so that one cell spans multiple rows and /or column
Title of the table

Cell1 Cell2 Cell3
Cell4 Cell5 Cell6
To merge a cell into adjacent cells to its right, use the col span argument and specify the number of
columns to be spanned like this:
<td colspan=”3”>
<td rowspan=”2”>
Ex:
<table>
<tr>
<td colspan=”2” rowspan=”2”> survey results </td>
<td colspan=”3” > Age </td>
</tr>
<tr>
<td> 12 to 25 </td>
<td> 26 to 40 </td>
<td> over 40 </t>
</tr>
<tr>
<td rowspan=”3”> What is your dream vacation destination?” </td>
<td> Disney World </td>
<td> 25% </td>
<td> 50% </td>
<td> 25% </t>
</tr>
<tr>
<td> Las vegas </td>
<td> 25% </td>
<td> 50% </td>
<td> 25% </t>
</tr>
31
<tr>
<td> Europe </td>
<td> 25% </td>
<td> 50% </td>
<td> 25% </t>
</tr>
</table>
Output:
Age
Survey Results 12 to 25 26 to 40 Over 40
“What is your dream vacation Disneyworld 75% 10% 15%
destination?” Lag Vegas 10% 50% 40%
Europe 15% 40% 45%
Using tables for page layout:

A web page to have a navigation bar at the top or on the left side. It is fairly easy to create a
horizontal navigation bar with regular paragraphs.
The easiest way to accomplish that is with a table. Place your navigation hyperlinks in the column
farthest to the left and place the body of your content in the other columns. The table cells act as containers
into which you can put anything paragraphs, lists, headings, graphics and so on.
5. FORMATTING TABLES
By default a table is just a plain container- no border, no shading, no text formatting. The user to add
all those things if you want them.
TABLE BORDERS?
Tables created by using the default settings are pretty plain and it can be difficult to distinguish
where one cell ends and the net one begins.
Applying Borders by using arguments:
By default, a table has no border. To add a one pixel border around both the tables as a whole and
around each individual cell, add this argument to the <table> tag:
This method is not as flexible as using a style, but it’s quick and easy. Increasing the value of the
border argument to a value greater than 1 increases the outer border but not the inner borders. The default
border style uses two shaded of gray for the outer border, producing a raised effect.
border=”0” border=”1” border=”5”
The border argument will change the color of the table’s border.
<table border=”10” bordercolor=”red”>
In IE, it changes all four sides of the border to the specified color.
32
In Netscape, this argument applies the specifies color to an overlay of the red shading, producing a
raised effect with a tint of the color.
To get the shaded effect in IE while specifying a color, you must use the bordercolorlight and
bordercolordark arguments.
<table border=”10” bordercolor=”red” bordercolorlight=”lightcoral” bordercolordark=”darkred”>
Output:
The border argument applies a border to all sides of all cells. If you don’t want the border on some of
the sides, you can either use styles for the formatting or you can use the frame and/or rules arguments.
The frame argument specifies which sides of the outer frame of the table will display the border. The
valid values are:
 Above – Top border only

 Below – Bottom border only
 Border – all four sides
 Box – all four sides
 Hsides- top and bottom only
 Vsides- left and right only
 Lhs- left side only
 Rhs- right side only
 Void – no outer border.
The rules argument does the same thing for the inner lines of the table. The valid values are
 All – all inner lines
 Cols- only vertical inner lines
 Rows- only horizontal inner lines
 None- no inner lines
 Groups – lines around defined groups, if any.
Ex:
<table border=”1” frame=”vsides” rules=”cols”>
Remove the table border:

Remove the table border by specifying border=”0”:
33
<body>
<table border=”0” width=”100 %”>
<tr>
<td bgcolor=”#cccccc”>links</td>
<td>content</td>
</tr>
</table>
</body>
Applying Borers By Using Cascading Style Sheets
To apply borders by using css. This method delivers maximum flexibility and consistency.
 The border- width attributes controls the thickness of the border. Specify a value in pixels.
 The border- color attributes controls the color of the border. Specify a color by name, hexadecimal
number or RGB value.
 The border-style attribute controls the line style. Choose among solid, dotted, dashed, double, groove,
ridge, inset, outset or none.
 To set all 3 attributes at once, use the border attribute and then place the settings after it in this order:
width, color, style.
 The format the border sides individually replace the border attributes with the border-top, border-
bottom, border-left or border-right attribute.
These attributes can be applied either to the entire table or to individual cells.
Ex:
The code applies a block dotted border around the outside of a table and applies a silver grooved border
around one specific cell.
<table style=”border-style:dotted; border-color:black”>

<tr>
<td style=”border-style”groove; border-color:silver”>
cell1</td>
<td>cell2 </td>
</tr>
<tr>
<td> cell3 </td>
<td> cell4 </td>
</tr>
</table>
To format all tables or all cells the same way, define the attributes in an embedded style sheet like this:
34
<style>
table { border-style : dotted; border-color:black }
td { border-style:groove; border-color: silver}
</style>
You can override the style rule with a style argument placed specifically within an individual tag.
<table>
This code produces a result
<tr>
<td style=”border-style:none”> cell1</td>
<td> cell2 </td> Cell 2
</tr> Cell 1
<tr>
<td> cell3</td> Cell 3 Cell 4
<td> cell4</td>
</tr>
</table>
Applying Background And Foreground Fills

Each table, row and cell is its own distinct area and each can have its own background.
<tr style=”background-color:orange”>
The table background can also be picture, just like a document background. Apply the background image
argument to any portion of a table. <table style=”background-image: url (leaf.gif)>
If the image is smaller that the dotted space, it will be tiled, just like when applied to a page background.
Discuss about changing cell padding, spacing and alignment

Cell padding, cell spacing and cell alignment are 3 ways of controlling how cell content appears on a page.
 Padding refers to the amount of space between an element’s content and its outer edge. For a table
cell, padding refers to space between the cell border and the text or graphics within it.
Cell padding
CELL 1 CELL 2 CELL 3
35
 Spacing refers to the amount of space between the outside of an element and the adjacent element for a
table; cell spacing refers to the space between the border of one cell and the border of the adjacent
cell.
Cell spacing
 Alignment refers to the placement of the content with in its allotted area, either vertically or
horizontally. For normal paragraphs alignment between the margins. For a table cell however, there are
separate settings for vertical and horizontal alignment.
Top left Top center Top right
Middle left Middle center Middle right
Bottom left Bottom center Bottom Right
Setting cell padding:

To set the padding for the entire table, use the cell padding argument in the <table> tag.
<table cell padding =”4px”>
To set the padding for an individual cell, use the padding argument in a style <td style=”padding: 4px”>
To set the padding for an individual cell in a style sheet: Td {padding: 4px}
Setting cell spacing:

The default table border looks like a double line, but this effect is just a combination of the border
around that table as a whole and the border around each cell. The double effect is created by the spacing
between the cells.
<table cell padding=”10px” cell spacing=”0px>
Setting Horizontal & vertical alignment:
A cell’s content has two alignments: vertical (top, middle or bottom) and horizontal (left, center,
right or justify). To set alignment with arguments use the align argument to specify the horizontal alignment
and the valign argument to specify the vertical alignment.
<td align=”center” valign=”middle”>
<td style=”text-align: center: vertical-align=middle”>
36
Applying Column Based Formatting
Column groups are handy for applying formatting to entire columns. The <colgroup> tag can be used
as either a one-sided tag, you can specify styles that will be applied to the current column and continue for a
specified number of columns.
Ex:
To apply a yellow background to the first column, create a column group immediately following the
opening <table> tag:
<colgroup span=”1” style=”background-color: yellow”>
To increase the span value to apply the same formatting to more than one column.
<colgroup span=”2” style=”background-color: yellow”>
---
</colgroup>
Ex:
Suppose a table has six columns and you want to make the fourth and fifth columns yellow and the
sixth columns orange.
<colgroup span=”3”>
<colgroup span=”2” style=”background-color:yellow”>
<colgroup span=”1” style=”background-color:orange”>
Ex:
A five column table, you want to first three columns to be bold, and only the second column to be
italicized.
<colgroup span=”3” style=”font-style:bold”>
<col/>
<col style=”font-style:italic”/>
<colgroup>
UNIT –III COMPLETED
37
UNIT IV
LAYOUTS
1. CREATING DIVISION-BASED LAYOUT
Division based layout:

A division-based layout defines the area of a page by using <div> tags and then applies formatting to
each area by using styles. One big advantages of division based layout is that we can place the styles in an
external style sheet and then make style changes to many pages at once simply by modifying the style sheet.
Creating divisions:
In an effective division based layout each part of the page that we will format separately should be a
division. Then place each area in a two-sided <div> tag. After a section is made into a division it can be
formatted separately from the rest of the page. Each division can be individually named and referenced in a
style sheet. Use the id argument to name a division.
Ex: <div id = “masthead”>
Each id must be unique within the document, but multiple documents can use the same division names.
Ex:
 Enclose the logo, company name and tag line in a <div> tag and name it masthead.
 Enclose the top navigation bar in a <div> tag and name it topnav.
 Enclose the body paragraphs in a <div> tag and name it main.
 Enclose the bottom navigation bar in a <div> tag and name it bottomnav.
 Enclose the copyright notice in a <div> tag and name it copy.
 Save the file.
Positioning divisions:
There are two ways of positioning a division
1. Float style rule.
2. Position style rule.
Floating a division to the right or left:

The easiest way to place one division beside another is to use the float style rule.
<div id = “topnav” style=”width: 150 px, float: left”>
The main advantage of using divisions is consistency across documents to setup the style rule in an
external style sheet rather than in the individual division tag. The names of the unique elements such as
divisions with a pound sign (#).
# topnav { width:150 px; float: left}
Positioning a division on the page:

Use the position style rule there are three possible values,
i. Position: absolute  This value specifies a fixed position with respect to the parent element. This is a
fixed position in relation to the top of the page.
ii. Position: relative  This value specifies an offset from the natural position of the element.
iii. Position: fixed  This value specifies a fixed position within the browser window, when the display is
scrolled up or down. IE does not support this setting.
Each of these values must be used in conjunction with a top, right, bottom and /or left style rule
that specifies the location to which the position rule refers.
Ex:
# main { position : absolute; top:100px; left:200px}
Steps:
1. In IE view the index file and note the position of the top navigation bar.
2. In notepad add the following style rule.
# topnav { float: left; width:150px; padding-top: 15px}
3. Save the file and refresh the IE. The navigation bar appears at the left side on the page.
4. Add a style rule that limits the width of the main division to 400 pixels.
# main { width: 400px}
38
5. Save the file and refresh the IE.
6. Position the top of the main division 103 pixels from the top of the page.
# main { width:400px; position: absolute; top: 103px}
7. Save the file and refresh IE .
8. Position the upper left corner of the copy division 103 pixels from the top and 500 pixels from
the left side of the page.
# Copy {position: absolute; top: 103 PX; left: 500 PX}
10. Modifying the style rule for the copy division so that the horizontal position is 580 pixels from
the left.
# copy { position: absolute; top:103px; left:580 px}
12. Open the file index file. If you don’t have either of these browsers installed, skip this step. The
main division overlaps the navigation bar.
13. In the default style sheet, add a left position setting to the main division:
# main { width : 400 px; position : absolute; top:103 px; left: 150 px}
14. Save the file and view it in IE
Formatting Divisions:
To set the background formatting for cells in a table-based layout, we can do the same thing with
divisions.
Ex: #topnav {float: left; width: 150 px; padding-top: 15px; background-color: yellow}
The size and positioning issues can be fixed easily enough by modifying the styles.
Ex: #topnav {float: left; width: 100px; padding-top: yellow}
2. CREATING USER FORMS

Create Forms
HTML is used to create user input forms that can send their results to email messages or the data can
be stored in a file on our server.
Creating a basic form:
A form can be placed anywhere in the body of an HTML document. A form is closed in a two-sided
<Form> tag.
<form method=”post”>
…
</form>
The method argument specifies what will happen when the form is submitted almost all forms use
method=”post” meaning that the data users enter into the form will be collected and either delivered or
stored.
Within the opening <form> tag, specify an action argument. This is typically an e-mail address to
which to send information or a CGI script to run.
<form action=mailto: Edward @contoso.com enctype=”text/plain”>
The enctype argument specifies how the results will be formatted. An encoding type of text/plain is
necessary when sending results by using e-mail to the results readable.
To process a CGI script for the form
<form action =” http://www.contoso.com/feedback.p”>
Tags that create form controls are placed between the openings and closing <form> tags. Form
controls can be text boxes, buttons, check boxes, menus and / or command button. A command button is a
button that executes a function, such as submitting the form or resetting it.
The most basic type of control is a text box. Users can enter data such as names, addresses, phone
numbers and comments into them.
There are 2 types of text-boxes:
(i) Regular text-boxes (single line) (ii)Text areas (Multiline)
A regular text box is created by using a single-sided <input> tag with a type=”text” argument.
<input type=”text”>
Each control within a form must have a unique name, expressed with the name argument.
39
Ex:
<input type=”text” name=”firstname”/>
To specify a width for the text box use size argument. The default is 20 pixels
<input type=”text” name=”email” size=”30”/>
If the specified maximum length is greater than the text box width, the text scrolls horizontally as the user
types.
<input type=”text” name=”email” size=”30” maxlength=”100”/>
A multi line text area is created by using a two sided <text area> tag with a rows argument that
specifies the number of lines that the box should be able to accommodate.
<text area name=”comments” rows=”5” > </text area>
Also include a column argument to specify how many characters wide the text area will be. The
default is 40 characters.
<text area name=”comments” rows=”5” columns=”60”> </text area>
Submit refers to the button’s function, not the text that appears on the button. The default button text
is submitting query; we can use a value argument to put different text on the button.
<input type=”submit” value=”send”>
A reset button on the form, which clears all the fields.
<input type=”reset” value=”clear”/>
Ex: Form
Creating Check Boxes And Option Buttons

Check boxes and option buttons are used to evaluate results. Check boxes are used to evaluate
results. Check boxes are used for single binary questions. A form might contain multiple check boxes, but
each one is a separate decision for the person filling out the form. To create a check box, use the
Type=”checkbox” argument with the <input > tag.
<input type=”checkbox” name=”repair”/>
The result of the form will show a value of on when the check box has been selected. The result is
Repair=on. Change that default by specifying a value argument.
<input type=”checkbox” name=”repair” value=”yes”/>
An option button is part of a group of mutually exclusive options, when we select an option button,
all other option button in the group are cleared.
To create a group of option buttons, choose a name for the group. Use the value argument to specify
the value.
<p><input type=”radio” name=”category” value=”gold” checked=”checked”/> Gold <br/>
<input type=”radio” name=”category” value=”silver” /> Silver <br/>
<input type=”radio” name=”category” value=”bronze” /> Bronze </p>
40
CREATING MENUS
A menu also called a drop-down list it contains as many options as needed.
Color:
To create a menu, start with a two-sided <select tag>. Within it, place each option in its own
<option> tag. Place the text that we want to appear on the menu between the opening and closing <option>
tag.
Ex: <p> color: <select name=”colors” size=”1”>
<Option> red </option>
<Option> Blue </option>
<Option>Green </option>
<Option>Pink</option>
<Option> Black </option> </select> </p>
A menu can be any height; the size argument is set to 1, which increase a drop-down list. If you set
the size argument to a higher value, a list box is created. If there are more items than will fit in the space, a
scroll bar appears at the right side of the box.
<p> color: <select name=”colors” size=”5”>
The result is
If the menu choices fall into categories, you might want to break them up into sections. To format a
menu as show surround the groups of options with an <option group> tag, and include a label argument that
specifies the heading text for each option group.
<p> select your printer model:
<select name=”printer” size=”1”>

<opt group label=”inkjet”>
<Option> Super jet 1400 </option>
<Option> Super jet 1405 </option>
<Option> Super Jet 1405 Plus </option>
</opt group>
<opt group label=”laser”>
<Option> Super laser value edition </option>
<Option> Super laser pro </option>
<Option> Super laser plus </option>
</opt group>
</select> </p>
41
Output:
Sample Form:
Understanding CGI and Other Advanced Tools:

♫ A Common gateway Interface script written in a programming language such as a perl is one common,
low-cost possibility.
♫ One of the draw back of using CGI script is their lack of security.
♫ The collected data is usually stored in a data file on the server that any better-than-average hacker
could access fairly easily.
♫ There are 100s of web site that offer free CGI Scripts.
♫ There are many free and low-cost sources of programming code for a message board both in CGI and
in to her languages.
3. USING FRAMES FOR LAYOUT
Frame And Frameset

Understanding Frames and Frameset:
 A frame is a section of a browser window, in which a web page loads.
 A frameset is a container file that describes how many frames the browser window will be divided
into and what sizes and shapes they will be.
 The main difference between a frame based layout and other layout types is that each frame displays
a different file.
Ex: frame.htm
42
Codings: Output:
<html
<Head>
<Title>Working with frames </title>
<frameset cols ="30 %,*">
<frame src="ebook.htm" >
<frameset rows="*,*,*">
<frame name="first">
<frame name="second">
<frame name="third">
</frameset>
</frameset>
</html>
HTML does not support frames. The opening < frameset> tag contains a number of formatting
options for the frame, including the number of rows and columns, the amount of spacing and the type if
border.
Ebook.htm
<Html>
<Title>E-BOOK</title>
<Body>
<Center><img src="large_book.gif"></center>
<Ul>
<li><a href="poetry1.html" TARGET="first"> DETAILED POETRY</a><br>
<li><a href="npoetry1.html" TARGET="second">NON-DETAILED POETRY</a><br>
<li><a href="drama1.html" TARGET="third">DRAMA</a><br>
</body></html>
Each <frame> tag is a one-sided tag that uses a src argument to specify which file to place within
that frame. Each frame also has a unique name value and it can also contain formatting options. The left
frame displays the content of a file called ebook.htm.
The right frames content comes from a file called ebook.htm, which is also just an ordinary HTML
file.
43
Creating framesets.
To create a frameset, start by determining the number of frames to use and their sizes and positions.
To have more than one column, use the cols argument and include the widths of each column separated by
commas. The column widths can be defined in pixels or percentage or they can be set to a variable by using
an asterisk (*).
<frameset rows=”*, 200”>
To determine the number of frames just do rows & columns. Then create each frame by using the
<frame> tag and include a src argument to specify the HTML file and a name argument that specifies how to
refer to that frame in hyperlinks.
Ex:
<frame src=”menu.htm” name=”left frame”>
To create a frameless alternative create a two-sided <no frames> tag and within it, add a <body> tag.
Within the <body> tag, we can place anything that would ordinarily be placed on a frameless web page
Ex:
<noframes>
<Body>
<p>Welcome to this page </p>
</body>
</noframes>
Please < a href=”noframes.htm”> click here </a> for an alternative version </p> </body>
</noframes>. In a browser that supports frames the nested <body> tag is ignored because it is within the
< noframes> tag. In a browser that does not support frames, the <noframes> tag is ignored and the browser
processes the <body> tag and its contents.
Creating More Complex Layouts

A single frameset can have any number of rows and columns, but they must be in a regular
rectangular grid. We must embed one frameset within another.
Example:
<frameset rows = “75,*”>
<frameset src = “yellow.htm” name = “topframe”>
<frameset cols = “136,*”>
<frame src =”blue.htm” name = “left”>
<frame src = “white.htm” name = “main”>
</frameset>
</frameset>
The most common frame layouts are:
Example Layout type Code

<frameset rows = “*,100” cols = “*”>
Nested left, <frame src =”filename” name = “leftframe”>
Fixed Bottom <frame src = “filename” name = “mainframe”>
</frameset>
<frame src =”filename” name=”bottomframe”>
</frameset>
44
Nested Right, <frame src =”filename” name = “rightframe”>
Fixed Bottom <frame src = “filename” name = “mainframe”>
</frameset>
</frameset>
<frameset rows = “*” , cols = “100, *”>

<frame src = “filename” name = “leftframe”
Fixed left, <frameset rows = “*,100”>
Nested Bottom <frame src = “filename” name = “mainframe”>
</frameset>
</frameset>
<frameset rows = “*” cols = “100,*”>

<frame src = “filename” name = “leftframe”
Fixed Left, <frameset rows = “*,100”>
Nested Top <frame src = “filename” name = “leftframe”>
<frame src =”filename” name=”mainframe”>
</frameset>
</frameset>
<frameset rows = “*,100” >

<frameset rows = “*,100”>
Fixed Right, <frame src = “filename” name = “mainframe”>
Nested Bottom <frame src =”filename” name=”bottomframe”>
</frameset>
<frame src = “filename” name = “rightframe”
</frameset>
<frameset cols = “*,100” >

<frameset rows = “*,100”>
Fixed Right, <frame src = “filename” name = “topframe”>
Nested Top <frame src =”filename” name=”mainframe”>
</frameset>
<frame src = “filename” name = “mainframe”>
</frameset>

<frame src = “filename” name = “topframe” >
Fixed Top, <frameset cols = “100,*”>
Nested Left <frame src = “filename” name = “leftframe”>
<frame src =”filename” name=”mainframe”>
</frameset>
</frameset>
45
<frame src = “filename” name = “topframe” >
Fixed Top, <frameset cols = “*,100”>
Nested Right <frame src = “filename” name = “mainframe”>
<frame src =”filename” name=”right frame”>
</frameset>
</frameset>
Hyperlink Target Frame
Setting A Hyperlink Target Frame

The hyperlink in a navigation bas must be modified to specify a target. The Target is the frame, as
specified in each frame’s name argument, where the page will load.
<a href = “services.htm” target = “leftframe” > Services </a>
To a place a <base> tag that includes a target argument in the <head > section, like
<base target = “leftframe”>
The target argument accepts either the name or one of the built-in frame/ window reference in HTML.
1. The target = “- blank”  argument opens the hyperlink in a new browser window.
2. The target = “- self” argument opens the hyperlink in the same window.
3. The target = “- top”  argument abandons the frameset and displays the page in the full browser
window.
4. The target = “- parent”  argument opens the link in the frame that contains the current frameset.
Frames And Framesets

A frameset has a movable divides between the frames. It can drag this divider to change the sizes of
the frames. To prevent web site visitors from moving a frame’s divider’s, added a noresize=”noresize”
argument to the frame’s opening tag:
<frame src =”masthead.htm” name =”topframe” noresize=”noresize”>
By default, the divider between frames is five pixels wide. To change the width of the divider use the
border argument in the frameset tag.
<frameset rows =”86, * cols=”*” border=”10”>
46
To change the color of the divider, add a border color argument:
<frameset rows=”86, *” cols=”*” border=”10” border color=”red”>
To hide the divider at together, set its width to zero.
<frameset rows=”80, *”, cols=”*” border=”0”>
We can also set divider attributes for individual frames by placing them in the <frame> tag. Hiding
the border not only turns off the divider, but also eliminates the space that the divider occupied. To remove
the divider line but preserve the space between the fames use frame border=”0” instead of border=”0”
When the content of a page does not fit in the assigned frame, scroll bars appear in the frame. By
default, scroll bars appear only when they are needed. To have them appear all the time, add scrolling
=”yes” to the frame’s tag. To turn them off, add scrolling=”no”.
<frame src=”main.html” name=”topframe” scrolling=”no”>
Frames have margins, just like table cells. Various browsers use different default settings for the
frame margins, ranging from 8 to 15 pixels. To set a precise margin for a frame, use margin width and/or
margin height argument in the <frame> tag.
<frame src=”head.html” name=”topframe” marginwidth=”5” marginheight=”5”>
Mouse pointer
Dragging
divider
Inline Frames
 A frameset exists in a special type of html document that contains no <body> area.
 An inline frame is a frame that exists as a floating object within an ordinary web page.
 It is useful when you want to include content from another html file without converting the entire
page to a frameset.
 To create an inline frame, use the <iframe> tag. It is a double-sided tag, between the opening and
closing tag.
<iframe src=” syllabus.html”> Select the Subject </iframe>
47
4. INCORPORATING AUDIO AND VIDEO USAGE
HTML provides a means of delivering rich multimedia content, such as video clips, narration and
music downloads.
Planning for audio and video usage:

What makes audio and video good or bad?
Do Don’t
Let the visitor control the sound or video play Set up a sound to be played automatically when the
back. page loads unless you provide a way of turning it
off.
Provide clips in well-known, well –supported file Provide a clip in an obscure file format that most
formats. browsers won’t play.
If using a file format the Microsoft Windows Assume that everyone has the same sound and video
does not natively support, provide a hyperlink to play back software that you have.
a site where visitors can download a player or
plug-in for the file type.
Strike an appropriate balance between file size Provide clips that are so large they take an
and quality. unreasonably long time to download, or so
compressed that they have garbled sound or an
unmatchable image.
Provide a non-multimedia alternative or at least Deliver essential information only through the
an explanation of what the clip contains in a sound or video clip.
screen tip.
THE WAYS TO INCORPORATE SOUND AND VIDEO CLIPS ON A WEB PAG.

WAYS OF MAKING CLIPS AVAILABLE.
There are several ways to incorporate sound and video clips on a web page.
 Inline media  An audio or video clip in the page, so that it plays within the page itself when the
visitor clicks a button.
 External media  It helps to an audio or video clip, so that it plays in an external application when
the visitor clicks its hyperlink.
48
 Backgrounds sound  An audio clip play automatically when the page loads. This action which is
accomplished with the <bgsound> tag.
 Streaming audio or video  It setup an audio or video clip to be delivered gradually to the visitor’s
computer while it plays.
Common clip formats and players.

Not all formats are equal. They vary in file size, playback quality and popularity. A computer
support playback of a certain sound or video file format in one of two ways. It either has a plug-in for the
browser or a standalone player. A plug-in is a helper file that allows browsers to play that content within the
web page itself. A player is an external program that plays the clip in a separate window.
The following list includes only the most popular formats:
Format Pros Cons Player Best for…

WAV Very well Large file size, so Browser plug-in Short clips such
(Sound) supported on useful only for small or Windows as sound effects.
almost all browsers; clips or streaming Media player
good quality. media
MIDI Very well Computer generated Browser plug-in Background

(Sound) supported on sound; Artificial or Windows music; Music you
almost all browsers; sounding Media player. have composed
small file size yourself on an
electronic
keyboard.
MP3 Most popular Most browsers do not Windows media Downloadable
(Sound) format for support it natively, so player or any music clips.
delivering visitors must have an other MP3-
downloadable external player. capable music
music clips; small player
file size.
RealAudio Most popular Requires a Real Media Real Player Streaming audio
(Sound) format for player or plug-in which
delivering not all visitors have
streaming audio
Quick time Very popular Requires a Quick time Quick time Streaming Video
(Video) format fir player or plug-in which
delivering video; not all visitors have.
originally
developed for the
Macintosh but now
widely supported
AVI Very popular Visitors using non- Windows Media Downloadable
(Video) format for Windows computers Player video
delivering video, might need to
playable through download a compatible
Windows Media player
Player
49
WMV Popular format for Users on non-Windows Windows Media Downloadable
(Video) video, plays in computers might be Player video
Windows Media less likely to have a
Player; default preinstalled player for
format generated by it.
Windows Movie
Maker
Note:
There are many free programs for editing sound and video clips that include save as capabilities for
switching between formats, so don’t let a clip’s original format be a barrier.
Controlling file size and quality:

The word “size” has two meaning for a video clip, the file size and the display size. A clip on a web
page need not fill the entire monitor, a window of 2 to 3 inches is usually sufficient.
Some file formats are smaller that others because they use varying degrees of compression to
decrease their file sizes. A video clip is compressed using a certain compression algorithm, which us a sort
of math formulas used to remove excess spaces in the clip for storage.
Codec (Compression/ Decompression) is a helper file that works with our media player program.
Note:
A compression algorithm works by identifying repeated characters or patterns in the data file and
substituting more compact codes for them. For example, an algorithm might change
00000000000000000000 to something like 20 * 0.
Video clips vary according to the number of frames per second (fps). When a sound clip is digitized
a series of sound “snapshots” taken per second. These snapshots are called samples.
Sampling rate (the number of samples per second) the higher the accuracy of the sound
reproduction and the larger the file. Sampling rates for audio clips are measured in kilo hertz.
Ex:
11 KHz, 22 KHz or 55 KHz.
“Kilo” means thousand, and 11 KHz clip contains approximately 11,000 samples per second.
Sound clips also have varying samples resolutions, which are the number of bits used to describe
each sample. Common sample resolution is 8 bit, 16 bit and 32 bit. The more bits the larger the file. Sound
clips can be recorded in either mono or stereo, referring to the number of audio channels in the recording.
Mono has a single channel which is duplicated in each speaker. Stereo has two channels, with one channel
playing back in each of two speakers. Stereo clips are approximately double the file size of mono ones.
Various sampling rates and resolutions:
Settings Quality
8 KHz, 8 bit, mono Telephone quality
22 MHz, 16 bit, stereo Radio quality
44 MHz, 16 bit, stereo CD quality
Recording an audio clip:

One of the most common types of sound clips for a web site is an audio welcome message. Such a
message is very simple to record; all you need is a sound card and micro phone. Just click record and start
talking into the microphone. The microphone connects to the mic port on our sound card, typically color-
coded with red or pink.
Steps:
1. On the Start menu, click Control Panel.
2. Do one of the following :
 If control panel is in category click Sounds, Speech and Audio Devices and then click Speech.
50
 If control panel is in classic view double click Speech.
 The speech properties dialog box opens.
3. Click Configure Microphone to start the Microphone Wizard.

4. On the Welcome page, click Next to continue.
5. Read the sentence shown on the Adjust Volume page in a normal tone of voice.
6. Read the sentence on the test positioning page, and then wait for it to be played back to you. Then
click finish.
51
7. Click ok to close the speech properties dialog box, and then close control panel.
8. Click start, point to All Programs, Accessories and Entertainment and then click Sound
Recorder.
9. In the Sound Recorder window click the Record button and then read. When you are finished, click
the Stop button.
10. Click the play button and listen to the recording.

11. When you are satisfied with our recording, click save on the file menu.
12. Display the save as dialog box.
13. In the file name box, type welcome.
14. Click save.
Linking to an audio clip.

One user friendly way to offer a clip is to provide a hyperlink to it. Use a standard <a> tag, the same
as with any other hyperlink.
<p> Garden Company <a href=”welcome.wav”> Audio greetings </a> </p>
On most Window XP systems the default players for wav files in Windows Media Player. To change
the association between a file format and a program, on the windows explorer tools menu, click folder
options, on the file type tab, select the file extension, and click change.
In the open with dialog box, select the program you want to use to use to open file to the selected
format, select the always use the selected program to open their kind of file check box, and then click ok in
both dialog boxes.
Linking to a media file rather than embedding it is considerate because if gives yours visitors an
number of options. To download the clip, they can right click it and choose save target as. Visitors also
appreciate knowing the file’s format and size before they download it.
52
Embedding an audio clip.
An alternate method of providing a sound clip is to embed it on the page. Embedded multimedia
content on a page is played by using a plug in rather than an external application. A plug in is a helper file
that allows content that a browser does not natively support to open in a browser window. Common plug-
ins includes those for quick time, java, flash, shockwave, and adobe PDF.
It plays in the default media player, which provides a set of playback tools.
There are two different tags you can use for embedding a sound.
(i) <Embed> is a non-standard tag originated by Netscape.
(ii) <Object> is a standard HTML complaint and XHTML complaint tag for embedding method to
use for embedding content in strict HTML/ XHTML compliant code.
Using <embed>
To use <embed> specify the source with src= and whether or not it should automatically play with
auto start=
Ex:
<embed src=”welcome.wav” autostart=”false”>
If you omit the autostart=argument, the clip starts automatically when the page loads. To specify a
height and width for the sound controls.
Ex:
<embed src=”welcome.wav” autostart=”false” loop=”infinite”/>
Using object:
The <object> tag was brought into the html 4.0 standard as an all purpose tag to replace many
specially tags, including <embed> and <applet>
<object classid=”welcome.wav” type=”audio/ wav” height=”20” width=”100”> </object>
A few common MIME types for audio clips
File type MIME type

AU Audio/ basic
WAV Audio/wav
RA Audio/ x=ph-real audio
MID Audio/ x-midi
MP3 Audio/mpeg
<Object> is a two sided tag between its openings and closing tags you place <param> tags that
define parameter for the clip.
<object classid=”welcome.wav” type=”audio/wav” height=”20” width=”100”>

<param name=”autostart” value=”no” valuetype=”data”> </object>
Using a Background Sound:

The simplest method of embedding a sound is to place the clip on the page as a background sound. It
will play automatically whenever the page loads. Use the <bgsound> tag with a src=argument that points to
the audio file. Optionally use a loop= argument to make the sound clip repeat a certain number of times,
and /or a volume= argument to set the volume of the clip from 0 to 10,000.
Ex:
53
<bgsound src=”welcome.wav” loop=”1” volume=”1000”/>
Linking to or embedding a video clip?

Video clips can be placed on a web page as hyperlink by using the < a> tag or can be embedded by
using the, <embed> or <object> tag.
<a href=”seeds.mov”> click here to see a video clips </a>
The main difference is that we might be more likely to set height= and width=arguments for a video
clip because these arguments controls the size of the video displays window as well as the size of the
controls.
54
<embed src=”seeds.mov” height=”100” width=”100” loop=”false” autostart=”false”>
To hide the controls add the controller=”false” argument but if you do that you must take sure the
clip is not set to autostart= “false” or it will never play.
When providing video clips have a compatible player. There are a couple of arguments to use to
make your page friendlier in that situation. One is the alt=argument tags.
<embed src=” seeds.mov” height=”100” width=”100” loop=”false” autostart =”false” alt=”seeds

demo” you will need quick time it view this clip”/>
Another is the pluginspace= argument which enables you to point users to a web site where they can
download the needed plug-in.
Ex:
<Embed src=” seeds.mov” height=”100” width=”100” loop=”false” autostart=”false” alt=”seeds
demo”, pluginpage=http://apple.com/>
UNIT –IV COMPLETED
55
UNIT – V
INTRODUCTION TO THE INTERNET
1. WORLD WIDE WEB
 The World wide web (WWW) is a collection of pages maintained on the Internet using a technique
that is called hyper-text.
Hyper-text:
 Hyper-text is a text of more than two dimensions.
 Consider any text that is typed from left to right.
It has only two dimensions.

 Left to right
 Top to bottom
 Left to right is normally considered as the X-axis and top to bottom is considered the y-axis.
Certain words are highlighted.

 If we click one of those highlighted words, more details about that word appear in another window.
 We say that these details from the third dimension, the z-axis, that goes deeper into the text.
 Pointers connect the web pages in multiple ways in the form of multiple linked lists. For example,
educational websites are arranged in one list, religious webs in another and similarly for other types
also.
 A site may be in more than one list. Thus, we can go deeper into the text and know the details. Each
page of the web is called a web page or website.
 Every Internet connected system may have a website. If you have a web page, you can keep any text,
picture and sound on their websites.
56
 Text, picture, sound or animation kept on a website can be seen by anybody who browses the web.
 Browsing the web means looking at various web pages one after the other, also called surfing the
web.
Browsers:
 The software used for browsing web pages is called a browser. The following are some popular
browsers:
 Netscape Navigator
 Mosaic
 Hot Java
 Microsoft Internet Explorer
Search Engines:
 The universally accepted computer language to create hyper-text is called Hyper-Text Mark-up
Language(HTML).
 websites on the Internet are connected in such a way that one site has a pointer to the next website.
 In the web , if you want to search you can begin from a search site or an index site. These websites
are also called search engines. The following are some popular search engines.
http:// www.yahoo.com is a search site.

http:// www.lycos.com is a index site.
http:// www.AskJeeves.com .
Ask Jeeves is a different type of search engine, which gets us the necessary information by asking us
several questions. Depending upon our replies, it uses other search engines and gets the required website.
Yahoo has a text box to type our search key or we can choose topics from the hot texts shown below the
text box. Yahoo is quite popular with the users.
Eg: smpriya@yahoo.com
HOT mail is a webserver which provides a free e-mail service to all internet users. We can just register our
name in the home page of the Hotmail website.
Eg: radhika@hotmail.com
Google has a text box to type our search key or we can choose topics from the hot texts shown below the
text box. Google is most popular with the users. Users can register their e-mail address using gmail.
Eg: imthyas@gmail.com
2.NETWORKING
*A network is a number of computers connected to each other.
*A centralized network is a network having a central computer called a server and other computers called
nodes.
*A centralized airline reservation system has a server at the main office and nodes at all airports, travel
agencies, etc.
*In some type of networks, no central server exists. All the computers are simply connected together
through telephone connections and/or radio waves.
*In centralized networks, a remote node can communicate with each other directly.
*In client server architecture, two types of software are needed for the system.
*The software needed to do the work of the node is called client software.
*The software needed to run the central system is called the server.
57
*Clients always ask for resources from the server, which does the work of resource sharing.
3.INTERNET
The internet is the worlds largest network of computer networks. There are more than 100 million users
on the internet, and they are growing rapidly by the day.
History of internet:
In 1969, the American defense department wanted to connect all the computers in the Department of
Defense(DOD) offices and military research contractors including a large number of universities doing
military funded research.
That network was called Advanced Research Project Agency Network(ARPANET), was also called
DARPANET, the D for defense. It started in a small way, connecting 3 computers in California with one in
Utah, but quickly grew to span the whole of America.
It was very successful and all the universities wanted toget connected to ARPANET.
At one stage the military officials wanted to preserve the unity of the DOD, and also divided the network
into 2 parts.
1.ARPANET
2.MILNET(Military Network)
These 2 parts remained connected with a technical scheme Called Internet Protocol.
The word protocol means “rules for meeting a person/king”. On the internet, if we want to contact a
person on another network, we need a protocol.
Network designers have designed several protocols now, and some of them are as follows.
1.Simple mail transfer protocol(SMPT)
2.Point-to-point protocol(PPP)
3.Hyper-text transfer protocol(HTTP)
4.Transfer control protocol/internet protocol(TCP/IP)
Internet Protocol is a technical switching scheme, which enables a node of one network to communicate
with a node of another network.
4.ELECTRONIC MAIL(E-MAIL)
- Electronic mail is the facility of sending text-based messages and letters to any internet user.
- If you are hooked to the internet, you can send mail to your friend who is also on the internet.
- Everybody on the internet has his/her own unique e-mail address.
- We can also attach picture, sound, video or document files to the e-mail.
Signatures:
*Whenever we write a letter, we affix our signature at the end of the letter. This facility has been
included in electronic mail also.
*The software we use for sending e-mail has the facility to create and modify our signify electronically.
*The electronic signature is a text-based collection of one or two lines.
*For example, my signature can be set as the following.
Mrs M.Sumathi
Department of computer science, MASC college.
This signature is appended automatically to all e-mails and sent. It is also possible to set the e-mail
signature as a small diagram using text-based symbols.
Voice e-mail:
*In a usual e-mail, we type the message in the body of the e-mail in text mode.
*Recently, some companies have introduced software systems which support voice e-mail.
58
*Such software is given as an enhancement to their usual software. After keying the address to which the
e-mail has to be sent, we must speak the message.
*This voice e-mail just travels just like the text e-mail and reaches its destination. When the receiver
opens his mail, the voice message of the e-mail is heard.
*Pictures and photographs can also be sent along with voice e-mail messages.
5.RESOURCE SHARING
*Every internet system has some files open for anybody on the internet. For example, every Ph D thesis of a
university can be copied by anybody free of cost.
*These file name and the protocols are advertised in newspapers or private communications or web
pages.
*Software companies offer the beta version of their new products available on the net.
*We can download these files using File Transfer Protocols(FTP).
*There are two types of FTP resources available on the internet. They are:
1.Anonymous FTP
2.Non-anonymous FTP
The anonymous FTP facility is available for Ph D theses, research reports, news, etc.
In the case of non-anonymous FTP, one can download a file only if one creates an account with the FTP
server.
The user must already have an account, user ID and a password to download a file.
6.GOPHER
*As the internet became popular, FTP service was found to be efficient for sharing and downloading
files. Browsing of information is not possible in FTP.
*In order to make it easy for the user, the university of Minnesota invented a new service in 1991 and
named it after the name of its mascot.
*The gopher service was first used in the campus-wide information system university of Minnesota.
It became very popular during 1991-1993. Gopher is easy to use and user-friendly as compared to FTP.
*The resources files available on gopher are called gopher space. Later , a search facility called veronica
was made available to search in gopher.
*Since the gopher resources are arranged in linear forms, searching takes more time, and further it does
not support multimedia features.
*Most of the resources that can be linked through FTP or gopher can also be linked through WWW.
7.USENET
*Usenet is an application which enables an internet user to join a user group and discuss any interesting
topic. The groups are called usenet News Groups.
*The topics range from art to zoology, and science fiction to South Africa. Usenet groups meet and
discuss electronically.
*Usenet was started in 1979 in North Carolina. Initially, there were only two sites-University of North
Carolina, and Duke University.
*Each Usenet site is run by a server system called a news server. The one managing the system is called
the news administrator.
*Any client can send a news article to the news administrator. Articles are kept from two days to two
weeks.
*The news server regularly checks the articles and deletes those that are older than the specified time
interval. To read usenet articles, we use a program called newsreader.
*There are more than 13000 different topics. The groups are arranged according to an hierarchy.
There are mainly two categories of usenet hierarchies.
59
1.Mainstream
2.Alternative
The mainstream hierarchies are carried on all usenet news servers. The alternative hierarchies are
optional. We create a new news group by sending a special message called a control message.
8.TELNET
*Telnet is a utility which enables an internet user to log in and work on another system which is
geographically located in another place of the world. This is also called a remote log in facility.
*For example, a person has a computer in his office new Delhi. He has to visit Mumbai on a family trip.
*But when he is free at Mumbai , he can login in his system at Delhi from Mumbai and use all the
database and files, and work on the system.
*Telnet can access almost all the libraries in any part of the world and their books. We can log into
research laboratory computers and access some useful software.
*When we want log into a system using Telnet, we must know the password of the system, which is a
very important feature.
INTERNET TECHNOLOGIES
Modem, Internet Addressing, Physical Connection and Telephone Lines
1.MODEM
 The Expansion is Modulator and Demodulator.It is a device.

 Conversion of Digital Signals into Signals transmittable via telephone is called Modulation.
 Converting telephone signals into digital signals is called DeModulation.
 Modem speed is measured by bits per second(Bits Per Second).
 Baud is a synonym BPS, named after J.M.Baudot, the inventor of telegraph code.
 Common modems are of 14,400 BPS; there are also 28 800 BPS modems.
 The 14,400 BPS modems are also called V.32 modems.
 The 28 800 BPS modems are also called V.34 modems.
 An international forum, the CCIT (Committee for Consultation on International Telegraph and
Telephone) has defined a series of standards for modems.
 V.32,V32 are some examples of CCIT standards.
2.INTERNET ADDRESSING:
 Millions of computers have been connected to the Internet.
 To specify the address of that computer with IP(Internet Protocol) address.
 The IP address consist of 4 groups separated by dots(.) Ex:18.181.0.24.
 Text based address also used by the users, :skp.mit.edu.An Internet service called (Domain Name
System - DNS) converts into actual numerical address it is also called (Uniform Resource Locator –
URL).
 The Internet address has 2 parts,
1. Name of the User (user ID)
2. Name of the Server (server ID)
60
 The server ID contains several parts separated by dots. Ex;stxavier@md2.vsnl.net.in.
 This part of address is usually called the top-level domain to which the computer is connected.
 The classification may either be geographical or organizational.
1. Geographical domains:
DOMAIN COUNTRY
At Austria
Au Australia
Ca Canada
Ch (Confederatio Helvetica)
De Germany(Deutschland)
Dk Denmark
Es Spain
Fr France
Gr Greece
Ie Republic of Ireland
In India
Jp Japan
Uk England
Us USA
2. Organizational – based domains:
Domain Organization
Com Commercial Organization
Edu Educational Institution
Gov Government
Int International organization
Mil Military
Net Networking Organization
Org No-profit Organization
3. Some URL’s:
Rsource Sample URL

HTTP http://www.lsu.edu
SMTP mailto:smith@sweetness.com
FTP ftp://c:/xavier/info.doc
LOCAL FILE File://c:/xavier/info.doc
NEWS News:rec.humor.funny
3.PHYSICAL CONNECTIONS
User computer  Modem  Telephone Line  Modem  ISP  Internet
ISP = Internet Service Providers.
 The User node sends the digital data.
 The modem converts digital data into analog signals.
 The telephone line transmits the data to the modem of the ISP.
 The modem of the ISP converts analog signal received into digital data.
 The ISP’s node receives the message in digital form.
 In this communication process 2 important devices work together,
 Modem.
61
 Telephone Line.
TELEPHONE LINES:
 An ordinary Internet account holder gets only dial-up connection for sharing one port of the ISP
server and at one time,only one user can work.
 If one user dials to partical user who are busy with other line, that dialler user may get engage tone.
 If the port is free the user get connected to the ISP and can work on the Internet.
a) Leased Lines
 Instead of dial-up connection,the leased line connections are used and it is expensive.
 In this case, the user has full freedom on a port of the ISP server to access.
b) Speed of Telephone Lines
 56 kbps speed achieved in leased line.
 3 or 4 users can use the port at a time.
 So any user can get a speed of 56/4 = 14 KBPS.
c) Frame Relay
 It is cheaper than leased lines.
 We connect our network to the telephone companys frame relay switch.
 The frame relay switch then routes the data traffic to the ISP.
d) ISDN
 Integrated Services Digital Network(ISDN) is a communication network which is used for
transmitting all tyoes of integrated data, which includes voice,video,facsimile and computer
signals.
 In a BRI type connection there are two B-type channel and one D-type channel.
 Each B-type channel has 64 KBPS bandwidth and the D channel has 16 KBPS bandwidth.
 The 2 B-channels are used to send bulk data.
 The D –channel is used to control the data flow in B-channels.
 Advantages are,
1) Increase user productivity
2) Higher transmission rate
3) Every services are integrated into a single network
4) Lower coct
5) Higher accuracy level
 2 types of ISDN,
1) Basic rate interface(BRI)
2) Primary rate interface(PRI)
INTERNET BROWSERS
1. INTERNET EXPLORER 2. NETSCAPE NAVIGATOR

1.INTERNET EXPLORER:
Start Internet Explorer by double-clicking the icon on your desktop.
62
Internet Explorer opens to the homepage set as the default.
Frames
Scrol
l
Bars
Menu Bar
Standard Title Bar
Address Buttons
Bar Toolbar
Transmission Status—Windows logo changes to a
rotating globe until the Web site is located.
Toolbars
Status Bar: Watch the left side of the bar
The Microsoft Internet for Web-page loading progress. The right
Explorer toolbar consists side tells you which security zone the
of buttons that are current page is in, and shows a lock icon if
shortcuts for menu you are on a secure site.
commands. They make
browsing faster and easier.
Internet Explorer 5.5 Standard Buttons Toolbar:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
1. Back. Lets you return to pages you've viewed, beginning with the most recent. Right-click the Back
button and select from a list of recently visited sites.
2. Forward. Lets you move forward through pages you've viewed using the Back button. Right-click the
Forward button and select from a list of recently visited sites.
3. Stop. Halts the process of downloading a Web page. Click this if you want to stop downloading a page
for any reason for example, if you're having trouble downloading it or if you don't want to wait for it to
download. Then try downloading it again or browse elsewhere.
4. Refresh. Updates any Web page stored in your disk cache with the latest content. When you return to a
page that you've visited, your browser displays the file stored in your disk cache, rather than the current
page on the World Wide Web. If a web page doesn't come up the whole way or is taking abnormally
long to load, try the Refresh or Reload button - sometimes this will load the page better.
5. Home. Returns you to your home page. You can designate any Web page as your home page.
63
6. Search. Displays a choice of popular Internet search engines in the left pane. Your search results appear
in the left pane, too. When you click a link, the page appears in the right pane, so you don't lose sight of
your search results.
7. Favorites. Displays a list of the sites you have marked. Click any item in the list to jump to it.
8. History. Shows a list of Web sites you've visited.
9. Mail. Connects you to the Microsoft Outlook Express messaging and collaboration client so you can
read e-mail and newsgroup messages.
10. Print. Prints the page you're viewing. This is one way to save information from the Internet so that you
don't have to reconnect to view it again. You can even print the URL associated with each hyperlink,
making it easy to navigate to the site later.
11. Edit. Opens a file in the Microsoft Word word processor that contains the HTML code for the page
you're viewing so you can see and even edit it.
12. Discussion. Access a discussion server.
13. Messenger. Opens Windows Messenger.
14. Media. Displays a list of audio and video media options using Real Player or the Windows Media
Player.
URL:
Every server on the Internet has an IP number, a unique number consisting of 4 parts separated by dots. The
IP number is the server's address.
165.113.245.2
128.143.22.55
However, it is harder for people to remember numbers than to remember word combinations. So, addresses
are given "word-based" addresses called URLs. The URL and the IP number are one and the same.
The standard way to give the address of any resource on the Internet that is part of the World Wide Web
(WWW). A URL looks like this:
http://www.matisse.net/seminars.html
telnet://well.sf.ca.us
gopher://gopher.ed.gov/
The URL is divided into sections:
The first part of a URL defines the transport protocol.
http:// (HyperText Transport Protocol) moves graphical, hypertext files
ftp:// (File Transfer Protocol) moves a file between 2 computers
gopher:// (Gopher client) moves text-based files
news: (News group reader) accesses a discussion group
telnet:// (Telnet client) allows remote login to another computer
Here's an example:
http://www.vrml.k12.la.us/tltc/mainmenu.htm
▪ http is the protocol
▪ www.vrml.k12.la.us is the server
▪ tltc/ is the path
▪ mainmenu.htm is the filename of the page on the site
64
1. You do not have to enter http:// , most browsers will add that information when you press Enter or click
the button at the end of the Address Bar.
2. To view recently visited Web sites, click the down arrow at the end of the address field.
3. When you start typing a frequently used Web address in the Address bar, a list of similar addresses
appears that you can choose from. And if a Web-page address is wrong, Internet Explorer can search for
similar addresses to try to find a match.
4. The URL must be typed correctly. If you get a “Server Does Not Have A DNS Entry” message, this
message tells you that your browser can't locate the server (i.e. the computer that hosts the Web page). It
could mean that the network is busy or that the server has been removed or taken down for maintenance.
Check your spelling and try again later.
The Tool Bar
Tool Bar
Click to move back to last view screen
Imagine the pages you view as a continuum. If you backtracked to a previously viewed page the forward
button will move you forward along the continuum.
Click the stop button to discontinue a search. Useful if the page seems to be taking too long to appear.
Click refresh when viewing pages that are updated frequently; stock quotes, traffic and weather reports,
CNN.
Click Home to go to the pre-selected Home page in this case the library’s home page.
The Address Bar
Address bar: The Website Address or URL is entered here.

 Erase the address that is currently showing by
65
o clicking in the white space this will highlight the current entry, OR
o use the backspace or delete keys to erase the current address,
Begin typing the new address,
 usually this starts with www, but you don’t need to type it .
 almost always uses all lower case letters
 no punctuation except, dots and slashes
Use the mouse to click the go button OR Press the Enter key on the keyboard.
Favorites
Favorites or bookmarks- help you mark a web page you would like to return to without having to remember
the long or complicated web address. When you have found web site you like.
Click the Favorites Menu in the Menu bar
Then click
Add to Favorites
This Add Favorite Box will appear. Click OK
2.NETSCAPE NAVIGATOR
66
History
Go to Tools on the menu bar and click Internet Options. The
following window opens with the General tab active.
To Set the Home page:
1. With the desired home page active in the web
browser window, click Use Current. The URL is
placed in the Address field.
2. Click Apply to set the new home page.
3. Click OK to close the Internet Options box.
To Make Changes to History:
67
1. Specify the number of days pages are to be kept in history.
Click on Clear History to remove all web pages visited since last cleared.
UNIT –V COMPLETED
NMEC – II HTML and Web Design

2 Marks
1. Define HTML
Hyper Text Markup Language is the programming language of the World Wide Web.
2. What do you mean by webpage?
A web page is a plain text file that has been encoded using Hypertext markup language, so that it
appears nicely in a web browser
HTML means
Hypertext - This is a reference to the ability of webs to link to one another
Markup – Tags that apply layout and formatting conventions to plain text with the tags
Language – A reference to the fact that HTML is considered a programming language
3. How do HTML works
The code within an HTML file is enclosed in tags. These tags indicate where the formatting should
be applied and how the layout should appear, what pictures should be placed in certain locations.
4. What is XML?
Extensible markup language is used by programmers to create their own tags. It is widely used for
web databases.
5. Define the term CSS
Cascading style sheets is code that specifies formatting based on styles. This code can be placed in a
separate file with .css extension, in the <head> section of an individual page. Web designers use CSS to
specify the formatting for a particular tag in a separate style sheet document and the applied to multiple
pages.
6. Expand CGI:
Common Gateway Interface (CGI)
7. Define tag:
Tags that create form controls are placed between the opening and closing <form> tags.
8. How to apply styles in Classes & ID.
68
Style rules can modify the built-in tags in HTML by redefining their formatting.
Styles do not stop there, however you can make your own styles by creating classes and IDs.
Classes and IDs mark certain elements so you can refer to them in your style sheet. A class can be
applied to multiple selections, whereas an ID uniquely identifies a specific selection within a document.
(Different documents can use the same ID).
9. Define Hyperlinks:
Hyperlink is a bit of text or graphic that when we click it moves to a different location on the page,
open a different web page, start an email message, download a file etc.
10. What is absolute path?
Path that contain a complete address that anyone can use to get that page are called absolute path.
11. Define an anchor
An anchor is a marker within an HTML document just like a bookmark in word document.
To define an anchor create an <a> tag around the destination text and include a name = argument
12. What are the two types of lists?
Ordered list – Numbered list is called ordered list with <ol> tag
Unordered list – Bulleted list is called unordered list with <ul> tag
13. What are special characters?
Special characters are referred to as entities and they are created by using codes beginning with
ampersand (&) followed by entity name or entity number, ending with semicolon.
14. How will you apply background color and fore ground color
To assign a background color to a page, insert style = “background-color: color” argument into the
body tag.
For a foreground color use style=”color: color”
15. List out the three additional pseudo-classes in hyperlinks.
Focus: Used for links that are selected using the keyboard but not yet activated. This is not an issue
when you select a link with the mouse because clicking a link, both selects it and activated it.
Hover: Used for links that the mouse is positioned over. You can use this pseudo-class to make a
link change color, become bold, and so on when the user points at it.
Active: Used for a link when it is clicked. Immediately after being clicked, the link goes to the
visited state. You might use this pseudo-class if you have set the link and the visited states to the same value
but want the link to change momentarily when clicked.
16. What is meant by External Style sheet?
Embedded style sheets work well for single-page web sites
A single external style sheet can be linked to multiple documents, ensuring complete consistency
even in a large site.
An external style sheet also makes it easy to change the formatting of your site after the pages have
been constructed.
69
17. What are the web-supported graphics formats?
GIF – Graphics Interchange format
JPEG, JPG – Joint Photographic Experts Group
PNG – Portable Network graphics
18. How will you insert a graphics to web page?
To insert a graphic to a web page by placing an <img/> tag where we want the graphics to appear.
<img src = “logo.gif” />
19. Define pixels

Pixels are the native unit of measurement for computer monitor display modes. HTML also accepts
inches(in),centimeters(cm),millimeters(mm),points(pt),and picas(pc), but those units are most
appropriate when working with a page that is designed to be printed.
The size of a pixel depends on the display resolution of the monitor
20. What is padding
This adds space around the contents of an element, on the inside of the element. It applies equally to
all lines of text in the paragraph. Use the padding attribute to create this space. For a single
paragraph, specify this style
<p style=”padding: 20px”>
p {padding:20px}
21. What is navigation bar?
A navigation bar is a set of hyperlinks that connect to the major pages of web site. These hyperlinks
are either text-based or graphical
22. Define table
A table is a grid of rows and columns, the intersections of which form cells. Each cell is a distinct
area, into which we can place text, graphics, or even other tables.
23. Define division-based layout
Defines the area of a page by using <div> tags, and then applies formatting to each area by using
styles.
24. What are the ways for positioning a division on the page?
It has three possible values
Position: absolute - This value specifies a fixed position with respect to the parent element.
Position: relative – This value specifies an offset from the natural position of the element. Other elements on
the page are not affected, even if the new position causes elements to overlap.
Position: fixed – This value specifies a fixed position within the browser window that doesn’t change even
when the display is scrolled up or down. Internet Explorer does not support this setting.
70
25. How to create a form?
A form is enclosed in a two-sided<form>tag:
<form method=”post”>
……</form>
26. What is a command button?
A command button is a button that executes a function, such as submitting the form or resetting it.
27. What is an option button?
An option button is part of a group of mutually exclusive options. When we select an option button,
all other option buttons in the group are cleared.
28. Define frame and frameset

A frame is a section of a browser window, in which a web page loads.
A frameset is a container file that describes how many frames the browser window will be divided
into and the size and shapes.
29. List out the controls in Forms:
Forms controls can be text boxes, buttons. Check boxes, menus, and/or command buttons.
30. What is the difference between frame-based layout and other layout types?
The main difference between a frame-based layout and other layout types is that each frame displays
a different file.
31. Define inline frame
An inline frame is a frame that exists as a floating object within an ordinary web page. It is useful
when you want to include content from another HTML file without converting the entire page to a frameset.
32. What are the ways to incorporate sound and video clips on a web page?
Inline media – We can embed an audio or video clip in the page, so that it plays within the page itself
when the visitor clicks the hyperlink.
External media – we can link to an audio or video clip, so that it plays in an external application
when the visitor clicks its hyperlink.
Background sound – We can have an audio clip play automatically when the page loads.
Streaming audio or video – We can set up an audio or video clip to be delivered gradually to the
visitor’s computer while it plays.
33. Define samples
When a sound clip is digitized (converted to digital format), a series of sound “snapshots” are taken
per second. These snapshots are called samples.
34. Define WWW:
The World Wide Web (WWW) is a collection of pages maintained on in Internet using a technique
that is called hypertext.
35. What do you mean by web browsers?
71
A web browser is a software application for retrieving presenting and traversing information
resources on the World Wide Web. The following are some popular browsers:
Netscape Navigator
Mosaic
Hot Java
Microsoft Internet Explorer
36. What do you mean by TELNET?
TELNET (teletype network) is a network protocol used on the internet or local area networks to
provide a bidirectional interactive communication facility.
37. What do you mean by FTP?

File transfer protocol is standard network protocol used to exchange and manipulate files over a
TCP/IP based network, such as the Internet.
38. What is a Computer Virus?
A Computer virus is a computer program that can copy itself and infect a computer. The term virus is
also commonly but erroneously used to refer to other types of malware, adware, and spyware programs that
do not have the reproductive ability.
39. Define Web directory
Web directory or link directory is a directory on the World Wide Web. A web directory is not a
search engine and does not display lists of web pages based on keywords; instead it lists web sites by
category and subcategory.
40. What are the two types of web pages?
Static pages don’t change content and layout with every request unless a human manually updates the
page.
Dynamic pages adapt their content and/or appearance depending on end-user’s input/interaction or
changes in the computing environment.
72
QUESTION BANK
Unit – I
5 MARKS
1. What are the basics of HTML
2. Explain how HTML works
3. Explain how to apply formatting
4. Write short notes on creating and hyper linking to anchors
5. Explain Numbered list with example.
6. Write short note on Pseudo classes
10 MARKS
1. Discuss style sheets and Graphics
2. Explain hyper linking and anchors
3. Describe Lists and background
Unit – II
5 MARKS
1. What are the Graphics format
2. What are the web supported graphics format
3. How will you insert graphics in web page
4. Explain how will you arrange elements on the page
10 MARKS
1. Discuss controlling image sizing and padding
2. How will you select a graphics format
Unit – III
5 MARKS
1. How will you plan site organization
2. How to redirect to another URL
73
3. Explain how to apply borders by using arguments
4. Write short notes creating image map
5. Write short notes Utilizing thumbnail graphics
10 MARKS
1. Explain how to create tables
2. Discuss briefly on cell spacing and cell padding and alignment
3. Describe on creating navigational aid
Unit – IV
5 MARKS
1. Explain the ways of creating a basic form
2. How will you create menus in web page
3. How to set a hyperlink to a target frame
4. Write short notes on inline frames
5. What are the methods to control image size and quality
10 marks
1. Discuss briefly on creating forms used in a web page
2. Describe the usage and creation of frames and frameset
3. Write briefly on incorporating audio and video in a page
Unit - V
5 marks
1. Explain the types of Browser
2. What are the types of web writing styles
3. Write short notes on web management.
4. Explain how search engine works
5. Write short notes on FTP
6. Explain the search engines and meta search engines
7. Write short notes on search strategies
10 marks
1. Describe in detail about web presentation outline
2. Explain in brief on web management and web design
3. Discuss briefly the search fundamentals and how search engine works
4. Explain briefly on computer viruses
5. Write brief notes on FTP and Telnet
74
75

HTML and Web Notes

Uploaded by

Copyright:

Available Formats

HTML and Web Notes

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

HTML and Web Notes

Uploaded by

Copyright:

Available Formats

MAHENDRA

ARTS & SCIENCE COLLEGE

Class : II B.Sc. MATHS

R.UMAMAHESWARI, M.Sc., M.Phil.,

NMEC: II SEMESTER: III SUBJECT CODE: M16UCSN04

How cascading style sheets work?

Selecting a tool for creating web pages:

Opening a web page in notepad:

Previewing a web page in Internet Explorer (IE):

Making, saving and viewing changes:

Creating the HTML, HEAD and BODY sections:

Creating paragraphs and Line breaks:

Specifying a Page Title and keywords:

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

To add a page title and some keywords.

Publishing a file to a server:

3. FORMATTING TEXT BY USING TAGS

To create some headings for opening page.

Applying Bold and Italic Formatting:

Applying superscript and Subscript formatting:

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

Formatting a block quotation:

Creating Bulleted and Numbered Lists:

List style Value Result

Specifying the start of a numbered list:

Inserting Special characters:

List of common entities:

Symbol Entity Name

Inserting Horizontal lines:

 Applying a background color:

 Applying a foreground color:

What is meant by hyperlink?

Hyper linking to a web page:

Hyperlinks are underlined by default.

Using relative and absolute paths:

Setting a Target Window:

Creating and Hyper linking to Anchors:

Hyper linking to other content:

Ordinary link: <a href="http://www.example.com/">Link-text goes

<a name="tips">Tips Section</a>

6. INTRODUCTION TO STYLE SHEETS

<style type = “text/css”>

This code could also be written like this:

Creating classes and IDs for applying styles:

WHAT IS MEANT BY PSEUDO CLASS?

<link rel=”stylesheet” type=”text/css href = ”default.css”/>

 An embedded style sheet takes precedence over an external one.

1.SELECTING A GRAPHICS FORMAT:

Difference between the major web-supported graphics formats:

Name Color Depth Compression Animation Transparency

Graphics Interchange 8 bit

2.PREPARING GRAPHICS FOR WEB USE

4.ARRANGING ELEMENTS ON THE PAGE

5.CONTROLLING IMAGE SIZE AND PADDING

ORIGINAL SIZE HEIGHT = 200

 Add a margin of 5 pixels to the image

 Open the file in notepad and in Internet Explorer

UNIT –II COMPLETED

2. UTILIZE THUMBNAIL GRAPHICS

<frameset rows = “” , cols = “100, ”>

<frameset rows = “” cols = “100,”>

<frameset rows = “,100” cols = “”>