Basic XHTML The Nuts and Bolts

1
Basic XHTMLThe Nuts and Bolts

• Week 2 - Presentation 1
• Veronica Noone

2
Objectives

• The Basics
• A Basic Tag
• A Basic Attribute
• Common Core Attributes
• Element Relationships
• Block vs. Inline
• Basic XHTML structure
• Document Type Definition
• HTML Tag Attributes
• The Head
• Meta Stuff!
• The Body

3

• What do we already know about XHTML?
• Or do I mean HTML?

4
The Basics

• Content is structured into elements using tags.
• Whats a tag?

5
A Basic Tag
lth1gtTodays Newslt/h1gt

• lth1gt - Opening Tag - Starts a element
• lt/h1gt - Closing Tag - Ends an elements
• Notes
• Know what lth1gt tag is?? No worries
• All tags MUST be lowercase
• This h1 tag doesnt have an attribute.
• Whats an attribute?

6
A Basic Attribute
lth1 idmaingtTodays Newslt/h1gt

• Defines a setting for the tag.
• Think of it like a property/value.
• Notes
• All attributes must be lowercase and values must
  be contained in quotes.
• There are common attributes most XHTML tags
  share.
• Anyone? Anyone?

7
Common Core Attributes

• Most tags can have these attributes
• id
• Provides a unique identifier for the elements.
• class
• Provides context to an elements
• A means to reference the element
• title
• Umm yeah adds a title to an elements.
• Tool tips and screen readers love it!
• style
• Used to apply inline style sheet rules

8
Element Relationships
lth1gtTodays Newslt/h1gt ltpgtIt was a ltemgtgreatlt/emgt
class today! Students seemed mildly interested
and they ACTUALLY learned something!lt/pgt

• Child
• Parent
• Sibling

9
Block vs. Inline
lth1gtTodays Newslt/h1gt ltpgtIt was a ltemgtgreatlt/emgt
class today! Students seemed mildly interested
and they ACTUALLY learned something!lt/pgt

• Which of these elements are block? Inline?
• Block elements cannot be found inside an Inline
  element.

10
Block vs. Inline

• Block
• Begin on a new line
• The height, width and margins can be manipulated
  (will see this when we explore CSS)
• Inline
• Begin on the same line
• The height, width and margins CANNOT be
  manipulated

11
Basic XHTML structure
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml xmllangengt ltheadgt lttitlegtTitle
Goes Herelt/titlegt lt/headgt ltbodygt lt!-- main
content area --gt lt/bodygt lt/htmlgt
Lets Dissect
12
Document Type Definition
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml xmllangengt ltheadgt lttitlegtTitle
Goes Herelt/titlegt lt/headgt ltbodygt lt!-- main
content area --gt lt/bodygt lt/htmlgt
Yes its Required!
13
Document Type Definition

• Without it your file could be rendered in quirks
  mode
• Identifies the type of markup language used in a
  web page.
• XTML 1.0 Transitional
• least strict specification for XHTML 1.0.
• Supports CSS and traditional formatting
  instructions such as fonts.
• XHTML 1.0 Strict
• Requires exclusive use of Cascading Style Sheets.
  
• What we will be focusing on.
• XHTML 1.0 Frameset
• Required for pages using XHTML frames.

14
HTML Tag Attributes
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml xmllangengt ltheadgt lttitlegtTitle
Goes Herelt/titlegt lt/headgt ltbodygt lt!-- main
content area --gt lt/bodygt lt/htmlgt
15
HTML Tag Attribute - xmlns

• eXtensible Markup Language Namespace
• a collection of names, identified by a URI
  reference, which are used in XML documents as
  element types and attribute names
• http//www.w3.org/1999/xhtml
• Why is it needed?
• XHTML is an flavor of XML
• There are others like WML.
• Namespaces help the browser differentiates
  between XHTML and other XML languages like WML

16
HTML Tag Attribute - xmllang

• Identifies the primary language of the document
• en, fr, de, mg
• Most tags can also have a lang attribute
• http//www.w3.org/International/articles/language-
  tags/Overview.en.php

17
The Head
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml xmllangengt ltheadgt lttitlegtTitle
Goes Herelt/titlegt lt/headgt ltbodygt lt!-- main
content area --gt lt/bodygt lt/htmlgt
18
The Head

• Contains information about the page
• Data about the data?
• title
• Only required tag (child)
• We will learn more including
• meta, link, base, style, script

19
Meta Stuff!

• Allows you to provide information about the
  document including
• Author
• Keywords
• Description
• Page expiration
• You will be researching these for your lab today.

20
The Body
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml xmllangengt ltheadgt lttitlegtTitle
Goes Herelt/titlegt lt/headgt ltbodygt lt!-- main
content area --gt lt/bodygt lt/htmlgt
21
The Body

• Whats seen in the browser
• Will be focusing on organizing content in the
  body all semester.
• XHTML comment

lt!-- Content goes here --gt
22
There you have it, the Template
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt lthtml xmlns"http//www.w3.org/19
99/xhtml xmllangengt ltheadgt lttitlegtClass
Examplelt/titlegt lt/headgt ltbodygt lt!-- main
content area --gt lth1gtTodays Newslt/h1gt ltpgtIt was
a ltemgtgreatlt/emgt class today! Students seemed
mildly interested and they ACTUALLY learned
something!lt/pgt lt/bodygt lt/htmlgt