Web Development URLS and Web basics, Misc. Topics More WWW, HTTP Background information

Web Development

URLS and Web basics, Misc. TopicsMore WWW, HTTP Background information

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”


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


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



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


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


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


What the Web server returns to the user is called the response

One part of the response is the requested Web page


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


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

Web Development

Adding Sound to your website

Working with audio on the web

Audio can be compellingIt can add greatly to the mood of a

siteIt can “complete” the experience

Problems with audio

Audio files can be extremely largeCopyright issues can be troublesomeAudio can be distractingCross-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 linkUsing an embed tagUsing the bgsound tagUsing CSS elements

Linking to a sound

<a href = “soundFile.wav”>

External reference to soundFile plays when user clicks on itFile opens in another (unspecified) playerBrowser determines program file will be played

in

Using the bgsound tag

<bgsound src = “soundFile.wav” >

Automatically loads and plays the soundMicrosoft extension to HTMLNo way to turn off sound (without

programming)

Using an embed tag

<embed src = “soundFile.wav” height = “100” width = “100”>

Places a player plugin inlineNo predicting what player isBehavior is also unpredictable

Sound Example

<html>

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

<body><span style = "play-during: url(moo.wav) mix"><a href = "moo.wav">cow</a><bgsound src = "moo.wav"><embed src = "moo.wav" height = "50" width = "100" /><br />

<embed src = "Brass_Suede_Shoes.mid" height = "50" width = "100" /></body></html>

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


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


<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>

See the coordinates

<html><body>

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

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

</body></html>

Example: Uses the mouse to control the environment<html>

<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>

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


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


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


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 presentationstyle 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 document3.external style sheets can be linked and applied to numerous

documentslower-level style sheets can override higher-level style sheets

Inline style sheets Using the style attribute, can specify presentation style for a single HTML element within tag, list sequence of

property:value pairs

font-family:Courier,monospacefont-style:italicfont-weight:boldfont-size:12pt font-size:large font-

size:larger

color:red color:#000080background-color:white

text-decoration:underline text-decoration:nonetext-align:left text-align:center text-align:right text-align:justifyvertical-align:top vertical-align:middle vertical-align:bottom

text-indent:5em text-indent:0.2in

<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>

Inline style sheets (cont.)

more style properties & values

margin-left:0.1in margin-right:5%margin:3empadding-top:0.1in padding-bottom:5%padding:3em

border-width:thin border-width:thick border-width:5border-color:redborder-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


<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>

Inline style sheets (cont.)style sheets can be applied to tables for interesting effects


<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></html>

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

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


<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>

<h1>The End</h1>

</body></html>

Document style sheets (cont.)

document style sheets are especially useful in formatting tables

effectively separates content from presentation


<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>

what if you wanted to right-justify the column of numbers?

what if you changed your mind?

Pseudo-elementspseudo-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


<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>

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

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


<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}

How to show the creation date and URL information

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-and-paste the appropriate text into your page in order to accomplish this.


<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>

End of Lecture

Documents

Web Development URLS and Web basics, Misc. Topics More WWW, HTTP Background information