Вы находитесь на странице: 1из 30
IntroductionIntroduction toto XHTMLXHTML Chapter 2
IntroductionIntroduction toto XHTMLXHTML
Chapter 2
LearningLearning OutcomesOutcomes In this chapter, you will learn about: ◦ XHTML syntax, tags, and document
LearningLearning OutcomesOutcomes
In this chapter, you will learn about:
◦ XHTML syntax, tags, and document type
definitions
◦ The anatomy of a web page
◦ Formatting the body of a web page
◦ Formatting the text on a web page
◦ Special Characters
◦ Connecting Web pages using hyperlinks
WhatWhat isis HTML?HTML? HTML: The set of markup symbols or codes placed in a file
WhatWhat isis HTML?HTML?
HTML:
The set of markup symbols or codes
placed in a file intended for display on a
Web browser page.
The World Wide Web Consortium
(http://w3c.org) sets the standards for
HTML and its related languages.
WhatWhat isis XHTML?XHTML? The newest version of HTML eXtensible HyperText Markup Language. XHTML uses: ◦
WhatWhat isis XHTML?XHTML?
The newest version of HTML
eXtensible HyperText Markup
Language.
XHTML uses:
◦ the elements and attributes of HTML
◦ the syntax of XML (eXtensible Markup
Language).
XMLXML SyntaxSyntax An XML document must be well-formed. ◦ Use lowercase ◦ Use opening and
XMLXML SyntaxSyntax
An XML document must be well-formed.
◦ Use lowercase
◦ Use opening and closing tags
<body>
</body>
◦ Close stand-alone tag with special syntax
<hr />
FirstFirst WebWeb pagepage
FirstFirst WebWeb pagepage
DocumentDocument TypeType DefinitionDefinition (DTD)(DTD) W3C Recommendation: Use a Document Type Definition to
DocumentDocument
TypeType DefinitionDefinition (DTD)(DTD)
W3C Recommendation:
Use a Document Type Definition to identify the
type of markup language used in a web page.
XHTML 1.0 Transitional
This is the least strict specification for XHTML 1.0. It allows the
use of both Cascading Style Sheets and traditional formatting
instructions such as fonts.
XHTML 1.0 Strict
Requires exclusive use of Cascading Style Sheets.
XHTML 1.0 Frameset
Required for pages using XHTML frames. We will not use this.
HeadHead && BodyBody SectionsSections Head Section Contains information that describes the Web page document
HeadHead && BodyBody SectionsSections
Head Section
Contains information that describes the Web
page document
<head>
…head section info goes here
</head>
Body Section
Contains text and elements that display in the
Web page document
<body>
…body section info goes here
</body>
AnatomyAnatomy ofof anan XHTMLXHTML ElementElement Opening tag <h1>content</h1> Closing Tag The
AnatomyAnatomy ofof anan XHTMLXHTML ElementElement
Opening tag
<h1>content</h1>
Closing Tag
The closing tag always needs a slash
before the tag name.
XHTMLXHTML AttributesAttributes Attributes always go inside the opening tag. <h1 id=“blah”
XHTMLXHTML AttributesAttributes
Attributes always go inside the
opening tag.
<h1 id=“blah” class=“big”>
content</h1>
Tags can have multiple attributes,
each separated by a space.
XHTMLXHTML ElementsElements Top-level elements: html, head, and body Head elements: title, meta and script Body
XHTMLXHTML ElementsElements
Top-level elements: html, head, and
body
Head elements: title, meta and script
Body elements:
◦ Block-Level elements : take the tagged text
and separate it from the rest of the document
flow
◦ Inline elements : they can be nested almost
anywhere within a block-level
XHTMLXHTML <title><title> andand <meta<meta />/> tagstags <!DOCTYPE html PUBLIC
XHTMLXHTML
<title><title> andand <meta<meta />/> tagstags
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My First Web Page</title>
<meta name="description" content="Latest sports news and live scores
from Yahoo! Eurosport UK. Complete sport coverage with Football
results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports, sport,sports
news,live scores,football,cricket,f1, golf,rugby,tennis,uk,yahoo">
</head>
<body>
Body info goes here
</body>
</html>
TheThe HeadingHeading ElementElement <h1>Heading Level 1</h1> <h2>Heading Level 2</h2>
TheThe HeadingHeading ElementElement
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
XHTMLXHTML <p><p> tagtag Paragraph element <p> …paragraph goes here… </p> ◦
XHTMLXHTML
<p><p> tagtag
Paragraph element
<p> …paragraph goes here… </p>
◦ Groups sentences and sections of text
together.
◦ Configures a blank line above and below
the paragraph
XHTMLXHTML <br<br />/> tagtag Line Break element ◦ Stand-alone tag …text goes here <br />
XHTMLXHTML
<br<br />/> tagtag
Line Break element
◦ Stand-alone tag
…text goes here <br />
This starts on a new line….
◦ Causes the next element or text to display
on a new line
XHTMLXHTML SpecialSpecial CharactersCharacters Display special characters such as quotes, copyright symbol, etc.
XHTMLXHTML
SpecialSpecial CharactersCharacters
Display special characters such as quotes,
copyright symbol, etc.
Character
Code
©
&copy;
<
&lt;
>
&gt;
&
&amp;
&nbsp;
XHTMLXHTML ListList BasicsBasics Definition List Ordered List Unordered List
XHTMLXHTML ListList BasicsBasics
Definition List
Ordered List
Unordered List
XHTMLXHTML DefinitionDefinition ListList Useful to display a list of terms and definitions or a list
XHTMLXHTML
DefinitionDefinition ListList
Useful to display a list of terms and definitions
or a list of FAQ and answers
◦ <dl> tag
Contains the definition list
◦ <dt> tag
Contains a defined term
Configures a line break above and below the text
◦ <dd> tag
Contains a data definition or description
Indents the text
XHTMLXHTML OrderedOrdered ListList Conveys information in an ordered fashion <ol> Contains the ordered list
XHTMLXHTML
OrderedOrdered ListList
Conveys information in an ordered fashion
<ol>
Contains the ordered list
◦ type attribute determines numbering scheme of list,
default is numerals
<li>
Contains an item in the list
XHTMLXHTML OrderedOrdered ListList ExampleExample <ol> <li>Apply to school</li>
XHTMLXHTML
OrderedOrdered ListList ExampleExample
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
XHTMLXHTML UnorderedUnordered ListList ExampleExample <ul> <li>TCP</li>
XHTMLXHTML
UnorderedUnordered ListList ExampleExample
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
CheckpointCheckpoint Describe the features of a heading tag and how it configures the text.
CheckpointCheckpoint
Describe the features of a heading tag
and how it configures the text.
XHTMLXHTML <a><a> tagtag The anchor element ◦ Specifies a hyperlink reference (href) to a file
XHTMLXHTML
<a><a> tagtag
The anchor element
◦ Specifies a hyperlink reference (href) to a file
◦ Text between the <a> and </a> is displayed on the
web page.
<a href="contact.html">Contact Us</a>
◦ href Attribute
Indicates the file name or URL
Web page document, photo, pdf, etc.
23
XHTMLXHTML <a><a> tagtag Absolute link ◦ Link to other Web sites <a
XHTMLXHTML
<a><a> tagtag
Absolute link
◦ Link to other Web sites
<a href="http://yahoo.com">Yahoo</a>
Relative link
◦ Link to pages on your own site
<a href="index.htm">Home</a>
24
MoreMore onon RelativeRelative LinkingLinking Relative links from the home page: index.html <a
MoreMore onon
RelativeRelative LinkingLinking
Relative links from the
home page:
index.html
<a href="contact.html">Contact</a>
<a href="products/collars.html">Collars</a>
<a href=" /index.html">Home</a>
<a href="
/services/bathing.html">Dog
Bathing</a>
25
OpeningOpening aa LinkLink inin aa NewNew BrowserBrowser WindowWindow The target attribute on the anchor element
OpeningOpening aa LinkLink
inin aa NewNew BrowserBrowser WindowWindow
The target attribute on the anchor element
opens a link in a new browser window or new
browser tab.
<a href="http://yahoo.com"
target="_blank">Yahoo!</a>
26
XHTMLXHTML LinkingLinking toto FragmentFragment IdentifiersIdentifiers A link to a part of a Web page Also
XHTMLXHTML LinkingLinking toto FragmentFragment IdentifiersIdentifiers
A link to a part of a Web page
Also called named fragments, fragment ids
Two components:
1. The element that identifies the named fragment of a
Web page.This requires the id attribute.
<div id=“top”> …
</div>
2.The anchor tag that links to the named fragment of a
Web page.This uses the href attribute.
<a href=“#top”>Back to Top</a>
Note the use of the # in the anchor tag!
27
CheckpointCheckpoint Describe when to use an absolute link. Is the http protocol used in the
CheckpointCheckpoint
Describe when to use an absolute link.
Is the http protocol used in the href value?
Describe when to use a relative link. Is the
http protocol used in the href value?
28
WritingWriting ValidValid XHTMLXHTML Check your code for syntax errors ◦ Benefit: Valid code more consistent
WritingWriting ValidValid XHTMLXHTML
Check your code for syntax errors
◦ Benefit:
Valid code
more consistent browser display
W3C XHTML Validation Tool
◦ http://validator.w3.org
SummarySummary This chapter provided an introduction to XHTML. It began with an introduction to the
SummarySummary
This chapter provided an introduction to
XHTML.
It began with an introduction to the HTML,
discussed the transition to XHTML, continued
with the anatomy of a web page, introduced
inline and block-level formatting, and
demonstrated the XHTML techniques used to
create hyperlinks.
You will use these skills over and over again as
you create Web pages.