XHTML I

1
XHTML I
2
Contents

• HTTP, (X)HTML, SGML, XML
• Tags and Attributes
• DOCTYPE
• W3C XHTML Validation Service
• Headers
• Linking
• Images
• Unordered Lists
• Nested and Ordered Lists
• Resources

3
HTTP, (X)HTML, SGML, XML

• HTTP (hyper-text transfer protocol)
• HTML (Hyper-text mark-up language)
• HTML conforms to International Standards ISO
  8879 - Standard Generalised Mark-up Language
  (SGML).
• SGML is a system which allows structured
  documents and mark-up languages to be defined.
• HTML standards are defined using SGML in what is
  known as a Document Type Definition (DTD).
• HTML documents are ASCII text documents.
• HTML documents contain text and various tags that
  define elements such as headings, paragraphs and
  HyperLinks.
• Each element describes how the document should be
  displayed.
• XHTML (Extended hyper-text mark-up language)
• XML

4
XHTML tags

• Start tags and end tags
• Some elements use both start and end tags
• Others just use a start tag
• Start tags - delimited by lt and gt
• End tags - delimited by lt/ and gt
• ltH1gtThis is a Large Headinglt/H1gt
• ltBRgtThis text starts on a new line.
• Some start tags also include attributes which
  further define information about the element.

5
HTML elements

• HTML influences the way a web page is displayed
  by the client browser, once it has been delivered
  by the World Wide Web (WWW) server.
• The HTML formatting marks, known as elements, are
  used to mark-up the text in the ASCII document.
• Elements exist, for example, to define
• Heading text.
• Words which are to be emphasised.
• Where HyperLinks are to be included.

6
Getting started

• What do I need to create web pages?
• Filenaming conventions
• Use of Netscape non-standard html
• Creating, saving and loading
• FTP

7
FTP

• The program FTP (file transfer protocol)
  transfers files to, from, and over the internet.
• Any file can be transferred (html,class, js, cgi
  etc.) text or binary so long as you have
  permission to read it at the source and write it
  at the destination.
• Anonymous ftp allows you to gain access to a
  remote machine.
• There you have limited privileges sufficient to
  allow for transfer of files from (and sometimes
  to) designated areas.
• E.g. Leech_ftp, ws_ftp, etc. (See winfiles.Com,
  download.Com, sourceforge.Com)

8
!DOCTYPE

• HTML 3.2
• lt!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2
  Draft//ENgt
• Netscapes HTML standard
• lt!DOCTYPE HTML PUBLIC -//WebTechs//DTD Mozilla
  HTML 2.0//ENgt
• Not strictly necessary for HTML, highly
  recommended
• Future browsers can still attempt to display your
  older documents (written to previous HTML
  standards) in the way that was originally
  intended, even though the HTML language may have
  evolved
• XHTML
• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt

9
!DOCTYPE
!DOCTYPE
Title tags

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt! Comments name_of_webpage.html --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegt Web Engineering XHTML I lt/titlegt
• lt/headgt
• ltbodygt
• ltpgtWelcome to XHTML!lt/pgt
• lt/bodygt
• lt/htmlgt

Body tags
10
ltHTML, HEAD, BODYgt

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• This is my first Web document. This file is a
  simple ASCII text file which was created on a PC
  using notepad under MS Windows. As you can see
  the file is shown in the display window of the
  Browser.
• lt/BODYgt
• lt/HTMLgt

11
W3C XHTML Validation Service

• Validating an XHTML document.
• World Wide Web Consortium (W3C)

12
W3C XHTML Validation Service

• XHTML validation results.
• Courtesy of World Wide Web Consortium (W3C).

13
Text emphasis

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- XHTML headers --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Headerslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtLevel 1 Headerlt/h1gt
• lth2gtLevel 2 headerlt/h2gt
• lth3gtLevel 3 headerlt/h3gt
• lth4gtLevel 4 headerlt/h4gt
• lth5gtLevel 5 headerlt/h5gt
• lth6gtLevel 6 headerlt/h6gt
• lt/bodygt
• lt/htmlgt

Every XHTML document is required to have opening
and closing html tags.
The font size of the text between tags decreases
as the header level increases.
Select a header based on the amount of emphasis
you would like to give that text.
14
ltHgt tag

• ltBODYgt
• ltH1gtAnimalslt/H1gt
• ltH2gtVertebrateslt/H2gt
• ltH3gtMammalslt/H3gt
• ltH4gtPrimateslt/H4gt
• ltH5gtManlt/H5gt
• ltH6gtFootball supporterslt/H6gt
• lt/BODYgt

15
Alignment

• ltP ALIGNRIGHTgtGLENMORANGIE in Gaelic means The
  Glen of Tranquillity. As early as 1783, the art
  of distillation was being practised as
  GLENMORANGIE, which lies by the mountain-swept
  shores of the wild Dornoch Firth.lt/Pgt
• ltP ALIGNCENTERgtGLENMORANGIE is still produced at
  one of the oldest and most traditional
  distilleries in the Scottish Highlands. lt/Pgt
• Netscape only
• ltP NOWRAPgtGLENMORANGIE in Gaelic means The Glen
  of Tranquillity. As early as 1783, the art of
  distillation was being practised as GLENMORANGIE,
  which lies by the mountain-swept shores of the
  wild Dornoch Firth.lt/Pgt

16
Hyperlinks
Text between strong tags will appear bold.

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Hyperlinks --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Hyperlinkslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtSome useful siteslt/h1gt
• ltpgtltstronggtClick on the link to go to that
  page.lt/stronggtlt/pgt
• ltpgtlta href "http//www.kdnuggets.com"gtData
  mininglt/agtlt/pgt
• ltpgtlta href "http//www.microsoft.com"gtMicrosoftlt
  /agtlt/pgt
• ltpgtlta href "http//www.disney.com"gtDisneylt/agtlt/p
  gt
• ltpgtlta href "http//www.google.com"gtGoogle -
  searchlt/agtlt/pgt
• ltpgtlta href "http//www.altavista.com"gtAltavista
  - searchlt/agtlt/pgt
• ltpgtlta href "http//www.sourceforge.com"gtFree
  code!lt/agtlt/pgt
• lt/bodygt
• lt/htmlgt

Linking is accomplished in XHTML with the
anchor (a) element.
The text between the a tags is the anchor for
the link.
The anchor links to the page thats value is
given by the href attribute.
Elements placed between paragraph tags will be
set apart from other elements on the page with a
vertical line before and after it.
17
Hyperlinks
Clicking on the Disney link will open up the
Disney homepage in a new browser window.
18
E-mail link

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Adding email hyperlinks --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering Mail Me! lt/titlegt
• lt/headgt
• ltbodygt
• ltpgtMy email address is
• lta href "mailtowebeng_at_xhtmllecture.com"gt
  webeng_at_xhtmllecture.com
• lt/agt. Click my address and your browser will open
  an
• email message addressed to me.lt/pgt
• lt/bodygt
• lt/htmlgt

To create an email link include mailto before
the email address in the href attribute.
19
E-mail link
When a user clicks on an email link, an email
message addressed to the value of the link will
open up.
20
Images

• Using IMG to insert graphics into documents
• ltPgtThis is an image referenced using the HTML IMG
  element. ltBRgtThe attribute you use to reference
  the image is SRC which stands for source.
• ltIMG SRCflower.gif
• Image types gif, jpg, bmp, tif..
• Different sizes means different download size

21
Images
The value of the src attribute of the image
element is the location of the image file.

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Pictures with XHTML --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - pictureslt/titlegt
• lt/headgt
• ltbodygt
• ltpgtltimg src "angelheart.jpg" height "251"
  width "367"
• alt "An angel" /gt
• ltimg src "grail.jpg" height "180" width
  "130"
• alt "A chalice" /gtlt/pgt
• lt/bodygt
• lt/htmlgt

The height and width attributes of the image
element give the height and width of the image.
The value of the alt attribute gives a
description of the image. This description is
displayed if the image cannot be displayed.
22
Image navigation

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Pictures with XHTML --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - pictureslt/titlegt
• lt/headgt
• ltbodygt
• ltpgt
• lta href "links.htm"gt
• ltimg src "angelheart.jpg" height "251" width
  "367"
• alt "An angel" /gt
• lt/agt
• ltimg src "grail.jpg" height "180" width
  "130"
• alt "A chalice" /gtlt/pgt
• lt/bodygt
• lt/htmlgt

Using an image as an anchor works exactly the
same as using text. Clicking on the image
entitled links brings the user to the page on
the right.
23
Unordered list

• ltULgt
• ltLIgtA hundred brave knights (ltIgtmust
  be loyallt/Igt),
• ltLIgtTwo hundred good bow men (ltIgtmust
  be good shotlt/Igt),
• ltLIgtFive score arrows (ltIgtthe best
  ltBgtFeathers and Flights
• department storeslt/Bgt selllt/Igt),
• ltLIgtA hundred ingots of Lead,
• ltLIgtFive large cauldrons,
• ltLIgtTwenty-Five bushels of wood,
• ltLIgtFive boxes of matches (ltIgtit isnt
  the middle ageslt/Igt)!
• lt/ULgt

• A hundred brave knights (must be loyal),
• Two hundred good bow men (must be true of shot),
• Five score arrows (the best Feathers and Flights
  department stores sell),
• A hundred ingots of Lead,
• Five large cauldrons,
• Twenty-Five bushels of wood,
• Five boxes of matches (well after all it isnt
  the middle ages)!

24
Ordered lists

• ltOL TYPEAgt
• ltLIgtMaid Elizabeth (for inspiration and
  support)!
• ltLIgtSir Arthur (very good with his sword)!
• ltLI TYPEIgtSir Fanciful (and his enlisted mob)
• ltLIgtGuy the Forester (not bad with a longbow)!
• ltLIgtAssorted plague ridden peasants (good for
• chucking at the enemy)!
• lt/OLgt

• Maid Elizabeth (for inspiration and support)!
• Sir Arthur (very good with his sword)!
• III. Sir Fanciful (and his enlisted mob)
• D. Guy the Forester (not bad with a longbow)!
• E. Assorted plague ridden peasants (good for
  chucking at the enemy)!

25
Lists unordered

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  "gt
• lt!-- Unordered list --gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Hyperlinks ulistlt/titlegt
• lt/headgt
• ltbodygt
• lth1gtSome useful siteslt/h1gt
• ltpgtltstronggtClick on the link to go to that
  page.lt/stronggtlt/pgt
• ltulgt
• ltligtlta href "http//www.kdnuggets.com"gtData
  mininglt/agtlt/ligt
• ltligtlta href "http//www.microsoft.com"gtMicrosoft
  lt/agtlt/ligt
• ltligtlta href "http//www.disney.com"gtDisneylt/agtlt/
  ligt
• ltligtlta href "http//www.google.com"gtGoogle -
  searchlt/agtlt/ligt
• ltligtlta href "http//www.altavista.com"gtAltavista
  - searchlt/agtlt/ligt
• ltligtlta href "http//www.sourceforge.com"gtFree
  code!lt/agtlt/ligt
• lt/ulgt

The entries in an unordered list must be
included between the ltulgt and lt/ulgt tags.
An entry in the list must be placed between the
ltligt and lt/ligt tags.
Each entry in the list is rendered on its own
line with a bullet before it.
26
Lists nested

• lt?xml version "1.0"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
  al.dtd"gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegtWeb Engineering - Nested and ordered
  listslt/titlegt
• lt/headgt
• ltbodygt
• lth1gtNested and ordered listslt/h1gt
• ltulgt
• ltligtUnordered Level 1 Element 1lt/ligt
• ltligtUnordered Level 1 Element 2
• ltulgt
• ltligtUnordered Level 2 Element 1lt/ligt
• ltligtUnordered Level 2 Element 2
• ltol type "I"gt
• ltligtOrdered Level 3 Element 1lt/ligt
• ltligtOrdered Level 3 Element 2lt/ligt
• lt/olgt

By inserting a list as an entry in another list,
lists can be nested.
Entries for an ordered list must be placed
between the ltolgt and lt/olgt tags.
27
Lists nested

• ltligtUnordered Level 2 Element 3lt/ligt
• ltligtUnordered Level 2 Element 4lt/ligt
• ltligtUnordered Level 2 Element 5lt/ligt
• ltol type "a"gt
• ltligtOrdered Level 3 Element 1lt/ligt
• ltligtOrdered Level 3 Element 2lt/ligt
• ltligtOrdered Level 3 Element 3lt/ligt
• lt/olgt
• lt/ligt
• lt/ulgt lt!-- Ends the first level nested list --gt
• lt/ligt
• ltligtUnordered Level 1 Element 3lt/ligt
• ltligtUnordered Level 1 Element 4lt/ligt
• ltligtUnordered Level 1 Element 5lt/ligt
• lth1gtLast ltemgtListlt/emgtlt/h1gt
• ltolgt
• ltligtElement 1lt/ligt
• ltligtElement 2lt/ligt
• ltligtElement 3lt/ligt

The type attribute of the ordered list element
allows you to select a sequence type to order
the list.
Text placed between the em tags will be
italicized.
28
Lists nested
Nested lists are indented underneath the main
list.
Some sequence types available to order lists are
roman numerals, letters and numbers.
29
Various

• TEXT
• Specifies the colour of the default text
• BGCOLOR
• Specifies the colour of the background window
• BACKGROUND
• Specifies a graphics image as a tiled
  background
• LINK
• Specifies the colour of HyperLinks
• VLINK
• Specifies the colour of visited HyperLinks
• ALINK
• Specifies the colour of a currently active
  HyperLink

30
Text formatting

• ltPREgtPreserves formatting of textlt/PREgt
• ltH1gtDoes not preserve formattinglt/H1gt

31
Text formatting

• ltLISTINGgtThis is Listing Textlt/LISTINGgt
• ltPLAINTEXTgt...lt/PLAINTEXTgt Not Netscape
• Bold Text ltBgt...lt/Bgt
• Italic Text ltIgt...lt/Igt
• Teletype text ltTTgt...lt/TTgt
• Underline ltUgt...lt/Ugt
• Strike Through ltSTRIKEgt...lt/STRIKEgt
• Big Print ltBIGgt...lt/BIGgt
• Small Print ltSMALLgt...lt/SMALLgt
• Subscript Text ltSUBgt...lt/SUBgt
• Superscript Text ltSUPgt...lt/SUPgt

32
Logical text elements

• Citation reference ltCITEgt...lt/CITEgt
• An example of Code ltCODEgt...lt/CODEgt
• Emphasis ltEMgt...lt/EMgt
• User typed text ltKBDgt...lt/KBDgt
• A sample sequence of literal characters
  ltSAMPgt...lt/SAMPgt
• Strong typographic emphasis
  ltSTRONGgt...lt/STRONGgt
• Indicates a variable name ltVARgt...lt/VARgt
• The Defining instance of a term ltDFNgt...lt/DFNgt

33
Logical text elements

• ltCITEgt...lt/CITEgt
• ltCODEgt...lt/CODEgt
• ltEMgt...lt/EMgt
• ltKBDgt...lt/KBDgt
• ltSAMPgt...lt/SAMPgt
• ltSTRONGgt...lt/STRONGgt
• ltVARgt...lt/VARgt
• ltDFNgt...lt/DFNgt

34
Colours

• ltBODY TEXTaquagt
• ltBODY TEXT00FF00gt
• ltFONT COLOR rrggbb colour name
  gttextlt/FONTgt

35
Special character symbols

• ltBLINKgt is a very special element! (Try not to
  use it..)
• ltH1gtTOP SECRET HOME PAGElt/H1gtltBLINKgtWARNINGlt/BLINK
  gt
• Only Authorised Personnel May Enter After This
  Point!
• ltBLINKgtWARNINGlt/BLINKgt
• Dingbat icons
• HTML provides a set of standardized dingbats for
  use in place of simple bullets or images. Their
  appearance may vary slightly on different
  browsers.
• http//www.wdvl.com/Vlib/Multimedia/Images_and_Ico
  ns.html
• archive audio binary.document clock
  compressed.document diskette mail
  telephone

36
Equations and maths

• SUPERSCRIPTS XltSUPgt2lt/SUPgt or
  X2
• SUBSCRIPTS X_I_
• SIMPLE BRACKETING ltBOXgt..lt/BOXgt .
• FUNCTIONS
• ltMATHgttan ltOFgt thetalt/MATHgt lt!tangent of
  an angle?
• Which represents the trigonometric expression
  tanØ
• GREEK LETTERS alpha omega
• RELATIONS lt (lt) gt (gt) equals ()
• Arrays
• ltMATHgt
• ltARRAYgt
• ltROWgtltITEMgta ltITEMgtb ltITEMgtc
• ltROWgtltITEMgt1 ltITEMgt2 ltITEMgt3
• lt/ARRAYgt
• lt/MATHgt

37
History

• Creation of language in conjunction with
  Berners-Lee's WWW program - Oct.-gtDec. 1990
• Specification for HTML released on the Internet -
  Summer, 1991
• Draft defining HTML released (Internet draft
  later expired) - June, 1993
• Initial document for 'HTML 2.0' released - April,
  1994
• Draft for HTML 2.0 cleaned up and released -
  July, 1994
• HTML 2.0 draft further refined with plans to
  release as an RFC - February, 1995
• HTML 2.0 (RFC 1866) approved as a proposed
  standard - September, 1995
• HTML 3.0 draft released (later expired) - March,
  1995
• HTML 3.2 draft released - May, 1996
• HTML experimental DTD 'Cougar' released - July,
  1996
• W3C recommendation for HTML 3.2 (Wilbur) -
  January, 1997
• HTML 4.0 draft (evolved from Cougar) released -
  July, 1997
• HTML 4.0 becomes W3C proposed recommendation -
  November, 1997
• HTML 4.0 becomes W3C recommendation - December,
  1997
• HTML 4.0 revised and certified W3C recommendation
  - April, 1998
• Draft released for 'Reformulating HTML in XML'
  (codename Voyager) - December, 1998
• XHTML 1.0 first working draft released - January,
  1999
• XHTML 1.0 becomes W3C Proposed Recommendation -
  August, December 1999
• XHTML 1.0 becomes W3C Recommendation - January,
  2000

38
Days of HTML4.0

• Strict HTML 4.0
• Most pure
• Anything deprecated or obsolete is never used
• Optimistic Many of its rules are ahead of the
  stability user agents, or browsers, offer
• Transitional, or loose HTML 4.0
• By combining aspects of HTML 3.2 with elements
  from the strict HTML 4.0 standard, a more
  realistic, usable version of the language emerges
• Frameset HTML 4.0
• This includes all the information within the
  transitional version combined with the newly
  adopted frame-based elements such as
• FRAME, FRAMESET, NOFRAMES, IFRAME

39
HTML4.0

• Goals of HTML 4.0
• Separate document structure from presentation and
  style
• sets aside elements used for presentation or
  style
• style sheets used instead
• Think carefully about access
• Use forethought when authoring code
• variety of platforms, physical impairments etc
• Make documents load more quickly via careful
  table design
• Elements to help tables render incrementally

40
HTML4.0

• Status of HTML 4.0 elements
• New elements
• FRAME, FRAMESET, NOFRAMES, IFRAME, NOSCRIPT,
  OBJECT, SPAN
• FRAME etc were always used, since
  frame-compliant browsers were developed (several
  years now!), but FINALLY this tag has entered
  into the standard
• Deprecated elements
• APPLET, BASEFONT, CENTER, FONT
• APPLET forces Netscape to adopt the OBJECT
  tag, which will ultimately provide better, more
  stable management of embedded objects in a web
  page
• Obsolete elements
• LISTING, PLAINTEXT, XMP
• ltPREgt preformatted text element recommended to
  replace these

41
HTML4.0

• Status of HTML 4.0 elements
• Deprecated elements
• FONT
• For now, the use of the FONT tag remains the only
  way to gain control over HTML-based attributes.
• But the reality is that as cascading style sheets
  become a real-world option for HTML authors,
  well be glad its gone
• CENTER
• The infamous center tag has been set aside for
  other alignment methods, especially within
  cascading style sheets.
• Another tag for alignment is the ltDIVgt tag along
  with the align attribute

42
HTML4.0

• Summing up the changes
• Style sheets
• Scripting
• Frames support
• Embedded objects
• Improved support for text alignment and handling
• Richer tables (usually with offerings that
  enhance accessibility)
• Forms enhancements (also offering a variety of
  information for accessibility purposes)