Web Designing Presentation 1 PDF

BSc IT
Web Designing
Semester - III
Copyright @ Amity University

Introduction to Web Design
The History of the Web

• The web was initially conceived and created by Tim Berners-Lee, a computer specialist
from the European Particle Physics Laboratory (CERN) in 1989.
• In his words, there was "a need for a collaborative knowledge-sharing tool" to support
scientific work in an international context.
• He and his partner Robert Cailliau created a prototype web for CERN and released it to the
Internet community for testing and comments.
• The web is not synonymous with the internet, though some people may think so. Actually,
the web is one way to utilize the infrastructure of the internet. In other words, the web is a
subset of the internet.
• Perhaps the single most important technological development in the history of the web,
besides the creation of the web itself, was the development of graphical browsers in the
early 90s. Beginning with NCSA's Mosaic and its evolution into Netscape's Navigator and
Microsoft's Internet Explorer, these programs allowed users to browse the resources on
the web in an extremely user friendly environment. This made the web a "fun" place and
marked the beginning of the true web revolution.
The Nuts and Bolts of the Web
• So what exactly is the web?

• The web is a complex, international, cross platform, cross language, cross cultural
mesh of servers, clients, users, databases, and quite a few artificial intelligences all
talking, working, searching, viewing, accessing, downloading, and who knows what
else.

• "The Internet" is quite a different thing from "an Intranet". An Intranet is a
mini web that is limited to the users, machines, and software programs of a
specific organization, usually a company. Since organizations are typically
small and have more control over policies and information systems,
intranets are often more controllable.
• So how do all these computers, software packages, and people

communicate with each other?
• The creators of the web devised standards of communication upon which

the web is built. These standards sit at a layer above operating systems,
computer languages, or internet transmission protocols and provide a basic
medium for communication.
• The two most important standards (protocols) used on the web today are
HTTP and HTML.

Designing for the Web
(Part-1)
 Web site design
 Web page design
 Web usability

Your Goal
 Create a web site that is:
 useful
 compelling
 attractive
 easy to use
 satisfying

Web Development Team
 Content provider
 Information architect
 Graphic designer
 Writer / editor
 Programmer
 Project Manager
 Usability Expert

Mission Statement
 What are you creating and why?
 Who will use it?
 What will they want to do?
 How will you know if your site is
successful?

Webpage Layout and Website Design
• Technical definitions:
– A webpage is a single HTML document
– A website is a collection of related webpages
• Designing a good website requires more
than just putting together a few pages

Developing a Website
The first phase in creating a new web site is

planning. This involves determining the site‘s
navigation structure, content, and page layout.
It is only after this has been accomplished that
HTML coding or authoring tools like Front Page
can be used effectively to actually create the
site.

The planning process involves:
• Define site purpose
– What are the web site‘s objectives?
– Who is the target audience?
– What is their connectivity (dial up, broadband, network, etc.)?
– What computers (PC/Mac) and browsers (IE, Netscape, Opera, etc.) do they use?
• Define content
– What you have and what you need.
– How it will be organized. Categorize information rather than defining categories and filling
them. Build the site structure around content organization.
– What graphics are required and how many? Remember, the larger the number of graphics,
the longer the page will take to download.
• Develop a file naming convention and stick to it.
• Determine site architecture and navigation. A simple flowchart-style sketch usually works best.
Hierarchical models are best suited to the web.
• Sketch page layouts and content layouts to create appropriate page design.
• Assess sketches for appropriateness, placement, consistency and usability, and revise if
necessary.

Web Page Layout
• Layout of web pages is very important

• Poor layout makes for -
– Difficult navigation
– Hard to locate information on page
– Visually unappealing

Tables, tables, tables!
• Use tables to lay out your pages!
• Make the table borders invisible
• A 2x2 table works well

Areas of a Web Page
Logo Header
Menu Content

A 2 x 2 Layout

Table within a table

The outer table

The inner table

The inner table

Centered with three columns

Really complicated design!

Monitors and Dimensions
• Monitor resolution affects how you should
lay pages out
• 800x600 = 50% - 760 x 420 pixels in
browser window
• 1024x768 = 35%
• 640x480 = 3%* - 595 x 360 pixels
• *Was 20% three years ago

Dimensions in a 2x2 table
Up to 760 wide*
100-140 Up to 650 wide
wide
Header
Logo
And
Content
Menu

Page Width
• Because monitors differ (640x480,
800x600, 1024x768), pages look different.
• You can use a % width for a table, for
example make it 80% of the page width

Splash Page
• The index.html file is called the ―Splash Page‖
• It is the key page—the first page visitors usually
see
• Must be visually attractive, informative, and easy
to navigate

Organizing Information
• Decide what info goes on each page
– Friends page
– Family page
– Personal page
– Hobbies page

Site Design
 Content
 Organization
 Navigation system

Content
 What do your visitors want?

 What information do you want to provide?
 What do similar organizations provide?
 What do you already have?
 What do you need to create?

Hierarchy
 no more than seven categories

 three clicks and you are there
Home Page
Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 6 Topic 7
1 2 3 4 5 6 7
Home Page
 What can I do at this site?

 No scrolling should be necessary!
 Attractive
 This is your first impression

Good Web Communication
• Be Concise
• Limit choices – use a hierarchical structure
– A hierarchy is a structured organization where
some pages are at a higher level than others
– Hierarchy results in a site map with multiple
levels

Navigation System
 How do I get home?

 Where am I?
 Where else can I go?

Additional Navigation
 Site map
 overall view
 Index
 alphabetical list of terms
 Search facility
 requires special expertise

Site Map
• A site map is designed to show the
connections between pages
• A graphical site map uses lines to connect
linked pages

Site Map
Willoughby's Website
Splash Page
index.html
Pictures Gallery Name Page Progress Page

gallery.html name.html progress.html
Interior or
Internal
Pages Canada Trip Christmas Tree
canada.html tree.html

Labels are important
 Strive to make labels clear & concise
 Be consistent
 Follow convention
 Home / Main
 Search / Find
 Contact Us
 About Us
 Help / FAQ
 News / What‘s New

Design Theme
• Choose a common layout for your website.
The Splash Page will probably differ but
interior pages should be the same
• Use tables to control placement
throughout

Consistency in Design
• Use the same font throughout!

• Use consistent graphics in website – do
not use ultra modern on one page and
calligraphy on another
• Use color scheme that is consistent

The Font Barrier
• Only fonts you can reliably
use are Times New
Roman (Times) and Arial
(Helvetica)
• Text in site should be one
of these choices
• How to overcome this?
– Any font used in graphics is
loaded as a graphic, and
does not rely upon the font
being on the user‘s
computer
– Make cool font images in
Photoshop

Testing
• Test your website as you go along.
– If you‘re in the computer lab and there‘s an
empty computer next to you, log into it and
check out your web page from there
• Make sure it works in Netscape Navigator
and Internet Explorer
• Make sure all pictures come up on a
different machine
Where to get help on design
• Web Pages for more info

– http://info.med.yale.edu/caim/manual/contents.html
• Good places for Graphics
– www.clipart.com
– http://free-clip-art.com/
• Fonts
– http://www.1001freefonts.com/fontfiles/main.htm

Web Writing
 remember visitors only scan
 keep it short
 at least 50% of normal text
 use headings
 use bullet lists
 put conclusion first

Common Page Guidelines
 dark text on light background
 limit visitor scrolling
 limit use of images
 limit use of animations

Be Aware of Browser Features
 Back button
 do not provide your own
 Colored links
 do not change default
 Bookmarks
 provide meaningful title

Proofread
 errors will kill the professional appearance of
your site
 use a spell checker
 use a grammar checker?
 ask someone else to check grammar

Web Usability Measures
 What are some indications of ‗user friendly‘?

 Ease of learning
 Improved user performance
 Low user error rate
 User satisfaction

Web Design Guidelines
 Know the user

 Involve the user during design
 Design a navigation system
 Where am I?
 How can I get home?
 Where else can I go?

Usability Evaluation Strategies
 Checklist
 User testing
 Usability inspection
 bring in a usability expert

Usability Checklist
 Are all links correct?
 Is there a link to home on every page?
 Is navigation consistent on every page?
 Does each page have an appropriate title?
 Did I proofread all content?
 Create user profiles
 can they do what they will likely want to do?

User Testing
 Identify appropriate users
 Select appropriate tasks
 Watch, listen, but don‘t talk!
 Ask volunteers to complete a survey

Summary(1)
 Web site design
 start with a mission statement
 plan and organize the site
 design a navigation system
 Web page design
 be concise
 be consistent
 proofread

The Basics of HTTP
(Part-2)
What is a client/server system?
• A client/server system is a very keen way of distributing information

across information systems like a local area network (LAN), a wide
area network (WAN), or the Internet.
• The "client" is actually a software program, like Netscape Navigator,

that is being operated by a person who is the one who really wants
to see the file. The client software however, deals with all the
underlying client/server protocol stuff and then displays the
document to the human user.

• The web is a huge client/server system, and the underlying client/server protocol that
is used by the client software and the server software for communication is HTTP
(HyperText Transport Protocol).
• HTTP is a protocol that is defined in several RFC´s (Request for Comments) located
at the Internic and has had several generations worth of revisions (HTTP/09,
HTTP/1.0 and HTTP/1.1).
• HTTP is a "request-response" type protocol that specifies that a client will open a
connection to a server then send a request using a very specific format. The server
will then respond and close the connection.

Review: Client and Server
• User uses HTTP client (Web Browser)

• It has a URL (e.g. http://www.yahoo.com/)
• Makes a request to the server
• Server sends back data (the response)
• User clicks on the client side...
request (URL)
Client response (HTML, …) Server

Introduction to HTML
What is HTML?
• An acronym for Hypertext Markup Language, HTML is the language used to

create web documents. Contrary to popular notion, HTML is not a
programming language. It is simply a set of codes that define the layout and
content of a web page so that they can be read and displayed by a web
browser. A non-proprietary language, HTML can be created by a simple text
editor as well as a sophisticated web authoring tool like FrontPage.
• The World Wide Web Consortium, also know as the W3C, monitors the
development of HTML. As new features are added and obsolete ones
deprecated (removed), it is assigned version numbers. The most recent
version is HTML 4.01.

HTML Characteristics
• Just a Text File!

+ Portable
+ Human Readable/Writable
• Defines the Structure (not Appearance) of
the Document
– Client (Browser) defines the appearance
• Font preferences, window width, …
– Pours into Browser (PDAs, Bigger/Smaller)

HTML Document
• HTML documents are made up of tags or angled brackets (<>) that contain an
element within them to determine the layout and formatting of the web page. For
example, <B> is the tag used to define text in bold where ―B‖ is the element
contained within the tag.
• Elements can also include attributes, or additional information for that element.
Attributes are included inside the start tag. For example, you can specify the
alignment of images (top, middle, or bottom) by including the appropriate attribute
with the image source HTML code.
• HTML documents are structured into two parts, the HEAD, and the BODY. Both of
these are contained within the HTML element -- this element simply denotes this as
an HTML document.
• The head contains information about the document that is not generally displayed
with the document, such as its TITLE. The BODY contains the body of the text, and is
where you place the document material to be displayed. Elements allowed inside the
HEAD, such as TITLE, are not allowed inside the BODY, and vice versa.
Document Structure
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>
Nested Tags
• Like a tree, each element is contained inside a
parent element
• Each element may have any number of
attributes
<html>...</html>
<head>...</head> <body>...</body> bgcolor="white"
<title>...</title> other stuff <p>...</p> <br> <table>...</table>
This is some text!

Basic Tags
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>
Opening Tag Closing Tag Description
<HTML> </HTML> Specifies that the document should be interpreted as an
HTML document. This tag should either be the first line in an
HTML document or should be directly after the <!DOCTYPE>
specification. Likewise, the closing tag should be the last line
in an HTML file.
<HEAD> </HEAD> Specifies an area where the browser can look to for general
information about the document. It requires a <TITLE> tag at
the minimum.
<TITLE> </TITLE> Specifies the text that will be used for the header of the browse
frame. Some search engines use this text for keyword indexing
and browsers will use this for naming bookmarks if a user
chooses to bookmark your site. So choose your titles well. This
tag goes between the <HEAD> and </HEAD> tags.
<BODY> </BODY> Specifies the information that should be displayed in the

browser window. This is the document itself rather than
information "about" the document.

Basic Tags
• <h1>…</h1>
– H1-6 where larger number means smaller heading
• <p>
– Includes vertical whitespace unlike <br>

Basic Tags
• <hr> horizontal rule
• <br> new line
• <b>...</b> bold
• <i>...</i> italicize text in between

Basic HTML Body Tags by
Example
The following HTML code shows the basic HTML body tags in action.
<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY>
This is a very simple web page. Notice that
the browser does not pay attention too spaces that
we
add to our document unless you specify what type of
spacing you want
<P>
Like when you use a paragraph tag or a <BR>
break line tag
<P>
And here is a hard rule
<P>
<HR ALIGN = "CENTER" SIZE = "10" WIDTH = "50%―
COLOR = "AA0000" NOSHADE>
</BODY>
</HTML>

Lists
• Unordered Lists o Apples
<ul> 1. Fuji
<li> Apples 2. Granny Smith
<li> Oranges o Oranges

</ul>
• Ordered Lists
<ol>
<li> One
<li> Two
</ol>
• Can be nested

following code could be used to create a list:
<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<UL>
<LI>Vegetables
<UL>
<LI>Broccoli
<LI>Carrot
<LI>Pea
</UL>
<LI>Meat
<UL>
<LI>Chicken
<LI>Beef
<LI>Pork
</UL>
</UL>
</BODY>
</HTML>

The previous code would produce the following HTML list:
Food
• Vegetables
Broccoli
Carrot
Pea
• Meat
Chicken
Beef
Pork

Images
A picture or an image in the web page can be inserted using the <img> tag.
The < img> tag has several attributes to inform the source, height of the
picture, width of the picture alignment etc. The following are its important
attributes.
• Src
• Height
• Width
• Align
• alt
The SRC attribute specifics the location of an image that you would like
incorporated into your HTML document.

Image Files
• <img src="URL of image file">
• JPEG
– Best for photos
– Public standard
• GIF
– Best for simple images
– Older standard
• PNG – Portable Network Graphics
– Public standard replacement for GIF
• SVG – Scalable Vector Graphics
– Series of drawing commands
– Uses XML

Tables
• <table>...</table>
• <tr>...</tr> for each row
• <td>...</td> for each element in a row
• <th>…</th> for header row

Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Comments
• 

• 

Special HTML
• < → <
• > → >
• & → &
• → space

Link
The LINK element belongs within the HEAD element of an HTML document. It is to
be used to indicate a relationship between the document and other documents or
objects. Consequently a document may have any number of LINK elements, to
indicate all the possible relationships between the document and other, related
documents. The LINK element is empty (i.e, there is no closing </LINK>) but takes
the same attributes as the Anchor (A) element.
• A link is a bit of text or image that the user may click on in order to be transported
somewhere else on the web. Notice that links are typically identified by being
underlined, being in a color other than that of the regular text, and being sensitive to
mouse over events. That is, when you move your mouse over the link, it changes its
appearance. When you see this change in pointers, you know that if you click your
mouse, you will go somewhere.
• It allows you to tie multiple documents together into a "web site" or allow you to
reference other web sites in other corners of the web. Links also allow you to link
from one place in a document to another.

Anchor Tag (Links)
• To create a link, we will use the "anchor" tag that uses the standard
opening and closing format such as <A></A>. However, we will
never use the anchor tag by itself. Rather, we will always include the
HREF attribute that defines the location that the anchor points to. we
will also include some text or image that will be "clickable".
Absolute HREFs specify fully qualified URLs.

• <a href="http://www.yahoo.com/">Yahoo!</a>
• <a href="reldoc.html">In this directory!</a>
• <a href="a/doc.html">In sub-directory a!</a>
Relative HREFs are relative to the directory containing the current
HTML file.

Thank You

Web Designing Presentation 1 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Presentation 1 PDF

Uploaded by

Copyright:

Available Formats

BSc IT

Copyright @ Amity University

The History of the Web

• So what exactly is the web?

Copyright @ Amity University

• So how do all these computers, software packages, and people

• The creators of the web devised standards of communication upon which

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

The first phase in creating a new web site is

Copyright @ Amity University

Copyright @ Amity University

• Layout of web pages is very important

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

 What do your visitors want?

Copyright @ Amity University

 no more than seven categories

Topic 1 Topic 2 Topic 3 Topic 4 Topic 5 Topic 6 Topic 7

 What can I do at this site?

Copyright @ Amity University

Copyright @ Amity University

 How do I get home?

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Pictures Gallery Name Page Progress Page

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• Use the same font throughout!

Copyright @ Amity University

Copyright @ Amity University

• Web Pages for more info

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

 What are some indications of ‗user friendly‘?

Copyright @ Amity University

 Know the user

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University