XHTML and CSS

1
XHTML and CSS

• Overview

2
Hypertext Markup Language

• A set of markup tags and associated syntax rules
• Unlike a programming language, you cannot
  describe actions or logic
• You can only describe information structure and
  context
• Markup tags also called elements
• ltelementgtData goes herelt/elementgt

3
Cascading Style Sheets

• Used to define attributes of elements in HTML and
  XML
• Common attributes height, width, font-size,
  alignment, color, etc.
• Documents can have multiple style sheets with
  overlapping and sometimes conflicting definitions
• Cascading refers to the set of rules for
  resolving conflicts.

4
Cascading

• Priority is given to the most specific
  definitions and then the definitions or rules
  cascade down to the less specific rules.
• Priority is also given to definitions that are
  closer to the content, i.e., embedded and
  inline styles can be used to override global or
  attached styles.

5
XHTML CSS syntax

• General Structure

• Example

• ltelementgtContentlt/elementgt
• element
• attribute value
• attribute value

• lth1gtESPNlt/h1gt
• h1
• font-size 10pt
• color red

6
Extensible HTML ? XHTML

• XHTML is a reformulation of HTML according to XML
  standards.
• Only four differences
• Inclusion of an XML header
• Single tags end with /gt, instead of just gt
• Attribute values must have quotes value
• Tags must be in lowercase

7
Why use XHTML?

• It is the recommended standard (W3C) since 2000
• HTML 4.01 (1999)
• XHTML 1.0 (2000)
• Allows your web page to be parsed by a general
  XML parser.
• Lots of applications support XML parsing.

8
Webs 4 Commandments

• Make sure your code validates as XHTML
• Use Semantic Markup
• Use tags that describe the content, not the
  contents appearance
• Structure Documents Logically
• The HTML code should be in a logical order Style
  sheets can reposition items for presentation
• Use CSS, not ltfontgt or lttablegt to layout and
  decorate your pages.

9
XHTML Rules

• ltelementnamegt Content content lt/elementnamegt
• In XHTML all element names must be lower case.
• In HTML tag case didnt matter.
• In XHTML all element must have a closing tag
• Most web browsers are forgiving about closing
  tags, which makes it possible to forget about
  them
• Example ltpgtHere is paragraph with no ending
  tagltpgtHere is another paragraphlt/pgt

10
HTML single tags

• HTML has a few tags that are standalone, i.e., no
  closing tag.
• Image ltimg srcimagename.jpggt
• Line break ltbrgt
• Link ltlink type"text/cssgt
• Used to link/insert a Cascading Style Sheet

11
XHTML single tags

• To meet XML guidelines HTML single tags must to
  closed with a /gt
• Image ltimg srcimagename.jpg /gt
• Line break ltbr /gt
• Link ltlink type"text/css" /gt
• Note the space before the /gt

12
Attributes

• ltelement attributevaluegt content lt/elementgt
• XHTML requires that all attribute values be
  enclosed in quotes.
• HTML ltimg srctiger.jpggt
• XHTML ltimg srctiger.jpg /gt
• Forgiving browsers dont care about the quotes
  (Follow XHTML quotes matter to us)

13
Browsers ignore whitespace

• An XHTML document is an ASCII Text document.
• XHTML renderers ignores, tabs, spaces and line
  breaks
• Allows a web designer to format XHTML code
  without having an effect on the web pages
  rendered appearance.
• To render tabs, spaces, and line breaks requires
  using tags and style sheets.

14
Basic XHTML document

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt
• ltheadgt
• lttitlegt Title Displays in Browsers Top Bar
  lt/titlegt
• ltlink type"text/css" href"part5.css"
  rel"stylesheet"/gt
• lt/headgt
• ltbodygt
• Page content here
• lt/bodygt
• lt/htmlgt

15
Text Structure (blocks)

• lth1gtMost Important Headerlt/h1gt
• ltpgtA paragraph in the literal sense.lt/pgt
• lth2gtSub-headinglt/h2gt
• lth3gtSmaller Sub-headinglt/h3gt
• lth6gtSmallest Sub-headinglt/h6gt

16
Lists

• Ordered Lists (ol)

• Unordered Lists (ul)

• ltolgt
• ltligtItem 1lt/ligt
• ltligtItem 2lt/ligt
• ltligtItem 3lt/ligt
• ltligtItem 4lt/ligt
• lt/olgt

• ltulgt
• ltligtItem 1lt/ligt
• ltligtItem 2lt/ligt
• ltligtItem 3lt/ligt
• ltligtItem 4lt/ligt
• lt/ulgt

17
Terms and Definitions

• Example

• Meaning

• ltdlgt
• ltdtgtCoffeelt/dtgt
• ltddgtblack hot drinklt/ddgt
• ltdtgtMilklt/dtgt
• ltddgtwhite cold drinklt/ddgt
• lt/dlgt

• dl definition list
• dt definition term
• dd definition description
• Used heavily in early HTML documents which were
  most scientific papers with lost of definitions
  and terms

18
Text Formatting (style)

• ltttgt Teletype text lt/ttgt
• ltigt Italic text lt/igt
• ltbgt Bold text lt/bgt
• ltbiggt Big text lt/biggt
• ltsmallgt Small text lt/smallgt

19
Text identity (semantic)

• ltemgt Emphasized text lt/emgt
• ltstronggt Strong text lt/stronggt
• ltdfngt Definition term lt/dfngt
• ltcodegt Computer code text lt/codegt
• ltsampgt Sample computer code lt/sampgt
• ltkbdgt Keyboard text lt/kbdgt
• ltvargt Variable lt/vargt
• ltcitegt Citation lt/citegt

20
Hyperlinks

• Called the anchor tag
• lta hrefhttp//www.espn.comgtESPNlt/agt
• href stands for hypertext reference
• What is the element name?
• What is the attribute?
• What is the attributes value
• What is the content?

21
Elements well learn about later

• Forms
• ltform actionprogram.phpgt
• ltinput typetextgt
• ltinput typesubmitgt
• lt/formgt

• Tables
• lttablegt
• lttrgtlttdgtlt/tdgtlt/trgt
• lttrgtlttdgtlt/tdgtlt/trgt
• lt/tablegt

• Frames
• Deprecated!

22
Deprecation

• Removed from the standard
• Most browsers will still render deprecated tags
• However, there are no guarantees
• Do not use deprecated tags unless you have no
  choice

23
Divisions and Spans

• Divisions ltdivgt used to break your webpage into
  logical blocks or boxes
• Spans ltspangt used to create custom in-line tags,
  i.e., within the flow of a paragraph of text.
• Example
• This is paragraph with a table reference. ltspan
  classtablerefgtTable 2.4lt/spangt is a lovely
  table.

24
CSS Attributes

• TEXT

• BOXES (usually ltdivgt elements)

• Font family,
• size,
• alignment,
• weight,
• sytle,
• variant,
• line-height,
• indent, spacing,
• direction

• Height,
• width,
• margins,
• padding,
• borders,
• border color,
• border styles,
• background color,
• background image.

25
CSS

• Best way to learn is by example.
• Lets take a peak at the lab.