Introduction to Web Site Development

1
Introduction to Web Site Development
Lecture 1 Web Servers, Web Sites and an
Introduction to HTML

• Steven Emory
• Department of Computer Science
• California State University, Los Angeles

2
Course Administration

• Course Homepage
• Syllabus
• CSNS Registration

3
Course Topics

• Web Servers
• HTML
• CSS
• JavaScript
• HTML DOM
• DHTML (Dynamic HTML)
• Flash??? More DHTML??? A little AJAX???

4
Web Servers

• A Web Server is a computer program that
• Is bound to a network port
• HTTP uses port 80
• HTTPS uses port 443
• Listens to network port
• Accepts/Declines connections on that port
• Processes IP requests from clients
• Sends IP responses back to the clients

5
Internet Protocols

• An internet protocol is a specification that
  defines what all of the valid requests and
  responses are for communication and data transfer
  between two computers
• Examples
• HTTP
• GET, HEAD, POST, DELETE
• NNTP
• GROUP, LIST, ARTICLE, HEAD, NEXT, QUIT

6
HTTP

• HTTP RFC1945 (1990)
• HyperText Transfer Protocol
• Internet protocol of the World Wide Web
• HTTP RFC2616 (1999)
• Latest HTTP specification
• HTTPS RFC 2818 (2000)
• HTTP over SSL

7
HTTP Request and Response

• Request (from client to server)
• GET /index.html HTTP/1.0
• Response (from server to client)
• HTTP/1.1 200 OKDate Mon, 21 Sep 2009 203640
  GMTContent-Length 9490Content-Type text/html
  charsetutf-8
• HTTP/1.1 404 Not FoundDate Mon, 21 Sep 2009
  204459 GMTContent-Type text/html
  charsetutf-8

8
HTML

• HTML
• HyperText Markup Language
• Publishing language of the World Wide Web
• Tim Berners-Lee
• HTML 4.01 (1999)
• Latest HTML specification
• HTML 5 (2010 201?)
• Upcoming HTML specification
• Replaces HTML4, XHTML1, and DOM2 HTML

9
HTML Syntax

• An HTML document consists of
• A tree of HTML elements
• Each element begins with a start tag
• Each element ends with an end tag
• Some elements have optional end tags
• An element can define attributes within its start
  tag

10
HTML Example

• Example
• lt!DOCTYPE HTMLgtltHTMLgtltHEADgtltTITLEgtHello
  HTML!lt/TITLEgtlt/HEADgtltBODYgtltP /gtHello HTML!ltP
  /gtThis is HTML Syntax!lt/BODYgtlt/HTMLgt

11
XHTML

• XHTML (2000)
• Extensible HyperText Markup Language
• XHTML 1.1 (2002)
• Latest XHTML specification
• XHTML 5 (2010 201?)
• Part of upcoming HTML 5 specification
• Also called the XML-Syntax

12
XHTML Example

• Example
• lt?xml version"1.0" encoding"UTF-8"?gtlt!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gtlth
  tml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en"gtltheadgtlttitlegtHello
  HTML!lt/titlegtlt/headgtltbodygtltp /gtHello HTML!ltp
  /gtThis is XML Syntax!lt/bodygtlt/htmlgt

13
HTML Versus XHTML

• HTML 5 specification is intended to replace XHTML
  1.1
• HTML 5 supports the XML-syntax
• HTML 5 supports XML self-closing elements
• ltbr /gt, ltp /gt, etc.
• HTML 5 allows you to use the syntax you are most
  comfortable with
• 1.6 HTML vs XHTML
• Read more about it

14
Simple HTML Elements

• Root Elements
• The HTML Element
• ltHTMLgtHEAD BODY elementslt/HTMLgt
• Metadata Elements
• The HEAD Element
• ltHEADgtOne or more metadata elementslt/HEADgt
• The TITLE Element
• ltTITLEgtDocument titlelt/TITLEgt

15
Simple HTML Elements (cont.)

• Sections
• The Body Element
• ltBODYgtFlow content (stuff to be rendered)lt/BODYgt
• Grouping Content
• The P Element
• ltPgtPhrasing contentlt/Pgt
• The BR Element
• ltBRgt (preferable)
• ltBR /gt (OK)
• ltBRgtlt/BRgt (bad idea)

16
Simple HTML Elements (cont.)

• Grouping Content (cont.)
• H1 H6 Elements
• ltHngtPhrasing contentlt/Hngt
• Text-Level Semantics
• The STRONG Element
• ltSTRONGgtPhrasing contentlt/STRONGgt
• The EM Element
• ltEMgtPhrasing contentlt/EMgt

17
Simple HTML Elements (cont.)

• Text-Level Semantics (cont.)
• The STRONG Element
• ltSTRONGgtPhrasing contentlt/STRONGgt
• The EM Element
• ltEMgtPhrasing contentlt/EMgt
• SMALL, B, I, SUB, SUP Elements
• Small text
• Bold and italic text
• Subscript and superscript text

18
Running an HTTP Daemon

• Apache HTTP Server
• Download and install
• Follow the tutorial on Wiki page
• Delete all files in /htdocs directory
• Add your own /htdocs/index.html file
• Start the web server

19
Lab 1

• Download Stevens zip-file version of Apache HTTP
  server
• Extract it to the hard drive, or better yet, to
  your flash drive
• Setup the HTTP server
• Edit configuration files
• Delete default HTML files
• Add your own index.html file
• Run your web server!