Chapter2 Introduction To XHTML

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

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.

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

HTML versus XHTML

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

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 -->

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

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.

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

Basic Text Markup
Paragraphs:
<p> .. </p>
Line Breaks:
<br />
- slash indicates that the tag is both an opening
and closing tag

Contd..
Headings:
<h1> … </h1>
:
:
<h6> .. </h6>

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

Contd..
Subscript and superscript characters:
<sub> .. </sub>
<sup> ..</sup>
 <tt> .. </tt> for mono space font

Contd..
Character Entities:
Character Entity Meaning
& & Ampersand
< < Less Than
> > Greater Than
“ " Double quote
‘ ' Single quote
¼ ¼ One quarter
½ ½ One Half
¾ ¾ Three Quarters
° ° Degree
(space) &nbsp Non Breaking space

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
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.

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">
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 )

Contd..
The <img /> tag:
Attributes:
Src, Alt, width, height
Ex: <imag src=“abc.jpg” alt =“Picture Not
Available” />

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>

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>

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

Definition List
<dl> - Definition List </dl>

<dt> - Define Term </dt>
<dd> - Definition </dd>

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
<!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>

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

<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>

<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>

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>
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>

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

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>

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>

Contd..
<select name="food" size="3" multiple>
<option value ="choco" selected> chocolate
<option value ="icecream" selected> ice cream
<option value ="milkshake">milk shakes
</select>

Action Buttons
<input type="button" name="btnclck" value="click
here">
<input type="submit" name="btnsubmit"

value="submit">
<input type="reset" name="btnreset value="reset">

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.

Example
<html>
<frameset cols = "50%,*">
<frameset rows = "50%,50%">

<frame src ="D:\COLLEGE_ACADEMIC\WEB 2.0 AND RIA\HTML
EXAMPLES\EX1.HTML" />
</frameset>
<frameset cols = "50%,50%">

</frameset>
</frameset>
</html>

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.

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.

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.

Contd..
Element Nesting:
 Although HTML has rules against improper
nesting of elements, they are not enforced.
 In XHTML, these nesting rules are strictly
enforced

Chapter2 Introduction To XHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter2 Introduction To XHTML

Uploaded by

Copyright:

Available Formats

2.

08/24/23 Chapter 2. Introduction to XHTML 1

08/24/23 Chapter 2. Introduction to XHTML 2

08/24/23 Chapter 2. Introduction to XHTML 3

08/24/23 Chapter 2. Introduction to XHTML 4

08/24/23 Chapter 2. Introduction to XHTML 5

08/24/23 Chapter 2. Introduction to XHTML 6

08/24/23 Chapter 2. Introduction to XHTML 7

08/24/23 Chapter 2. Introduction to XHTML 8

08/24/23 Chapter 2. Introduction to XHTML 9

08/24/23 Chapter 2. Introduction to XHTML 10

08/24/23 Chapter 2. Introduction to XHTML 11

08/24/23 Chapter 2. Introduction to XHTML 12

08/24/23 Chapter 2. Introduction to XHTML 13

 <tt> .. </tt> for mono space font

08/24/23 Chapter 2. Introduction to XHTML 14

08/24/23 Chapter 2. Introduction to XHTML 15

08/24/23 Chapter 2. Introduction to XHTML 17

08/24/23 Chapter 2. Introduction to XHTML 19

08/24/23 Chapter 2. Introduction to XHTML 20

08/24/23 Chapter 2. Introduction to XHTML 21

08/24/23 Chapter 2. Introduction to XHTML 22

08/24/23 Chapter 2. Introduction to XHTML 23

<dl> - Definition List </dl>

08/24/23 Chapter 2. Introduction to XHTML 24

08/24/23 Chapter 2. Introduction to XHTML 26

 Rowspan attribute tells the browser to make

08/24/23 Chapter 2. Introduction to XHTML 27

08/24/23 Chapter 2. Introduction to XHTML 28

08/24/23 Chapter 2. Introduction to XHTML 29

08/24/23 Chapter 2. Introduction to XHTML 31

08/24/23 Chapter 2. Introduction to XHTML 32

<input type="password" name="passname" size=20

<label> <input type="checkbox“ name="food"

<label> <input type="radio" name="gender" value="m”/>

08/24/23 Chapter 2. Introduction to XHTML 33

08/24/23 Chapter 2. Introduction to XHTML 34

08/24/23 Chapter 2. Introduction to XHTML 35

<input type="submit" name="btnsubmit"

<input type="reset" name="btnreset value="reset">

08/24/23 Chapter 2. Introduction to XHTML 36

08/24/23 Chapter 2. Introduction to XHTML 37

<frameset rows = "50%,50%">

<frameset cols = "50%,50%">

08/24/23 Chapter 2. Introduction to XHTML 38

08/24/23 Chapter 2. Introduction to XHTML 39

08/24/23 Chapter 2. Introduction to XHTML 40

id and name attributes:

08/24/23 Chapter 2. Introduction to XHTML 41

08/24/23 Chapter 2. Introduction to XHTML 42

You might also like