Web Pages and Web Sites

Web Technology
Basic Web Page Authoring
Web Page Extensions, Scripts,
and Programs
E-Commerce

Chapter 6: Web Pages, Web Sites, and E-

1
Commerce
 What’s the difference between the Web and the
Internet?

The Internet

A communications network

Carries data that forms Web pages
 Text, graphics, and audio

The Web (World Wide Web)

An interlinked collection of information
(document, image, video, and sound files)that
flows over the Internet

Chapter 6: Web Pages, Web Sites, and E-

Page 284 2
Commerce
 What is hypertext?


Hypertext

Text linked together in non-linear form

Hypertext link

Clickable text that lets you access related documents

Hypertext transfer protocol (HTTP)

Set of rules for transferring Web documents

A stateless protocol
 One request and response per session

Chapter 6: Web Pages, Web Sites, and E-

Page 284 3
Commerce
How does the Web work?

Chapter 6: Web Pages, Web Sites, and E-

Page 285 4
Commerce
 What is HTML?

HTML (Hypertext Markup Language)

A set of specifications for creating documents

Tags specify how the document should appear

World Wide Web Consortium (W3C) reviews and
revises HTML standard


XHTML is the follow-up version to HTML

Extensible HTML

Can add your own tags

Chapter 6: Web Pages, Web Sites, and E-

Page 286 5
Commerce
What is HTML?

Chapter 6: Web Pages, Web Sites, and E-

Page 286 6
Commerce
 Why do I need a web browser?

Browser uses HTTP to send messages to a Web
Server


Browser interprets HTML tags from the Web
server to display the requested Web page


Popular browsers
- Internet Explorer - Mozilla Firefox
- Netscape - Opera
- In china 360browser

Chapter 6: Web Pages, Web Sites, and E-

Page 289 7
Commerce
How does HTTP work?

Chapter 6: Web Pages, Web Sites, and E-

9
Commerce
 How does a Web server understand HTTP
requests?

Web server is configured to include HTTP
software

Always running when server is “up” and ready
to fulfill requests

One port is dedicated to “listening” for HTTP
requests

Chapter 6: Web Pages, Web Sites, and E-

Page 293 10
Commerce
 What is the difference between a Web server,
Web site, and Web page?

A server can house multiple sites

http://barney.highline.edu

A site houses a collection of related
documents

http://barney.highline.edu/tostrand

A page is a specific document, or file

http://barney.highline.edu/tostrand/stuff.htm

Chapter 6: Web Pages, Web Sites, and E-

Page 294 11
Commerce
 What is URL?

URL(Uniform Resource Locator)

http:// www.qmu.edu.cn: 80/ index.asp

Resource Server Pot path/file name

type(protocol) address number

Chapter 6: Web Pages, Web Sites, and E-

12
Commerce
 What is a “cookie”?

A small text file created by a Web server and
stored on your computer

Web sites use cookies to:

Track your path through a site

Provide information that allows the Web site to present
you with ad banners

Retain any personal information that you type into a
Web page form

13
 Are cookies safe?

Cookies are a relatively safe technology

Data, not a computer program

Can only be accessed by the site that created it

Contain only information you disclose while
using the site

Uses a randomly generated number instead of
your name

Chapter 6: Web Pages, Web Sites, and E-

Page 295 14
Commerce
Can cookies be blocked or removed?

• Blocking cookies
• Deleting cookies
– IE stores each in a
separate file
• Internet Options 
General  Delete
Cookies…

Chapter 6: Web Pages, Web Sites, and E-

Page 296 15
Commerce
 What tools can I use to create Web pages?


Text editor – most difficult as you have to
create everything from scratch

Chapter 6: Web Pages, Web Sites, and E-

Page 299 16
Commerce
 What is an HTML conversion tool?

Conversion option available in many
software applications

Microsoft Word
 File menu’s Save As Web Page

Online Web authoring tools

Provided by some ISPs

Type, select, drag, and drop elements onto Web
page

Chapter 6: Web Pages, Web Sites, and E-

Page 300 17
Commerce
 What is Web authoring software?

Web authoring software –
provides tools for creating web pages

Microsoft FrontPage

Macromedia Dreamweaver

Chapter 6: Web Pages, Web Sites, and E-

Page 300 18
Commerce
 How do I format the text on a Web page?


Use Web page authoring software

Use HTML tags:

More HTML Tags

Chapter 6: Web Pages, Web Sites, and E-

Page 302 19
Commerce
What is a Cascading Style Sheet (CSS)?

A template that controls the layout and design
of Web pages

Internal
 placed near the beginning of html document
 <style> tag within <head> section
 examples

External
 contains formatting specifications for a group of
Web pages
 a separate (css) file contains the styles

Chapter 6: Web Pages, Web Sites, and E-

Page 302 20
Commerce
/* Example style sheet file, saved as mystyles.css*/
BODY {background: #FFFFD8; margin-top: 20}
A:link {color: #400080; background: #FFFFD8}
H1 {font-weight: bold; text-align: center;
color: #006000; background: #FFFFD8;
font-family: 'Gill Sans', Arial, sans-serif}
CITE {font-family: 'Gill Sans', Arial, sans-serif;
font-style: italic}

<HEAD>
<TITLE>Style sheet example</TITLE>
<LINK REL="stylesheet" HREF="mystyles.css"
TYPE="text/css">
</HEAD>
CSS Tutorial
Chapter 6: Web Pages, Web Sites, and E-
21
Commerce
 How do links work?

A link appears as underlined, blue text

color depends upon settings

Can also be a button or a graphic

The HTML has two parts

Destination, Label

Chapter 6: Web Pages, Web Sites, and E-

Page 304 22
Commerce
 What kinds of links can I add to a page?

Internal link

links to other pages on same site

External link

links to pages outside of the site

Intrapage link (bookmark)

jumps to a location within same page

Mailto link

opens pre-addressed e-mail form that can be filled
in and sent
Chapter 6: Web Pages, Web Sites, and E-
Page 305 23
Commerce
 Testing and Posting Web Pages

Test each page locally

Transfer pages to a Web server

Test all pages and links

Update your site to keep it current

Chapter 6: Web Pages, Web Sites, and E-

Page 308 26
Commerce
 What is DHTML?
• Combines HTML with a few other technologies
• DHTML effects usually activate as a result of a
“mouseover”
– Example

Chapter 6: Web Pages, Web Sites, and E-

Page 310 27
Commerce
 What are XML and XSL?

XML (eXtensible Markup Language)

Method for putting structured data into a text file

Uses tags and attributes

Defines types of data
 <part number>, <price>, <weight>

Tutorial


XSL (eXtensible Stylesheet Language)

Creates customized tags that control the display of the
data that’s contained in an XML document

Chapter 6: Web Pages, Web Sites, and E-

Page 311 28
Commerce
 What are scripting languages?


Allow designers to embed simple program
instructions (scripts) in Web pages

Allow Web pages to become more interactive

e-commerce sites verify credit card information

interactive pages, like loan payment calculators

Examples

JavaScript

VBScript

Python

Chapter 6: Web Pages, Web Sites, and E-

Page 312 29
Commerce
 How do scripts work?

Client-side scripts

consist of scripting statements embedded in an
HTML document

Execute in browser on client

Server-side scripts

consist of statements executed on server

Typically accept data submitted by a form

Chapter 6: Web Pages, Web Sites, and E-

Page 312 30
Commerce
This example checks to see if a TextField
contains only numeric characters:
<script> function validate(obj)
{
value = obj.value;
for (n = 0; n < value.length; n++)
if ( !isDigit(value.charAt(n)))
{
alert("Field must be numeric");
return;
}
} </script>
<input type="text" onChange="validate(this)">

Chapter 6: Web Pages, Web Sites, and E-

31
Commerce
 What’s a Java applet?

Java

a high-level programming language developed
by Sun Microsystems

Applets

Small Java programs that execute in a browser

Used for input forms, rotating images,
interactive animation

Chapter 6: Web Pages, Web Sites, and E-

Page 313 32
Commerce
How do applets work?

Chapter 6: Web Pages, Web Sites, and E-

33
Commerce
 What is an ActiveX control?

Compiled computer program

Can be referenced from within an HTML
document

Can be used on client-side or server-side

Chapter 6: Web Pages, Web Sites, and E-

Page 315 34
Commerce
What is a digital certificate?

Digital certificate

electronic attachment
to a file that verifies the
identity of its source

Certificate authority

company that supplies
digital certificates

Chapter 6: Web Pages, Web Sites, and E-

Page 316 35
Commerce
 What is e-commerce?

Financial transactions that are conducted electronically over a
computer network

Includes physical products, digital products, and services
 Digital products

news, music, video, databases, software
 Services

arranging trips, online medical consultation, remote
education

Carried out by computer or require human agents

B2C (business-to-consumer)

e-commerce activities that the typical Web surfer enjoys

C2C (consumer-to-consumer)

includes online auctions and rummage sales

B2B (business-to-business)

One business buying goods and services from another
Chapter 6: Web Pages, Web Sites, and E-
36
Commerce
 What’s an online shopping cart?

Cyberspace “cart” that you fill up with
merchandise

Uses cookies to store information about
your activities on Web site

Chapter 6: Web Pages, Web Sites, and E-

Page 322 37
Commerce
 How does e-commerce affect my privacy?


Spyware

often used to gather information secretly and
relay it to advertisers or other interested
parties

Ad-serving cookies

track your activities at any site containing
banner ads from the third party (who supplied
the cookie)

Chapter 6: Web Pages, Web Sites, and E-

Page 323 38
Commerce
 Discuss

Have you ever received an e-mail that contained false
information?


Have you ever visited a Web site that provided inaccurate
information?


How do you determine whether information on the
Internet is true or false?


What Web sites are you most/least likely to trust?

Chapter 6: Web Pages, Web Sites, and E-

39
Commerce