XHTML and CSS. The Browser The browser is not print!
-
Upload
audrey-waters -
Category
Documents
-
view
220 -
download
3
Transcript of XHTML and CSS. The Browser The browser is not print!
![Page 1: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/1.jpg)
XHTML and CSS
![Page 2: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/2.jpg)
The Browser
The browser is not print!
![Page 3: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/3.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>
![Page 4: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/4.jpg)
Hierarchical Structure
Well formed xhtml forms a hierarchy
![Page 5: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/5.jpg)
Content Types
Documents are made up of logical types of content.
![Page 6: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/6.jpg)
Semantic Markup
HTML markup is based on logical content types
![Page 7: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/7.jpg)
Hierarchy
The resulting hierarchy
![Page 8: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/8.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
![Page 9: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/9.jpg)
<p>
• Paragraph
• Important for presentation control to put text in an element. When in doubt, put text in a paragraph
![Page 10: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/10.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>
![Page 11: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/11.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
![Page 12: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/12.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>
![Page 13: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/13.jpg)
Anchors
• Anchors can link your page to any file on the Web
<a href="http://www.washington.edu/"> University of Washington </a>
![Page 14: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/14.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>
![Page 15: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/15.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,
![Page 16: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/16.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
![Page 17: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/17.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(;)
![Page 18: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/18.jpg)
Using CSS
Styles can be set in a stylesheet, in a style element in the head or in a style attribute
![Page 19: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/19.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;}
![Page 20: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/20.jpg)
The Box Model
Each element has padding, border, and margin
![Page 21: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/21.jpg)
Vertical Margins
The larger of the two vertical margins will determine the distance between elements
![Page 22: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/22.jpg)
Visual Formatting Model
Pages are built as a series of blocks stacked from the top down
![Page 23: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/23.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;
![Page 24: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/24.jpg)
Nav Div Float Left
![Page 25: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/25.jpg)
Nav Div Float Right
![Page 26: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/26.jpg)
Nav Across Top
Items in the Nav bar are anchors within a div
![Page 27: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/27.jpg)
HTML-Kit
HTML-Kit (Windows) is free editor that makes it easy to make standards compliant XHTML
![Page 28: XHTML and CSS. The Browser The browser is not print!](https://reader036.fdocuments.in/reader036/viewer/2022062720/56649efe5503460f94c12d3e/html5/thumbnails/28.jpg)
Thank You