Download
1 / 30

Lesson 3: XHTML Coding - PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on

Lesson 3: XHTML Coding. Lesson 3 Objectives. Define markup tags Identify XHTML document structure tags Prepare your development environment Define and use style sheets Use paragraph formatting and block-level elements Use text-level elements Use ordered and unordered lists

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Lesson 3: XHTML Coding' - cecily


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Lesson 3 xhtml coding

Lesson 3:XHTML Coding


Lesson 3 objectives
Lesson 3 Objectives

  • Define markup tags

  • Identify XHTML document structure tags

  • Prepare your development environment

  • Define and use style sheets

  • Use paragraph formatting and block-level elements

  • Use text-level elements

  • Use ordered and unordered lists

  • Use comments and good coding practices


Markup tags
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
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
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
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
What Constitutes a Tag?

  • An element

  • An attribute

  • A value


Document structure tags
Document Structure Tags

  • Every XHTML document must have the following document structure components to render as expected and validate:

    • A <!DOCTYPE> tag

    • The <html> </html> tag

    • The <head> </head> tag

    • Any <meta/> tags

    • A <link/> tag reference to a style sheet (recommended)

    • The <title> </title> tag

    • The <body> </body> tag



Are xhtml tags case sensitive
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
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> 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> </title> tags


The body tag
The <body> tag

  • All content to be displayed on the page through the user agent must be enclosed between the <body> </body> tags

    • The <body> tag takes many attributes, including:

      • bgcolor

      • background

      • link

    • Values accompany attributes, and must be enclosed in quotation marks in XHTML


Web site file structure
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
Preparing Your Development Environment

  • Obtain a text editor

  • Install multiple browsers

  • Set file preferences


Style sheets
Style Sheets

  • 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
CSS Terminology

  • Proper CSS structure

  • Inheritance

  • CSS and XHTML

  • Benefits of using CSS

  • Style sheets and compatibility


Paragraph formatting and block level elements
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
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
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
Primitive Formatting with the <pre> Tag

  • The <pre> tag retains formatting on preformatted text

  • Can be used to retain tabular format, spacing

  • All text between <pre> </pre> tags will render as formatted in the HTML file


Indenting and centering text
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
Text-Level Elements

  • Bold, italic and underlined text

  • Bold:

    • <b> and <strong>

  • Italic:

    • <i> and <em>

  • Underlined text:

    • <u>


Font style elements vs phrase elements
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
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
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
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
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 these brackets will not appear -->

  • Use comments to annotate code or document changes


Lesson 3 summary
Lesson 3 Summary

  • Define markup tags

  • Identify XHTML document structure tags

  • Prepare your development environment

  • Define and use style sheets

  • Use paragraph formatting and block-level elements

  • Use text-level elements

  • Use ordered and unordered lists

  • Use comments and good coding practices


ad