1. XHTML and CSS

2. The Browser The browser is not print!

3. A Simple XHTML File My Home Page My Home Page Welcome to my home page

4. Hierarchical Structure Well formed xhtml forms a hierarchy

5. Content Types Documents are made up of logical types of content.

6. Semantic Markup HTML markup is based on logical content types

7. Hierarchy The resulting hierarchy

8. ,,, 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

9. Paragraph Important for presentation control to put text in an element. When in doubt, put text in a paragraph

10. Lists Unordered lists (bulleted lists) One Two Ordered lists (numbered lists) One Two

11. Text Markup Bolding – text Italics – text Other – text subscript – text superscript – text deleted text

12. Tables People on the team Name Position Mary Analyst John Technician

13. Anchors Anchors can link your page to any file on the Web University of Washington

14. Divs Divs enclose a set of elements News Budget Investment

15. Spans Spans enclose objects (text, graphics) within an element Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore,

16. 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

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

18. Using CSS Styles can be set in a stylesheet, in a style element in the head or in a style attribute

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

20. The Box Model Each element has padding, border, and margin

21. Vertical Margins The larger of the two vertical margins will determine the distance between elements

22. Visual Formatting Model Pages are built as a series of blocks stacked from the top down

23. 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;

24. Nav Div Float Left

25. Nav Div Float Right

26. Nav Across Top Items in the Nav bar are anchors within a div

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

28. Thank You