Xhtml and css l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 45

Xhtml css html PowerPoint PPT Presentation


xhtml_css

Download Presentation

xhtml css html

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Xhtml and css l.jpg

XHTML and CSS

Rick Ells

UW Technology

http://staff.washington.edu/rells/


Using html xhtml l.jpg

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 l.jpg

Device Independence

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

Urinary Tract

Urinary Tract


The browser l.jpg

The Browser

Urinary Tract

The browser is not print!


The browser is not print l.jpg

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 l.jpg

The Adjustable Document

Urinary Tract


The birth of html l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Hierarchical Structure

Well formed xhtml forms a hierarchy


Content types l.jpg

Content Types

Documents are made up of logical types of content.


Semantic structure l.jpg

Semantic Structure

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


Semantic markup l.jpg

Semantic Markup

HTML markup is based on logical content types


Hierarchy l.jpg

Hierarchy

The resulting hierarchy


The doctype statement l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

<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


Slide24 l.jpg

<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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Anchors

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

<a href="http://www.washington.edu/">

University of Washington </a>


Slide30 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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(;)


Using css l.jpg

Using CSS

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


Selectors l.jpg

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;}


The box model l.jpg

The Box Model

Each element has padding, border, and margin


Vertical margins l.jpg

Vertical Margins

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


Visual formatting model l.jpg

Visual Formatting Model

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


Controlling layout l.jpg

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 l.jpg

Nav Div Float Left


Nav div float right l.jpg

Nav Div Float Right


Nav across top l.jpg

Nav Across Top

Items in the Nav bar are anchors within a div


Html kit l.jpg

HTML-Kit

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


Html kit has tidy l.jpg

HTML-Kit Has Tidy

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


Resources l.jpg

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


  • Login