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

5. Images

In This Chapter

Images for the Web

Getting Images

Choosing an Image Editor

Saving Your Images

Inserting Images on a Page

Offering Alternative Text

Specifying Image Sizes

Scaling Images with the Browser

Scaling Images with an Image Editor

Adding Icons for Your Website

Creating images for the web is a bit different from creating images for output on paper. Although the basic characteristics of web images and printable images are the same, six main factors distinguish them: format, download speed, color, size (dimensions), transparency, and animation.

This chapter will discuss the important aspects of these six factors and explain how to use that knowledge to create effective images for your website. You’ll also learn how to insert images ...