3rd Edition: Chapter 1

1
Extensible HyperText Markup Language(XHTML)Xing
quan (Hill) Zhuxqzhu_at_cse.fau.edu
2
XHTML

• What is a Markup Language?
• Why Extensible HTML?
• XHTML vs HTML
• XHTML Rules
• Basic XHTML Components
• Headers
• Links
• Special Characters Line Break
• Images
• Lists
• Tables
• Forms
• Framesets

3
XHTML Standard

• Standard (recommendation) developed by
• World Wide Web Consortium
• http//www.w3c.org
• Currently version 1.1
• Version 2 under review
• Vendors sometimes vary from standard

4
What is a Markup Language

• A language that has codes for indicating layout
  and styling (such as boldface, italics,
  paragraphs, placement of graphics, etc.) within a
  text file
• Best known markup language HTML
• What is the HyperText?
• A database system (1960)
• Objects can be creatively linked to each other
• Simple HTML example
• Other markup languages
• Tex (Latex) (example)
• SGML (Standard General ML)
• XML (Extensible Markup Language)

5
Why Extensible HTML?

• HTML is the ancestor of XHTML
• HTML 1.0, 2.0, 3.0, 3.2, 4.0, 4.01
• XHTML 1.0 is the reformulation of HTML 4.01
  (2000)
• HTML vs XHTML
• HTML lax syntax rules, much easier to write
• Huge number of HTML resources available
• Why?
• Lack consistency
• Hard to check HTML documents syntactic
  correctness.

6
An XHTML example file

• lt?xml version "1.0" encoding "utf-8"?gt
• lt!-- greet.html A trivial document --gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• ltheadgt lttitlegt Our first XHTML document
  lt/titlegt
• lt/headgt
• ltbodygt
• ltpgt
• Greetings from your Webmaster!
• lt/pgt
• lt/bodygt
• lt/htmlgt

7
W3C Validation Service

• Validate structure of a document
• http//validator.w3.org
• Can specify a
• url to validate
• Upload a file to validate

8
XHTML Format

• XHTML
• Plain text
• Free form
• Content
• Text
• Links
• Tags (Elements)
• Specify structure
• Bounded by ltgt
• Often enclose attribute values

9
XHTML Elements (Tags)

• Specify content characteristics
• Generally paired
• Bound a region
• Start with ltxxgt open tag
• End with lt/xxgt closing tag
• If tag is self-contained, use ltxx /gt

10
XHTML Attributes

• Specify alternative meanings of a tag
• Where
• Between tag name and its right-pointed bracket
• In specified keyword form
• Attribute Name Attribute value
• Attribute values must be delimited by double
  quotes

11
XHTML comments

• Enhance the readability of your XHTML files
• lt! xxxxx --gt
• Browsers simply ignore all the enclosed content.

12
Tips in writhing XHTML documents

• Comments
• Nested elements
• In case of wrong elements or attribute values

13
XHTML Rules

• Required elements in an XHTML file?
• doctype, html, head, title, and body
• Major differences with HTML
• Tag names must be in lowercase
• XHTML is an application of XML, which is case
  sensitive
• All XHTML elements must be closed
• Elements in pairs
• Self-contained elements
• XHTML elements must be properly nested
• A nested elements end tag must appear before the
  enclosing elements end tag.
• XHTML documents must be well-formed
• Nested in lthtmlgt
• Elements in pairs properly nested

14
XHTML

• What is a Markup Language?
• Why Extensible HTML?
• XHTML vs HTML
• XHTML Rules
• Basic XHTML Components
• Headers
• Links
• Text
• Special Characters Line Break
• Images
• Lists
• Tables
• Forms
• Framesets

15
XHTML ltheadgt

• No attribute goes with ltheadgt
• Nested tags
• lttitlegt
• ltmetagt
• Name, content
• http-equiv"REFRESH, Contentdelay address
  (redirect your webpage to address)
• CSS definition
• Script

16
XHTML ltbodygt

• Attributes
• bgcolor
• background
• text
• link
• alink
• vlink

17
Headers and Links

• Six levels of headers, h1 h 6
• Id
• Align (left, right, center, justify)
• Can we change each header? (font, color, etc.)
• ltagt element cause browser to load another
  object, a page or a link
• Href
• Link
• ID
• Link to an email mailto
• Directory
• Target
• _blank
• Title
• Why?

18
Text Format, Font, Color

• Format Elements
• ltpgt
• ltpregt
• ltblockquotegt
• ltdelgt ltstrikegt ltsubgt ltsupgt
• ltstronggt ltbgt ltemgt ltigt ltugt
• ltdivgt
• ltfontgt element
• size 1-7
• color red, 234567, rgb(23,45,67)
• face Arial, Times
• Other font related elements
• ltbiggt ltsmallgt
• How to control word space, line space?
• CSS

19
Other text related tags

• lthr gt horizontal line
• Align, size, width
• How can we control the color?
• CSS
• ltblinkgt (IE does not support)
• ltmarqueegt

20
Special Characters Line Breaks

• Special characters (Entities)
• Often used when character has special xhtml
  meaning or is not on keyboard
• Coded xx
• Examples lt gt nbsp amp fracl4 deg
  copy
• Line break forced by
• End of header
• Paragraph ltpgt
• Line break tag ltbrgt

21
Images

• Typical web images
• Jpeg
• Gif
• ltimggt Element
• Src (required)
• Alt (required)
• width, height, border
• align
• title
• vspace, hspace
• Using image as a link

22
Image Maps

• Design Certain areas of an image (hotspots) as
  links
• ltmap idpicturegt
• ltarea href1.html shaperect
  coords1,1, 200,100 altfau
• titleflorida atlantic
  university /gt
• ltarea href2.html shapepoly
  coords1,1, xxx, xxx, 200,100
• altfau CSE
  titleComputer Science Eng. /gt
• ltarea href3.html shapecircle
  coords100,100,20
• altfau ME
  titleMechanical Engineering /gt
• lt/mapgt
• ltimg srcfau.jpg altfau campus
  usemappicture /gt Example

23
Lists

• Ordered list
• ltolgt
• ltligt
• Start attribute
• Unordered list
• ltulgt
• ltligt
• Definition list
• ltdlgt
• ltdtgt definition term
• ltddgt definition description

24
List Cont.

• List-style-type
• Disc, circle, square, decimal, lower-roman,
  upper-roman, lower-alpha, upper-alpha, none.
• ltol style"list-style-type circle"gt
• ltli stylelist-style-type upper-romangt
• Nested lists

25
XHTML Rules

• Required elements in an XHTML file?
• doctype, html, head, title, and body
• Major differences with HTML
• Tag names must be in lowercase
• XHTML is an application of XML, which is case
  sensitive
• All XHTML elements must be closed
• Elements in pairs
• Self-contained elements
• XHTML elements must be properly nested
• A nested elements end tag must appear before the
  enclosing elements end tag.
• XHTML documents must be well-formed
• Nested in lthtmlgt
• Elements in pairs properly nested

26
Q1.

• Will XHTML replace HML?

27
Q2.

• The DOCTYPE declaration has no closing tag ?

28
Ques3. Is this a correct XHTML doc.?

• ltulgt ltligtCoffeelt/ligt ltligtTea lt/ligt
  ltulgt ltligtBlack tealt/ligt ltligtGreen
  tealt/ligt lt/ulgt ltligtMilklt/ligtlt/ulgt

29
Homework

• 1. (Due Sept. 8)
• 2. (Due Sept. 15)