presents

1
presentsHTML 4.0v2.0
2
Objectives

• This chapter will describe
• - The new abilities of HTML 4.0- The ways to
  integrate HTML 3.2 and 4.0

3
HTML Validation the DOCTYPE

• All HTML versions have a DTD which defines valid
  values for tags and attributes
• A DOCTYPE tag, placed above the ltHTMLgt tag, tells
  the browser which DTD to use when reading your
  document.
• For HTML 4.0 this tag would resemble one of the
  followinglt!DOCTYPE HTML PUBLIC "-//W3C//DTD
  HTML 4.01//EN" "http//www.w3.org/TR/html4/strict.
  dtd"gt lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.01 Transitional//EN" "http//www.w3.org/TR/html4
  /loose.dtd"gt

4
HTML 4.0 Strict vs. Loose

• In the strict DTD, several deprecated elements
  from HTML 3.2 are no longer allowed
• Because the strict DTD would cause many HTML
  pages to break, the loose DTD (a.k.a.
  transitional) is also offered. This DTD allows
  deprecated HTML elements to work, but includes
  the new 4.0 elements as well

5
HTML 4.0 - XHTML

• An alternative, but equally strict version of
  HTML 4.0 is offered with the following
  DTDlt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
  1.0 Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/x
  html1-strict.dtd"gt
• Pages using this DTD are sometimes called XHTML
  pages

6
HTML 4.0 New Elements

• Useful elements from the 4.0 specification
  include IFRAME, LABEL, BUTTON, FIELDSET,
  OPTGROUP, THEAD, TBODY, and TFOOT
• We will look at each of these in turn

7
HTML 4.0 IFRAME

• IFRAME allows you to embed an optionally
  scrollable frame inside your page. It uses the
  source tag to point the frame at another page
• An exampleltIFRAME WIDTH"500" height"200"
  SRC"http//www.google.com"
  MARGINWIDTH"100" MARGINHEIGHT"125"
  FRAMEBORDER"0" name"bfloat"gt ltBRgtA
  browser that cannot handle floating frames will
  display this text instead. lt/IFRAMEgt

8
HTML 4.0 LABEL

• The LABEL tag allows you to associate a key
  combination like AltA with a form element. This
  allows the user to jump to a particular entry
  field quickly
• The LABEL tag has two important attributes FOR
  and ACCESSKEY - the FOR attribute refers to the
  ID of the form element that will be jumped to
  - the ACCESSKEY refers to the key (when typed
  while Alt is held down) that will cause the jump

9
HTML 4.0 BUTTON

• The new BUTTON tag allows you to wrap any content
  and turn it into a button. Styles can be set on
  the BUTTON tag like any other block element
  allowing you to set border styles etc.
• An exampleltBUTTON style"border-styledashed"gt
  Here is a button to click!ltbr /gtltimg
  src"something.png" /gtlt/BUTTONgt

10
HTML 4.0 FIELDSET

• The FIELDSET draws a simple outline around a
  block of HTML. The outline helps create sections
  inside your page
• The LEGEND tag can be set inside a FIELDSET to
  give the outline a titleAn example
• ltFIELDSETgt
• ltLEGENDgtSection One Some Keyslt/LEGENDgtltpgtSome
  text etc.lt/FIELDSETgt

11
HTML 4.0 OPTGROUP

• OPTGROUP allows you to add categories to your
  SELECT boxes

In this picture, Mozilla and Netscape Navigator
are categories
ltSELECT NAMEbrowsertypegt ltOPTGROUP
LABEL"Mozilla"gt ltOPTION LABEL"6.x or
higher"gtMozilla 6.x or higherlt/OPTIONgt
lt/OPTGROUPgt ltOPTGROUP LABEL"Netscape
Navigator"gt ltOPTION VALUE1 LABEL"6.x or
higher"gtNetscape Navigator 6.x or
higherlt/OPTIONgt ltOPTION VALUE1 LABEL"4.x or
higher"gtNetscape Navigator 4.xlt/OPTIONgt ltOPTION
VALUE1 LABEL"3.x"gtNetscape Navigator
3.xlt/OPTIONgt etc.
12
HTML 4.0 THEAD, TBODY, TFOOT

• THEAD, TBODY and TFOOT help you refine the look
  of your tables
• These three tags replace a TR tag in a table.
  Each item can be styled distinctively
• Of course you can do the same thing with classes
  in CSS
• If you add RULES"GROUPS" to your TABLE tag, you
  can cause your cell borders to be drawn around
  the THEAD, TBODY and TFOOT groups, rather than
  around individual rows

13
(No Transcript)
14
Summary

• In this chapter we examined some of the important
  and useful features of HTML 4.0
• We also learned about using DTDs to tell the
  browser how to interpret our HTML

15
Any Questions?