Site Development Foundations
Download
Report
Transcript Site Development Foundations
Site Development
Foundations
© 2004 ProsoftTraining
All rights reserved
Lesson 3:
XHTML Coding
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 nonempty 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 nonempty 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 casesensitive
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