Xhtml

HTML
• Hyper Text Markup Language(HTML) is the markup
language for creating the web pages and other
information that can be displayed by the browser.
• HTML is written in the form of HTML elements
consisting of tags and content.
• Tags: The fundamental syntactic units of HTML are
called tags, in general tags are used to specify
categories of content. The syntax of tag is tags
name(written in lower case) surrounded by angle
brackets(< >).

• Most tags appear in pairs: an opening tag and a
closing tag. The name of closing tag is the
name of its corresponding opening tag with a
slash attached to it.
• Content: whatever appears between the
opening and closing tag is content of the tag.
– A browser display of an XHTML document shows
the content of all document’s tags; it is the
information the document is meant to portray. Not
all tags have content.

• Element: The opening and closing tag
together specify a container for the content
they enclose. The container and its content
together are called an element.
For example
<p> This is content of paragraph tag </p>
• The purpose of web browser is to read HTML
documents. The browser does not display tags,
but uses the tags to interpret the content.

• Attribute: These are used to specify alternative
meanings of a tag, can appear between an
opening tags name and its right-pointed
bracket.
– They are specified in keyword form, i.e., attribute
name followed by equal to sign and attribute’s
value. These are written in lowercase and are
delimited by double quotes.
– For example: <img src=“nature.jpg”>
• Comments: increase readability of the
program, they appear in XHTML in the
following form.
<!- - anything except two adjacent dashed - ->

• HTML versions:
– HTML 2.0- first classic version of HTML,
introduced on 24 November 1995.
– HTML 3.2- introduced in January 1997, included
tags for tables, images ,subscripts, superscripts and
few more.
– HTML 4.0- introduced in December 1997 ,
supported style sheets.
– HTML 4.0.1- is current official version of HTML,
introduced in December 1999, supports CSS,
added table forms and JSS.
– HTML 5 draft version- is latest version of HTML,
came into existence on January 2008.

XHTML
• XHTML is the family of current and future
document types and modules that extend
HTML4. XHTML document types are XML
based and ultimately are designed to work in
conjunction with XML-based user agents.
• According to W3C, “XHTML 1.0 is a
reformulation of HTML 4.0.1 in XML and
combines the strength of HTML 4 with the
power of XML ”

XHTML versions
XHTML is an application of XML, a more restrictive
subset of SGML because XHTML documents need to
be well formed and can be parsed using standard
XML parser.
• XHTML 1.0 became W3C recommendation on Jan
26 2000.
• XHMTL 1.1 became W3C recommendation on May
31 2001.
• XHTML 5 is undergoing development as of
September 2009, as part of HTML 5 specification.

Motivation to develop XHTML
• XHTML was developed to make HTML more
extensible and increase interoperability with other
data formats.
• HTML 4 was ostensibly an application of SGML;
however the specification for SGML was complex
and neither web browser nor HTML 4
recommendation were fully conformant to it.
• The XML standard approved in 1998, provided a
simpler data format in simplicity to HTML 4.
• By shifting to XML format it was hoped HTML
would become compatible with common XML tools.

HTML versus XHTML:
HTML over XHTML
• XHTML requires that all elements be closed, either by a
separate closing tag or using self closing syntax(e.g. <br />),
while HTML syntax permits some elements to be unclosed
because either they are always empty or their end can be
determined implicitly.
• XHTML is case sensitive for element and attribute names,
while HTML is not.
• In general, HTML has lax syntax rules and is much easier and
simple to write, whereas XHTML requires a level of discipline
to write documents.
• Since there are huge number of HTML documents available on
the web, browsers will continue to support it in future. But
some older browser have problems with some parts of
XHTML

XHTML over HTML
• The quality and consistency in any endeavor, be it electrical
wiring, software development or web development, rely on
standards.
• XHTML has strict syntactic rules this imposes a consistent
structure on all XHTML documents.
• When XHTML documents are created its syntactic correctness
can be checked either by an XML browser or by validation
tool.
• XHTML can be written correctly by using XHTML editors,
which provide a simple and effective approach to create
syntactically correct XHTML documents.
• It is also possible to convert HTML documents to XHTML
documents using software tools.

Standard XHTML document structure.
• Every XHTML document must begin with and xml
declaration element that simply identifies the
document as being one based on XML.
• This element includes an attribute that specifies the
version number which is still 1.0. The xml declaration
usually includes a second attribute, encoding which
specifies the encoding used for the document.
• This declaration must begin in the first character
position of document file.
<?xml version = "1.0" encoding = "utf-8" ?>

• Immediately following the xml declaration is document type
declaration that defines document type definition(DTD) using
DOCTYPE command.
• A document-type definition (DTD)specifies the syntax rules
for a particular category of XHTML documents or Document
type definition is a grammar of an XML or XHTML.
• XML uses a subset of SGML DTD.
• Purpose of DTD: when we write a document with DTD it
provides a structure for the document, though it is easy to
write an XML document without DTD, it has no syntactic
meaning to computer.
• A DTD is associated with an XML or SGML document by
means of document type declaration(DOCTYPE) which
appears at the start of the document.

• Document type declaration(DOCTYPE)
– It is an instruction that associates a particular SGML or
XML document with a DTD.
– The general syntax for document type declaration is:
<! DOCTYPE root-element PUBLIC “FPI” [URI] [
<!- -System Identifier- ->
]>
– The root element represents the document is the first
element in the document. For example in XHTML, the root
element is <html>, being the first element opened and last
closed.
– The keywords PUBLIC or SYSTEM suggest what kind of
DTD it is(one that is on private system or one that is open
to public)

– If the keyword PUBLIC is chosen then this keyword is
followed by restricted form of “public identifiers” or
Formal Public Identifier.
– We can also specify a local DTD with the "SYSTEM" key
word.
– The system identifier (Optional) allows the XML parser to
locate the DTD in a specific system, by means of URI
reference of DTD enclosed in double quotes.

Common DOCTYPE Declarations
• HTML 5
<!DOCTYPE html>
• HTML 4.01 Strict
This DTD contains all HTML elements and
attributes, but does NOT INCLUDE
presentational or deprecated elements (like
font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Transitional
This DTD contains all HTML elements and
attributes, INCLUDING presentational and
deprecated elements (like font). Framesets are
not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but
allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

• 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
• 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.
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

• XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows
the use of frameset content.
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
• XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to
add modules (for example to provide ruby support for
East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

• XML namespaces are used for avoiding the
ambiguity between identically named elements
or attributes within xml documents.
• Namespace name is a uniform resource
identifier(URI).
• Typically
http://www.w3.org/1999/xhtml is used to
identify the namespace and this reduces the
probability of different namespaces using
duplicate identifiers.
<html xmlns = "http://www.w3.org/1999/xhtml" >

• An XHTML document consists of two parts
named the head and body.
• The <head> element contains the head part of
the document, which provides information
about the document.
• The body of a document provides the
content of the document.
• The content of the title element is displayed
by the browser at the top of its display
window.

Basic Text Markup
• Formatting text: describing layout and some
presentation details.
• Paragraphs:
Text is normally organized into paragraphs in
the body of a document. XHTML standard
does not allow text to be placed directly in a
document body.
Textual paragraphs appear as the content of a
paragraph element specified with the tag <p>,

• In displaying the content of a paragraph, the
browser puts as many words that will fit on
the lines in browser window, the browser
supplies a line break at the end of each line.
• The line breaks embedded in text are ignored
by the browser.
• If the content of a paragraph tag is displayed
other than the beginning of the line, the
browser breaks the current line and inserts a
blank line.

Line Breaks
• Sometimes text requires a line break without
the preceding blank line. This is done by break
tag.
• The break tag differs syntactically from
paragraph tag in that it can have no content
and therefore no closing tag.
• The break tag is specified as<br />. The slash
indicates that it is both opening and closing
tag. The space before the slash represents the
absent content.

Preserving white space
• Sometimes it is desirable to preserve the
white space in text i.e., to prevent the browser
from eliminating multiple spaces and ignoring
embedded line breaks. This can be specified
with pre tag.
Headings
• Text is often separated into sections in
documents by beginning each section with a
heading.

• In XHTML there are six levels of headings,
specified by the tags <h1>,<h2>,<h3>,<h4>,<h5>
and <h6>. <h1> specifies the highest level
heading.
• On many browsers <h1>,<h2> and <h3> use font
sizes that are larger than that of default size of
text.
• <h4 > uses default size and <h5> <h6> use smaller
sizes.
• The heading tags always break the current line, so
their content always appears on a new line.
• Browsers usually insert some vertical space
before and after all headings.

Block quotations
• Sometimes we want a block of text to be set
off from normal flow of text in a document. In
most of cases such a block is a long quotation.
• The <blockquote> tag is designed for this
situation.
• Browse designers determine how the content
of tag can be made to look different from
surrounding text.

Font styles and sizes
• Content based style tags: indicates particular kind
of text that appears in their content.
• Three of commonly used content based tags are:
emphasis tag, strong tag and code tag.
• The emphasis tag <em> specifies that its textual
content is textual content is special and should
be displayed in some way that is distinctive.
• The <strong >tag sets content in bold
• The <code > tag is used when we want to specify
a monospace font, usually for program code.

• XHTML tags are categorized as being either block
or inline.
• The content of inline tag appears on the current
line. So an inline tag does not implicitly include a
line break.
• One exception is break tag which is an inline tag
but its purpose is to insert a line break in the
content.
• A block tag breaks the current line so that its
content appears on a new line.
• The heading and block quote tags are block tags,
whereas<em> and <strong> are inline tags.

• In XHTML block tags cannot appear in the
content of inline tags. Therefore a block tag
can never be nested directly in an inline tag.
Character Entities
• XHTML provides a collection of special
characters that are sometimes needed in a
document but cannot be typed as
themselves.
• For example: <, >, & , characters that do not
appear on keyboards, such as representation
for “degrees” in reference to temperature.

Character Entity Meaning
& & Ampersand
< < Is less than
> > Is greater than
“ &quote; Double quote
‘ ' Single quote
¼ ¼ One quarter
½ ½ One half
¾ &frac34 Three quarters
0 ° Degree
{space}   Nonbreaking space

Horizontal Rules
• The parts of document can be separated from
each other by placing horizontal lines
between them.
• Such lines are called horizontal rules and the
block tag creates them is <hr />. The <hr />
tag causes a line break and places a line across
the screen.
• The browser chooses the thickness, length
and horizontal placement of the line.

The meta element
• This is used to provide additional information
about the document. The meta tag has no
content, all of the information provided is
specified with attributes.
• Two attributes that are used to pprovide
information are name and content.
• The user makes up a name as the value of the
name attribute and specifies information through
content attribute.
• One commonly chosen name is keywords; the
value of the content attribute associated with
keywords are those which author of a document
believes characterizes his or her document.

• An example is
<meta name=“keywords” content=“binary trees,
linked lists, stacks” />
• Web search engines use the information provided
with meta element to categorize web documents
Images
• The inclusion of images can dramatically enhance
its appearance of web document.
• The image is stored in a file, which is specified by
XHTML request, inserted into display of the
document by the browser.

Image Formats
• Graphic Interchange Format(GIF)- 8 bit color
representation for a pixel
• Joint photographic Experts Group(JPEG)- 24 bit
representation for a pixel.
• Portable Network Graphics(PNG)
The <img / > tag
• This is an inline tag, specifies an image that is to
appear in a document. It includes two attributes:
src and alt.
• src : specifies the file containing the image
• alt: specifies text to be displayed when it is not
possible to display the image.

Hyper Text links
• A hypertext link (link) in XHTML document
acts as a pointer to some resource.
• That resource can be an XHTML document
anywhere on the web or it may just be
another place in the document currently
being displayed.
• It could also be a specific place in some other
document.
• A link that point to different document
specifies the address of that document

• The address could be filename, a directory
path and a file name or complete URL.
• Links are specified in an attribute of an anchor
tag(<a>), which is an inline tag.
• The anchor tag that specifies a link is called
source of that link. The document whose
address is specified in a link is called the target
of that link.
• One attribute that anchor tag make use of is
href(hypertext reference) . The value assigned
to href specifies the target of the link.

• The content of the anchor tag becomes
clickable link that the user sees.
• Links are usually implicitly rendered in
different color than the surrounding text,
sometimes they are underlined also.
• If the target is a different document, that
document is located and displayed , replacing
the currently displayed document.
• If the target is in the current document, the
document is scrolled by the browser to display
the target of the link.

• Links can include images in their content in
which case the browser displays the image
with the image with the link.
Targets within the documents
• If the target of a link is not at beginning of a
document, it must be somewhere within the
document, in which case there must be some
means of specifying it.
• The target element can include an id attribute
which can then be used to identify it in an href
attribute.

• For example:
<h2 id=“avionics”> Avionics </h2>
• The value of a id attribute must be unique
within the document.
• To specify the link within same document href
attribute value is specified by preceding id
value with pound sign (#).
<a href=“#avionics”> About Avionics </a>
• When we click About Avionics the browser
moves the display to that particular id.

• When the target is a part or fragment of
another document, the name of the part is
specified at end of URL, separated by a pound
sign
<a href=“Airplane.html# cost”> Avionics</a>
• One common use of links to parts of the same
document is to provide a table of contents in
which each entry has a link. This technique
provides a convenient way for the user to get
to various parts of the document

Lists
• We frequently make and use lists in daily life-to-
do list and grocery lists. Likewise even a
printed document can be littered with lists.
• XHTML provides a simple and effective ways
to specify lists in documents.
Unordered lists
• The <ul> tag, which is a block tag creates an
unordered list. Each item in a list is specified
with an <li> tag( it is an acronym for List Item).

• Any tag can appear in list item, including
nested lists.
• When displayed each item is implicitly
preceded by a bullet.
Ordered Lists
• Ordered lists are lists in which the order of
items is important.
• This orderedness of a list is shown in display of
the list by implicit attachment of sequential
value to beginning of each item.

• The default sequential values are Arabic
numerals beginning with 1.
• An ordered list is created within the block tag
<ol> .The items are specified using <li> tag
and each item in the display is preceded by
sequential values.
• Lists can be nested, but they cannot be nested
directly, that is, an <ol> tag cannot
immediately follow an <ol> tag. The nested list
must be content of an <li> element.
• One problem with nested list is that all three
levels use the same sequence values.

Definition Lists
• These are used to specify lists of terms and
their definitions, as in glossaries.
• A definition list is given as the content of a
<dl> tag, which is a block tag. Each item to be
defined in definition list is given as the
content of <dt> tag. The definition are
specified as contents of<dd> tags.
• The defined terms of a definition list are
usually displayed in left margin, the definitions
are usually shown indented on the line or lines
following the term.

Tables
• Tables are common fixtures in printed
documents,books and web documents. These
provide a highly effective way of presenting
many kinds of information.
• A table is a matrix of cells. The cells in a top
row contains column labels, those in the
leftmost column contain row labels and rest
of the cells contain the data of the table.
• The content of a cell can be almost any
document element, including text, heading
horizontal rule, image and nested table.

Basic Table Tags
• It is specified as content of the block tag
<table>. There are two kinds of lines in tables:
the line around the outside of whole table
called the border.
• The lines that separate the cells from each
other are called rules.
• The browser has default widths for table
borders and rules, which are used if the
border attribute is assigned the value
“border”.

• We can even specify border’s value, which
specifies the border width in pixels.
• A border value of “0” specifies no border and no
rules. The rules are set at 1 pixel when any non
zero border value is specified.
• In most cases a displayed table is preceded by a
title, given as content of a <caption> tag, which
can immediately follow the opening <table> tag.
• The cells of a table are specified one row at a
time. Each row of a table is specified with row
tag ,<tr>.
• Within each row, the row label is specified by
table heading tag, <th>.

• Each data cell of a row is specified with a table
data tag,<td>.
• The first row of a table usually has table’s column
labels. For example if a table has three data
columns and their column labels are, apple,
orange and banana, the first row can be specified
by the following:
<tr>
<th> Apple</th>
<th> Orange</th>
<th> Banana</th>
</tr>

• Each row of a table is specified with a heading
tag and one data tag for each data column.
For example, the first data row can be
specified as:
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>

• In tables that have both row and column
labels, the upper left corner cell is often
empty.
• This empty cell is specified with a table header
tag that includes no content(either <th></th>
or just <th />)
Row span and col span attributes.
• The colspan attribute specification in table
header or table data tag tells the browser to
make the cell as wide as the specified number
of rows below it in the table.

<tr>
<th colspan=“3”> Healthy Diet </th>
<tr>
<tr>
<th> Apple</th>
<th>Orange</th>
<th>Banana</th>
</tr>
• The rowspan attribute of table heading and table data
tags does for rows what colspan does for columns.
• A table that has two levels of column labels and has
row labels must have an empty upper left corner cell
that spans both multiple rows of column labels and
multiple column.

• Such a cell is specified by including both rowspan
and colspan atttributes.
The align and valign attributes
• The placement of the content within a table cell
can be specified with align and valign attributes in
the <tr>, <th> and <td> tags.
• The align attribute has the possible values
left,right and centre with the meaning for
horizontal placement of the content within a cell.
• The default placement for th cells is centre; for td
cells it is left.
• If align is specified in <tr> tag, it applies to all of
the cells in the row. If it is included in <th> or
<td> tag, it applies to only that cell.

• Create an XHTML document to describe a
table with following contents: The columns of
the table must have headings Pine,Maple,Oak
and Fir. The rows must have labels Average
height, Average Width, typical lifespan and
Leaf type.
• Modify the above XHTML document to add a
second level column label Tree and a second
level row label Characteristics.

• The valign attribute of the <th> and <td> tags has
possible values top and bottom. The default
vertical alignment for both headings and data is
centre.
The cell padding and cell spacing attributes.
• The table tag had two attributes that can be used
to specify the spacing between the content of
table cell and cell’s edge and the spacing
between adjacent cells.
• The cellpadding attribute is used to specify the
spacing between content of cell and inner walls
of cell.
• The cellspacing attribute is used to specify the
distance between cells in a table.

Forms
• The most common way for a user to
communicate information from web browser
to server is through a forms.
• XHTML provides tags to generate the
commonly used objects on a form. These are
called controls or widgets.
• All control tags are inline tags. Most controls
are used to gather information from the user
in form of text or button selection.
• The values of all the controls in a form are
called the form data.

• Every form requires a submit button, when the
user clicks submit button the form data is
encoded and sent to web server for processing.
The <form> tag.
• All of the components of a form appear in
content of a <form> tag.
• It is a block tag, it can have several attributes one
of which, action.
• The action attribute specifies the URL of the
application on the web server that is to be called
when the user clicks submit button.
(action=“ ” is specified since there is no
corresponding application program)

• The method attribute of <form> specifies one
of two values: get or post, used to pass form
data to the server.
• get is default, if no method attribute is given
in the <form> tag, get will be used. The
alternative is post, in both techniques the
form data is coded into a text string when the
user clicks submit button.
The <input> tag
• Most of the commonly used controls are
specified with the inline tag<input>

• The tag is used for text, passwords, checkboxes,
radio buttons and action buttons(Reset, Submit
and Plain)
• The type attribute of input tag is used to
differentiate between various controls. The name
attribute stores the value of control within form.
The value attribute initializes the value of
control.
Text control
• It is usually referred as text box, creates a
horizontal text box, into which user can type a
line of text.
• Text boxes are often used to gather information
from the user such as user name or address.

• The default size of text box is 20 characters, which varies
with browsers.
• We can specify the size of the text box using size attribute,
within <input> tag.
<form action=“”>
<p>
<input type=“text” name=“Name” size=“25”/>
</p>
</form>
If the user types:
Alfred Paul Von Frinkenburger
The text box would collect whole string, but the string
would be scrolled to right, leaving the following in text box
ed Paul Von Frinkenburger

• If we do not want this to happen, we can specify
maximum number of characters using maxlength
attribute that the browser should accept in text box.
<form action=“”>
<p>
<input type=“text” name=“Name” size=“25”
maxlength= “25”/>
</p>
</form>
If the user types:
Alfred Paul Von Frinkenburger
The value stored will be
Alfred Paul Von Frinkenbu

Password control
• If the contents of a text box should not be
displayed when it is entered by the user
password can be used as type.
• Only bullets or asterisks are displayed by the
browser.
<input type=“password” name=“mypassword”
size=“25” maxlength= “25”/>
Labels
• Text boxes and most other controls must be
labeled. It can be done by inserting text into
appropriate places in the form.
NAME<input type=“text” name=“Name”
size=“25”/>

• Other way of specifying the label is specifying the
control and its label as content of label element.
<label> NAME:<input type=“text” name=“Name”
size=“25”/> </label>
Checkboxes and Radiobuttons
• These are used to collect multiple choice input
from the user.
• A checkbox button requires a name attribute and
a value attribute in its <input> tag.
• For form processing on the server, the name
identifies the button and value is its value.
• The attribute checked, which is assigned the
value checked, specifies that the checkbox button
is initially on.

Radio buttons
• The radio buttons are closely related to check
box buttons, the difference is that only one
radio button can be on at any time.
• Everytime a radio button is pressed, the
button in the group that was on is turned off.
• The type value is radio, all radio buttons must
have name attribute set in <input> tag, and all
buttons must have same name.
• Any one of the button may be checked by
including checked attribute and setting its
value to checked.

The select tag
• Checkboxes and radio buttons are effective
methods for collecting multiple choice data
from a user.
• If the number of possible choices is large the
display form becomes too long to display. In
these cases menu could be used.
• This menu is specified with a <select>
tag(rather than <input> tag).
• There are two types of menus: those in which
only one menu item can be selected, other is
specified by adding size attribute.

• By default one item is displayed in the menu with a
downward scroll.
• Each item in the menu is specified with an <option>
tag, nested in select element. The content of option
tag is the value of menu item.
• The <option> tag can include selected attribute
which when assigned to “selected” means the item is
pre selected.
<select name=“groceries”>
<option> milk </option>
<option> bread</option>
<option>eggs </option>
<option> cheese </option>
</select>

The <textarea> tag
• This tag is used to create a multiline text area.
The text typed into the area is not limited in
length, and there is implicit scrolling when
needed, both vertically and horizontally.
• The default size of the visible part of the text
in a text area is often small, so rows and
column attribute should be included to set
reasonable size.
• If some default text is to be included in text
area it can be included as the content of the
text area element.

The Action buttons
• The reset button clears all of the controls in
the form to their initial states.
• The submit button has actions:
– The form data is encoded and sent to server.
– The server is requested to execute a server
resident program, specified in action attribute of
<form> tag.
• Every form requires a submit button. The
submit and reset buttons are created with
<input> tag.

Frames
• The browser display window can be used to
display more than one document at a time.
The window can be divided into rectangular
areas each of which is called frames.
• Each frame is capable of displaying its own
document. Frames can be used for number of
display situations.
• Among these is having a table of contents
displayed in one frame and parts of main
document displayed in another.

• There are some problems with frames which
led W3C to begin discourage their use as early
1999, they are entirely left out in XHTML 1.1.
• Work is now in progress at W3C to develop a
new form of frames, called Xframes.
Framesets
• The number of frames and their layout in a
browser window are specified with
<frameset> tag.
• A frameset element takes the place of the
body element in a document. Hence a
document has either body or frameset.

• The <frameset> tag must have either a rows or a
cols attribute and often have both.
• The rows attribute specifies the number of rows
of frames that will occupy the window. There are
three kinds of values for rows: numbers,
percentages and asterisks.
• Normally two or more values, separated by
commas are given in quoted string.
• When a number is used as a value it specifies the
height of one row in pixels. When a percentage is
specified it indicates the percentage of total
browser window height that row should occupy.
• When an asterisk is used as the value of rows, it
means the remainder of the window’ s height.

For example
<frameset rows=“200,300,400”>
• This frameset will have three rows of frames,
since no cols attribute is specified.
• Usually browsers have different capabilities it is
more practical to specify rows with percentages
<frameset rows=“22% , 33% , 45%”>
<frameset rows=“22% , 33% , *”>
• If two asterisks are given in rows attribute value,
they each get half of what remains of the height
of the window.

• The cols attribute is very much like rows
attribute, except that it specifies the number of
columns of frames.
• For example, the following tag specifies that
window is to have six frames in three equal
height rows and two columns.
<frameset rows=“33%, 33%, 33%” cols=“25%, *”>
• The content of a frame is specified with <frame>
tag, which can appear only in the content of a
frameset element.
• Each frame defined in a frameset has associated
<frame> tag that gives the filename of a
document that supplies its content.

• The sequence of <frame> tags in frameset is
important because the order dictates which
frame gets which content.
• The frames in a frameset appear by rows.
• The content of a frame is specified as the value of
src attribute in a <frame> tag.
For example:
<frame src=“apples.html”>
• If a <frame> tag has no src attribute, the browser
displays an empty frame. If the frameset specifies
more frames than <frame> tags, the unspecifies
frames are displayed as empty frames.

• If the content of a frame does not fit into the
given frame, scroll bars are implicitly included.
Nested frames
• The frames ca be nested, the outermost
frameset can define some number of columns.
• Each of these columns can be divided with a
nested frameset into whatever collection of
frames is useful.

Syntactic differences between HTML and XHTML
• Case sensitivity: in HTML tag and attribute
names are case insensitive. In XHTML tag and
attribute names should be in lowercase.
• Closing tag: In HTML closing tag may be
omitted. In XHTML all elements must have
closing tag.
• Quoted attribute values: In HTML attribute
values must be quoted only if there are
embedded special characters or whitespaces,
numeric values are rarely quoted. In XHTML all
attribute values must be quoted.

• Explicit attribute values: In HTML some
attribute values are implicit, i.e., they need
not be specified explicitly. For example, if
border attribute appears in <table> tag
without a value, it specifies a default width
border on the table.
<table border>
this is illegal in XHTML in which such an
attribute is assigned a string of the name
attribute
<table border=“border”>

• id and name attribute: HTML often used name
attribute for elements. This attribute was
deprecated for some elements in HTML 4.0.
The id attribute is added to all elements of this
version of HTML. In XHTML the use of id is
encouraged and use of name is discouraged.
• Element nesting: Although HTML has rules
against improper nesting of elements, they
are not enforced. Examples of nesting rules
are:
– An anchor element cannot contain another
anchor element, a form element cannot contain
another form element.

– If an element appears inside another element, the
closing tag of the inner element must appear
before the closing tag of outer element.
– Block tags cannot be nested in inline tags.
– Text cannot be directly nested in body or form
elements.
– List elements cannot be nested in list elements.
• These rules are strictly enforced in XHTML.

Create, test, and validate an XHTML document that has a
form with the following controls:
a. A text box to collect the user’s name
b. Four checkboxes, one each for the following items:
i. Four 100-watt light bulbs for $2.39
ii. Eight 100-watt light bulbs for $4.29
iii. Four 100-watt, long-life light bulbs for $3.95
iv. Eight 100-watt, long-life light bulbs for $7.49
c. A collection of three radio buttons that are labeled as
follows:
i. Visa
ii. Master Card
iii. Discover

Cascading Style Sheets.
• XHTML is primarily concerned with content
rather than the details of how that content is
presented by the browsers.
• The presentation specification can be more
precisely and more consistently described by
style sheets.
• Most XHTML tags have associated properties
which store presentation information for the
browsers.
• Browsers use default values for these for these
properties, for example the <h2> tag has font size
property , for which a browser could have a
default value of 18 points.

• A style sheet could specify that font-size
property for <h2> be set to 20 points, which
overrides the default value.
• The new value could apply to one occurrence
of an <h2> or all such occurrences in the
document depending on how the property
value is set.
• The idea of style sheets is not new – word
processors and desktop publishing systems
used style sheets to impose particular style on
the document.

• The first style sheet specification for use in
XHTML document dubbed Cascading Style
Sheets(CSS1) was developed in 1996. In 1998
CSS2 was released. CSS3 is under development
since 1990.
• This chapter is restricted to a subset of CSS1
property values along with a few from CSS2.
• The most important benefit of style sheets is
their capability of imposing consistency on the
style of web documents. For example they allow
the author to specify that all occurrences of a
particular tag use the same presentation style.

• XHTML style sheets are called cascading style
sheets because they can be defined at three
different levels to specify the style of the
document.
• Lower level style sheets can override higher
level style sheets, so style of the content of a
tag is determined in effect through a cascade
of style sheet application.
Levels of style sheets
• The three levels of style sheets, in order from
lowest level to highest level are inline,
document level and external.

• Inline style sheets apply to content of a single
element, document level style sheets apply to the
whole body of the document and external style
sheets can apply to bodies of any number of
documents.
• Inline style sheets have precedence over
document style sheets, which have precedence
over external style sheets.
• For example if an external style sheet specifies a
value for a particular property of a particular tag,
that value is used until a different value is
specified in either a document style sheet or an
inline style sheet.

• Likewise document style sheet property values
can be overwritten by different property values in
an inline style sheet property.
• If no style sheet information is specified, the
browser default property values are used.
• As in case with tags and tag attributes, a
particular browser may not be capable of using
the property values specified in style sheet.
• For example if the value of font size property of a
paragraph is set to 18 points, but the browser can
display the font upto 16 points, the browser
either substitutes an alternative value or simply
ignore the given font size.

• Inline style specifications appear within an
opening tag and apply only to the content of that
tag. This fine-grain application of style defeats
one of the advantages of style sheets- that
imposing a uniform style on the tags of at least
one whole document.
• Another disadvantage of inline style sheets is that
they result in style information which is
expressed in a language distinct from XHTML
markup, being embedded in various places of the
document.
• It is much better to keep style specifications
separate from XHTML, for these reasons W3C
deprecated inline style sheets in XHML 1.1.

• Document level style specification appear in
the document head section and apply to
entire body of the document. This is oblivious
way to impose a uniform style on the
presentation of all the content of a document.
• In many cases it is desirable to have a style
sheet apply to more than one document. This
is purpose of external style sheets.
• External style sheets are not part of any
documents to which they apply. They are
stored separately and are referenced in all
documents that use them.

• External style sheets are written as text files
with the MIME type text/css. They can be
stored on ay computer on the web.
• The browser fetches external style sheets just
as it fetches the documents. The <link> tag is
used to specify external style sheets.
• Within <link>, the rel attribute is used to
specify the relationship of the linked-document
to the document in which link
appears.
• The href attribute of the <link> is used to
specify the URL of the style sheet document.

• The file name is not quoted. The two differences
between link and @import are:
– @import can appear only at beginning of the content
of the style element
– The imported file can contain markup as well as style
rules. Sometimes the imported file contains other
@import directives along with some style rules.
Style specification format
• The format of style specification depends on the
level of style sheet. Inline style specifications
appear as values of the style attribute of a tag,
the general form is

style=
“property_1:value_1;property_2:value2;….;
property_n:value_n;”
• Document style specifications appear as the
contents of a style element within the header
of the document, although the format of the
specification is different from inline style
sheets. The general form is:
<style type=“text/css”>
Rule_list
</style>

• The type attribute of <style> tags tells the
browser the type of style specifications, which
is always text/css.
• Each style rule in a rule list has 2 parts: a
selector, which indicates the tag or tags
affected by the rule, and list of property/value
pairs.
• The list has same form as the quoted list for
inline style sheets, except the list is delimited
by braces rather than double quotes.

• The form of style rule is as follows:
Selector { property_1:value_1;
property_2:value_2;….; property_n:value_n}
• If a property is given more than one value,
those values usually are separated by spaces.
• CSS rule lists should be documented with
comments. XHTML comments cannot be used
here because CSS in not XHTML. Therefore a
different form of comment is needed.
• CSS comments are introduced with /* and
terminated with */

Selector Forms
• The selector can have a variety of forms
Simple selector forms:
• The simplest selector form is a single element
name , such as h1. In this case the property
values in a rule apply to all occurrences of the
named element.
• The selector could be list of element names,
separated by commas, in which case the
property values apply to all elements of the
named elements.

• Consider the following example in which the
property is font_size and the property value is
number of points:
h1{font_size:24pt;}
h2, h3{font_size:20pt;}
• The first of these specifies that the text
content of all h1 elements must be set in 24-
point font size. The second specifies that the
text content of all h2 and h3 elements must
be set in 20 point font size.

• Selectors can also specify that the style should
only apply to elements in certain positions in the
document.
• This is done by listing the element hierarchy in
the selector, with only whitespace separating the
element names. For example:
body b em{font_size:14pt;}
• Only applies its style to the content of emphasis
elements that are descendant of bold elements in
the body of the document.
• This is a contextual selector(decendant selector).
It would not apply to the content of an emphasis
element that did not have boldface element as
ancestor.

Class Selector
• Class selectors are used to allow different
occurrences of the same tag to use different style
specifications.
• A style class is defined in a style element by giving
it a name, which is attached to the tag’s name
with a period.
• For example: if we want two paragraph styles in a
document- normal and warning- we define these
two classes in the content of a <style> tag as
follows:
p.normal {property-value list}
p.warning {property-value list}

• Within the document body, the particular style class is
specified with the class attribute of the affected tag- in
the preceding example the paragraph tag.
• For example we may have the following:
<p class=“normal”>
A paragraph that we want to be presented in ‘normal’
presentation style
</p>
<p class=“warning”>
A paragraph of text that is warning to the reader,
which should be presented in an especially noticeable
presentation style
</p>

Generic Selectors
• Sometimes it is convenient to have a class of
style presentations that applies to the content
of more than one kind of tag.
• This is done by using generic class, which is
defined without a tag name in its name.
• In place of the tag name we use the generic
class, which begin with a period.
• For example:
.sale{property-value list}

Now in the body of the document we can have
the following
<h3 class=“sale”> Weekend Sale</h3>
…..
<p class=“sale”>
……
</p>
Id selectors
• An id selector allows the application of a style
to one specific element. The general form of
an id selector is as follows:

#specific-id{property-value list}
The style specified in the id selector applies to
the element with the specific id. For example:
#section14 {font-size:20}
Specifies a font size of 20 to the element
<h2 id=“section14”> Department of CSE</h2>
Universal selector
• The universal selector, denoted by an
asterisk(*), applies its style to all elements in
the document. For example
*{color:red}

• Makes all elements in the document red.
• This class selector in rarely used.
Pseudo classes
• These are styles that apply when something
happens rather than because the target element
simply exists. The two pseudo classes are: hover
and focus.
• The names of pseudo classes begin with colon(:)
• The style of the hover pseudo class applies when
its associated element has the mouse cursor over
it.

• The style of focus pseudo class applies when
its associated element has focus- An element
acquires focus when the user places the
mouse cursor over it and click the left mouse
button.
• In pseudo.html, the content of an input
element, a text box, is colored red when the
mouse cursor is placed over its content.
• This happens only when the text box does not
have focus. If no text has been typed into text
box the hover pseudo class has no effect.

• When the text box acquires focus, the text
turns green and stays untill the left mouse
button is clicked outside the box.
The property value forms
• CSS1 includes 60 different properties in seven
categories: font, lists, alignment of text,
margins, colors, backgrounds and borders.
• Property values can appear in a variety of
forms. Keyword property values are used
when there are only few possible values and
are predefined.

• For example: large, medium and small. These
keywords are not case sensitive.
• Numeric values are used when no meaningful
units can be attached to a numeric property
value. A number value either can be an
integer or a sequence of digits with a decimal
point and can be preceded by a sign(+ or -)
• Length values are specified as number values
that are immediately followed by a two
character abbreviation of a unit name. There
is no space between number and unit name.

• The possible unit names are px for pixels,in for
inches,cm for centimeters, mm for
millimeters, pt for points(1/72 inch), pc for
picas (12 points).
• The display for in,cm mm, pt and pc are
approximate measures. Their actual values
depend on screen resolution.
• There are also two relative length values: em,
which is the value of current font size in pixels
and ex which is the height of the letter x.

• Percentage values are used to provide a
measure that is relative to the previously
used measure for a property value. These
values are numbers followed by % sign.
• For example: if the font size were set to 75% it
would make the new current size for the font
75% of its previous value.
• Percentage values can be signed. If preceded
by a plus sign, the percentage id added to the
previous value; if negative the percentage is
subtracted.

• URL property values use a form that is slightly
different from the references to URLs in links. The
URL can be absolute or relative is placed in
parenthesis and preceded by url, such as,
url(tetons.jpg)
• Color property values can be specified as color
names, as six-digit hexadecimal numbers or in
RGB form in just the word rgb followed by a
parenthesized list of three numbers that specify
the levels of red, green and blue.
• The RGB values can be given as either decimal
numbers between 0 and 255 or as percentages.
• Hexadecimal numbers must be preceded by #
symbol such as #43AF00.

• For example powder blue can be specified as
powderblue
Or
rgb(176,224,230)
0r
#B0E0E6
• CSS2 specifies that some property values are inherited by
elements nested in the elements for which values are
specified.
• Using a style sheet to set a value for the <body> tag would
effectively sets it default property for whole document.
• For example: body {font-size:16pt}
Unless overridden by a style sheet that applies to paragraph
elements, every paragraph element in the body of this
document would inherit the font size of 16 points.

Font properties
• The font properties are among the most
commonly used of the style-sheet properties.
• Virtually all XHTML documents include text,
which is often used in a variety of different
situations. This creates a need for text in
different fonts, font styles and sizes.
• The font properties allow us to specify these
different forms.

Font Families
• The font-family property is used to specify a
list of font names. The browser will use first
font in the list that it supports.
• For example:
font-family:Arial,Helvetica,Futura
• The generic font can be specified as a font-family
value. The possible generic fonts nad
examples of each are shown in table that
follows.

Generic font families
Generic Name Examples
Serif Times New roman, Garamond
Sans-serif MS Arial, Helvetica
Cursive Caflisch Script, Zapf-Chancery
Fantasy Critter, Cottonwood
monospace Courier, Prestige
• Each browser has font defined for each of
these generic names.
• A good approach is to specify the generic font
as last in the value of font-family
font –family:Arial,helvetica,sans-serif

• If a font has more than one word the whole name
should be delimited by quotes
font-family: ’Times New Roman’
Font Size
• The font size property does what the name
implies. For example
font-size:10pt
This specification sets the font size for text to 10
points.
• Many relative font-size values are defined
namely, xx-small, x-small, small, medium, large
and xx-large.

• The value can be a percentage, which would be
relative to the current font size.
• The disadvantage of relative font sizes is the lack
of font size control. Different browsers can use
different values for them.
• Using a specific font size has a risk that some
browsers may not support the particular size,
causing the document to appear different on
different browsers.
Font variants
• The default value of font-variant property is
normal, which specifies the usual character font.

• This property can be set to small-caps to
specify small capital letters.
Font styles
• This property is most commonly used to
specify italic as shown below:
font-style: italic
Font weights
• The property is used to specify the degree of
boldness.
For example:
font-weight:bold

• Besides bold, the values normal(default),bolder
and lighter can be specified.
• The bolder and lighter values are taken as relative
to current level of boldness.
Font shorthands
• If more than one font property must be specified,
the values can be stated in a list as the value of
font property.
• Consider the following specification:
font: bold 14pt ‘Times New Roman’ Palatino
• This specifies that the font weight should be
bold, size should be 14 points and either times
new roman or Palatino font should be used.

• The order in which the property values are given
in a font value list is important:
• The font names must be last, the font size must
be second last and font style, font variant and the
font weight, when they are included can be in any
order but must precede the font size and names.
Text decoration
• This property is used to specify some special
features of text.
• The available values are: line-through, overline,
underline and none(default)
• Many browsers underline links. The none value
can be used to avoid this.

• The letter spacing property controls the
amount of space between the characters in
text. The possible values of letter spacing are
any length property values, for example 3px.
List Properties
• Often two presentation details are specified in
XHTML documents: the shape of the bullets
that precede the items in unordered lists and
the sequencing values that precede the items
in ordered lists.
• The list-style-type property is used to specify
both of these.

• The list-style-type property of an unordered
list can be set to disc, circle, square or none.
The default property value for bullets id disc.
• The following illustrates a document style
sheet to set the bullet type in unordered list to
square

• We are not only limited to discs, squares and
circles for bullets in unordered lists. Any image
can be used in the list item bullet.
• Such a bullet is specified with list-style-image
property, whose value is specified with url
form.

• When ordered lists are nested, it is best to use different kinds
of sequence values for different levels of nesting.
• The list-style-type property can be used to specify the types of
sequencing values.
• The following table lists the different possibilities defined by
CSS1

Color
Color groups
• Three levels of collections of colors might be used
by an XHTML document.
• The smallest useful set of colors includes only
those that have standard names and guarenteed
to be correctly displayable by all browsers on all
color monitors.
• This collection of sixteen colors is called named
colors.
• The named colors and hexadecimal codes for
them is shown in table that follows:

Color Properties
• The color property is used to specify the
foreground color of XHTML elements.
• Consider the following small table:

• The background color property is used to set
the background color of an element, where
the element could be whole body of the
document.
• Consider the following paragraph element:

Alignment of text
• The text-indent property can be used to specify the
indentation
<style type=“text/css”>
p.indent{text-indent:0.5in}
</style>
….
<p class=indent>
………….
</p>
• The paragraph would be displayed with proper
indentation.
• The text align property the possible keyword values are:
left, centre,right and justify. These are used to align the text
horizontally.

• For example the following document level
style sheet entry causes the content of
paragraph to be aligned on the right of the
document.
p {text-align:right}
• The default value for text-align is left.
• The float property is often set for images and
tables.
• The possible values for float are left,right and
none which is default.

• For example if we want image to be on the right
side of the display and have text flow around its
left side, float property of image is set to right.
• Since the default value for text-align is left, this
property need not be set for text.
The box model
• Virtually all document elements can have
borders.
• These borders have various styles such as color
and width.
• The amount of space between the content of
element and its border is known as padding.
• The amount of space between the border and
adjacent element is known as margin.

Borders
• Every element has a property, border-style,
controls whether the elements content has a
border as well as the style of the border.
• CSS1 requires that borders be available for any
element, but the only required style is solid.
• CSS2 provides several different border styles,
among them dotted, dashed and double.
• The default value for border -style is none, which
is why the contents of elements do not normally
have borders.
• The styles of one of the four sides of an element
can be set with border-top-style, border-bottom-style,
border-left-style and border-right-style.

• The border-width property is used to specify
the thickness of the border. Its possible values
are: thin, medium, thick or a length values in
pixels.
• Setting border –width sets the thickness of all
four sides of an element.
• The width of each of the four border of an
element can be different. These are specified
with border-top-width, border-bottom-width,
border-left-width and border-right-width.

• The color of the border can be controlled by
the border-color property.
• Individual borders of an element can be
colored differently: border-top-color, border-bottom-
color, border-left-color and border-right-
color.
Margins and Padding
• Padding is the space between the content of
an element and the border.
• Margin is the space between the border of an
element and elements neighbour.

• When there is no border, the margin plus the
padding is the space between the content of
an element and its neighbour.
• In this scenario it may appear that there is no
difference between padding and margin, there
is difference when element has background.
• In this case the background extends into
padding but not into the margins.
• The margin properties are named margin,
which applies to all four sides of an element,
margin-left, margin-right,margin-top and
margin-bottom.

• The padding properties are named padding,
which applies to all four sides, padding-left,
padding-right, padding-top and padding-bottom.
Background Images
• The background -image property can be used
to place an image in the background of an
element.
• Text over a background image can be difficult
to read if the image has areas that are same
color as the text, hence care must be taken to
choose the background images.

• The background image is replicated as
necessary to fill the area of element. This
replication is called tilting.
• Tilting can be controlled with background-repeat
property, which can take the value
repeat(default), no-repeat, repeat-x or repeat-y.
• no-repeat property value specifies that just
one copy of image is to be displayed. The
repeat-x value means image is to be repeated
horizontally, repeat-y means to repeat
vertically.

• The position of a nonrepeated background image
can be specified with background-position
property, which can take number of different
values.
• The keyword values are: top, center, bottom, left
and right.
• The simplest uses of these are to use one
keyword to specify the horizontal placement and
one to specify the vertical placement, such as top
left, bottom right and top center.
• If one keyword is given, the other is assumed to
be centre. So top is equivalent to top center and
left is same as center left.

The <span> and <div> tags
• In many situations we want to apply special
font properties to less than a whole paragraph
of text.
• For example it is often useful to have a word
or phrase in a line appear in a different font
size or color.
• The <span> tag is designed for this purpose.
• It is common for documents to have sections,
each consisting of some number of
paragraphs, that have their own presentation
styles.

• Using style class on paragraph we can do this.
• More conveniently it can be done using <div>
tag.

Conflict Resolution
• When there are two different values for the same
property on the same element, there is an
obvious conflict that the browser must resolve.
• We have considered one way in which this
conflict can occur: when style sheets at two or
more levels specify different values for the same
property on the same element.
• This kind of conflict is resolved by the precedence
of three different levels of style sheets.
• In-line style sheets have precedence over
document and external style sheets, document
style sheets have precedence over external style
sheets.

• Conflicts can occur in several other ways. Conflict
may occur within a single style sheet.
• Consider the following style specifications, which
are next to each other in the same document-level
style sheet:
h3 {color:blue;}
body h3 {color:red;}
• Both of these apply to all elements in the body of
the document.
• Inheritance is another source of potential value
conflicts. These can occur if a property on a
particular element has a has a property value
assigned by some style sheet and also inherits a
value for that same property.

• Therefore there should be some method of
resolving conflicts caused by inheritance.
• There are several different origins of specification
of property values. For example, they may come
from a style sheet written by author of
document, they may even come from the
browser user and from the browser.
• Property values with different origins can have
different precedence's.
• In addition, every property value specification has
a particular specificity, depending on particular
kind of selector that is used to set it, and those
specificities have different levels of precedence.

• Finally, property value specifications can be
marked as being important, by including
!important in the specification. For example:
p.special{font-style:italic !important;font-size:
14}
• In this specification, font-style:italic is
important, but font-size:14 is normal.
Whether a specification has been marked as
being important or normal is called the
weight of the specification.
• The weight can be either be normal or
important.

• Conflict resolution is a multistage sorting
process.
• The first step in the process is to gather the
style specification from the three possible
levels of style sheets.
• These specifications are sorted into order by
relative precedence of the style sheet levels.
• Next all the available specifications (those
from style sheets, those from user and those
from the browser) are sorted by origin and
weight.

• This is done according to following rules:
– Important declarations with user origin
– Important declarations with author origin
– Normal declarations with author origin
– Normal declarations with user origin
– Any declarations with browser origin.
• The user-origin specifications are considered
to have the highest precedence.
• If there are conflicts after sorting as described
above, the next step is a sort by specificity.

• This sort is based on the following rules:
– Id selectors
– Class and pseudo-class selectors
– Contextual selectors
– Universal selectors.
• If there are still conflicts, they are resolved by
giving precedence to the most recently seen
specification.
• For example, if a style sheet specifies the
following, and there are no further conflicting
specifications before the element is
displayed, the value used will be the last

• p{font-size:12pt}
p{font-size:10 pt}
• In this case the paragraph element is
displayed with 10pt size.
• The whole sorting process that is used to
resolve style specification conflicts is called
the cascade.

Xhtml

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Xhtml

Similar to Xhtml (20)

Recently uploaded

Recently uploaded (20)

Xhtml