different Markup Languages like html xhtml

Vejey Subash Gandyer :: IT2353 :: based on Jeffrey C. Jackson’s slides 1
Chapter 02
Markup Languages:
XHTML 1.0
IT2353
WEB TECHNOLOGY

HTML “Hello World!”
Document
Type
Declaration
Document
Instance

HTML “Hello World”

HTML Tags and Elements

Any string of the form < … > is a tag

All tags in document instance of Hello World are either
end tags (begin with </) or start tags (all others)
 Tags are an example of markup, that is, text treated specially
by the browser
 Non-markup text is called character data and is normally
displayed by the browser

String at beginning of start/end tag is an element name

Everything from start tag to matching end tag,
including tags, is an element
 Content of element excludes its start and end tags

HTML Element Tree
Root
Element

HTML Root Element

Document type declaration specifies name of
root element:
<!DOCTYPE html

Root of HTML document must be html

XHTML 1.0 (standard we will follow) requires
that this element contain the xml namespace
xmlns attribute specification (name/value
pair)

HTML head and body Elements

The body element contains information
displayed in the browser client area

The head element contains information
used for other purposes by the browser:
 title (shown in title bar of browser window)
 scripts (client-side programs)
 style (display) information
 etc.

HTML History

1990: HTML invented by Tim Berners-Lee

1993: Mosaic browser adds support for
images, sound, video to HTML

1994-~1997: “Browser wars” between
Netscape and Microsoft, HTML defined
operationally by browser support

~1997-present: Increasingly, World-Wide
Web Consortium (W3C) recommendations
define HTML

HTML Versions

HTML 4.01 (Dec 1999) syntax defined using
Standard Generalized Markup Language (SGML)

XHTML 1.0 (Jan 2000) syntax defined using
Extensible Markup Language (XML)

Primary differences:
 HTML allows some tag omissions (e.g., end tags)
 XHTML element and attribute names are lower case
(HTML names are case-insensitive)
 XHTML requires that attribute values be quoted

SGML and XML

HTML “Flavors”

For HTML 4.01 and XHTML 1.0, the
document type declaration can be used to
select one of three “flavors”:
 Strict: W3C ideal
 Transitional: Includes deprecated elements and
attributes (W3C recommends use of style sheets
instead)
 Frameset: Supports frames (subwindows within
the client area)

HTML Frameset

HTML Document Type
Declarations

XHTML 1.0 Strict:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 4.01 Transitional:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd">

XHTML White Space

Four white space characters: carriage
return, line feed, space, horizontal tab

Normally, character data is normalized:
 All white space is converted to space characters
 Leading and trailing spaces are trimmed
 Multiple consecutive space characters are
replaced by a single space character

XHTML White Space

Unrecognized HTML Elements
Misspelled
element name

title character
data
Belongs
here

title character
data
Displayed
here


Browsers ignore tags with unrecognized
element names, attribute specifications with
unrecognized attribute names
 Allows evolution of HTML while older browsers
are still in use

Implication: an HTML document may have
errors even if it displays properly

Should use an HTML validator to check
syntax

Example for non-frame browsers (old)
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="contents_of_frame1.html“ />
<FRAME src="contents_of_frame2.html“ />
<NOFRAMES>
This doc contains frames
</NOFRAMES>
</FRAMESET>
</HTML>

HTML References

Since < marks the beginning of a tag, how do
you include a < in an HTML document?

Use markup known as a reference

Two types:
 Character reference specifies a character by its
Unicode code point

For <, use < or < or <
 Entity reference specifies a character by an HTML-
defined name

For <, use <

HTML References

HTML References

Since < and & begin markup, within
character data or attribute values these
characters must always be represented by
references (normally < and &)

Good idea to represent > using reference
(normally >)
 Provides consistency with treatment of <
 Avoids accidental use of the reserved string ]]>

HTML References

Non-breaking space (   ) produces
space but counts as part of a word
 Ex: keep together keep together …

HTML References

Non-breaking space often used to create
multiple spaces (not removed by
normalization)
  + space
displays as two
spaces

XHTML Attribute Specifications

Example:

Syntax:
 Valid attribute names specified by HTML
recommendation (or XML, as in xml:lang)
 Attribute values must be quoted (matching single
or double quotes)
 Multiple attribute specifications are space-
separated, order-independent

XHTML Attribute Values

Can contain embedded quotes or references
to quotes

May be normalized by browser
 Best to normalize attribute values yourself for
optimal browser compatibility

Common HTML Elements


Headings are produced using h1, h2, …, h6
elements:

Should use h1 for highest level, h2 for next
highest, etc.
 Change style (next chapter) if you don’t like the
“look” of a heading


Use pre to retain format of text and display
using monospace font:

Note that any embedded markup (such as
 ) is still treated as markup!


br element represents line break

br is example of an empty element, i.e.,
element that is not allowed to have content

XML allows two syntactic representations of
empty elements
 Empty tag syntax is recommended for
browser compatibility
 XML parsers also recognize syntax 
(start tag followed immediately by end tag), but
many browsers do not understand this for empty
elements


Text can be formatted in various ways:
 Apply style sheet technology (next chapter) to a
span element (a styleless wrapper):
 Use a phrase element that specifies semantics
of text (not style directly):
 Use a font style element

Not recommended, but frequently used


Horizontal rule is produced using hr

Also an empty element

Style can be modified using style sheet
technology


Images can be embedded using img element

Attributes:
 src: URL of image file (required). Browser
generates a GET request to this URL.
 alt: text description of image (required)
 height / width: dimensions of area that image will
occupy (recommended)


If height and width not specified for image,
then browser may need to rearrange the client
area after downloading the image (poor user
interface for Web page)

If height and width specified are not the same
as the original dimensions of image, browser
will resize the image

Default units for height and width are “picture
elements” (pixels)
 Can specify percentage of client area using string
such as “50%”


Monitor resolution determines pixel size
768 lines
1024 elements per line
500 pixel wide line is almost
half the width of monitor


Monitor resolution determines pixel size
1024 lines
1280 elements per line
500 pixel wide line is less
than half the width of monitor


Hyperlinks are produced by the anchor element a

Clicking on a hyperlink causes browser to issue
GET request to URL specified in href attribute
and render response in client area

Content of anchor element is text of hyperlink
(avoid leading/trailing space in content)


Anchors can be used as source (previous
example) or destination

The fragment portion of a URL is used to
reference a destination anchor

Browser scrolls so destination anchor is at
(or near) top of client area


Comments are a special form of tag

Not allowed to use -- within comment

Nesting Elements

If one element is nested within another
element, then the content of the inner
element is also content of the outer element

XHTML requires that elements be properly
nested

Nesting Elements

Most HTML elements are either block or
inline
 Block: browser automatically generates line
breaks before and after the element content

Ex: p,div
 Inline: element content is added to the “flow”

Ex: span, tt, strong, a

Nesting Elements

Syntactic rules of thumb:
 Children of body must be blocks
 Blocks can contain inline elements
 Inline elements cannot contain blocks

Specific rules for each version of (X)HTML
are defined using SGML or XML (covered
later)

Relative URL’s

Consider an <img> start tag containing
attribute specification

This is an example of a relative URL: it is
interpreted relative to the URL of the
document that contains the img tag
 If document URL is
http://localhost:8080/MultiFile.html
then relative URL above represents absolute URL
http://localhost:8080/valid-xhtml10.png

Relative URL’s

Relative URL’s

Query and fragment portions of a relative
URL are appended to the resulting absolute
URL
 Example: If document URL is
http://localhost:8080/PageAnch.html
and it contains the anchor element
then the corresponding absolute URL is
http://localhost:8080/PageAnch.html#section1

Relative URL’s

Advantages:
 Shorter than absolute URL’s
 Primary: can change the URL of a document
(e.g., move document to a different directory or
rename the server host) without needing to
change URL’s within the document

Should use relative URL’s whenever
possible

Lists

Lists
Unordered List
Ordered List
Definition List
List Items

Lists

Tables
Rules
Rules
Borders

Tables
Table Row
Table Data
Border 5 pixels, rules 1 pixel

Tables

Tables
Table Header

Tables

Tables
cellspacing cellpadding

Tables

Frames

Frames
1/3,2/3 split

Frames

Hyperlink in one frame can load document in
another:

Value of target attribute specification is
id/name of a frame

Forms

Forms
Each form is content of a form element

Forms
action specifies URL where form data is sent in an HTTP request

Forms
HTTP request method (lower case)

Forms

The XHTML grammar require any child of
the form element to be a block

Many form elements are actually inline, so
including a block element on top such a div
or a table is a simple way to be compliant
with the grammar

Forms
div is the block element analog of span (no-style block element)

Forms
Form control elements must be content of a block element

Forms
Text field control (form user-interface element)

Forms
Text field used for one-line inputs

Forms

Forms
Name associated with this control’s data in HTTP request

Forms
Width (number of characters) of text field

Forms
input is an empty element

Forms
Use label to associate text with a control
Only one control inside a label element!

Forms
Form controls are inline elements

Forms
textarea control used for multi-line input

Forms
Height and width in characters

Forms
textarea is not an empty element; any content is displayed

Forms

Forms
Checkbox control

Forms
Value sent in HTTP request if box is checked

Forms
Controls can share a common name

Forms
Submit button: form data sent to action URL if button is clicked

Forms

Forms
Form data (in GET request)

Forms
Displayed on button and sent to server if button clicked

Forms
Radio buttons: at most
one can be selected at
a time.

Forms
Radio button control

Forms
All radio buttons with the same name form a button set

Forms
Only one button of a set can be selected at a time

Forms
This button is initially selected
(checked attribute also applies
to check boxes)

Forms
Boolean attribute: default false,
set true by specifying name as
value

Forms
Represents string: >50

Forms
Menu

Forms
Menu control; name given once

Forms
Each menu item has its own value

Forms
Item initially displayed in menu
control

Forms

Other form controls:
 Fieldset (grouping)
 Password
 Clickable image
 Non-submit buttons
 Hidden (embed data)
 File upload
 Hierarchical menus

Forms

XML DTD

Recall that XML is used to define the syntax
of XHTML

Set of XML files that define a language are
known as the document type definition (DTD)

DTD primarily consists of declarations:
 Element type: name and content of elements
 Attribute list: attributes of an element
 Entity: define meaning of, e.g., >

XML DTD

Example from
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
<!ELEMENT html (head, body)>
<!ATTLIST html
%i18n;
id ID #IMPLIED
xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml' >
<!ENTITY % i18n
"lang %LanguageCode; #IMPLIED
xml:lang %LanguageCode; #IMPLIED
dir (ltr|rtl) #IMPLIED" >

XML Element Type Declaration
Element type name

Element type content specification (or content model)

<!ELEMENT textarea (#PCDATA)>


Child elements of table are:


 Optional caption


 Optional caption followed by


 Any number of col elements


 Any number of col elements or


 Any number of col elements or any number of
colgroup elements


colgroup elements then


 Optional header


 Optional header followed by


 Optional header followed by optional footer


 Optional header followed by optional footer then


 One or more tbody elements


 One or more tbody elements or


 One or more tbody elements or one or more tr
elements

XML Attribute List Declaration
Element type name

Recognized
attribute names

Attribute types
(data types allowed as attribute values)

ASCII characters: letter, digit, or . - _ :

Attribute value must be ltr or rtl

Like NMTOKEN but must begin with letter or _ :
Attribute value must be unique

Any character except XML special characters < and &
or the quote character enclosing the attribute value

Attribute default declarations

XML Entity Declaration

Entity declaration is essentially a macro

Two types of entity:
 General: referenced from HTML document using
&
Entity name



&
Replacement text;
recursively replaced if it is a reference



&
 Parameter: reference from DTD using %

DTD Files

DTD document contains element type,
attribute list, and entity declarations

May also contain declaration of external
entities: identifiers for secondary DTD
documents
System Identifier: URL for primary DTD document

DTD Files
External entity name

DTD Files
System identifier (relative URL)

DTD Files
Entity reference; imports content (entity declarations, called
entity set) of external entity at this point in the primary DTD

HTML Creation Tools

Mozilla Composer

Microsoft FrontPage

Macromedia Dreamweaver

Etc.

different Markup Languages like html xhtml

More Related Content

Similar to different Markup Languages like html xhtml (20)

Recently uploaded (20)

different Markup Languages like html xhtml