APPLIED COMPONENT: PAPER-I

PRINCIPLES OF WEB DESIGN & WEB TECH.

Theory Exam: 3 Hrs. Marks : 60

Practical Exam: 3 Hrs. Marks 40

Unit I
Web Site Design Principles – Design for the Medium, Design
for the Whole Site, Design for the User, Design for the
Screen
Planning the Site – Create a Site Specification, Identify the
Content Goal, Analyze your Audience, Build a Web Site
Development Team, Filenames and URLs, Directory
Structure, Diagram the Site
Planning Site Navigation – Creating Usable Navigation,
Using Text-Based Navigation, Using Graphics-Based
Navigation
Creating Page Templates – Understanding Table Basics,
Table Pointers, Creating a Page Template
Unit References
Code: PWD (Ch 2,3,4,5)

Unit II
Web Typography – Type Design Principles, Controlling
Typography with the <FONT> Element, Controlling
Typography with Cascading Style Sheet, Styling with CSS
Graphics and Color – File Format Basics, Computer Color
Basic, Choosing a Graphics Tool, Using the <IMG>
Element, Working with Hexadecimal Colors
HTML Frames – Understanding Frames, Frame Syntax,
Targeting in Framesets, Planning Frame Content
Publishing and Maintaining Your Web Site – Publishing
Your Web Site, Testing Your Web Site, Refining and
Updating Your Content, Attracting Notice to Your Web Site
Unit References
Code: PWD (Ch 6,7,8,9)
Unit III
HTML - HTML 4.0 Tag Reference, Global Attributes, Event
Handlers, Document Structure Tags, Formatting Tags, List
Tags, Hyperlinks, Image & Image map, Table Tags, Form
Tags, Frame Tags, Executable Content Tags and Style
Sheets
Unit References
Code: ELJO (Ch 3-9)
Unit IV
Introduction to Java Script (Functions, Objects)
Client-Side Java Script
Java script in web browser, windows and frames, the
document object model, events and event handling, forms
and form elements, dynamic html and saving state with
cookies
Unit References
Code: JSDG (Ch 7, 8, 11-18)
Unit V
Active Server Pages - Server side Scripting and Client-side
scripting, ASP Objects, Scripting Objects (creating an
instance of scripting object, The FileSystemObject object
[drive, folder and file]) Active Data Object (Connection and
Recordset)
Unit References
Code: B-ASP (Ch 2, 7, 8, 10, 12, 13)
Unit VI
XML - Introduction to XML, Problems with HTML & SGML,
Types of XML Markup, Document Type Definitions, Linking,
Using Style Sheets with XML, Creating XML Documents.
Unit References:Code: ELJO (Ch 12, 13)
References: 1. ELJO: Using HTML 4, XML & JAVA by Eric
Ladd & Jim O’Donnell. (Platinum Edition) (PHI)
2. PWD: Principles of Web Design by Joel Sklar
3. JSDG: Java Script the definitive guide by David Flanagan
4. B-ASP: Beginners ASP 3.0 David Buser etc. Wrox Press
Ltd.
 UNIT - I
Web Site Design Principles – Design for the
Medium, Design for the Whole Site, Design for the
User, Design for the Screen
Planning the Site – Create a Site Specification,
Identify the Content Goal, Analyze your Audience,
Build a Web Site Development Team, Filenames and
URLs, Directory Structure, Diagram the Site
Planning Site Navigation – Creating Usable
Navigation, Using Text-Based Navigation, Using
Graphics-Based Navigation
Creating Page Templates – Understanding Table
Basics, Table Pointers, Creating a Page Template
 WEB SITE DESIGN
PRINCIPLES
This chapter covers the basic design
principles of web site by examining the
various web sites, see the user needs
and requirements, and plan the site
which is easy to navigate and download.
 Design for the Medium
• Destination is computer not page
• Language is Hypertext not linear test
• Consider fonts, color and layout
• Craft the “LOOK AND FEEL”
– User interface
• Make your design portable
– Accessing across different browsers, OS &
Comp.
• Design for Low bandwidth
– Test your page at different connection speed
– Use less graphics, (Fig 2-3 and 2-4)
 Design for the Medium Cont..
• Plan for clear presentation and easy
access to you information
– Presentation and Organization of Information and
– Graphics and navigation option
– Make information easy to read, less fonts and color,
lengthy passage of test
– Computer is low reading media
– Light source coming from the behind tires the eyes.
– Break text into reasonable sentence
– Include heading
– Control the horizontal length
 Design the whole site
• Plan for unifying theme and structure
• Fonts, color, layout should say about your
site and what site want to convey
• Refer fig 2-5 and 2-6 of NASA
• Create smooth transitions
– By repeating color and font and using page
layout
– Avoid random, jarring changes
– Refer fig 2-7 and 2-8(Secondry level page)
 Design the whole site cont..
• Use a grid to provide visual structure
– Grid is a conceptual layout that organized page into
columns and rows
– You can imposed a grid to provide visual consistency
throughout your site.
– Table elements can be used to built the grid
• Use of Active White Space
– Whites spaces are blank area of a page
– It is used to define the area of a page
– It is deliberately used
– PASSIVE WHITE SPACES are blank area that
border the screen.
– See fig 2-9,2-10.
 Design for the user cont..
• Keep a flat hierarchy
– Don’t allow to navigate through too many
layers of your web site.
– Structure you web site to include section or
topic level navigation page so user quickly
find content (See fig 2-26, 2-27)
• Use the power of hypertext linking
– You decide how user move through you site
– Provide link within the text.
– Provide link to return, jump down the page
and back to the TOP of the page
– See fig 2-28, 2-29, 2-30, & 2-31.
 Design for the Screen
• Destination for web page is computer different
from the printed page so consider the following
points:
– Shape of a screen: it is not a portraits but landscape.
– While paper reflect light, computer passes light
through it from behind
– Don’t use blue link on black background (See fig 2-
35)
– Don’t use italic text, it is hard to read on the screen
(See fig. 2-36, 2-37)
– Don’t allow for Horizontal scroll
 PLANNING THE SITE

When we want to build or restructuring web site, many

designers simply do not know where to begin. Rather
than rushing straight to the computer, the best way to
tart is by picking up a pencil and paper and sketching
out site design.
 What you will learn……?
• Create a site specification documents
• Identify the content goal
• Create a user-focused site by analyzing your
audience
• Consider the different roles and talents
necessary to build a site
• Create naming convention for your site files
• Build a relative files structure that is portable to
different web servers
• Create a flowchart that depicts the structure of
you design
 CREATE A SITE SPECIFICATION

• Determine you objectives

– You may want to increase comm. among
employee, gain visibility, provide a service,
attract new customer etc…
– Make sure that your justification is valid
– Start your site by creating a site specification
 IDENTIFY THE CONTENT GOAL
• Examine closely what type of site you are creating
– Your objective and user’s objectives
– Think about type of content you are presenting
– The following sites demonstrate ways to focus your content
– Billboard--- business and commercial venture
– Publishing--- newpapers
– Special interest, public interest and non-profit organization---
news and current information for general public
– Virtual gallery--- to show off samples of all types of arts and
design
– E-commerce, catalog and online shopping---
– Product support---Manufacturer can distribute infor., upgrades,
troubleshooting advice etc…
– Intranet & extranet---Many companies build web site only for
those who have access to their intranet.
 ANALYZE YOUR AUDIENCE

• What user want when they come to your

site?
• How can you attract them and entice them
visit again?
• What types of computer and connection
speed does your typical visitor have?
 BUILD WEBSITE DEVELOPMENT TEAM

• Server administrator
• HTML coders
• Designers
• Writer and information designer
• Software programmer
• Database administrator
• Marketing
 FILES NAMES AND URL’S
• When you upload site on web server, may run different OS
from your local development sys
• Transferring ur files to the server may break local URL links
because of either file name or directory structure
inconsistencies
FILE NAMING
See table 3-1
• Case sensitivity
• Character Exceptions
– May space is valid in Macnitosh or PC but not in UNIX or Windows
• File extension
– File must end with .htm or .html
• File name
– Use 8.3 format
– Use lower case letters and avoid special characters
• Default main page name--- default.htm (Use Windows NT),
main.htm, home.htm, indes.htm etc…
 URL (UNIFORM RESOURCE LOCATOR)
• Complete URL
– It include protocol--- browsers uses to access the file
– Server or domain name
– Relative path
Domain path File name
– File name Protocol

Example:
<A HREF=http://www.mysite.com/business/trends/laptop.htm>
• Partial URL
– When u are linking file that resides on your own computer is
a partial URL, in which domain name and protocol is omitted
– The file resides in the same direcory need no path
Example: <A HREF=“laptop.htm”>link text</A>
 DIRECTORY STRUCTURE
• When your site ready to upload on the
web server, web server contain user area
containing folder in each user.
• Your files are stored in user area.
• If you do not buy a domain name, your
files will store in public area
• User can use following address to access
your site: --- www.webserver.com/user2/.
• If you buy the domain name, the name you
choose you name.
• Which is easy to remember
 DIAGRAM THE SITE
• Plan your site by creating flowchart that shown the
structure and logic behind the content presentation
and navigation
• CREATE INFORMATION STRUCTURE: think about
information need of your user and how they can best
access the content of your site, consider what
information design map should look like: See the
following structure.
– Linear structure
– Tutorial structure
– Web Structure
– Hierarchical Structure
– Cluster Structure
– Catalog Structure
LINEAR INFORMATION STRUCTURE

Main Page

Sub Topic
TUTORIAL STRUCTURE
Main
Page

Table of
Site Map Index
Content

Concept

Lesson

Review
WEB STRUCTURE

Main
Page
 HIERARCHICAL STRUCTURE
Site Main
Map Page

Section Section Section

Page
Page Page

Section Section Content Content

Page Page Page Page

Content Content
Content Page Page
Page

Content Content
Page Page
 CLUSTER STRUCTURE
Site Main
Map Page

Section Content Section

Page pages Page
 CATALOG STRUCTURE
Main
Page

Content Search
Page Page

Item
Page

Shopping Checkout Exit

Char
 Planning Site Navigation
YOU WILL LEARN
• You will understand navigation principal
• Build navigation schemes to meet users
need
• Provide location information
• Use graphics for navigation and linking
 Creating usable navigation
• The PC Webopedia defines Hypertext as a
System “In which objects (text, pictures,
music, program and so on) can be
creatively linked to each other… you can
move from one object to another even
though they might have different form.
• The idea of Hypertext introduced in
1960by Ted Nelson mean non-sequential
writing
• Effective navigation includes providing
cues to the user’s location.
• Provide enough location information.
– Where am I?
– Where can I go?
– How do I get there?
– How do I get back to where I started?
To allow to answer these questions,
provide the following information

• Let the user know their current page and

what type of content they are viewing.
• Let user know where they are in relation to
the ret of the web site.
• Provide consistent, easy to understand links.
• Provide alternatives to the browsers back
button that let user return to their starting
point. (See fig. 4-1)
Limiting information overload
• Create manageable information segment
– Break you content into smaller files and then link
them together, Provide logical grouping
• Control page length
– Don’t allow user to scroll through never ending
page
– Long files means long time to download
• Use hypertext to connect facts, relationship
and concept
– Provide linking to related topics, concept, facts.
– Know your material.
 USING TEXT BASED NAVIGATION
• It is most effective way to navigate your
site.
• It can work in both text only and graphical
browser. (See fig. 4-3)
• LINKING WITH TEXT BASED NAVIGATION BAR
• See fig (4-4)
– Table of content page must link to other
pages of web site so that user can click on
link and view the pages.
– You can meet this need by adding TEXT-
BASED NAVIGATION BAR( See fig. 4-6)
– You can add this bar to the top of every page.
– The code will be as follows:
<DIV ALIGN=CENTER>
<A HREF=“index.htm”>Home</A> | <B>Table of
Contents </B> | <A
HREF=“contindx.htm”>Index</A>
</DIV>

LINKING TO INDIVIDUAL FILES

<A href=“chapter1.htm”>Chapter 1</A>

 LINKING TO DOCUMENT FRAGMENT
File Name: red.html
<html>
<body bgcolor="red">
<A NAME="TOP">
<center><h1>SADIQUE</h1><center>

Hi how are yoiu

<a href="#hi">click</a>
</A>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
r><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
<A name="hi">
Hir </a>
<A HREF="#TOP">TOP</A>

</body>
<html>
 LINKING TO EXTERNAL DOCUMENT
FRAGMENT
File Name: red1.html
<html>
<body bgcolor="BLUE">
<A NAME="TOP">
<center><h1>SADIQUE</h1><center>

<A HREF="RED.HTML#HI">JUMP ON HI</A>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<A HREF="#TOP">TOP</A>

</body>
<html>
 Adding page-turner
• It allow sequential navigation of the page
• Useful when user want to read page
sequentially
• Allow to move next or previous
• Work well with linear structure
See Enhanced navigation bar
Home | Table of Contents | Previous | Next | Index
 Adding Contextual Linking
• It allow user to jump to related topics or
cross references by clicking the word or
item that interest them.
• Include link within a line of text is more
effective than including list of keywords.
Example:
• May leave white space intact:
• For more information please contact:
USING GRAPHICS BASED NAVIGATION
• Using text image for navigation
• Using Icon for navigation
• Using ALT attribute
– It provide information if browsers are not able to
display graphics
– Example:
<A href=“parent.htm”><img border=0
src=“smparent.gif” width=113 height=35
ALT=“Parent’s Page”></a>
Limitation ALT attribute: If text is large and icon is
small text is not display properly, so msg is
displays in pop-up menu.
 CREATING PAGE TEMPLATES
YOU WILL LEARN
• How table can enhance the display of your
content
• Table elements allow to create grid-based
layout
• Use HTML table elements and attributes to
customize page template
• Learn how to take page design from concept
to HTML code
• Recognize basic page template
 UNDERSTANDING TABLE BASICS

• Initially table used to display only tabular

data
• Designer want to avoid left margin
constraints in HTML
• Using table elements they had the control
and tools to build columnar layout align
text, create gutters and structure page
• It is used as a primary design toll for WEB
 Using table element

<TABLE BORDER>
<CAPTION>76-84mm Socket Pricing</CAPTION>
<TR>
<TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH>
</TR>
<TR><TD>3476-AB</TD><TD>76mm Stock</TD><TD>45.00</TD></TR>
<TR><TD>3478-AB</TD><TD>78mm Stock</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Stock</TD><TD>50.00</TD></TR>
</TABLE>
Defining table attributes
1. Using Global attributes
2. Using Row-Level attributes
3. Using Cell-Level attributes
1. Global attributes affect the entire table and
these attributes can be place in the initial
<TABLE> tag.
ALIGN, BACKGROUND, BGCOLOR,
BORDER, CELLPADDING,
CELLSPACING, HEIGHT, WIDTH
(See table 5-1)
2. Using Row-Level attributes (See Table 5-2)
It affect an entire row and place these
attributes in the beginning <TR> tag.
– ALIGN (Horizontal align: LEFT, CENTER, RIGHT-
LEFT is default)
– BGCOLOR (define background color for cells within
the row)
– VALIGN (Vertically align: TOP, MIDDLE, BOTTOM-
Default is MIDDLE)
3. Using Cell-Level attributes (See Table 5-3)
It affects only content of one cell and plce
these attributes at the beginning <TD> tag. It
takes precedence over low-level attributes:
<TR ALIGN=CENTER><TD>Center-aligned text</TD><TD
ALIGN=RIGHT>Right-aligned Text</TD></TR>
SPANNING COLUMNS
• COLSPAN attribute span multiple columns of a table
• It always span to the right
Example:

<TABLE BORDER>
<!-- <CAPTION>76-84mm Socket Pricing</CAPTION> -->
<TR><TH COLSPAN=3>76-84mm Socket Pricing</TH></TR>
<TR>
<TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH>
</TR>
<TR><TD>3476-AB</TD><TD>76mm Stock</TD><TD>45.00</TD></TR>
<TR><TD>3478-AB</TD><TD>78mm Stock</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Stock</TD><TD>50.00</TD></TR>
</TABLE>
SPANNING ROWS
<TABLE BORDER>
<CAPTION>76-84mm Socket Pricing</CAPTION>
<TR><TH COLSPAN=4>76-84mm Socket Pricing</TH></TR>
<TR>
<TH>Stock Number</TH><TH>Description</TH><TH>List
Price</TH><TH>Discount</TH>
</TR>
<TR><TD>3476-AB</TD><TD>76mm Stock</TD><TD>45.00</TD><TD
ROWSPAN=3>10% DISCOUNT</TD></TR>
<TR><TD>3478-AB</TD><TD>78mm Stock</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Stock</TD><TD>50.00</TD></TR>
</TABLE>
 TABLE POINTER
When designing HTML tables, observe the
following guidelines
• Write easy-to read code
• Remove extra spaces -See figure 5-11
• Center Table – See fig. 5-12
• Stack Table – See fig. 5-13
• Nest Table – See fig. 5-14
 HOME WORK

CREATING APAGE TEMPLATE

CHAPTER: CREATING PAGE TEMPLATE
PAGE NO. 121
 UNIT - II
Web Typography – Type Design Principles,
Controlling Typography with the <FONT> Element,
Controlling Typography with Cascading Style Sheet,
Styling with CSS
Graphics and Color – File Format Basics, Computer
Color Basic, Choosing a Graphics Tool, Using the
<IMG> Element, Working with Hexadecimal Colors
HTML Frames – Understanding Frames, Frame
Syntax, Targeting in Framesets, Planning Frame
Content
Publishing and Maintaining Your Web Site
Publishing Your Web Site, Testing Your Web Site,
Refining and Updating Your Content, Attracting Notice
to Your Web Site
 WEB TYPOGRAPHY
You will understand
• Principles for type design on a Web site
• Use the <FONT> element
• Why you should use Cascading Style
Sheet instead of <FONT>
• Create Style rules using the CSS
language
• Selectively apply CSS style rules
 TYPE DESIGN PRINCIPLES
• Type is a flexible medium that can express
emotion, tone and structure based on the
type choices you make. You also can go
overboard by using too many faces and
sizes, So you must stick with fonts that
your user installed on their computers. If
your font not available browser substitute
the default font.
As you work with type, consider the following principles
for creating an effective design:
• Choose fever fonts and sizes
– Page heading (24), sub heading(18) and body text(12)
• Use available fonts
– See table 6-1 for available font on different OS
– Time New Roman is default
• Design for legibility
– The size and face of the type use on your pages determine
the legibility of your text
– Font that are legible on paper can be more difficult to read
on screen
– Keep font big enough.
• Avoid using text as graphics
 CONTROLLING TYPOGRAPHY WITH
<FONT> ELEMENT
• Setting font size
– <Font size=6>Some text</Font>
– <Font size=+2>Some text</Font>
• It set size=5:  Default size =3 and +2 = 5
• Specifying font alternates
– <Font size=5 face="ARIAL, batang">Some
text</Font>
• Setting font color
– <Font size=5 face="ARIAL, batang"
color=red>Some text</Font>
 CONTROLLING TYPOGRAPHY WITH
CASCADING STYLE SHEET
• CSS offer much greater control over <FONT>
• Gain more control with less code
– If you want every H1 heading comes in green
and centered, doing so using <FONT> you need
to write following code for every instance of H1:
• <H1 align=center><Font color=green>The Text</Font></H1>
– with CSS you can express this style once as a
rule in style sheet:
• H1{color:green; Text-align: center}
– This style rule affect every <H1> elements on
any page that use the CSS
 CSS BASIC
It is based on rules that select an HTML
elements and declare style characteristics
for the elements. You can state set of
rules, known as style sheet, in the head
section of an HTML documents or include
them in a separate documents known as
an external style sheet used when working
with number of HTML documents.
 Understanding style rules
<html> Selector
<head> Declaration
<style type="text/css">
H1 { color= red }
p { color: blue; font-size: 20pt }
</style> </head>
Property Value
<body >
<h1>Hi how are you my dear ......</h1>
<p>
Hi! I am fine Here
how about you?
Lets come and meet me at my residence address... We will
have lots of fun
</p>
</body>
</html>
 LINKING WITH AN EXTERNAL
STYLE SHEET
• A new file names is style1.css
/* Stylesheet #1 */
H1 {color=red}
p {color:blue; font-size: 20pt}
• Another file name abc.html
<head>
<link href="style1.css" rel="stylesheet">
</head>
Href attributes specify the URL of the style sheet and
all relative file location rules apply
Rel attributes specify the relation ship bet linked and
current documents
You only have to change in only one documents and it
affect all the pages
 CSS selection Techniques
• Selecting Multiple Elements
• Selecting by Context
• Selecting with the CLASS attributes
More complex selection includes artificial
division using two elements
• <DIV> Block Division
• <SPAN> Inline Division
• These are useful with combination with
CLASS attributes and allow to create entirely
new HTML elements. You can use these
techniques in external style sheet
• Selecting Multiple Elements
– If you want to apply same declaration for two or
more selector then use:
<STYLE TYPE=“text/css”> <STYLE
TYPE=“text/css”>
H1 {Color: Green}
H1,H2 {Color: Green}
H2 {Color: Green} </STYLE>
</STYLE>
• Selecting by Context
– It specify the exact context in which a style is
applied. To specify that <I> elements appear blue
only within <H1> elements use following code:
<STYLE TYPE=“text/css”>
H1 I {Color: Blue}
</STYLE>
This rule state that <I> elements appear blue only when they
within an <H1>
Selecting with the CLASS attributes
• It allows you to write rules and then apply
them to groups of elements.
• It allows you to define your own tag and apply
them anywhere you want
• The general syntax is :
. Class-name { Declaration} (. Is a flag character
indicates selector is a class selector)
Ex: <style type=“Text/css”>
.QUOTE {color: red}
</style>
– Use class attributes in the documents:
– <p Class=“quote”>Some Text here </p>
Working with <DIV>
It specify logical division within a document that have
their own name and style properties
<style type=“text/css”>
DIV.INTRO {Color: red}
</style>
<DIV CLASS=“INTRO”>SOME TEXT </DIV>
and <SPAN> elements
It specify inline elements within a document that have
their own name and style properties
<style type=“text/css”>
SPAN.LOGO {Color: red}
</style>
Welcome to the <SPAN CLASS=“LGO”> Wonder
Software </SPAN> web Site
 CSS FONT PROPERTIES
• Font families and alternates
– Font-family:arial, Font-family: Arial, Helvetica
• Font Size
– Font-size=18pt (See Table 6-2)
• Font weight
– Font-weight: bold (normal, bold, Bolder,
Lighter)
• Line Weight
– Line-height:30pt
•Letter spacing
Letter-spacing: 2pt

•Text indent
Text-indent: 24pt

•Color
Color: red and
background-color: blue
SPECIFYING BLOCK LEVEL SPACE VALUES
• Padding: The area between the text and
border—
– Padding-top, Padding-bottom, Padding-left,
Padding-right
– Ex: p {padding-left:24pt; Padding-right:50pt}
• Border: The area separating the padding and
margin
– Margin-top, Margin-bottom, Margin-left, Margin-
right
– Ex: p {margin: 30px}
• Margin: The area outside the border
– {BORDER: STYLE WIDTH COLOR}
– Ex: {Border: solid 2pt red}
 HOME WORK

STYLING WITH CSS

CHAPTER: WEB TYPOGRAPHY
PAGE NO. 161
 GRAPHICS AND COLOR
• Understand difference between the Web-
based image file formats: GIF, JPG and
PNG
• Know which type of file format is to use for
which type of image
• Understand the basic of computer color
• Use <IMG> element and attributes to
display image effectively
• Use hexadecimal color values to add color
to your pages
 FILE FORMAT BAICS
• We currently use only three file formats:
– GIF (Graphics Interchange Format)
– JPG (Joint Photographics Expert Group) JPEG
– PNG (Portable Network Graphics)
• GIF: (Graphics Interchange Format)
– It is designed for online delivery of graphics.
– It uses lossless compression technique
– The Color depth is 8-bit, allowing a palette of no more
then 256 colors
– If we use fever color, compression is big and smaller
file size
– It is not best for photographs or more complex
graphics
– You can create animation using multiple images
• JPG (Joint Photographics Expert Group) JPEG
– Best for photographics and continues tone images
– 24-bit images that allows millions of colors
– It do not use palette to display
– It uses lossy compression routine: loss of quality
but unnoticeable
– Faster download
– Using Adobe photoshop or other imaging software
you can translate photographics images into JPG
format and also balance amount of compression
versus the resulting image quality. Higher the
compression, lower the image quality.
• PNG (Portable Network Graphics)
– Designed specially for the Web
– Available from 1995
– Not popular because lack of browser support
– It support 8-bit index color, 16-bit grayscale,
and 24-bit truecolor images
– It does not compress a JPG do
– It does not support animation
– Another format support animation i.e. MNG
(Multiple Network Graphics Format)
– Now a day browser supporting
 COMPUTER COLOR BASIC

• Computer monitor display color by mixing

three color i.e. (RGB) called color channel.
• Monitor can express a range of intensity
for each color channel from 0 (Absence of
color) – 255 (Full intensity of color)
• Color vary from monitor to another based
on user preferences and brand of
equipments
• Color depth
– Amount of data use to create color on display is
called color depth
– If monitor display 8-bit data in each of the 3
color channel i.e. (8 X 3 = 24), it has 24 color
depth.
– 24-bit color depth can contain 17 million
different colors and are called true color images.
– If you monitor have only 16-bit color depth is it
called high color and some have 8-bit color
depth.
– If monitor not supporting any color, then it
makes this color by mixing available color.
• DITHERING
– Browsers mix it own color if you display 24-bit
image on 8-bit monitor or file form not support
– 8-bit monitor have fever color to work (256 only)
– This type of color mixing is called Dithering
– The dithering will be most apparent in
gradations, shadow.
– See figure 7-2 show the same image in both
JPG and GIF format at 8-bit, 256 color
 – JPG file on the left has lot of dithering in the sky
and GIF on right exhibits a different color
matching called banding (Banding is an effort to
match the closest color from GIF palette to the
original color in the photo. (Non-dithering image
< dithering image), but banding images mean
unacceptable images.
• Using non-dithering colors
– We can create images that will not use dithering
process
– 216 non-dithering colors that re shared PCs and
Mac are Web palette and browser-safe color
– These color display properly across both
platforms
– It applies to GIF and 8-bit PNG and not for JPG.
 CHOOSING GRAPHICS TOOL
• Adobe Photoshop and Illustrator
– Full-featured, expensive, and takes time to master
– Adobe illustrator is a high end drawing/painting
tool
• Graphics Workshop Professional
• Lview Pro
• Macromedia Fireworks
• Paint Shop Pro
• Ulead PhotoImpact
– (Last 5 product are available in less than $100
and contain full range if image-editing features.
USING THE <IMG> ELEMENT
• <IMG> is a replaced element means
browser replace the <IMG> element with
image file reference in SRC attribute.
• <IMG> and empty element so never use
closing tag
– Ex: <IMG SRC=“logo.gif”>
• For other attributes see table 7-2
• We can replace <IMG> with CSS
Specifying ALT, Width and Height attributes
<IMG SRC=“trains.gif” width=305 Height=185 Alt=“Trains Picture”>

• Removing Hypertext Border from image

<IMG SRC=“trains.gif” width=305 Height=185 Alt=“Globe” Border=0>

• Aligning text and Images

<IMG SRC=“trains.gif” Align=top Alt=“Globe” Border=1>
<IMG SRC=“trains.gif” Align=Bottom Alt=“Globe” Border=1> (Default)
<IMG SRC=“trains.gif” Align=Middle Alt=“Globe” Border=1>

• Wrapping text
<IMG SRC=“trains.gif” width=125 Height=185 alt=“P1” Align=left>
<IMG SRC=“trains.gif” width=125 Height=185 alt=“P1” Align=right>

• Adding white space around images

<IMG ALIGN=LEFT ALT=“SAILBOAAT” Border=0 HSPACE=15
VSPACE=15 SCR=“SAIL.GIF”>
 WORKING WITH HEXADECIMAL COLORS
• HTML use hexadecimal number to express RGB
color values
• Hexadecimal numbers are base-16 numbering
system, so the numbers run from 0-9 and A-F.
• It is a six digit numbers:
– First Two Digit  R (Red)
– Next Two Digit  G (Green)
– Last Two Digit  B (Blue)
• It always contain in double quotes proceeded ‘#’.
– Ex: <Body BGCOLOR=“#FFFFFF”>

• Cascading style sheet also accept hexadecimal

color values.
 CHANGING LINK COLOR

• LINK: The unvisited color. The default is

blue
• ALINK: The active link color. This is the
color that displays when the user points to
a link and holds down the mouse button.
The default is Red.
• VLINK: The visited link color. The default
is purple
– Ex: <Body LINK=“CC3399” VLINK=“9900FF”>
 HTML FRAMES
Frame element partition the canvas area of
the browser into multiple windows called frames
and each frame can display separate HTML
document
• Understand the benefits and drawback of the
frame
• Understand use and syntax of Frame
• Customized Frame characteristics like scroll,
border, margin etc…
• Understand the frame targeting and special
targeting names
• Design content to fit frameset properly
• Design framesets that accommodate different
screen resolution
 INTRODUCTION
• Introduce by Netscape for the 2.0 release of its
browser
• Frameset now supported variety of browsers
(See figure 8-1)
It has some benefits and limitations
• Allow user to scroll independent without
affecting the content of adjoining frame
• Some content can always visible to the user
like search option, table of content etc…
• It works fine if keep them simple. (2 or 3
frames are enough in a page)
Limitations
• Bookmarks
– Not allow user to bookmark individual pages from a web
site
• Download overhead
– Browser is loading more then one document
• Confusing navigation
– User can became confuse if complicated frame document
set without enough navigation choices to let user jump to
the page of their choice.
• Virtual confusion
– Too many frame within the browsers window with its own
scroll bar can confuse
• Frames and search engine
– Frameset code contains no actual content
• User preferences
– If user want to display content without frame
<HTML>
FRAME SYNTAX
<HEAD><TITLE>FRAME ROWS</TITLE></HEAD>
<FRAMESET ROW=“50%, 50%”>
<FRAME SRC=“TOP.HMTL”>
<FRAME SRC=“TOP.HMTL”>
</FRAMESET>
</HTML>

<HTML>
<HEAD><TITLE>FRAME COLUMNS</TITLE></HEAD>
<FRAMESET COL=“150, *”>
<FRAME SRC=“LEFT.HMTL”>
<FRAME SRC=“RIGHT.HMTL”>
</FRAMESET>
</HTML>
THE <NOFRAMES> Tag
• It provide alternate page for user who do not have a
frame-compliant (SUPPORT) browser
<HTML><HEAD>
<TITLE>FRAME COLUMNS</TITLE></HEAD>
<FRAMESET COL=“75%,25%”>
<FRAME SRC=“LEFT.HMTL”>
<FRAME SRC=“RIGHT.HMTL”>
<NOFRAMES>
<BODY>
(Alternate page HMTL code)
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
• NESTING FRAME
– See Figure 8-5 Second row is again divided into
two columns
– Nesting allows you to break the screen into both
rows and columns frames
<HTML>
<HEAD><TITLE>NESTING FRAME</TITLE></HEAD>
<FRAMESET ROW=“40%,*”>
<FRAME SRC=“TOPNAV.HMTL”>
<FRAMESET COLS=“20%,80%”>
<FRAME SRC=“LEFT.HMTL”>
<FRAME SRC=“RIGHT.HMTL”>
</FRAMESET>
</FRAMESET>
</HTML>
NOFRAMES, RESIZING, SCROLLING BAR,
FRAMEBORDER AND FRAME MARGIN

<HEAD><TITLE>NESTING FRAME</TITLE></HEAD>
<FRAMESET ROWS='100,*' FRAMEBORDER=0
FRAMESPACING=0>
<FRAME SRC='red1.HTML' NORESIZE SCROLLING=NO>
<FRAMESET COLS='80,*'>
<FRAME SRC='img.HTML' NORESIZE
marginwidth=10 marginheight=50>
<FRAME SRC='red.HTML'>
</FRAMESET>
<NOFRAMES>
<body>
<H1>Browser is not supporting FRAMES
</body>
</NOFRAMES>
</FRAMESET>
</HTML>
 TARGETING IN FRAMESET
• One frame display information consistently
while the content of second frame might
change based on the user’s choice.
• By default a link loads into the same frame
from which it was selected
• You can change it by targeting frameset. To
target from one frame to another you must
perform two task:
– Name your frames using the NAME attributes in
the FRAME element
– Target links to display their content in the named
frame
• Naming Frame
– To name the frame add name attribute to the
frame
<HTML>
<HEAD><TITLE>FRAME Targeting</TITLE></HEAD>
<FRAMESET COLS="150,*" BORDER=0>
<FRAME SRC="red1.html" SCROLLING=NO NORESIZE>
<FRAME SRC="red.html" Name="Main">
</FRAMESET>
</HTML>
 PUBLISHING AND MAINTAINING
YOUR WEB SITE
• To make you web site live, you transfer
site files to a Web server.
• A web server is a computer connected to
the internet and running server software
and this s/w used HTTP to server HTML
files to web browser clients.
• After choosing web server select file
transfer software and upload the web sites
files from your development machine to
the Web server.
Choosing Internet Service Provider

• This is a company that host your Web

pages on a Web server, making them
available to any one who know your URL.
• It provide space on web server only
• Small web site (Around 15-20 pages need
1-2 MB) and for large one 10 MB.
 Buying a domain Name
• Check whether your domain name is
available or not
• OR to register your own domain name visit
Network Solution (www.networksolution.com)
• It is a company responsible for registering
.com, .net, .org domain names
• Domain names must be removed every two year
• To complete the process you need IP address
that you will get from ISP
 ISP COMPARISON CHECKLIST
• Is the ISP local or national?
• Does the ISP have enough local POPs (Point to
Presence) in your area code?
• Is their space available on their Web server for your
web site?
• Does the ISP offer technical support? When is
support staff available?
• How many email address do you get in an email
account?
• Does the ISP provide s/w such a FTP client?
• Does the ISP support the largest connection
technologies?
• Does the ISP offer enhanced services, such as SQL
database support, Secure Socket Layer (SSL) CGI
scripting and Multimedia technology?
 USING THE FILE TRANSFER PROTOCOL TO
UPLOAD FILES
• You need FTP software called FTP client
• Some s/w like FrontPage, Dreamweaver
ete… include built in s/w.
• You also can choose many shareware such
as CNET, Shareware.com and search FTP
client (See fig 9-3 and 9-4) FTP programs to
upload your files.
• WS_FTP32 developed by Ipswitch software,
but most FTP client work same.
 TESTING YOUR SITE
• Testing Consideration
– Multiple Browsers
– Multiple Operating System
– Connection speeds
– Display type
• Develop a feedback form
– Did you find information you needed?
– Was it easy or difficult
– Did you find the content easy to read
– Did you find web site easy to navigate
 ATTRACTING NOTICE TO YOUR WEB SITE
• Working with search engines
• Use meaningful titles
• Using <META> Elements (Empty tag)
– It allow you to add your web site in search engines
(like AltaVista, Excite, Inktomi and HotBot but other
search engine ignore)
– <META> is resided in <HEAD> allow to specify
information about documents.
– <META> used Name and Content attributes
– See example in next page
• Be careful with frames
• Use Alt text with images
Name Attributes Value
– Author: The Author of the Page
– Description: A short Text-based
description of the content of the web site
– Keywords: A comma separated list of
keywords that are potential search terms a
user might use to find your site
– Generator: This name and version
generated by page-authoring programs
Example on <META> element

<HTML>
<HEAD>
<META NAME=“Description” CONTENT=“Joel Sklar,
Specialising in course development and Delivery on
Web”>
<META NAME=“Keywords” CONTENT=“Joel, Joel Sklar,
Sklar, HTML, XML, Web, Course Design, Course
Development, XML Links”>
</HEAD>
-----
-----
</HTML>
 UNIT III
HTML 4.0 Tag Reference, Global
Attributes, Event Handlers, Document
Structure Tags, Formatting Tags, List
Tags, Hyperlinks, Image & Image map,
Table Tags, Form Tags, Frame Tags,
Executable Content Tags and Style
Sheets.
 HTML TAG’S
• The tag’s keywords Ex: In <Input> tag’s
keyword is Input.
• Types of Tag
– Container tag: It activates and effects and
companion tag that discontinues the effect
• Ex: <I>Italic </I>
– Standalone tag (empty tag): It does not have
companion tag.
• Ex: <IMG>
• Keywords:
– The tag’s function: A description of the effect
or page element that the tag control
– The tag’s syntax: HTML is derived from SGML
by applying SGML construct according to a
certain set of rules. These rules define a tag’s
syntax.
– The tag’s attributes: An attributes modify how
a tag’s effect is applied. Some tag take no
attributes and other take several. Use of
attributes is required (such as SRC in IMG
tag) and use of other may be optional.
 GLOBAL ATTRIBUTES
• It is universal and usable with any tag
– STYLE:
• Bind style information to the tag
• Use with all but <BASE>, <BASEFONT>, <HEAD>,
HTML>, <META>, <PARAM>, <SCRIPT>, <STYLE>
and <TITLE>
• Ex: <H2 STYLE=“color: red”>RED Heading</H2>
– LANG:
• Useful when you are marking up content in multiple
languages
• The value of LANG gives “Head-Up” to browser what
language is used
• It is set with two-char language code: “fr” denotes
French; “de” denotes German and son on.
– DIR:
• It is refer to the directionality (L-T-R) or (R-T-L) of
text
• It can take one value LTR or RTL
– TITLE:
• It enable you to specify the descriptive text to
associate with the tag
• This info is helpful with non-visual browsers
– ID:
• It is used when you need a unique identifier for a tag
• Generally used in DHTML
– CLASS:
• Used to create different class of the same tag.
• Ex:<A HREF=“xrefs.html CLASS=“cross-reference”>…</A>
<A HREF=“defns.html CLASS=“defination”>…</A>
<A HREF=“biblo.html CLASS=“biblography”>…</A>
These creates three classes of the <A> tag. After these
classes are established, you can reference them
elsewhere in your documents. One popular application
of this is in style sheet
A.cross-reference {color: navy}
A.defination {color: yellow}
A.bibliography {color: red}
The style information above would color cross-reference
links navy blue, definition links yellow and bibliography
links red.
 EVENT HANDLERS
• Event handler allows to trigger the execution
of script code embedded in HTML documents
• Each event handler is tied to a specific event
• When a user click submit button on a form,
you can capture that event and launch a field
validation script using onsubmit event handler
<FORM ACTION=“register.asp” METHOD=“POST”
onsubmit=“validate();”>
When user clicks the submit button, the script
function named “validate()” fires and check the
data for formatting and other validation
(See Table 3.2, pg 62 chap 3 HTML tag reference)
 DOCUMENT STRUCTURE TAGS
• Every HTML document has three major
component and DST defines those that defines
each component
– HTML declaration
– Head
– Body
• <HTML>
– Type: Container
– Function: Declare document to be used an HTML
doc. All doc. Content and supporting HTML code
goes bet the HTML and </HTML> tags.
– Syntax: <HTML> - - - - - - - - </HTML>
– Attributes: It take only VERSION attribute but
deprecated in favor of version info. Being specified in
<!DOCTYPE> tag (SGML tag not HTML tag)
• <HEAD>
– Type: Container
– Function: Contains the tag that compose the
document head
– Syntax: <HEAD> - - - - - - - </HEAD>
– Attributes: It can take PROFILE attribute, which
set equal to a space-separated list of URLs that
point to meta data profiles form the document.
<HTML>
<HEAD PROFILE=“http:///www.server.com/profiles/”>
</HEAD>
HTML code goes here
</HTML>
• <BASE>
– Type: Standalone
– Function: Declare global references value for the
HREF and TARGET attributes.
– HREF is used to compute relative URL references
– TARGET used to identify the frame into which
linked document should be loaded
– Syntax:<BASE HREF=“base_url”> or
<BASE TARGET=“frame_name”>
– Attributes: It can take either HREF or TARGET
– If you need to specify a base URL and target
frame, you need to have two <BASE> tag in the
<HEAD>
– HREF: specifies the reference URL that is used to
help compute relative URL.
• IF BASE HREF RLS is
http://www/myserver.com/sport/hockey/skates.html and
you used relative URL is punks.html elsewhere in the
document for example relative path will really point to
http:///www.myserver.com/sport/hockey/punks.html
– TARGET: Specifies the default frame name to
which all links are targeted.
<HEAD>
<BASE HREF=“http:///www.myserver.com/index,html”>
<BASE HREF=“bigframe”>
</HEAD>
This code sets the document’s base URL to
http://www.myserver.com/index.html and the base
frame for targeting hyperlinks to the frame named
“bigframe”.
• <ISINDEX>
– Type: standalone
– Function: produced a single line input field
used to collect query information.
– Syntax: <ISINDEX PROMPT=“Please enter
value to search for … “>
– Attributes: The PROMPT attributes specifies
what text should appear before the input field
– <ISINDEX> was used in the early days when
form tag had yet to come.
Example:
<HEAD> <ISINDEX PROMPT=“Please enter
value to search for … “> </HEAD>
• <META>
– Type: standalone
– Function: Define document meta information, such
as keyword, expiration date, author generation
software used and many more.
– Also support dynamic document technique in which
browser loads a new document after specific time.
– Syntax
– <META HTTP-EQUIV=“header” CONTENT=“Value”>
OR <META NAME=“header” CONTENT=“Value”>
– Attributes: HTTP-EQUIV: Specified a type of HTTP
header to be sent with the document. Value of the
header will be
• REFRESH: Refresh page after specific delay
• EXPIRES: It is date after which file is not reliable
– NAME: Set name of doc meta-variable you want
to specify. The value of the variable given in the
content attributes.
– Typical value for NAME include AUTHOR,
KEYWORDS, GENERATOR and DESCRIPTION.
– CONTENT: Specifies either the HTTP header or
the value of the meta-variable.
– Example:
<head>
<META HTTP-EQUIV=“Refresh” CONTENT=
“5;URL=http://www.myserver.com/index2.html”>
<META NAME=“AUTHOR” CONTENT=“Eric Ladd”>
<META NAME=“KEYWORD” CONTENT=“Main Page,
Welcome, neat stuff”>
. . . .. .
…….
</head>
• <LINK>
– Type: standalone
– Function: Denote linking relationship between two
files.
– Syntax <LINK HREF=“url_of_linked_file”
TITLE=“title” REL=“forward_relationship”
REV=“reverse_relationship”>
– Attributes: HREF-Set equal to the file to which
you are making the linking the linking reference.
HREFLANG-Specifies the language code for the
linked file. MEDIA-Provide the intended display
destination for the linked document. The default
value of media is “screen”. TARGET-Specifies
which frame to target.
 TITLE-Gives the link a descriptive title. REL-
Specifies the relationship of the linked file to
the current file. REV-Specifies how to current
files related to the linked file. Possible values
of the REL and REV: Copyright, Help, Home,
Index, Next, Previous, Stylesheet, Up
– Example:
<head>
<LINK HREF=“/style/styles.css” REL=“Stylesheet”>
<LINK HREF=“/index.html” REL=“Home”>
<LINK HREF=“/help.html” REL=“Help”>
<LINK HREF=“back_one.html” REV=“Previous”>
-----
-----
</head>
• <SCRIPT>
– Type: container
– Function: Contains script code referenced in the body of
the document.
– Syntax
– <SCRIPT LANGUAGE=“Script Language”>
……scripting code goes here …….
</SCRIPT>
– Attributes: CHARSET-Denotes which character encoding
scheme to use. LANGUAGE-Set the scripting language.
Not required when TYPE is used. SRC-Specifies the URL
of a file containing the script code, if not contained
between the <script> and </script>. TYPE-Set the MIME
(Multipurpose Internet Mail Extensions) type of script code
usually text/javascript or text/vbscript. Need in HTML 4.0
• <NOSCRIPT>
– Type: Container
– Function: Provide alternate content to use if a
script cannot be executed or browser not
support script.
– Syntax:<NOSCRIPT> alternate code
</NOSCRIPT>
– Attributes: None
– Example:
<SCRIPT LANGUAGE=“VBSCRIPT”>
Document.write(“Hello, World”);
</SCRIPT>
<NOSCRIPT>
You either have scripting turn off or your browser
doesn’t understand VBScript.
</NOSCRIPT>
• <STYLE>
– Type: Container
– Function: Provide style information for
document.
– Syntax:
<STYLE TYPE=“mime_type”
MEDIA=“media_type” TITLE=“title”>
Style code goes here
</STYLE>
– Attributes: It takes three attributes
• MEDIA: Which media type styles are to be used.
(visual browser, speech based browser etc..)
• TITLE: Gives style information a descriptive title.
• TYPE: Set the internet content type for style
language. Generally TYPE=“Text/css1” to denote
the use of the style language cascading style
sheet level 1 specification. TYPE is required
attributes of the <STYLE> tag.
• Example:
<STYLE TYPE=“text/css1”>
<!- -
BODY {font:10 pt Palatino; color: silver; margin-left:0.25 in
H1 { font: 18 pt Palatino; font-weight: bold}
H2 { font: 16 pt Palatino; font-weight: bold}
-->
</STYLE>
• <TITLE>
– Gives descriptive title to a document
– It shows up in browser windows title bar and
history listing
– If it is not given browser displays just URL of file
– Search engines such as Yahoo or Alta Vista look
for title information when they index a document
Syntax:
<TITLE> Document title goes here </TITLE>
Attributes: None
– Example:
<title> The advantages of corporate web site </title>
• <BDO>
Type: Container
Function: When mixing language in the document it is
necessary to give direction to read (Left-to-Right to Right-
to-left
The approach called Bidirectional Algorithm is used to
ensure proper presentation
When you want to override the bidirectional algorithm for
a block of text you can enclosed that text in the <BDO>
tags.
Syntax: <BDO DIR=“LTR|RTL”> ………… </BDO>
Attributes: Only one attribute it can take i.e. DIR, which can
be set to LTR (Left-to-right) or RTL (Right-to-left)
direction.
Example: <BODY LANG=“he” . . .> <!– Hebrew Lang
context – RTL Directionality -->
<BDO DIR=“LTR”> Here some English text </BDO>
• <BODY>
– Type: Container
– Function: Contains all content tags and that
compose the document body
– Syntax:
<BODY BGCOLOR=“Background_color”
BACKGROUND=“Background_image”
LINK=“Unvisited_link_color” ALINK=“Active_link_color”
VLINK=“Visited_link_color” TEXT=“Text_color”>
Document body goes here
</BODY>
Example:
<BODY BGCOLOR=“White” Text=“#FF0088”
LINK=“#DD0F00” VLINK=“#00ff9A”> All document tag sere
</BODY>
 FORMATTING TAGS
It provide the facility to change the way the
text is displays on a browser. You can
apply formatting instruction at two level of
the documents
– Text level (Means you are marking up at least
single character)
– Block level (Means you are formatting a
specific logical chunk of documents)
 Text-Level Formatting
• It can occur in one of two ways
– Font Formatting or Physical style
Make changes to the font properties of the
text i.e. physical changes
– Phrase formatting of Logical style
It describe how the text is being used in the
context of the document i.e. logic of the text
 FONT FORMATTING
• <B> : Container tag; for bold

• <BASEFONT>
– Type: Standalone
– Function: Set base size, typeface, color
properties of the body text font
– Attributes: COLOR, FACE, SIZE
– Syntax: <BASEFONT SIZE=“Size” FACE=“List of
type faces” COLOR=“Color”>
– Example: <BASEFONT SIZE=5 FACE=“Arial,
Helvetica, Times” COLOR=“navy”>
– Related Tag: <FONT> used to modify
<BASEFONT> attributes
• <BIG>
– Type: Container
– Function: Make text bigger then the default size
– Syntax: <BIG> … big text goes here … </BIG>
– Example:
<BIG>D</BIG>rop <BIG>C</BIG>aps are nice on screen effect.
– Related tag: <SMALL>
• <FONT>
– Type: Container
– Function: Contains text whose font properties are
to be modified which is specified in <BASEFONT>
– Syntax:
<FONT SIZE=“size” COLOR=“color” FACE=“list of type faces”>
… Text with modified font properties…
</FONT>
• <I>
– Type: Container
– Function: Contains text to be rendered in italic
– Syntax: <I> Some Text </I>
– Attributes: None
– Example:
In just bought the Beatles <I> Abbey Road</I> on CD.
• <S>, <STRIKE>
– Type: container
– Function: Contains text to be marked with a
strikethrough character
– Syntax: <S> some text </S>
or <STRIKE> some text </STRIKE>
• <SMALL>
– Type: Container
– Function: Make text smaller then the default size
– Syntax: <SMALL>...smaller text goes here … </SMALL>
– Example:
<SMALL>”Ssssssshhh!”</SMALL>, He whispered in a tiny voice.
– Related tag: <BIG>
• <SUB>: Container, Contain text to be
subscript to the text that precedes it.

• <SUP>: Container, Contain text to be

superscript to the text that precedes it.
• <TT>
– Type: Container
– Function: Contains text to be rendered in a fixed-
width font. Typically this font is courier or some
kind of typewriter font.
– Syntax: <TT> text here </TT>
– Example: Computer will then display the
<TT>Login: </TT> prompt.
• <U>
– Type: Container
– Function: Contains text to be rendered with an
underline
– Example: All first year medical student purchase
<u> Gray’s Anatomy</U>
 PHRASE FORMATTING
• <ABBR>
– Type: Container
– Function: Contain tag that is abbreviation of
something. A speech based browser for
example could know to look in an abbreviation
table for pronunciation if you marked up “Dr.’
with <ABBR> tag.
– Syntax: <ABBR> acronym goes here
</ABBR>
– Attributes: None
– Example:
She got her doctorate (<ABBR>PhD</ABBR>) from
the University of Virginia.
• <ACRONYM>
– Type: Container
– Function: Contain text that specifies an acronym.
This tag also useful for non-visual browser. It tell
speech-based browser to pronounce the letters in
the acronym on at a time instead pronounce the
acronym a a word.
– Syntax: <ACRONYM> acronym here</ACRONYM>
– Attributes: None
– Example:
Practical Extraction and Reporting Language
<ACRONYM> (PERL) </ACRONYM> is a popular CGI
scripting Language.
• <ADDRESS>
– Type: Container
– Function: Contains either a postal address or an
electronics address. Text marked with this tag
comes in italic.
– Attributes:
None
– Syntax:
<ADDRESS> Address goes here </ADDRESS>
– Example: If you have any comments, please send
them to <Address> [email protected]
</Address>
• <CITE>
– Type: Container
– Function: Contain a name of source from which a
passage is cites. The source name is typically
rendered in italic.
– Syntax: <CITE> …Citation source here… </CITE>
– Attributes: None
– Example: According to<CITE>HTML4.0 recommendation
<CITE>, the <FONT> tag has been deprecated.
• <DFN> -Define term
– Type: Container; Attributes: None
– Function: Denotes the defining instance of term.
IE display in italic.
– Syntax: <DFN> term being introduce here<DFN>
– Example: Freud proposed the idea of a
<DFN>catharsis</DFN> - a release of psychic tension.
• <EM> - Emphasized
– Type: Container; Attributes: None
– Function: contain text to be emphasized. Most
browser emphasized text in italic.
– Syntax: <EM>… some text here … </EM>
– Example: Please do <EM>not </EM> disturb the dog.
• <KBD>
– Type: Container; Attribute: None
– Function: Contains text that represents keyboard
input. Browsers rendered such text in fixed-width
size.
– Syntax: <KBD> … Text goes here …</KBD>
– Example: To begin, type <KBD>go</KBD> and
press ENTER
• <SAMP>
– Type: Container; Attributes: None
– Function: Contains text that represent the literal
output from a program. Such output is referred as
sample text.
– Syntax: <SAMP> program output goes here </SAMP>
– Example:Write prog. 2 print msg <SAMP>HELLO</SAMP>
• <STRONG>
– Type: Container; Attributes: None
– Function: Contain text to be strongly emphasized.
Means in boldface.
– Syntax: <STRONG>Strong text here </STRONG>
– Example:
<STRONG>Stop!</STRONG> Do not process further.
• <VAR>
– Type: Container; Attributes: None
– Function: Denotes a variable from a computer
program. Variables are typically rendered in a fixed
width font.
– Example: The <VAR> RecordCount </VAR> variable is
set to a number of record that the query retrieved.
 BLOCK LEVEL FORMATTING
• <BLOCKQUOTE>
– Function: Contains quoted text that is to be
displayed indented from regular body text.
– Attributes: If you are quoting from web you can
set the CITE attributes equal to the source URL.
– Example: Fans of school house Rock will always be
able to recite the introduction of the United States
Constitution:
<Blockquote>We, the people, in order to form a more
perfect Union… </Blockquote>
– Related tag: <Q> is used to denote quoted text in
a line with the body text.
• <BR>
– Type: Standalone
– Function: Insert line break. Carriage return in
HTML code do not translate line break on the
browser, so author themselves need to insert line
break. <BR> add no additional vertical spaces
after the break.
– Syntax: <BR>
– Example:
First Name: <INPUT type="text" Name="fnmae"><br>
Middle Name: <INPUT type="text" Name="mnmae"><br>
Last Name: <INPUT type="text" Name="lnmae"><br>
• <CENTER>
– Type: Container; Attributes: None
• <DIV>
– Type: Container;
– Function: Define a section of a document that
requires a special alignment.
– Attributes: ALIGN
– Syntax:
<DIV ALIGN=“LEFT|RIGHTCENTER|JUSTIFY”> ……. </DIV>
– Example:
<DIV ALIGN=“LEFT|RIGHTCENTER|JUSTIFY”>
Everything in this section is right-justifies. Hard to read
</DIV>
• <HR>
– Type: Standalone; Attributes: ALIGN,NOSHADE,
SIZE, WIDTH
– Example: <HR noshade width=80% size 4>
• <H1>-<H6>
– Type: Container;
– Attributes: LEFT (Default), RIGHT, JUSTIFY, CENTER
– Syntax:
<Hn ALIGN=“LEFT|RIGHT|CENTER|JUSTIFY”> … Level
n Heading … </Hn> Where n=1,2,3,4,5,6
• <P>
– Type: Container; Attributes: ALIGN
– Function: Denotes a paragraph. Most browsers
ignore the use of multiple <p> tag to increase the
amount of vertical space in a document.
– Syntax:
<P ALIGN=“LEFT|RIGHT|CENTER|JUSTIFY> text </P>
• <PRE>
– Type: Container Attributes: width (Deprecated in
HTML4.0)
– Function: Denotes text to be treated as preformatted
Browser rendered preformed text in fixed-width size.
It is easy to represent table information. White
spaces, carriage return tabs are not ignores.
– Syntax: <PRE WIDTH=“width of widest line”>Text…</PRE>
• <SPAN>
– Type: Container
– Function: Generic container tag defying a document
block. One popular use is for applying style info.
– Syntax: <SPAN STYLE=“Style information” ALIGN=“L|R|C|
J”> Range of text </SPAN>
 LIST TAG
• It is block level formatting
• HTML support five types of list
– Definition list
– Directory list (Deprecated)
– Menu list (Deprecated)
– Ordered (numbered) List
– Unordered (Bulleted) List
• <LI>
– Type: Container
– Function: Denote an item in a list
– Syntax:
<LI TYPE=“List_type” START=“Start_value”>List item</LI>
– Attributes:
• COMPACT: Instruct the browser to render the list item
in as small a space as possible.
• START: (Ordered Lists only) You can change the start
value of the numbering sequence from the default 1 to
any other.
• TYPE: (Ordered and Unordered) You can modify the
numbering scheme in an ordered list or the bullet
character in an unordered list by setting TYPE to one of
the list type available.
– ORDERED: 1,A, a, I, I
– UNORDERED: DISC, SQUARE, CIRCLE
• VALUE: Set the numbering value of the list item
• Example: <LI TYPE=“a” START=“4”>
• Even though <LI> is container tag, most people use it
as a standalone tag and most browser able to interpret.
• <DIR> (Used Ordered List)
– TYPE: Container
– Function: creates directory listing. Item in <DIR> is
bulleted and short ( < 20 char). Generally used for
indexes or telephone directory listing.
– Syntax: <DIR COMPACT>
<LI> LIST ITEM 1 </LI>
<LI> LIST ITEM 2 </LI>
</DIR>

• <DL>
– TYPE: Container
– Function: Denotes a definition list
– Syntax: <DL COMPAT> .. Term & Defiant ion .. </DL>
 – Example:
<DL>
<DT> Browser </DT>
<DD> A Program that allow a user to view World Wide Web Page
</DD>
<DT> Server</DT>
<DD> A program that fields request for web pages</DD>
</DL>
• <MENU> (Used Unordered List)
– TYPE: Container
– Function: Creates a menu listing. Menu list items
are typically short ( < 20 Char) arrange in single
column.
– Syntax: <MENU COMPAT>
<LI>Menu List Item 1 </LI>
<LI>Menu List Item 3 </LI> </MENU>
 – Example:
<Menu Compact> <LI>Enter a purchase order </LI>
<LI>Payroll Function</LI><LI>Generate
Invoices</LI></Menu>
• <OL>
– Type: Container
– Function: Creates an ordered or numbered list
– Syntax:
<OL TYPE=“1|A|a|I|i” Start=“value” CAMPACT>
<LI> Item 1</LI> <LI> Item 1</LI> … … …</OL>
• <UL>
– Type: Container; Function: Creates unordered list
– Syntax:
<UL TYPE=“DISC|SQUARE|CIRCLE” CAMPACT>
<LI> Item 1</LI> <LI> Item 1</LI> … … ...</UL>
 HYPERLINK TAGS
• <A>
– Type: Container
– Function: Can do two thing depend on attributes:
• HREF attribute <A> tag set up a hyperlink from
whatever contain is found between the </A> and </A>.
• NAME attribute <A> tag set up a named anchor within
a document that can be targeted by other hyperlink.
– Syntax:
<A HREF=“URL_of_Link_Doc” TARGET=“frame_name”
REL=“forward_link_type” REV=“Reverse_link_type”
ACCESSKEY=“Key_letter”
TABINDEX=“tab_order_position”> …. … … …</A>
OR
<A NAME=“anchor_name”> some text </A>
– Attributes:
• ACCESSKEY: It is a short cut key a reader can use to
activate hyperlink. Press combination of ALT+KEY
• HREF: Give the URL of the WEB resources to which
the hyperlink should point
• NAME: Specified the name of the anchor being set up.
• TABINDEX: Specified the link’s position in the
document’s tabbing order.
• TARGET: Tells the browser into which frame the linked
document should be loaded.
– Example:
<a href="red1.html" accesskey="P">click</a>
OR<A NAME=“TOC”> <H1> Table of content</h1></A>
You can point a hyperlink to it by using
<A HREF=“Index.html#toc”>Back to the Table </A>
 IMAGE and IMAGEMAP TAG
Placing an image on a page using <IMG> tag
• <IMG>
– Type: Standalone
– Function: Place an inline image into a document
– Syntax:
<IMG SRC=“URL_of_Image_file” WIDTH=“width_in_pixels”
HEIGHT=“height_in_pixels” ALT=“Text_description”
BORDER=“Thickness_in_pixel” ALIGN= “TOP|MIDDLE|
BOTTOM|LEFT|RIGHT”
HSPACE=“Horizontal_space_in_pixel”
VSPACE=“Vetical_space_in_pixel”
LONGDESC=“URL_of_Long_description” ISMAP
USEMAP=“map_name”>
 IMAGEMAP
• If you used graphical browser, many major
Web sites have large clickable images on
their main page. These images load the
documents depending on where the user
clicking on the images. The image is some
how “multilinked” and can take you to a
number of places, it is called imagemap.
• Linked region in an imagemap are called hot
region and it is associated with URL of the
document that is to be loaded when this
region is clicked.
• Imagemap comes in two flavor:
– Server Side: When user click a server side
imagemap the coordinates of click are sent to
server where the program process them to
determine which URL the browser should load.
– Client Side: When client side imagemap is clicked
the client (Browser) process the coordinates of
the user’s click rather then passing to the server.
It is most efficient approach because it reduce the
load of the server and eliminate the opening the
closing additional HTTP connection. HTML 4.0
support two tag for this process:
(1) <MAP>
(2) <AREA>
• <MAP>
– Type: Container
– Function: Contains HTML tag that defines the
clickable region (Hot region) on an imagemap
– Syntax: <MAP NAME=“map_name”>
…. Hot region defination …. </MAP>
– Attributes: The NAME attributes (Mandatory) gives
the map information a unique name so it can be
referenced by USEMAP attribute in the <IMG> tag
that place graphics.
• With imagemap data defines by the map named
navigation, you would reference the map in an <IMG>
tag as follows:
<IMG SRC=“navigation.gif” USEMAP=“#navigation”>
<IMG SRC=“navigation.gif” USEMAP=“maps.html#navigation”>
 – Example:
<map name="navigate">
<area shape="Rect" coords="00,00,58,68" href="red.html">
<area shape="circle" coords="120,246,150" href="frame.html">
<area shape="DEFAULT" href="frm.html">
</map>
• <AREA>
– Type: Standalone
– Function: Define hot region in client side
imagemap
– Syntax:
<AREA SAHPE=“RECT|POLY|CIRCLE|DEFAULT|”
COORDS=“Coordinate_list” HREF=“URL_of_Linked_doc”
TARGET=“Frame_name” ALT=“Alternate_text”
TABINDEX=“Tab_order_position” NOHREF
ACCESSKEY=“Key_letter”>
– Attributes:
• ACCESSKEY: Defines a short cut key combination to
activate hot region (ALT+ key)
• ALT: Provides the text alternative for the hot region. ALT
is also used by spoken-word browser for the visually
impaired.
• COORDS: Specify the coordinates that defines the region.
No coordinates needed when specify default region.
• HREF: Set equal to the URL of the document to associate
with the hot region.
• NOHREF: Deactivate the hot region by having it point to
nothing
• SHAPE: Specify shape of the hot region. DEFAULT is
used to point hot region which is not part of any region.
• TABINDEX: Defines hot region position in the tabbing
order of the page.
• TARGET: Defines into which frame to load linked doc.
 TABLE TAG
• It is useful layout tool
• Using table we can easily present
information
• Support for rendering parts of the frame
around a table
• Control over which boundaries to draw
between cells
• Table header, body and footer section can
be define separate entities.
• Table makes complex page layouts possible
because of the very fine alignment control
you have within the table.
• <TABLE>
– Type: Container
– Function: Contains all HTML tags that
compose a table.
– Syntax:
<TABLE ALIGN=“LEFT|RIGHT|CENTER”
BORDER=“Thickness_in_pixel” BGCOLOR=“color”
WIDTH=“width_of_table”
COLS=“Number_of_columns” CELLPADDING=“pixel”
CELLSPACING=“pixel”
FRAME=“Outer_border_rendering”
RULES=“inner_border_rendering”
SUMMERY=“Description_of_table”>
</TABLE>
–Attributes:
• ALIGN: Controls how table is align on the page
• BORDER: specify the thickness of the border in pixel
• BGCOLOR: Set equal to the background color
• CELLPADDING: Controls the amount of white spaces
between the content of a cell and edge of the cell
• CELLSPACING: specify how many pixel of space to leave
between individual cells.
• COLS: Set equal to the number of columns in the table.
Knowing this value, browser enable to compose table faster
• FRAME: Controls which part of the table outer border are
rendered. VALUES: ABOVE, BELOW, BORDER, BOX,
HSIDES, LHS, RHS, VSIDES, VOID.
• RULES: Controls which part of the table inner border are
rendered. VALUES: ALL, COLS, GROUPS, NONE, ROWS
• SUMMARY: Provides synopsis of what’s in the table and the
table is structured
• WIDTH: Width of tab in pixel or in % of browser screen width
• <CAPTION>
– Type: Container
– Function: Specifies a caption for a table.
– Syntax:
<CAPTION ALIGN=“TOP|LEFT|RIGHT|BOTTOM”>
….. Caption text goes here ….
</CAPTION>
– Attributes: TOP, LEFT, RIGHT, BOTTOM
– Example: <CAPTION ALIGN=“BOTTOM”>
Table-1 Return of Investment
</CAPTION>
• <THEAD>
– Type: Container
– Function: Defines header section of a table. It
enables the browser to duplicate the header when
breaking the table across multiple pages.
– Syntax:
<THEAD ALIGN=“L|C|R|J” VALIGN=“T|M|B” >
........ Rows that comprise the header … …
</THEAD>
– Attributes:
• ALIGN: Control horizontal alignment within the cells of
the table header.
 • VALIGN: Controls vertical alignment in header cells.
VALIGN can take TOP, MIDDLE, BOTTOM.
– Example;
<THEAD ALIGN=“CENTER” VALIGN=“CENTER”>
<TR><TH>ID #</TD><TR><TH>Property</TD>
<TR><TH>TAX Assessment</TD> </TR></THEAD>
• <TFOOT>
– Type: Container
– Function: Defines footer section of the table
– Syntax:
<TFOOT ALIGN=“L|R|C|J” VALIGN=“T|M|B”>
---------
</TFOOT>
– Attributes: ALIGN, VALIGN
– Example:
<TFOOT ALIGN=“JUSTIFY” VALIGN=“TOP”>
<TR> <TD>&COPY; 1998 – Macmillan Computer
Publishing USA </TD></TR></TFOOT>
PRACTICAL-IV
 FORM TAG
• HTML forms are a web surfer’s gateway to
interactive content
• Forms collect information from a user and a
program or script on web server uses this
information to compose a custom response
to the form submission.
• Following are the tag to handle forms
• <FORM>
– Type: Container
– Function: Contains the text and tag that compose
an HTML forms
– Syntax:
<FORM ACTION=“URL_of_processing_script” METHOD=“GET|POST”
TARGET=“Frame_name” ACCEPT-CHARSET=“acceptable_char_sets”
ACCEPT=“acceptable_MIME_types” >
………
</FORM>
– The form tag and it’s attributes sometime referred as form
header.
– Attributes:
• ACCEPT: Specifies the list of acceptable content types
(MIME types) that the server processing the form and
handle correctly.
• ACCEPT-CHARSET: Set equal to a list of character sets
that the form processing script can handle.
• ACTION: Set equal to the URL of the script or program
that will process the form data, ACTION is the required
attributes of the FORM.
 • METHOD: Refers to the HTTP method used to send the
form data to the server. The default method is GET,
which appends the data to the end of the processing
script. If the METHOD POST is used, the form data is
send to the server in a separate HTTP transaction.
• TARGET: Enables you to target the response from the
processing script or program to a specific frame.
– Example:
• <FORM ACTION=“/shopping_car.asp”
METHOD=“POST” TARGET=“response”>

The following tags are valid only when used between the
<FORM> tag:
<INPUT>, <SELECT>, <OPTION>, <OPTGROUP>,
<TEXTAREA>, <BUTTON>, FILEDSET>, and
<LEGEND>.
• <INPUT>
– Type: Standalone
– Function: Places of the following controls
• Text, password, or hidden fields
• Check boxes
• Radio button
• File upload fields
• Image based button
• Scripted button
• Submit Button
– Syntax:
<INPUT TYPE=“TEXT|PASSWORD” NAME=“field_name”
VALUE=“default_value” SIZE=“fields_size”
MAXLENGTH=“maximum_input_length” DISABLE READONLY>
1. Enter NAME: <INPUT TYPE="TEXT" NAME="NAME"
value="SADIQUE" readonly>
2. Enter NAME: <INPUT TYPE="password"
NAME="NAME">
3. Enter NAME: <INPUT TYPE="hidden" NAME="NAME">
4. Enter NAME: <INPUT TYPE="CHECKBOX"
NAME="NAME" CHECKED DISABLED>
5. Enter NAME: <INPUT TYPE="radio" NAME="NAME"
CHECKED DISABLE>
6. Enter NAME: <INPUT TYPE="FILE" NAME="NAME"
disabled>
7. Enter NAME: <INPUT TYPE="image"
SRC="D:\HTML_PRACTICE\SMPARENT.GIF"
ALIGN="BOTTOM" ALT=“PROBLEMS">
8. Enter NAME: <INPUT TYPE="BUTTON"
VALUE="SUBMIT" ONCLICK="SCRIPTNAME">
9. Enter NAME: <INPUT TYPE="RESET"
VALUE="CLEAR" DISABLED>
• <SELECT>
– Type: Container
– Function: Set up a list of choices from which a user
can select one or many.
– Syntax:
<SELECT NAME=“field_name” SIZE=“visible_rows”
MULTIPLE DISABLED ACESSKEY=“short_key_letter”
TABINDEX=“tab_position”>
– Example:
<SELECT NAME="SIZE" SIZE=4 multiple>
<OPTION>samll</OPTION>
<OPTION>MEDIUM</OPTION>
<OPTION>LARGE</OPTION>
<OPTION>very LARGE</OPTION>
</SELECT>
• <OPTION>
– Type: Container
– Function: Defines an option in an select field
listing.
– Syntax:
<OPTION VALUE=“option_value” SELECTED DISABLED
LABEL=“lable_text> … .. .. .. .. . </option>
– Example:
SAME AS ABOVE EXAMPLE
THE OPTION TAG IS VALID ONLY BETWEEN THE
SELECT TAG. YOU CAN PLACE <OPTION> INTO
LOGICAL GROUP USING <OPTGROUP>
• <OPTGROUP>
– Type: Container
– Function: Defines a logical group of select list
option
– Syntax:
<OPTGROUP LABEL=“lable_text" DISABLE>
<OPTION>SMALL</OPTION>
<OPTION>MEDIUM</OPTION>
<OPTION>LARGE</OPTION>
<OPTION>very LARGE</OPTION>
</OPTGROUP >
THE <OPTGROUP> TAG IS VALID ONLY BETWEEN
THE SELECT TAG. BETWEEN <OPTGROUP>
ONLY <OPTION> TAG IS ALLOWED.
• <TEXTAREA>
– Type: Container
– Function: Sets up a multiple line text window
– Syntax: <TEXTAREA NAME=“field_name”
ROWS=“no._of_rows” COLS=“no._of_Cols” DISABLED
READONLY ACCESSKEY=“shot_key_letter”
TABINDEX=“tab_position”> . … .. . </TEXTAREA>
– Example: <TEXTAREA NAME=“feedback” ROWS=10
COLS=40 ACCESSKEY=S >Comment Please
</TEXTAREA>
• <BUTTON>
– Type: Container
– Function: Places button on form. It has more feature
to present button then <INPUT TYPE>, such as 3-
dim rendering, up/down movement when clicked.
– Syntax: <BUTTON TYPE=“SUBMIT|RESET|BUTTON”
NAME=“button_name” VALUE=“button_value”
DISABLED ACCESSKEY=“short_key”
TABINDEX=“tab_pos”> ……. text for button face or img
tag …….. </BUTTON>
If text is place between <button> the text will
appear on the face of the button. If an IMG tag
is place between <button>, the image is used
as a button.
– Attributes: VALUE: Specifies what is passed to
the server when the button is clicked.
– Example:
<button NAME=“validate” VALUE=“form_val”
onClick=“validate();”> clicik here to validate your
input</button>
• <LABEL>
– Type: Container
– Function: Denotes a form label. It indicates type of
input expected from the user. This works fine with
text-based browser, not useful for visually
impaired or speech-based or Braille browsers.
– Syntax:
<LABEL for=“field_ID“ accesskey=“short_key"> … . . Label
text goes here .. .. … .</LABEL>
– Example:
<LABEL for="pw“ acesskey="r">Please Enter
Password</label><input type="password" ID="pw"
NAME="pass">
FOR attributes set to the value if the ID for the field that
goes with the label. It is typically used with <INPUT>,
<SELECT>a and <TEXTARE> tag.
• <FIELDSET>
– Type: Container
– Function: Groups related from input fields
– Syntax:
<FIELDSET> … related input….. </FIELDSET>
– Attributes:
NONE
– Example:
<FIELDSET>
Login: <INPUT TYPE=“text” NAME=“login”>
Password: <INPUT TYPE=“password” NAME=“pass”>
</FIELDSET>
The <LEGEND>tag is used to give a field grouping
a specific name
• <LEGEN>
– Type: Container
– Function: Names a group of related form fields
– Syntax:
<LEGEND ALIGN=“L|R|T|B” ACCESSKEY=“short_key”>
. . . . . . . . . </LEGEND>
– Example:
<FIELDSET>
<LEGEND ALIGN=“TOP”>User Login
Information</LEGEND>
Login: <INPUT TYPE=“text” NAME=“login”>
Password: <INPUT TYPE=“password” NAME=“pass”>
</FIELDSET>
<LEGEND> tag gives a name to a set fields
grouped together by the <FIELDSET> tag.
 FRAME, NOFRAME and IFRAME
• FRAME and NOFRAME we finished
• <IFRAME>
– Type: Container
– Function: Places a floating fames on a page. “Floating
frame is a frame that you can displays like images”
– Syntax:
<IFRAME SRC=“url” NAME=“Frame_name”
FRAMEBORDER=“0|1” WIDTH=“width_in_pix”
HEIGHT=“height_in_pix”
MARGINWIDTH=“mrg_width_in_pix”
MARGINHEIGHT=“Mrg_height_in_pix”
SCROLLING=“YES|NO|AUTO” ALIGN=“T|M|B|L|R”
LONGDESC=“Long_desc_url”>
---------- - -- -
</IFRAME>
 EXECUTALE CONTENT TAGS
• Use to make web pages more dynamic such
as java applet and ActiveX controls
• HTML support two ways for placing
executable content; <APPLET> tag for Java
applets and the <OBJECT> tag for other
executable object.
• <APPLET>
– Type: Container
– Function: Places java applet on web page. The
<APPLET> tag has been deprecated in favor of
using the more generic <OBJECT> tag to place
applets.
• <APPLET WIDTH=“width_in_pix”
HEIGHT=“height_in_pix”
CODEBASE=“base_url_for_applet”
CODE=“Applet_class_file” NAME=“Applet_name”
ALT=“Text_alternate” ALIGN=“T|M|B|L|R”
HSPACE=“Pixels” VSPACE=“Pixels”> --------
</APPLET>
• Attributes:
– ALIGN: Position text at the top, middle and bottom of the
applet window or you can float the window to the left or
right margin
– ALT: Provide text based alternative to the applet
– CODE: Specify the class file
– CODEBASE: Set equal to the URL of the code
– HEIGHT: Specify the height of the applet window in pixel.
HEIGHT is a required attributes of the APPLET tag
• Attributes cont..
– WIDTH: Specify the width of the applet window in
pixel. It is a required attributes of the APPLET tag
– NAME: Gives the applet a unique name so that
other java applet can referenced
– VSPACE: Control the amount of vertical space to
the above and below of applet window
– HSPACE: Control the amount of horizontal space
to the left or right of the applet window
• Example:
<APPLET WIDTH=250 HEIGHT=200
CODE=“marquee.class” NAME=“marquee” ALT=“scrolling
Text Marquee” ALIGN=“Right” HSPACE=5 VSPACE=12>
<PARAM NAME=“message” VALUE=“Hello World”>
- - - - </APPLET>
• <PARAM>
– TYPE: Standalone
– Function: Passes a parameter to java applet or
other executable object, used with <APPLET>
and <OBJECT> tags only
– Syntax:
<PARAM ID=“Unique_id” NAME=Parameter_name”
VALUE=“Parameter_value” VALUETYPE=“”DATA|
REF|OBJECT”
TYPE=“Expected_content_type_(MIME)”>
– Example:
<APPLET WIDTH=250 HEIGHT=200 CODE=“marq.class”
NAME=“marq” ALT=“Scrolling Text Marquee”
ALIGN=“TOP”>
<PARAM ID=“P1” NAME=“pi” VALUE=“3.14159”
VALUETYPE=“DATA”>
- - - - </APPLET>
• <OBJECT>
– Type: Container
– Function: Places executable object on page
– Syntax:
<OBJECT CLASSID=“Implementation_info”
CODEBASE=“URL_of_obj” DATA=“URL_of_data”
TYPE=“data_MIME_type” USEMAP=“map_name”
TABINDEX=“tab_position”
STANDBY=“message_while_loading” DECLARE
ALIGN=“TOP|MIDDLE|BOTTOM|LEFT|CENTER|RIGHT”
WIDTH=“value” HEIGHT=“value” NAME=“obj_name”
HSPACE=“value” VSPACE=“value” BORDER=“value”>
------
</OBJECT>
CLASSID: Identifies which implementation or release of
object your are using.
CODEBASE: Set equal to the URL of the object
 DATA: Set equal to the list of URL where data for the object
can be found.
DECLARE: Instruct the browser to declare, but not
instantiate, a flag for the object
STANDBY: Display msg. to the user while object is loading
• Example:
<OBJECT CLASSID=“CLSID: 1A4D620-6217-11CFBE62-
0080C72EDD2D”
CODEBASE=“http://activex.microsoft.com/controls.iexplo
rer/marquee.ocx” CODETYPE=“application/x-oleobject”
ALIGN=“MIDDLE” WIDTH=“100%” HEIGHT=“100%”
HSPACE=value” VSPACE=“value” BORDER=“0”>
<PARAM NAME=“image” VALUE=“greeting.gif”>
<PARAM NAME=“speed” VALUE=“7”>
<PARAM NAME=“repeat” VALUE=“1”>
--- -- -- ---- -- - --
</OBJECT>
 UNIT IV
JAVA SCRIPT
Introduction to Java Script
(Functions, Objects)
Client-Side Java Script
Java script in web browser, windows and
frames, the document object model, events
and event handling, forms and form
elements, dynamic html and saving state
with cookies
 JAVA SCRIPT IN WEB BROWSER
• Window object as global execution context
– Primary task of Web Browser is to display HTML
doc. In a window.
– In client side Java script, Document object
represents an HTML document and the Window
represent the browser window or frame that
display the document.
– The window object define number of properties
and methods that allow you to manipulate the
web browser window and also refers to other
object i.e. document properties
– Window object has 2 properties window and self.
• The client side object hierarchy and DOM
– The window object is the key object of the client
side.
– All other client side object are access via this
object.
– For example: Document object
– Document object also have properties that
refers to other object
– Every document object has a forms[ ] array
containing forms object that represent HTML
forms appearing in the document. To refer to
one of these forms, you might write:
window.document.forms[0]
 Client side object hierarchy and
Level 0 DOM
Self, window
Parent, top

Navigator

Forms[ ] Elements[ ]
Input
Frames[ ] Select Options[ ]
The Current textarea
Window Anchor[ ]
location

history Links[ ]

document
Images[ ]

screen
Applet[ ]
 ROLE OF JAVASCRIPT ON THE WEB
• Creating visual effects such as image
rollovers that guide a user and help with
page navigation.
• Sorting the column of a table o make easier
for a user to find what he needs
• Hiding certain content and revealing details
• Streamlining the browsing experience by
communication directly by the web server so
that data can be displayed without loading
complete page.
 Embedding Scripts in HTML
• Between a pair of <script> and </script>
tags
• Form an external file specified by the src
attribute of a <script> tag
• In an event handler, specified as the value
of HTML attribute such as onclick or
mouseover
• In a URL that uses the special
javascript:protocol
 Scripting in External Files
• The <script> tag support src attributes that
specify the URL of Javascript code. It is used
like this:
<script src=“../..script/util.js”><script>
Javascript file has .js extension and contain pure
javascript code without <script> tag.
• Advantages
– It simplifies HTML code by allowing you to remove
large block of javascript code
– You can keep function and other javascript code in
a separate file and read it into HTML file when
need it, it makes code maintenance much easier
– Security can be maintained
 Specifying Scripting Language
• <meta http-equiv=“Content-Script-Type” content=“Text/javascript”>
Here Browser assume that javascript is the defaulat
language
• <script type=“text/javascript”> </script>
Traditional MIME type for javascript program
is “text/javascript”.
• <script language=“javascript”> ------ </script>
Some browser not supported type attributes
so, language attributes introduced.
<script language=“VBScript”> ------ </script>
<script language=“VBScript”> ------ </script> (for I. E. )
• The defer attributes
– The <script> tag take only one attributes that
is defer. Which indicate that there is no output
statement in the document. It means that
browser is safe to continue parsing the HTML
document. It may improve that performance of
browser.
<script defer> ---- </script>
OR <script defer> ---- </script>

At the time of writing IE that only browser used

the defer attributes
• <noscript> tag
– Used when browser not support javascript
• <script>
– Be careful when you want to write <script> tag
into document.write()
– F1.document.write(“<script>”);
– F1.document.write(“</”+ “script>”);
– F1.document.write(“<\ /script>”);
• Nonstandard Script attributes
– event attribute allow you to define event handler
using script tag. It specify the name of the event
to be handled and for attribute give the name or
ID of the element for which the event to be
handled. These work only with IE.
OBJECT