Integrated HTML and CSS: A Smarter, Faster Way to Learn

by Virginia Debolt

• ISBN13: 9780782143782
• ISBN10: 0782143784
• Edition: CD
• Format: Paperback
• Copyright: 2005-01-01
• Publisher: Sybex

Summary

Almost all web designers use Cascading Sheets to control the presentation of the websites they construct out of HTML. Why learn one and then the other when you can just as easily-and much more effectively-learn both at the same time? This book's integrated approach speeds your progress and leaves you with a stronger, more cohesive set of skills. Inside, you'll learn about: Writing well-structured HTML for use by any web-capable device Designing page layouts using CSS Controlling fonts, colors, backgrounds, borders, and margins Using lists to create attractive, button-like menus Using images as backgrounds, links, page content, and decoration Creating and styling forms Personalizing your weblog Understanding and applying design and usability principles Publishing and testing your pages Validating your code Making pages accessible to all visitors Throughout the book you'll find real-world examples of effective CSS-based pages. Note: CD-ROM/DVD and other supplementary materials are not included as part of eBook file.

Author Biography

Virginia DeBolt is an author, teacher, and web designer. She's taught HTML and Dreamweaver courses at Austin Community College, written six books, and maintains the Web Teacher blog (www.webteacher.ws).

Table of Contents

Introduction	xvii
How to Write XHTML and CSS	1	(14)
Anatomy of a Website	1	(2)
What Are XHTML and HTML?	1	(1)
What's the Difference between XHTML and HTML?	2	(1)
What Is CSS?	2	(1)
Getting Started with XHTML Syntax	3	(3)
Opening and Closing Tags	3	(1)
Empty Elements	4	(2)
XHTML: Specific Requirements	6	(1)
Getting Started with CSS Syntax	6	(6)
Selectors and Declarations	7	(5)
Quotation Marks	12	(1)
Real World Example	12	(1)
Summary	13	(2)
Location, Location: Where to Put a Style	15	(16)
The Cascade	15	(9)
Begin with the Browser	16	(2)
User Styles	18	(1)
External Styles	18	(2)
Embedded Styles	20	(3)
Inline Styles	23	(1)
Inheritance	24	(1)
Specificity	24	(2)
Using @import	26	(2)
Real World Example	28	(1)
Summary	29	(2)
Page Basics: DOCTYPE, Head, Body, and Body Styles	31	(16)
Learn the XHTML	31	(5)
The Goal	31	(1)
DOCTYPES	32	(1)
The XML Declaration	33	(1)
Let's Get Started	34	(1)
The Head	34	(1)
Saving	35	(1)
The Body	36	(1)
Take a Look in a Browser	36	(1)
Learn the CSS	36	(9)
Create the Stylesheet	37	(1)
The Background	37	(1)
Specifying Colors for Web Pages	38	(1)
Link to the Stylesheet	39	(1)
Take a Look	39	(1)
The Margins	39	(2)
Move Your Body	41	(1)
Color Isn't Everything	41	(4)
Real World Example	45	(1)
CSS Properties for the body Element	45	(1)
Challenge Yourself	46	(1)
Summary	46	(1)
Headings and Heading Styles	47	(16)
Learn the XHTML	47	(5)
Building Structure with Headings	48	(1)
How to Work through the Chapter	49	(2)
Adding to the XHTML	51	(1)
Learn the CSS	52	(8)
Start with siteName	53	(3)
Headings with Class	56	(2)
Compare Results	58	(2)
The Box Model	60	(1)
Real World Example	61	(1)
CSS Properties for Headings	61	(1)
Challenge Yourself	62	(1)
Summary	62	(1)
Page Divisions: Div for Structure and Layout	63	(30)
Learn the XHTML	63	(5)
Organizing Content Structurally	64	(2)
To div or Not to div	66	(2)
Learn the CSS	68	(21)
Absolute Positioning	69	(3)
Relative Positioning	72	(1)
Fixed Positioning	73	(1)
Using Margins to Arrange Content	74	(2)
Using Classes to Style Headings	76	(1)
Using float to Arrange Content	77	(5)
What Else Floats?	82	(2)
Why Not Left?	84	(2)
Using z-index to Arrange Content	86	(3)
Real World Example	89	(1)
CSS Properties	90	(1)
Challenge Yourself	91	(1)
Summary	91	(2)
Paragraph and Text Styles	93	(36)
Learn the XHTML	93	(10)
Acronyms and Abbreviations	95	(1)
Special Characters	96	(4)
The cite Element	100	(1)
Block Quotes	100	(1)
Formatting for Meaning: The em and strong Elements	101	(1)
More Text Formatting Elements	102	(1)
Making Your XHTML Text CSS-Ready	103	(1)
Learn the CSS	103	(17)
Start Your Stylesheet	104	(3)
More Body Rules	107	(1)
Heading Rules	108	(1)
Paragraph Rules	109	(1)
Block Quote Rules	110	(1)
em and His Buddy strong Once Again	111	(1)
Acronym	112	(1)
Callout	113	(3)
Footer	116	(2)
The Whole Stylesheet	118	(2)
Print Preview	120	(1)
Let's Go into Print	120	(6)
Start Your Stylesheet	120	(1)
Using the display Property to Remove Content	120	(2)
Setting Print Margins	122	(1)
Changing the Font Size for Print	122	(2)
Changing the Font Family for Print	124	(1)
Changing the Text Indent for Print	124	(1)
The Whole Stylesheet	125	(1)
Real World Example	126	(1)
CSS Properties	127	(1)
Challenge Yourself	127	(1)
Summary	128	(1)
Links and Link Styles	129	(40)
Organizing a Site	129	(4)
Anatomy of a URL	131	(1)
Folder Names	132	(1)
Home Page	132	(1)
Learn the XHTML	133	(21)
Linking from One Page to Another in the Same Directory	134	(3)
Relative and Absolute Links	137	(3)
Linking to Pages in Different Directories	140	(6)
Linking to Non-HTML Files	146	(3)
Images as Links	149	(1)
E-mail Links	150	(1)
Linking to a Specific Location in a Page: Named Anchors	151	(3)
Learn the CSS	154	(10)
Editing Embedded Link Styles	155	(7)
Styling Links with background-image	162	(1)
Styling to Indicate the Current Page	163	(1)
Real World Example	164	(2)
CSS Properties	166	(1)
Challenge Yourself	166	(1)
Summary	167	(2)
Multimedia, Images, and Image Styles	169	(46)
Creating and Editing Images	169	(8)
JPEG vs. GIF	170	(1)
Basic Graphics Software Tips	171	(6)
Learn the XHTML	177	(13)
The img Element	177	(3)
Building Some Basic Navbars	180	(3)
Designing a Photo Gallery	183	(2)
Adding a Banner	185	(1)
Adding a Heading	186	(1)
Inserting a Photo in Your Gallery	187	(1)
Transparent GIFs	187	(2)
Get to Work	189	(1)
Learn the CSS	190	(4)
Link Color and Decoration	193	(1)
Backgrounds	194	(1)
Size Matters	194	(3)
Sizing Images via HTML: The Good	195	(1)
Sizing Images via HTML: The Bad	196	(1)
Linking Directly to Images	197	(6)
Body Talk	199	(4)
Adding Multimedia to Your Page	203	(8)
The Plug-In Problem	203	(1)
Flash	203	(2)
QuickTime	205	(2)
Windows Media	207	(1)
Java Applets	208	(3)
Real World Examples	211	(1)
CSS Properties	212	(1)
Challenge Yourself	212	(1)
Summary	213	(2)
Lists and List Styles	215	(26)
Learn the XHTML	215	(6)
Definition Lists	219	(1)
Initial Value in Ordered Lists	220	(1)
Learn the CSS	221	(16)
Unordered List Markers	223	(1)
List-Marker Positions	224	(1)
Back to Definition Lists	225	(1)
Lists as Links	226	(1)
The display Property	226	(1)
More Styling for Navigation Elements	227	(2)
But Does It Roll Over?	229	(1)
Horizontal Lists	229	(5)
How 'Bout Those Links?	234	(1)
Back to the nav	235	(1)
Make It Change	236	(1)
Real World Example	237	(1)
CSS Properties for Lists	238	(1)
Challenge Yourself	238	(1)
Summary	239	(2)
Tables and Table Styles	241	(24)
A Tangled Table Tale	241	(1)
Learn the XHTML	242	(11)
Table Attributes	244	(4)
Making a Table Accessible	248	(5)
Learn the CSS	253	(7)
Setting Cell Width	256	(1)
Styling a Table Caption	257	(1)
Cell Alignment	257	(3)
Learn More XHTML: thead, tbody, tfoot	260	(2)
Real World Example	262	(1)
CSS Properties	262	(1)
Challenge Yourself	263	(1)
Summary	263	(2)
Forms and Form Styles	265	(30)
Script Matters	265	(1)
Learn the XHTML	266	(20)
The form Element	268	(1)
Hidden Fields	269	(1)
The fieldset Element	270	(2)
The textarea Element	272	(1)
The select Menu	273	(2)
Radio Buttons	275	(1)
Letting Visitors Upload Files	276	(1)
The checkbox Elements	276	(2)
The tabindex Attribute	278	(1)
The Submit Button	279	(1)
Using a mailto Action	280	(2)
Using a Table to Lay Out a Form	282	(4)
Learn the CSS	286	(6)
Styling the fieldset	287	(1)
The Legend	288	(1)
Paragraphs and Labels	289	(1)
The Background Color of a form Element	290	(1)
The Script Example's Background	291	(1)
Real World Example	292	(1)
Challenge Yourself	293	(1)
Summary	294	(1)
Publishing and Testing Your Pages	295	(20)
Finding Free Server Space	295	(1)
Using FTP Software	296	(4)
Setting Permissions	299	(1)
Your Own Domain	300	(1)
Testing the Site	301	(3)
The Validators	301	(1)
Accessibility Testing	302	(2)
Getting Help from Browser Extensions	304	(6)
The Document Object Model (DOM)	308	(2)
Telling the Search Engines You Are There	310	(2)
Understanding Your Audience	312	(2)
Summary	314	(1)
CSS for Weblogs	315	(24)
Advantages of Weblogging	315	(1)
Where to Sign Up for a Weblog	316	(1)
What to Look for in Weblog Software	316	(1)
Getting Started with a Blog	317	(7)
Configuring Your Blog	320	(3)
Posting to Your Blog	323	(1)
Customizing the Template	324	(4)
Changing the DOCTYPE Declaration	326	(2)
Learn the CSS	328	(8)
A New Color Scheme	331	(3)
The ``View Source'' Secret to Blogger Modifications	334	(2)
Blog This!	336	(1)
Challenge Yourself	337	(1)
Summary	337	(2)
Design Basics	339	(14)
Layout	339	(1)
Visual Hierarchy	339	(5)
More About Contrast	342	(2)
Repetition	344	(1)
Alignment	344	(4)
Resources	348	(2)
Real World Examples	350	(2)
Summary	352	(1)
Glossary	353	(8)
Index	361