Introduction to Web Page Development

1
Introduction to Web Page Development

• The Internet Slides 1-9
• WWW 10-15
• HTML 16-22
• Jargon 24-44
• Overloading 45
• Overloaded Terms 25-34Web page, Intranet,
  Script, ASP, etc.
• Other Terms 35-49Server-side, Client-side,
  Style,Abstraction, Virtuality, etc.

2
Networks

• Network a structure linking computers so they
  can exchange messages /or share resources
  (printers, files, storage)
• Local area network (LAN) links computers that
  are close together (e.g.. a single department or
  building)
• Wide area network (WAN) links computers or
  LANs across a wider area (buildings or even
  cities)

3
The Internet Network Protocols

• Protocol a set of communication rules that allow
  devices to understand each others messages.
• Networks have utilized a myriad of communication
  technologies and protocols at various levels
  (application, network, transport, etc.)

4
Internet Client-Server Model

• Server - A computer that makes services available
  to a network.
• Client - A computer or other device that requests
  services from a server.
• A device can be both server and client.
• Client-Server Network Computers that act as
  servers tend to be dedicated to that role, and
  devices that act as clients tend to be dedicated
  to a functional role (e.g.. PC) that requires
  services from servers.

5
The Internet - ARPANET

• ARPANET Internet predecessor
• developed in 1960s and 1970s for DARPA, the
  U.S. Governments Defense Advanced Research
  Projects agency,
• originally two nodes at UCLA and Stanford,
  connected by a phone line.
• ARPANET grew into the Internet as it expanded
  to non-defense uses through the 1980s

6
The Internet - Growth

• Adopted TCP/IP, a set of well-defined
  communication protocols, as a standard in 1983.
• Al Gore, as a congressman and Senator from
  Tennessee, played a significant role in
  encouraging U.S. Government funding of the
  Internet infrastructure
• A misunderstanding of this role played a part in
  the 2000 presidential election

7
The Internet Pre-WWW Services Protocols

• File Transfer - FTP
• SMTP (Simple Mail Transport Protocol) for
  transporting mail between servers
• POP (Post Office Protocol) client/server email
  transfer
• ICMP (I. Control Message P.) ping
• IRC (I. Relay P.) Chat

8
The Internet Now

• Includes hundreds of millions of interconnected
  computers, cell phones, PDA's, televisions,
  networks, etc.
• Uses a variety of communication media, such as
  Ethernet, fiber-optic cables, satellites, phone
  lines, etc.

9
The Internet Now

• Includes hundreds of millions of interconnected
  computers, cell phones, PDA's, televisions,
  networks, etc.
• Uses a variety of communication media, such as
  Ethernet, fiber-optic cables, satellites, phone
  lines, etc.

10
Hypertext

• Hypertext is a method of organizing information
  that gives the reader control over the order in
  which the information is presented.
• A conventional book is linear, with one path,
  from page x to page x1.
• With hypertext, each page provides alternate
  paths, and you progress, digress, or jump as you
  wish.

11
Linear versus hypertext documents
12
Hypertext - Hyperlinks

• The key to hypertext is the use of hyperlinks (or
  links) that allow users to jump from one topic to
  another.
• A link may point to another section of the same
  document, or to another document
• In theory, links can be one-way or two-way, and
  can have relationship values (definition,
  example, subordinate, parent, etc.)

13
Hypertext

• Conceived (but not named) by Vannevar Bush in
  1945.
• The term was coined in 1963 by Ted Nelson, whose
  proposed Xanadu network concept placed emphasis
  on backward links, version management, and rights
  management
• HyperCard for the Macintosh was the first
  widespread implementation of Hypertext, in 1987

14
World Wide Web

• At CERN, (European Center for High Energy
  Physics), Timothy Berners-Lee
• Proposed the use of a hypertext server,
  browser, and hypermedia, in 1989
• Wrote the first web browser, called
  WorldWideWeb, in 1990
• Wrote the first web server, called httpd (d for
  daemon), in 1991
• Wrote early versions of HTML and HTTP
• Utilized the Internet and coined the term World
  Wide Web

15
HTTP Hypertext Transfer Protocol

• Used by web browsers to send requests to Web
  servers (i.e. http servers)
• Used by web servers to send Web pages and
  messages (e.g. error messages) to web browsers
• Used by web browsers to send data (i.e. forms
  files) to web servers!

16
HTML The Language of the Web

• A markup language describes a documents
  structure and content.
• HTML (Hypertext Markup Language) is used for most
  Web pages.
• HTML is not a programming language or a
  formatting language.
• HTML utilizes to enclose tags, which can have
  attributes attribute values

17
Example HTML Source code
The title goes in the title bar at top of
browser window
Start of HTML page

• My First Page
• Hello, World!
• 8/25/2007

Start of the formal header
End of header
The page content a Level 2 heading, and some
plain text
Start end of page body
End of page
18
Example HTML Browser Output
The Title
This particular static web page is read from a PC
file, not a web server
Hello, World!
The page content A level 2 Heading, and some
plain text
8/25/2007
19
HTML Extensions The Browser Wars

• The first version of HTML was created using the
  Standard Generalized Markup Language (SGML).
• In the 1990s, competing browsers added
  non-standard HTML extensions to gain competitive
  advantage.
• The consequent Browser Wars impeded uniformity
  and standards adoption.

20
The World Wide Web Consortium (W3C)

• Founded by Timothy Berners-Lee in 1994, while he
  was at MIT
• Over 350 individual and organization members
  participate in standards development, including
• HTML 4.01, 24-Dec-1999
• CSS Level 2, 12-May-1998
• DOM Level 3, 7-Apr-2004
• XHTML 1.1, 31-May-2001
• XML 1.1, 16-Aug-2006

21
HTML XHMTL Versions
22
The Future of HTML

• HTML tags, attributes, specifications that are
  deprecated are still in the standard, but have
  effectively been replaced by newer features.
• HTML is being slowly replaced by
• XML (Extensible Markup Language) - a
  metalanguage like SGML,
• XHTML (Extensible Hypertext Markup Language)

23
Jargon

• Overloaded Terms
• Web Page
• Web Site
• Web Server
• Intranet
• Script / Scripting
• ASP

• Other Terms
• Server-side Script
• Client-side Script
• Style Style Sheet
• Abstraction
• Virtuality
• Virtual Content Engine
• Content Management

24
Overloading

• A term (or, originally a programming object) with
  more than one overlapping definition
• State (Ohio) vs State (status)
• State (Ohio) vs State (country/govt)
• Common in computer industry, as non-technical
  English terms are adapted for specific technical
  use

25
Web Page (definition 1)

• An HTML file.
• Typically (though not necessarily) stored on and
  delivered by a Web Server
• A Dynamic Client-Side Web page is an HTML file
  that contains scripting (typically JavaScript or
  Ajax) that is executed by the browser (i.e. the
  client).
• A Static Web Page contains HTML only (or at least
  no dynamic action that causes different users to
  see different things.)

26
Web Page (definition 2)

• An HTML text stream that is generated dynamically
  by a server-side web application, and then
  delivered to a web browser
• May contain dynamic client-side content (i.e.
  JavaScript, Ajax, etc.)
• Or may contain only static content.

27
Web Page (definition 3)

• An application script on a web server that
  generates an HTML text stream (i.e. Web Page
  definition 2)
• Common web application languages or environments
  include

• J2EE
• Active Server Pages
• ASP.NET

• PHP
• Perl
• Python
• JSP

28
Web Page (summary)

• An HTML file, whether static or dynamic.
• An HTML text stream that is generated dynamically
  on a server.
• A server-side script that generates an HTML page.
• An HTML file delivered statically by the server,
  may be static or execute dynamically on the
  client.
• An HTML text stream generated dynamically on a
  server may also be static or dynamic on the
  client.

29
Web Server

• Hardware A computer, typically bigger than a
  PC, that holds information used by various users
  on various PCs
• Software An application (typically running on a
  server computer) that provides a service to a
  variety of users e.g. FTP server, Web Server,
  Mail Server
• Information Resource A web site such as
  www.clevelandclinic.org, www.clevelandclinicflorid
  a.org, or www.cchs.net.

30
Web Site

• A collection of interlinked web pages that share
  a common origin and/or subject.
• Recursive view Web sites are typically composed
  of smaller web sites
• instruct.tri-c.edu The Tri-C i-Web site
• instruct.tri-c.edu/rrichmond Dr. Richmonds
  i-Web site
• instruct.tri-c.edu/rrichmond/1020 The IT1020
  class site

31
Intranet (3 meanings)

• An organizations private TCP/IP network
  (analogous to Internet),
• The various web servers sites on a private
  network (analogous to World Wide Web),
• An organizations primary Intranet web site, e.g.
  intranet.ccf.org, or intranet.uhc.com (analogous
  to WWW as a server name). Note at Tri-C, we
  have My Tri-C Space, not The Intranet

32
Script (2 meanings)

• The term script generally refers to an
  interpreted program that is easy to change and
  re-run. Scripts usually are less efficient to
  execute than compiled programs.
• In some contexts, such as web development, almost
  any small program, even a compiled one, may be
  called a script

33
ASP (2 meanings)

• Active Server Pages A Microsoft web
  application technology. ASPs are Web pages in
  the third sense described above.
• Application Service Provider An organization
  that earns money by hosting applications on web
  servers (as opposed to letting users or
  organizations download the software to their own
  servers). Note the similarity to ISP, an
  organization that provides web space access,
  but doesnt charge for hosting apps.

34
Server-Side Scripting with Active Server Pages

• Active Server Pages (ASPs) are fairly typical of
  server-side web applications.
• ASPs are HTML pages that contain executable
  scripts. The scripts generate HTML tags and
  textual web page content when they are loaded and
  executed.

35
Server-Side Scripting with Active Server Pages
(2)

• When a web browser requests an ASP, the web
  server parses the page, passing along the static
  HTML code and content, but identifying and
  executing the scripts.
• The server-side scripts output HTML code and
  textual content, placing that output within the
  HTML text stream.

36
Server-Side Scripting with Active Server Pages
(3)

• The web browser cant tell the difference between
  HTML code or text that was in the original file
  and code or text that was generated dynamically.
  It simply looks like a regular web page.
• ASP is a programming technology, but not a
  language. In ASPs, the program code may be
  JavaScript or VBscript (From Visual Basic).

37
Active Server Page Source Code
HTML tags text are just output as is
My First
ASP
Hello World WeekdayName(Weekday(Date)

Anything between is ASP code that is
interpreted and executed
Response.write is the ASP output command. It
simply writes to the HTML text stream
Note the date function, which generates the
run-time, not the edit-time date
38
Active Server Page Output
Unlike the static web page shown earlier, an ASP
must run on a web server.
Hello, World
Static text in a bold header .
Its Thursday
The weekday name is generated by the server at
run-time, not when the page was edited.
39
Client-Side Scripting

• Java Applet
• Compiled application embedded in a web page and
  executed by the PCs Java Engine
• JavaScript
• An interpreted language embedded within an HTML
  file and executed by the web browser
• Typically used to validate form fields and/or
  manipulate images
• DHTML JSCRIPT
• Microsoft variants of JavaScript

40
Styles

• Style
• A rule that determines how something (on a Web
  page, or a Word document) will be formatted.
• Style Sheet
• A set of style rules for a web page
• CSS (Cascading Style Sheets)
• A formatting language that defines styles used by
  HTML
• HTML provides content structure CSS styles
  control the presentation of content.

41
Separation of Content Presentation

• There is a variety of display devices, e.g.
  PDAs, kiosks, hi-res monitors, embedded devices
• Users control many display characteristics, e.g.,
  text-to-speech, font size selection, browser
  window size,
• To send a document legibly to different devices
  users, the content and presentation are
  controlled separately.

42
Separation of Content Presentation

• Content A content expert or storyteller is
  primarily concerned with content - the structure
  and nature of the information, that is, lists,
  paragraphs, definitions, addresses, tables,
  graphics, couplets, sentences, etc. This is the
  domain of HTML.
• Presentation Designers use styles to control
  presentation, e.g. paragraph indentation,
  bullets, colors, fonts, margins, text wrapping,
  pagination, etc.

43
Abstraction

• The use of a one object or concept in place of
  another in order to focus on familiar or common
  properties.
• Technical computer system concepts are abstracted
  to real-world concepts consistently to simplify
  understanding of the technical concepts.
• e.g.. Abstracting a computers file system to a
  tree or a file cabinet allows one to explain
  the file system concept by focusing on attributes
  of familiar objects.

44
Virtuality

• Something is virtual if it is not quite what it
  seems to be, or it acts as something else e.g.
  virtual reality.
• When there are multiple web servers (e.g.
  www.ccf.org, remote.ccf.org, search.ccf.org) on
  the same computer, each is referred to as a
  virtual server, because, for most purposes,
  each seems to be a separate computer.

45
The Virtual Content Engine (Is that virtual
engine or virtual content?)

• Web Technology makes it easier to make
  information widely available
• It doesnt necessarily automate the process of
  converting knowledge into web pages, and keeping
  information up to date.
• To keep information accurate and meaningful, web
  publishers generally need to create a content
  engine that churns out current content.

46
Content Management System (CMS)

• Tools that simplify the process of creating or
  adding web pages so that any user who has
  information to share can do so, without
  specialized knowledge of HTML.
• Blackboard, MySpace, and YouTube utilize Content
  Management Systems.
• They dont require publishers to know HTML and
  create web pages or sites.
• They simply facilitate ways for the user to put
  content on web pages.

47
Content Management System
The field of Content Management is new, and the
term is still vague. Imagine having to
distinguish among all of these things without
terms that are more specific than vehicles or
transportation systems.
48
Common CMS Features

• Page templates
• HTML editor
• Site navigation management
• Review Editing rights management
• Assign key words to pages to enhance search

• Form Designer
• Calendar newsletter
• Image library
• Workflow
• Forms design with underlying database definition
  reporting.
• Integration with other systems databases