Introduction to XHTML

1
Introduction to XHTML
2
Introduction

• Web developers view web pages as documents that
  must be created according to authoring and
  development guidelines
• Web developers use HTML or XHTML to write code of
  a web page
• Web browsers have a built-in interpreter to
  render the results of the code in its window

3
What is the World Wide Web

• The World Wide Web (WWW) is most often called the
  Web.
• The Web is a network of computers all over the
  world.
• All the computers in the Web can communicate with
  each other.
• All the computers use a communication standard
  called HTTP.

4
How does the  WWW work?

• Web information is stored in documents called Web
  pages. 
• Web pages are files stored on computers called
  Web servers.
• Computers reading the Web pages are called Web
  clients.
• Web clients view the pages with a program called
  a Web browser.
• Popular browsers are Internet Explorer and
  Mozilla Firefox Chrome.

5
Web Browsers and Web Servers

• The Web browser makes a request to the web server
  
• The server which is running an HTTP server that
  is listening for requests, receives the request
  and locates the document.
• The server then sends back the content of the
  requested page to the client.
• The browser receives the information from the
  server and displays the page in the browser
  window. The transaction is now complete.

6
How to Fetch Web Pages

• A browser fetches a Web page from a server by a
  request.
• A request is a standard HTTP request containing a
  page address.
• A page address looks like this
  http//www.ibm.com/index.htm.

7
Uniform Resource Locator (URL)

• All Web pages are addressed with URLs
• The URL specifies
• A server name
• A directory path
• A filename
• URLs are part of the HTTP (Hypertext Transfer
  Protocol) communications protocol.

8
Jargon

• URL Uniform Resource Locator
• W3C World Wide Web Consortium
• HTML Hyper-Text Markup Language
• DOCTYPE Document Type Declaration
• XHTML Extensible Hyper-Text Markup Language
• CSS Cascading Style Sheets

9
Web Page Displays

• All browsers are designed to display .html and
  .htm files
• Browsers have to rework their page displays
  whenever a browser window is resized
• Web pages can look a little different on
  different computers
• Web page authors cannot completely control their
  page displays

10
How does the browser display the pages?

• All Web pages contain instructions for display
• The browser displays the page by reading these
  instructions.
• The most common display instructions are called
  XHTML tags.
• XHTML tags look like this lth1gtThis is a
  headinglt/h1gt.

11
The World Wide Web

• Definitions
• HTML
• The HyperText Markup Language
• The language used to structure text-based
  information in a document
• by denoting certain text as headings, paragraphs,
  lists, etc and to supplement that text with
  interactive forms, embedded images, and other
  multimedia objects
• XHTML
• The eXtensible HyperText Markup Language
• XHTML consists of all the elements in HTML 4.01
  combined with the syntax of XML.
• Allows users to define their own tags for
  defining structure, layout, etc.

12
Content of Web Pages

• A web site may contain a combination of 13
  standard elements
• Text Sound
• Lists Video
• Hyperlinks Tables
• Colour Layers
• Graphics Frames
• Images Forms
• Image Maps

13
Content of Web Pages

• The content of a web site can be classified as
• Static content does not change regularly e.g.
  personal and professional web sites
• Dynamic content changes regularly e.g.,
  newspaper web sites, weather report sites

14
Authoring of Web Pages

• After a web page layout is designed, one needs to
  use HTML/XHTML code to implement the design
• Introduction to XHTML
• Syntax
• Document Tags
• Authoring tools
• Text formatting
• Special characters
• Hyperlinks
• Lists
• Meta Data
• Colours
• Audio Video

15
XHTML Syntax

• XHTML uses tags that are enclosed in brackets lt gt
• XHTML content is contained between tags
• Tags and content form an XHTML element
• Generic element form ltstart-taggt content
  ltend-taggt
• Start and end tags have the same name, end tag
  has a / before it ltbgtThis is BOLDlt/bgt
• XHTML tags can be nested according to the first
  open, last closed rule ltbgtltigtbold and
  italiclt/igtlt/bgt

16
XHTML Syntax

• XHTML rules
• Tags must be closed
• XHTML is case sensitive
• Use lower case tags and attribute names, e.g.
  width100
• All attribute values must be double quoted, e.g.
  100
• Tags must not overlap (i.e., during nesting)
• Comments can be used
• lt!-- This text is a comment --gt
• Do not use obsolete (deprecated) tags
• Browsers ignore misspelled tags (and many other
  things!)

17
The eXtensible Hypertext Markup Language (XHTML)

• XHTML formatting commands control Web page
  displays
• All XHTML formatting is achieved with XHTML
  elements
• All XHTML elements are based on XHTML tags and
  tag-pairs
• XHTML files can be created with text editors

18
Elements of a Page

• Doctype
• Head
• Title
• Body
• HTML

19
Tags

• DOCTYPE
• ltHTMLgt
• ltHEADgt
• ltTITLEgt stufflt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgtstuff that people seelt/pgt
• lt/BODYgt
• lt/HTMLgt

20
DOCTYPE Avoid Quirks!

• Versions
• Strict lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
  1.0 Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/x
  html1-strict.dtd"gt
• Transitional lt!DOCTYPE html PUBLIC "-//W3C//DTD
  XHTML 1.0 Transitional//EN" http//www.w3.org/TR/x
  html1/DTD/xhtml1-transitional.dtdgt

21
HEAD

• ltTITLEgt lt/TITLEgt
• ltMETAgt lt/METAgt
• Language, Encoding, Keywords
• Self-closing
• ltmeta Contentgt lt/metagt
• ltmeta Content /gt
• Page Properties

22
A HTML Tag Template

• lthtmlgt
• ltheadgt
• lttitlegt
• (insert text for the browsers title bar
  here)
• lt/titlegt
• lt/headgt
• ltbodygt
• (insert visible Web page elements here)
• lt/bodygt
• lt/htmlgt

23
Who is making the Web standards?

• The Web standards ( rule-making body )of the Web
  is the W3C.
• It is not made up by Mozilla or Microsoft.
• W3C stands for the World Wide Web Consortium.
• W3C puts together specifications for Web
  standards.
• The most essential Web standards are XHTML, CSS
  and XML.
• The latest HTML standard is XHTML 2.0

24
Markup Languages

• SGML stands for Standard Generalized Markup
  Language and was developed in the 1960s as the
  first standardized markup language
• HTML was developed in the early 1990s as a
  lightweight application of SGML for transporting
  documents over HTTP
• HTML documents were portable among different
  operating systems and computer applications
• XML was developed to address the limitations of
  HTML
• XML is a meta-language, or a set of rules, for
  building other languages
• XML and HTML are both SGLM applications
• XHTML is the successor of HTML

25
Origins of Markup Languages
26
Overview of XHTML

• The first version of XHTML 1.0, was released in
  2000
• W3C description of XHTML
• XHTML 1.0 reformulates HTML as an XML
  application. This makes it easier to process and
  easier to maintain. XHTML 1.0 borrows elements
  and attributes from W3C's earlier work on HTML 4,
  and can be interpreted by existing browsers, by
  following a few simple guidelines. This allows
  you to start using XHTML now!
• XHTML is extensible meaning that its element set
  is not finite, like that of HTML. Additional
  elements or other XML-based languages can be
  integrated with XHTML
• XHTML consists of the element set of HTML
  reformulated to adhere to the syntax rules of XML
• XHTML is compatible with existing web browser
  technology and will be compatible with future
  XML-based clients

27
Building XHTML Documents

• Elements consist of a start tag, content and an
  end tag
• lth1gt Introduction to XHTMLlt/h1gt
• Empty elements are used to describe elements that
  do not have any content ltbr /gt
• Attributes are used to describe elements and are
  placed inside the open tag of an element
• ltimg srcpicture.jpg alt This is my picture
  /gt
• alt attribute specifies an alternate text for an
  image
• Comments are used to notate the document, but are
  not processed by parsers
• lt!-- This is a comment --gt

Content
Start Tag
End Tag
28
Three Flavors of XHTML 1.0

• XHTML 1.0 Transitional
• This DTD contains all HTML elements and
  attributes, INCLUDING presentational and
  deprecated elements (like font). Framesets are
  not allowed. The markup must also be written as
  well-formed XML.lt!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
  al.dtd"gt
• XHTML 1.0 Strict
• This DTD contains all HTML elements and
  attributes, but does NOT INCLUDE presentational
  or deprecated elements (like font). Framesets are
  not allowed. The markup must also be written as
  well-formed XML.
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• XHTML 1.0 Frameset
• This DTD is equal to XHTML 1.0 Transitional, but
  allows the use of frameset content.
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"gt

29
Document Tags

• The tags that make up the framework of a typical
  XHTML document include the following
• Document type definition (DTD) tag DOCTYPE
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
  dtd"gt
• Describes (to web browsers) what type/version of
  (x)html is used
• Specifies rules that apply to the markup of
  documents
• Used for document syntax validation (e.g. strict)
  and for web browser to process document in proper
  parsing mode (impacts on consistency and speed
  of display)
• An XHTML document is validated against a Document
  Type Definition.
• Top-level tag, generally lthtmlgt
• Tag indicates the beginning and /end of an XHTML
  document

30
Document Tags - Header

• Header section, delimited by ltheadgt tags
• Provides extra information about the document
• Serves as a container for styles, global scripts,
  etc.
• The main tags used in this section are
• lttitlegt - specifies the document title
• ltmetagt - provides information to search engines
• ltstylegt - declares general local styles for the
  document
• ltscriptgt - declares any scripting information

31
Meta Tags

• Web pages are designed for surfers and surf
  engines
• The ltmetagt tag increases the chances of page
  indexing
• Meta data refers to data about XHTML document
  rather than the document content
• Browsers do not render meta data
• Search engines use it for indexing and ranking
  the page hits in a given search
• Some attributes of this tag are name, content,
  http-equiv, etc.

32
Meta Tags

• Most often the meta element is used to provide
  information that is relevant to browsers or
  search engines like describing the content of
  your document.
• ltmeta namekeywords contentopen, source, PHP,
  programming, code /gt
• When a search engine indexes the page, it
  includes the extra information -gt open, source,
  etc.
• It provides these keywords to search agents
  requesting them

33
Amazons Meta Tags

• ltmeta name"description" content"Low prices on
  digital cameras, MP3, LCD TVs, books, music,
  DVDs, video games, software, home garden and
  much, much more. Free delivery on orders over
  15." /gt
• ltmeta name"keywords" content"digital camera,
  LCD TV, books, DVD, low prices, video games, pc
  games, software, electronics, home, garden,
  video, amazon" /gt

34
META

• Specify information about a document
• Attribute name
• Identifies the type of meta element
• keywords ( name keywords )
• Provides search engines with a list of words that
  describe a page
• description ( name description )
• Provides a description of a site
• Attribute content
• Provides the information search engine use to
  catalog pages

35
Sample XHTML Document Structure

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
  dtd"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgt New Document lt/TITLEgt
• ltMETA NAME"Author" CONTENT""gt
• ltMETA NAME"Keywords" CONTENT""gt
• ltMETA NAME"Description" CONTENT""gt
• lt/HEADgt
• ltBODYgt
• webpage content goes here!
• lt/BODYgt
• lt/HTMLgt

36

37
(No Transcript)
38
Minimal XHTML Document

• lt!DOCTYPE .gtlthtmlgt
• ltheadgt .. lt/headgt
• ltbodygt
• ltpgt
• .
• lt/pgt lt/bodygtlt/htmlgt

39
XHTML Document Example

• lt?xml version1.0?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
  itional.dtd"gt
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• ltheadgt
• lttitlegt Introduction to XHTMLlt/titlegt
• lt/headgt
• ltbodygt
• ltstronggt Course Name lt/stronggt
  Introduction to XHTML ltbr /gt
• ltstronggt Course Number lt/stronggt CS 112
  ltbr /gt
• ltstronggt Instructor lt/stronggt T. Perdue
  ltbr /gt
• ltstronggt Meeting Time lt/stronggt
  Wednesday, 530pm730pm ltbr /gt
• ltp /gt
• ltstronggt Course Description lt/stronggt This
  course covers the basics
• of how to write XHTML Web documents.
• ltp /gt
• ltstronggt Prerequsites lt/stronggt
• ltulgt
• ltligt CS 101Introduction to Computers
  lt/ligt

40
XHTML Document Example
41
Using TextPad
TextPad is an editor that allows you to type
text. Can be used to create web pages
View in Web browser
file name
42
View in browser
43
Validating your pages

• XHTML shouldnt contain any deprecated (old and
  out of date) tags.
• Needs to be well formed (see slide 25)
• Needs to reference a DTD (DOCTYPE)(Document Type
  Definition)
• Prefers that character encoding is declared (for
  transitional is required for strict)
• Validate documents online at the W3Cs Validator
  website http//validator.w3.org

44
Validating your pages

• http//validator.w3.org

Choose File Upload
Browse to find file
Then click here
Get this screen if code is valid
45
Validating XHTML Documents

• Valid documents must be well-formed and adhere to
  the rules of a DTD
• XHTML Transitional
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
  itional.dtd"gt
• XHTML Frameset
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-frame
  set.dtd"gt
• XHTML Strict
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt

46
Well-Formed XHTML Documents

1. XHTML documents must contain the root element
   lthtmlgt
2. All elements must have a start and end tag, or
   must be an empty element
3. Elements must be nested properly
4. All attributes must have a value
5. Attributes must be placed in the start tag
6. Element names are case sensitive

47
Class Activity 1

• Type the following xhtml code in Text pad,
  validate it and then view it in a browser
• lthtmlgt ltheadgt
• lttitlegtThe First Page in these noteslt/titlegt
• lt/headgt
• ltbodygt lth1gtYour text goes here or possibly
  imageslt/h1gt
• ltpgtltstronggt Or it could go herelt/stronggtlt/pgt
• lt/bodygt
• lt/htmlgt

48
Class Activity 1

• Now edit the code to look like this and validate
  it and then view in a browser
• lt?xml version1.0?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-tran
  sitional.dtd"gt
• lthtml xmlnshttp//www.w3.org/1999/xhtml gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetISO-8859-1 /gt
• lttitlegtThe First Page in these noteslt/titlegt
• lt/headgt
• ltbodygt lth1gtYour text goes here or possibly
  imageslt/h1gt
• ltpgtltstronggt Or it could go herelt/stronggtlt/pgt
• lt/bodygt
• lt/htmlgt

49

• XHTML - Basic Formatting

50
XHTML Tags Attributes

• The following slides do not contain a complete
  list of available tags and attributes for XHTML
• Refer to the web sitehttp//www.w3schools.com/xht
  ml/default.asp
• To access a full list of the standards associated
  with XHTML

51
Structure of XHTML Documents

• Documents consist of three parts
• Document Prolog
• Header
• Body
• 1 lt?xml version1.0?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt
• 3 lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• 4 ltheadgt
• 5 lttitlegtStrict XHTML Documentlt/titlegt
• 6 lt/headgt
• 7 ltbodygt
• 8 lt!-- Body of document goes here --gt
• 9 lt/bodygt
• 10 lt/htmlgt

1 lt?xml version1.0?gt 2 lt!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 3 lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
4 ltheadgt 5 lttitlegtStrict XHTML
Documentlt/titlegt 6 lt/headgt 7 ltbodygt 8
lt!-- Body of document goes here --gt 9
lt/bodygt 10 lt/htmlgt
Root Element
52
Document Framework Elements

• The lthtmlgt element
• This is the root element for an XHTML document
  and must be present in every XHTML document
• The header and body elements are contained within
  the root lthtmlgt element
• Attributes xmlnshttp//www.w3.org/1999/xhtml
  (Declares a namespace for custom tags in an HTML
  document.)
• The ltheadgt element
• Contains header elements that contain data used
  primarily by programs such as search engines
• Elements that can be contained within the ltheadgt
  element
• lttitlegt - Title of the document
• ltbasegt - Base URL of the document
• ltlinkgt - Defines document relationship to other
  documents
• ltmetagt - Contains information about document such
  as keywords, author information and content
  type
• ltscriptgt - Defines link to scripts used in the
  document
• ltstylegt - Defines links to style sheets used in
  the document

53
Document Framework Elements (cont.)

• The ltbodygt element
• This element encompasses the content of the
  document
• Style attributes available with XHTML
  Transitional and Frameset
• bgcolor sets the background color for the
  document
• text sets the color for text in the document
• link sets the color for hyperlinks
• vlink sets the color for hyperlinks that have
  been clicked on
• alink sets the color for active hyperlink
• NOTE Formatting attributes not included in the
  XHTML Strict 1.0 specification and will not be
  included in future versions of XHTML. The
  formatting styles provided by these attributes
  are being replaced by style sheet properties.

54
Basic Formatting Elements

• Block Level Elements
• Used to describe blocks of content and to label
  the main content headings
• Character Level Elements
• Presentational Elements Used to define how text
  should be displayed
• Logical Elements Used to define the meaning of
  the text style

55
Block Level Elements

• ltpgtlt/pgt - Paragraph element
• ltpgt This is a paragraph lt/pgt
• ltbr /gt - Line break (empty element)
• This is a line break ltbr /gt
• lth1gtlt/h1gt to lth6gtlt/h6gt - Heading elements
• lth1gtThis is the largest headinglt/h1gt
• lth6gtThis is the smallest headinglt/h6gt
• lthr /gt - Horizontal rule (empty element)
• This is a horizontal rule lthr /gt
• ltdivgtlt/divgt - Section divider
• ltdivgtThis is a section dividerlt/divgt

56
Block Level Elements XHTML Code

• lt?xml version1.0?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• ltheadgt
• lttitlegtXHTML Block-level Elementslt/titlegt
• lt/headgt
• ltbodygt
• ltpgt This is a paragraph about African Gray
  parrots. The African Gray is
• one of the most popular pet birds of
  the parrot family. It is known
• for its intellegence and is one of the
  best talkers of all domestic
• birds. This parrot is native to Africa
  and can live to be almost 70
• years old.lt/pgt
• ltpgt This is also a paragraph about African
  Gray parrots. Here is some
• additional information about the
  African Gray parrot separated by
• line breaks (break here) ltbr /gtThe
  African Gray parrot is about 15
• inches long and (break here) ltbr /gtHas
  a wing span of about 20
• inches.lt/pgt
• lthr /gt

57
Block Level Elements Web Browser
58
Presentational Formatting Elements

• ltbgtlt/bgt - Bold font style
• ltbgtThis text is boldlt/bgt
• ltbiggtlt/biggt - Increases the current font size
• ltbiggtThis text is larger than the current
  fontltbiggt
• ltigtlt/igt - Italic font style
• ltigtThis text is in italic fontlt/igt
• ltsmallgtlt/smallgt - Decreases the current font
  size
• ltsmallgtThis text is smaller than the current
  fontlt/smallgt
• ltsubgtlt/subgt - Subscript text
• ltsubgtThis text is subscriptlt/subgt
• ltsupgtlt/supgt - Superscripted text
• ltsupgtThis text is superscriptlt/supgt

59
Presentational Formatting Elements XHTML Code

• lt?xml version1.0?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• ltheadgt
• lttitlegtXHTML Presentational Text Formatting
  Elementslt/titlegt
• lt/headgt
• ltbodygt
• ltpgt
• This text is formatted in ltbgtboldlt/bgt
• lt/pgt
• ltpgt
• This text is formatted in ltigtitalicslt/igt
• lt/pgt
• ltpgt
• See how ltbiggtthe big elementlt/biggt
  increases the current font size
• and how ltsmallgtthe small
  elementlt/smallgtdecreases it.
• lt/pgt
• ltpgt

60
Presentational Formatting Elements Web browser
61
Presentation Controls

• All tags have associated attributes but many
  attributes ( tags) have been deprecated with the
  move from HTML to XHTML
• XHTML uses Cascading Style Sheets (CSS) to format
  the content rather that embedding the formatting
  code within the XHTML code(these will be covered
  later in the course)
• Transitional XHTML still supports these
  attributes and they can be used for the first few
  tutorials until CSS has been covered.
• The background colour can be set with the ltbodygt
  tag (deprecated in XHTML) ltbody bgcolor
  FFFF00gt (sets the colour to yellow)
• Font attributes can be set with ltfont color
  0066CC face Timesgt(Both the tag and the
  attributes have been deprecated)
• Text can also be aligned (deprecated) either with
  ltpgtorlth1gt etcltp align centergt or lth3 align
  rightgt

62
Logical Formatting Elements

• ltcitegtlt/citegt - Formats citation text
• ltcitegtThis text is boldlt/citegt
• ltcodegtlt/codegt - Formats computer code text
• ltcodegtThis is computer code textlt/codegt
• ltemgtlt/emgt - Emphasis formatting in most
  browsers, this is italic text
• ltemgtThis is emphasis text - italicslt/emgt
• ltstronggtlt/stronggt - Emphasis formatting in
  most browsers, bold text
• ltstronggtThis is emphasis text - boldlt/stronggt

63
Logical Formatting Elements- XHTML Code

• lt?xml version1.0?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• ltheadgt
• lttitlegtXHTML Logical Text Formatting
  Elementslt/titlegt
• lt/headgt
• ltbodygt
• ltpgt
• Following is a citation ltbr /gt
• ltcitegt
• Four score and seven years ago, our fathers
  brought forth upon this continent a new nation
• conceived in liberty, and dedicated to the
  proposition that all men are created equal.
• lt/citegt
• lt/pgt
• ltpgt
• Following is a block of code ltbr /gt
• ltcodegt
• while (x lt 10) ltbr /gt

64
Logical Formatting Elements- Web browser
65

• XHTML Lists

66
XHTML Lists
List Type Element Item Element
Ordered List ltolgtlt/olgt ltligtlt/ligt
Unordered List ltulgtlt/ulgt ltligtlt/ligt
Definition List ltdlgtlt/dlgt ltdtgtlt/dtgt ltddgtlt/ddgt
67
Ordered list - code
68
Ordered list web browser
69
Unordered list - code
70
Unordered list web browser
71
XHML Lists Nesting Lists

• A nested list is a list of items which is
  contained within another list
• Lists can be nested any number of times
• List types can be mixed when nesting. For
  example, an ordered list of items can be nested
  within an unordered list
• The open and close tags of the nested list must
  be completely contained within one item of the
  outer list

72
Nested list - code
73
Nested list web browser
74
Class Activity 2

• Create the following web page using Textpad,
  validate your code and then view in a browser.

heading 1
heading 2
paragraph
line break
horizontal rule
75
Class Activity 2

• Create the following web page using Textpad,
  validate your code and then view in a browser.

heading 1
Heading 2
ordered list
unordered list
76

• XHTML Tables

77
XHTML Tables

• XHTML tables are sets of elements used to format
  content, or even an entire document, into rows
  and columns
• Tables can contain any type of content, including
  text, links, images, and multimedia
• Tables in XHTML work much the way they do in a
  spreadsheet or word processing application and
  resemble a grid
• Tables can be used to format blocks of content or
  they can also be used to providing formatting for
  an entire document

78
Table Elements

• lttablegt - Encloses the rest of the table
  elements
• lttrgt - Table Row Used to designate the
  beginning and ending of a row of data
• ltthgt - Table Heading Used to label the heading
  cells in a table row
• lttdgt - Table Data Used to label data cells in a
  table row
• ltcaptiongt - Optional element. Used to describe
  the data in the table.

79
Table- code
80
Table- web browser
This output isnt very easy to read. It would
be easier to read if it had a border and the
columns were wider. To vary the output from the
default you need to set attributes
81
lttablegt Common Element Attributes

• Name Description and Values
• width Sets the width of the table.
• Values Percentage or pixels
• border Sets the width of the border around the
  table. Values A value of 0 makes the border
  invisible. An integer value greater than 0 will
  result in a border of that number of pixels.
• cellpadding Sets the amount of space between
  the border of the table cell and the data
  contained in the cell.
• Values Percentage or pixels
• cellspacing Sets the amount of space between
  cells.
• Values Percentage or pixels

82
Table code with attributes
border width attribute set
Attributes have a name and a value the value is
written in double quotes in lowercase
83
Table web browser
84
lttdgt and ltthgt Element Attributes

• Name Description and Values
• align Horizontal alignment of data in a cell
• Values left, center, right, justified
• valign Vertical alignment of data in a cell
• Values top, middle, bottom
• rowspan Number of rows a cell span
• Values integer greater than 1 and less than or
  equal to the total number of rows in the table
• colspan Number of columns a cell span
• Values integer greater than 1 and less than or
  equal to the total number of columns in the table
• abbr Used for an abbreviated version of the
  content of the cell
• axis Used to assign a cell to a category group
• headers List of cells that provide header
  information for the current cell based on the
  values of the id

85
lttrgt Element Attributes

• Name Description and Values
• align Horizontal alignment of data in all cells
  in a row
• Values left, center, right, justified
• valign Vertical alignment of data in all cells in
  a row
• Values top, middle, bottom

86
Class Activity 3

• Create the following web page using Textpad,
  validate your code and then view in a browser.

Now modify your code so the web page looks like
this
87
Class Activity 3

• Create the following web page using Textpad,
  validate your code and then view in a browser.

88
Class Activity 3

• Create the following web page using Textpad,
  validate your code and then view in a browser.

89

• XHTML Images

90
Image File Formats

• Three primary formats for Web images
• GIF Graphics Interchange Format
• The GIF format supports 256 colors and is a good
  format for small non-photographic images like
  icons and buttons
• JPEG - Joint Photographic Experts Group
• JPEG is a compression technique that is used to
  reduce large file sizes for high quality images,
  like photographs
• PNG - Portable Network Graphics
• PNG was originally developed to replace the GIF
  format. The biggest difference between PNG and
  GIF is that PNG supports more than 256 colors
• The next slide will demonstrate the differences
  in image quality and file sizes for these 3
  formats. Notice that the GIF file is much more
  grainy than the JPEG and PNG files. This is due
  to the restriction to only 256 colors.

91
Image File Formats Example
Original file Windows Bitmap file Stage.bmp
File Size 351k
GIF Format Stage.gif File size 13k
PNG Format Stage.png File size 164k
JPEG Format Stage.jpg File size 28k
92
The ltimggt element

• The ltimggt element is an empty element
• The two required attributes are
• src Defines the path to the image file - can be
  an absolute or relative path
• alt Defines alternate text for the image file
  that will display in place of the image if the
  client can not display images
• ltimg src"myimage.gif" alt"Alternate text" /gt

93
Image- code
This code assumes that an image named forest.jpg
is stored in the same directory as the html file
94
Image- Web browser
95
File organisation

• The previous example assumes the image file is in
  the same folder as html file
• But web sites can get complicated and they are
  much easier to manage if your files are organised
  into folders
• Eg
• if your images are in a separate folder - then
  the path would look like this in the previous
  exampleltimg src../images/forest.jpg
  alttrees /gt

96
Class Activity 4
Download the images from online

• Create the following web page using Textpad,
  validate your code and then view in a browser.

mountains.png
beach.jpg
97
Class Activity 4- Challenge

• Create the following web page using Textpad,
  validate your code and then view in a browser.

Hint Use a table without borders and investigate
the attribute colspan for the heading
98

• XHTML - Links

99
Link Types

• Link to other pages within site
• Link to other sites
• Link to a named place within the same page
• Link to create an email message.

100
Creating XHTML Links

• The anchor element - ltagt
• Requires the user to perform an action in order
  to activate the link. Usually this is clicking
  on the linked text or image
• The href attribute defines the file to be linked
  to
• lta hrefhttp//chughes.com/index.htmlgtThis is a
  linklt/agt

101
Creating XHTML Links

• Relative vs. Absolute URLs
• Relative links are used to link to documents that
  reside on the same Web server, so the protocol
  and domain name reference can be omitted from the
  URL
• lta hrefnewpage.htmlgtClick Herelt/agt
• Absolute links are used to link to documents that
  reside on different Web servers and must contain
  the complete URL
• lta hrefhttp//chughes.com/newpage.htmlgtClick
  Herelt/agt

102
Linking With the ltimggt Element

• To use the ltimggt element as a link
• Embed the ltimggt element within an ltagt element
• lta hrefnewpage.htmlgtltimg srcmyimage.gif
  altClick on this image /gtlt/agt
• By default, web browsers place a blue border
  around the image to identify it as a clickable
  object
• To remove the blue border around the image, use a
  style definition. This is usually done in a
  cascading style sheet.(CSS) This will be covered
  later in the course.

103
XHTML Links code

• lt?xml version1.0?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• ltheadgt
• lttitlegtLink Examples in XHTMLlt/titlegt
• lt/headgt
• ltbodygt
• ltpgt Here are some examples of links in XHTML
  lt/pgt
• ltpgtlta hrefhttp//chughes.com/newpage.htmlgtThi
  s is an absolute link to a new
  pagelt/agtlt/pgt
• ltpgtlta hrefnewpage.htmlgtThis is a relative
  link to a new pagelt/agtlt/pgt
• ltpgtlta hrefnewpage.htmlgtltimg srcbutton.gif
  altThis image is a
• clickable buttongtlt/agtlt/pgt
• ltpgtlta hrefmailtocheryl_at_chughes.comgtThis is
  link that launches an
• email messagelt/agtlt/pgt
• lt/bodygt
• lt/htmlgt

104
XHTML Links Web Browser
105
Linking within a single document

• Links can be created to reference different
  sections of a single document using internal
  links and anchors
• Use an anchor to mark a section in the document
  where you would like to link to
• lta namefootnotegtFootnotelt/agt
• Use an internal link to reference the anchored
  section. Internal links begin with a
  character
• lta hreffootnotegtLink to footnotelt/agt
• When the user clicks on the internal link, they
  will be directed to the section referenced by the
  anchor

106
Linking within a single document - code
internal link has in front of name
Named anchor
107
Linking within a single document web browser
internal links will jump to where the named is
anchor is
108
Class Activity 5

• Create the following web page using Textpad,
  validate your code and then view in a browser.

Links to Act3_Q1.html
Links to Act4_Q1.html
109

XHTML Forms
110
Overview of XHTML Forms

• Web forms give Website owners the ability to
  receive information from their users or to allow
  users to personalize the Website
• A Web form can contain many types of input
  elements
• Text boxes
• Password boxes
• Buttons
• Checkboxes
• Pull-down menus
• Form input values are processed by a program on
  the Web server and usually send another XHTML
  page back to the Web browser with either a set of
  results based on the users input, or a
  confirmation page
• Forms can be located anywhere in the body of an
  XHTML document

111
The ltformgt Element

• The ltformgt - element contains all of the input
  elements of the form
• Attributes
• action This attribute is required and provides
  the path to the program that will process the
  form data when the user submits the form
• Examples
• ltform action/cgi-bin/process.cgigt
• ltform actionhttp//www.grahamm.com/cgi-bin/proce
  ss.cgigt
• ltform actionmailtograhamm_at_chisholm.vic.edu.augt
  
• method This attribute tells the web server how
  to process the data
• Values
• get This is the default value and will
  automatically assign this value if the method
  attribute is not present in the ltformgt element.
  This method appends the form input data to the
  end of a URL.
• The following two ltformgt start tags are the
  same
• ltform action/cgi-bin/process.cgi methodgetgt
• ltform action/cgi-bin/process.cgigt
• post This value tells the processing program to
  send the form data to the server as regular input
  data. Nothing will be appended to the URL

112
Text Input Elements

• There are three types of text input elements
  which are empty elements
• Text ltinput typetext /gt Allows users to
  enter text
• Password ltinput typepassword /gt Allows users
  to enter text which is not visible to others.
  The characters are entered and appear only as the
  character.
• WARNING even though the value is hidden while
  it is being typed, the value is sent to the
  server in text form
• File ltinput typefile /gt Allows users to
  Browse their computer in order to send a file to
  the Web server

113
Text input elements - attributes

• The following attributes can be used with text
  input elements
• maxlength - Maximum number of characters allowed
  for input
• name - Used to identify the input field
• size - Defines the size of the input field in
  characters. If this is smaller than the
  maxlength attribute, the field will scroll.
• type - Defines the type of input (text, password,
  or file for text input fields)
• disabled - Disables the field for user input. The
  value of a disabled field will not
  be sent to the processing program
• readonly - Makes the content of the text field
  unchangable. The value of this field will be
  sent to the processing program
• value - Sets a default value
• onselect - For use with scripts. An event handle
  that specifies an action to be performed when
  the field is selected
• onchange - For use with scripts. An event handle
  that specifies an action to be performed when
  the content of the field has been changed

114
Selection Form Elements

• The selection form elements allow the user to
  select one or many choices from a list
• There are 3 types of selection elements
• Checkboxes ltinput typecheckbox /gt
• Radio buttons ltinput typeradio /gt
• Drop-down lists ltselectgtlt/selectgt
• Using selection elements
• Checkboxes - used for lists where the user can
  choose one or more selections from a list
  of options. Each item in a checkbox group
  can be checked or unchecked.
• Radio Buttons used for lists which allow the
  user to choose only one item in the
  list
• Drop-down lists - The list appears in a
  scrollable box. These are usually used for
  long lists of items.
• Each item is listed in a separate ltoptiongt
  element

115
Completing the Form

• Once a user has completed the form, the data must
  be sent to the server to be processed
• The XHTML language provides a means to submit the
  form using the program that is specified in the
  action attribute of the ltformgt element by
  assigning the value of submit to the type
  attribute for the ltinput /gt element
• ltinput typesubmit /gt
• XHTML also gives users an ability to clear the
  form and reset the default values by assigning
  the value of reset to the type attribute for
  the ltinput /gt element
• ltinput typereset /gt
• The value attribute can be set to assign names to
  either of these buttons. If no value is set, then
  the computer will assign default text

116
Form Example code
Open ltformgt element

Checkbox group for accounts

Radio group for emp

Select group for branch
submit button
close ltformgt element
117
Form Example Web Browser
118
Class Activity 6

• Create the following web page using Textpad,
  validate your code and then view in a browser.

119
Class Activity 6

• Modify the form created in Question 1 and use a
  table to set the elements out more neatly, like
  in the example below

120
Lab 1

• A web site is a collection of web pages that link
  together.You are now going to create the
  following web site that uses tables, links,
  images, lists and forms.The site consists of
  four pages
• welcome.html
• baked_pears.html
• pumpkin_creme_brulee.html
• contact_me.html

121
Lab 1
To complete this table you will need to
investigate the attributesrowspan colspan
Links to baked_pears.html
Links to pumpkin_creme_brulee.html
recipe.jpg
Links to contact_me.html
welcome.html
122
Lab 1
back_button.jpg links back to welcome.html
pumpkin_creme_brulee.jpg
pumpkin_creme_brulee.html
123
Lab 1
back_button.jpg links back to welcome.html
Challenge Work out how to add a fraction
degree symbol
baked_pears.jpg
baked_pears.html
124
Lab 1
back_button.jpg links back to welcome.html
contact_me.html
125
Summary

• In this section you learnt how to add the
  following elements to a web page
• Headings
• Lists
• Tables
• Images
• Links
• Forms
• We didnt cover any formatting like different
  fonts or colors or alignment or removing
  borders.This is because most of those attributes
  and tags are deprecated and formatting is
  primarily done using cascading style sheets (CSS)
  this is covered in the next section.