2.
Introduction to XHTML
08/24/23 Chapter 2. Introduction to XHTML 1
Topics
•HTML and XHTML versions and differences
• Basic Syntax
• Images
• Hypertext Links
• Lists
• Tables
• Forms
• Frames
• Syntactic differences between HTML and XHTML
08/24/23 Chapter 2. Introduction to XHTML 2
HTML and XHTML
MOSAIC (CERN) – 1st Graphical web browser(1993)
As soon as the internet grew into prominence there were 2
companies which developed the web browsers.
Those companies are
1 . Microsoft : Which developed the Internet Explorer
2 . Netscape : Which developed the Netscape Browser
These 2 companies browsers developed their own extensions
to the already available HTML.
So it became highly challenging for the content providers to
develop their web pages so that the content could be properly
interpreted on all the browsers.
08/24/23 Chapter 2. Introduction to XHTML 3
Contd..
Therefore to standardize the HTML the Berners-Lee
founded the W3C( world wide consortium). (1994)
HTML 2.0 - 1995
HTML 3.2 - 1997
HTML 4.01 - 1999
As further enhancement for the HTML which also
incorporates the features of XML a newer version called
as XHTML1.0 was developed (2000)
Later the W3C also standardized the version of XHTML
known as XHTML1.1 in the year 2001
08/24/23 Chapter 2. Introduction to XHTML 4
HTML versus XHTML
08/24/23 Chapter 2. Introduction to XHTML 5
Basic Syntax
The fundamental syntactic units of XHTML are
called Tags.
Tags are used to specify categories of content
Syntax of a tag is the tag’s name surrounded by
pointed angle brackets(<>)
Most tags appear in pairs: an opening tag and a
closing tag
The opening tag & its closing tag together specify a
container for the content they enclose
The container and its content together are called an
element
08/24/23 Chapter 2. Introduction to XHTML 6
Contd..
Attributes values must be delimited by double
quotes
Comments take the form:
<!– comment line -->
It can be multiple lines also
<!– comment line1
comment line2 -->
08/24/23 Chapter 2. Introduction to XHTML 7
Contd..
XHTML documents must include the 4 tags
<html>, <head>, <title> and <body>
<html> tag identifies the root element of the document. It
should end with </html> tag
The HTML element includes an attribute , xmlns, that
specifies the XHTML namespaces, as shown below:
<html xmlns=http://www.w3.org/1999/xhtml
xmlns= >
Although the xmlns attribute’s value looks like a URL, it
doesn’t specify a document
It just a name that happens to have the form of a URL
08/24/23 Chapter 2. Introduction to XHTML 8
Contd..
An XHTML document consists of 2 parts, the head
and the body .
The <head> element contains the head part of the
document, which provides information about the
document rather than its content.
The body of a document provides the content of the
document which itself typically includes tags and
attributes.
The content of the title element is displayed by the
browser at the top of its display window, usually in
the browser’s window title bar.
08/24/23 Chapter 2. Introduction to XHTML 9
Standard HTML Document Structure
Every XHTML doc must begin with an xml declaration
element (for identification)
<?xml version=“1.0” encoding=“utf-8”?>
An SGML DOCTYPE command follows next (specifies syntax
rules)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>……..etc
08/24/23 Chapter 2. Introduction to XHTML 10
Basic Text Markup
Paragraphs:
<p> .. </p>
Line Breaks:
<br />
- slash indicates that the tag is both an opening
and closing tag
08/24/23 Chapter 2. Introduction to XHTML 11
Contd..
Headings:
<h1> … </h1>
:
:
<h6> .. </h6>
08/24/23 Chapter 2. Introduction to XHTML 12
Contd..
Block Quotations:
<blockquote> .. </blockquote>
Font Styles and Sizes:
<b> - bold
<i> - italic
<u> - underline
<big> and <small> tags provide the means to
specify relative sizes
08/24/23 Chapter 2. Introduction to XHTML 13
Contd..
Subscript and superscript characters:
<sub> .. </sub>
<sup> ..</sup>
<tt> .. </tt> for mono space font
08/24/23 Chapter 2. Introduction to XHTML 14
Contd..
Character Entities:
Character Entity Meaning
& & Ampersand
< < Less Than
> > Greater Than
“ " Double quote
‘ ' Single quote
¼ ¼ One quarter
½ ½ One Half
¾ ¾ Three Quarters
° ° Degree
(space)   Non Breaking space
08/24/23 Chapter 2. Introduction to XHTML 15
Contd..
Horizontal Rules:
<hr />
The meta Element:
Is to provide additional information about a
document
It has no content; rather, all of the provided
information is specified through attributes
The two attributes that are used to provide
information are name and content
08/24/23 Chapter 2. Introduction to XHTML 16
Contd..
The user makes up a name as the value of the name
attribute and specifies information through the
content attribute
One commonly chosen name is keywords
The value of the content attribute associated with the
keywords are those that a document author believes
characterizes his or her document.
Example:
<meta name=“keywords” content=“binary trees, linked
lists, stacks” />
Web search engines use the information provided
with the meta element to categorize Web documents
in their indices.
08/24/23 Chapter 2. Introduction to XHTML 17
Examples
Example 1 - Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML,
XHTML, JavaScript">
Example 2 - Define a description of your web page:
<meta name="description" content="Free Web tutorials
on HTML and CSS">
Example 3 - Define the author of a page:
<meta name="author" content="Hege Refsnes">
Example 4 - Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
08/24/23 Chapter 2. Introduction to XHTML 18
IMAGES
Image Formats:
Two most common methods of representing
images are Graphic Interchange Format (GIF)
and Joint Photographic Experts Group (JPEG)
format.
Most contemporary browsers can render
images in either of these two formats
A third image format is now gaining
popularity, Portable Network Graphics (PNG
pronounce ping )
08/24/23 Chapter 2. Introduction to XHTML 19
Contd..
The <img /> tag:
Attributes:
Src, Alt, width, height
Ex: <imag src=“abc.jpg” alt =“Picture Not
Available” />
08/24/23 Chapter 2. Introduction to XHTML 20
HyperText Links
Links:
Anchor tag:
<a href=URL of the document> text </a>
Image as a link:
<a href=“a.html”>
<img src=“a.jpg” alt=“An image of a small
airplane”>
</a>
08/24/23 Chapter 2. Introduction to XHTML 21
Contd..
Targets within Documents:
The target element can include an id attribute, which
can then be used to identify it in an href attribute
Example:
<h2 id=“avionics”> Avionics </h2>
If the target is in the same document as the link, the
target is specified in the href attribute value by
preceding the id value with a # sign
Example:
<a href =“#avionics”> What about Avionics?</a>
08/24/23 Chapter 2. Introduction to XHTML 22
Lists
Unordered Lists:
<ul> - creates an unordered list
<li> - To specify each element in the list
Ordered Lists:
<ol> - creates an ordered list with Type as
attribute
<li>- To specify each element in the list
08/24/23 Chapter 2. Introduction to XHTML 23
Definition List
<dl> - Definition List </dl>
<dt> - Define Term </dt>
<dd> - Definition </dd>
08/24/23 Chapter 2. Introduction to XHTML 24
Tables
<table>
Attributes:
BORDER, HEIGHT, WIDTH,
CELLPADDING, CELLSPACING,
BORDERCOLOR
<caption align=“bottom”/”top”/”left”/”right”>
<tr> - row </tr>
<th> - heading </th>
<td> - Each data cell of a row is specified with the table
data tag
08/24/23 Chapter 2. Introduction to XHTML 25
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
08/24/23 Chapter 2. Introduction to XHTML 26
Contd..
Colspan attribute tells the browser to make
the cell as wide as the specified no of cols in
the table
Rowspan attribute tells the browser to make
the cell as wide as the specified no of rows in
the table
08/24/23 Chapter 2. Introduction to XHTML 27
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH
COLSPAN=2>Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2>Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR>
<TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
08/24/23 Chapter 2. Introduction to XHTML 28
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH
ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH>
<TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH ROWSPAN=3
BGCOLOR="#99CCFF">Sales</TH> <TD>Claire
Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce
Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny
Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
08/24/23 Chapter 2. Introduction to XHTML 29
Contd..
Align and valign attributes:
Align = “left”/”right”/”center”
Valign=“top”/”bottom”
CellPadding:
used to specify the spacing between the contents of a cell and the inner walls
of the cell. This is often used to prevent text in a cell from being too close to
the edge of the cell.
<table border="1" cellpadding="10">
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
08/24/23 Chapter 2. Introduction to XHTML 30
Contd..
CellSpacing:
Used to specify the distance between cells in a table
<table border="1" cellspacing="5">
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
08/24/23 Chapter 2. Introduction to XHTML 31
2.9 Form tag
<form>
- name, action and method
Action attribute specifies the URL of the
application on the web server that is to be
called when the user clicks on submit button.
Method can be either GET or POST
Default is GET
08/24/23 Chapter 2. Introduction to XHTML 32
INPUT tag
<input type="text" name="txtname" size=20
maxlength=50 />
<input type="password" name="passname" size=20
maxlength=50 />
<label> <input type="checkbox“ name="food"
value="chocolate" checked /> chocolate </label>
<label> <input type="radio" name="gender" value="m”/>
male
</label>
08/24/23 Chapter 2. Introduction to XHTML 33
Textarea Tag
<textarea name="address" rows=6 cols=30>
</textarea>
Select Tag
<select name="gender" size="1">
<option value ="f" selected> female </option>
<option value ="m"> male </option>
</select>
08/24/23 Chapter 2. Introduction to XHTML 34
Contd..
<select name="food" size="3" multiple>
<option value ="choco" selected> chocolate
<option value ="icecream" selected> ice cream
<option value ="milkshake">milk shakes
</select>
08/24/23 Chapter 2. Introduction to XHTML 35
Action Buttons
<input type="button" name="btnclck" value="click
here">
<input type="submit" name="btnsubmit"
value="submit">
<input type="reset" name="btnreset value="reset">
08/24/23 Chapter 2. Introduction to XHTML 36
Frames
Frameset tag:
No of frames and their layout in the browser
window are specified
Takes the place of the body element in a
document
A document has either a body or a frameset
but cannot have both.
Have rows and cols attributes which may take
the area in % or pixel values.
08/24/23 Chapter 2. Introduction to XHTML 37
Example
<html>
<frameset cols = "50%,*">
<frameset rows = "50%,50%">
<frame src ="D:\COLLEGE_ACADEMIC\WEB 2.0 AND RIA\HTML
EXAMPLES\EX1.HTML" />
<frame src ="D:\COLLEGE_ACADEMIC\WEB 2.0 AND RIA\HTML
EXAMPLES\EX2.HTML" />
</frameset>
<frameset cols = "50%,50%">
<frame src ="D:\COLLEGE_ACADEMIC\WEB 2.0 AND RIA\HTML
EXAMPLES\EX1.HTML" />
<frame src ="D:\COLLEGE_ACADEMIC\WEB 2.0 AND RIA\HTML
EXAMPLES\EX2.HTML" />
</frameset>
</frameset>
</html>
08/24/23 Chapter 2. Introduction to XHTML 38
Syntactic differences between
HTML and XHTML
Case Sensitivity:
In HTML, tag and attribute names are case
insensitive
In XHTML, all tag and attribute names must be in
lowercase
Closing tags:
In HTML, closing tags may be omitted if the
processing agent (browser) can infer their presence.
In XHTML, all elements must have closing tags.
08/24/23 Chapter 2. Introduction to XHTML 39
Contd..
Quoted attribute values:
In HTML, attribute values must be quoted
only if there are embedded special characters
or white space characters. Numeric values are
rarely quoted in HTML.
In XHTML, all attribute values must be double
quoted, regardless of what characters are
included in the value.
08/24/23 Chapter 2. Introduction to XHTML 40
Contd..
Explicit attribute values:
In HTML, some attribute values are implicit; that is,
they need not be explicitly stated
In XHTML, attribute values must be explicitly stated
id and name attributes:
HTML markup often uses the name attribute for
elements. Id attribute was added to nearly all elements
In XHTML, the use of id is encouraged, and the use
of name is discouraged, however, form elements must
still use the name attribute because it is used in the
form data.
08/24/23 Chapter 2. Introduction to XHTML 41
Contd..
Element Nesting:
Although HTML has rules against improper
nesting of elements, they are not enforced.
In XHTML, these nesting rules are strictly
enforced
08/24/23 Chapter 2. Introduction to XHTML 42
