Basics of XHTML

1
Basics of XHTML

• What Lies Beneath

2
Why learn XHTML code?

• better understanding of what is going on in the
  background of a web page
• troubleshooting when things arent working the
  way they should
• adjusting/adding effects or behaviors not offered
  by web page editor
• makes you sound very tech-savvy in front of your
  less tech-savvy peers

3
XHTML code versus HTML?

• transition to higher level coding
• standardized practices (W3C)
• interacts with other web elements
• more standardized between browsers
• simpler in many ways
• NO empty tags to remember
• NO empty attributes to remember

4
XHTML DOC TYPES

• Statement goes before opening HTML tag
• XHTML STRICT
• No deprecated tags
• XHTML TRANSITIONAL
• Recognizes deprecated tags
• XHTML FRAMESET
• Use for framed sites
• I will get you the code for this at a later
  date!!!

5
as it may look!
Its not as

• hard
• confusing
• boring

6
Tags (Page Elements)

• found between angle brackets lt gt
• opening lt gt for all
• attributes with values may exist
• closing lt/ gt for all in XHTML
• uses forward slash
• affected content goes in between tags
• ltbgtHellolt/bgt

7
Attributes

• add format to text or object within tags
• use alone or in a series
• add to the opening tag (element)
• ltbody bgcolor gt
• separate attributes with a space
• corresponding value in quotes (preferred)
• ltbody bgcolorffcc00gt
• no spaces within attribute and its value

8
Things to remember

• lowercase is required in XHTML
• tags can be nested
• lth1gtltigtWelcomelt/igtlt/h1gt
• allows for additional options
• close tags in opposite order than opening
• spacebar spaces and paragraph returns are
  meaningless while writing code
• use for visual assistance in Notepad/WordPad
  document

9
Basic Document Tags

• lthtmlgtlt/htmlgt
• first and last tag in html document
• ltheadgtlt/headgt
• first section
• defines site, advanced editing, writing scripts
• lttitlegtlt/titlegt
• visible in browser title bar and in
  Favorites/Bookmarks listing
• ltbodygtlt/bodygt
• rest of page
• visible content

10
Basic Body Tags

• Headers
• lth1gtlt/h1gt
• 1larger, 6smaller
• assumes paragraph return
• Paragraph (skip line)
• ltpgt , lt/pgt is no longer optional
• align
• left, center, right.
• Line break (no space)
• ltbrgtlt/brgt

• Backgrounds
• in the ltbodygt tag
• bgcolorrrggbb
• backgroundfilename
• Formatted text
• ltbgtlt/bgt bold
• ltigtlt/igt italic
• ltugtlt/ugt underline
• ltfontgtlt/fontgt
• size1-7
• colorrrggbb

11
Adding Graphics

• gif, jpg
• gif has transparency
• browser safe colors
• 216 cross platform
• RGB mode
• hexadecimal color codes (e.g., ff00ff)
• 2 for red, 2 for green, 2 for blue
• 0 low intensity, Fhigh intensity, 16 levels
• low resolution, fast loading
• 72 96 dpi
• ltimg srcfilenamegt

12
Linking

• Link to URL
• uniform resource locator
• locations outside of page
• lta hrefhttp//gtlt/agt
• Anchors
• locations on page
• lta namefindmegtlt/agt
• Link to Anchor
• lta hreffindmegtlt/agt

13
Tables

• visible or invisible, great for layout
• lttablegtlt/tablegt
• width
• border
• align
• lttrgt lttdgtlt/tdgt cells in a row lt/trgt rows

lttable border0 width600 aligncentergt lttrgt
lttdgtImage 1lt/tdgtlttdgtImage 2lt/tdgtlt/trgt lttrgtlttdgtImag
e 3lt/tdgtlttdgtImage 4lt/tdgtlt/trgt lttrgtlttdgtImage
5lt/tdgtlttdgtImage 6lt/tdgtlt/trgtlt/tablegt
14
Other Tags

• ltmarqueegtlt/marqueegt
• scrolling or sliding text
• attributes include behavior, direction,
  scrollamount, loop, align, width plus more
  (see online hand-out)
• ltblockquotegtlt/blockquotegt
• indents a body of text equally on left and right
• sets off a section of text from the rest
• lthrgtlt/hrgt
• horizontal rule
• physical graphic line across page
• attributes include color, size, width,
  noshade