Type Your Title Here
Download
Report
Transcript Type Your Title Here
Tech Briefing:
Web Standards,
XHTML, and CSS
Mark Branom and Brian Young
10/23/2003
What is HTML?
SGML
Before HTML 4, there was SGML
A language for describing markup
languages
HTML is an example of a language defined
in SGML
HTML
Originally conceived for the exchange of
scientific and other technical documents.
Added support for hypertext and
multimedia capabilities
What is XHTML?
Extends the HTML 4 document type
XML based
Allows the document to work with XML
based user agents
Can be viewed, edited and validated with
standard XML tools
By migrating to XHTML today, content
developers can enter the XML world with
all of its attendant benefits, while ensuring
their content’s backward and future
compatibility.
What is XML?
Extensible Markup Language
XML is a simple, very flexible text format
derived from SGML.
Originally designed to meet the challenges
of large-scale electronic publishing, XML is
also playing an increasingly important role
in the exchange of a wide variety of data on
the Web and elsewhere.
XHTML Syntax
Strictly conforming XHTML example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tech Briefing Presentation</title>
</head>
<body>
<p>Content</p>
</body>
</html>
Components to look out for:
xml declaration in the beginning
doctype shows strict or transitional xhtml
xmlns declaration
Differences with HTML 4
Document must be well-formed
CORRECT: nested elements
<p>here is an emphasized <em>paragraph</em>.</p>
INCORRECT: overlapping elements
<p>here is an emphasized <em>paragraph.</p></em>
Differences with HTML 4
Element and attribute names must be in
lower case
XHTML documents must use lower case
for all HTML element and attribute
names. This difference is necessary because
XML is case-sensitive e.g. <li> and <LI>
are different tags.
Differences with HTML 4
For non-empty elements, end tags are
required
CORRECT: terminated elements
<p>here is a paragraph.</p><p>here is another paragraph.</p>
INCORRECT: un-terminated elements
<p>here is a paragraph.<p>here is another paragraph.
Differences with HTML 4
Attribute values must always be quoted
All attribute values must be quoted, even
those which appear to be numeric.
CORRECT: quoted attribute values
<td rowspan=“3” width=“10”>
INCORRECT: unquoted attribute values
<td rowspan=3 width=10>
Differences with HTML 4
Attribute Minimization
XML does not support attribute minimization.
Attribute-value pairs must be written in full.
Attribute names such as compact and checked
cannot occur in elements without their value being
specified.
CORRECT: unminimized attributes
<input type=“radio” checked=“checked”>
INCORRECT: minimized attributes
<input type=“radio” checked>
Differences with HTML 4
Empty Elements
Empty elements must either have an end
tag or the start tag must end with />. For
instance, <br /> or <hr>< /hr>.
CORRECT: terminated empty elements
<br /><hr />
INCORRECT: unterminated empty elements
<br><hr>
Deprecated Tags
applet (use object instead)
basefont (use stylesheets instead)
center (use stylesheets instead)
dir (use ul instead)
font (use stylesheets instead)
form (use xforms instead)
img (use object instead)
menu (use ul instead)
s (use stylesheets instead)
strike (use stylesheets instead)
table (only use tables for tabular data - use stylesheets
for designing)
u (use stylesheets instead)
Cascading Style Sheets
Style sheets add design control to your web pages by
allowing you to pre-define how various classes of HTML
tags are going to look on a web page.
This adds a level of flexibility and control previously only
imagined by web designers.
You can customize the look of your pages by creating a
style for those pages and then change the look of the
entire site by making one change in one document. Style
Sheets are well known to "power-users" of MSWord and
Adobe Pagemaker. This same level of ease and control
works on the web.
CSS Basics
Style sheets work by allowing you to define properties for how
HTML elements (tags) appear when viewed in a Web browser.
For example, you can set it up so that every <H1> on your page
appears in green, Arial, 18 points, and italics -- automatically
(instead of big and bold, which is the default state of H1).
H1 Example
If in the future you decide they should all be blue, then you just
change it in one place and they can be updated throughout
your site.
H1 Example
More basics
The W3C (World Wide Web Consortium) created the
standards for CSS. Their page shows some of the
potential for using CSS.
W3C Web Style Sheets Home Page:
http://www.w3.org/Style/CSS/
Microsoft’s MSDN bulletin on CSS:
http://msdn.microsoft.com/workshop/
author/css/reference/attributes.asp
How does it work?
Suppose you want to create that page where every <H2> tag is
green, italicized, and in Arial font. Before CSS came along, you
would have to write the following every time the <H2> tag was
used.
<H2><I><FONT face="Arial" color="green">This is a green,
italicized, Arial H2</FONT></I></H2>
Now, you can simply specify this in a single step by typing
something like this:
h2 { font-family: Arial; font-style: italic; color: green; }
Then in the body of the document, you simply use the <h2> tag as
usual. When the page is viewed, all the <h2> tags will appear as
you wished them to automatically.
If later you do decide you want the <h2>s to suddenly be blue
instead of green, you simply change the style sheet command to be
blue instead of green.
You can set up styles for every HTML tag
Defining styles: head
You can set a style sheet for a single document by putting the style
information in the head of the document. For example:
The actual style information is included in an HTML comment tag
(<!-- commented text -->) in order to hide it from browsers that don't
understand CSS. The TYPE attribute of the <style> tag defines the type of
style sheet being used -- in this case CSS, Cascading Style Sheets.
Defining Styles: inline
You can also simply include the style information in a particular tag right in the
document by adding the STYLE attribute to the tag directly.
This particular method is most useful if you want to change a single instance of a
tag in a document that already has a style associated with it. When there are
multiple styles affecting a document, the style closest to the tag in question takes
precedence. In other words, if I have put a style in HEAD of the document but
also included an INLINE style, that INLINE style will override the document
style for that one instance of the tag.
Using an external .css file
If you want to set a style for an entire site of documents, you create a
standalone text file (named something like basic.css) that contains the
necessary style information. Then each document in that site will point to
the style document. Here's how it might look.
(Text that appears in the basic.css document)
h2 {font-family: Arial; font-style: italic; color: green;}
p {font-family: Courier; font-style: bold; color: red; }
(HTML document using basic.css style sheet):
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="basic.css" style="style1">
<title>This is the title</title>
</head>
Classes and IDs
Classes and IDs are ways for you to pre-define particular features. You
define them by giving them names. For example, what if you wanted to
use the color periwinkle for some, but not all, of the text in your
document.
The code for this color is "#6699ff"
Rather putting in a <font color=“#6699ff”> every time you want it to
appear, you can set it up as a class and then just reference the class
when you want to use the color. Classes are preceded by a "." (dot).
IDs are similar. They are preceded by a "#"
Span and div
You can also use classes and ids with <SPAN> and <DIV> tags. These are
container tags with no formatting associated with them. You can set up a
<SPAN class="whatever"> to define just part of a paragraph. The <DIV> tag
will start on the next line and start a new line after itself.
Positioning
This is the most fun but also the most difficult part of CSS.
Here's how it works: when the browser draws the object on the
page, it places it into an invisible, rectangular box called a
bounding box. You can set the box's exact location on the page
(absolute positioning) or you can offset the box from other
elements on the page (relative positioning). You can also specify
the size of the box. You can layer objects on top of each other.
And, you can use clipping to allow certain sections to show
through from lower levels. You can make objects invisible as
well.
Defining positions
To define the position, you must first decide if its position will be
absolute or relative. If you want to absolutely define exactly where
an object is, you must use position: absolute.
h2 { position: absolute; top: 150px; width: 200px; height: 200px
font-family: Arial; font-style: italic; color: green; }
Since you probably don't want all your <H2> tags to appear stacked
up on top of each other in the same spot, you will want to use in-line
styles and the DIV tag to specify the differences.
<DIV style="position: absolute; top: 150px; width: 200px; height:
200px; background-color: pink;">This is text in a pink 200-by-200
pixel box that is 150 pixels from the top of the window.</DIV>
Position example
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.
Positioning
Relative positioning places elements into the flow
of the document . . . offsetting them from the
previous element in the HTML code. This lets you
place objects in relation to each other.
On the next slide, the first line of text flows
normally across the page. The <SPAN> line uses
positioning to place it 50 pixels below and 25
pixels to the right of the first line.
Position example 2
QuickTime™ and a
TIFF (LZW) decompressor
are needed to see this picture.
Layering
Once you know how to set the horizontal and
vertical positioning -- or X and Y axes, you now
need to learn about the Z axis. This allows
webmasters to layer objects. Normally, if you put
multiple objects at the same spot, each object will
cover the earlier ones. Using the z-axis, you can
specify which layer an object resides on. By
setting the z-index higher or lower, you can move
an object up or down the stack.
Layering Example #1
Layering Example #2
Browsers
Opera 7 - Supports XHTML, most of CSS1, most of CSS2
MS IE 5.5 for Macintosh - Supports XHTML, all of CSS1, most of CSS2
Netscape 6 - Supports XHTML, all of CSS1, most of CSS2
Netscape 7- Supports XHTML, all of CSS1, all of CSS2
Mozilla - Supports XHTML - Supports all of CSS1, most of CSS2
Safari - Supports XHTML - Supports CSS1 & CSS 2 (somewhat flaky)
MS IE 6 for Windows - Supports XHTML - Supports CSS1, some CSS2
MSIE 5.5 for Windows - Mostly supports XHTML - Mostly supports
CSS1
Netscape 4 - Barely supports XHTML - Barely supports CSS
MSIE 4 - Barely supports XHTML - Barely supports CSS
XHTML in Action
Examples:
XHTML Page with CSS Style Sheet
XHTML Page without CSS Style Sheet
http://www.stanford.edu/group/itsscustomer/ip/techbriefings/web_standards/example1.html
http://www.stanford.edu/group/itsscustomer/ip/techbriefings/web_standards/example2.html
CSS Stylesheet
http://www.stanford.edu/group/itsscustomer/ip/techbriefings/web_standards/example.css