Web DesignMGS 351- Renee Cerullo

What makes the Internet work HTTP - Hyper Text Transfer

Protocol

DNS - Domain Name Server DNS servers are used to map

permanent and user-friendly names like microsoft.com to unfriendly and impermanent IP addresses

Domain Names

Web Servers

Domain Name Registration When you want to use a domain name you

need to register it with a Domain Registrar so that everyone on the Internet can access your site Eg – Dotster, Network Solutions

It is how your site visitors and customers will remember you and find you among the millions of other websites on the Internet.

overseen by the ICANN (Internet Corporation for Assigned Names and Numbers)

Web Servers

Computers that actually run web sites

Also refers to the piece of software that runs on those computers, accepting HTTP connections from web browsers and delivering web pages and other files to them, as well as processing form submissions

Types – IIS, Apache, Websphere

Web Servers

Every Web server has an IP address and most likely a domain name

Any computer can be turned into a Web server by installing server software and connecting the machine to the Internet Web Developers have a web server running on

their desktops – comes with Windows OS

Web Servers look for certain pages on a web site to load by default Index.htm, index.html, deafult.asp, index.asp, etc You can set the web server to load any page by

default

Web Page Design

W3C

Founded in 1994 – World Wide Web Consortium

Creates specifications and guidelines that are intended to promote the web’s evolution and ensure that web technologies work well together

Specifications for: HTML, CSS, XML, XHTML, DOM, etc…

W3C Not all browser companies follow or

adhere to these guidelines It was not until FireFox, Netscape 7 and IE

6 did browsers truly support the W3C Web Standards

This is why a web page may look different in two browsers Eg. www.cheektowaga.org Browsers support different standards, not

all of them and support them in different methods

Designing with Standards

Does not mean “designing for the latest browsers only”

The perfectly designed site (w/standards) will never look identical in all browsers – both current, past, and future browsers Should always function and look

pretty close in any browser

Web Standards Structural languages like XHTML

and XML, presentation languages like CSS

Designing with standards lowers production and maintenance

costs makes sites more accessible to users

who have special needs Makes sites cross platform and browser Viewable on handheld devices

Designing with Standards

When you design with web standards you break the web page into 3 parts:

Structure Presentation Behavior

Designing with Standards

Structure: A markup language (XHTML) contains

text data formatted according to its structural (semantic) meaning. Headline, paragraph, list etc..

Example:<p>this is a paragraph of text</p><h1>News & Events</h1> <ul>

<li>structure</li><li>presentation</li><li>behavior</li>

</ul>

Designing with Standards

HTML is obsolete!

HTML -> XHTML

Designing with Standards

Structure: When authored corrected XHTML

will work in all web browsers, screen readers, text browsers, and handheld devices

Valid/Semantic Code when: Contains no errors Tags are chosen according what

they mean- eg – h1-> headline Code can be valid but not semantic

Designing with Standards

Presentation: Presentation languages (CSS)

format the web page, controlling the typography, placement, color, etc…

Due to the separation of structure from presentation you can easily change one w/o effecting the other Eg – change the font type for the

entire site w/o touching and of the actual web pages

Designing with Standards

Presentation: Cleans up the actual web page

code Eg: <p><font color=“#000000”

size=“10px”><b>heading of an article</b></font></p>

WITH CSS

<p class=“articleheading”>heading of an article</p>

Designing with Standards

A XHTML template controls the document structure

A CSS controls the site’s look and feel

Changes can be made or new pages added w/o worrying about any presentation issues. Just add the text and the page is automatically formatted properly

Web Standards

Allows you to design on web page and have it look correct on: PDAs Cell phone browsers Desktop browsers – IE, Mozilla,

Netscape, Opera Screen Readers Print

Examples of why we us Standards

School of Mgmt on a desktop browser:

School of Mgmt on a PDA browser:

School of Mgmt on a cell phone browser:

Examples of why we us Standards

PDA browserCell Phone browser

Opera PDA browser

Accessibility

Intended to ensure that our work will be usable and available to the largest possible number of people

Hot topic in the web design industry

Laws are in place to make sure companies and web designers adhere to certain rules

Who does it affect?

Visually impaired – blind or limited site or elderly

Physically disabled Color blind Motor impaired – rather buy

online than deal w/the hassle of going to a store

Any thoughts on who else? There are a whole bunch more!

Who does it affect?

Search engine crawlers – extreme blind user Called the “Blind Billionaire” Biggest category of blind users

PDA users Text only browsers Cell Phone users

US Section 508 Guidelines Part of the US Rehabilitation Act of

1973

1998 – Public law 105-220 – Rehabilitation Act Amendments – significantly expanded 508’s technology access requirements

Covers: fax machines, copiers, telephones, ATMs, kiosks – any machines for transmitting information – including web sites

Lets talk code – XHTML Code

XHTML Tighter rules than HTML New elements Consistent unlike HTML

Must open & close tags Eg – HTML -> <br>

XHTML -> <br/> Avoids browser problems w/closing

tags Merges HTML and XML

Cant not serve raw XML to a browser

XHTML Syntax

DOCTYPE informs the validation service which

version of XHTML or HTML Always written in CAPS Informs browsers which document

type definition you are using – how to handle your web page so it is displayed properly

Pages wont validate w/o the proper DOCTYPE stated

XHTML Syntax DOCTYPE – 3 types to choose from

Transitional – more easy going and flexible. Most people are using this

Strict – everything must be perfect and there is no flexibility

Frameset – 90’s fad – Allows you to use frames on your page – YUK!

XHTML Traditional Closest to HTML

You can use the target attribute Opens pages in new windows Used with frames

Background color for table cells

You can use tables

XHTML Syntax - Structure General Structure of a web

page:

DOCTYPEXHTML Namespace declaration<html><head></head><title></title><body> text here</body></html>

(see example)

XHTML Syntax - CASE

Case sensitive All tags must be written in lowercase

With HTML many people wrote tags in uppercase

Eg. - <TITLE> becomes <title> If tags are not written in lowercase letters

then the page will NOT validate Some Editors will do this automatically for you

Warning – some OS are case sensitive too Means that your filenames must be exactly

the same or it wont find the file – UNIX is like this

EG – Test.htm is not the same as test.htm on UNIX

XHTML Syntax - Attributes Quote all attribute values width =200px

should be written width = “200px”

Must have spaces between attributes<hr width=“80%”size=“2” /> should be written<hr width=“80%” size=“2” />

XHTML Syntax - Attributes All attributes must have values!

<hr noshade> OR <option value=“option1” selected>Are INVALID

VALID MARKUP:<hr noshade=“noshade” /> AND<option value=“option1” selected=“selected”></option>

XHTML Syntax - Tags

All tags must be closed

<br> goes to <br/>

<input name=“field1”> goes to <input name=“field1” />

<p> </p>

** Editors will do this for you if you specified you are using XHTML not HTML

XHTML Syntax - Characters Encode all special characters

Patch & I = Patch &amp; Ix<y = x &&lt; y

XHTML Syntax -Links

Syntax:

Web Page Link or to a document:<a href=“index.htm”>some

text</a>

Email Link:<a href=“mailto:cerullo@buffalo.edu

”>Renee Cerullo</a>

XHTML Syntax - Links

Relative Links – only contain the information that is required to determine the new location Eg – <a href=“/crc/index.shtm”>some text</a> OR <a href=“/crc/”>some text</a>

Absolute Links – Full URL to a page

Eg – <a href=“http://mgt.buffalo.edu/crc/index.shtm”>some text</a>

XHTML Syntax - Images

You can use bmp, gif, jpg, or png images on a web page

<img src=“/images/logo.jpg” alt=“RLC Logo” title=“RLC Logo” />

XHTML Syntax

Think of your markup in structural rather than visual terms

Use CSS for layout/presentation Use elements for what they mean

Eg – there should not be multiple h1 tags throughout the web page

Don’t use a lot of <br /> Use <p> Lists don’t have to have bullets in

front of them

UB Web Environment

UB provides web space for each

student on the UBUNIX servers which

run the Apache webserver. Your

webpage can be viewed in any of the

3 locations. www.buffalo.edu/~djmurray

www.acsu.buffalo.edu/~djmurray

wings.buffalo.edu/~djmurray

UB Web Environment

URLs and files are case sensitive

because the UNIX OS is case

sensitive. www.buffalo.edu/~djmurray/INDEX.html - error!

www.buffalo.edu/~djmurray/index.html - works!

Windows servers running IIS are not

case sensitive. www.mgt.buffalo.edu/INDEX.cfm works the same

as www.mgt.buffalo.edu/index.cfm

UB Web Environment

Remember that a webpage is

simply a file stored on a webserver

in a particular location.

Your UB homepage is stored in the

public_html directory of your S:

drive. Anything in that directory is

technically on the web.

UB Web Environment

It’s easiest to work from a lab

computer since they have direct

access to the S: drive folders.

Enable your homepage first. https://webdfs.buffalo.edu/cgi-bin/

pub_html_on_off.cgi

Use Windows Notepad to edit the

index.html file in your public_html

folder.

XHTML Demo

Lets put together a page using XHTML