Download presentation
Presentation is loading. Please wait.
1
Overview of XHTML and CSS
Bouchahma Majed University of Nizwa College of Arts and Sciences
2
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
3
Device Independence Your audience may view your site with many different devices and browser types.
4
The browser is not print!
5
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
6
The Adjustable Document
7
The Birth of HTML Created by Tim Berners-Lee at CERN
Open standard developed under supervision of the World Wide Web Consortium ( Works to ensure the full potential of the Web for shared, integrated functionality is realized
8
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
9
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”
10
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
11
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
12
A Simple XHTML File <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <title> My Home Page </title> </head> <body> <h1>My Home Page </h1> <p> Welcome to my home page </p> </body> </html>
13
Hierarchical Structure
Well formed xhtml forms a hierarchy
14
Content Types Documents are made up of logical types of content.
15
Semantic Structure Content of the same type usually is formatted to look the same.
16
Semantic Markup HTML markup is based on logical content types
17
The resulting hierarchy
18
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
19
Strict DOCTYPE Enter exactly as below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ " Using Strict encourages standards based coding Validators will flag logical errors in your methods Your CSS will work better and more predictably
20
Elements Consist of three parts Example:
Begin tag, which can contain attributes Contents End tag Example: <p id=“intro”>Welcome</p> W3schools specifications for <p>
21
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
22
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
23
<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
24
<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
25
Lists Unordered lists (bulleted lists) <ul>
<li>One</li> <li>Two</li> </ul> Ordered lists (numbered lists) <ol> </ol>
26
Text Markup Bolding Italics Other <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
27
Tables <table border cellspacing="5" cellpadding="10">
<caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <td>Mary</td> <td>Analyst</td> <td>John</td> <td>Technician</td> </table>
28
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">
29
Anchors Anchors can link your page to any file on the Web
<a href=" University of Washington </a>
30
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>
31
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,
32
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
33
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(;)
34
Using CSS Styles can be set in a stylesheet, in a style element in the head or in a style attribute
35
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;}
36
The Box Model Each element has padding, border, and margin
37
Vertical Margins The larger of the two vertical margins will determine the distance between elements
38
Visual Formatting Model
Pages are built as a series of blocks stacked from the top down
39
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;
40
Nav Div Float Left
41
Nav Div Float Right
42
Nav Across Top Items in the Nav bar are anchors within a div
43
HTML-Kit HTML-Kit (Windows) is free editor that makes it easy to make standards compliant XHTML
44
HTML-Kit Has Tidy Press F9 and your XHTML is validated and tidied for easy reading
45
Resources HTML-Kit editor – http://chami.com/
Amaya editor – W3schools XHTML and CSS tutorials – Web Head Start tutorials – Tidy Web Interface - CSS Validator - Dave Raggett XHTML and CSS tutorials - Web Accessibility in Mind (WebAIM) - Color contrast analyzer - Stylin’ With CSS, A Designer’s Guide, Second Edition by Charles Wyke-Smith
Similar presentations
