CS 3520: Web Development

URLS and Web basics, Misc. Topics

More WWW, HTTP Background information
Uniform Resource Locators

Hypertext Transfer Protocol (HTTP)

▪ manages the hypertext links that are used to

navigate the Web

▪ ensures that Web browsers correctly process and

display the various types of information contained
in Web pages (text, graphics, audio, and so on)
Uniform Resource Locators

The protocol portion of a URL is followed by a colon,

two forward slashes, and a host

A host refers to a computer system that is being

accessed by a remote computer

The host portion of a URL is usually www for “World

Wide Web”
Uniform Resource Locators

Domain name

▪ a unique address used for identifying a computer,

often a Web server, on the Internet

▪ consists of two parts separated by a period

▪ The first part of a domain name is usually text that

easily identifies a person or an organization, such as
bhecker or Course
Uniform Resource Locators

▪ The last part of a domain name, known as the

domain identifier, identifies the type of institution or
organization

▪ Common domain identifiers include .biz, .com, .edu,

.info, .net, .org, .gov, .mil, or .int
Uniform Resource Locators
Absolute and Relative Links

An absolute URL refers to the full Web address of a Web

page or to a specific drive and directory

A relative URL specifies the location of a file relative to

the location of the currently loaded Web page
Hiding Web Pages from Search Engines

Your Web site may includes pages that you do

not want to be included in any search engine
indexes
Hiding Web Pages from Search Engines

For instance, you may have a page that stores

personal information or private data that, although not
private enough to encrypt using special security
software or a protocol such as HTTPS, should not be
returned to a user who performs a search in a search
engine
Hiding Web Pages from Search Engines

You can inform search engine spiders that you do

not want certain pages on your site to be indexed
by placing a file named robots.tx in the root
directory of the Web server that hosts your Web
site

This technique is called the Robots Exclusion

Protocol
The http-equiv Attribute

When a user wants to access a Web page,

either by entering its URL in a browser’s
Address box or by clicking a link, the user’s
Web browser asks the Web server for the
Web page in what is referred to as a request
The http-equiv Attribute

What the Web server returns to the user is called

the response

One part of the response is the requested Web

page
The http-equiv Attribute

The response header is sent to the Web

browser before the Web page is sent in
order to provide information that the
browser needs to render the page
The http-equiv Attribute

One of the most important pieces of

information in the response header is the
type of data, or content-type, that the
server is sending
 CS 3520: Web Development

Adding Sound to your website

Working with audio on the web

Audio can be compelling

It can add greatly to the mood of a site
It can “complete” the experience
Problems with audio

Audio files can be extremely large

Copyright issues can be troublesome
Audio can be distracting
Cross-platform audio is tricky
Types of Audio Files

Wav (very large)

Mp3 (smaller, good compression)

Realmedia rm (good compression, proprietary

format)

Midi (excellent file size, variable quality)

Incorporating audio into a page

Using a link
Using an embed tag
Using the bgsound tag
Using CSS elements
Linking to a sound

<a href = “soundFile.wav”>

External reference to sound

File plays when user clicks on it
File opens in another (unspecified) player
Browser determines program file will be played in
Using the bgsound tag

<bgsound src = “soundFile.wav” >

Automatically loads and plays the sound

Microsoft extension to HTML
No way to turn off sound (without programming)
Using an embed tag

<embed src = “soundFile.wav”

height = “100”
width = “100”>

Places a player plugin inline

No predicting what player is
Behavior is also unpredictable
Sound Example
<html>
<!-- sound.html -->

<head>
<title>Incorporating sound effects</title>
</head>

<body>
<span style = "play-during: url(moo.wav) mix">
<a href = "moo.wav">cow</a>
<!--
bgsound tag works only in MSIE
-->
<bgsound src = "moo.wav">
<!--
embed tag has its own problems
-->
<embed src = "moo.wav"
height = "50"
width = "100" />
<br />

<embed src = "Brass_Suede_Shoes.mid"

height = "50"
width = "100" /> view page in browser
</body>
</html>
CS 3520: Web Development

Creating Image Maps

Image Maps

Image maps allow users to navigate to different Web pages by

clicking an image

An image map consists of an image that is divided into regions

Each region is then associated with a URL; these regions are

called hot zones
Image Maps

You can open the URL associated with each

region by clicking the hot zone with your mouse

One of the most common uses of image maps is

to create graphical menus that you can use for
navigation
Web Page with Image Maps
Image Map Required Elements

An <img> element that contains an src attribute

specifying the name of the image file and a usemap
attribute specifying the value assigned to the id and
name attributes of the <map> element
Image Map Required Elements

A <map> element that specifies mapping

coordinates and includes id and name
attributes that have the same value as used in
the <img> element usemap attribute
Image Map Required Elements

<area> elements nested within the <map>

element that identify the coordinates within the
image that will be recognized as hot zones
Image Maps

You precede the value you assign to the usemap

attribute (which is the value assigned to the id and
name attributes of the <map> element) in the
<img> element by a number sign (#)
Image Maps
The <map> element defines the coordinates
used to create an image map’s hot zones

The <area> element defines a region within an

image map and is nested within a <map>
element
Image Map Example
<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>

<img src="planets.gif"
width="145" height="126"
usemap="#planetmap">

<map id="planetmap" name="planetmap">

<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">

<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm">

<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">
</map>
</body>
</html> view page in browser
See the coordinates

<html>
<body>

<p>
Move the mouse over the image, and look at the status bar to see how the
coordinates change.
</p>

<p>
<a href=“image2.html">
<img src="planets.gif"
ismap width="146" height="126">
</a>
</p>

</body>
</html>
view page in browser
Example: Uses the mouse to control the environment
<html>
<!-- mouseOver.htm -->

<html>
<head>
<title>Basic mouse over effects</title>
</head>
<body>
<h1>Basic mouse over effects</h1>
<a name = "dummy" />

<a href = "#dummy"

onClick = "alert('Hey!')"

onMouseOver = "document.theButton.src =
'clickMeDn.png'"

onMouseOut = "document.theButton.src =
'clickMeUp.png'"

>
<img src = "clickMeUp.png"
name = "theButton"
height = "80"
width = "300"
border = "0" /> view page in browser
</a>
</body>
</html>
 CS 3520: Web Development

Cascading style sheets

▪ separating content & presentation
▪ inline vs. document vs.external
▪ sub-classes of elements
▪ pseudo-elements

on to programming…
Introduction to Styles and Properties

To ensure that future Web page authoring separates

the definition of the elements in a document from how
they appear, many of the display and formatting
extensions that were added to the HTML language,
such as the <font> element, were deprecated in
HTML 4.0 and in XHTML 1.0 in favor of CSS
Introduction to Styles and Properties

Cascading Style Sheets (CSS) are a standard

set by the World Wide Web Consortium
(W3C) for managing the design and
formatting of Web pages in a Web browser
Introduction to Styles and Properties

A single piece of CSS formatting information, such as text

alignment or font size, is referred to as a style

Some of the style capabilities of CSS include the ability to

change fonts, backgrounds, and colors, and to modify
the layout of elements as they appear in a Web
browser
Introduction to Styles and Properties

CSS information can be added directly to documents or

stored in separate documents and shared among
multiple Web pages

The term “cascading” refers to the Web pages’ ability to

use CSS information from more than one source
CSS Properties

CSS styles are created with two parts separated by a colon: the
property, which refers to a specific CSS style, and the value
assigned to it, which determines the style’s visual
characteristics

Together, a CSS property and the value assigned to it are referred

to as a declaration or style declaration
CSS Properties
Common CSS Properties
CSS Properties

The properties available in CSS1 are grouped into the

following categories:

▪ Color and background properties

▪ Font properties
▪ Text properties
▪ Box properties
▪ Classification properties
CSS Properties
CSS recommendation, Level 2 (CSS2) was released in
1998

CSS2 builds on the properties in CSS1 and includes new

features such as table properties and the ability to
change the appearance of the mouse pointer
CSS Properties

At the time of this writing, no Web browser

provides complete support for the properties
available in CSS2
Inline Styles

The most basic method of applying styles is to

use inline styles, which allow you to add
style information to a single element in a
document
Inline Styles
You use the style attribute to assign inline style
information to an element

You assign to the style attribute a property

declaration enclosed in quotation marks
CSS Values

The values you can assign to a CSS property

depend on what type of property it is

Some properties can be assigned a range of

values
CSS Values

For instance, you can assign any font name that is

available on a user’s system to the font-
family property

For other properties, you must assign a value from

a specific set of values
Length Units
Length units refer to the units of measure that
you can use in a style declaration to determine
the size or positioning of an element

Whether a length unit is used for sizing or

positioning depends on the property and the
element to which it is assigned
Length Units

You assign a measurement value to a property by

assigning the number that represents the
measurement, immediately followed by the unit
of measure
Color Units

A color unit represents a color value that you can

assign to a property

You can assign a color unit to a property using any

one of 16 color names defined in the CSS1
specification
Color Units
Color Units

Most graphical computer systems use the RGB

color system for specifying colors

You can also assign a color using the RGB color

system
Content vs. presentation
most HTML tags define content type, independent of presentation
style sheets associate presentation formats with HTML elements

▪ Remember, HTML style sheets are known as Cascading Style

Sheets, since can be defined at three different levels

1.inline style sheets apply to the content of a single HTML

element
2.document style sheets apply to the whole BODY of a document
3.external style sheets can be linked and applied to numerous
documents
lower-level style sheets can override higher-level style sheets
Inline style sheets Using the style attribute, can
specify presentation style for a
<html>
<!-- style01.html -->
single HTML element
<head> ▪ within tag, list sequence of
<title>Inline Style Sheets</title> property:value pairs
</head>
font-family:Courier,monospace
<body>
font-style:italic
<p style="font-family:Arial,sans-serif;
text-align:right">This is a font-weight:bold
right-justified paragraph in a sans serif font-size:12pt font-size:large font-size:larger
font (preferably Arial), with some
<span style="color:green">green text</span>. color:red color:#000080
</p> background-color:white
<p>And <a style="color:red;
text-decoration:underline
text-decoration:none;
font-size:larger;" text-decoration:none
href="page01.html">here</a> text-align:left text-align:center
is a formatted link. text-align:right text-align:justify
</p> vertical-align:top vertical-align:middle
</body> vertical-align:bottom
</html>

view page in browser text-indent:5em text-indent:0.2in

Inline style sheets (cont.)
<html>
<!-- style02.html --> more style properties & values
<head>
<title>Inline Style Sheets</title> margin-left:0.1in margin-right:5%
</head>
margin:3em
<body> padding-top:0.1in padding-bottom:5%
<p>Here is an image padding:3em
<img src=“heckerb.gif" alt=“Barbara Hecker”
style="margin-left:0.3in;
border-width:thin border-width:thick
margin-right:0.3in;
vertical-align:middle;
border-width:5
border-style:double; border-color:red
border-color:yellow"> border-style:dashed border-style:dotted
embedded in text. border-style:double border-style:none
</p>
whitespace:pre
<ol style="list-style-type:upper-alpha">
<li> one thing
<li> or another
list-style-type:square
<ul style="list-style-type:square; list-style-type:decimal
whitespace:pre"> list-style-type:lower-alpha
<li> with this list-style-type:upper-roman
<li> or that
</ul>
</ol>
</body>
</html> view page in browser
Inline style sheets (cont.)
<html>
<!-- style03.html --> style sheets can be applied to
<head> tables for interesting effects
<title> Inline Style Sheets </title>
</head>

<body>
<table style="font-family:Arial,sans-serif">
<caption style="color:red;
font-style:italic;
text-decoration:underline">
Student data. </caption>
<tr style="background-color:red">
<th> name </th> <th> age </th>
</tr>
<tr>
<td> Chris Smith </td> <td> 19 </td>
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr>
<td> Doogie Howser </td> <td> 9 </td>
</tr>
</table>
</body>
</html> view page in browser
Document style sheets
inline style sheets apply to individual elements in the page
▪ can lead to inconsistencies as similar elements are formatted differently
e.g., might like for all H1 elements to be centered

▪ inline definitions mix content & presentation

➔ violates the general philosophy of HTML

alternatively, document style sheets allow for a clean separation of content

and presentation
▪ style definitions are placed in the HEAD of the page (within STYLE tags)

▪ can apply to all elements, or a subclass of elements, throughout the page

Document style sheets
<html>
<!-- style04.html --> document style sheets ensure that
<head> similar elements are formatted
<title>Document Style Sheets</title>
<style type="text/css">
similarly
h1 {color:blue; ▪ can even define subclasses of
text-align:center} elements and specify formatting
p.indented {text-indent:0.2in}
</style> p.indented defines subclass of
</head>
paragraphs
• inherits all defaults of <p>
<body> • adds new features
<h1>Centered Title</h1>
to specify this newly defined class, place
<p class="indented">This paragraph will
have the first line indented, but
class="ID" attribute in tag
subsequent lines will be flush.</p>

<p>This paragraph will not be indented.

</p>
note how "clean" the BODY is
<h1>The End</h1>

</body>
</html> view page in browser
Document style sheets (cont.)
<html>
<!-- style05.html -->
document style sheets are
<head>
<title> Inline Style Sheets </title> especially useful in
<style type="text/css">
table {font-family:Arial,sans-serif}
formatting tables
caption {color:red;
font-style:italic;
text-decoration:underline}
th {background-color:red}
effectively separates
</style> content from presentation
</head>

<body>
<table>
<caption> Student data. </caption>
what if you wanted to right-
<tr><th> name </th> <th> age</th></tr> justify the column of
<tr><td> Chris Smith </td> <td> 19 </td></tr>
<tr><td> Pat Jones </td> <td> 20 </td></tr> numbers?
<tr><td> Doogie Howser </td> <td> 9 </td></tr>
</table>
</body> what if you changed your
</html>
mind?
view page in browser
Pseudo-elements
<html>
<!-- style06.html --> pseudo-elements are used to
<head>
address sub-parts of elements
<title>Title for Page</title>
<style type="text/css"> ▪ can specify appearance of link in
a {color : red; various states
:visited :active :hover
text-decoration : none;
font-size : larger} ▪ can specify format of first line in page
a:visited {color : black} or paragraph
a:active {color : orange} :first-line
a:hover {color : blue}
p:first-letter {font-size : large; ▪ can specify format of first letter in
color : white; page or paragraph
background-color : darkblue} :first-letter
</style>
</head>

<body> Danger : changing the look of

<p>Welcome to my Web page. I am so
happy you are here. familiar elements is confusing
</p>
<p>Be sure to visit
<a href="http://www.cnn.com">CNN</a> Careful : current browsers do not
for late-breaking news. support all CSS2 features
</p>
</body>
</html> view page in browser
External style sheets
modularity is key to the development and reuse of software
▪ design/implement/test useful routines and classes
▪ package and make available for reuse

▪ saves in development cost & time

▪ central libraries make it possible to make a single change and propogate

external style sheets place the style definitions in separate files

▪ multiple pages can link to the same style sheet, consistent look across a site
▪ possible to make a single change and propagate automatically

▪ represents the ultimate in content/representation separation

Modularity & style sheets
<html> <!-- myStyle.css -->
<!-- style07.html -->
h1 {color : blue; text-align : center}
p.indented {text-indent:0.2in}
<head>
<title>Title for Page</title>
<link rel="stylesheet"
type="text/css"
href="myStyle.css"
title="myStyle">
ideally, the developer(s) of a Web site
</head> would place all formatting options in
<body> an external style sheet
<h1>Centered Title</h1>

<p class="indented">This paragraph will

have the first line indented, but
all Web pages link to that same style
subsequent lines will be flush.</p> sheet for a uniform look
<p>This paragraph will not be indented.
</p> ▪ simplifies Web pages since only need to
specify structure/content tags
<h1>The End</h1>

</body>
</html>
view page in browser
How to show the creation date and URL information
<html>
<!-- style08.html -->
<head>
For your assignment,
<title>JavaScript preview</title>
</head>
you need to show the
<body> date and URL of the
<TABLE width="100%" border=0>
<TBODY>
website
<TR>
<TD align=left>
<SCRIPT language=JavaScript> The page's location and
document.write("<font size=- last modification date
1><i>"+document.location+"</i></font>");
</SCRIPT> should be automatically
displayed at the bottom.
<TD align=right>
<SCRIPT language=JavaScript>
View the source for this
document.write("<font size=- Web page and cut-and-
1><i>"+document.lastModified+"</i></font>"); paste the appropriate text
</SCRIPT>
</TR></TBODY>
into your page in order to
</TABLE> accomplish this.
</body>
</html>

view page in browser

On to programming…
Your first Web programming assignment is due Thurs. 7/7

Use notepad or another plain text editor of your choice.

http://www.mcs.csuhayward.edu/~bhecker/CS-3520/Assignments/Assign1.doc