Web Site Design: Course Description

Web Site Design
Stanford University Continuing Studies CS

21
Mark Branom markb@stanford.edu

http://www.stanford.edu/people/markb/
Course Web Site: http://www.stanford.edu/group/csp/cs21/

Week 1 Slide 1 of 20
Course Description
In this class, we will explore the fundamentals of web site creation. We’ll
look at the software, on-line resources, and reading materials which will
help you build outstanding web sites. The class will consist of a mixture of
hands-on exercises, lectures, and demonstrations. Topics covered will
include:
– Web design principles
– HTML basics
– Adding images to web pages
– Linking web pages
– Building tables for data and graphical layout
– Graphics production for the web
By the end of the class, you will have built a website and be ready to strike
out on your own. Students MUST have access to a computer, be familiar
with computer basics, and have access to the Internet. We will be working
on the IBM-PC platform; however, since the Web is cross-platform, you can
apply the knowledge you gain from this class to other computer platforms.
CS21: Web Site Design Week 1 Slide 2 of 20

1
Administrivia
Grading
You have the option of taking this course for a letter
grade, CR/NC, or as an Audit.
Letter Grade CR/NC NGR

Attendance Required Required Recommended
Homework Required Required Recommended
Project Required Required Not required
By request By Request Default choice
More Administrivia
• Resources
– Each week you will receive supplemental handouts and in-
class exercises. Copies of the handouts and links to
resources will be posted to the CS21 website:
• http://www.stanford.edu/group/csp/cs21/
• How to reach me:

– markb@stanford.edu
– 650-725-1717

2
More Administrivia
• You will need:
– Access to a computer
– Familiarity with computer basics
– Access to the internet (many free ISPs exist)
– A tripod account (we’ll do it in class)
– Access to the following tools:
• A text editor (TextEdit for Macs; Notepad for Windows)
• A web browser (Firefox / Internet Explorer)
• An FTP client (Fetch for Macs; WS_FTP for Windows)
Assignments & Final Project

• The weekly class assignments will build
toward the final project
• The final project will be to turn in a web site
consisting of one home page and four linked
subsequent pages with content, links, and
graphics on all of them.
• The assignment will be "turned in" by being
loaded onto your tripod webspace.

3
Course Syllabus
• Week 1: The Web & HTML basics
• Week 2: Adding Links and Styles (CSS - the basics); FTP
• Week 3: Adding Graphics (basic); Designing for the Web
• Week 4: More on Designing for the Web; More on Graphics
• Week 5: Imagemaps, Sound & Video; Lists
• Week 6: Tables
• Week 7: Cascading Style Sheets (CSS) - more advanced usage
• Week 8: Forms & WYSIWYG editors
• Week 9: Frames; Internal links; meta tags; site promotion
• Week 10: Unfinished business; in-class lab time to work on projects
Week 1 Agenda
• Demystifying the internet ("How does it work?")

• Demystifying Web Pages
• HTML basics

4
How the internet works...
The Internet is a
network of networks
that allows for
communication and
sharing of information.
The World Wide Web is
just one of several
applications which can
be used on the
Internet.
Web Terminology
• FTP (File Transfer Protocol), SFTP (Secure File Transfer Protocol)
- allows computers to exchange files over a network
• HTML (HyperText Markup Language) - the "programming" language used to write web
pages
• HTTP (HyperText Transfer Protocol) - the internet protocol which allows web pages to
work
• Protocol - ground rules or "language" that internet computers use to "talk" with each
other
• Source file - the set of tags and text which make up a web
page. Browsers process the source file to make the web page
look the way the designer wanted it to look.
• URL (Uniform Resource Locator) - a web address; indicates the
location of a web resource as well as the protocol needed to
access it
• Web browser/navigator/client - the software application which displays web pages
• Web page - a single page on the web (a "homepage" is the first web page on a web
site)
• Web server - the computer or network of computers which stores web pages
• Web site - a collection of web pages, usually on a particular topic or business
5
How web pages work…
1) Client (user) tells the browser to request a web page using the http protocol
2) Request goes over the internet to the web server
3) Web page is found on the web server
4) Copy of the source code for the web page is sent back to the original
computer
5) Browser processes ("translates") code into web page
The
Internet
Client (user) Server

How does it work?
Web pages are simply made up of plain ASCII text. Web browsers
process the codes used on web pages to display a fully formatted
web page. But the pictures, colors, and other non-text items on a
web page aren't actually on the web page itself -- the
web page itself is
simply text,with the
formatting and
graphics encoded.
You
can look at the
code for any web
page by going to Slide 12 of 20
the "View" menu
and
choosing "Page
Source".
CS21: Web Site Design

Week 1
6
Introduction to HTML
• HTML stands for "HyperText Markup Language"
• HTML is a collection of text surrounded by tags which modify
the text of the document.
• All tags are encoded in angle brackets (<>).
• Tags work in pairs -- one turns on the modification, one turns it
off. Stop tags look just like start tags except they have a slash
(/) in front.
<tag>affected text</tag>
• Some tags work on their own. Since they don’t have a closing
tag, we place a / at the end of the tag. The Horizontal Rule tag
<hr /> is an example.
• Most tags have attributes which can modify how they function:
<tag attribute="value">affected text</tag>
Tag examples
<em>I want this in italics</em>
is processed by the browser to look like:

I want this in italics
<p align="center">I want this new paragraph to be

centered</p>
is processed by the browser to look like:

I want this new paragraph
to be centered

7
Structural tags
• These are the basic tags which must be a part of
every web page. They tell the browser that the
document is a web page.
<html>
<head>
<title>Title of Webpage</title>
</head>
<body>
This is where the main part of the web page
would go
</body>
</html>
Breaking Lines and Paragraphs

•<p> text text text </p>
–Paragraph tag
–Most browsers render (process) this with blank lines between each paragraph
•<br />
–Line break tag. Used when the webmaster wants a carriage
return but doesn't want a blank line to follow
•<hr />
–Horizontal Rule. Used to place a straight line across the page.

8
Examples of Breaking Lines
<p>This is an example of how</p>

<p>paragraph tags work.</p>
<hr />
<br />This is an example of how
<br />line breaking tags work.
Header Tags
Header Tags -- Used for marking sections and
subsections in a document. Using
Cascading Style Sheets (CSS), you
can change the default meaning for
the tags (more on this next week).
<h1> Header 1 -- Giant-sized and bold </h1>

<h2> Header 2 -- Large and bold </h2>
<h3> Header 3 -- Normal-sized and bold </h3>
<h4> Header 4 -- Small and bold </h4>
<h5> Header 5 -- Very Small and bold </h5>
<h6> Header 6 -- Tiny and bold </h6>
9
Header Tags (cont.)
H1 = Giant-sized and bold

H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold
H6 = Tiny and bold
Formatting text
• Bolding and Italicizing:
– <strong>text you want bold</strong>
<b> you can also use the bold tag (no longer recommended) </b>
– <em>text you want in italics</em>
<i> you can also use the italics tag (no longer recommended) </i>
• Aligning text or graphics left/center/right:

– <p align="left">new paragraph justified left</p>
– <p align="center">new paragraph centered</p>
– <p align="right">new paragraph justified right</p>
10
Web Site Design
21


Week 2 Agenda
• Unfinished business
• Review of Week 1
• Adding Links
• Adding Styles (Cascading Style Sheets)
• File Transfer Protocol (FTP)

1
Review - Structural tags
• These are the basic tags which must be a part of
every web page. They tell the browser that the
document is a web page.
<html>
<head>
<title>Title of Webpage</title>
</head>
<body>
This is where the main part of the web page
would go
</body>
</html>
Review - Breaking Lines

• <p> </p> = paragraph tag
(blank lines between each paragraph)
• <br /> = line break tag (carriage return)
<p>text a</p> <br />text a
<p>text b</p> <br />text b
text a text a
text b
text b
• <hr /> = horizontal rule

tag
(line across screen)
2
Review - Header Tags
H1 = Giant-sized and bold

H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold
H6 = Tiny and bold
Review - Formatting text
• Bolding and Italicizing:

– <strong>text you want bold</strong>
– <em>text you want in italics</em>
• Aligning text or graphics left/center/right:

– <p align="left">new paragraph justified left</p>
– <p align="center">new paragraph centered</p>
– <p align="right">new paragraph justified right</p>
3
Linking Documents
• One of the really exciting things webmasters can do is link

their web page to another's.
• To do this, webmasters use a pair of anchor tags:
<a href="URL">text to become clickable hotlink</a>
A = Anchor
HREF = hypertext reference
URL = Uniform Resource Locator
(a web address, such as http://www.stanford.edu/)
More on linking documents
• Things to know about links:

– Case counts for the URL
– The URL must be exact
– You must have something in the "text to
become clickable hotlink" section for the link to
work

4
File Transfer Protocol
• FTP (File Transfer Protocol) is used to publish web
pages by copying the HTML source files from your
computer to the server computer.
• Some web servers will no longer allow you to use FTP

and instead require SFTP (Secure FTP) or SSH (Secure
Socket Shell). But the concept is the same -- you create
your web page on your computer, then copy them to the
server computer.
Colors
• Web colors are specified by HEXADECIMAL code which describes
the RGB value. RGB stands for RED GREEN BLUE. These are the
primary colors that make up all other colors. The hexadecimal code
includes two characters for each color. Hexadecimal codes have the
format: #RRGGBB
• Examples: White = #FFFFFF, Black = #000000,

Red = #FF0000, Green = #00FF00
• Browsers greater than version 3 can also correctly process 256 named
colors (red, white, black, turquoise, periwinkle, etc.)
Ref: http://www.stanford.edu/group/csp/cs21/samples/color.html
5
Using Colors on Web Pages
One way you can setting colors for the entire page is to modify (by adding
attributes to) the <BODY> tag:
<body bgcolor="red" text="yellow" link="green" alink="black" vlink="purple">
BGCOLOR = modifies background color

TEXT = modifies text color
LINK = modifies link color
VLINK = modifies viewed link color (links that have been visited)
ALINK = modifies active link color (color that occurs the split second a user is
clicking on a link)
Cross-platform color issues

• Different systems have different color cards & monitors and aren't calibrated to each
other
• Even within the same system, color cards and monitors, the user can set their options
and change the look of their displays
• Macs tend to be brighter than Windows
• Strive for contrast and value balance
BAD EXAMPLE:
http://www.stanford.edu/group/csp/cs21/demos/low.html
GOOD EXAMPLE:
http://www.stanford.edu/group/csp/cs21/demos/BonW.html
http://www.stanford.edu/group/csp/cs21/demos/WonB.html

6
Fonts
• Designers can also specify the font they wish to use on the page. One way to do this is to use the
<font> tag. However, the W3C has recently decided to deprecate both the <font> tag and the use
of the bgcolor attribute -- instead, they want us to start using style sheets. More on how to use style
sheets in the next couple of slides. That said, many web sites today still use the <font> tag.
• Not all systems have the same fonts. If you choose a font that isn't on the user's system, the page won't
look the way you prefer.
<font face="FONTNAME"> [text] </font>
• The default font for browsers is Times. This is a SERIF font. Another popular choice is Arial. This is a
SANS-SERIF font. Another type of font is MONOSPACE, such as Courier.
• One way to avoid the issue of conflicting or missing fonts is to specify the type of font, rather than the
actual font, such as:
<font face="sans-serif"> [text] </font>
• Another way is to put more than one font into the tag. The browser will check to see if the computer has
the font in order:
<font face="Palatino, Arial, sans-serif"> [text] </font>
CS21: Web Site Design
Other Font Attributes

• SIZE = "number": 1 = smallest, 7 = largest
<font size="1">Small size</font>
Small size
• COLOR - changes text color (use either hexadecimal code or named color)
<font color="red">Red</font>
Red
Combining Font Attributes:

<font face="comic sans ms" color="yellow" size="7">Comic Sans MS,
Yellow, Size 7</font>
Comic Sans MS, Yellow, Size 7
7
Using Cascading Style Sheets
• Cascading Style Sheets allow you to customize the look of your pages by creating a
style for these pages and then change the look of the entire site by making one change in
one document. Style Sheets are well known to "power-users" of MSWord and Adobe
Pagemaker. This same level of ease and control works on the web.
• Style sheets work by allowing you to define properties for how HTML elements (tags)
appear when viewed in a Web browser. For example, you can set it up so that every
<h1> on your page appears in green, Arial, 18 points, and italics -- automatically
(instead of big and bold, which is the default state of h1).
H1 Example
• If in the future you decide they should all be blue, then you just change it in one place
and they can be updated throughout your site.
H1 Example
How do style sheets work?

• Suppose you want to create that page where every <h2> tag is green, italicized, and in Arial
font. Before CSS came along, you would have to write the following every time the <h2> tag
was used.
<h2><i><font face="Arial" color="green">This is a green,
italicized, Arial H2</font></i></h2>
• Now, you can simply specify this in a single step by typing something like this:
h2 {font-family: Arial; font-style: italic; color: green; }
• Then in the body of the document, you simply use the <h2> tag as usual. When the page
is viewed, all the <h2> tags will appear as you wished them to automatically.
• If later you do decide you want the <h2>s to suddenly be blue instead of green, you simply
change the style sheet command to be blue instead of green.
• You can set up styles for every HTML tag. This is done either by placing the styles in the
<head>, by using an inline style, or by placing the styles in an external style sheet.

8
Defining styles: head
• You can set a style sheet for a single document by putting the style information in the head of
the document.
The actual style information is included in an HTML comment tag () in order to hide it from browsers that don't understand CSS. The TYPE attribute
of the <style> tag defines the type of style sheet being used -- in this case CSS, Cascading
Style Sheets.
Defining Styles: inline

You can also simply include the style information in a particular tag right in the document by
adding the STYLE attribute to the tag directly.
This particular method is most useful if you want to change a single instance of a tag in a
document that already has a style associated with it. When there are multiple styles affecting a
document, the style closest to the tag in question takes precedence. In other words, if I have put a
style in HEAD of the document but also included an INLINE style, that INLINE style will
override the document style for that one instance of the tag.
9
Using an external .css file
To set a style for an entire site of documents, create a standalone text file with a .css extension (e.g., basic.css)
that contains the necessary style information. Then, link each web page to that CSS file using either the <link>
tag or the import method:
Text that appears in the basic.css style sheet document

h2 {font-family: Arial; font-style: italic; color: green;}
p {font-family: Courier; font-style: bold; color: red; }
HTML document, using the <link> tag method HTML document, using the import method
<head> <head>
<link rel="stylesheet" <style type="text/css">
type="text/css"
href="basic.css" /> 
</style>
</head>
Classes and IDs

• Classes and IDs are ways for you to pre-define particular features.
• Suppose you wanted to create a style to allow parts of a web page to be highlighted.
• You can create such a style by creating either a class or an id, defining that class or id,
and then referencing that class or id when you want it to be used.
• Classes can be used more than once on a web page; an id should only be used once per
web page. Classes are preceded by a "." (dot). IDs are preceded by a "#".

10
Span and div
• You can also use classes and ids with <SPAN> and <DIV> tags. These are container tags with
minimal formatting associated with them. You can set up a <SPAN class="whatever"> to attach a
style to specific letters or words. The <DIV> tag will start on the next line and start a new line after
itself and is used to attach a style to larger bodies of text or graphics.
Homework/Next Week
• Start thinking about the color scheme for

your web site and create a color chart.
• Next week: Design issues and Graphics!
11
Web Site Design
21


Week 3 Agenda
• Using Special Characters
• Using Graphics on web pages
• Types of web graphics
• Using existing web graphics
• Creating web graphics
• Background graphics
CS21 Web Site Design Week 3 Slide 2 of 24
1
Special Characters
• Because the source codes for Web pages are created with
plain ASCII text only, the characters on the source code are
limited to the standard keyboard characters. To have
special characters such as œ, ß, ñ, or © show up on a web
page, designers must utilize special HTML codes.
• Example:
© = © ñ = ñ ß = ß = œ
http://www.stanford.edu/group/csp/cs21/samples/ascii.html
Structure of a URL
• Uniform Resource Locators provide links from a page
anywhere on the World Wide Web to any resource on the
Internet.
• Starts with the protocol (defines how the info is to be sent and
received):
– http:// Web page

– ftp:// FTP site
– mailto: send a mail message
– file:/// File on a local (desktop) machine

2
The server
• Servers are computers which provide

HTML web pages to a browser using
the http protocol.
• Must have direct, permanent connection

to the Internet
Domain
• Domain defines the server on the internet

where the the resources are located.
Common ones are .com (commercial), .org
(nonprofit organization), .mil (military), and
.edu (educational facility)
• Common country codes are: .uk (United

Kingdom), .jp (Japan), .au (Australia)

3
Directory Path
• Directory path consists of zero or more
directories separated by forward-slash
characters. (/)
• Important distinction between PCs and the

internet: directories on PCs are separated by
backwards slash. (\)
Links
• <a href="http://www.stanford.edu/people/markb/resume.html">
Mark's resume </a>
• This is an absolute link. It defines completely the domain of the host computer
(www.stanford.edu), as well as the path (/people/markb) and the file
(resume.html).
• <a href="resume.html">Mark's resume</a>
• This is a relative link. Note that the protocol, domain, and path are omitted from the
URL. The browser will assume the current domain and path are to be used.
By current, we mean the domain and directory of the page that is currently being
displayed (ie, relative to the current page, find this page).

4
Using Graphics on Web Pages
• Graphics on web pages are separate files. Unlike a
Word document, where the graphics actually "live"
within the document, to get a graphic on a web
page, designers point to the graphic file in the HTML
source code like this:
<img src="URL-of-graphic" alt="description of graphic" />
• Graphics are copyrighted material and should only

be used with permission.
Graphics can be described as either

relative or fully qualified URLs
http://www.stanford.edu/group/csp/cs21/demos/bunny.html
<html>
<head>
<title>Bunny Webpage</title>
</head>
<body bgcolor="turquoise">
<h2 align="center">BUNNY!</h2>
<p align="center">
<img src="bunny.gif" />
Relative reference (relative to the
</p>
</body>
location of the HTML document)
</html>
<html>
<head>
<title>Bunny Webpage</title> Fully qualified URL
</head>
<p align="center">
<img src="http://www.stanford.edu/group/csp/cs21/demos/bunny.gif" />

</p>
</body>
</html>

5
Bunny.html
In the bunny web page example, both bunny.html and
bunny.gif are located in the same directory.
(http://www.stanford.edu/group/csp/cs21/demos/)
That's why we could use relative URL to insert the
graphic (<img src="bunny.gif" />).
If we wanted to use the fully-qualified URL, it would
have been:
<img src="http://www.stanford.edu/group/csp/cs21/demos/bunny.gif" />
But since both bunny.gif and bunny.html are in the

same webspace, it makes better sense to use the
relative URL.
Types of Web Graphics

GIF: GIF (Graphics Interchange Format) is the most
common graphic type on the web. It can be pronounced
with a hard or soft “g.” GIF is limited to 8-bit color
information (256 colors) and works best for line art. It allows
for transparent and animated graphics.
JPEG: JPEG (Joint Photographic Experts Group) was

designed for color-rich images, such as photographs. JPEG
compresses graphics with high color depth (24-bit color --
up to 16 million colors) so that they are smaller and
download faster. JPEG compression is "lossy" -- some
image detail is lost during compression
PNG: PNG (Portable Network Graphics) was also designed

for color-rich images, but unlike the JPEG format, PNGs are
not lossy. PNGs use vector graphic technology to display
images in rich detail regardless of the size of the image.
CS21 Web Site Design
6
Using Existing Web Graphics
• Not a graphic artist? Don't despair! Few of us are!

• There are numerous graphics archives on the Web where you can find
wonderful, usable, professional-looking graphics for use on your web
pages.
• Remember, graphics are copyrighted -- don't use them unless they are
from an archive or you have explicit written permission to use them.
• To find a graphics archive, point your browser to Yahoo!
(http://www.yahoo.com/) and search for "Clip Art" or "Web graphics".
You'll likely find more than you could possibly use.
• There are a couple of graphic archives listed on the Resources page.
Downloading Graphics
• In your web browser:
– Point your mouse over the image and right-click
the image.
– Choose “Save Image (Picture) As . . .”
– Specify the destination location of the image file

on your computer. Click OK.

7
Downloading Graphics example
• Suppose you came

across this website I’ve
created which has some
pictures of me.
Suppose you really loved

the picture of me on the
left and you want to
download it for use on
your own website. How
would you go about
doing this?
BTW, the URL is: http://www.stanford.edu/~markb/pictures.html

CS21 Web Site Design

(cont.)
• Step 1: Move the mouse over the
image that you want and right-click
on the image you want (on a
Macintosh, hold down the mouse
over the image you want)
• Step 2: Choose “Save Image As”

8
(cont.)
• Step 3: Choose the location on your computer where you want to save
the image. I’m going to save it on my floppy disk.
• That’s it! Now that I’ve downloaded the image to my computer, I can
refer to it in my webpage with the <IMG> tag.
Creating Web Graphics

• If you are familiar with creating computer graphics, applying that
knowledge to creating web graphics isn't too difficult.
• If you're not a graphic artist, the process and options could
easily take up a course all their own.
• Things to consider:
– When you create your own graphic, save it in a "true image format"
(BMP on Windows, PICT on the Mac). Make any changes to the
graphic in the native file format. THEN resave a copy as GIF or
JPEG
– Save the graphics as 75-100 dpi -- anything much more than that is
wasted
– Smaller file sizes are better when it comes to web graphics. The
larger the graphic, the longer the download time.

9
Photographs
• Existing photos can be converted to digital format
using a scanner and scanner software. Most scanner
software allows you to save the graphic as a GIF or
JPEG. If you aren't happy with the resulting photo, it
can be "cleaned up" using a program such as
Photoshop or Fireworks. New photos can be
converted to digital format (usually JPEG) by the
processor. Kodak, Longs, and other processors can
save your photos on a CD-ROM or diskette as well as
creating prints for you. Again, these photos can be
"cleaned up" using a program such as Fireworks.
Creating Web Graphics

• Graphics Software Packages
– There are a wide variety of software packages available for
the creation of Web graphics. Some are designed
specifically for this purpose (such as Fireworks) while others
can do much more than merely create Web graphics but do
a great job at that task as well (such as Photoshop).
– Creating graphics can be a simple process (creating a button
with a text label) or a much more complicated process
(creating a logo).
– Visit the Resources page for suggestions on software. Also,
there is a listing of free tools available for download on the
web.

10
Background Graphics
• Done by modifying the <BODY> tag:
<body background="THE_URL">
or by adding a body style to the style sheet
body { background: url(THE_URL); }
where THE_URL is the location of the graphic
• Creating a web page with a colored background can be nice but you can go one step
further with a background graphic.
• Background graphics are generally small graphics that tile across the browser window
to create a filled-in effect. As such, some graphics are better suited to being
background graphics than others.
• General rules:
– Keep the graphic/text contrast high
– Keep the background graphic SIMPLE -- too much color, too much pattern can
make it really hard to read over
– Don't overuse background graphics -- it can become distracting
Animated Graphics
• Using Existing Animations
– Most graphics archives include animated sections
– Most animations are a form of GIF format; in terms of placing
animations on a web page, there is no difference between
an animated GIF and a non-animated GIF (same tag, same
process).
• Creating New Animations
– There are software packages specifically for creating
animations. Animations are a series of static graphics that
are "stitched" together and saved into one file. The browser
shows each of the static images in sequence resulting in the
animations.

11
Uploading image to webspace
• Process is the same as uploading HTML files
• Only difference -- graphics are BINARY, not

plain ASCII text, so you'll need to press the
BINARY or RAW DATA button in your FTP
client (Fetch / WS_FTP)
• Don’t forget to reset the button back to

"ASCII" for when you send HTML files...
Weekly Assignment
• Visit some graphics archives. Choose some
graphics you'd like to have on your pages.
Save them to your hard drive so you'll have
access to them (get permission if they're
copyrighted!)
• Or, if you have the software and skills, create
a graphic or two to use on your site.
• Or, scan a photo into your computer

12
Web Site Design
21


Week 4 Slide 1 of 8
Week 4 Agenda
• Graphics review
• Setting image size & other tips
• Web Design Issues (separate presentation)
1


relative or fully qualified URLs
<html>
<head>
</head>
<p align="center">
</p>
</body>
</html>
<html>
<head>
</head>
<p align="center">
<img src=" http://www.stanford.edu/group/csp/cs21/demos/bunny.gif" />

</p>
</body>
</html>

2
Graphics
• <img src="URL" alt="text description" title="text
description" height="xx" width="yy" border="zz"
align="left/right/top/middle/bottom" />
SRC="URL" (required): URL is the location of the image file
ALT="text": Alternative text which is displayed if the browser cannot process the
image. The text will display as a tooltip in Windows Internet Explorer.
TITLE="text": Title of an image -- this will be displayed as a tooltip in most browsers
HEIGHT="XX": Height in pixels of the image file
WIDTH="YY": Width in pixels of the image file
BORDER="ZZ": Size of the border, in pixels (select 0 if you don't want a border)
ALIGN="LEFT/RIGHT/TOP/MIDDLE/BOTTOM": Alignment of the image in
relationship to the surrounding text
To find the width & height of an

image (Internet Explorer):
1. Launch Internet Explorer and locate the website that
has the image.
2. Place the mouse over the image.
3. On a Windows-based PC, press the right-click button.

On a Macintosh, control-click the mouse button.
4. A dialog box will appear. Select "Properties".
5. Look at Dimensions: Your image will be listed in pixels

(Width x Height)

3
To find the width & height of an
image (Firefox):
1. Launch Firefox and locate the website that has the image.
3. On a Windows-based PC, press the right-click button. On a

Macintosh, control-click the mouse button.
4. A dialog box will appear. Select "Open this Image"

(Macintosh) or "View Image" (PC).
5. Look in the title bar.

The image size should be displayed in pixels: Width x Height
Homework / Next Week

• Look around for graphics to use in your web
site.
• Next week:
– ImageMaps
– Embedding Sound and Video
– Lists

4
Web Site Design
21


Week 5 Agenda
• Graphics review
• Imagemaps
• Embedding Sound & Video
1
(Review)


relative or fully qualified URLs (Review)
<html>
<head>
</head>
<p align="center">
</p>
</body>
</html>
<html>
<head>
</head>
<p align="center">
<img src=" http://www.stanford.edu/group/csp/cs21/demos/bunny.gif" />

</p>
</body>
</html>

2
Graphics (Review)
• <img src="URL" alt="text description" title="text
description" height="xx" width="yy" border="zz"
align="left/right/top/middle/bottom" />
SRC="URL" (required): URL is the location of the image file
ALT="text": Alternative text which is displayed if the browser cannot process the
image. The text will display as a tooltip in Windows Internet Explorer.
TITLE="text": Title of an image -- this will be displayed as a tooltip in most browsers
HEIGHT="XX": Height in pixels of the image file
WIDTH="YY": Width in pixels of the image file
BORDER="ZZ": Size of the border, in pixels (select 0 if you don't want a border)
ALIGN="LEFT/RIGHT/TOP/MIDDLE/BOTTOM": Alignment of the image in
relationship to the surrounding text
To find the width & height of an image (Internet Explorer):

(Review)
1. Launch Internet Explorer and locate the website that

has the image.
3. On a Windows-based PC, press the right-click button.

On a Macintosh, control-click the mouse button.
4. A dialog box will appear. Select "Properties".
5. Look at Dimensions: Your image will be listed in pixels

(Width x Height)

3
To find the width & height of an image (Firefox):
(Review)
1. Launch Firefox and locate the website that has the image.
3. On a Windows-based PC, press the right-click button. On a

Macintosh, control-click the mouse button.
4. A dialog box will appear. Select "Open this Image"

(Macintosh) or "View Image" (PC).
5. Look in the title bar.

The image size should be displayed in pixels: Width x Height
What is an image map?

• Image maps allow a webmaster to take an
image and define more than one hyperlink for
the image. Each hyperlinked section is called a
"hotspot".
• To define a hotspot, webmasters open the

image in a graphics program and record the
coordinates of the points corresponding to the
hotspot boundaries.
4
Map tags
<img src="map.gif" usemap="#name-of-map" />
<map name="name-of-map">
<area shape="rect" coords="x,y,a,b" href="link1.html" />
<area shape="circle" coords="x,y,r" href="link2.html" />
<area shape="polygon" coords="x1,y1,a1,b1,x2,y2,a2,b2,…"
href="link3.html" />
</map>
rect
<area shape="rect" coords="x,y,a,b"

• Coordinates refer to the x/y coordinates for the upper

left and the lower right coordinates for the rectangle.

5
circle
<area shape="circle" coords="x,y,r"

• The x/y coordinates refer to the center of the circle. The

r refers to the size of the radius (in pixels).
polygon
<area shape="polygon"
coords="x1,y1,a1,b1,x2,y2,a2,b2,…"
• Coordinates refer to the x/y coordinates for as many are

needed to define the polygon.

6
Imagemap software
• Macintosh
– Dreamweaver
• http://www.adobe.com/software/dreamweaver
• Windows-based PCs
– Dreamweaver
• http://www.adobe.com/software/dreamweaver
– MapEdit
• http://www.boutell.com/mapedit/
Enhancing with sound/video

• Adding sound and/or video to your website
can make viewing your site an exciting and
vibrant experience.
• However, depending on how you utilize this

technology, it can also bog down the servers,
and make visitor experience of your website a
real drag.

7
Sound and Video Archives
• http://broadcast.yahoo.com/
• http://commons.wikimedia.org/wiki/Category:Sound
• http://commons.wikimedia.org/wiki/Category:Video
• http://www.mp3.com/
• http://archive.museophile.org/audio/
• http://www.youtube.com/
• http://www.gofish.com/
• http://www.guba.com/
• http://www.ourmedia.org/
Using the Anchor Tag

• <a href="music.mp3">Click here to listen</a>
• <a href="movie.mov">Click here to view</a>
• <a href="movie.asf">Click here to view</a>
• <a href="music.ram">Click here to listen/view</a>
• Advantages:
– Page loads instantly. No waiting for large files to download in the
background.
– Works with all browsers, even version 1.1N
• Disadvantages:
– Requires plug-ins or players
– Can't adjust the height/width or location of the video/sound.

8
<embed> tag
• SRC="URL"
• AUTOSTART="TRUE|FALSE"
• ALIGN="BOTTOM|TOP|LEFT|RIGHT"
• ALT="ALTERNATIVE TEXT"
• BORDER="XX" -- in pixels
• LOOP="TRUE|FALSE"
• HEIGHT="XX" -- in pixels
• WIDTH="XX" -- in pixels
• HIDDEN="TRUE|FALSE"
• VSPACE="XX" -- space above/below embedded object (in
pixels)
<embed> examples
<embed src="bach.mp3" hidden="true"
height="0" width="0" border="0"
alt="Bach's Fugue in D
Major"></embed>
<embed src="movie.mov"
autostart="true" loop="false"
height="640" width="480">
</embed>
9
<bgsound>
• BGSOUND is not supported by Netscape or
Firefox. You can create a similar effect by
using the EMBED tag, setting the height &
width to 0 and have the clip start
automatically when loaded.
• That said, it can create some nifty sound

effects on IE browsers
<bgsound>
• BALANCE="XX"
– defines how the volume will be divided between
the 2 speakers
(-10000 to +10000)
• LOOP="TRUE|FALSE"
• SRC="URL"
• VOLUME="XX"
– Defines the volume of the background sound
(-10000 to 0)

10
<bgsound> example
Quiet:
<bgsound src="mozart3.wav"
volume="-1000" />
Loud:
<bgsound src="mozart3.wav"
volume="0" />
Next week…
• Lists
• Tables
• WYSIWYG editors (Dreamweaver)

11
Web Site Design
21

Course Web Site: http://www.stanford.edu/group/csp/cs21

Week 6 Agenda
• Lists
• Tables (how they work, practice using tables)
• Creative use of tables
• WYSIWYG editors
1
Lists
There are three types of lists in HTML:
• Unordered
– Bulleted lists (disc, circle, square)
• Ordered
– Numbered lists (1,2,3 or a,b,c or I,II,III, or i,ii,iii)
• Definition
– Lists with a "term" and a "definition"
List tags
• <ol> </ol> = Ordered List
– Attributes: "type=1/a/A/i/I"
• <ul> </ul> = Unordered List
– Attributes: "type=disc/circle/square"
• <dl> </dl> = Definition List
• <li> = List Item (in an OL or UL)

• <dt> = Definition Term (in a DL)
• <dd> = Definition Definition (in a DL)
2
CSS styles for lists
• list-style-type:
disc | circle | square | decimal |
lower-roman | upper-roman | lower-alpha |
upper-alpha | none
• list-style-position:
inside | outside
• list-style-image:
<url> | none
<UL> -- Unordered Lists

Note: type="disc" is the default attribute
<ul>
<li> Glory bear </li> • Glory bear

<li> Osito bear </li>
• Osito bear
<li> Brittania bear </li>
<li> Maple bear </li> • Brittania bear
<li> Germania bear </li> • Maple bear
</ul> • Germania bear

3
<UL type ="circle">
<ul type="circle">
<li> Glory bear </li>
° Glory bear
<li> Brittania bear </li> ° Osito bear
<li> Maple bear </li> ° Brittania bear
<li> Germania bear </li> ° Maple bear
</ul>
° Germania bear
<UL type="square">
<ul type="square">
 Glory bear
<li> Brittania bear </li>  Osito bear
<li> Maple bear </li>  Brittania bear
<li> Germania bear </li>  Maple bear
</ul>
 Germania bear

4
<OL> = Ordered Lists
Note: type="1" is the default attribute
<ol>

1. Glory bear
<li> Brittania bear </li> 2. Osito bear
<li> Maple bear </li> 3. Brittania bear
<li> Germania bear </li> 4. Maple bear
</ol>
5. Germania bear
<OL type="a">
<ol type="a">
a. Glory bear
<li> Brittania bear </li> b. Osito bear
<li> Maple bear </li> c. Brittania bear
<li> Germania bear </li> d. Maple bear
</ol>
e. Germania bear

5
<OL type="A">
<ol type="A">
A. Glory bear
<li> Brittania bear </li> B. Osito bear
<li> Maple bear </li> C. Brittania bear
<li> Germania bear </li> D. Maple bear
</ol>
E. Germania bear
<OL type="i">
<ol type="i">
i. Glory bear
<li> Brittania bear </li> ii. Osito bear
<li> Maple bear </li> iii. Brittania bear
<li> Germania bear </li> iv. Maple bear
</ol>
v. Germania bear

6
<OL type="I">
<ol type="I">
<li> Glory bear </li> I. Glory bear
II. Osito bear
<li> Brittania bear </li>
III. Brittania bear
<li> Maple bear </li>
<li> Germania bear </li> IV. Maple bear
</ol> V. Germania bear
More on ordered lists

• In addition to modifying the method of counting, you can also modify the
number to start the list with (start="xx" must be a numeric value, even if
the type is an alphabetical value):
<ol type="1" start="4"> 4. Glory
<li> Glory </li>
<li> Osito </li> 5. Osito
<li> Brittania </li> 6. Brittania
</ol>
<ol type="A" start="4"> D. Glory

<li> Glory </li>
<li> Osito </li> E. Osito (note: NOT start="D")
<li> Brittania </li> F. Brittania
</ol>

7
<DL> = Definition Lists
<dl> Glory
<dt>Glory</dt> Glory is the American
<dd>Glory is the American Bear</dd> Bear
<dt>Osito</dt> Osito
<dd>Osito is the Mexican Bear</dd> Osito is the Mexican Bear
<dt>Brittania</dt> Brittania
<dd>Brittania is the British Bear</dd> Brittania is the British
Bear
<dt>Maple</dt>
Maple
<dd>Maple is the Canadian Bear</dd>
Maple is the Canadian
<dt>Germania</dt>
Bear
<dd>Germania is the German Bear</dd>
Germania
</dl> Germania is the German
Bear
Tables
• Tables are one of the more complex HTML elements
you can use
• In their basic form, tables resemble spreadsheets

and are often used as such
• They can also be used to make creative page layouts

of your website (although the W3C recommends
using style sheets instead of tables for page layout --
more on that next week)

8
Table basics
Tags
• <table> </table> = defines a table
• <tr> </tr> = defines a Table Row
• <td> </td> = defines a Table Cell ("Table Data")
• <th> </th> = defines a Table Header (special kind of Table Cell)
• <caption> </caption> = defines a caption above the table
Attributes
• bgcolor / background - specifies background of the table (modifies <TABLE>,<TD>,
<TR>)
• border - specifies border width of table in pixels or % (modifies <TABLE>)
• height - specifies height of the table or cell in pixels or % (modifies <TABLE> and <TD>)
• width - specifies width of the table or cell in pixels or % (modifies <TABLE> and <TD>)
• cellpadding - specifies distance between cell and content within cell(modifies <TABLE>)
• cellspacing - specifies spacing between each cell (modifies <TABLE>)
Table example
<table>
<caption>
Beanie Babies!
</caption>
<tr>
<th>Bear Name</th>
<th>Description</th>
</tr>
<tr>
<td>Glory</td>
<td>American Bear</td>
</tr>
<tr>
<td>Osito</td>
<td>Mexican Bear</td>
</tr>
</table>
9
Creative Use of Tables
• In addition to allowing data to be placed onto
a web site, tables allow designers the ability
to control page layout.
• You can use tables to wrap text around

graphics, to put text in rows and columns (like
a newspaper), etc…
Demos of tables
• http://www.stanford.edu
• http://www.cnn.com

10
WYSIWYG Editors
• WYSIWYG stands for "What You See Is What You Get".
Be very careful about using WYSIWYG editors to create
web pages; often what the program creates is not exactly
what you want…
• That said, I use them on a daily basis. The current

industry standard WYSIWYG editor is Dreamweaver
(http://www.dreamweaver.com).
(DEMO -- Dreamweaver)
Next week…
• Cascading Style Sheets!

11
Web Site Design
21

Course Web Site: http://www.stanford.edu/group/csp/cs21

Week 7 Agenda
• Cascading Style Sheets
1
Defining styles: head (review)
• You can set a style sheet for a single document by putting the style information in the head of
the document.
The actual style information is included in an HTML comment tag (
</style>
</head>
Classes and IDs (review)

• Classes and IDs are ways for you to pre-define particular features.
• Suppose you wanted to create a style to allow parts of a web page to be highlighted.
• You can create such a style by creating either a class or an id, defining that class or id, and
then referencing that class or id when you want it to be used.
• Classes can be used more than once on a web page; an id should only be used once per
web page. Classes are preceded by a "." (dot). IDs are preceded by a "#".

3
Span and div (review)
• You can also use classes and ids with <SPAN> and <DIV> tags. These are container tags with minimal
formatting associated with them. You can set up a <SPAN class="whatever"> to attach a style to specific
letters or words. The <DIV> tag will start on the next line and start a new line after itself and is used to
attach a style to larger bodies of text or graphics.
Positioning
• This is the most fun but also the most difficult part of CSS.
• Here's how it works: when the browser draws the object on the page, it
places it into an invisible, rectangular box called a bounding box. You
can set the box's exact location on the page (absolute positioning) or
you can offset the box from other elements on the page (relative
positioning). You can also specify the size of the box. You can layer
objects on top of each other. And, you can use clipping to allow certain
sections to show through from lower levels. You can make objects
invisible as well.
4
Defining positions
• To define the position, you must first decide if its position will be absolute or
relative. If you want to absolutely define exactly where an object is, you must use
position: absolute.
#logo { position: absolute; top: 150px; width: 200px; height: 200px
font-family: Arial; font-style: italic; color: green; }
This would create a bounding box as an ID called "logo" that would be 150 pixels
from the top, 200 pixels wide, 200 pixels tall, with a font of Arial, italic, and green.
• You could also use an inline style:

<div style="position: absolute; top: 150px; width: 200px; height:
200px; background-color: pink;">This is text in a pink 200-by-200
pixel box that is 150 pixels from the top of the window.</div>
Position example

5
Positioning
• Relative positioning places elements into the flow of the document . . .
offsetting them from the previous element in the HTML code. This lets you
place objects in relation to each other.
• On the next slide, the first line of text flows normally across the page. The
<SPAN> line uses positioning to place it 150 pixels below and 50 pixels to
the right of the first line.
Position example 2

6
Layering
• Once you know how to set the horizontal and vertical positioning --
or X and Y axes, you now need to learn about the Z axis. This
allows webmasters to layer objects. Normally, if you put multiple
objects at the same spot, each object will cover the earlier ones.
Using the z-index style, you can specify which layer an object
resides on. By setting the z-index higher or lower, you can move
an object up or down the stack.
Layering Example #1

7
Layering Example #2
Next week…
• Forms
• Basic CGI programming

8
Web Site Design Week 8
21
• Forms
– What are Forms?
– Creating a Form Processor
– Creating an HTML form
Course Web Site:

http://www.stanford.edu/group/csp/cs21
Week 8 Slide 1 of 22 Week 8 Slide 2 of 22

1
Forms Parts of a Form
• Forms are Fun!!! • There are two parts to any

They form the basis for form:
interactivity on the World • The HTML portion, where the
Wide Web. visitor will interact with the
– allow visitors to communicate with the page webpage
owner
– guestbooks (where visitors can leave
• The CGI (Common Gateway
comments viewable to all) Interface) program which will
– allow page owners to gather information process the form.
about their visitors
– for online surveys
– for online exams
– to purchase supplies/tickets/room
reservations
2
Forms processing HTML part
• Once a user submits the form, the data sent needs
to be processed, usually via a CGI program • <FORM>: marks the form
(often written in PERL, C++, ASP, Visual • <INPUT>: tag used to define variables and field types
Basic, Java, or JavaScript). • TEXT: single-line textbox
• PASSWORD: single-line textbox but in hidden text
• RADIO: radio button single-choice selections
• Many CGI scripts are freely available to • CHECKBOX: checkbox button multiple-choice selections
• RESET: used to reset variables back to default value
download and utilize on your server without • SUBMIT: used to submit form to the CGI script
needing to have much expertise in the • BUTTON: used to submit form to a JavaScript or other client-
programming language: side script
• HIDDEN: used to submit hidden information
• <TEXTAREA>: tag used for multiple-line textbox
– http://www.webmonkey.com/programming/perl_cgi/
• <SELECT>: tag used for pull-down menus
– http://www.scriptarchive.com/
– http://www.cpan.org/scripts/
– http://www.cgiscript.net
– http://www.javascript.com
– http://www.macromedia.com/cfusion/exchange/index.cfm

3
<FORM> tag More on <FORM>
• Encloses all of the form elements. • Second, the form needs to know where to send the
- contains METHOD and ACTION attributes information. This is the URL being requested from the form,
and is referenced with the ACTION tag. This URL will
• First, the form needs to know how to send the information to the
almost always point to a computer script to decode the form
server. Two methods are available, GET and POST.
results.
• METHOD="GET"
– Most HTML documents are retrieved by requesting a single ACTION="http://www.company.com/cgi/script.pl"
URL from the server. GET tacks on the information from
the form to the end of the URL. Spaces are translated into + • Once you put it all together, your form will usually have the
sign; if there’s more than one variable, they’re separated by following format:
an & sign:
http://search.altavista.com/cgi- <FORM METHOD="POST"
bin/query?q=Stanford+University ACTION=”http://www.company.com/cgi/script.pl">
• METHOD="POST" [Form input tags and other HTML goes here]

With the POST method, the information from the form is sent
to the CGI script separately from the URL This is the </FORM>
preferred method. It is the method most commonly used in
creating forms, as it is less likely to cause problems if there • Notice that this form uses the method POST and sends the
are many variables and data. input information to a local script named script.pl in
Week 8 Slide 7 of 22 the cgi web directory.
4
<INPUT> tag <input type=“text” />
• FORM contents consist primarily of INPUT tags, which • <input type="text" name="name" size="xx"
define the field types and the names of the variables. These maxlength="yy" value="default-value" />
INPUT tags allow the visitor to enter information or to
• Creates a single-line box for your user to place data. You
select choices.
can set the size, maximum length, and default values if
• Each INPUT tag is given a TYPE and NAME attributes. you wish.
These attributes determine what kind of information it
• Example:
contains and the name identifer for the field.
• This is the syntax for an input tag: Enter your first name: <input type="text"
<input type="option" name="text" /> name="firstname" size="40" maxlength="40"
value="Enter First Name" />
• Types available:
• text checkbox button

• password radio hidden
• reset submit
• Other ways to input data:
• textarea
• select

5
<input <textarea>default
type=“password” /> text<textarea>
• Allows user to submit more than one line of text. Usually
used for comments or leaving feedback.
• <input type="password" name="name" size="xx"
maxlength="yy" value="default-value" /> <textarea rows="xx" cols="yy" name="text"
• Works the exact same way as the text type, but when a wrap="off|soft/virtual|hard/physical">default
user types in the information, asterisks appear instead of text</textarea>
text. However, this text is sent to the server in clear-text • Rows: number of rows
format! • Cols: number of columns
• Example: • Name: variable's name
Enter your password: <input type="password" • Wrap:
name="pass" size="10" maxlength="10" /> • Off=no wrapping of text allowed
• Soft or Virtual=wrapping is on, but text is sent to the
CGI script as a single line of text, without line breaks
• Hard or Physical=wrapping is on, and when the text is
sent to the CGI script, it is sent with line breaks
– Comments?
<textarea rows="3" cols="40" name="comments”
wrap="virtual">
Enter comments
</textarea>
6
<input
<input type=“radio” /> type=“checkbox” />
• Provides a group of buttons from which only one may be chosen • Works just like the radio button, except that more than one value can
be selected.
• <input type="radio" name="text" value="value" />
• <input type="checkbox" name="name" value="value" />
• If you want a radio button to be pre-selected, add the attribute
"checked". • Example:
<br /><input type="checkbox" name="computer" value="Mac" />Macintosh
• Example: <br /><input type="checkbox" name="computer" value="Unix"
<br /><input type="radio" name="univ" value="UCLA" />UCLA checked="checked" />Unix
<br /><input type="radio" name="univ" value="Harvard" />Harvard <br /><input type="checkbox" name="computer" value="Win98" />
Windows 98
<br /><input type="radio" name="univ" value="Oxford" />Oxford
<br /><input type="checkbox" name="computer" value="Win2k" />
<br /><input type="radio" name="univ" value="Stanford"
Windows 2000
checked="checked" />Stanford

7
<select></select> More <select>
• The select element shows a list of choices in as a pull-down menu.
• To allow a user to select more than one item, the MULTIPLE
<select name="class-enjoyment"> attribute is used:
<option value="bored">I’m bored with the class</option>
<option value="great" selected="selected">This class is
great!</option> <select name="favorite-food" multiple="multiple">
<option value="hamburger">Hamburgers</option>
<option value="pizza">Pizza </option>
</select>
<option value="tacos">Tacos </option>
<option value="vegetables">Vegetables </option>
</select>
• If instead of a pull-down menu, a list box is desired, add the SIZE

attribute (size refers to the number of items):
• <select name="class-enjoyment" size="2">
<option value="bored">I’m bored with the class</option>
<option value="great">This class is great!</option>
</select>

8
<input type=“reset” /> <input type=“submit” />
• This choice allows the user to reset and clear all of the data • The submit value displays a push button with the
fields to their default values. preset function of sending the data in the form to
the server to be processed, as defined by the action
• <input type="reset" value="text" />
attribute in the <form> tag.
• Whatever is put in the text for the value attribute will be
• <input type="submit" value="text" />
what is seen as the Reset button.
• Whatever is put in the text for the value attribute
<input type="reset" value="Clear all choices
will be what is seen as the Submit button.
and start over again" />
<input type="submit" value="Click here
to submit your choices" />
9
<input type=“image” /> <input type=“button” />
• Sometimes, designers wish to create their own • Sometimes you'll want to create a webpage that will
submit button using a graphical program. The do an action but won't submit the entire data. For
image value works exactly the same way the submit example, you might create a Javascript program to
value works. The SRC attribute defines the URL of calculate the shipping cost or the tax of a potential
the image; the ALT attribute will be displayed if the order. Whatever is placed in the value attribute will
browser is incapable of displaying images; the be displayed as the button; the name will be the
width and height attributes define the width and name called by the script.
height of the image; the border attribute defines
• <input type="button" value="text" name="name" />
whether a border is desired.
• This requires the use of a scripting language to tie
• <input type="image" src="URL-of-image" alt="text"
an event to the button and create an action.
width="xx" height="yy" border="0" />
• <input type="button" value="Calculate
• <input type="image"
Interest" name="calculator" />
src="http://www.company.com/images/
clickme.gif" alt="Click Me to Submit"
width="30" height="10" border="0" />

10
Hidden Hidden, cont.
• Allows webmasters to submit

default or previously specified
text that is hidden from the user.
• <input type="hidden"
name="name" value="text" /> General info:
Name: John Doe
Part=Widget&Qty=3&Name=John+Doe&ID=694
ID: 694
Order Form
Part Widget
Qty 3
Hidden
Name: John Doe
ID: 694
Client Week 8 Slide 22 of 22
11
Web Site Design Week 9
21
• Frames
• Internal Links
• Meta Tags
• Web site hosting and setting up
Course Web Site: a domain name
http://www.stanford.edu/group/csp/cs21

1
Frames Thinking about frames
• Frames allow a webmaster to
show more than one HTML file • What information will be
in a single browser window. displayed in each frame?
• They allow one part of the screen • How will the frames be placed?
stay up and running at all time How large will each frame be?
regardless of what's loaded onto • Which frames will be static?
the rest of the page. • Which frames will change in
• Problems with frames: response to hyperlinks being
– not all browsers support frames clicked?
– sometimes hard to figure out where
hyperlinks on a frame go
– longer delay in loading pages

2
Do a sketch first, then
code... Frames
• NO BODY TAG!
• <frameset> </frameset>
- defines a frame
– Rows - lays out frames in rows
– Cols - lays out frames in columns
Frames laid out in columns
Frames laid 1st 2nd 3rd

out in rows frame frame frame
1st frame
2nd frame
Week 9 Slide 5 of 29 3rd frame Week 9 Slide 6 of 29

3
Frameset Frame
<frameset rows="row height 1, • Frame tags define the properties

row height 2, row height 3,…">
of the HTML files used in the
frame.
<frameset cols="column width 1,
column width 2, column width 3,
…">
• There must be exactly as many
frame tags in a frameset as there
• Height & width can be pixels, %, or *. are size entries in the rows or
• Pixel = defines exactly how large cols attribute.
• % = total size of frameset
• * = whatever is left (determined by
browser)

4
Files used in
Frames examples simpleframe.html
simpleframe.html
http://www.stanford.edu/group/csp/cs21/simpleframe/simpleframe.html
f1.html
f2.html
f3.html
5
Nesting frames Nesting Frames example
http://www.stanford.edu/group/csp/cs21/nested/nested.html
• Just as you can nest tables to
control page layout, you can
also nest frames.
• If you choose to nest, be aware
of the potential confusion for
your viewers -- think about
making only one frame change.
• Be sure to name each frame so
you can target where the links
are going.

6
Source codes Source codes (cont.)
nf2.html
nested.html
home.html
nf1.html
7
Source codes (cont.) Source codes (cont.)
faq.html
contact.html
new.html
Week 9 Slide 15 o
f 29 Week 9 Slide 16 of 29
8
Using frames in a site Noframes
• Appropriate uses: • Always include the <noframes>

– Footnotes tag in the webpage where you
– Glossaries define the frameset. This is for
– Desire to keep your information browsers that cannot process
on top when your visitors visit frames.
another's website
• Pitfalls: <noframes>
<body bgcolor="white">
– Frame A loads into Frame B and <h1 align="center">This site uses frames.
<a href="home.html">
Frame B loads into Frame A. Click here for the main

information on this page.
</a>
</h1>
</body>
</noframes>

9
Internal Links Internal Links (cont.)
What if you wanted to let visitors jump around your web
page? Suppose you have a long page, and want users to have To point users to a designated spot in another document, you
the ability to jump back to the top of the page or right to the first need to determine that there is an <a name="spot">
bottom of the page? tag in that spot. Then you would create your link:
Or suppose you're putting a paper on the web and you want to
<a href="http://www.someplace.com/sample.html#spot">
have footnotes? Web designers can use an internal link to
Go to that location.</a>
satisfy these types of needs.
Internal links are a great way of creating tables of contents
Internal links let visitors be pointed to a specific spot on a web for long or complicated documents.
page.
Example:
<a name="specificspot"></a> http://www.stanford.edu/group/csp/cs21/calibration.html
(look for the "ref1" - "ref5" and "Return to Text" links)
The text in the NAME attribute can be anything, but using one
word is best. http://www.amazon.com
(open any item, then look for “Top of Page”)
Point users to this spot by using the number sign with
whatever was used in the NAME attribute.
<a href="#specificspot">Go to this location.</a>

10
Meta Tags Meta tag examples
Meta tags are mostly used by webmasters to
provide information about their website to search
<meta name="description"
engines. content="This is where I
<meta would put a one-
name="xxx" paragraph description of
content="yyy" this website" />
dir="ltr|rtl"
http-equiv="yyy" /> <meta name="keywords"
content="this, is,
name: specifies the type of information where, I, would, put,
content: sets the content keywords, related, to,
dir: sets the direction of the text (left to right or the, website, separated,
right to left)
by, commas" />
http-equiv: affects the way the browser & server
react to the webpage

11
Client-pull Cache control
• A main use of the meta tag is to • Webmasters also use meta tags to force
browsers to show current pages, rather than
force the browser to open a new viewing them from the cache.
page in a different location (or to
<meta http-equiv="Expires"
refresh an existing page after a set content="0" />
number of seconds). • Causes browser to NEVER view the
page in the cache
<meta http-equiv="refresh" <meta http-equiv="expires"

content="Sun, 21 Aug 2006 10:00:00
content="10; GMT" />
url=newlocation.html" /> • Causes browser to check for new
content starting on 8/21/06, otherwise
it'll show what's in the cache.

12
Preventing Search
Engines from indexing
your site Web Site Hosting
<meta name="robots" • Options:

content="noindex" />
• Don't take any info from this page – Internet Service Providers
• Often will give you a certain amount
<meta name="robots" of disk space to play with on the
content="noindex, nofollow" /> web (often 20-100 MB)
• Don't take any info from this page, and don't go • Address would be:
looking at any links http://www.isp.com/userid/
<meta name="robots" – Free Web Pages

content="noindex, follow" /> • We've been using tripod.com
• Don't take any info from this page, but go ahead and • Others also exist: geocities.com,
index links.
50megs.com, etc.

13
Setting up a domain Learning More...
• Right now, your tripod.com address looks • Many local colleges and universities offer
something like: a variety of classes on Web topics. Here
http://yourname.tripod.com/
are some suggestions:
• If you'd rather have it look something like Stanford University's Continuing Studies:
http://www.yourname.com, you will need to http://continuingstudies.stanford.edu/
register your own domain name with one of the
Canada College:
Internet's domain registrars. http://canadacollege.net/
College of San Mateo:

• Most registrars charge around $10-50/year to
http://gocsm.net/
register a domain name.
Foothill College:
http://www.foothill.fdha.edu/
• http://www.internic.net
• http://www.internic.net/alpha.html

14
Learning More (cont.)
• Books and Websites -- check

the resources page; although
they can be great resources,
books are often "outdated"
before they're even published.
• Practice! Most web designers

learned how to "do" HTML by
looking at the source codes of
others and playing around with
tags
15

Web Site Design: Course Description

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Site Design: Course Description

Hochgeladen von

Copyright:

Verfügbare Formate

Web Site Design

Stanford University Continuing Studies CS

Mark Branom markb@stanford.edu

Course Web Site: http://www.stanford.edu/group/csp/cs21/

CS21: Web Site Design Week 1 Slide 2 of 20

Letter Grade CR/NC NGR

By request By Request Default choice

CS21: Web Site Design Week 1 Slide 3 of 20

• How to reach me:

CS21: Web Site Design Week 1 Slide 4 of 20

CS21: Web Site Design Week 1 Slide 5 of 20

Assignments & Final Project

CS21: Web Site Design Week 1 Slide 6 of 20

CS21: Web Site Design Week 1 Slide 7 of 20

• Demystifying the internet ("How does it work?")

CS21: Web Site Design Week 1 Slide 8 of 20

CS21: Web Site Design Week 1 Slide 9 of 20

Client (user) Server

How does it work?

CS21: Web Site Design

CS21: Web Site Design Week 1 Slide 13 of 20

is processed by the browser to look like:

<p align="center">I want this new paragraph to be

is processed by the browser to look like:

CS21: Web Site Design Week 1 Slide 14 of 20

Breaking Lines and Paragraphs

CS21: Web Site Design Week 1 Slide 16 of 20

<p>This is an example of how</p>

CS21: Web Site Design Week 1 Slide 17 of 20

<h1> Header 1 -- Giant-sized and bold </h1>

H1 = Giant-sized and bold

CS21: Web Site Design Week 1 Slide 19 of 20

• Aligning text or graphics left/center/right:

Mark Branom markb@stanford.edu

Course Web Site: http://www.stanford.edu/group/csp/cs21/

CS21: Web Site Design Week 2 Slide 2 of 22

Review - Breaking Lines

• <hr /> = horizontal rule

H1 = Giant-sized and bold

CS21: Web Site Design Week 2 Slide 5 of 22

Review - Formatting text

• Bolding and Italicizing:

• Aligning text or graphics left/center/right:

• One of the really exciting things webmasters can do is link

More on linking documents

• Things to know about links:

CS21: Web Site Design Week 2 Slide 8 of 22

• Some web servers will no longer allow you to use FTP

CS21: Web Site Design Week 2 Slide 9 of 22

• Examples: White = #FFFFFF, Black = #000000,

BGCOLOR = modifies background color

CS21: Web Site Design Week 2 Slide 11 of 22

Cross-platform color issues

CS21: Web Site Design Week 2 Slide 12 of 22

Other Font Attributes

Combining Font Attributes:

CS21: Web Site Design Week 2 Slide 15 of 22

How do style sheets work?

CS21: Web Site Design Week 2 Slide 16 of 22

Defining Styles: inline

Text that appears in the basic.css style sheet document

</head> @import url("basic.css");