book

HTML for the World Wide Web, Fifth Edition, with XHTML and CSS

Name: HTML for the World Wide Web, Fifth Edition, with XHTML and CSS
Author: Elizabeth Castro
ISBN: 9780321130075

by Elizabeth Castro

September 2002

Intermediate to advanced

480 pages

15h 30m

English

Peachpit Press

Read now

Unlock full access

Copyright
Dedication
Special thanks to
Introduction
The Internet, the Web, and HTMLOpen but Not EqualThe Browser WarsThe Push for StandardsHTML 3.2: Standardization beginsHTML 4 and CSSXML and XHTMLThe Real WorldWhat Should You Use?Deciding between HTML, XHTML, and CSSHow This Book WorksThe HTML VQS Web Site
1. Web Page Building Blocks
Markup: Elements, Attributes, and ValuesElementsAttributes and ValuesBlock vs InlineParents and ChildrenA Web Page’s Text ContentLinks, Images, and Other Non-Text ContentFile NamesUse lowercase file namesUse the proper extensionURLsAbsolute URLsRelative URLsHTML vs XHTMLWhat do you get for your troubles?Versions, flavors, and DOCTYPEThe DOCTYPE and Standards vs. Quirks modeThe Default Display of (X)HTMLAdding Style to Your Web PagesThe Cascade: When Rules CollideA Property’s ValuePredefined ValuesLengths and PercentagesBare NumbersURLsCSS Colors
2. Working With Web Page Files
Designing Your SiteTo design your siteCreating a New Web PageTo create a new Web pageSaving Your Web PageTo save your Web pageAbout Microsoft Word and Web PagesSpecifying a Default or “Home” PageTo specify a default or “home” pageEditing Web PagesTo edit Web pagesOrganizing FilesTo organize your filesViewing Your Page in a BrowserTo look at your page in a browserThe Inspiration of OthersTo view other designers’ (X)HTML code
3. Basic (X)HTML Structure
Starting Your Web PageTo start a transitional HTML 4 pageTo begin a transitional XHTML pageCreating the FoundationTo create the head sectionTo create the bodyDeclaring the EncodingTo declare the character encodingCreating a TitleTo create a titleCreating Section HeadersTo organize your Web page with headersStarting a New ParagraphTo begin a new paragraphNaming ElementsTo name unique elementsTo name groups of elementsBreaking up a Page into DivisionsTo break up a page into divisionsCreating Inline SpansTo name inline spansCreating a Line BreakTo insert a line breakAdding CommentsTo add comments to your HTML pageLabeling Elements in a Web PageTo label elements in a Web page
4. Basic (X)HTML Formatting
Making Text Bold or ItalicTo make text boldTo make text italicChanging the Size of TextTo make the text bigger or smaller than the surrounding textUsing a Monospaced FontTo format text with a monospaced fontUsing Preformatted TextTo use preformatted textQuoting TextTo quote block-level textTo quote inline textCreating Superscripts and SubscriptsTo create superscripts or subscriptsMarking Changed TextTo mark newly inserted textTo mark deleted textExplaining AbbreviationsTo explain abbreviations
5. Creating Web Images
About Images for the WebFormatColorSize and ResolutionSpeedTransparencyAnimationGetting ImagesTo get imagesThe Save for Web CommandTo use Adobe’s Save for Web commandMaking Images SmallerTo make images smallerCreating TransparencyTo create transparencySaving Images with TransparencyTo save images with transparencySimulating TransparencyTo simulate transparency by making the background a solid colorUsing (Mostly) Browser Safe ColorsTo preview ditherTo convert all colors to Web-safeTo convert selected colors to Websafe colors (Photoshop only)Reducing the Number of ColorsTo reduce the number of colorsShowing Images ProgressivelyTo show images progressivelyBlurring Images to Aid JPEG CompressionTo blur images to aid JPEG compressionCreating Animated GIFsTo create an animated GIF
6. Using Images
Inserting Images on a PageTo insert an image on a pageOffering Alternate TextTo offer alternate text when images don’t appearSpecifying Size for Speedier ViewingTo find the size of your image with your browserTo figure out the size of your image with Photoshop or Photoshop ElementsTo specify the size of your image for speedier viewingScaling an ImageTo scale an imageLinking Thumbnails to ImagesTo link a thumbnail to a larger imageMaking Images FloatTo make images floatTo float images on both sidesStopping Elements from WrappingTo stop elements from wrappingAdding Space around an ImageTo add space around an imageAligning ImagesTo align an image with textAdding Horizontal RulesTo insert a horizontal rule
7. Links
Creating a Link to Another Web PageTo create a link to another Web pageCreating AnchorsTo create an anchorLinking to a Specific AnchorTo create a link to an anchorTargeting Links to Specific WindowsTo target linksSetting the Default TargetTo set a default target for a pageCreating Other Kinds of LinksTo create other kinds of linksCreating Keyboard Shortcuts for LinksTo add a keyboard shortcut to a linkSetting the Tab Order for LinksTo set the tab orderUsing Images to Label LinksTo use images to label linksDividing an Image into Clickable RegionsTo divide an image into clickable regionsCreating a Client-Side Image MapTo create a client-side image mapUsing a Server-Side Image MapTo use a server-side image map

8. Creating Styles
Constructing a Style RuleTo construct a style ruleConstructing SelectorsSelecting Elements by NameTo select elements to format based on their typeSelecting Elements by Class or IDTo select elements to format based on their classTo select elements to format based on their idSelecting Elements by ContextTo select elements to format based on their ancestorTo select elements to format based on their parentTo select elements to format that are the first child of their parentTo select elements to format based on an adjacent siblingSelecting Link Elements Based on Their StateTo select link elements to format based on their stateSelecting Part of an ElementTo select the first line of an elementTo select the first letter of an elementSelecting Elements Based on AttributesTo select elements to format based on their attributesSpecifying Groups of ElementsTo apply styles to groups of elementsCombining SelectorsTo combine selectors
9. Applying Styles
Creating an External Style SheetTo create an external style sheetLinking External Style SheetsTo link an external style sheetOffering Alternate Style SheetsTo offer alternate style sheetsCreating an Internal Style SheetTo create an internal style sheetImporting External Style SheetsTo import an external style sheetApplying Styles LocallyTo apply styles locallyThe Importance of LocationAdding Comments to Style RulesTo add comments to style rules
10. Formatting With Styles
Choosing a Font FamilyTo set the font familyEmbedding Fonts on a PageTo embed fonts on a pageCreating ItalicsTo create italicsTo remove italicsApplying Bold FormattingTo apply bold formattingTo remove bold formattingSetting the Font SizeTo mandate a specific font sizeTo set a size that depends on the parent element’s sizeSetting the Line HeightTo set the line heightSetting All Font Values at OnceTo set all font values at onceSetting the Text ColorTo set the text colorChanging the Text’s BackgroundTo change the text’s backgroundControlling SpacingTo specify trackingTo specify kerningAdding IndentsTo add indentsSetting White Space PropertiesTo set white space propertiesAligning TextTo align textChanging the Text CaseTo change the text caseUsing Small CapsTo use a small caps fontTo remove small capsDecorating TextTo decorate textTo get rid of decorations
11. Layout with Styles
Structuring Your PagesTo structure your pageThe Box ModelDisplaying and Hiding ElementsTo specify how elements should be displayedPositioning Elements AbsolutelyTo absolutely position elementsAffixing an Element to the Browser WindowTo affix an element to the browser windowOffsetting Elements In the Natural FlowTo offset elements within the natural flowChanging the BackgroundTo change the background colorTo use a background imageTo repeat a background imageTo control whether the background image is attached or notTo specify the position of an element’s background imageTo change all the background properties at onceChanging the Foreground ColorTo change the foreground colorChanging the CursorTo change the cursorSetting the BorderTo define the border-styleTo set the width of the borderTo set the color of the borderTo set one or more border properties at once with a shortcutAdding Padding around an ElementTo add padding around an elementSetting the Margins around an ElementTo set an element’s marginsSetting the Height or Width for an ElementTo set the height or width for an elementWidth, margins, and autoPositioning Elements in 3DTo position elements in 3DDetermining Where Overflow Should GoTo determine where overflow should goMaking Elements FloatTo wrap text around elementsControlling Where Elements FloatTo control where elements floatAligning Elements VerticallyTo position elements vertically
12. Style Sheets for Printing
Using Media-Specific Style SheetsTo designate media-specific style sheetsHow Print Style Sheets DifferSuggestions for print style sheetsControlling Page BreaksTo control page breaks before elementsTo keep elements from being divided between two pagesOther Print Specific CSS PropertiesTo describe the pages for printed outputTo print certain elements on specific kinds of pagesTo control widows and orphans
13. Lists
Creating Ordered and Unordered ListsTo create ordered listsChoosing Your Markers (Bullets)To choose your markersTo display lists without markersChoosing Where to Start List NumberingTo determine the initial value of an entire list’s numbering schemeTo change the numbering of a given list itemUsing Custom MarkersTo use custom markersTo remove custom markersControlling Where Markers HangTo control where markers hangSetting All List-Style Properties at OnceTo set all the list-style properties at onceCreating Definition ListsTo create definition listsStyling Nested ListsTo style nested lists
14. Tables
Mapping Out Your PageTo map out your pageCreating a Simple TableTo create a simple tableAdding a BorderTo create a border with (X)HTMLTo create a border with stylesSetting the WidthTo set the width of a cell or tableTo set the width with stylesCentering a Table on the PageTo center a table on the pageTo center a table on the page with CSSWrapping Text around a TableTo wrap text around a table with (X)HTMLTo wrap text around a table with CSSCombining TablesTo nest one table in anotherTo use multiple tablesAligning a Cell’s ContentsTo align the contents of cells with (X)HTMLTo align the contents of cells with CSSChanging the BackgroundTo change a cell’s background color with (X)HTMLTo add a cell’s background image with (X)HTMLTo change a cell’s background image or color with CSSControlling the SpaceTo control the padding with (X)HTMLTo control the spacing with (X)HTMLTo control the padding with CSSTo control the space between cell borders with CSSSpanning a Cell across ColumnsTo span a cell across two columnsSpanning a Cell across RowsTo span a cell across two or more rowsDividing Your Table into Column GroupsTo divide a table into structural column groupsTo divide a table into non-structural column groupsDividing the Table into Horizontal SectionsTo divide the table into horizontal sectionsChoosing Which Borders to DisplayTo choose which external sides should have a borderTo choose which internal borders should be displayedControlling Line Breaks in a CellTo keep text in a cell on one single lineSpeeding up Table DisplayTo speed up table display
15. Frames
Creating a Simple FramesetTo create a simple framesetCreating Frames in ColumnsTo create frames in columnsCreating Frames in Rows and ColumnsTo create a frameset with both rows and columnsCombining FramesetsTo combine framesetsCreating an Inline FrameTo create an inline frameAdjusting a Frame’s MarginsTo adjust a frame’s marginsShowing or Hiding Scroll BarsTo show scroll bars all the timeTo hide scroll bars all the timeAdjusting the Color of the BordersTo adjust the color of all the borders in the framesetTo change the color of rows, columns, or individual framesAdjusting the Frame BordersTo adjust the amount of space between framesTo hide the sculpted bordersKeeping Visitors from Resizing FramesTo keep visitors from resizing your framesTargeting Links to Particular FramesTo target a link to a particular frameTargeting Links to Special SpotsTo target a link to a special spotChanging the Default TargetTo change the default targetNesting FramesetsTo nest framesetsOffering Alternatives to FramesTo offer alternatives to framesEmbedding Content with ObjectsTo embed content without framesMaking Frames More AccessibleTo make frame-based sites more accessible
16. Forms
About CGI ScriptsWhat does the CGI script do?SecurityGetting a ScriptCPANThe CGI Resource IndexExtropia.comThe WebScripts ArchiveUsing the Scripts Included with This BookTo use the scripts included with this bookPreparing a ScriptAdapting scripts for your useTransferring the script to the serverPermissionsAdd it to your form!Creating a FormTo create a formSending Form Data via E-mailTo send form data via e-mailUsing a Form Hosting ServiceTo use a form hosting serviceCreating Text BoxesTo create a text boxCreating Password BoxesTo create password boxesCreating Radio ButtonsTo create a radio buttonCreating CheckboxesTo create checkboxesCreating MenusTo create menusTo group menu optionsCreating Larger Text AreasTo create larger text areasAllowing Visitors to Upload FilesTo allow visitors to upload filesAbout Hidden FieldsAdding Hidden Fields to a FormTo add hidden fields to a formCreating the Submit ButtonTo create a submit buttonTo create a submit button with an imageResetting the FormTo create a reset buttonTo create a reset button with an imageUsing an Image to Submit DataTo use an image to submit dataOrganizing the Form ElementsTo organize the form elementsFormally Labeling Form PartsTo formally label form partsSetting the Tab Order in a FormTo set the tab orderAdding Keyboard ShortcutsTo add a keyboard shortcut to a form elementDisabling Form ElementsTo disable a form elementKeeping Elements from Being ChangedTo keep elements from being changed
17. Multimedia
Of Plugins and PlayersGetting Players for Your VisitorsGetting Multimedia FilesEmbedding QuickTime MoviesTo add internal video with QuickTimeScaling a QuickTime MovieTo scale a QuickTime movieLooping a QuickTime MovieTo loop a QuickTime moviePutting QuickTime Sounds on a PageTo put QuickTime sounds on a pageHiding QuickTime SoundsTo hide QuickTime soundsEmbedding Windows Media Player FilesTo embed Windows Media Player filesInserting Java AppletsTo insert an appletEmbedding Other Multimedia FilesTo embed other multimedia filesLinking to Multimedia FilesTo link to multimedia filesCreating an Automatic Slide ShowTo create an automatic slide showCreating a MarqueeTo create a marqueeAdding Background SoundTo add background sound
18. Scripts
Adding an “Automatic” ScriptTo add an automatic scriptCalling an External Automatic ScriptTo call an external automatic scriptTriggering a ScriptTo trigger a scriptCreating a Button that Executes a ScriptTo create a button that executes a scriptAdding Alternate InformationTo add alternate information for older browsersHiding Scripts from Older BrowsersTo hide scripts from older browsersHiding Scripts from XML ParsersTo hide internal scripts from XML parsersSetting the Default Scripting LanguageTo set the default scripting language
19. Javascript Essentials
Adding the Current Date and TimeTo add the current date and time to your pageChanging a Link’s Status LabelTo change a link’s status labelChanging Multiple Frames with One LinkTo change multiple frames with just one linkKeeping Frames in Their FramesetsTo keep frames in their framesetsChanging an Image When a Visitor PointsTo change an image when the visitor points at itLoading Images into CacheTo load images into cacheControlling a New Window’s SizeTo control the size of a new window
20. Symbols and Non-English Characters
About Character EncodingsSaving Your Page with the Proper EncodingTo save your page with the proper encodingEditing a Page with the Proper EncodingTo edit a page with the proper encodingDeclaring Your Page’s Character EncodingTo declare your page’s character encodingAdding Characters from Outside the EncodingTo add characters from outside the encodingSpecifying Your Page’s LanguageTo specify a page’s language
21. Formatting: The Old Way
Choosing Default Characteristics for TextTo choose default characteristics for body textFormatting Bits of TextTo format bits of textAnother Way to Choose Default ColorsTo choose a default color for textChanging the Color of LinksTo change the color of linksStriking Out or Underlining TextTo strike out or underline textMaking Text BlinkTo make text blink
22. Layout: The Old Way
Using Background ColorTo set the background colorUsing Background ImagesTo use a background imageCentering Elements on a PageTo center elements on a pageSpecifying the MarginsTo specify the marginsKeeping Lines TogetherTo keep elements on one lineCreating Discretionary Line BreaksTo create discretionary line breaksSpecifying the Space Between ParagraphsTo specify the space between paragraphsCreating IndentsTo create indentsCreating Indents (with Lists)To create indents with listsCreating Blocks of SpaceTo create blocks of spaceUsing Pixel ShimsTo use a pixel shimCreating ColumnsTo create columnsPositioning Elements with LayersTo position elements with layers
23. WML: Web Pages for Mobile Devices
Preparing Your ServerTo prepare an Apache server to serve WML files and images from a particular directoryStarting Your WML PageTo start your WML pageCreating a CardTo create a cardCreating Basic ContentTo create basic contentIncluding an ImageTo include an imageCreating a TableTo create a tableCreating a LinkTo create a link in the pageProgramming ButtonsTo use buttonsCreating Conditional ActionsTo specify a conditional actionScheduling an ActionTo schedule an actionMaking a CallTo create the card that makes a callTo make a callSetting and Using VariablesTo set a variable explicitlyTo display a variable’s contentCreating Input BoxesTo create input boxesCreating MenusTo create menusProcessing Data from VisitorsTo process data from visitorsCreating Elements on Multiple PagesTo create elements on multiple pagesRestricting Access to a DeckTo restrict access to a deckTesting WML PagesTo test WML pages
24. Testing and Debugging Web Pages
Validating Your CodeTo validate your codeChecking the Easy Stuff: HTMLTo check the easy stuff with HTMLChecking the Easy Stuff: XHTMLTo check the easy stuff with XHTMLChecking the Easy Stuff: CSSTo check the easy stuff with CSSTesting Your PageTo test your (X)HTML pagesWhen the Browser Displays the CodeWhen the browser displays the code instead of the pageWhen Images Don’t AppearWhen images don’t appearDifferences from Browser to BrowserWhen your page looks different from one browser to the nextWhen Nothing Appears in Netscape 4When the page looks fine in other browsers, but doesn’t appear in Netscape 4Still Stuck?
25. Publishing Your Pages on the Web
Finding a Host for Your SiteGetting Your Own Domain NameTo get your own domain nameTransferring Files to the ServerTo define a new FTP site’s propertiesTo set up WS_FTP to transfer HTML files as text (in ASCII mode)To transfer files to the server with WS_FTP (for Windows)To transfer HTML files to the server with Fetch (for the Mac)Transferring Files to AOLTo transfer a file with AOL’s tools
26. Getting People to Visit
About KeywordsDoBut...Explicitly Listing KeywordsTo explicitly list keywordsProviding a Description of Your PageTo control your page’s summaryControlling Other InformationTo control other information about your pageKeeping Visitors AwayTo keep search engine robots outKeeping Pages From Being ArchivedTo keep search engines from archiving your pagesCreating a Crawler PageTo create a crawler page in ExplorerTo create a crawler page with NetscapeSubmitting Your Site to a Search EngineTo submit your site to a search engineImproving Your Ranking by Getting LinkedTo improve your ranking by getting linkedWriting Pages That Are Easy to IndexFramesImage mapsDynamically generated pagesOther Techniques for Publicizing Your Site
A. (X)HTML Elements and Attributes
B. CSS Properties and Values
C. Intrinsic Events
D. (X)HTML Symbols and Characters
Characters with special meaning in HTML and XHTMLAccented characters, accents, and other diacritics from Western European LanguagesPunctuation charactersMathematical and technical characters, (including Greek)Shapes and Arrows
E. Hexadecimals
F. (X)HTML Tools
(X)HTML EditorsImages and GraphicsGraphics Tools
Colophon

Content preview from HTML for the World Wide Web, Fifth Edition, with XHTML and CSS

Chapter 11. Layout with Styles

Using CSS for layout has several advantages over using other methods, like tables (which we’ll discuss in Chapter 14). First, CSS is good for creating liquid layouts, that expand or contract depending on the size of your visitor’s monitor. In addition, keeping content separate from layout instructions means you can easily apply the same layout to an entire Web site all at once. You can then change the layout of the whole site simply by modifying the CSS file. The CSS + (X)HTML combination also tends to produce smaller file sizes, which means your visitors don’t have to wait as long to see your site. Finally, since CSS and XHTML are the current standards, pages that adhere to their rules are guaranteed to be supported ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide

Publisher Resources

ISBN: 0321130073Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

HTML for the World Wide Web, Fifth Edition, with XHTML and CSS

by Elizabeth Castro

Chapter 11. Layout with Styles

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.