Document

Download Report

Transcript Document 

Lesson 3:
XHTML Coding
© 2007 Prosoft Learning Corporation
All rights reserved
ITD 110 Web Page Design
Copyright © 2004 ProsoftTraining, All Rights Reserved.
Objectives
• Demonstrate knowledge of basic XHTML
document structure
• Identify XHTML document structure tags,
including the <meta> tag and the <!DOCTYPE>
tag
• Create XHTML that validates properly
• Format paragraphs and text with XHTML tags
• Use comments and good coding practices
Markup Tags
• Markup tags are element names enclosed in
angle brackets, or wickets < >
– Tags are key to markup files
– Tags embed the markup element
information in the document so that a user
agent (e.g., browser) will render text as
instructed by the associated element
– The combination of markup tags and
standard text is loosely referred to as either
"code" or "markup"
Container Tags
• Two types of tags: container and empty
• Container tags contain page text between an
opening and a closing tag, as shown
• Container tags are also known as non-empty tags
• XHTML requires the use of container or non-empty
tags
Empty Tags
• An empty tag does not use a closing tag
• Used in HTML only, Transitional or Frameset flavor
• Never used in XHTML; code will not validate if you
use empty tags
Alternative Non-Empty Tag
• HTML and XHTML allow alternative notation for
stand-alone non-empty tags
• Place the slash ( / ) after the element name (before
the closing wicket), rather than before the element
name like in a standard closing tag:
</title> My Home Page
• All XHTML tags must be closed (using either a pair
of container tags or the stand-alone non-empty
tag)
What Constitutes a Tag?
• An element
• An attribute
• A value
Document Structure Tags
• Every XHTML document must have the following
document structure components to render as
expected and validate:
– A <!DOCTYPE> tag
– An <html> tag
– A <head> tag
– Any <meta> tags
– A <link> tag reference to a style sheet
(recommended)
– A <title> tag
– A <body> tag
Document Structure Tags
(cont’d)
Are XHTML Tags
Case-Sensitive?
• XHTML tags are case-sensitive and should
always be typed in lowercase letters
• By contrast, HTML tags are not case-sensitive
Document Type Declaration
(DOCTYPE)
• An SGML statement that describes the nature
of your code
• Placed at the top of the document using the
<!DOCTYPE> tag
• If you do not specify a DOCTYPE, then two
problems may arise:
– You will not be able to control how your
code renders in the future
– You will not be able to use a markup
validator
• Each version and flavor of HTML/XHTML has
its own DOCTYPE
The <html> and <head> Tags
• The <html> </html> tags encompass all other
HTML or XHTML elements in the document
– Takes various attributes
• The <head> </head> tags encompass several
document elements, including:
– The <meta> tag
– The <link> tag that references a CSS file, if
present
– The <title> tag
The <body> tag
• All content to be displayed on the page
through the user agent must be enclosed
between the <body> </body> tags
– <body> takes many attributes, including:
• bgcolor
• background
• link
– Values accompany attributes, and must be
enclosed in quotation marks in XHTML
Web Site File Structure
• When creating a Web
page, you must consider
the site’s file
structure
• Your XHTML/HTML
and image files will
be uploaded to a
server eventually, so
it is always
good practice to
organize
your files
Preparing Your
Development Environment
• Obtain a text editor
• Install multiple browsers
• Set file preferences
Cascading Style Sheets (CSS)
• A technology that adds formatting and
structure to your pages
• A style sheet is simple text file that contains
instructions
• If all pages on your site are linked to the same
style sheet, then one simple change to the
style sheet will change all specified elements
across the site
• Strict flavors of HTML and XHTML require that
you use style sheets
CSS Terminology
•
•
•
•
•
Proper CSS structure
Inheritance
CSS and XHTML
Benefits of using CSS
Style sheets and compatibility
Paragraph Formatting
and Block-Level Elements
• Block-level markup elements
– Affect entire paragraphs or multiple
paragraphs
• The <p> tag
• The <br/> tag
• Text-level markup elements
– Elements that can affect as little as a single
character or word
• <bold> or <strong>
• <i> or <em>
Heading Levels
• Block-level element
• Heading levels 1
through 6
– <h1> </h1>
– <h2> </h2>
– <h3> </h3>
– <h4> </h4>
– <h5> </h5>
– <h6> </h6>
Tag Nesting in Markup
• Placing one pair of tags between another
– Proper: <h1><i> ... </i></h1>
– Improper: <h1><i> ... </h1></i>
• Improper: The <i> tag is opened within the
<h1> tags, but closed after the </h1> tag
• If you fail to properly nest code, your pages
may still render in some user agents, but
they will not validate and may fail to render
in the future
Primitive Formatting with the
<pre> Tag
• The <pre> tag retains formatting on
preformatted text
• Can be used to retain tabular format, fonts,
etc.
• All text between <pre> </pre> tags will render
as formatted in the HTML file
Indenting and Centering Text
• The <div> tag
• Alternatively, use <p align= "center"> </p>
• The <blockquote> tag can also be used to
indent (but not center) text
Text-Level Elements
• Bold, italic and underlined text
• Bold:
– <b> and <strong>
• Italic:
– <i> and <em>
Font Style Elements
vs. Phrase Elements
• The <b> element is a font style element, <strong> is a
phrase element; both create boldface text
• The same is true of <i> and <em>, respectively, which
both create italic or emphasized text
• The difference is that <b> specifically means apply the
bold font style, whereas <strong> indicates that the text
is to be given a strong appearance
• In short, <b> represents a font appearance instruction,
whereas <strong> represents the weighting of the
phrase relative to surrounding text
The <code>,
<kbd> and <samp> Tags
• All make text appear in a fixed-width font in an
HTML 4.0-compliant browser window
• Available to both HTML 4.0 and XHTML
Lists
• Two types of lists:
• Ordered
– A numbered list
– Uses the <ol> element and requires a
closing tag </ol>
• Unordered
– A bulleted list
– Uses the <ul> element and requires a
closing tag </ul>
Lists
(cont’d)
• Ordered list code:
<h2>Ordered List</h2>
<ol>
<li>This is the first numbered item.</li>
<li>This is the second numbered item.</li>
<li>This is the last numbered item.</li>
</ol>
• Unordered list code:
<h2>Unordered List</h2>
<ul>
<li/>This is the first bulleted item.
<li/>This is the second bulleted item.
<li/>This is the last bulleted item.
</ul>
Good Coding Practice
• Create code that can be easily read by others
• Exceptions:
– Some code might encounter problems if it
includes random spaces
– Always test your code in multiple browsers and
validate it
• Adding hidden comments:
<!-- Text inside of these brackets will not appear -->
• Use comments to annotate code or document
changes
Lesson 3 Summary
• Lesson 3 XHTML Coding
• See Skills Review