HTML, XHTML, and CSS - UW Staff Web Server
Download
Report
Transcript HTML, XHTML, and CSS - UW Staff Web Server
XHTML and CSS
Rick Ells
UW Technology
http://staff.washington.edu/rells/
Using HTML/XHTML
• XHTML is relatively simple. You do most of
your work with about twenty tags.
• XHTML is orderly and structured
• Good references and tutorial sites are
available
• Follow the standards and your work will be
much simpler, more consistent, and your
results more reliable
– Plus your co-workers will like you more
Device Independence
Your audience may view your site with many
different devices and browser types.
The Browser
The browser is not print!
The Browser Is Not Print
•
•
•
•
No fixed page size
No fixed page length
User can change the font size
User can link to her/his own local style
sheet
• Screen size can be tiny or huge
The Adjustable Document
The Birth of HTML
• Created by Tim Berners-Lee at CERN
• Open standard developed under
supervision of the World Wide Web
Consortium (www.w3.org)
– Works to ensure the full potential of the
Web for shared, integrated functionality is
realized
The History of HTML/XHTML
•
•
•
•
•
•
•
•
1992 – HTML first defined
1994 – HTML 2.0
1995 – Netscape specific non-standard HTML
1996 – HTML 3.2, compromise version
1997 – HTML 4.0, separates content from
presentation
1998 – XML standard for writing Web languages
2000 – XHTML 1.0, XML compliant HTML
2002 – XHTML 2.0
Problems With HTML
• Competing versions of browsers introduced
features beyond the standards
• Inconsistent implementations of display
engines and scripting
• Content and presentation mixed together
– Layout often done with tables
– Each element had many presentation attributes,
resulting in laborious maintenance
• The “Slop Code Era”
XHTML
• XHTML is a version of HTML modified to conform to
the XML standard
• Designed to separate content from presentation
– Content in XHTML
– Presentation controlled by Cascading Style Sheets (CSS)
• Extensible – Additional elements can be defined
• XML Compatible – Other XML based languages can
be embedded in XHTML documents
• Like a programming language
– Specific syntax to use
– Validators help you get it right
XHTML Differences
• Case is significant
• All elements must have begin tags and end
tags <p>Hello</p>
• Empty elements contain their own end tag
<br />
• Attribute values must be enclosed in
quotation marks
• More specfics available at
http://www.w3.org/TR/xhtml1/#diffs
A Simple XHTML File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
My Home Page
</title>
</head>
<body>
<h1>My Home Page </h1>
<p>
Welcome to my home page
</p>
</body>
</html>
Hierarchical Structure
Well formed xhtml forms a hierarchy
Content Types
Documents are made up of logical types of content.
Semantic Structure
Content of the same type usually is formatted to look
the same.
Semantic Markup
HTML markup is based on logical content types
Hierarchy
The resulting hierarchy
The DOCTYPE Statement
• Declares the specific version of HTML or
XHTML being used on the page
• Used by the browser to decide how to
process the page
• Three types
– Transitional - Forgiving
– Strict – Requires adherence to standards
– Frameset – Use if page has frames
• Always first in file
Strict DOCTYPE
• Enter exactly as below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Using Strict encourages standards based coding
– Validators will flag logical errors in your methods
– Your CSS will work better and more predictably
Elements
• Consist of three parts
– Begin tag, which can contain attributes
– Contents
– End tag
• Example:
<p id=“intro”>Welcome</p>
• W3schools specifications for <p>
http://www.w3schools.com/tags/tag_p.asp
Attributes
• Always only used in the element begin tag
• Three types
– Optional attributes: Varies with element type
– Standard attributes: id, class, title, style, dir, lang,
xml:lang
– Event attributes: onclick, ondblclick,
onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup
• Used in scripting
Empty Elements
• Some elements have no content and
therefore also have no end tag
–
–
–
–
<img src=“photo.jpg” />
<br />
<hr />
<link rel="stylesheet" type="text/css"
href=“main.css" />
• In XHTML, which requires end tags on all
elements, a single tag represents both the
begin and end tag
<h1>, <h2>, <h3>, etc.
• Headings on the page
• Represent the main topic, subtopics,
subsubtopics, etc. of the page
• Important to use they in a logical
manner, which greatly helps assistive
technology like voice browsers present
the page content intelligibly
<p>
• Paragraph
• Important for presentation control to put
text in an element. When in doubt, put
text in a paragraph
• Blockquotes (<blockquote>) except they
have wider left and right margins
Lists
• Unordered lists (bulleted lists)
<ul>
<li>One</li>
<li>Two</li>
</ul>
• Ordered lists (numbered lists)
<ol>
<li>One</li>
<li>Two</li>
</ol>
Text Markup
• Bolding
– <b>text</b>
– <strong>text</strong>
• Italics
– <i>text</i>
– <em>text</em>
• Other
– <sub>text</sub> subscript
– <sup>text</sup> superscript
– <del>text</del> deleted text
Tables
<table border cellspacing="5" cellpadding="10">
<caption>People on the team</caption>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>Mary</td>
<td>Analyst</td>
</tr>
<tr>
<td>John</td>
<td>Technician</td>
</tr>
</table>
Graphics
• Graphics are placed by using an img
element
• The alt attribute provides alternative text
describing the graphic in case the
graphic itself cannot be shown or the
user cannot see the graphic
<img src="picture.gif" alt="Suzzallo">
Anchors
• Anchors can link your page to any file
on the Web
<a href="http://www.washington.edu/">
University of Washington </a>
Divs
• Divs enclose a set of elements
<div style=“text-align: center;”>
<h2> News</h2>
<p><a href=“budget.html”>Budget</a></p>
<p><a href=“invest.html”>Investment</a></p>
</div>
Spans
• Spans enclose objects (text, graphics)
within an element
<p>Call me Ishmael. Some years ago — <span
style=“font-style: italic;”>never mind how long
precisely</span> — having little or no money in my
purse, and nothing particular to interest me on shore,
Cascading Style Sheets
• Are used to control how elements are
presented in the Web page
• Use a different syntax that HTML/XHTML
• Work with the common visual browsers
(Internet Explorer, FireFox, Opera)
• Used properly, can great simplify visual
design, site management and content
maintenance
A Style
Selector
Property
p
{ font-family:
Value
times; }
• Note the punctuation: The property is
followed by a colon (:) and the value is
followed by a semicolon(;)
Using CSS
Styles can be set in a stylesheet, in a style
element in the head or in a style attribute
Selectors
• Simple selectors
p { color: blue }
h1, h2, h3, h4 { font-style: italic; }
• Contextual selectors
ul li { font-weight: bold; }
#main img { border: solid black 5px; }
p.intro { font-family: verdana, sans-serif;}
The Box Model
Each element has padding, border, and margin
Vertical Margins
The larger of the two vertical margins will
determine the distance between elements
Visual Formatting Model
Pages are built as a series of blocks stacked
from the top down
Controlling Layout
• Styles can control size and placement
of elements
• Example:
#nav { width: 12em; float: left; }
#news { width: 12em; float: right; }
#main { margin: 1em 13em 1em 13em;
Nav Div Float Left
Nav Div Float Right
Nav Across Top
Items in the Nav bar are anchors within a div
HTML-Kit
HTML-Kit (Windows) is free editor that makes it
easy to make standards compliant XHTML
HTML-Kit Has Tidy
Press F9 and your XHTML is validated and
tidied for easy reading
Resources
• HTML-Kit editor – http://chami.com/
• Amaya editor – http://www.w3c.org/Amaya
• W3schools XHTML and CSS tutorials –
http://www.w3schools.com/
• Web Head Start tutorials – http://www.webheadstart.org/
• Tidy Web Interface - http://www.washington.edu/webinfo/tidy.cgi
• CSS Validator - http://jigsaw.w3.org/css-validator/
• Dave Raggett XHTML and CSS tutorials http://www.w3.org/MarkUp/Guide/Overview.html
• Web Accessibility in Mind (WebAIM) - http://www.webaim.org/
• Color contrast analyzer http://www.visionaustralia.org.au/info.aspx?page=628
• Stylin’ With CSS, A Designer’s Guide, Second Edition by
Charles Wyke-Smith