book

Start Here!™ Learn HTML5

Name: Start Here!™ Learn HTML5
Author: Faithe Wempen
ISBN: 9780735670358

by Faithe Wempen

November 2012

Beginner

360 pages

8h 11m

English

Microsoft Press

Read now

Unlock full access

Table of Contents
Dedication
Introduction
Who Should Read This BookAssumptionsWho Should Not Read This BookOrganization of This BookConventions and Features in This BookSystem RequirementsCode SamplesInstalling the Code SamplesUsing the Code SamplesAcknowledgmentsErrata & Book SupportWe Want to Hear from YouStay in Touch
I. Getting Started with HTML
1. HTML Basics: The Least You Need to Know
Understanding HTML TagsOpening a Webpage in NotepadOpen a Webpage in NotepadOpen a Webpage in NotepadOther Ways of Opening Webpages in NotepadAdding a Location to the Favorites ListAdd a Location to Your Favorites ListPreviewing HTML Files in a Web BrowserOpen a Webpage in Internet ExplorerOpen a Webpage in Internet ExplorerMaking, Saving, and Viewing ChangesMake and View Changes to an HTML FileMake and View Changes to an HTML FileKey Points
2. Setting Up the Document Structure
Specifying the Document TypeCreating the HTML, Head, and Body SectionsCreate an HTML5 TemplateCreate an HTML5 TemplateCreating Paragraphs and Line BreaksAdd Text to an HTML FileSpecifying a Page Title and MetatagsSpecify a Page Title and MetatagsKey Points
3. Formatting Text with Tags
Creating HeadingsCreate HeadingsCreate HeadingsApplying Bold and Italic FormattingApply Bold and ItalicApply Bold and ItalicApplying Superscript and Subscript FormattingApply Superscript FormattingApply Superscript FormattingUsing Monospace and Preformatted TextUse Monospaced and Preformatted TextUse Monospaced and Preformatted TextFormatting a Block QuotationUse a Block Quotation TagUse a Block Quotation TagConfiguring View Settings in Internet ExplorerConfigure Internet Explorer View SettingsConfigure Internet Explorer View SettingsKey Points
4. Using Lists and Backgrounds
Creating Bulleted and Numbered ListsNesting ListsChanging the Bullet or Number CharacterSpecifying the Start of a Numbered ListCreate Ordered (Numbered) and Unordered (Bulleted) ListsCreating Definition ListsCreate a List of DefinitionsCreate a List of DefinitionsInserting Special CharactersInsert Special CharactersInsert Special CharactersInserting Horizontal LinesAdd Decorative Horizontal LinesAdd Decorative Horizontal LinesChoosing Background Colors and Foreground ColorsUnderstanding How Colors are Specified on WebpagesApplying a Background ColorApplying a Foreground ColorApply Background and Foreground ColorsSpecifying a Background Image FileUse a Graphic as a BackgroundKey Points
5. Creating Hyperlinks and Anchors
Hyperlinking to a WebpageUsing Partial Paths and FilenamesUsing Relative and Absolute PathsSetting a Target WindowCreate Hyperlinks to FilesHyperlinking to an Email AddressCreate a mailto: HyperlinkCreate a mailto: HyperlinkCreating and Hyperlinking to AnchorsCreate an Anchor PointCreate an Anchor PointHyperlinking to Other ContentHyperlink to Other ContentHyperlink to Other ContentKey Points
II. Style Sheets and Graphics

6. Introduction to Style Sheets
Understanding StylesConstructing Style RulesCreate an Embedded Style SheetCreate an Embedded Style SheetCreating Styles for Nested TagsUse Styles to Format a Nested ListUse Styles to Format a Nested ListCreating Classes and IDs for Applying StylesCreate and Use ClassesCreate and Use ClassesApplying Styles to Hyperlinks with Pseudo-ClassesUse Pseudo-Classes to Define Hyperlink FormattingUse Pseudo-Classes to Define Hyperlink FormattingCreating and Linking to External Style SheetsCreate and Use an External Style SheetCreate and Use an External Style SheetKey Points
7. Formatting Text with CSS
Specifying a Font FamilyApply Fonts with StylesApply Fonts with StylesSpecifying a Font Size and ColorSpecify a Font and ColorSpecify a Font and ColorApplying Bold and ItalicsApply Bold and Italic with StylesApply Bold and Italic with StylesApplying Strikethrough and UnderliningApply Underlining and StrikethroughApply Underlining and StrikethroughCreating Inline SpansFormat Text with Inline SpansFormat Text with Inline SpansAdjusting Spacing between LettersChange Word and Letter SpacingChange Word and Letter SpacingKey Points
8. Formatting Paragraphs with CSS
Indenting ParagraphsApply Paragraph Indentation and PaddingApply Paragraph Indentation and PaddingApplying a Border to a ParagraphSpecifying a Border StyleSetting Border PaddingSpecifying Border Width and ColorFormatting Border Sides IndividuallySetting All Border Attributes at OnceFormat Paragraph BordersSpecifying the Horizontal Alignment of a ParagraphChange Horizontal AlignmentChange Horizontal AlignmentSpecifying Vertical Space within a ParagraphChange Vertical SpacingChange Vertical SpacingKey Points
9. Inserting Graphics
Understanding Graphic Size and ResolutionInserting a GraphicInsert a GraphicInsert a GraphicClearing a GraphicSet an Object to Clear a GraphicSet an Object to Clear a GraphicControlling Image Size and PaddingSize the Size, Padding, and Margin for a GraphicSize the Size, Padding, and Margin for a GraphicUsing a Graphic as a HyperlinkCreate a Graphical HyperlinkCreate a Graphical HyperlinkCreating ThumbnailsHyperlink Thumbnails of ImagesHyperlink Thumbnails of ImagesIncluding Alternate Text for GraphicsUse Alt TagsUse Alt TagsAdding Figure CaptionsAdd a Single Caption to a Group of FiguresAdd a Single Caption to a Group of FiguresKey Points
III. Page Layout and Navigation
10. Creating Navigational Aids
Planning Your Site’s OrganizationCreating a Text-Based Navigation BarCreate a Text-Based Navigation BarCreate a Text-Based Navigation BarCreating a Graphical Navigation BarCreate a Graphical Navigation BarCreate a Graphical Navigation BarRedirecting to Another URLRedirect to Another URLRedirect to Another URLCreating Custom Error PagesCreate a Custom 404 Error PageCreate a Custom 404 Error PageKey Points
11. Creating Division-Based Layouts
Understanding HTML5 Semantic TagsBeginning to Think in DivisionsCreating DivisionsCreate DivisionsCreate DivisionsCreating an HTML5 Semantic LayoutCreate an HTML5 Semantic LayoutCreate an HTML5 Semantic LayoutPositioning DivisionsFloating a Division to the Right or LeftPositioning a Division on the PagePosition DivisionsFormatting DivisionsFormat DivisionsFormat DivisionsKey Points
12. Creating Tables
Creating a Simple TableCreate a TableCreate a TableSpecifying the Size of a TableResize a TableResize a TableSpecifying the Width of a ColumnChange Table Column WidthsChange Table Column WidthsSpanning (Merging) Table CellsChange Table Column WidthsChange Table Column WidthsUsing Tables for Page LayoutBuild a Table-Based Page LayoutBuild a Table-Based Page LayoutKey Points
13. Formatting Tables
Applying Table BordersApplying Borders by Using AttributesApplying Borders by Using StylesApply and Remove Table BordersApplying Background and Foreground FillsFormat a Table’s Foreground and BackgroundFormat a Table’s Foreground and BackgroundChanging Cell Padding, Spacing, and AlignmentSetting Cell PaddingSetting Cell SpacingSetting Horizontal and Vertical AlignmentChange a Table’s Padding, Spacing, and AlignmentKey Points
14. Creating User Forms
Creating a Basic FormCreating a Text BoxSpecial Field Types for Email and Web AddressesCreating a Text AreaCreating a Submit or Clear ButtonAdding Default or Placeholder TextCreate a Simple Form with Text BoxesCreating Check Boxes and Option ButtonsAdd Option Buttons and a Check Box to a FormAdd Option Buttons and a Check Box to a FormCreating Menu ListsCreate a Drop-Down Menu List on a FormCreate a Drop-Down Menu List on a FormAdditional Input Types in HTML5Understanding CGI and Other Advanced ToolsKey Points
15. Incorporating Sound and Video
Understanding Audio and Video in HTML5HTML Multimedia BasicsMultimedia Formats and ContainersCodecs: Decoding the Video and AudioWhich Format to Choose?Encoding VideoEncode a Video Clip with VLC Media PlayerEmbedding Video ClipsIntroducing the <video> TagThe <embed> Tag: Your Fallback PlanPlace a Video Clip on a WebpageAdd a Video Clip to a WebpageIncorporating Audio on a WebpagePlaying Audio with the <audio> TagPlaying Audio in Older BrowsersAdd an Audio Clip to a WebpageKey Points
16. HTML and Microsoft Expression Web
Exploring the Expression Web InterfaceView a Webpage in Expression WebView a Webpage in Expression WebCreating Websites and WebpagesStart a New WebsiteStart a New WebsiteCreate a Page by Using a CSS TemplateCreate a Website Using a CSS TemplateInsert GraphicsImport an Images FolderImport an Images folderPlace Images on a PageInsert GraphicsAdd a Background Image to a DivisionAdd a Background Image to a DivisionFormatting TextFormat TextFormat TextFormatting a DivisionFormat a DivisionFormat a DivisionInserting HyperlinksInsert Text and Graphical HyperlinksInsert Text and Graphical HyperlinksKey Points
IV. Appendices
A. Designing for Usability
Understanding UsabilityPlanning for UsabilitySketching the Site OrganizationDesigning a Consistent Page TemplateDesigning the Content of Individual PagesPerforming Usability Testing
B. Designing for Accessibility
Guideline 1: Provide Equivalent Alternatives to Auditory and Visual ContentGuideline 2: Don’t Rely on Color AloneGuideline 3: Use Markup and Style Sheets, and Do So ProperlyGuideline 4: Clarify Natural Language UsageGuideline 5: Create Tables that Transform GracefullyGuideline 6: Ensure Pages that Feature New Technologies Transform GracefullyGuideline 7: Ensure User Control of Time-Sensitive Content ChangesGuideline 8: Ensure Direct Accessibility of Embedded User InterfacesGuideline 9: Design for Device IndependenceGuideline 10: Use Interim SolutionsGuideline 11: Use W3C Technologies and GuidelinesGuideline 12: Provide Context and Orientation InformationGuideline 13: Provide Clear Navigation MechanismsGuideline 14: Ensure that Documents are Clear and Simple
C. Quick Reference
Tags Added in HTML 5Tags Removed in HTML 5
Glossary
Index
About the Author
Copyright

Content preview from Start Here!™ Learn HTML5

Chapter 9. Inserting Graphics

In this chapter, you will:

Inserting a Graphic
Arrange elements on the page
Controlling Image Size and Padding
Hyperlink from graphics
Utilize thumbnail graphics
Including Alternate Text for Graphics
Adding Figure Captions

So far in this book, you have created text-only webpages. They’re perfectly functional, but a bit dull. Webpages are more interesting and attractive when they include graphics.

Note

Graphic or image? The HTML5 specification uses the term image, but the term graphic is more popular in everyday usage. This book uses the two terms interchangeably.

In a word-processing program such as Microsoft Word, you embed graphics directly into the document. When you distribute a document to others, the graphics are included ...

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

Publisher Resources

ISBN: 9780735670358Purchase Link

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Start Here!™ Learn HTML5

by Faithe Wempen

Chapter 9. Inserting Graphics

Note

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.