book

The Definitive Guide to HTML5

by Adam Freeman

December 2011

Beginner to intermediate

1080 pages

23h 42m

English

Apress

Read now

Unlock full access

The History of HTMLIntroducing HTML5The Current State of HTML5The Structure of This BookFinding More Information About HTML5Summary
Selecting a BrowserSelecting an HTML EditorSelecting a Web ServerObtaining Node.jsGetting the Sample CodeSummary

Using ElementsUsing Element AttributesCreating an HTML DocumentUsing HTML EntitiesThe HTML5 Global AttributesUseful HTML ToolsSummary
Defining and Applying a StyleUnderstanding How Styles Cascade and InheritWorking with CSS ColorsUnderstanding CSS LengthsOther CSS UnitsTesting for CSS Feature SupportUseful CSS ToolsSummary
Getting Ready to Use JavaScriptUsing StatementsDefining and Using FunctionsUsing Variables and TypesUsing JavaScript OperatorsWorking with ArraysHandling ErrorsComparing the undefined and null ValuesUseful JavaScript ToolsSummary
Understanding the Sematic/Presentation DivideUnderstanding How to Select ElementsUnderstanding Element DescriptionsElement Quick ReferenceUnimplemented ElementsSummary
Setting Up the Basic Document StructureDescribing Documents with the Metadata ElementsUsing the Scripting ElementsSummary
Creating HyperlinksAnnotating Content with the Basic Text ElementsCreating BreaksRepresenting Inputs and OutputsCreating Citations, Quotations, Definitions, and AbbreviationsWorking with the Language ElementsWrapping Up: The Other Text ElementsSummary
Understanding the Need to Group ContentCreating ParagraphsUsing the div ElementWorking with Preformatted ContentQuoting from Other SourcesAdding Thematic BreaksGrouping Content into ListsDealing with FiguresSummary
Adding Basic HeadingsHiding SubheadingsCreating SectionsAdding Headers and FootersAdding Navigation BlocksWorking with ArticlesCreating SidebarsProviding Contact InformationCreating a Details SectionSummary
Creating a Basic TableAdding Headers CellsAdding Structure to a TableCreating Irregular TablesAssociating Headers with CellsAdding a Caption to a TableWorking with ColumnsApplying Borders to the table ElementSummary
Creating a Basic FormConfiguring the FormAdding Labels to a FormAutomatically Focusing on an input ElementDisabling Individual input ElementsGrouping Form Elements TogetherUsing the button ElementWorking with Elements Outside the FormSummary
Using the input Element for Text InputUsing the input Element for Password InputUsing the input Element to Create ButtonsUsing the input Element to Restrict Data EntryUsing the input Element to Obtain Search TermsUsing the input Element to Create Hidden Data ItemsUsing the input Element to Create Image Buttons and MapsUsing the input Element to Upload FilesSummary
Using the Other Form ElementsUsing Input ValidationDisabling Input ValidationSummary
Embedding an ImageEmbedding Another HTML DocumentEmbedding Content Using PluginsOther Uses for the object ElementEmbedding Numeric RepresentationsOther Embedding ElementsSummary
Understanding CSS StandardizationUnderstanding the Box ModelSelectors Quick ReferenceProperties Quick ReferenceSummary
Using the Basic CSS SelectorsCombining SelectorsUsing Pseudo-Element SelectorsSummary
Using the Structural Pseudo-Class SelectorsUsing the UI Pseudo-Class SelectorsUsing the Dynamic Pseudo-Class SelectorsOther Pseudo-SelectorsSummary
Applying a BorderSetting Element BackgroundsCreating a Box ShadowUsing OutlinesSummary
Applying Padding to an ElementAppling Margin to an ElementControlling the Size of an ElementDealing with Overflowing ContentControlling Element VisibilitySetting an Element Box TypeCreating Floating BoxesSummary
Positioning ContentCreating Multicolumn LayoutsCreating Flexible Box LayoutsCreating Table LayoutsSummary
Applying Basic Text StylesDecorating and Transforming TextCreating Text ShadowsWorking with FontsUsing Web FontsSummary
Using TransitionsUsing AnimationsUsing TransformsSummary
Setting Element Color and TransparencyStyling TablesStyling ListsStyling the CursorSummary
Understanding the Document Object ModelUnderstanding DOM Levels and ComplianceThe DOM Quick ReferenceSummary
Working with Document MetadataObtaining HTML Element ObjectsNavigating the DOM TreeSummary
Obtaining a Window ObjectGetting Information about the WindowInteracting with the WindowPrompting the UserGetting General InformationWorking with the Browser HistoryUsing Cross-Document MessagingUsing TimersSummary
Working with Element ObjectsWorking with TextModifying the ModelSummary
Working with StylesheetsWorking with Element StylesWorking with CSSStyleDeclaration ObjectsWorking with Computed StylesSummary
Using Simple Event HandlersUsing the DOM and the Event ObjectWorking with the HTML EventsSummary
The Document and Metadata ObjectsThe Text ElementsThe Grouping ElementsThe Section ElementsThe Table ElementsThe Form ElementsThe Content ElementsSummary
Getting Started with AjaxUsing the Ajax EventsDealing with ErrorsGetting and Setting HeadersMaking Cross-Origin Ajax RequestsAborting RequestsSummary
Getting Ready to Send Data to the ServerSending Form DataSending Form Data Using a FormData ObjectSending JSON DataSending FilesTracking Upload ProgressRequesting and Processing Different Content TypesSummary
Using the video ElementUsing the audio ElementWorking with Embedded Media via the DOMSummary
Getting Started with the Canvas ElementGetting a Canvas ContextDrawing RectanglesSetting the Canvas Drawing StateSaving and Restoring Drawing StateDrawing ImagesSummary
Drawing Using PathsDrawing ArcsDrawing Bezier CurvesCreating a Clipping RegionDrawing TextUsing Effects and TransformationsSummary
Creating the Source ItemsCreating the Drop ZoneWorking with the DataTransfer ObjectSummary
Using GeolocationHandling Geolocation ErrorsSpecifying Geolocation OptionsMonitoring the PositionSummary
Using Local StorageUsing Session StorageSummary
Defining the ProblemDefining the ManifestDetecting the Browser StateWorking with the Offline CacheSummary

Content preview from The Definitive Guide to HTML5

C H A P T E R 21

Creating Layouts

In this chapter, I will show you the different options available for controlling the layout of elements on the page. With the increased emphasis separating the semantic significance of HTML elements from their presentational impact, the role of CSS in laying out elements has become more important in HTML5. There are some very useful layout features in CSS3 and, of course, you can use the existing facility from earlier versions of CSS.

There are two proposed layout models for CSS3 that have yet to mature enough for me to cover in this chapter. The first, template layouts, allows you to create flexible to contain elements. None of the browsers implement this module, but you can experiment with the functionality ...