Scribd
Upload
7 views

HTML Lab1

Uploaded by

mnasir1976
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

HTML Lab1

Uploaded by

mnasir1976
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Introduction to

XHTML
OBJECTIVES
In this chapter you will learn:
 To understand important components of XHTML
documents.
 To use XHTML to create web pages.
 To add images to web pages.
 To create and use hyperlinks to navigate web
pages.
 To mark up lists of information.
 To create tables with rows and columns of data
and control table formatting.
 To create and use forms to get user input.
 To make web pages accessible to search engines
using <meta> tags.
HTML vs XHTML
HTML or HyperText Markup Language is the main markup
language for creating web pages and other information that can be
displayed in a web browser.

XHTML (Extensible HyperText Markup Language) is a family of


XML markup languages that mirror or extend versions of the widely
used Hypertext Markup Language (HTML), the language in which
web pages are written.
HTML XHTML
Filename extension .html, .htm .xhtml, .xht, .xml, .html, .htm
Internet media type text/html application/xhtml+xml
Developed by W3C & WHATWG World Wide Web Consortium
Type of format Document file format Markup language
Extended from SGML XML, HTML
Stands for HyperText Markup Extensible HyperText Markup
Language Language
Application Application of Standard Application of XML
Generalized Markup
Language (SGML).
Function Web pages are written in Extended version of HTML that is
HTML. stricter and XML-based.
Nature Flexible framework Restrictive subset of XML and
requiring lenient HTML needs to be parsed with standard
specific parser. XML parsers.
Origin Proposed by Tim Berners- World Wide Web Consortium
Lee in 1987. Recommendation in 2000.
Versions HTML 2, HTML 3.2, HTML XHTML 1, XHTML 1.1, XHTML 2,
4.0, HTML 5. XHTML 5.
Introductio
n
 XHTML (Extensible HyperText Markup Language)
 markup language for creating web pages

 Based on HTML (HyperText Markup Language)


 legacy technology of the World Wide Web Consortium (W3C)

 XHTML 1.0
 Allows only a document’s content and structure to appear in a valid
XHTML document, and not its formatting
 Formatting is specified with Cascading Style Sheets
EDITING XHTML

 A machine that runs a specialized piece of


software called a web server stores XHTML
documents
FIRST XHTML EXAMPLE

 In XHTML, text is marked up with elements delimited by


tags that are names contained in pairs of angle brackets
 Every XHTML document contains a start <html> tag and an end
</html> tag

 Some elements may contain attributes that provide


additional information about the element

 Comments in XHTML always begin with <!-- and end with


-->. The browser ignores all text inside a comment
FIRST XHTML EXAMPLE
(CONT.)
 Every XHTML document contains a head element
which generally contains:
 A title
 A body element

 head element
 generally is not rendered in the display window
FIRST XHTML EXAMPLE
(CONT.)
 The title element:
 Names a web page
 Usually appears in the colored bar (called the title bar) at
the top of the browser window
 Is the text identifying a page when users add your page
to their list of Favorites or Bookmarks

 The body element:


 Contains the document’s content, which may include text
and tags
FIRST XHTML EXAMPLE
(CONT.)
 All text placed between the <p> and </p> tags
forms one paragraph
 XHTML documents delimit an element with start and
end tags
 A start tag consists of the element name in angle brackets
(e.g., <html>)
 An end tag consists of the element name preceded by a
forward slash (/) in angle brackets (e.g., </html>)

 Many start tags have attributes that provide


additional information about an element
 Each attribute has a name and a value separated by an equals
sign (=)
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
FIRST
3
4
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML
5 <!-- Fig. 4.1: main.html --> EXAMPLE.
XHTML comments, not
interpreted by the browser
6 <!-- First XHTML example. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head> Creates a head element
9 <title>Welcome</title>
Creates a title element, which
10 </head> contains the text Welcome
11
12 <body>
13 <p>Welcome to XHTML!</p> Creates a p element within the body,
which displays welcome text
14 </body>
15 </html>
COMMON PROGRAMMING ERROR
XHTML does not permit tags to overlap—a nested element’s
end tag must appear in the document before the enclosing
element’s end tag.
For example, the nested XHTML tags
<head><title>hello</head></title>
cause a syntax error, because the enclosing head element’s
ending </head> tag appears before the nested title
element’s ending </title> tag.
W3C XHTML VALIDATION
SERVICE
 XHTML documents that are syntactically correct
are guaranteed to render properly

 XHTML documents that contain syntax errors


may not display properly

 Validation services (e.g., validator.w3.org)


ensure that an XHTML document is syntactically
correct
HEADINGS

 XHTML provides six headings (h1 through


h6) for specifying the relative importance
of information

 Heading element h1 is considered the most


significant heading and is rendered in the
largest font

 Each successive heading element (i.e., h2, h3,


etc.) is rendered in a progressively smaller
font
1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Heading
4 elements h1
5 <!-- Fig. 4.2: heading.html -->
6 <!-- Heading elements h1 through h6. --> through h6
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Headings</title>
10 </head> Creates six headings, each with
11
12 <body>
decreasing significance
13 <h1>Level 1 Heading</h1>
14 <h2>Level 2 heading</h2>
15 <h3>Level 3 heading</h3>
16 <h4>Level 4 heading</h4>
17 <h5>Level 5 heading</h5>
18 <h6>Level 6 heading</h6>
19 </body>
20 </html>
LINKIN
G
 A hyperlink references or links to other
resources, such as XHTML documents and
images

 Web browsers typically underline text


hyperlinks and color them blue by default
LINKING (CONT.)

 Users can insert links with the a (anchor)


element.
 The href attribute specifies the resource (e.g., page,
file, e-mail address) being linked

 Anchors can link to an e-mail address using a mailto:


URL
 When a user clicks this type of anchored link, most browsers
launch the default e-mail program (e.g., Outlook Express) to
initiate an e-mail message addressed to the linked address.
 The strong element typically causes the browser to
render text in a bold font
1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> LINKING TO
5
6
7
<!-- Fig. 4.3: links.html -->
<!-- Linking to other web pages. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
OTHER WEB
8
9
<head>
<title>Links</title>
PAGES.
10 </head>
11
12 <body>
13 <h1>Here are my favorite sites</h1> Creates anchor elements that link to
14 <p><strong>Click a name to go to that page.</strong></p> the URL specified in the href
15
16 <!-- Create four text hyperlinks -->
attribute
17 <p><a href = "http://www.deitel.com">Deitel</a></p>
18 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
19 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
20 <p><a href = "http://www.usatoday.com">USA Today</a></p>
21 </body>
22 </html>
1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> LINKING TO
4
5
6
<!-- Fig. 4.4: contact.html -->
<!-- Linking to an e-mail address. -->
AN E-MAIL
7
8
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> ADDRESS
9 <title>Contact Page</title>
10 </head>
11
12 <body> Hyperlink that creates a message to
13 <p> the address [email protected]
14 My email address is with the computer’s default e-mail
15 <a href = "mailto:[email protected]"> program
16 [email protected]
17 </a>
18 . Click the address and your default email client
19 will open an e-mail message and address it to me.
20 </p>
21 </body>
22 </html>

You might also like