Advanced Web Programming Intro to HTML part 1

1
Advanced Web ProgrammingIntro to HTMLpart 1

• John Barr
• Fall 2005

2
Course Topics

• Review of HTML and XML/XHTML
• Review of Web Site design
• Review of Cascading Style Sheets
• DHTML using JavaScript
• Server-side processing using Perl and cgi

3
Course Topics

• Review of HTML and XML/XHTML
• Review of Web Site design
• Review of Cascading Style Sheets
• DHTML using JavaScript
• Server-side processing using Perl and cgi

4
What is HTML?

• HTML has a central role in the Web
• Tagging scheme for Web pages
• From nothing to a global information utility in
  just 8 years

5
What is HTML 4?

• HTML 4 HTML is an SGML (Standard Generalized
  Markup Language) application conforming to
  International Standard ISO 8879.
• SGML is a language for describing markup
  languages,
• used in electronic document exchange, document
  management, and document publishing.
• HTML is an example of a language defined in SGML.
• SGML has been around since the middle 1980's and
  has remained quite stable.
• the language is both feature-rich and flexible.
• very complexity - too complex for the World Wide
  Web.

this discussion taken from the W3C web page at
http//www.w3.org/MarkUp/
6
What is HTML 4?

• HTML was conceived to be a simple language for
  the exchange of scientific and technical
  documents
• HTML simplified SGML by specifying a small set of
  structural and semantic tags suitable for
  authoring simple documents.
• HTML added support for hypertext. Multimedia
  capabilities were added later.

7
Main.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.1 main.html --gt
• 6 lt!-- Our first Web page --gt
• 7
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Welcomelt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14 ltpgtWelcome to XHTML!lt/pgt
• 15 lt/bodygt
• 16 lt/htmlgt

8

• 1
• 2 lthtmlgt
• 3 ltheadgt
• 4 lttitlegtInternet and WWW How to Program
  - Headerslt/titlegt
• 5 lt/headgt
• 6
• 7 ltbodygt
• 8
• 9 lth1gtLevel 1 Headerlt/h1gt
• 10 lth2gtLevel 2 headerlt/h2gt
• 11 lth3gtLevel 3 headerlt/h3gt
• 12 lth4gtLevel 4 headerlt/h4gt
• 13 lth5gtLevel 5 headerlt/h5gt
• 14 lth6gtLevel 6 headerlt/h6gt
• 15
• 16 lt/bodygt
• 17 lt/htmlgt

The font size of the text between tags decreases
as the header level increases.
9
Program Output
Select a header based on the amount of emphasis
you would like to give that text.
10
Links.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.5 links.html --gt
• 6 lt!-- Introduction to hyperlinks --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Linkslt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14
• 15 lth1gtHere are my favorite siteslt/h1gt
• 16
• 17 ltpgtltstronggtClick on a name to go to
  that page.lt/stronggtlt/pgt
• 18
• 19 ltpgtlta href "http//www.deitel.com"gtDe
  itellt/agtlt/pgt

11
(No Transcript)
12
Contact.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.6 contact.html --gt
• 6 lt!-- Adding email hyperlinks --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Contact Page
• 11 lt/titlegt
• 12 lt/headgt
• 13
• 14 ltbodygt
• 15
• 16 ltpgtMy email address is
• 17 lta href "mailtodeitel_at_deitel.com"gt
  deitel_at_deitel.com
• 18 lt/agt. Click the address and your
  browser will open an
• 19 email message and address it to
  me.lt/pgt

13
Program Output
14
Picture.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.7 picture.html --gt
• 6 lt!-- Adding images with XHTML --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Welcomelt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14
• 15 ltpgtltimg src "xmlhtp.jpg" height
  "238" width "183"
• 16 alt "XML How to Program book
  cover" /gt
• 17 ltimg src "jhtp.jpg" height
  "238" width "183"
• 18 alt "Java How to Program book
  cover" /gtlt/pgt
• 19 lt/bodygt

15
(No Transcript)
16
Nav.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.8 nav.html --gt
• 6 lt!-- Using images as link anchors --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Navigation Bar
• 11 lt/titlegt
• 12 lt/headgt
• 13
• 14 ltbodygt
• 15
• 16 ltpgt
• 17 lta href "links.html"gt
• 18 ltimg src "buttons/links.jpg"
  width "65"
• 19 height "50" alt "Links Page"
  /gtlt/agtltbr /gt

17
Nav.html

• 36
• 37 lta href "form.html"gt
• 38 ltimg src "buttons/form.jpg" width
  "65"
• 39 height "50" alt "Feedback
  Form" /gtlt/agtltbr /gt
• 40 lt/pgt
• 41
• 42 lt/bodygt
• 43 lt/htmlgt

Using an image as an anchor works exactly the
same as using text.
18
Contact2.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.9 contact2.html --gt
• 6 lt!-- Inserting special characters --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Contact Page
• 11 lt/titlegt
• 12 lt/headgt
• 13
• 14 ltbodygt
• 15
• 16 lt!-- Special characters are entered
  --gt
• 17 lt!-- using the form code
  --gt
• 18 ltpgtMy email address is
• 19 lta href "mailtodeitel_at_deitel.com"gtde
  itel_at_deitel.com

19
Contact2.html

• 36
• 37 ltpgtNote ltstronggtlt
  frac14lt/stronggt of the information
• 38 presented here is updated daily.lt/pgt
• 39
• 40 lt/bodygt
• 41 lt/htmlgt

20
Links2.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Fig. 4.10 links2.html
  --gt
• 6 lt!-- Unordered list containing hyperlinks
  --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Linkslt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14
• 15 lth1gtHere are my favorite siteslt/h1gt
• 16
• 17 ltpgtltstronggtClick on a name to go to
  that page.lt/stronggtlt/pgt
• 18
• 19 ltulgt

21
Program Output
Each entry in the list is rendered on its own
line with a bullet before it.
22
List.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-tr
  ansitional.dtd"gt
• 4
• 5 lt!-- Fig. 4.11 list.html --gt
• 6 lt!-- Advanced Lists nested and ordered --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtInternet and WWW How to Program
  - Listslt/titlegt
• 11 lt/headgt
• 12
• 13 ltbodygt
• 14
• 15 lth1gtThe Best Features of the
  Internetlt/h1gt
• 16
• 17 ltulgt
• 18 ltligtYou can meet new people from
  countries around
• 19 the world.lt/ligt

23
List.html

• 36 ltligtAround the clock
  newslt/ligt
• 37 ltligtSearch engineslt/ligt
• 38 ltligtShoppinglt/ligt
• 39 ltligtProgramming
• 40
• 41 ltol type "a"gt
• 42 ltligtXMLlt/ligt
• 43 ltligtJavalt/ligt
• 44 ltligtXHTMLlt/ligt
• 45 ltligtScriptslt/ligt
• 46 ltligtNew languageslt/ligt
• 47 lt/olgt
• 48
• 49 lt/ligt
• 50
• 51 lt/ulgt lt!-- Ends the first level
  nested list --gt
• 52 lt/ligt
• 53
• 54 ltligtLinkslt/ligt

24
List.html

• 69
• 70 lt/bodygt
• 71 lt/htmlgt