professional web authoring with xhtml & css

What You’re In ForA lecture on ditching bad habits: Unclosed tags: Formatting tags: , Browser extensions: An introduction to the most essential elements of XHTML and CSS... Informatio

Trang 1

Professional Web Authoring

With XHTML and CSS

Roy Tennant

California Digital Library

escholarship.cdlib.org/rtennant/presentations/2003il/

Trang 2

What You’re In For

Why XHTML & CSS? XHTML

CSS

Making the Transition The Future

Trang 3

What You’re In For

A lecture on ditching bad habits:

Unclosed tags: <p>

Formatting tags: <font>, <b>

Browser extensions: <center>

An introduction to the most essential elements of XHTML and CSS

Trang 4

Why XHTML & CSS?

Garbage code is…uh…garbage!

Information encoded in XHTML can be more easily migrated as technology changes

XHTML is a good step forward to learning XML

You can easily make global changes to how your documents display (demo)

There are user benefits to separating

information from presentation (demo)

Trang 6

User-defined Cascading Style Sheet

Trang 11

XHTML: Transitional

Easier learning curve, less strict

Some formatting tags such as <center> and <font> are allowed, but in

Transitional, but not in Strict

Trang 12

XHTML: Strict

NO formatting codes or attributes are

allowed — display is completely

handled by CSS

XHTML Strict is compliant XML

Trang 13

XHTML: The Basic Rules

All tags must be in lowercase:

All attribute values must be quoted:

Trang 14

XHTML: More Rules

Attribute minimization is forbidden:

Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And add a namespace declaration to <html>:

Trang 15

The Most Important Tags

Structure & Meta Information

Trang 16

Structure & Meta Information

<!DOCTYPE> = document type definition (DTD)

<html></html> = defines an XHTML doc

<head></head> = defines doc header

<title></title> = doc title

Trang 17

<a></a> = an anchor/link

<img /> = an image

<map></map> = an image map

<area></area> = an image map area

<sub></sub> = subscripted text

<pre></pre> = preformatted text

Trang 19

<form></form> = defines a form

<input></input> = form input

<textarea></textarea> = text block input

<select></select> = scrolling or

drop-down list of options

<option></option> = select option

Trang 20

<ul></ul> = defines a bulleted list

<ol></ol> = defines a numbered list

<li></li> = list item

<dl></dl> = defines a definition list

<dt></dt> = definition term

<dd></dd> = definition description

Trang 21

Style-Related Tags

<div></div> = doc subset (block)

<span></span> = doc subset (inline)

Trang 22

http://validator.w3.org/

Trang 23

Cascading Style Sheets

Specifies how XHTML should be

displayed to the user

Replaces tags like:

<b>, <i>, <font> — any tag or attribute

setting that specifies how something

should be displayed

Can either be specified within the HTML file itself, or as a separate file

Trang 24

Browser Support for CSS

Varies between browsers (MSIE, Netscape,

etc.), platforms (Windows v Mac), and versionsCommon points of failure:

Trang 25

ends everyproperty/value pairdeclaration

selector

Trang 29

Grouping Selectors

If you have two or more rules that are the same:

h2 { font-family: Optima, Arial, sans-serif; }

p { font-family: Optima, Arial, sans-serif; }

You can group them:

h2, p { font-family: Optima, Arial, sans-serif; }

Trang 30

h1.header { text-align: center; }

Classes can apply to multiple elements:

.header { text-align: center; }

will apply to <h2 class=“header”>, etc.

Trang 31

CSS Selectors: Psuedo Class

Selectors that are inferred by the

browser, not coded in the XHTML

document

a:link — untraveled, inactive link

a:hover — mouse on top of

a:active — being clicked on

a:visited — traveled

Trang 32

CSS Selectors: Psuedo Element

:first-letter — first letter in a block

Trang 33

CSS Selectors: Psuedo Element

Trang 34

<h1>This is header text, and <em>this text is

emphasized</em> but this is not.</h1>

results in this:

Trang 35

Popular Text Properties

font-family: fontname, fontname, familyname

font-weight: bold | lighter

font-style: italic

Trang 36

color: red | blue…| hexcode

background-color: red | blue…| hexcode Colors you may be able to use by name instead of hex code:

Black = #000000 Green = #008000 Silver = #C0C0C0

Lime = #00FF00 Gray = #808080 Olive = #808000

White = #FFFFFF Yellow = #FFFF00 Maroon = #800000

Navy = #000080 Red = #FF0000 Blue = #0000FF

Purple = #800080 Teal = #008080 Fuchsia= #FF00FF

Aqua = #00FFFF

Trang 37

within any other element (a, em, span, etc.)

“List-item elements” are HTML elements that have a marker (bullet, number) and an order

Trang 38

Controlling Element Display

Trang 39

CSS: Inheritance

Unless a more specific style rule applies, tags enclosed by another tag will inherit its style

A style rule like this: h1 { color: red; }

And HTML like this:

<h1>A Document <em>Title</em><h1>

Will result in “Title” being both red and italic

(the default display of <em>)

But if a rule like this exists: em { color: blue; } then it will override the style inherited from the

<h1>

Trang 40

CSS: The Cascade

Specifying styles in a separate file allows web managers to specify global settings

The display of an unlimited number of web

documents can be changed by changing a

setting in a global style sheet

Global settings can be overridden by using

the cascade of precedence

Therefore, CSS offers both power and

flexibility in determining how documents are displayed

Trang 41

CSS: How the Cascade Works

Sort by order of appearance; the later a

declaration appears, the more weight it is

given

Trang 42

CSS: Diagram of Precedence

External Style Sheet

[call to external stylesheet]

[styles embedded inside the

precedence, all other

things being equal

Trang 43

http://jigsaw.w3.org/css-validator/

Trang 44

Making the Transition: Learning

Do you know HTML code?

Is it all new to you?

Learn and use XHTML Strict

Validate your docs until you get the hang of it

Trang 45

Making the Transition: Tidy

HTML Tidy is free software that can read your HTML and output a much better file by:

Automatically fixing some errors

Changing uppercase tags to lowercase

Indenting your code to make to make it more

readable

Quote all attribute values

And other things, depends on configuration file

An error report may also be generated that

can identify remaining problems

Trang 46

Making the Transition:

Migrating an Existing Site

All at once:

Copy entire site to another location

Run Tidy; check and re-run as needed

Clean up remaining problems

Transfer back

Gradual:

Do all new things in XHTML/CSS

Migrate old files as you update them for other reasons

Trang 47

The Future

Will XML replace HTML?

It already has! That’s why you’re here!

XML will typically not be delivered to web

clients; that is what XHTML will be for

So, is this the last markup you have to learn?

No way! Use this as a stepping-stone to XML, for which you will have many additional usesRemember — Never stop learning!

Định dạng
Số trang	47
Dung lượng	1,01 MB