Basic XHTML Structure

1
Chapter 3

• Basic XHTML Structure

2
Essentials

• Starting every web page setup
• Title
• Headers
• Paragraphs
• Naming Elements
• Divisions Spans
• Line Breaks
• Comments

3
Starting every web page Setup

• Doctype lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
  1.0 Transitional//EN" "http//www.w3.org/TR/xhtml1
  /DTD/xhtml1-transitional.dtd"gt
• Lets browsers show page in standards mode
• Helps validators check your code correctly
• Begin html
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• End html
• lt/htmlgt
• Template is here. Feel free to use it.

4
Starting every web page Setup

• Every page consists of head body
• head holds information about your page
• After opening html tag ltheadgt
• Leave a few spaces, then lt/headgt
• body only part the users (visitors) see
• After lt/headgt tag, type ltbodygt
• Leave space for your content
• lt/bodygt

5
Page Title

• Required in XHTML
• Seen in bookmarks, search indexes
• Can not take any formatting
• In between ltheadgt and lt/headgt
• lttitlegt
• This is my title
• lt/titlegt

6
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"gt ltheadgt
ltmeta content"text/html charsetUTF-8"
http-equiv"content-type" /gt lttitlegtThis is your
titlelt/titlegt lt/headgt ltbodygt All content for
the body of your page goes here. lt/bodygt
lt/htmlgt
7
Headers

• XHTML has six levels of headers 1 to 6
• Block level formatting new line created
• Used to organize page
• lth2gt
• Content here
• lt/h2gt

8
Paragraphs

• Returns ignored in xhtml
• so use paragraph tag
• ltpgt
• Content
• lt/pgt
• May add extra space using
• nbsp
• Demo here

9
Naming Elements

• May name each element
• With its own id
• Or with a class it belongs in
• For future use
• Especially CSS formatting
• ltdiv class"works"gt

10
Divisions Spans

• Allows creation of chunks of your page
• Useful when formatting with CSS
• Div is block level
• Span is inline
• Block vs inline p.28
• What's the difference?
• Block makes line break
• Inline makes no line break

11
Div example

• Simple xhtml example of div and span
• Same code with CSS applied (chap 8)

12
Line Breaks

• ltbr /gt
• Similar to ltpgt blah lt/pgt
• For times when need new line
• Without space between
• Demo here

13
Comments

• Notes to self or other editors
• Not shown on webpage
• Just in code
• lt!-- Comments, blah blah --gt
• Demo

14
Essentials

• Starting every web page setup
• Title
• Headers
• Paragraphs
• Naming Elements
• Divisions Spans
• Line Breaks
• Comments