book

HTML and CSS: Visual QuickStart Guide, Eighth Edition

by Elizabeth Castro, Bruce Hyslop

August 2013

Beginner

576 pages

20h 24m

English

Peachpit Press

Read now

Unlock full access

HTML and CSS in BriefWeb BrowsersWeb Standards and SpecificationsProgressive Enhancement: A Best PracticeIs This Book for You?How This Book WorksCompanion Website
Thinking in HTMLA Basic HTML PageMarkup: Elements, Attributes, Values, and MoreA Webpage’s Text ContentLinks, Images, and Other Non-Text ContentFile and Folder NamesURLsHTML: Markup with MeaningA Browser’s Default Display of WebpagesKey Takeaways
Planning Your SiteCreating a New WebpageSaving Your WebpageSpecifying a Default Page or HomepageEditing WebpagesOrganizing FilesViewing Your Page in a BrowserThe Inspiration of Others
Starting Your WebpageCreating a TitleCreating HeadingsCommon Page ConstructsCreating a HeaderMarking NavigationMarking the Main Area of a WebpageCreating an ArticleDefining a SectionSpecifying an AsideCreating a FooterCreating Generic ContainersImproving Accessibility with ARIANaming Elements with a Class or IDAdding the Title Attribute to ElementsAdding Comments

Adding a ParagraphSpecifying Fine PrintMarking Important and Emphasized TextCreating a FigureIndicating a Citation or ReferenceQuoting TextSpecifying TimeExplaining AbbreviationsDefining a TermCreating Superscripts and SubscriptsAdding Author Contact InformationNoting Edits and Inaccurate TextMarking Up CodeUsing Preformatted TextHighlighting TextCreating a Line BreakCreating SpansOther Elements
Images for the WebGetting ImagesChoosing an Image EditorSaving Your ImagesInserting Images on a PageOffering Alternative TextSpecifying Image SizesScaling Images with the BrowserScaling Images with an Image EditorAdding Icons for Your Website
Creating a Link to Another Webpage (and Other Link Basics)Creating and Linking to AnchorsCreating Other Kinds of Links
Constructing a Style RuleAdding Comments to Style RulesUnderstanding InheritanceThe Cascade: When Rules CollideA Property’s Value
Creating an External Style SheetLinking to External Style SheetsCreating an Embedded Style SheetApplying Inline StylesThe Cascade and the Order of StylesUsing Media-Specific Style SheetsThe Inspiration of Others: CSS
Constructing SelectorsSelecting Elements by NameSelecting Elements by Class or IDSelecting Elements by ContextSelecting an Element That Is the First or Last ChildSelecting the First Letter or First Line of an ElementSelecting Links Based on Their StateSelecting Elements Based on AttributesSpecifying Groups of ElementsCombining Selectors
Before and AfterChoosing a Font FamilySpecifying Alternate FontsCreating ItalicsApplying Bold FormattingSetting the Font SizeSetting the Line HeightSetting All Font Values at OnceSetting the ColorSetting the BackgroundControlling SpacingAdding IndentsAligning TextChanging the Text CaseUsing Small CapsDecorating TextSetting Whitespace Properties
Considerations When Beginning a LayoutStructuring Your PagesStyling HTML5 Elements in Older BrowsersResetting or Normalizing Default StylesThe Box ModelControlling the Display Type and Visibility of ElementsSetting the Height or Width for an ElementAdding Padding Around an ElementSetting the BorderSetting the Margins Around an ElementMaking Elements FloatControlling Where Elements FloatPositioning Elements RelativelyPositioning Elements AbsolutelyPositioning Elements in a StackDetermining How to Treat OverflowAligning Elements VerticallyChanging the Cursor
Responsive Web Design: An OverviewMaking Images FlexibleCreating a Flexible Layout GridUnderstanding and Implementing Media QueriesPutting It All TogetherAccommodating Older Versions of Internet Explorer
What Is a Web Font?Where to Find Web FontsDownloading Your First Web FontUnderstanding the @font-face RuleStyling Text with a Web FontApplying Italics and Bold with a Web FontUsing Web Fonts from Google Fonts
Browser Compatibility, Progressive Enhancement, and PolyfillsUnderstanding Vendor PrefixesRounding the Corners of ElementsAdding Drop Shadows to TextAdding Drop Shadows to ElementsApplying Multiple BackgroundsUsing Gradient BackgroundsSetting the Opacity of ElementsEffects with Generated ContentCombining Images with Sprites
Creating Ordered and Unordered ListsChoosing Your MarkersUsing Custom MarkersChoosing Where to Start List NumberingControlling Where Markers HangSetting All List-Style Properties at OnceStyling Nested ListsCreating Description Lists
Improvements to Forms in HTML5Creating FormsProcessing FormsOrganizing the Form ElementsCreating Text BoxesLabeling Form PartsCreating Password BoxesCreating Email, Search, Telephone, and URL BoxesCreating Radio ButtonsCreating CheckboxesCreating Text AreasCreating Select BoxesAllowing Visitors to Upload FilesCreating Hidden FieldsCreating a Submit ButtonDisabling Form ElementsStyling Forms Based on Their State
Third-Party Plugins and Going NativeVideo File FormatsAdding a Video to Your WebpageAdding Controls and Autoplay to Your VideoLooping a Video and Specifying a Poster ImagePreventing a Video from PreloadingUsing Video with Multiple Sources and a Text FallbackProviding AccessibilityAudio File FormatsAdding an Audio File with Controls to Your WebpageAutoplaying, Looping, and Preloading AudioProviding Multiple Audio Sources with a FallbackAdding Video and Audio with a Flash FallbackAdvanced MultimediaFurther Resources
Structuring TablesSpanning Columns and Rows
Loading an External ScriptAdding an Embedded ScriptJavaScript Events
Validating Your CodeTesting Your PagesTrying Some Debugging TechniquesChecking the Easy Stuff: GeneralChecking the Easy Stuff: HTMLChecking the Easy Stuff: CSSWhen Images Don’t Display
Getting Your Own Domain NameFinding a Host for Your SiteTransferring Files to the Server

Content preview from HTML and CSS: Visual QuickStart Guide, Eighth Edition

20. Testing & Debugging Webpages

In This Chapter

Validating Your Code

Testing Your Pages

Trying Some Debugging Techniques

Checking the Easy Stuff: General

Checking the Easy Stuff: HTML

Checking the Easy Stuff: CSS

When Images Don’t Display

So you are working on a page and fire it up in your browser only to find that it doesn’t look anything like you expected. Or it doesn’t display at all. Or maybe it looks great in one browser, but when you check it in another, something is a little off.

Between HTML, CSS, and the multitude of browsers (especially older versions of Internet Explorer) and devices, it’s easy to have trouble here and there. This chapter will alert you to some common errors and will also help you weed out your own.

Some of these ...