| |
| |
| Introduction | |
| |
| |
| HTML and CSS in Brief | |
| |
| |
| Web Browsers | |
| |
| |
| Web Standards and Specifications | |
| |
| |
| Progressive Enhancement: A Best Practice | |
| |
| |
| Is This Book for You? | |
| |
| |
| How This Book Works | |
| |
| |
| Companion Website | |
| |
| |
| |
| Webpage Building Blocks | |
| |
| |
| Thinking in HTML | |
| |
| |
| A Basic HTML Page | |
| |
| |
| Markup: Elements, Attributes, Values, and More | |
| |
| |
| A Webpage's Text Content | |
| |
| |
| Links, Images, and Other Non-Text Content | |
| |
| |
| File and Folder Names | |
| |
| |
| URLs | |
| |
| |
| HTML: Markup with Meaning | |
| |
| |
| A Browser's Default Display of Webpages | |
| |
| |
| Key Takeaways | |
| |
| |
| |
| Working with Webpage Files | |
| |
| |
| Planning Your Site | |
| |
| |
| Creating a New Webpage | |
| |
| |
| Saving Your Webpage | |
| |
| |
| Specifying a Default Page or Homepage | |
| |
| |
| Editing Webpages | |
| |
| |
| Organizing Files | |
| |
| |
| Viewing Your Page in a Browser | |
| |
| |
| The Inspiration of Others | |
| |
| |
| |
| Basic HTML Structure | |
| |
| |
| Starting Your Webpage | |
| |
| |
| Creating a Title | |
| |
| |
| Creating Headings | |
| |
| |
| Common Page Constructs | |
| |
| |
| Creating a Header | |
| |
| |
| Marking Navigation | |
| |
| |
| Marking the Main Area of a Webpage | |
| |
| |
| Creating an Article | |
| |
| |
| Defining a Section | |
| |
| |
| Specifying an Aside | |
| |
| |
| Creating a Footer | |
| |
| |
| Creating Generic Containers | |
| |
| |
| Improving Accessibility with ARIA | |
| |
| |
| Naming Elements with a Class or ID | |
| |
| |
| Adding the Title Attribute to Elements | |
| |
| |
| Adding Comments | |
| |
| |
| |
| Text | |
| |
| |
| Adding a Paragraph | |
| |
| |
| Specifying Fine Print | |
| |
| |
| Marking Important and Emphasized Text | |
| |
| |
| Creating a Figure | |
| |
| |
| Indicating a Citation or Reference | |
| |
| |
| Quoting Text | |
| |
| |
| Specifying Time | |
| |
| |
| Explaining Abbreviations | |
| |
| |
| Defining a Term | |
| |
| |
| Creating Superscripts and Subscripts | |
| |
| |
| Adding Author Contact Information | |
| |
| |
| Noting Edits and Inaccurate Text | |
| |
| |
| Marking Up Code | |
| |
| |
| Using Preformatted Text | |
| |
| |
| Highlighting Text | |
| |
| |
| Creating a Line Break | |
| |
| |
| Creating Spans | |
| |
| |
| Other Elements | |
| |
| |
| |
| Images | |
| |
| |
| 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 | |
| |
| |
| |
| Links | |
| |
| |
| Creating a Link to Another Webpage (and Other Link Basics) | |
| |
| |
| Creating and Linking to Anchors | |
| |
| |
| Creating Other Kinds of Links | |
| |
| |
| |
| CSS Building Blocks | |
| |
| |
| Constructing a Style Rule | |
| |
| |
| Adding Comments to Style Rules | |
| |
| |
| Understanding Inheritance | |
| |
| |
| The Cascade: When Rules Collide | |
| |
| |
| A Property's Value | |
| |
| |
| |
| Working with Style Sheets | |
| |
| |
| Creating an External Style Sheet | |
| |
| |
| Linking to External Style Sheets | |
| |
| |
| Creating an Embedded Style Sheet | |
| |
| |
| Applying Inline Styles | |
| |
| |
| The Cascade and the Order of Styles | |
| |
| |
| Using Media-Specific Style Sheets | |
| |
| |
| The Inspiration of Others: CSS | |
| |
| |
| |
| Defining Selectors | |
| |
| |
| Constructing Selectors | |
| |
| |
| Selecting Elements by Name | |
| |
| |
| Selecting Elements by Class or ID | |
| |
| |
| Selecting Elements by Context | |
| |
| |
| Selecting an Element That Is the First or Last Child | |
| |
| |
| Selecting the First Letter or First Line of an Element | |
| |
| |
| Selecting Links Based on Their State | |
| |
| |
| Selecting Elements Based on Attributes | |
| |
| |
| Specifying Groups of Elements | |
| |
| |
| Combining Selectors | |
| |
| |
| |
| Formatting Text with Styles | |
| |
| |
| Before and After | |
| |
| |
| Choosing a Font Family | |
| |
| |
| Specifying Alternate Fonts | |
| |
| |
| Creating Italics | |
| |
| |
| Applying Bold Formatting | |
| |
| |
| Setting the Font Size | |
| |
| |
| Setting the Line Height | |
| |
| |
| Setting All Font Values at Once | |
| |
| |
| Setting the Color | |
| |
| |
| Setting the Background | |
| |
| |
| Controlling Spacing | |
| |
| |
| Adding Indents | |
| |
| |
| Aligning Text | |
| |
| |
| Changing the Text Case | |
| |
| |
| Using Small Caps | |
| |
| |
| Decorating Text | |
| |
| |
| Setting Whitespace Properties | |
| |
| |
| |
| Layout with Styles | |
| |
| |
| Considerations When Beginning a Layout | |
| |
| |
| Structuring Your Pages | |
| |
| |
| Styling HTML5 Elements in Older Browsers | |
| |
| |
| Resetting or Normalizing Default Styles | |
| |
| |
| The Box Model | |
| |
| |
| Controlling the Display Type and Visibility of Elements | |
| |
| |
| Setting the Height or Width for an Element | |
| |
| |
| Adding Padding Around an Element | |
| |
| |
| Setting the Border | |
| |
| |
| Setting the Margins Around an Element | |
| |
| |
| Making Elements Float | |
| |
| |
| Controlling Where Elements Float | |
| |
| |
| Positioning Elements Relatively | |
| |
| |
| Positioning Elements Absolutely | |
| |
| |
| Positioning Elements in a Stack | |
| |
| |
| Determining How to Treat Overflow | |
| |
| |
| Aligning Elements Vertically | |
| |
| |
| Changing the Cursor | |
| |
| |
| |
| Building Responsive Webpages | |
| |
| |
| Responsive Web Design: An Overview | |
| |
| |
| Making Images Flexible | |
| |
| |
| Creating a Flexible Layout Grid | |
| |
| |
| Understanding and Implementing Media Queries | |
| |
| |
| Putting It All Together | |
| |
| |
| Accommodating Older Versions of Internet Explorer | |
| |
| |
| |
| Working with Web Fonts | |
| |
| |
| What Is a Web Font? | |
| |
| |
| Where to Find Web Fonts | |
| |
| |
| Downloading Your First Web Font | |
| |
| |
| Understanding the @font-face Rule | |
| |
| |
| Styling Text with a Web Font | |
| |
| |
| Applying Italics and Bold with a Web Font | |
| |
| |
| Using Web Fonts from Google Fonts | |
| |
| |
| |
| Enhancements and Effects with CSS | |
| |
| |
| Browser Compatibility, Progressive Enhancement, and Polyfills | |
| |
| |
| Understanding Vendor Prefixes | |
| |
| |
| Rounding the Corners of Elements | |
| |
| |
| Adding Drop Shadows to Text | |
| |
| |
| Adding Drop Shadows to Elements | |
| |
| |
| Applying Multiple Backgrounds | |
| |
| |
| Using Gradient Backgrounds | |
| |
| |
| Setting the Opacity of Elements | |
| |
| |
| Effects with Generated Content | |
| |
| |
| Combining Images with Sprites | |
| |
| |
| |
| Lists | |
| |
| |
| Creating Ordered and Unordered Lists | |
| |
| |
| Choosing Your Markers | |
| |
| |
| Using Custom Markers | |
| |
| |
| Choosing Where to Start List Numbering | |
| |
| |
| Controlling Where Markers Hang | |
| |
| |
| Setting All List-Style Properties at Once | |
| |
| |
| Styling Nested Lists | |
| |
| |
| Creating Description Lists | |
| |
| |
| |
| Forms | |
| |
| |
| Improvements to Forms in HTML5 | |
| |
| |
| Creating Forms | |
| |
| |
| Processing Forms | |
| |
| |
| Organizing the Form Elements | |
| |
| |
| Creating Text Boxes | |
| |
| |
| Labeling Form Parts | |
| |
| |
| Creating Password Boxes | |
| |
| |
| Creating Email, Search, Telephone, and URL Boxes | |
| |
| |
| Creating Radio Buttons | |
| |
| |
| Creating Checkboxes | |
| |
| |
| Creating Text Areas | |
| |
| |
| Creating Select Boxes | |
| |
| |
| Allowing Visitors to Upload Files | |
| |
| |
| Creating Hidden Fields | |
| |
| |
| Creating a Submit Button | |
| |
| |
| Disabling Form Elements | |
| |
| |
| Styling Forms Based on Their State | |
| |
| |
| |
| Video, Audio, and Other Multimedia | |
| |
| |
| Third-Party Plugins and Going Native | |
| |
| |
| Video File Formats | |
| |
| |
| Adding a Video to Your Webpage | |
| |
| |
| Adding Controls and Autoplay to Your Video | |
| |
| |
| Looping a Video and Specifying a Poster Image | |
| |
| |
| Preventing a Video from Preloading | |
| |
| |
| Using Video with Multiple Sources and a Text Fallback | |
| |
| |
| Providing Accessibility | |
| |
| |
| Audio File Formats | |
| |
| |
| Adding an Audio File with Controls to Your Webpage | |
| |
| |
| Autoplaying, Looping, and Preloading Audio | |
| |
| |
| Providing Multiple Audio Sources with a Fallback | |
| |
| |
| Adding Video and Audio with a Flash Fallback | |
| |
| |
| Advanced Multimedia | |
| |
| |
| Further Resources | |
| |
| |
| |
| Tables | |
| |
| |
| Structuring Tables | |
| |
| |
| Spanning Columns and Rows | |
| |
| |
| |
| Adding JavaScript | |
| |
| |
| Loading an External Script | |
| |
| |
| Adding an Embedded Script | |
| |
| |
| JavaScript Events | |
| |
| |
| |
| Testing & Debugging Webpages | |
| |
| |
| 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 | |
| |
| |
| |
| Publishing Your Pages on the Web | |
| |
| |
| Getting Your Own Domain Name | |
| |
| |
| Finding a Host for Your Site | |
| |
| |
| Transferring Files to the Server | |
| |
| |
| Appendix HTML Reference | |
| |
| |
| Index | |