Web Design

INTRODUCTION TO WEB TECHNOLOGIES

INTERNET BACKBONE - primary system of networks connecting both
major network hubs and Internet users to the Internet itself.
ARPANET (Advanced Research Projects Agency Network) - original
backbone
NSFNET (National Science Foundation Network) - the first high speed
backbone in 1987

What is WWW (W3)? Internet applications communicate across the Internet by using IP,
It is often called as WEB that stands for the World Wide Web. which transmits application data in small packets to a destination IP
It is a network of computers all over the world. address. The receiving host processes the information that it receives.
All the computers use a communication standard called HTTP.
Intranet Applications
Who Developed the WWW? a private local area network (LAN) or wide area network (WAN) that
Tim Berners-Lee developed World Wide Web in the late 1980’s and lets you use and interact with your Internet-based applications in a
early 1990’s. secure environment
differs from an Internet application only in who can access it and the
location of the client computer accessing it
How Does WWW Works?
Web Clients: computers reading the web pages
Web Browsers: where web clients view the web pages Web Servers
URL: Uniform Resource Locator; what the users or viewers submits a software program that serves web pages to requesting clients
request through an address bar of the web browser runs on any computer
HTML: receiver and the interpreter of the requested instructions
through Web browser Web Pages
information on the World Wide Web
Web Browser can be created using several client-side technologies
program that is used to view HTML documents can include a variety of information: texts, lists, forms for capturing a
Browser Description data, tables for presenting data, scripts that perform a function,
Internet A free web browser from Microsoft which was multimedia content that animate pages, and so on.
Explorer released in 1995.
Mozilla A free, open-source web browser from Mozilla Web Site
Firefox available for Windows, Mac OS X, Linux, and collection of web pages, linked together on a server
Android.
Google A free, open-source web browser developed by Web Browsers
Chrome Google. It was released in 2008. software program residing on a computer that you use to view pages
Safari In 2003, Apple developed their own browser in on and navigate the World Wide Web
April 2005, Safari became the default browser for
Mac systems. URLs
Opera A free, and it is the smallest and fastest browser. every piece of information on the World Wide Web has a unique
address
Understanding Web Technologies and Applications a pointer to some bit of data on the web
One way to think of the Internet is to picture it as a wide-area network
that spans multiple geographic locations. Each location in this Anatomy of a Web Address
enormous network is made up of a group of computers that are technical name for a web address is Uniform Resource Locator, or URL
relatively close in proximity to one another and are connected by
hardware and cabling.
http://www.iskulnet.com/members/signup.html
The computers of people are connected to the Internet through the
Internet Service Provider (ISP). Your ISP may be connected to another, http:// stands for Hypertext Transfer Protocol,
bigger ISP, or possibly directly to the backbone. which is the standard method used to
Users communicate from one location to another using a transport Web pages over the Internet
communication protocol known as IP (Internet Protocol). This www.iskulnet.com the domain name
protocol, running on each computer connected to the Internet, you can own a domain name by registering it
ensures that communication breakdowns do not occur and that the through ISP’s or companies
networked computers can communicate and exchange data properly recognized by InterNIC
with one another. members a subdirectory or subfolder within
Every computer connected to the Internet has a unique IP address. If your website. You can create as many
duplicate IP addresses existed, information using a given address subdirectories to organize your web
could end up in the wrong place. Software applications that run on contents
the Internet are known as Internet Applications.
signup.html web document or HTML filename
Domain Suffixes Information Architecture
com commercial Without Structure there is no Architecture – user should be able to
net network comprehend what the site is all about.
gov government Reduction is Construction – learn how to consolidate similar topics to
edu education produce good site
org non-profit organization Navigation in the Information – use a clear and consistent global,
ws website parallel and local navigation
tv web tv a. Global Navigation – user can move between main sections,
mil military sites it should be present on every page.
pro professions b. Parallel Navigation – the presence of subcategories or
subsections on each section which must be present on every page
info information
within section
coop cooperatives
c. Local Navigation – works like table of contents
biz business
Common Architecture Mistakes
a. Too many categories – “There should be no more than
Static Web Site: the simplest kind of web site you can build; written seven categories if possible.”
in HTML and CSS only, with no scripting; hyperlinks b. Getting trapped in established structure – does the existing
company’s department structure logical from viewers point of
Dynamic Web Site: web site that not only uses HTML and CSS, but view.
includes web site scripting as well; scripting languages and c. Inconsistent Navigational Organization - concept should be
frameworks that will be added to the code are JavaScript, PHP, Ruby simple and straightforward
on Rails and ASP.NET d. Burying Information in too many levels - Four hierarchical
levels is too complex
Important Concepts
Hypertext – a method of organizing information that gives reader Factors of Quality Web Design
control over the order in which the information is presented • Content
Hyperlinks/Links – a hypertext document that allows you to jump • Accessibility
from one topic to another, often with a mouse click • Layout and Navigation
Markup language – is a language that describes a document’s
structure and content
FTP (File Transfer Protocol) – a method of copying a document from
WEB DESIGN FUNDAMENTALS
one computer to another computer in the network
ISP (Internet Service Provider) – a company or business that provides
access to the internet and related services
TCP (Transmission Control Protocol) – responsible for breaking data
being sent across an IP connection into small packets, and then
reassembling these when they arrive at their destination
HTTP (Hypertext Transfer Protocol) – used to transmit web pages
from the web browser being accessed to your computer
URL (Uniform Resource Locator) – web unique address

Planning a Web Site

Before beginning to build web site you should:
1. Identify your target audience
2. Have a statement of purpose
3. Know your main objectives
4. Have a concise outline of the information your site will
contain.

Types of Users
1. Web Surfers - they are the casual user that needs to be
enticed with strong graphic content and bold statement of
content.
2. Novice and Occasional Users - they depend on clear structure
and easy access to web site.
3. Expert and Frequent Users - they depend on site to obtain
information quickly and accurately.
4. International Users - they are users who could be in many
different places.

Steps to Follow in Planning a Website

• Getting Web Content
• Storyboarding
• Flowcharting
Term Definition Tag Closing Description
HTML – Hypertext Markup Language, a programming specification for <html> </html> Defines the area within as an HTML page.
how web pages can be written so they can be understood. <head> </head> Contains information about the document
XML – Extensible Markup Language, a specification that grew out of <title> </title> Identifies the title of the page, contained
HTML that lets developers define their own markup language like within the <head> tag.
<name> <city> which is an element created by developers </body> </body> Surrounds the text of the page.
XHTML – Extensible Hypertext Markup Language, a specification that
grew out of XML
<body attribute= “” > </body>
bgcolor – the page’s background color
History of HTML background – the page’s background image
SGML (Standard Generalized Markup Language) – The first version of text – the default color of all the page’s text
HTML introduced in 1980. link – the default color for all links
CERN under Tim Berners-Lee announced that WWW would be free on alink – the default color for all default links
April 30, 1993. vlink – the default color for all visited links
The first web browser - or browser-editor rather - was called
WorldWideWeb as, after all, when it was written in 1990 it was the
Headings
only way to see the web. Much later it was renamed Nexus in order
Heading tags are <h1> to <h6>; Each has an opening and closing
to save confusion between the program and the abstract information
<h1> has the largest font, and <h6> the smallest.
space (which is now spelled World Wide Web with spaces).
<h4> - <h6> are smaller than your normal text font and should be used
sparingly.
Version of HTML
HTML 1.1 – Release date was 1992, first informal draft
<hr> tag: helps structure your web page by inserting horizontal rule
HTML 2.0 – used the official standard of HTML, 1995. Documents
lines
written in 2.0 can still be viewed in all browsers
align – controls alignment (center, left, right)
HTML 3.2 – the most common used standard supported by all
noshade – displays the rule without shading <hr noshade>
browser version (1996/97)
size – controls the size (the height) of the rule
HTML 4.0 – is the suggested standard introduced by W3-Consortium,
width – controls the length of the rule
which is supported by newer browser. (1997/98)
color – the color of the rule (Internet Explorer)
HTML 4.1 – introduced in 1999, W3C Recommendation
XHTML 1.0 – reformulate HTML 4.01 W3C Recommendation on 2000
HTML 5 – introduced in 2008, introduced new features like <nav> <b> Defines bold text
<header> <footer> <figure> <big> Defines big text
<em> Defines emphasized text
<I> Defines italic text
XHTML
<small> Defines small text
It is supposed to replaced HTML.
<strong> Defines strong text
It is nearly identical to HTML 4.01
<sub> Defines subscripted text
It has a stricter and cleanly version of HTML
<sup> Defines superscripted text
<ins> Defines inserted text
Disadvantages:
<del> Defines deleted text
Web developers must obey the rules.
<s> Deprecated. Use <del> instead
Errors will not be tolerated.
<strike> Deprecated. Use <del> instead
More expenditure of time.
<u> Defines underlined text

W3C: World Wide Web Consortium

The HTML <marquee> tag – used for scrolling piece of text or image
- main international standard organization which was created by Tim
displayed either horizontally across or vertically down your web site
Berners-Lee
page depending on the settings
- well known members are: IBM, America Online, Microsoft, Adobe,
Apple, Sun, Microsystem
List
Unordered Lists <ul>, <li> Ordered Lists <ol>, <li>
Three ways to create HTML
<ul type=“disc”> default <ol> default
1. Code-based editor
<ul type=“circle”> <ol type=“A”>
2. WYSIWYG (What You See Is What You Get) editor
<ul type=“square”> <ol type=“I”>
3. Simple text editor

Definition List <dl>, <dt>, <dd>

Good Coding Practices
A description list is a list of terms/names, with a description of each
1. Stick to the standards – follow the standards set by the W3C
term/name.
2. Use semantic markup – use a descriptive markup that signifies
The <dl> tag defines a description list.
the intended use of document sections, <p> paragraph
The <dl> tag is used in conjunction with <dt> (defines terms/names)
3. Validate your code – this conforms to the usage rules of the W3C,
and <dd> (describes each term/name)
this is to enhance browser compatibility, accessibility, and
exchange of data
Creating Links CSS 2 Released in May 1998
Anchor Tag <A> <a> CSS 2.1 All major browser supports CSS, released in 2005
tag that identifies a link or a location within a document that creates CSS level 3 Work started in 1998. This is the latest release of
hyperlink using HREF = attribute CSS
<a href="http://www.feu.com> Visit FEU </a>
Types of CSS
JPEG: Joint Photographic Experts Group 1. Inline Style
GIF: Graphics Interchange Format - Least flexible
PNG: Portable Network Graphics - Requires each element to be tagged if you want them to
WBMP: Wireless Bitmap appear differently
- Looses the advantage of using CSS
Tables 2. Internal style sheet
cell: the intersection of any given row and column - Style characteristics are embedded in the HEAD section of
the webpage
- Perhaps best used when a single page requires a unique style
sheet
3. External style sheet and Imported
- Connection made via the LINK tag
- Use the optional TYPE attribute to specify a media type
- Imported: Allows for using style sheets from other sources
- Must be included at the beginning of the style sheet using
the @import statement
- Other CSS rules can be included
- the width attribute of the <table> element to specify the size of a
table
Cascading multiple sheets
- align attribute to adjust the horizontal alignment of the contents of
- You can use multiple sheets to define the style of your document
all table elements with the exception of the <table> and <caption>
- Internal styles will override external styles, if they are duplicated
elements
Cascading
 Determining rule weight by specificity
CASCADING STYLE SHEETS (CSS) - Rules with more specific selectors take precedence over rules
- a style language that let you control the display characteristics of with less specific selectors
your Web site.  Determining rule weight by order
- Based on order of rule within style sheet
<font> vs CSS - Those listed later take precedence over those listed earlier in the
- <font> a style element were introduced by browser developers to style sheet
help Web designers bypass the design limitations of HTML but
tailored only towards one type of display medium, the computer Basic CSS Syntax
screen - three parts: selector {property: value}
- style sheet can display information for different devices. 1. selector: the basic HTML element tag you wish to define
2. property: the attribute of the selector that you wish to
change
What are they?
3. value: the particular markup value for that attribute
 A set of style rules that tell the web browser how to present a
- properties with multiple words: put the value in quotes
web page or document.
- multiple properties: must be separated by a semicolon
 Styles are normally stored in style-sheets
 External style sheets are stored in .css files
Grouping
 Multiple style sheets will cascade into one
- Selectors can be grouped so that a common property can be
specified
Reasons for using CSS
1. Build from the ground up to replace traditional Web design Descendants
methods - Selectors can be descendants
2. Faster download times
3. Shorter development time CSS Syntax
4. Greater control over the typography in a Web page - class selector allows you to create different styles for the same
5. It's easy to write HTML element
6. Improvements in accessibility - id selector can only apply to one, unique element
7. Print designs as well as Web page designs - comments to help you describe the particular style
8. Better control over the placement of elements in Web page
9. The design of Web pages is separated from the content
10. Better search engine rankings

CSS Description
Version
CSS 1 The first version released in December 1997
Background Properties
- Define the background effects of an element
- Effects include color, using an image for a background, repeating
an image and positioning an image
- All attributes can be set in a single declaration

Text Properties
- Controls the appearance of text in the web page
- Commonly used attributes: color, direction, text-align, text-
decoration, text-indent

Font properties
- Define the look of the font in text areas
- One of the broader sets of properties in CSS
- font-style: normal, italic, oblique
- font-variant: normal, small-caps
- font-weight: normal, bold, bolder, lighter, weighted values
* weighted values
- ranging from 100-900
- 400: normal weight
- 700: bold weight

Border Properties
- Allows you to specify the style, color and width of an element’s
border
- Many different properties can be applied
- You can specify the width, style, color, thickness and on which
sides the border appears

Margin Properties
- Define the space around elements
- You can use negative values to overlap content
- Margins can be set independently or collectively
- Can be set to auto, a fixed length or a % of the total height of the
document
- Can be set in one declaration: clockwise

Using <div> and <span> Elements

1. Divide Tag <div>
container that divides the HTML document into sections. It is
used for grouping HTML elements
can be used with the CLASS attribute to create customized block-
level elements
2. Span of Words Tag <span>
lets you specify inline elements within a document that have
their own name and style properties that reside within a line of
text
can be used with the CLASS attribute to create customized inline
elements