lecture4
advertisement
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
Using
Using
Using
a link
an embed tag
the bgsound tag
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" />
</body>
</html>
view page in browser
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" />
</a>
</body>
</html>
view page in browser
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 fontfamily 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
<html>
<!-- style01.html
-->
<head>
<title>Inline Style Sheets</title>
</head>
<body>
<p style="font-family:Arial,sans-serif;
text-align:right">This is a
right-justified paragraph in a sans serif
font (preferably Arial), with some
<span style="color:green">green text</span>.
</p>
<p>And <a style="color:red;
text-decoration:none;
font-size:larger;"
href="page01.html">here</a>
is a formatted link.
</p>
</body>
</html>
view page in browser
Using the style attribute, can
specify presentation style for a
single HTML element
within tag, list sequence of
property:value pairs
font-family:Courier,monospace
font-style:italic
font-weight:bold
font-size:12pt font-size:large font-size:larger
color:red color:#000080
background-color:white
text-decoration:underline
text-decoration:none
text-align:left text-align:center
text-align:right text-align:justify
vertical-align:top vertical-align:middle
vertical-align:bottom
text-indent:5em text-indent:0.2in
Inline style sheets (cont.)
<html>
<!-- style02.html -->
<head>
<title>Inline Style Sheets</title>
</head>
<body>
<p>Here is an image
<img src=“heckerb.gif" alt=“Barbara Hecker”
style="margin-left:0.3in;
margin-right:0.3in;
vertical-align:middle;
border-style:double;
border-color:yellow">
embedded in text.
</p>
<ol style="list-style-type:upper-alpha">
<li> one thing
<li> or another
<ul style="list-style-type:square;
whitespace:pre">
<li> with this
<li> or
that
</ul>
</ol>
</body>
</html>
more style properties & values
margin-left:0.1in margin-right:5%
margin:3em
padding-top:0.1in padding-bottom:5%
padding:3em
border-width:thin border-width:thick
border-width:5
border-color:red
border-style:dashed border-style:dotted
border-style:double border-style:none
whitespace:pre
list-style-type:square
list-style-type:decimal
list-style-type:lower-alpha
list-style-type:upper-roman
view page in browser
Inline style sheets (cont.)
<html>
<!-- style03.html
-->
<head>
<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>
view page in browser
</html>
style sheets can be applied to
tables for interesting effects
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
-->
<head>
<title>Document Style Sheets</title>
<style type="text/css">
h1 {color:blue;
text-align:center}
p.indented {text-indent:0.2in}
</style>
</head>
<body>
<h1>Centered Title</h1>
<p class="indented">This paragraph will
have the first line indented, but
subsequent lines will be flush.</p>
<p>This paragraph will not be indented.
</p>
document style sheets ensure that
similar elements are formatted
similarly
can even define subclasses of
elements and specify formatting
p.indented defines subclass of
paragraphs
• inherits all defaults of <p>
• adds new features
to specify this newly defined class, place
class="ID" attribute in tag
note how "clean" the BODY is
<h1>The End</h1>
</body>
</html>
view page in browser
Document style sheets (cont.)
<html>
<!-- style05.html -->
<head>
<title> Inline Style Sheets </title>
<style type="text/css">
table {font-family:Arial,sans-serif}
caption {color:red;
font-style:italic;
text-decoration:underline}
th {background-color:red}
</style>
</head>
<body>
<table>
<caption> Student data. </caption>
<tr><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 are
especially useful in
formatting tables
effectively separates
content from presentation
what if you wanted to rightjustify the column of
numbers?
what if you changed your
mind?
Pseudo-elements
<html>
<!-- style06.html
-->
<head>
<title>Title for Page</title>
<style type="text/css">
a {color : red;
text-decoration : none;
font-size : larger}
a:visited {color : black}
a:active {color : orange}
a:hover {color : blue}
p:first-letter {font-size : large;
color : white;
background-color : darkblue}
</style>
</head>
<body>
<p>Welcome to my Web page. I am so
happy you are here.
</p>
<p>Be sure to visit
<a href="http://www.cnn.com">CNN</a>
for late-breaking news.
</p>
</body>
</html>
pseudo-elements are used to
address sub-parts of elements
can specify appearance of link in
various states
:visited
:active
:hover
can specify format of first line in page
or paragraph
:first-line
can specify format of first letter in
page or paragraph
:first-letter
Danger : changing the look of
familiar elements is confusing
Careful : current browsers do not
support all CSS2 features
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>
<!-- style07.html
<!-- myStyle.css
-->
<head>
<title>Title for Page</title>
<link rel="stylesheet"
type="text/css"
href="myStyle.css"
title="myStyle">
</head>
<body>
<h1>Centered Title</h1>
<p class="indented">This paragraph will
have the first line indented, but
subsequent lines will be flush.</p>
<p>This paragraph will not be indented.
</p>
<h1>The End</h1>
</body>
</html>
-->
h1 {color : blue; text-align : center}
p.indented {text-indent:0.2in}
ideally, the developer(s) of a Web site
would place all formatting options in
an external style sheet
all Web pages link to that same style
sheet for a uniform look
simplifies Web pages since only need to
specify structure/content tags
view page in browser
How to show the creation date and URL information
<html>
<!-- style08.html -->
<head>
<title>JavaScript preview</title>
</head>
<body>
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TD align=left>
<SCRIPT language=JavaScript>
document.write("<font size=1><i>"+document.location+"</i></font>");
</SCRIPT>
<TD align=right>
<SCRIPT language=JavaScript>
document.write("<font size=1><i>"+document.lastModified+"</i></font>");
</SCRIPT>
</TR></TBODY>
</TABLE>
</body>
</html>
For your assignment,
you need to show the
date and URL of the
website
The page's location and
last modification date
should be automatically
displayed at the bottom.
View the source for this
Web page and cut-andpaste the appropriate text
into your page in order to
accomplish this.
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
