xhtml and css

XHTML and CSSXHTML and CSSOverview

Hypertext Markup Hypertext Markup LanguageLanguageA set of markup tags and

associated syntax rulesUnlike a programming language,

you cannot describe actions or logicYou can only describe information

structure and contextMarkup tags also called

elements <element>Data goes

here</element>

Cascading Style SheetsCascading Style SheetsUsed 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.

CascadingCascadingPriority 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.

XHTML & CSS syntaxXHTML & CSS syntax

General Structure Example

<element>Content</element>

element {

attribute: value;

attribute: value;

…

}

<h1>ESPN</h1>

h1 {

font-size: 10pt;

color: red;

}

Extensible HTML Extensible HTML XHTML XHTMLXHTML is a reformulation of HTML

according to XML standards.

Only four differences1. Inclusion of an XML header2. Single tags end with />, instead of

just >3. Attribute values must have quotes:

“value”4. Tags must be in lowercase

Why use XHTML?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.

Web’s 4 CommandmentsWeb’s 4 Commandments1. Make sure your code validates as

XHTML2. Use Semantic Markup

• Use tags that describe the content, not the content’s appearance

3. Structure Documents Logically• The HTML code should be in a logical

order; Style sheets can reposition items for presentation

4. Use CSS, not <font> or <table> to layout and decorate your pages.

XHTML RulesXHTML Rules<elementname> Content content

</elementname>

In XHTML all element names must be lower case.◦ In HTML tag case didn’t 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 <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>

HTML single tagsHTML single tagsHTML has a few tags that are

standalone, i.e., no closing tag.

Image: <img src=“imagename.jpg”>

Line break: <br>Link: <link type="text/css”>

◦Used to link/insert a Cascading Style Sheet

XHTML single tagsXHTML single tagsTo meet XML guidelines HTML single

tags must to closed with a />

1.Image: <img src=“imagename.jpg” />

2.Line break: <br />3.Link: <link type="text/css" />

Note the space before the />

AttributesAttributes<element attribute=“value”> content

</element>

XHTML requires that all attribute values be enclosed in quotes.

HTML: <img src=tiger.jpg>XHTML: <img src=“tiger.jpg” />

Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)

Browsers ignore Browsers ignore whitespacewhitespaceAn 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 page’s rendered appearance.

To render tabs, spaces, and line breaks requires using tags and style sheets.

Basic XHTML documentBasic XHTML document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN…

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> Title Displays in Browser’s Top Bar </title>

<link type="text/css" href="part5.css" rel="stylesheet"/>

</head>

<body>

Page content here

</body>

</html>

Text Structure (blocks)Text Structure (blocks)

<h1>Most Important Header</h1>

<p>A paragraph in the literal sense.</p>

<h2>Sub-heading</h2><h3>Smaller Sub-heading</h3>…<h6>Smallest Sub-heading</h6>

ListsLists

Ordered Lists (ol) Unordered Lists (ul)

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ol>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

Terms and DefinitionsTerms and Definitions

Example Meaning

<dl>

<dt>Coffee</dt>

<dd>black hot drink</dd>

<dt>Milk</dt>

<dd>white cold drink</dd>

</dl>

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

Text Formatting (style)Text Formatting (style)

<tt> Teletype text </tt><i> Italic text </i><b> Bold text </b>

<big> Big text </big>

<small> Small text </small>

Text identity (semantic)Text identity (semantic)

<em> Emphasized text </em><strong> Strong text </strong><dfn> Definition term </dfn><code> Computer code text </code><samp> Sample computer code

</samp><kbd> Keyboard text </kbd><var> Variable </var><cite> Citation </cite>

HyperlinksHyperlinksCalled the anchor tag<a

href=“http://www.espn.com”>ESPN</a>

href stands for hypertext referenceWhat is the element name?What is the attribute?What is the attribute’s valueWhat is the content?

Elements we’ll learn about Elements we’ll learn about laterlater

Tables

<table><tr><td></td></tr><tr><td></td></tr>

</table>

DeprecationDeprecationRemoved from the standardMost browsers will still render

deprecated tagsHowever, there are no

guaranteesDo not use deprecated tags

unless you have no choice

Divisions and SpansDivisions and SpansDivisions <div> used to break your

webpage into logical blocks or boxesSpans <span> 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. <span class=“tableref”>Table 2.4</span> is a lovely table.

CSS AttributesCSS Attributes

TEXT BOXES (usually <div> 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.

CSSCSSBest way to learn is by example.

Let’s take a peak at the lab.