Embed Size (px)
Citation preview
Site Development Site Development FoundationsFoundations
© 2004 ProsoftTraining© 2004 ProsoftTraining
All rights reservedAll rights reserved
Lesson 3:Lesson 3:XHTML CodingXHTML Coding
ObjectivesObjectives
Demonstrate knowledge of basic XHTML Demonstrate knowledge of basic XHTML document structuredocument structure
Identify XHTML document structure tags, Identify XHTML document structure tags, including the <meta> tag and the <!including the <meta> tag and the <!DOCTYPE> tagDOCTYPE> tag
Create XHTML that validates properlyCreate XHTML that validates properly Format paragraphs and text with XHTML Format paragraphs and text with XHTML
tagstags Use comments and good coding practicesUse comments and good coding practices
Markup TagsMarkup Tags
Markup tags are element names enclosed Markup tags are element names enclosed in angle brackets, or wickets < >in angle brackets, or wickets < >• Tags are key to markup filesTags are key to markup files• Tags embed the markup element Tags embed the markup element
information in the document so that a information in the document so that a user agent (e.g., browser) will render text user agent (e.g., browser) will render text as instructed by the associated elementas instructed by the associated element
• The combination of markup tags and The combination of markup tags and standard text is loosely referred to as standard text is loosely referred to as either “code” or “markup”either “code” or “markup”
Container TagsContainer Tags Two types of tags: container and emptyTwo types of tags: container and empty Container tags contain page text between an Container tags contain page text between an
opening and a closing tag, as shownopening and a closing tag, as shown Container tags are also known as non-empty tagsContainer tags are also known as non-empty tags XHTML requires the use of container or non-empty XHTML requires the use of container or non-empty
tagstags
Empty TagsEmpty Tags
An empty tag does not use a closing tagAn empty tag does not use a closing tag Used in HTML only, Transitional or Frameset flavorUsed in HTML only, Transitional or Frameset flavor Never used in XHTML; code will not validate if you Never used in XHTML; code will not validate if you
use empty tagsuse empty tags
Alternative Non-Empty TagAlternative Non-Empty Tag
HTML and XHTML allow alternative notation for HTML and XHTML allow alternative notation for stand-alone non-empty tags stand-alone non-empty tags
Place the slash ( / ) after the element name Place the slash ( / ) after the element name (before the closing wicket), rather than before (before the closing wicket), rather than before the element name like in a standard closing tag:the element name like in a standard closing tag:
</title> My Home Page</title> My Home Page
All XHTML tags must be closed (using either a All XHTML tags must be closed (using either a pair of container tags or the stand-alone non-pair of container tags or the stand-alone non-empty tag)empty tag)
What Constitutes a Tag?What Constitutes a Tag?
An elementAn element An attributeAn attribute A valueA value
Document Structure TagsDocument Structure Tags
Every XHTML document must have the Every XHTML document must have the following document structure components to following document structure components to render as expected and validate:render as expected and validate:• A <!DOCTYPE> tagA <!DOCTYPE> tag• An <html> tag An <html> tag • A <head> tagA <head> tag• Any <meta> tagsAny <meta> tags• A <link> tag reference to a style sheet A <link> tag reference to a style sheet
(recommended)(recommended)• A <title> tag A <title> tag • A <body> tagA <body> tag
Document Structure Tags Document Structure Tags (cont’d)(cont’d)
Are XHTML Tags Are XHTML Tags Case-Sensitive?Case-Sensitive?
XHTML tags are case-sensitive and should XHTML tags are case-sensitive and should always be typed in lowercase lettersalways be typed in lowercase letters
By contrast, HTML tags are not case-By contrast, HTML tags are not case-sensitivesensitive
Document Type Declaration Document Type Declaration (DOCTYPE)(DOCTYPE)
An SGML statement that describes the An SGML statement that describes the nature of your codenature of your code
Placed at the top of the document using the Placed at the top of the document using the <!DOCTYPE> tag<!DOCTYPE> tag
If you do not specify a DOCTYPE, then two If you do not specify a DOCTYPE, then two problems may arise:problems may arise:• You will not be able to control how your You will not be able to control how your
code renders in the futurecode renders in the future• You will not be able to use a markup You will not be able to use a markup
validatorvalidator Each version and flavor of HTML/XHTML has Each version and flavor of HTML/XHTML has
its own DOCTYPEits own DOCTYPE
The <html> and <head> TagsThe <html> and <head> Tags
The <html> </html> tags encompass all The <html> </html> tags encompass all other HTML or XHTML elements in the other HTML or XHTML elements in the documentdocument• Takes various attributesTakes various attributes
The <head> </head> tags encompass The <head> </head> tags encompass several document elements, including:several document elements, including:• The <meta> tagThe <meta> tag• The <link> tag that references a CSS The <link> tag that references a CSS
file, if presentfile, if present• The <title> tagThe <title> tag
The <body> tagThe <body> tag
All content to be displayed on the page All content to be displayed on the page through the user agent must be enclosed through the user agent must be enclosed between the <body> </body> tagsbetween the <body> </body> tags• <body> takes many attributes, <body> takes many attributes,
including:including: bgcolorbgcolor backgroundbackground linklink
• Values accompany attributes, and Values accompany attributes, and must must be enclosed in quotation marks be enclosed in quotation marks in XHTMLin XHTML
Web Site File StructureWeb Site File Structure
When creating a Web When creating a Web page, you must consider page, you must consider the site’s file the site’s file structurestructure
Your XHTML/HTML Your XHTML/HTML and image files will and image files will be uploaded to a be uploaded to a server eventually, so server eventually, so it is always it is always good practice to good practice to organize organize your filesyour files
Preparing Your Preparing Your Development EnvironmentDevelopment Environment
Obtain a text editorObtain a text editor Install multiple browsers Install multiple browsers Set file preferencesSet file preferences
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
A technology that adds formatting and A technology that adds formatting and structure to your pagesstructure to your pages
A style sheet is simple text file that A style sheet is simple text file that contains instructionscontains instructions
If all pages on your site are linked to the If all pages on your site are linked to the same style sheet, then one simple change same style sheet, then one simple change to the style sheet will change all specified to the style sheet will change all specified elements across the siteelements across the site
Strict flavors of HTML and XHTML require Strict flavors of HTML and XHTML require that you use style sheetsthat you use style sheets
CSS TerminologyCSS Terminology
Proper CSS structureProper CSS structure InheritanceInheritance CSS and XHTMLCSS and XHTML Benefits of using CSSBenefits of using CSS Style sheets and compatibilityStyle sheets and compatibility
Paragraph Formatting and Paragraph Formatting and Block-Level ElementsBlock-Level Elements
Block-level markup elementsBlock-level markup elements• Affect entire paragraphs or multiple Affect entire paragraphs or multiple
paragraphsparagraphs The <p> tagThe <p> tag The <br/> tagThe <br/> tag
Text-level markup elementsText-level markup elements• Elements that can affect as little as a Elements that can affect as little as a
single character or wordsingle character or word <bold> or <strong><bold> or <strong> <i> or <em><i> or <em>
Heading LevelsHeading Levels
Block-level elementBlock-level element Heading levels 1 Heading levels 1
through 6through 6• <h1> </h1><h1> </h1>• <h2> </h2><h2> </h2>• <h3> </h3><h3> </h3>• <h4> </h4><h4> </h4>• <h5> </h5><h5> </h5>• <h6> </h6><h6> </h6>
Tag Nesting in MarkupTag Nesting in Markup
Placing one pair of tags between anotherPlacing one pair of tags between another• Proper: <h1><i> ... </i></h1>Proper: <h1><i> ... </i></h1>• Improper: <h1><i> ... </h1></i>Improper: <h1><i> ... </h1></i>
Improper: The <i> tag is opened within Improper: The <i> tag is opened within the <h1> tags, but closed after the </h1> the <h1> tags, but closed after the </h1> tagtag
If you fail to properly nest code, your If you fail to properly nest code, your pages may still render in some user pages may still render in some user agents, but they will not validate and may agents, but they will not validate and may fail to render in the futurefail to render in the future
Primitive Formatting with the Primitive Formatting with the <pre> Tag<pre> Tag
The <pre> tag retains formatting on The <pre> tag retains formatting on preformatted textpreformatted text
Can be used to retain tabular format, fonts, Can be used to retain tabular format, fonts, etc.etc.
All text between <pre> </pre> tags will All text between <pre> </pre> tags will render as formatted in the HTML filerender as formatted in the HTML file
Indenting and Centering TextIndenting and Centering Text
The <div> tagThe <div> tag Alternatively, use <p align=“center”> </p>Alternatively, use <p align=“center”> </p> The <blockquote> tag can also be used to The <blockquote> tag can also be used to
indent (but not center) textindent (but not center) text
Text-Level ElementsText-Level Elements
Bold, italic and underlined textBold, italic and underlined text Bold:Bold:
• <b> and <strong><b> and <strong> Italic:Italic:
• <i> and <em><i> and <em>
Font Style Elements Font Style Elements vs. Phrase Elementsvs. Phrase Elements
The <b> element is a font style element, The <b> element is a font style element, <strong> is a phrase element; both create <strong> is a phrase element; both create boldface textboldface text
The same is true of <i> and <em>, The same is true of <i> and <em>, respectively, which both create italic or respectively, which both create italic or emphasized textemphasized text
The difference is that <b> specifically means The difference is that <b> specifically means apply the bold font style, whereas <strong> apply the bold font style, whereas <strong> indicates that the text is to be given a strong indicates that the text is to be given a strong appearanceappearance
In short, <b> represents a font appearance In short, <b> represents a font appearance instruction, whereas <strong> represents the instruction, whereas <strong> represents the weighting of the phrase relative to weighting of the phrase relative to surrounding textsurrounding text
The <code>, The <code>, <kbd> and <samp> Tags <kbd> and <samp> Tags
All make text appear in a fixed-width font in All make text appear in a fixed-width font in an HTML 4.0-compliant browser windowan HTML 4.0-compliant browser window
Available to both HTML 4.0 and XHTMLAvailable to both HTML 4.0 and XHTML
ListsLists
Two types of lists:Two types of lists: OrderedOrdered
• A numbered listA numbered list• Uses the <ol> element and requires a Uses the <ol> element and requires a
closing tag </ol>closing tag </ol> UnorderedUnordered
• A bulleted listA bulleted list• Uses the <ul> element and requires a Uses the <ul> element and requires a
closing tag </ul>closing tag </ul>
Lists Lists (cont’d)(cont’d)
Ordered list code:Ordered list code:
<h2>Ordered List</h2><h2>Ordered List</h2>
<ol><ol>
<li>This is the first numbered item.</li><li>This is the first numbered item.</li>
<li>This is the second numbered item.</li><li>This is the second numbered item.</li>
<li>This is the last numbered item.</li><li>This is the last numbered item.</li>
</ol></ol> Unordered list code:Unordered list code:
<h2>Unordered List</h2><h2>Unordered List</h2>
<ul><ul>
<li/>This is the first bulleted item.<li/>This is the first bulleted item.
<li/>This is the second bulleted item.<li/>This is the second bulleted item.
<li/>This is the last bulleted item.<li/>This is the last bulleted item.
</ul></ul>
Good Coding PracticeGood Coding Practice
Create code that can be easily read by othersCreate code that can be easily read by others Exceptions:Exceptions:
• Some code might encounter problems if it Some code might encounter problems if it includes random spacesincludes random spaces
• Always test your code in multiple browsers Always test your code in multiple browsers and validate itand validate it
Adding hidden comments:Adding hidden comments: <!-- Text inside of these brackets will not <!-- Text inside of these brackets will not
appear -->appear --> Use comments to annotate code or document Use comments to annotate code or document
changeschanges
