Post on 10-Apr-2018
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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?
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
18/192
BUILD WEBSITE DEVELOPMENT TEAM
Server administrator
HTML coders
Designers Writer and information designer
Software programmer
Database administrator Marketing
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
23/192
LINEAR INFORMATION STRUCTURE
Main Page
Sub Topic
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
24/192
TUTORIAL STRUCTURE
Concept
Lesson
Review
IndexTable ofContentSite Map
MainPage
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
25/192
WEB STRUCTURE
MainPage
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
26/192
HIERARCHICAL STRUCTUREMainPage
SiteMap
SectionPage
SectionPage
SectionPage
SectionPage
SectionPage
ContentPageContent
Page
ContentPage
ContentPage
ContentPage
ContentPage
ContentPage
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
27/192
CLUSTER STRUCTURE
Content
pages
MainPage
SiteMap
Section
Page
Section
Page
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
28/192
CATALOG STRUCTURE
MainPage
ContentPage
SearchPage
ItemPage
ShoppingChar
ExitCheckout
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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?
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
36/192
LINKING TO DOCUMENT FRAGMENTFile Name: red.html
SADIQUE
Hi how are yoiuclick
Hir TOP
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
37/192
LINKING TO EXTERNAL DOCUMENT
FRAGMENT
File Name: red1.htmlSADIQUE
JUMP ON HI
TOP
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
43/192
Using table element
76-84mm Socket Pricing
Stock NumberDescriptionList Price
3476-AB76mm Stock45.00
3478-AB78mm Stock47.50
3480-AB80mm Stock50.00
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
46/192
SPANNING COLUMNS
COLSPAN attribute span multiple columns of a table
It always span to the right
Example:
76-84mm Socket Pricing
Stock NumberDescriptionList Price
3476-AB76mm Stock45.00
3478-AB78mm Stock47.50
3480-AB80mm Stock50.00
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
47/192
SPANNING ROWS
76-84mm Socket Pricing
76-84mm Socket Pricing
Stock NumberDescriptionListPriceDiscount
3476-AB76mm Stock45.0010% DISCOUNT
3478-AB78mm Stock47.503480-AB80mm Stock50.00
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
49/192
HOME WORK
CREATING APAGE TEMPLATE
CHAPTER: CREATING PAGE TEMPLATE
PAGE NO. 121
U T
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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}
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
64/192
Letter spacing
Letter-spacing: 2pt
Text indent
Text-indent: 24pt
Color
Color: red andbackground-color: blue
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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}
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
66/192
HOME WORK
STYLING WITH CSS
CHAPTER: WEB TYPOGRAPHY
PAGE NO. 161
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
83/192
FRAME SYNTAX
FRAME ROWS
FRAME COLUMNS
THE Tag
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
86/192
NOFRAMES, RESIZING, SCROLLING BAR,FRAMEBORDER AND FRAME MARGIN
NESTING FRAME
Browser is not supporting FRAMES
TARGETING IN FRAMESET
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
88/192
Naming Frame
To name the frame add name attribute to the
frameFRAME Targeting
PUBLISHING AND MAINTAINING
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
97/192
Example on element
----------
UNIT III
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
112/192
Example:
. . . .. .
.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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}
- - >
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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 webmaster@your-isp.com
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
133/192
Type: Container; Attributes: None
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
Type: Container; Attributes: None
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
Type: Container; Attributes: None
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
Type: Container; Attributes: None
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
135/192
Type: Container; Attributes: None
Function: Contain text to be strongly emphasized.
Means in boldface. Syntax: Strong text here
Example:Stop! Do not process further.
Type: Container; Attributes: None
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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; Attributes: None
Type: Container;
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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;
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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)
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
159/192
Example;
ID #Property
TAX Assessment
Type: Container
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
160/192
Type: Container
Function: Defines footer section of the tableSyntax:
---------
Attributes:ALIGN, VALIGN
Example:
© 1998 Macmillan ComputerPublishing USA
PRACTICAL-IV
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
161/192
FORM TAG HTML forms are a web surfers gateway to
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
166/192
NAME= NAME >
3.Enter NAME: 4.Enter NAME:
5.Enter NAME:
6.Enter NAME:
7.Enter NAME:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
169/192
Function: Defines a logical group of select listoption
Syntax:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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:
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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.
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
181/192
instantiate, a flag for the object
STANDBY: Display msg. to the user while object is loading
Example:
--- -- -- ---- -- - --
UNIT IV
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
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
8/8/2019 WEB SITE DESIGN PRINCIPLES_new_temp
192/192