XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your...

45
XHTML and CSS Web Applications

Transcript of XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your...

Page 1: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

XHTML and CSS

Web Applications

Page 2: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 3: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Device Independence

Your audience may view your site with many different devices and browser types.

Page 4: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

The Browser

The browser is not print!

Page 5: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 6: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

The Adjustable Document

Page 7: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 8: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 9: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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”

Page 10: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 11: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 12: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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>

Page 13: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Hierarchical Structure

Well formed xhtml forms a hierarchy

Page 14: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Content Types

Documents are made up of logical types of content.

Page 15: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Semantic Structure

Content of the same type usually is formatted to look the same.

Page 16: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Semantic Markup

HTML markup is based on logical content types

Page 17: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Hierarchy

The resulting hierarchy

Page 18: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 19: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 20: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 21: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 22: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 23: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

<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

Page 24: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

<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

Page 25: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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>

Page 26: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 27: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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>

Page 28: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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">

Page 29: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Anchors

• Anchors can link your page to any file on the Web

<a href="http://www.abc.com/"> abcde</a>

Page 30: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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>

Page 31: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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,

Page 32: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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

Page 33: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

A Style

Selector  Property Value 

p { font-family: times; }

• Note the punctuation: The property is followed by a colon (:) and the value is followed by a semicolon(;)

Page 34: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Using CSS

Styles can be set in a stylesheet, in a style element in the head or in a style attribute

Page 35: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Selectors

• Simple selectorsp { color: blue }h1, h2, h3, h4 { font-style: italic; }

• Contextual selectorsul li { font-weight: bold; }#main img { border: solid black 5px; }p.intro { font-family: verdana, sans-serif;}

Page 36: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

The Box Model

Each element has padding, border, and margin

Page 37: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Vertical Margins

The larger of the two vertical margins will determine the distance between elements

Page 38: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Visual Formatting Model

Pages are built as a series of blocks stacked from the top down

Page 39: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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;

Page 40: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Nav Div Float Left

Page 41: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Nav Div Float Right

Page 42: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

Nav Across Top

Items in the Nav bar are anchors within a div

Page 43: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

HTML-Kit

HTML-Kit (Windows) is free editor that makes it easy to make standards compliant XHTML

Page 44: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

HTML-Kit Has Tidy

Press F9 and your XHTML is validated and tidied for easy reading

Page 45: XHTML and CSS Web Applications. Using HTML/XHTML XHTML is relatively simple. You do most of your work with about twenty tags. XHTML is orderly and structured.

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/• 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