Internet, Web, and HTML Compiled by Dr. Billy B. L. Lim Why a course in Web Development Technologies?  Rationale   Students need it for their projects,

Transcript Internet, Web, and HTML Compiled by Dr. Billy B. L. Lim Why a course in Web Development Technologies?  Rationale   Students need it for their projects,

Internet, Web, and HTML
Compiled by
Dr. Billy B. L. Lim
Why a course in Web
Development Technologies?

Rationale


Students need it for their projects, want it
for their resumes, etc.
“What do Electricity, Telephone, Radio,
Television, and the Web have in
common?”
The Web vs. The Others
Source: Wired Magazine, April, 1996
A Brief History of the Internet


Computer Hardware
Browsers
Mail
Clients
“News”
Clients
Games
And so on
File transfer protocol FTP
Simple Mail transfer protocol SMTP
Hypertext transfer protocol HTTP
Hypertext Markup Language HTML
TCP/IP etc..etc..
Cables & Data/Phone Lines,
Directories etc

Started in 1960 by the Department of Defense (DoD)
DoD funded Advanced Research Projects Administration
Network (ARPANet).
Made available for nonmilitary uses in 1984
Provides a platform for many “services”
Modems etc
Internet Service Provider

Computer Hardware
Web
Servers
Directory
Manager
And so on
The Internet Is a Network of
Networks
History of the World Wide Web


The World Wide Web is an application
suite that enables information sharing
across a wide range of technologies
Developed in 1989:


Supports information-sharing across teams
with diverse technologies
Documents produced in HTML:

Documents designed for human
consumption
History of the Web (cont’d)


Nov 1992: NCSA releases Mosaic
1994: Netscape


1995 Netscape capitalization over $1B!
Growth



Jan 1993 - 130 Web Sites
Jun 1993 - 10,000 Web Sites
Today? (5,000 new sites per week?)
Why the Web?

Ease of publishing on the Web is a
landmark event

As important as...



the introduction of the IBM PC in 1981
Printing Press: High volume, low cost
printed-word for all!
Personal Computer: High volume, low
cost computing for all!
Impact of Web Publishing

Anytime, Anywhere Access


All the world’s information stored on the
Internet
Your company’s internal information


New web sites build upon existing sites


Intranet and extranet publishing
Leverage what’s already there via
hyperlinks!
ANYONE can publish ANYTHING!
Other Impacts ???


Ethical vs. Social vs. Global impacts
Need your participation here!!!
Index to the rest of this
presentation










Client/Server Architecture
HTTP
Browsers and Web Servers
HTTP Client/Server Architecture
Structure of a Web Site
Web Applications
HTML/XML/XHTML
CSS
Web 1.0, 1.5, 2.0
RIA
Client-Server Architecture

Deployment diagram of a generic, clientserver Internet architecture:
Hypertext Transfer Protocol

The Hypertext Transfer Protocol (HTTP)
supports serving up documents in the
Hypertext Markup Language (HTML):




HTML documents include links to other Web
documents.
Web documents may also include forms to pass
data from the user to the Web server.
HTTP can serve any type of document.
The MIME specification defines a canonical
naming convention for documents of various
media.
Web Browsers and Web Servers

Two key types of programs:



Web browsers
Web servers
Development of browsers and servers:
HTTP Client-Server Architecture

Deployment diagram of a Web server:

Uses HTTP and URL (Uniform Resource
Locator) to locate, download, interpret, and
display “pages”
The Structure of a Web Site

A Web site is a hierarchy of HTML documents, media
files, and the directories that form the structure:

Example of an HTTP URL:

http://www.soccer.org/league/Spring2001.html
Web Applications



A Web site is a collection of static HTML pages.
A Web application is a Web site with dynamic
functionality on the server (or sometimes on the
client using applets or other interactive elements).
Web applications use HTML forms as the user
interface to code that is running on the server:


Data is passed from the HTML form to the server using
the Common Gateway Interface (CGI).
The CGI data is sent in the HTTP request stream.
The Structure of HTML

HTML documents have a formal structure:
<!doctype html public “-//w3//dtd html 4.0//en”>
<html>
<head>
<title>Document Title</title>
</head>
<body>
Marked up text goes in here
</body>
</html>

You can validate documents

<!doctype> identifies the version or “dialect” of
HTML to which the document conforms
HTML Markup
Tag Attribute
name name
Attribute
value
<h2 align="center">Heading Level 2 - Centered</h2>
Attribute
Start tag
Content
HTML Element
End
tag
Misc Tags - 1
<HTML>
<HEAD>
<TITLE> HTML Basics</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF"
LINK="#F0FC0F" VLINK=“#FF0000”>
<CENTER><IMG SRC = "duke_swinging.gif" ></CENTER>
<H2 align= "center"> Welcome!</H2>
<P><B>I cause a blank line after me and my letters are
bold.</B></P>
Now I will break in the line without a blank line after me<BR>
<I> I look like forward movement. Italics </I>
Misc Tags - 2
<OL>
<LI>Numbered or
<LI>Ordered
<LI>List
</OL>
<UL><LI> Unnumbered List:
<UL><LI>Vermont
<LI>New
Hampshire</UL>
<LI> Nested Bullets:
<UL><LI>Michigan
<LI>Indiana</UL>
</UL>
<PRE>My text stays as it is typed.
I don’t interpret program
code.
#!/bin/csh
cd $SCR
I can't display HTML
code</PRE>
<XMP> I display HTML code on a
HomePage<HTML><HEAD>
<TITLE> </XMP>
<a href="http://cnn.com">Click
here for news ...</a>
HTML: Presenting Data

Letting the designer decide how information
should be displayed:


HTML can make pages look a particular way
E.g.,
<TABLE BORDER=1>
<TR><TH>Product ID</TH><TH>Description</TH><TH>Price</TH></TR>
<TR><TD>12345</TD><TD>Office 2000</TD><TD>$599.99</TD></TR>
</TABLE>
Product ID Description
Price
12345
$599.99
Office 2000
XML: Structuring Data


Letting the designer decide how data should be
structured
E.g.,
<Product>
<Product_ID>12345</Product_ID>
<Description>Office 2000</Description>
<Price>599.99</Price>
</ Product>
Can get the presentation (e.g., table below in HTML) via XSLT
Product ID Description
Price
12345
$599.99
Office 2000
XHTML

Wikipedia:

“The Extensible HyperText Markup Language, or
XHTML, is a markup language that has the same
expressive possibilities as HTML, but a stricter syntax.
Whereas HTML is an application of SGML, a very flexible
markup language, XHTML is an application of XML, a
more restrictive subset of SGML. Because they need to be
well-formed (syntactically correct), XHTML documents
allow for automated processing to be performed using a
standard XML library—unlike HTML, which requires a
relatively complex, lenient, and generally custom parser
(though an SGML parser library could possibly be used).
XHTML can be thought of as the intersection of HTML and
XML in many respects, since it is a reformulation of HTML
in XML. XHTML 1.0 became a World Wide Web
Consortium (W3C) Recommendation on January 26,
2000.”
HTML 5

HTML5 Showcase (Apple's Safari
browser only)
CSS

Wikipedia:

“In computing, Cascading Style Sheets (CSS) is
a stylesheet language used to describe the
presentation of a document written in a markup
language. Its most common application is to
style web pages written in HTML and XHTML,
but the language can be applied to any kind of
XML document, including SVG and XUL. The
CSS specifications are maintained by the World
Wide Web Consortium (W3C).
CSS (2)

Wikipedia:

CSS information can be provided by various sources:

Author styles (style information provided by the web page
author), in the form of




User style


external stylesheets, i.e. a separate CSS-file referenced from
the document
embedded style, blocks of CSS information inside the HTML
document itself
inline styles, inside the HTML document, style information on a
single element, specified using the "style" attribute.
…
a local CSS-file specified by the user using options in the web
browser, and acting as an override, to be applied to all
documents.
CSS: Syntax

Wikipedia:


A style sheet consists of a list of rules. Each rule
consists of one or more comma-separated
selectors and a declaration block. A
declaration-block consists of a list of semicolonseparated declarations in curly braces. Each
declaration itself consists of a property, a colon
(:) then a value.
Example:


p { text-align: center; color: black; font-family: arial }
h2 { font-size: 110%; color: red; background: white; }
How to Insert a Style Sheet

External Style Sheet


Internal Style Sheet


<head> <link rel="stylesheet" type="text/css"
href="mystyle.css" /> </head>
<head> <style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style> </head>
Inline Styles

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
RIA

Wikipedia:


Rich Internet applications (RIA) are web applications
that have the features and functionality of traditional
desktop applications. RIAs typically transfer the
processing necessary for the user interface to the web
client but keep the bulk of the data (i.e maintaining the
state of the program, the data etc) back on the application
server.
RIAs typically:



run in a web browser, or do not require software installation
run locally in a secure environment called a sandbox
can be "occasionally connected" wandering in and out of hotspots or from office to office.
AJAX


Asynchronous JavaScript and XML (AJAX)
Enables creation of interactive Web application





HTML and CSS to present information
Document Object Model (DOM), manipulated through
JavaScript, to dynamically display and interact with the
information presented
XMLHttpRequest object to exchange data asynchronously
with the web server
No need to refresh the whole page
JSF components can include built-in AJAX
functionality
Source: Shin’s Web 2.0 and Java
Web 2.0 Phenomenon

Web as a Platform




Collective intelligence


Folksonomy: Collaborative categorization
Data is key and should be shared


User's computing activities occur on the web
Email, chatting, photo sharing, etc.
More and more apps are moving to the web
Mashups: Seamlessly combines content from more than
one source into an integrated experience
Rich user experience

AJAX
Source: Shin’s Web 2.0 and Java
Web 1.0, 1.5, 2.0
Web 1.0
Web 1.5
Web 2.0
 Personal
 Wikis
 Blogging (Roller)
Websites
 Discussion
 RSS
 Email/News
Forums
Groups
 Pop-unders  Google Ad
 Pop-ups
 Yahoo
 del.icio.us
 Web
 Craigslist
Directories  MapQuest  HousingMaps.com
 Web
 Google Maps
 Napster
Classifieds
 iTunes
 TerraServer
 MP3
Source: Shin’s Web 2.0 and Java