xhtml and css. the browser the browser is not print!
Post on 03-Jan-2016
220 Views
Preview:
TRANSCRIPT
XHTML and CSS
The Browser
The browser is not print!
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
Well formed xhtml forms a hierarchy
Content Types
Documents are made up of logical types of content.
Semantic Markup
HTML markup is based on logical content types
Hierarchy
The resulting hierarchy
<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
<p>
• Paragraph
• Important for presentation control to put text in an element. When in doubt, put text in a paragraph
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
• 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
<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>
Anchors
• Anchors can link your page to any file on the Web
<a href="http://www.washington.edu/"> University of Washington </a>
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
• 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
• 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
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
Styles can be set in a stylesheet, in a style element in the head or in a style attribute
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
Each element has padding, border, and margin
Vertical Margins
The larger of the two vertical margins will determine the distance between elements
Visual Formatting Model
Pages are built as a series of blocks stacked from the top down
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
Nav Div Float Right
Nav Across Top
Items in the Nav bar are anchors within a div
HTML-Kit
HTML-Kit (Windows) is free editor that makes it easy to make standards compliant XHTML
Thank You
top related