Background: HTML and CSS

1
Background HTML and CSS

• Chapters 1-4 of Deitel XML text

2
Remarks

• There is a lot of important and useful discussion
  on html in the text that is not covered in this
  ppt.
• I have simply picked a few interesting examples.
• You may need to work through the rest of these
  chapters for yourself.

3
A little background HTML

• Hypertext markup language is processed by the
  browser (or some html parser) and content is
  displayed.
• The language consists of tags opening and closing
  instructions, like font settings, anchors,
  applets, and forms.
• The material (data) thus presented is said to be
  marked up using the defined tags.
• This course wont cover much html per se.

4
Display an image
5
An image

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegtXML How to Program - Welcomelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtltimg src "xmlhtp.jpg" height "238"
  width "183"
• alt "Cover of XML How to Program"gtlt/pgt
• lt/bodygt
• lt/htmlgt

6
Lists
7
Code for lists html example is in the ppt notes
for this slide

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegtXML How to Program - Listslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtThe Best Features of the Internetlt/h1gt
• ltulgt
• ltligtYou can meet new people from countries
  around
• the world.lt/ligt
• ltligtYou have access to new media as it
  becomes public
• lt!-- This starts a nested list, which
  uses a modified --gt
• lt!-- bullet. The list ends when you
  close the ltulgt tag --gt
• ltulgt
• ltligtNew gameslt/ligt
• ltligtNew applications
• lt!-- Another nested list --gt

8
Navigation bar
9
Navigation bar

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegtXML How to Program - Navigation
  Barlt/titlegt
• lt/headgt
• ltbodygt
• ltpgt
• lta href "links.html"gt
• ltimg src "buttons/links.jpg" width "65"
  height "50"
• alt "Links Page"gtlt/agtltbrgt
• lta href "list.html"gt
• ltimg src "buttons/list.jpg" width "65"
  height "50"
• alt "List Example Page"gtlt/agtltbrgt
• lta href "contact.html"gt
• ltimg src "buttons/contact.jpg" width
  "65" height "50"
• alt "Contact Page"gtlt/agtltbrgt

10
Page with links
11
Page with links

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegtXML How to Program - Linkslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHere are my favorite Internet Search
  Engineslt/h1gt
• ltpgtltstronggtClick on the Search Engine address
  to go to that
• page.lt/stronggtlt/pgt
• ltpgtlta href "http//www.yahoo.com"gtYahoolt/agtlt/
  pgt
• ltpgtlta href "http//www.altavista.com"gtAltaVis
  talt/agtlt/pgt
• ltpgtlta href "http//www.askjeeves.com"gtAsk
  Jeeveslt/agtlt/pgt
• ltpgtlta href "http//www.webcrawler.com"gtWebCra
  wlerlt/agtlt/pgt

12
Send mail
13
Send mail

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegtXML How to Program - Contact
  Pagelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtMy email address is lta href
  "mailtodeitel_at_deitel.com"gt
• deitel_at_deitel.comlt/agt. Click on the address
  and your browser
• will open an email message and address it to
  me.lt/pgt
• lt/bodygt
• lt/htmlgt

14
A table

• Link to table
• Table source

15
An html form from Dietels XML text
16
The source for form from Dietels XML text

• In notes below
• And at htmlform.html

17
Whats wrong with html?

• Network programmers found html too limiting. It
  is ok for web page content, but what about
  presenting material for some specialized
  application, like molecular structure?
• Also, there are inconsistencies and ambiguities
  in some expression definitions.
• Many browsers accept/process HTML, even though it
  has errors.

18
Aside And what is XML?

• XML was developed by a consortium of programmers.
  It is eXtensible Markup Language. A developer
  can use the element tag to create his own
  entities for application-specific needs.

19
Aside continued DTD, DOM and Schema

• We will learn more about these, but DTD
  references appear in the CSS examples.
• DTD Document type declarations define an XML
  documents structure. A DTD is not required for
  an XML document but they insure conformity. DTDs
  use a modified BNF for defining entities, called
  extended Backus-Nauer Form. An XML or HTML
  document might reference a DTD at the top.
• Schema There is currently a shift away from DTDs
  to Schema for defining XML structure. Schema uses
  XML syntax and both W3C and MS have defined
  schema standards.
• DOM is a tree-structure, recommended by W3C for
  representing an XML document. (Any
  directory-style tree would work.)

20
CSS cascading style sheet

• A CSS can be internally or externally defined. It
  is a style sheet that tells the browser how to
  represent the html document.

21
Internal stylesheet
22
Internal stylesheet

• Source is at Grocerylist.html

23
Importing an external style-sheet
24
links

• Grocery is at grocery2.html
• Stylesheet is at styles.html

25
An external style sheet code part 1

• / An external stylesheet /
• a text-decoration none
• ahover text-decoration underline
• color red
• background-color ccffcc
• li em color red
• font-weight bold
• ul margin-left 2cm
• ul ul text-decoration underline
• margin-left .5cm

26
Importing a style sheet (example continued)

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• lt!-- Linking external style sheets --gt
• ltheadgt
• lttitlegtXML How to Program - Importing Style
  Sheetslt/titlegt
• ltlink rel "stylesheet" type "text/css"
  href "styles.css"gt
• lt/headgtltbodygt
• lth1gtShopping list for ltemgtMondaylt/emgtlt/h1gt
• ltulgt
• ltligtMilklt/ligt
• ltligtBread
• ltulgt
• ltligtWhite breadlt/ligt
• ltligtRye breadlt/ligt
• ltligtWhole wheat breadlt/ligt
• lt/ulgt
• lt/ligt
• ltligtRicelt/ligt

27
In line CSS (from Dietels XML text)
28
Source for inline CSS document width.html

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• lt!-- Setting box dimensions and aligning text --gt
• ltheadgt
• lttitlegt Box Dimensionslt/titlegt
• ltstyle type "text/css"gt
• div background-color ffccff
• margin-bottom .5em
• lt/stylegt
• lt/headgtltbodygt
• ltdiv style "width 20"gtHere is some
• text that goes in a box which is
• set to stretch across twenty precent
• of the width of the screen.lt/divgt
• ltdiv style "width 80 text-align center"gt
• Here is some CENTERED text that goes in a box
• which is set to stretch across eighty precent
  of
• the width of the screen.lt/divgt

29
Another inline CSS example
30
Source for borders2.html

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
• "http//www.w3.org/TR/html4/strict.dtd"gt
  
• lthtmlgt
• ltheadgt
• lttitlegtXML How to Program - Borderslt/titlegt
• ltstyle type "text/css"gt
• body background-color ccffcc
• div text-align center
• margin-bottom .3em
• width 50
• position relative
• left 25
• padding .3em
• lt/stylegt
• lt/headgt
• ltbodygt
• ltdiv style "border-style solid"gtSolid
  borderlt/divgt
• ltdiv style "border-style double"gtDouble
  borderlt/divgt
• ltdiv style "border-style groove"gtGroove
  borderlt/divgt

31
HW on this section

• Use my form, table and html/css examples to
  produce your own form, table and html/css. Post
  these 3 exercises and email me the links.