web site design principles_new_temp

8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp

1/192

APPLIED COMPONENT: PAPER-IPRINCIPLES 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, Designfor the Whole Site, Design for the User, Design for theScreen

Planning the Site Create a Site Specification, Identify theContent Goal, Analyze your Audience, Build a Web Site

Development Team, Filenames and URLs, DirectoryStructure, Diagram the SitePlanning Site Navigation Creating Usable Navigation,

Using Text-Based Navigation, Using Graphics-BasedNavigation


2/192

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, ControllingTypography with the Element, Controlling

Typography with Cascading Style Sheet, Styling with CSSGraphics and Color File Format Basics, Computer Color

Basic, Choosing a Graphics Tool, Using the Element, Working with Hexadecimal Colors

HTML Frames Understanding Frames, Frame Syntax,

Targeting in Framesets, Planning Frame ContentPublishing and Maintaining Your Web Site PublishingYour Web Site, Testing Your Web Site, Refining andUpdating Your Content, Attracting Notice to Your Web Site

Unit References

Code: PWD (Ch 6,7,8,9)


3/192

Unit III

HTML - HTML 4.0 Tag Reference, Global Attributes, EventHandlers, Document Structure Tags, Formatting Tags, List

Tags, Hyperlinks, Image & Image map, Table Tags, FormTags, Frame Tags, Executable Content Tags and StyleSheets

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, formsand form elements, dynamic html and saving state withcookies

Unit References

Code: JSDG (Ch 7, 8, 11-18)


4/192

Unit V

Active Server Pages - Server side Scripting and Client-sidescripting, ASP Objects, Scripting Objects (creating an

instance of scripting object, The FileSystemObject object[drive, folder and file]) Active Data Object (Connection andRecordset)

Unit References

Code: B-ASP (Ch 2, 7, 8, 10, 12, 13)

Unit VIXML - 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 EricLadd & Jim ODonnell. (Platinum Edition) (PHI)2. PWD: Principles of Web Design by Joel Sklar3. JSDG: Java Script the definitive guide by David Flanagan4. B-ASP: Beginners ASP 3.0 David Buser etc. Wrox Press

Ltd.


5/192

UNIT - IWeb Site Design Principles Design for theMedium, Design for the Whole Site, Design for theUser, 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 andURLs, Directory Structure, Diagram the Site

Planning Site Navigation Creating UsableNavigation, Using Text-Based Navigation, UsingGraphics-Based NavigationCreating Page Templates Understanding Table

Basics, Table Pointers, Creating a Page Template


6/192

WEB SITE DESIGNPRINCIPLES

This chapter covers the basic designprinciples of web site by examining thevarious web sites, see the user needsand requirements, and plan the sitewhich is easy to navigate and download.


7/192

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)


8/192

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


9/192

Design the whole site

Plan for unifying theme and structure

Fonts, color, layout should say about yoursite 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)


10/192

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 consistencythroughout 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 thatborder the screen.

See fig 2-9,2-10.


11/192

Design for the user cont..

Keep a flat hierarchy Dont 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 quicklyfind 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.


12/192

Design for the Screen

Destination for web page is computer differentfrom the printed page so consider the followingpoints:

Shape of a screen: it is not a portraits but landscape. While paper reflect light, computer passes light

through it from behind

Dont use blue link on black background (See fig 2-

35) Dont use italic text, it is hard to read on the screen

(See fig. 2-36, 2-37)

Dont allow for Horizontal scroll


13/192

PLANNING THE SITE

When we want to build or restructuring web site, manydesigners simply do not know where to begin. Ratherthan rushing straight to the computer, the best way totart is by picking up a pencil and paper and sketchingout site design.


14/192

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 talentsnecessary 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


15/192

CREATE A SITE SPECIFICATION

Determine you objectives

You may want to increase comm. amongemployee, gain visibility, provide a service,attract new customer etc

Make sure that your justification is valid

Start your site by creating a site specification


16/192

IDENTIFY THE CONTENT GOAL

Examine closely what type of site you are creating Your objective and users 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.


17/192

ANALYZE YOUR AUDIENCE

What user want when they come to yoursite?

How can you attract them and entice themvisit again?

What types of computer and connectionspeed does your typical visitor have?


18/192

BUILD WEBSITE DEVELOPMENT TEAM

Server administrator

HTML coders

Designers Writer and information designer

Software programmer

Database administrator Marketing


19/192

FILES NAMES AND URLS 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 linksbecause of either file name or directory structureinconsistencies

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


20/192

URL (UNIFORM RESOURCE LOCATOR)

Complete URL It include protocol--- browsers uses to access the file

Server or domain name

Relative path

File nameExample:

Partial URL

When u are linking file that resides on your own computer isa partial URL, in which domain name and protocol is omitted

The file resides in the same direcory need no path

Example: link text

Protocol Domain path

File name


21/192

DIRECTORY STRUCTURE

When your site ready to upload on theweb server, web server contain user areacontaining folder in each user.

Your files are stored in user area.

If you do not buy a domain name, yourfiles 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 youchoose you name.

Which is easy to remember


22/192

DIAGRAM THE SITE Plan your site by creating flowchart that shown the

structure and logic behind the content presentationand navigation

CREATE INFORMATION STRUCTURE: think aboutinformation need of your user and how they can best

access the content of your site, consider whatinformation design map should look like: See thefollowing structure. Linear structure

Tutorial structure Web Structure

Hierarchical Structure

Cluster Structure

Catalog Structure


23/192

LINEAR INFORMATION STRUCTURE

Main Page

Sub Topic


24/192

TUTORIAL STRUCTURE

Concept

Lesson

Review

IndexTable ofContentSite Map

MainPage


25/192

WEB STRUCTURE

MainPage


26/192

HIERARCHICAL STRUCTUREMainPage

SiteMap

SectionPage

SectionPage

SectionPage

SectionPage

SectionPage

ContentPageContent

Page

ContentPage

ContentPage

ContentPage

ContentPage

ContentPage


27/192

CLUSTER STRUCTURE

Content

pages

MainPage

SiteMap

Section

Page

Section

Page


28/192

CATALOG STRUCTURE

MainPage

ContentPage

SearchPage

ItemPage

ShoppingChar

ExitCheckout


29/192

Planning Site Navigation

YOU WILL LEARN

You will understand navigation principal

Build navigation schemes to meet usersneed

Provide location information

Use graphics for navigation and linking


30/192

Creating usable navigation

The PC Webopedia defines Hypertext as aSystem In which objects (text, pictures,music, program and so on) can be

creatively linked to each other you canmove from one object to another eventhough they might have different form.

The idea of Hypertext introduced in1960by Ted Nelson mean non-sequentialwriting


31/192

Effective navigation includes providingcues to the users 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?


32/192

To allow to answer these questions,

provide the following information

Let the user know their current page andwhat type of content they are viewing.

Let user know where they are in relation tothe ret of the web site.

Provide consistent, easy to understand links.

Provide alternatives to the browsers backbutton that let user return to their startingpoint. (See fig. 4-1)


33/192

Limiting information overload

Create manageable information segment

Break you content into smaller files and then linkthem together, Provide logical grouping

Control page length

Dont allow user to scroll through never endingpage

Long files means long time to download

Use hypertext to connect facts, relationshipand concept

Provide linking to related topics, concept, facts.

Know your material.


34/192

USING TEXT BASED NAVIGATION

It is most effective way to navigate yoursite.

It can work in both text only and graphicalbrowser. (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 onlink and view the pages.

You can meet this need by adding TEXT-BASED NAVIGATION BAR( See fig. 4-6)


35/192

You can add this bar to the top of every page.

The code will be as follows:Home | Table of

Contents | Index

LINKING TO INDIVIDUAL FILES

Chapter 1


36/192

LINKING TO DOCUMENT FRAGMENTFile Name: red.html

SADIQUE

Hi how are yoiuclick

Hir TOP


37/192

LINKING TO EXTERNAL DOCUMENT

FRAGMENT

File Name: red1.htmlSADIQUE

JUMP ON HI

TOP


38/192

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 barHome | Table of Contents | Previous | Next | Index


39/192

Adding Contextual Linking

It allow user to jump to related topics orcross references by clicking the word oritem that interest them.

Include link within a line of text is moreeffective than including list of keywords.

Example:

May leave white space intact:

For more information please contact:


40/192

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:

Limitation ALT attribute: If text is large and icon is

small text is not display properly, so msg isdisplays in pop-up menu.


41/192

CREATING PAGE TEMPLATES

YOU WILL LEARN How table can enhance the display of your

content

Table elements allow to create grid-basedlayout

Use HTML table elements and attributes tocustomize page template

Learn how to take page design from conceptto HTML code

Recognize basic page template


42/192

UNDERSTANDING TABLE BASICS

Initially table used to display only tabulardata

Designer want to avoid left marginconstraints in HTML

Using table elements they had the controland tools to build columnar layout aligntext, create gutters and structure page

It is used as a primary design toll for WEB


43/192

Using table element

76-84mm Socket Pricing

Stock NumberDescriptionList Price

3476-AB76mm Stock45.00




44/192

Defining table attributes

1. Using Global attributes

2. Using Row-Level attributes

3. Using Cell-Level attributes

1. Global attributes affect the entire table andthese attributes can be place in the initial tag.

ALIGN, BACKGROUND, BGCOLOR,

BORDER, CELLPADDING,CELLSPACING, HEIGHT, WIDTH(See table 5-1)


45/192

2. Using Row-Level attributes (See Table 5-2)

It affect an entire row and place these

attributes in the beginning tag. ALIGN (Horizontal align: LEFT, CENTER, RIGHT-LEFT is default)

BGCOLOR (define background color for cells withinthe 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 plcethese attributes at the beginning tag. Ittakes precedence over low-level attributes:

Center-aligned textRight-aligned Text


46/192

SPANNING COLUMNS

COLSPAN attribute span multiple columns of a table

It always span to the right

Example:


Stock NumberDescriptionList Price





47/192

SPANNING ROWS



Stock NumberDescriptionListPriceDiscount

3476-AB76mm Stock45.0010% DISCOUNT

3478-AB78mm Stock47.503480-AB80mm Stock50.00


48/192

TABLE POINTER

When designing HTML tables, observe thefollowing 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


49/192

HOME WORK

CREATING APAGE TEMPLATE

CHAPTER: CREATING PAGE TEMPLATE

PAGE NO. 121

U T


50/192

UNIT - IIWeb Typography Type Design Principles,

Controlling Typography with the Element,Controlling Typography with Cascading Style Sheet,Styling with CSSGraphics and Color File Format Basics, Computer

Color Basic, Choosing a Graphics Tool, Using the Element, Working with Hexadecimal ColorsHTML Frames Understanding Frames, FrameSyntax, Targeting in Framesets, Planning Frame

ContentPublishing and Maintaining Your Web Site

Publishing Your Web Site, Testing Your Web Site,Refining and Updating Your Content, Attracting Notice

to Your Web Site


51/192

WEB TYPOGRAPHY

You will understand

Principles for type design on a Web site

Use the element Why you should use Cascading Style

Sheet instead of

Create Style rules using the CSSlanguage

Selectively apply CSS style rules


52/192

TYPE DESIGN PRINCIPLES

Type is a flexible medium that can expressemotion, tone and structure based on thetype choices you make. You also can gooverboard by using too many faces andsizes, So you must stick with fonts thatyour user installed on their computers. If

your font not available browser substitutethe default font.


53/192

As you work with type, consider the following principlesfor 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 determinethe legibility of your text

Font that are legible on paper can be more difficult to readon screen

Keep font big enough.

Avoid using text as graphics


54/192

CONTROLLING TYPOGRAPHY WITH

ELEMENT

Setting font size Some text

Some text

It set size=5: Default size =3 and +2 = 5

Specifying font alternates

Some

text Setting font color

Some text


55/192

CSS offer much greater control over Gain more control with less code

If you want every H1 heading comes in green

and centered, doing so using you needto write following code for every instance of H1:

The Text

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 elements onany page that use the CSS

CONTROLLING TYPOGRAPHY WITH

CASCADING STYLE SHEET


56/192

CSS BASIC

It is based on rules that select an HTMLelements and declare style characteristicsfor the elements. You can state set of

rules, known as style sheet, in the headsection of an HTML documents or includethem in a separate documents known as

an external style sheet used when workingwith number of HTML documents.


57/192

Understanding style rules

H1 { color= red }

p { color: blue; font-size: 20pt }

Hi how are you my dear ......

Hi! I am fine Herehow about you?

Lets come and meet me at my residence address... We willhave lots of fun

Selector

Declaration

Property Value

LINKING WITH AN EXTERNAL


58/192

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

Hrefattributes specify the URL of the style sheet and

all relative file location rules applyRel attributes specify the relation ship bet linked and

current documentsYou only have to change in only one documents and it

affect all the pages


59/192

CSS selection Techniques

Selecting Multiple Elements Selecting by Context

Selecting with the CLASS attributes

More complex selection includes artificialdivision using two elements

Block Division

Inline Division

These are useful with combination withCLASS attributes and allow to create entirelynew HTML elements. You can use thesetechniques in external style sheet


60/192

Selecting Multiple Elements If you want to apply same declaration for two or

more selector then use:H1 {Color: Green}

H2 {Color: Green}

Selecting by Context It specify the exact context in which a style is

applied. To specify that elements appear blueonly within elements use following code:

H1 I {Color: Blue}

This rule state that elements appear blue only when they

within an

H1,H2 {Color: Green}


61/192

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:

.QUOTE {color: red}

Use class attributes in the documents:

Some Text here

W ki ith


62/192

Working with It specify logical division within a document that havetheir own name and style properties

DIV.INTRO {Color: red}

SOME TEXT and elements

It specify inline elements within a document that havetheir own name and style properties

SPAN.LOGO {Color: red}

Welcome to the WonderSoftware web Site


63/192

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


64/192

Letter spacing

Letter-spacing: 2pt

Text indent

Text-indent: 24pt

Color

Color: red andbackground-color: blue


65/192

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 andmargin 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}


66/192

HOME WORK

STYLING WITH CSS

CHAPTER: WEB TYPOGRAPHY

PAGE NO. 161


67/192

GRAPHICS AND COLOR

Understand difference between the Web-based image file formats: GIF, JPG andPNG

Know which type of file format is to use forwhich type of image

Understand the basic of computer color

Use element and attributes to

display image effectively Use hexadecimal color values to add color

to your pages

FILE FORMAT BAICS


68/192

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 morethen 256 colors

If we use fever color, compression is big and smallerfile size

It is not best for photographs or more complexgraphics

You can create animation using multiple images


69/192

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 softwareyou can translate photographics images into JPGformat and also balance amount of compressionversus the resulting image quality. Higher thecompression, lower the image quality.


70/192

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


71/192

COMPUTER COLOR BASIC

Computer monitor display color by mixingthree color i.e. (RGB) called color channel.

Monitor can express a range of intensityfor each color channel from 0 (Absence ofcolor) 255 (Full intensity of color)

Color vary from monitor to another basedon user preferences and brand ofequipments


72/192

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 milliondifferent 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 itmakes this color by mixing available color.


73/192

DITHERING

Browsers mix it own color if you display 24-bitimage 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 ingradations, 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


74/192

JPG file on the left has lot of dithering in the skyand GIF on right exhibits a different colormatching called banding (Banding is an effort to

match the closest color from GIF palette to theoriginal color in the photo. (Non-dithering image< dithering image), but banding images meanunacceptable 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


75/192

CHOOSING GRAPHICS TOOL Adobe Photoshop and Illustrator

Full-featured, expensive, and takes time to master

Adobe illustrator is a high end drawing/paintingtool

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.


76/192

USING THE ELEMENT

is a replaced element meansbrowser replace the element withimage file reference in SRC attribute.

and empty element so never useclosing tag

Ex:

For other attributes see table 7-2

We can replace with CSS

Specifying ALT Width and Height attributes


77/192

Specifying ALT, Width and Height attributes

Removing Hypertext Border from image

Aligning text and Images

(Default)

Wrapping text

Adding white space around images

WORKING WITH HEXADECIMAL COLORS


78/192

WORKING WITH HEXADECIMAL COLORS

HTML use hexadecimal number to express RGB

color values

Hexadecimal numbers are base-16 numberingsystem, 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:

Cascading style sheet also accept hexadecimalcolor values.


79/192

CHANGING LINK COLOR

LINK: The unvisited color. The default isblue

ALINK: The active link color. This is the

color that displays when the user points toa link and holds down the mouse button.The default is Red.

VLINK: The visited link color. The defaultis purple Ex:


80/192

HTML FRAMESFrame element partition the canvas area of

the browser into multiple windows calledframesand each frame can display separate HTMLdocument

Understand the benefits and drawback of theframe

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


81/192

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 userlike search option, table of content etc

It works fine if keep them simple. (2 or 3frames are enough in a page)

Limitations


82/192

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 documentset without enough navigation choices to let user jump tothe 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

FRAME SYNTAX


83/192

FRAME SYNTAX

FRAME ROWS

FRAME COLUMNS

THE Tag


84/192

THE Tag It provide alternate page for user who do not have a

frame-compliant (SUPPORT) browser

FRAME COLUMNS

(Alternate page HMTL code)

NESTING FRAME


85/192

NESTING FRAME See Figure 8-5 Second row is again divided into

two columns

Nesting allows you to break the screen into bothrows and columns frames

NESTING FRAME


86/192

NOFRAMES, RESIZING, SCROLLING BAR,FRAMEBORDER AND FRAME MARGIN

NESTING FRAME

Browser is not supporting FRAMES

TARGETING IN FRAMESET


87/192

TARGETING IN FRAMESET

One frame display information consistently

while the content of second frame mightchange based on the users choice.

By default a link loads into the same framefrom which it was selected

You can change it by targeting frameset. Totarget from one frame to another you mustperform two task:

Name your frames using the NAME attributes inthe FRAME element

Target links to display their content in the namedframe

Naming Frame


88/192

Naming Frame

To name the frame add name attribute to the

frameFRAME Targeting

PUBLISHING AND MAINTAINING


89/192

PUBLISHING AND MAINTAINING

YOUR WEB SITE

To make you web site live, you transfersite files to a Web server.

A web server is a computer connected to

the internet and running server softwareand this s/w used HTTP to server HTMLfiles to web browser clients.

After choosing web server select filetransfer software and upload the web sitesfiles from your development machine tothe Web server.


90/192

Choosing Internet Service Provider

This is a company that host your Webpages 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.


91/192

Buying a domain Name

Check whether your domain name isavailable 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 addressthat you will get from ISP

ISP COMPARISON CHECKLIST


92/192

ISP COMPARISON CHECKLIST Is the ISP local or national?

Does the ISP have enough local POPs (Point toPresence) 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 connectiontechnologies? Does the ISP offer enhanced services, such as SQL

database support, Secure Socket Layer (SSL) CGIscripting and Multimedia technology?

USING THE FILE TRANSFER PROTOCOL TO


93/192

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 suchas CNET, Shareware.com and search FTPclient (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.


94/192

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


95/192

Working with search engines

Use meaningful titles Using 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) is resided in allow to specify

information about documents.

used Name and Content attributes

See example in next page

Be careful with frames

Use Alt text with images

N Att ib t V l


96/192

Name Attributes ValueAuthor: The Author of the Page

Description: A short Text-based descriptionof the content of the web site

Keywords: A comma separated list ofkeywords that are potential search terms auser might use to find your site

Generator: This name and version

generated by page-authoring programs


97/192

Example on element

----------

UNIT III


98/192

UNIT III

HTML 4.0 Tag Reference, GlobalAttributes, Event Handlers, DocumentStructure Tags, Formatting Tags, List

Tags, Hyperlinks, Image & Image map,Table Tags, Form Tags, Frame Tags,Executable Content Tags and Style

Sheets.


99/192

HTML TAGS

The tags keywords Ex: In tagskeyword is Input.

Types of Tag

Container tag: It activates and effects andcompanion tag that discontinues the effect

Ex: Italic

Standalone tag (empty tag): It does not havecompanion tag.

Ex:

Keywords:


100/192

Keywords:

The tags function: A description of the effect

or page element that the tag control The tags syntax: HTML is derived from SGML

by applying SGML construct according to acertain set of rules. These rules define a tagssyntax.

The tags attributes: An attributes modify howa tags effect is applied. Some tag take no

attributes and other take several. Use ofattributes is required (such as SRC in IMGtag) and use of other may be optional.

GLOBAL ATTRIBUTES


101/192

It is universal and usable with any tag

STYLE: Bind style information to the tag

Use with all but , , ,HTML>, , , , and

Ex: RED Heading

LANG: Useful when you are marking up content in multiple

languages

The value of LANG gives Head-Up to browser whatlanguage is used

It is set with two-char language code: fr denotesFrench; de denotes German and son on.


102/192

DIR:

It is refer to the directionality (L-T-R) or (R-T-L) oftext

It can take one value LTR or RTL

TITLE:

It enable you to specify the descriptive text toassociate 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:


103/192

C SS

Used to create different class of the same tag.

Ex:

These creates three classes of the tag. After theseclasses are established, you can reference them

elsewhere in your documents. One popularapplication 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 bibliographylinks red.

EVENT HANDLERS


104/192

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 fieldvalidation script using onsubmit event handler

When user clicks the submit button, the scriptfunction named validate() fires and check thedata for formatting and other validation

(See Table 3.2, pg 62 chap 3 HTML tag reference)

DOCUMENT STRUCTURE TAGS


105/192

Every HTML document has three majorcomponent and DST defines those that defineseach component HTML declaration

Head

Body

Type: Container

Function: Declare document to be used an HTMLdoc. All doc. Content and supporting HTML code

goes bet the HTML and tags. Syntax: - - - - - - - -

Attributes: It take only VERSION attribute butdeprecated in favor of version info. Being specified in tag (SGML tag not HTML tag)


106/192

Type: Container

Function: Contains the tag that compose thedocument head

Syntax: - - - - - - -

Attributes: It can take PROFILE attribute, whichset equal to a space-separated list of URLs thatpoint to meta data profiles form the document.

HTML code goes here


107/192

Type: Standalone

Function: Declare global references value for theHREF 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: or

Attributes: It can take either HREF or TARGET If you need to specify a base URL and target

frame, you need to have two tag in the

HREF: specifies the reference URL that is used toh l l i URL


108/192

help compute relative URL. IF BASE HREF RLS is

http://www/myserver.com/sport/hockey/skates.html andyou used relative URL is punks.html elsewhere in thedocument for example relative path will really point tohttp:///www.myserver.com/sport/hockey/punks.html

TARGET: Specifies the default frame name towhich all links are targeted.

This code sets the documents base URL to

http://www.myserver.com/index.html and the baseframe for targeting hyperlinks to the frame namedbigframe.


109/192

Type: standalone

Function: produced a single line input fieldused to collect query information.

Syntax:

Attributes: The PROMPT attributes specifieswhat text should appear before the input field

was used in the early days whenform tag had yet to come.

Example:

Type: standalone


110/192

Type: standalone

Function: Define document meta information, such

as keyword, expiration date, author generationsoftware used and many more.

Also support dynamic document technique in whichbrowser loads a new document after specific time.

Syntax

OR

Attributes: HTTP-EQUIV: Specified a type of HTTPheader to be sent with the document. Value of theheader will be

REFRESH: Refresh page after specific delay

EXPIRES: It is date after which file is not reliable


111/192

NAME: Set name of doc meta-variable you wantto 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.


112/192

Example:

. . . .. .

.


113/192

Type: standalone

Function: Denote linking relationship betweentwo files.

Syntax

Attributes: HREF-Set equal to the file to whichyou are making the linking the linking reference.HREFLANG-Specifies the language code for thelinked file. MEDIA-Provide the intended display

destination for the linked document. The defaultvalue of media is screen. TARGET-Specifieswhich frame to target.

TITLE-Gives the link a descriptive title. REL-S ifi th l ti hi f th li k d fil t


114/192

Specifies the relationship of the linked file tothe current file. REV-Specifies how to current

files related to the linked file. Possible valuesof the REL and REV: Copyright, Help, Home,Index, Next, Previous, Stylesheet, Up

Example:

-----

-----

T i


115/192

Type: container

Function: Contains script code referenced in the body of

the document. Syntax

scripting code goes here .

Attributes: CHARSET-Denotes which character encodingscheme 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 containedbetween the and . TYPE-Set the MIME(Multipurpose Internet Mail Extensions) type of script codeusually text/javascript or text/vbscript. Need in HTML 4.0


116/192

Type: Container

Function: Provide alternate content to use if ascript cannot be executed or browser notsupport script.

Syntax: alternate code

Attributes: None

Example:

Document.write(Hello, World);

You either have scripting turn off or your browserdoesnt understand VBScript.


117/192

Type: Container

Function: Provide style information fordocument.

Syntax:

Style code goes here

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 stylel G ll TYPE T t/ 1 t d t


118/192

language. Generally TYPE=Text/css1 to denotethe use of the style language cascading style

sheet level 1 specification. TYPE is requiredattributes of the tag.

Example:

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}

- - >


119/192

Gives descriptive title to a document

It shows up in browser windows title bar andhistory 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 documentSyntax:

Document title goes here

Attributes: None Example:

The advantages of corporate web site

Type: Container


120/192

Type: Container

Function: When mixing language in the document it isnecessary to give direction to read (Left-to-Right to Right-to-left

The approach called Bidirectional Algorithm is used toensure proper presentation

When you want to override the bidirectional algorithm for

a block of text you can enclosed that text in the tags.

Syntax:

Attributes: Only one attribute it can take i.e. DIR, which canbe set to LTR (Left-to-right) or RTL (Right-to-left)

direction.Example:

context RTL Directionality -->

Here some English text


121/192

Type: Container

Function: Contains all content tags and thatcompose the document body

Syntax:

Document body goes here

Example: All document tag sere

FORMATTING TAGS


122/192

FORMATTING TAGS

It provide the facility to change the way thetext is displays on a browser. You canapply 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 aspecific logical chunk of documents)

Text Level Formatting


123/192

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 thecontext of the document i.e. logic of the text

FONT FORMATTING


124/192

: Container tag; for bold

Type: Standalone

Function: Set base size, typeface, color

properties of the body text font Attributes: COLOR, FACE, SIZE

Syntax:

Example:

Related Tag: used to modify attributes

Type: Container


125/192

Type: Container

Function: Make text bigger then the default size

Syntax: big text goes here Example:

Drop Caps are nice on screen effect.

Related tag:

Type: Container

Function: Contains text whose font properties are

to be modified which is specified in Syntax:

Text with modified font properties

T C t i


126/192

Type: Container

Function: Contains text to be rendered in italic Syntax: Some Text

Attributes: None

Example:

In just bought the Beatles Abbey Road on CD.

,

Type: container

Function: Contains text to be marked with astrikethrough character

Syntax: some text

or some text


127/192

Type: Container

Function: Make text smaller then the default size Syntax: ...smaller text goes here

Example:

Ssssssshhh!, He whispered in a tiny voice.

Related tag:

: Container, Contain text to besubscript to the text that precedes it.

: Container, Contain text to besuperscript to the text that precedes it.

Type: Container


128/192

Type: Container

Function: Contains text to be rendered in a fixed-

width font. Typically this font is courier or somekind of typewriter font.

Syntax: text here

Example: Computer will then display the

Login: prompt.

Type: Container

Function: Contains text to be rendered with anunderline

Example: All first year medical student purchase Grays Anatomy

PHRASE FORMATTING

ABBR


129/192

Type: Container Function: Contain tag that is abbreviation ofsomething. A speech based browser forexample could know to look in an abbreviationtable for pronunciation if you marked up Dr.with tag.

Syntax: acronym goes here

Attributes: None

Example:She got her doctorate (PhD) fromthe University of Virginia.


130/192

Type: Container

Function: Contain text that specifies an acronym.This tag also useful for non-visual browser. It tellspeech-based browser to pronounce the letters inthe acronym on at a time instead pronounce the

acronym a a word. Syntax: acronym here

Attributes: None

Example:

Practical Extraction and Reporting Language (PERL) is a popular CGIscripting Language.


131/192

Type: Container

Function: Contains either a postal address or anelectronics address. Text marked with this tagcomes in italic.

Attributes:

None

Syntax:

Address goes here

Example: If you have any comments, please sendthem to [email protected]


132/192

Type: Container Function: Contain a name of source from which a

passage is cites. The source name is typicallyrendered in italic.

Syntax: Citation source here Attributes: None

Example:According toHTML4.0 recommendation, the tag has been deprecated.

-Define term

Type: Container; Attributes: None


133/192


Function: Denotes the defining instance of term.IE display in italic.

Syntax: term being introduce here

Example: Freud proposed the idea of a

catharsis - a release of psychic tension.

- Emphasized


Function: contain text to be emphasized. Mostbrowser emphasized text in italic.

Syntax: some text here

Example: Please do not disturb the dog.

Type: Container; Attribute: None


134/192

Function: Contains text that represents keyboard

input. Browsers rendered such text in fixed-widthsize.

Syntax: Text goes here

Example: To begin, type go and

press ENTER


Function: Contains text that represent the literaloutput from a program. Such output is referred assample text.

Syntax: program output goes here Example:Write prog. 2 print msg HELLO



135/192


Function: Contain text to be strongly emphasized.

Means in boldface. Syntax: Strong text here

Example:Stop! Do not process further.


Function: Denotes a variable from a computer

program. Variables are typically rendered in a fixedwidth font.

Example: The RecordCount variable isset to a number of record that the query retrieved.

BLOCK LEVEL FORMATTING


136/192

Function: Contains quoted text that is to bedisplayed 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 StatesConstitution:

We, the people, in order to form a moreperfect Union

Related tag: is used to denote quoted text ina line with the body text.

Type: Standalone


137/192

yp

Function: Insert line break. Carriage return in

HTML code do not translate line break on thebrowser, so author themselves need to insert linebreak.
add no additional vertical spacesafter the break.

Syntax:

Example:

First Name:

Middle Name:
Last Name:


Type: Container;


138/192

Type: Container;

Function: Define a section of a document that

requires a special alignment. Attributes: ALIGN

Syntax: .

Example:

Everything in this section is right-justifies. Hard to read

Type: Standalone; Attributes: ALIGN,NOSHADE,

SIZE, WIDTH

Example:

-

Type: Container;


139/192

Type: Container;

Attributes: LEFT (Default), RIGHT, JUSTIFY, CENTER

Syntax:

Leveln Heading Where n=1,2,3,4,5,6

Type: Container; Attributes: ALIGN

Function: Denotes a paragraph. Most browsersignore the use of multiple

tag to increase the

amount of vertical space in a document.

Syntax:

text

Type: Container Attributes: width (Deprecated in


140/192

Type: Container Attributes: width (Deprecated inHTML4.0)

Function: Denotes text to be treated as preformattedBrowser rendered preformed text in fixed-width size.It is easy to represent table information. Whitespaces, carriage return tabs are not ignores.

Syntax: Text

Type: Container

Function: Generic container tag defying a documentblock. One popular use is for applying style info.

Syntax: Range of text

LIST TAG It is block level formatting


141/192

g

HTML support five types of list

Definition list

Directory list (Deprecated)

Menu list (Deprecated)

Ordered (numbered) List

Unordered (Bulleted) List

Type: Container Function: Denote an item in a list

Syntax:

List item

Attributes:

COMPACT: Instruct the browser to render the list item


142/192

in as small a space as possible.

START: (Ordered Lists only) You can change the startvalue of the numbering sequence from the default 1 toany other.

TYPE: (Ordered and Unordered) You can modify the

numbering scheme in an ordered list or the bulletcharacter in an unordered list by setting TYPE to one ofthe list type available.

ORDERED: 1,A, a, I, I

UNORDERED: DISC, SQUARE, CIRCLE

VALUE: Set the numbering value of the list item Example:

Even though is container tag, most people use itas a standalone tag and most browser able to interpret.

(Used Ordered List)

TYPE: Container


143/192

TYPE: Container

Function: creates directory listing. Item in isbulleted and short ( < 20 char). Generally used forindexes or telephone directory listing.

Syntax:

LIST ITEM 1 LIST ITEM 2

TYPE: Container

Function: Denotes a definition list

Syntax: .. Term & Defiant ion ..

Example:


144/192

Browser

A Program that allow a user to view World Wide Web Page

Server

A program that fields request for web pages

(Used Unordered List) TYPE: Container Function: Creates a menu listing. Menu list items

are typically short ( < 20 Char) arrange in single

column. Syntax:

Menu List Item 1

Menu List Item 3

Example: Enter a purchase order

LI P ll F ti /LI LI G t


145/192

Payroll FunctionGenerateInvoices

Type: Container

Function: Creates an ordered or numbered list

Syntax:

Item 1 Item 1

Type: Container; Function: Creates unordered list Syntax:

Item 1 Item 1 ...

HYPERLINK TAGS


146/192

Type: Container

Function: Can do two thing depend on attributes: HREF attribute tag set up a hyperlink from

whatever contain is found between the and .

NAME attribute tag set up a named anchor within

a document that can be targeted by other hyperlink.

Syntax:

.

OR

some text

Attributes:

ACCESSKEY: It is a short cut key a reader can use to


147/192

activate hyperlink. Press combination of ALT+KEY

HREF: Give the URL of the WEB resources to whichthe hyperlink should point

NAME: Specified the name of the anchor being set up.

TABINDEX: Specified the links position in the

documents tabbing order. TARGET: Tells the browser into which frame the linked

document should be loaded.

Example:

clickOR Table of content

You can point a hyperlink to it by using

Back to the Table

IMAGE and IMAGEMAP TAG

Placing an image on a page using tag


148/192

Placing an image on a page using IMG tag

Type: Standalone

Function: Place an inline image into a document

Syntax:

IMAGEMAP

If you used graphical browser many major


149/192

If you used graphical browser, many major

Web sites have large clickable images ontheir main page. These images load thedocuments depending on where the userclicking on the images. The image is some

how multilinked and can take you to anumber of places, it is called imagemap.

Linked region in an imagemap are called hot

region and it is associated with URL of thedocument that is to be loaded when thisregion is clicked.

Imagemap comes in two flavor:

Server Side: When user click a server side


150/192

Server Side: When user click a server sideimagemap the coordinates of click are sent to

server where the program process them todetermine which URL the browser should load.

Client Side: When client side imagemap is clicked

the client (Browser) process the coordinates ofthe users click rather then passing to the server.It is most efficient approach because it reduce theload of the server and eliminate the opening the

closing additional HTTP connection. HTML 4.0support two tag for this process:

(1)

(2)

Type: Container


151/192

yp

Function: Contains HTML tag that defines theclickable region (Hot region) on an imagemap

Syntax: . Hot region defination .

Attributes: The NAME attributes (Mandatory) givesthe map information a unique name so it can bereferenced by USEMAP attribute in the tagthat place graphics.

With imagemap data defines by the map named

navigation, you would reference the map in an tag as follows:

Example:


152/192

Type: Standalone

Function: Define hot region in client sideimagemap

Syntax:

Attributes: ACCESSKEY: Defines a short cut key combination to

activate hot region (ALT+ key)


153/192

activate hot region (ALT+ key)

ALT: Provides the text alternative for the hot region. ALTis also used by spoken-word browser for the visuallyimpaired.

COORDS: Specify the coordinates that defines theregion. No coordinates needed when specify defaultregion.

HREF: Set equal to the URL of the document toassociate with the hot region.

NOHREF: Deactivate the hot region by having it point tonothing

SHAPE: Specify shape of the hot region. DEFAULT isused to point hot region which is not part of any region.

TABINDEX: Defines hot region position in the tabbingorder of the page.

TARGET: Defines into which frame to load linked doc.

TABLE TAG It is useful layout tool


154/192

y

Using table we can easily presentinformation

Support for rendering parts of the framearound a table

Control over which boundaries to drawbetween cells

Table header, body and footer section canbe define separate entities.

Table makes complex page layouts possiblebecause of the very fine alignment controlyou have within the table.

T C t i


155/192

Type: Container

Function: Contains all HTML tags thatcompose a table.

Syntax:

Attributes: ALIGN: Controls how table is align on the page

BORDER: specify the thickness of the border in pixel


156/192

BORDER: specify the thickness of the border in pixel

BGCOLOR: Set equal to the background color

CELLPADDING: Controls the amount of white spacesbetween the content of a cell and edge of the cell

CELLSPACING: specify how many pixel of space to leavebetween 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 arerendered. VALUES:ABOVE, BELOW, BORDER, BOX,HSIDES, LHS, RHS, VSIDES, VOID.

RULES: Controls which part of the table inner border arerendered. VALUES:ALL, COLS, GROUPS, NONE, ROWS

SUMMARY: Provides synopsis of whats in the table and thetable is structured

WIDTH: Width of tab in pixel or in % of browser screen width

Type: Container


157/192

yp

Function: Specifies a caption for a table.

Syntax:

.. Caption text goes here .

Attributes: TOP, LEFT, RIGHT, BOTTOM

Example: Table-1 Return of Investment

Type: Container

Function: Defines header section of a table. Itenables the browser to duplicate the header whenb ki th t bl lti l


158/192

breaking the table across multiple pages.

Syntax:

........ Rows that comprise the header

Attributes:

ALIGN: Control horizontal alignment within the cells ofthe table header.

VALIGN: Controls vertical alignment in header cells.VALIGN can take TOP, MIDDLE, BOTTOM.


159/192

Example;

ID #Property

TAX Assessment

Type: Container


160/192

Type: Container

Function: Defines footer section of the tableSyntax:

---------

Attributes:ALIGN, VALIGN

Example:

&COPY; 1998 Macmillan ComputerPublishing USA

PRACTICAL-IV


161/192

FORM TAG HTML forms are a web surfers gateway to


162/192

g y

interactive content Forms collect information from a user and a

program or script on web server uses thisinformation to compose a custom responseto the form submission.

Following are the tag to handle forms

Type: Container

Function: Contains the text and tag that composean HTML forms

Syntax:


163/192

TARGET= Frame_name ACCEPT-CHARSET= acceptable_char_setsACCEPT=acceptable_MIME_types >

The form tag and its attributes sometime referred as formheader.

Attributes: ACCEPT: Specifies the list of acceptable content types

(MIME types) that the server processing the form andhandle correctly.

ACCEPT-CHARSET: Set equal to a list of character setsthat the form processing script can handle.

ACTION: Set equal to the URL of the script or programthat will process the form data, ACTION is the requiredattributes of the FORM.

METHOD: Refers to the HTTP method used to send theform data to the server. The default method is GET,which appends the data to the end of the processing


164/192

pp p gscript. 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 theprocessing script or program to a specific frame.

Example:

The following tags are valid only when used between the

tag:

, , , ,

, , FILEDSET>, and

.

Type: Standalone


165/192

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:

1.Enter NAME:

2.Enter NAME:


166/192

NAME= NAME >

3.Enter NAME: 4.Enter NAME:

5.Enter NAME:

6.Enter NAME:

7.Enter NAME:


167/192

Function: Set up a list of choices from which a user

can select one or many. Syntax:

Example:

samll

MEDIUMLARGE

very LARGE

Type: Container


168/192

Function: Defines an option in an select fieldlisting.

Syntax:

.. .. .. .. . Example:

SAME AS ABOVE EXAMPLE

THE OPTION TAG IS VALID ONLY BETWEEN THE

SELECT TAG. YOU CAN PLACE INTOLOGICAL GROUP USING

Type: Container


169/192

Function: Defines a logical group of select listoption

Syntax:


170/192

Function: Sets up a multiple line text window

Syntax: . .. .

Example: Comment Please

Type: Container Function: Places button on form. It has more featureto present button then , such as 3-dim rendering, up/down movement when clicked.

Syntax:


171/192

DISABLED ACCESSKEY short_keyTABINDEX=tab_pos> . text for button face or imgtag ..

If text is place between the text willappear on the face of the button. If an IMG tagis place between , the image is used

as a button. Attributes: VALUE: Specifies what is passed to

the server when the button is clicked.

Example:

clicik here to validate yourinput

Type: Container

f f


172/192

Function: Denotes a form label. It indicates type of

input expected from the user. This works fine withtext-based browser, not useful for visuallyimpaired or speech-based or Braille browsers.

Syntax:

Please Enter

Password

FOR attributes set to the value if the ID for the field thatgoes with the label. It is typically used with ,a and tag.

Type: Container

F ti G l t d f i t fi ld


173/192

Function: Groups related from input fields

Syntax:

related input..

Attributes:

NONE Example:

Login:

Password:

The tag is used to give a field groupinga specific name

Type: Container

Function: Names a group of related form fields


174/192

Function: Names a group of related form fields

Syntax:

. . . . . . . . .

Example:

User Login

Information

Login:

Password:

tag gives a name to a set fieldsgrouped together by the tag.

FRAME, NOFRAME and IFRAME

FRAME and NOFRAME we finished


175/192

Type: Container Function: Places a floating fames on a page. Floating

frame is a frame that you can displays like images

Syntax:

---------- - -- -

EXECUTALE CONTENT TAGS

Use to make web pages more dynamic suchj l t d A ti X t l


176/192

as java applet and ActiveX controls

HTML support two ways for placingexecutable content; tag for Javaapplets and the tag for other

executable object.

Type: Container

Function: Places java applet on web page. The

tag has been deprecated in favor ofusing the more generic tag to placeapplets.


177/192

_ _ _ pp

CODE=Applet_class_file NAME=Applet_nameALT=Text_alternate ALIGN=T|M|B|L|RHSPACE=Pixels VSPACE=Pixels> --------

Attributes: ALIGN: Position text at the top, middle and bottom of the

applet window or you can float the window to the left orright 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


178/192

pixel. It is a required attributes of the APPLET tag

NAME: Gives the applet a unique name so thatother java applet can referenced

VSPACE: Control the amount of vertical space tothe above and below of applet window

HSPACE: Control the amount of horizontal spaceto the left or right of the applet window

Example:

- - - -

TYPE: Standalone

Function: Passes a parameter to java applet or


179/192

Function: Passes a parameter to java applet or

other executable object, used with and tags only

Syntax:

Example:

- - - -

Type: Container

Function: Places executable object on page


180/192

Function: Places executable object on page

Syntax:

- - - - - -

CLASSID: Identifies which implementation or release ofobject your are using.

CODEBASE: Set equal to the URL of the object

DATA: Set equal to the list of URL where data for the objectcan be found.

DECLARE: Instruct the browser to declare, but notinstantiate a flag for the object


181/192

instantiate, a flag for the object

STANDBY: Display msg. to the user while object is loading

Example:

--- -- -- ---- -- - --

UNIT IV


182/192

JAVA SCRIPTIntroduction to Java Script

(Functions, Objects)

Client-Side Java Script

Java script in web browser, windows andframes, the document object model, events

and event handling, forms and formelements, dynamic html and saving statewith cookies

JAVA SCRIPT IN WEB BROWSER

Window object as global execution context


183/192

Primary task of Web Browser is to display HTMLdoc. In a window.

In client side Java script, Document objectrepresents an HTML document and the Window

represent the browser window or frame thatdisplay the document.

The window object define number of propertiesand methods that allow you to manipulate the

web browser window and also refers to otherobject 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 clientside


184/192

side.

All other client side object are access via thisobject.

For example: Document object

Document object also have properties thatrefers to other object

Every document object has a forms[ ] arraycontaining forms object that represent HTML

forms appearing in the document. To refer toone of these forms, you might write:

window.document.forms[0]

Client side object hierarchy andLevel 0 DOM


185/192

Self, windowParent, top

Navigator

Applet[ ]

Images[ ]

Links[ ]

Anchor[ ]

Forms[ ] Elements[ ]InputSelecttextarea

Options[ ]

screen

document

history

location

Frames[ ]

The CurrentWindow

ROLE OF JAVASCRIPT ON THE WEB

Creating visual effects such as image


186/192

rollovers that guide a user and help withpage navigation.

Sorting the column of a table o make easierfor a user to find what he needs

Hiding certain content and revealing details

Streamlining the browsing experience bycommunication directly by the web server so

that data can be displayed without loadingcomplete page.

Embedding Scripts in HTML


187/192

Between a pair of and tags

Form an external file specified by the src

attribute of a tag In an event handler, specified as the valueof HTML attribute such as onclick ormouseover

In a URL that uses the specialjavascript:protocol

Scripting in External Files

The tag support src attributes that


188/192

specify the URL of Javascript code. It is usedlike this:

Javascript file has .js extension and contain pure

javascript code without tag. Advantages

It simplifies HTML code by allowing you to removelarge block of javascript code

You can keep function and other javascript code ina separate file and read it into HTML file whenneed it, it makes code maintenance much easier

Security can be maintained

Specifying Scripting Language

H B th t j i t i th d f l t


189/192

Here Browser assume that javascript is the defaulatlanguage

Traditional MIME type for javascript program

is text/javascript.

------

Some browser not supported type attributes

so, language attributes introduced. ------

------ (for I. E. )

The defer attributes

The tag take only one attributes that


190/192

is defer. Which indicate that there is no outputstatement in the document. It means thatbrowser is safe to continue parsing the HTMLdocument. It may improve that performance of

browser. ----

OR ----

At the time of writing IE that only browser usedthe defer attributes

tag Used when browser not support javascript


191/192

Be careful when you want to write tag

into document.write()

F1.document.write();

F1.document.write(); F1.document.write();

Nonstandard Script attributes event attribute allow you to define event handler

using script tag. It specify the name of the eventto be handled and forattribute give the name orID of the element for which the event to behandled. These work only with IE.

OBJECT


192/192