Site Development Foundations © 2004 ProsoftTraining All rights reserved

Lesson 3: XHTML Coding

Objectives Demonstrate knowledge of basic XHTML document structure Demonstrate knowledge of basic XHTML document structure Identify XHTML document structure tags, including the tag and the tag Identify XHTML document structure tags, including the tag and the tag Create XHTML that validates properly Create XHTML that validates properly Format paragraphs and text with XHTML tags Format paragraphs and text with XHTML tags Use comments and good coding practices Use comments and good coding practices

Markup Tags Markup tags are element names enclosed in angle brackets, or wickets Markup tags are element names enclosed in angle brackets, or wickets Tags are key to markup filesTags 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 elementTags 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”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 Two types of tags: container and empty Container tags contain page text between an opening and a closing tag, as shown Container tags contain page text between an opening and a closing tag, as shown Container tags are also known as non-empty tags Container tags are also known as non-empty tags XHTML requires the use of container or non- empty tags XHTML requires the use of container or non- empty tags

Empty Tags An empty tag does not use a closing tag An empty tag does not use a closing tag Used in HTML only, Transitional or Frameset flavor Used in HTML only, Transitional or Frameset flavor Never used in XHTML; code will not validate if you use empty tags 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 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: Place the slash ( / ) after the element name (before the closing wicket), rather than before the element name like in a standard closing tag: My Home Page My Home Page All XHTML tags must be closed (using either a pair of container tags or the stand-alone non- empty tag) 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 element An attribute An attribute A value A value

Document Structure Tags Every XHTML document must have the following document structure components to render as expected and validate: Every XHTML document must have the following document structure components to render as expected and validate: A tagA tag An tagAn tag A tagA tag Any tagsAny tags A tag reference to a style sheet (recommended)A tag reference to a style sheet (recommended) A tagA tag

Document Structure Tags (cont’d)

Are XHTML Tags Case-Sensitive? XHTML tags are case-sensitive and should always be typed in lowercase letters XHTML tags are case-sensitive and should always be typed in lowercase letters By contrast, HTML tags are not case- sensitive By contrast, HTML tags are not case- sensitive

Document Type Declaration (DOCTYPE) An SGML statement that describes the nature of your code An SGML statement that describes the nature of your code Placed at the top of the document using the tag Placed at the top of the document using the tag If you do not specify a DOCTYPE, then two problems may arise: 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 futureYou will not be able to control how your code renders in the future You will not be able to use a markup validatorYou will not be able to use a markup validator Each version and flavor of HTML/XHTML has its own DOCTYPE Each version and flavor of HTML/XHTML has its own DOCTYPE

The and Tags The tags encompass all other HTML or XHTML elements in the document The tags encompass all other HTML or XHTML elements in the document Takes various attributesTakes various attributes The tags encompass several document elements, including: The tags encompass several document elements, including: The tagThe tag The tag that references a CSS file, if presentThe tag that references a CSS file, if present The tagThe tag

The tag All content to be displayed on the page through the user agent must be enclosed between the tags All content to be displayed on the page through the user agent must be enclosed between the tags takes many attributes, including: takes many attributes, including: bgcolor bgcolor background background link link Values accompany attributes, and must be enclosed in quotation marks in XHTMLValues 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 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 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 Obtain a text editor Install multiple browsers Install multiple browsers Set file preferences Set file preferences

Cascading Style Sheets (CSS) A technology that adds formatting and structure to your pages A technology that adds formatting and structure to your pages A style sheet is simple text file that contains instructions 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 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 Strict flavors of HTML and XHTML require that you use style sheets

CSS Terminology Proper CSS structure Proper CSS structure Inheritance Inheritance CSS and XHTML CSS and XHTML Benefits of using CSS Benefits of using CSS Style sheets and compatibility Style sheets and compatibility

Paragraph Formatting and Block-Level Elements Block-level markup elements Block-level markup elements Affect entire paragraphs or multiple paragraphsAffect entire paragraphs or multiple paragraphs The tag The tag Text-level markup elements Text-level markup elements Elements that can affect as little as a single character or wordElements that can affect as little as a single character or word or or

Heading Levels Block-level element Block-level element Heading levels 1 through 6 Heading levels 1 through 6

Tag Nesting in Markup Placing one pair of tags between another Placing one pair of tags between another Proper:... Proper:... Improper:... Improper:... Improper: The tag is opened within the tags, but closed after the tag Improper: The tag is opened within the tags, but closed after the 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 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 Tag The tag retains formatting on preformatted text The tag retains formatting on preformatted text Can be used to retain tabular format, fonts, etc. Can be used to retain tabular format, fonts, etc. All text between tags will render as formatted in the HTML file All text between tags will render as formatted in the HTML file

Indenting and Centering Text The tag The tag Alternatively, use Alternatively, use The tag can also be used to indent (but not center) text The tag can also be used to indent (but not center) text

Text-Level Elements Bold, italic and underlined text Bold, italic and underlined text Bold: Bold: and and Italic: Italic: and and

Font Style Elements vs. Phrase Elements The element is a font style element, is a phrase element; both create boldface text The element is a font style element, is a phrase element; both create boldface text The same is true of and, respectively, which both create italic or emphasized text The same is true of and, respectively, which both create italic or emphasized text The difference is that specifically means apply the bold font style, whereas indicates that the text is to be given a strong appearance The difference is that specifically means apply the bold font style, whereas indicates that the text is to be given a strong appearance In short, represents a font appearance instruction, whereas represents the weighting of the phrase relative to surrounding text In short, represents a font appearance instruction, whereas represents the weighting of the phrase relative to surrounding text

The, and Tags All make text appear in a fixed-width font in an HTML 4.0-compliant browser window 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 Available to both HTML 4.0 and XHTML

Lists Two types of lists: Two types of lists: Ordered Ordered A numbered listA numbered list Uses the element and requires a closing tag Uses the element and requires a closing tag Unordered Unordered A bulleted listA bulleted list Uses the element and requires a closing tag Uses the element and requires a closing tag

Lists (cont’d) Ordered list code: Ordered list code: Ordered List Ordered List <ol> This is the first numbered item. This is the first numbered item. This is the second numbered item. This is the second numbered item. This is the last numbered item. This is the last numbered item. </ol> Unordered list code: Unordered list code: Unordered List Unordered List <ul> This is the first bulleted item. This is the first bulleted item. This is the second bulleted item. This is the second bulleted item. This is the last bulleted item. This is the last bulleted item.</ul>

Good Coding Practice Create code that can be easily read by others Create code that can be easily read by others Exceptions: Exceptions: Some code might encounter problems if it includes random spacesSome code might encounter problems if it includes random spaces Always test your code in multiple browsers and validate itAlways test your code in multiple browsers and validate it Adding hidden comments: Adding hidden comments: Use comments to annotate code or document changes Use comments to annotate code or document changes