The Web Warrior Guide to Web Design Technologies

1
The Web Warrior Guide to Web Design Technologies
Chapter 1 XHTML Part I
2
Objectives

• In this chapter, you will
• Learn about HTML and XHTML
• Work with XHTML DTDs
• Study elements and attributes
• Work with basic body elements
• Link your Web pages
• Validate your Web pages

3
Introduction to HTML

• Hypertext markup language (HTML) is a language
  used to design Web pages.
• HTML first became an Internet standard in 1993.
• Latest version of HTML is 4.01, released in 1999.
• HTML documents are composed of tags.
• The file extension for an HTML document is .html
  or .htm.

4
Introduction to HTML

• The unique address for an HTML document is called
  uniform resource locator (URL).
• Example of a URL www.course.com
• Web pages are displayed using a program called a
  Web browser.
• Examples of Web browsers Internet Explorer and
  Netscape Navigator.
• Web server the place where Web pages are located.

5
Introduction to HTML

• Web browsers request pages from the Web server.
• Assembling and formatting HTML documents is
  called parsing or rendering.
• HTML documents contain tags which are enclosed in
  brackets.
• Examples of HTML tags ltbgtThis will create bold
  textlt/bgt
• The opening tag is ltbgt and the closing tag is lt/bgt

6
Introduction to HTML

• HTML is not case-sensitive. ltBgt and ltbgt are the
  same tag.
• HTML documents begin with lthtmlgt and end with
  lt/htmlgt.
• Some HTML tags do not require a closing tag, like
  lthrgt (which represents a horizontal rule).
• HTML tags are divided into structural tags and
  formatting tags.

7
Introduction to HTML
Common structural and formatting tags
ltbodygt lt/bodygt Encloses the body of the HTML document
ltbrgt Inserts a line break
lthtmlgt lt/htmlgt Required tags that start and end an HTML document
ltpgt lt/pgt Identifies enclosed text as a paragraph
8
Introduction to HTML

• The general form of an HTML document is as
  follows
• lthtmlgt
• ltheadgt
• lttitlegttitle goes herelt/titlegt
• lt/headgt
• ltbodygt
• The body of the document goes here
• lt/bodygt
• lt/htmlgt

9
Introduction to HTML

• Attributes are used to configure HTML tags.
• The src in the following image tag is an example
  of an attribute
• ltimg srcmyhouse.gifgt
• To insert spaces in an HTML document, use the ltpgt
  and ltbrgt tags.
• 4.01 is the last version of HTML because it will
  be replaced by XHTML (extensible hypertext markup
  language).

10
XHTML Document Type Definition (DTDs)

• A well formed document is a document that
  conforms to the rules and requirements of XHTML.
• lt!DOCTYPEgt determines the XHTML DTD with which
  the document complies.
• DTD (Document Type Definition) defines the tags
  and attributes that can be used in a document.

11
XHTML Document Type Definition (DTDs)

• Three types of DTDs can be used with XHTML
  documents Transitional, Strict, and Frameset.
• Deprecated elements are elements that are
  considered obsolete and they will be eventually
  removed from a language.
• Examples of deprecated HTML elements ltappletgt,
  ltbasefontgt, ltcentergt, ltdirgt, ltmenugt

12
XHTML Document Type Definition (DTDs)

• The World Wide Web Consortium (W3C) oversees the
  development of Web technology standards.
• A Transitional DTD allows the use of deprecated
  style tags in HTML documents
• lt!DOCTYPE html PUBLIC
• -//W3C//DTD XHTML 1.0 Transitional//EN

13
XHTML Document Type Definition (DTDs)

• http//www/w3.org/TR/xhtml1/DTD/xhtml1-transitio
  nal.dtdgt
• The Frameset DTD is identical to the Transitional
  DTD, except that it includes the ltframesetgt and
  ltframegt elements
• lt!DOCTYPE html PUBLIC

14
XHTML Document Type Definition (DTDs)

• -//W3C//DTD XHTML 1.0 Frameset//EN
• http//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.
  dtdgt
• The Strict DTD eliminates deprecated elements in
  the Transitional DTD and Frameset DTD
• lt!DOCTYPE html PUBLIC

15
XHTML Document Type Definition (DTDs)

• -//W3C//DTD XHTML 1.0 Strict//EN
• http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt
  dgt

16
XHTML Elements and Attributes

• An element is the tag pair and the information it
  contains.
• Elements that do not include a closing tag are
  called empty elements.
• Content is the information contained within an
  elements opening and closing tags.

17
XHTML Elements and Attributes

• There are two basic types of elements
  block-level and inline.
• Block-level elements give the Web page its
  structure.
• Examples of block-level elements ltpgt, lth1gt,
  lth2gt, and lth3gt

18
XHTML Elements and Attributes

• Inline elements used to describe the text that
  appears on a Web page.
• Example of inline elements ltbgt and ltbrgt.
• Standard attributes are attributes that are
  available to almost every element.
• Examples of standard attributes class, dir,
  xmllang, and style.

19
XHTML Elements and Attributes

• lang and xmllang designate the language of the
  elements.
• dir is used with lang. Its values are ltr (left
  to right) and rtl (right to left).
• title provides descriptive text for an element.

20
Basic Body Elements

• Headings
• Paragraphs and line breaks
• Horizontal rule
• Headings
• They are block-level elements that are used for
  emphasizing a documents headings and subheadings.

21
Basic Body Elements

• There are six heading-level elements lth1gt
  through lth6gt. lth1gt is the highest level of
  importance, and lth6gt is the lowest level of
  importance.
• Paragraphs and Line Breaks
• ltpgt is used to add a new paragraph.
• ltbr /gt is used to add a line break.

22
Basic Body Elements

• Most Web browsers ignore multiple, contiguous
  spaces and carriage returns.
• Horizontal Rules
• The horizontal rule element, lthrgt, draws a
  horizontal rule on a Web page that acts as a
  section divider.

23
Linking Web Pages

• Hypertext links are text or graphics that the
  user can click to open files or to navigate to
  other documents on the Web.
• Anchor is a text or image used to represent a
  link on a Web page.
• The ltagt element is used to create basic hypertext
  links
• lta hrefAWebPage.htmlgt A Web Page lt/agt

24
Linking Web Pages

• href is the hypertext reference.
• Relative URL specifies the location of a file
  according to the location of the currently loaded
  Web page.
• Absolute URL refers to a specific drive and
  directory or to the full Web address of a Web
  page.

25
Linking Web Pages

• The ltagt element can be used to create a link to
  an external document or to a bookmark inside the
  current document.
• Any element that includes an id attribute can be
  the target of a link.
• lth3 idcppgt C, the languagelt/h3gt

26
Linking Web Pages

• To create a link to a bookmark, an id value
  should be assigned to an href attribute.
• lta hrefcppgtRead about Clt/agt

27
Validating Web Pages

• A validating parser is a program that checks
  whether an XHTML document is well formed and
  whether the document conforms to a specific DTD.
• A validator is available on
• http//validator.w3.org
• English and many Western languages use the
  ISO-8859-1 character set.

28
Summary

• HTML is a language used to design Web pages for
  the World Wide Web.
• HTML 4.01 is the last HTML version. HTML will be
  replaced by XHTML.
• HTML is composed of tags and text that is to be
  displayed on a Web page.
• Web browser displays a Web page provided by the
  Web server.

29
Summary

• lt!DOCTYPEgt determines the XHTML DTD with which
  the document complies.
• There are two types of elements block-level and
  inline.
• Hypertext links are used to navigate to other
  documents on the Web, or to open files.
• A relative URL specifies the location of a file
  according to the location of the currently loaded
  Web page.

30
Summary

• An absolute URL refers to a specific drive and
  directory or to the full Web address of a Web
  page.
• Use a validating parser to ensure that the XHTML
  document is well formed.