Beginning HTML5 and CSS3 For Dummies E-Book

Ed Tittel

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 437

Veröffentlichungsjahr: 2013

Beschreibung

Your full-color, friendly guide to getting started with HTML5 and CSS3!

HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the latest versions of HTML and CSS: HTML5 and CSS3. Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules and style sheets, addresses common mistakes and explains how to fix them, and explores interesting HTML5 tools.

• Serves as an ideal introduction to HTML5 and CSS3 for beginners with little to no web development experience
• Details the capabilities of HTML5 and CSS3 and how to use both to create responsive, practical, and well-designed websites
• Helps you understand how HTML5 and CSS3 are the foundation upon which hundreds of millions of web pages are built
• Features full-color illustrations to enhance your learning process

Beginning HTML5 and CSS3 For Dummies is the perfect first step for getting started with the fundamentals of web development and design.

Leseprobe

Beginning HTML5 & CSS3 For Dummies®

Published by John Wiley & Sons, Inc. 111 River StreetHoboken, NJ 07030-5774 www.wiley.com

Copyright © 2013 by John Wiley & Sons, Inc., Hoboken, New Jersey

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, [phone], fax [phone], or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax [phone]. For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2013942775

ISBN 978-1-118-65720-1 (pbk); ISBN 978-1-118-69075-8 (ebk); ISBN 978-1-118-69070-3 (ebk)

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

Beginning HTML5 & CSS3 For Dummies®

Table of Contents

Introduction

About this Book

Foolish Assumptions

Icons Used in This Book

Beyond the Book

Where to Go from Here

Part I: Getting Started with HTML and CSS on the Web

Chapter 1: An Overview of HTML and CSS on the Web

How and Where Web Pages Come to Life Online

HyperText

Content versus presentation

Web browsers

Getting to know Internet protocols

Understanding HTML and Its Versions

Different versions of HTML

Creating HTML markup

Building HTML documents

Understanding the Role of CSS

Different versions here, too . . .

Creating CSS markup

Dissecting a Simple Markup Example

Where’s the HTML?

Where’s the CSS?

A partnership of equals

Chapter 2: Meeting the Structure and Components of HTML

Like Any Language: Syntax and Rules

Color-coding the markup

Breaking down the elements

Adding Attributes to Your HTML

Examining Entities in Markup

Non-ASCII characters

Character codes

(Special) tag characters

Organizing Web Pages

Organizing HTML text

Complementing and enhancing text

Chapter 3: Creating and Viewing a Web Page

Before You Get Started

Creating a Page from Scratch

Step 0: Gather your tools

Step 1: Planning a simple design

Step 2: Writing some HTML

Step 3: Saving your page

Step 4: Viewing your page

Editing an Existing Web Page

Posting Your Page Online

Part II: Getting the Structure and Text Right

Chapter 4: HTML Documents Need Good Structure

Establishing a Document Structure

HTML Document Organization Revisited

HTML DOCTYPE Starts Things Off

The <html> Element

Anatomy of the <head>

Meeting the <head> himself

Handling metadata with <meta>

Redirecting users to another page

Naming your page with a <title>

The <body> Is a BIG Container

Chapter 5: Text and Lists

Formatting Text

Paragraphs

Headings

Controlling Text Blocks

Block quotes

Preformatted text

Horizontal rules

Organizing Information

Numbered lists

Bulleted lists

Definition lists

Nesting lists

Chapter 6: Tip-Top Tables in HTML

How <table> Got a Bad Name in HTML

What’s in a Table? LOTS of Markup

Setting Up a Table Border

The Table Head (<thead>) and Its Elements

Managing Table Layouts

Making Good Table Bodies

Shaping a solid table

Sitting at the Footer of the Table

Exploring and Explaining a Table

Oh caption, my caption

Is the header dead yet?

Marching through the table body

Finishing with the footer

Chapter 7: Working with Forms in HTML

Exploring Types of Web Forms

Search forms

Data collection forms

Creating Forms

Structure

Input tags

Input fields

Form validation

Processing Data

Processing forms on your pages

Designing User-Friendly Forms

Other Noteworthy Forms-Related Markup

Form Frameworks

Part III: Adding Links, Images, and Other Media

Chapter 8: Getting Hyper with Links in HTML

Basic Links 101

Exploring link options

Avoiding common mistakes

Customizing Links

Opening new windows

Specifying locations in web pages

Linking to non-HTML resources

Chapter 9: Working with Images in HTML

The Role of Images in a Web Page

Creating Web-Friendly Images

Adding an Image to a Web Page

Image location

Using the <img> element

Adding alternative and title text

Specifying image size

Image borders and alignment

Images That Link

Triggering links

Building image maps

Chapter 10: Managing Media and More in HTML

The Battle of the Media Formats

Meet the major audio formats

Meet the major video formats

Comparing Traditional and HTML5 Media Handling

Mastering HTML5 Media Markup

Making beautiful music with audio

Moving media with video

Undergoing the conversion experience

Working with Web Page Controls

Displaying a meter bar

Tracking progress on activities

Tracking and reporting on time

Updating HTML5 controls

Part IV: Adopting CSS Style

Chapter 11: Advantages of Style Sheets

Advantages of Style Sheets

The four steps to style

Understanding the C in CSS

What CSS can do for a web page

Styling a Document with CSS

Using HTML5 Boilerplate

Normalize before you stylize

What you can do with CSS

Putting CSS in Its Place

Pixels, points, and dots — Oh my!

Understanding the viewport

Property measurement values

About the CSS3 Standard

Chapter 12: CSS Structure and Syntax

Exploring CSS Structure and Syntax

Selectors and declarations

The selectors

Chapter 13: Using Different Kinds of Style Sheets

Applying Inline Styles

Getting to Know Internal Style Sheets

Understanding the <style> element

Figuring out internal style sheet scope

Working with External Style Sheets

CSS files

Link element attributes

Importing and when to use @import

Part V: Enhancing Your Pages’ Look and Feel

Chapter 14: Managing Layout and Positioning

Managing Layout

Tiny boxes

Block versus inline elements

Normal flow

Managing Positioning

About coordinates and offsets

Relative positioning

Absolute positioning

Floating

Using a Layout Generator

Chapter 15: Building with Boxes, Borders, and Buttons

Meeting the Box Model

Putting the Box Model into Practice

Specifying padding and margin widths

Adding borders

Aligning text

Indenting text

Creating buttons with CSS

Chapter 16: Using Colors and Backgrounds

Defining Color Values

Color names

Color numbers

Defining Color Definitions

Text

Links

Backgrounds

Advanced backgrounds

Chapter 17: Web Typography

Finding Out about Fonts

Font family

Sizing

Trying Out Text Treatments

Embolden with bold

Emphasizing with italic

Changing capitalization

Getting fancy with the text-decoration property

Checking Out the Catchall Font Property

Experimenting with Web Fonts

Font file formats

Finding fonts

Linking fonts

Using Google Fonts

Chapter 18: CSS Text and Shadow Effects

Creating Shadows

text-shadow

box-shadow

Creating Inset Text

Creating 3D Text

Creating a Letterpress Effect

Drop Shadows

Text Rotation

Chapter 19: Multimedia and Animation with CSS

Using CSS with Multimedia

Visual media styles

Paged media styles

Getting Animated

Using the animation properties

Creating animations with @keyframes

Animating color

Part VI: The Part of Tens

Chapter 20: Ten Keys to Mobile Web Design

Design for Different Mobile Devices

Design for People

Design for Small Screens

Design for Low Bandwidth

Design for Touch

Design for Distracted Surfers

Test on Many Mobile Devices

Design for Simplicity

Set Up Mobile Web Addresses

Include a Link to the Desktop Site

Chapter 21: Ten HTML Do’s and Don’ts

Don’t Lose Sight of Your Content

Do Structure Your Documents and Your Site

Do Make the Most from the Least

Do Build Attractive Pages

Don’t Lose Track of Those Tags

Do Avoid Browser Dependencies

Don’t Make It Hard to Navigate Your Wild and Woolly Web

Don’t Think Revolution, Think Evolution

Don’t Get Stuck in the Two-Dimensional-Text Trap

Don’t Let Inertia Overcome You

Chapter 22: Ten Ways to Kill Web Bugs Dead

Make a List and Check It — Twice

Master Text Mechanics

Lack of Live Links — a Lousy Legacy

When Old Links Must Linger

Make Your Content Mirror Your World

Look for Trouble in All the Right Places

Cover All the Bases with Peer Reviews

Use the Best Tools of the Testing Trade

Schedule Site Reviews

Foster User Feedback

If You Give to Them, They’ll Give to You!

Chapter 23: Ten Cool HTML Tools and Technologies

WYSIWYG HTML Editors

Dreamweaver

Other WYSIWYG editors

Helper HTML Editors

Aptana Studio

Other helper editors

Inexpensive Graphics Editors

Professional Graphics Editors

Adobe Photoshop

Adobe Fireworks

W3C Link Checker

Other Link Checkers

HTML Validators

FTP Clients

Miscellaneous Helpful Web Tools

Part VII: Appendixes

Appendix A: Twitterati

Appendix B: About the Dummies HTML Website

The dashboard

Appearance and themes

Pages and posts

HTML5 Cafe

The home page

About Us

The Menu

Contact Us

About the Authors

Cheat Sheet

Connect with Dummies

End User License Agreement

Introduction

Anyone can create or edit web pages. Crafting such pages doesn’t require an especially high IQ or an advanced degree. Creating or editing web pages simply requires a desire to learn and enough gumption to see the process through to its natural end — a page visible on the web.

In this book, we reveal the ins and outs of the markup languages that are the web’s lifeblood — the HyperText Markup Language (HTML) used to capture text, graphics, and other content, and the Cascading Style Sheets (CSS) language used to make web pages look good wherever they appear. Because HTML and CSS are basic building blocks for creating web pages, knowing how to use them adds you to the fold of web authors and content developers.

If you’ve tried to build your own web pages but found it too daunting, it’s okay to relax now. If you can dial a telephone or find your keys in the morning, you too can create web pages. No kidding!

This book keeps the technobabble to a minimum and sticks with plain English whenever possible. Besides plain talk about hypertext, HTML, and the web, we include lots of examples, plus tag-by-tag instructions to help you build web pages with minimal fuss and bother. We also provide examples about what to do with your web pages after you’ve built them, so you can publish them online. We explain the differences between various flavors of HTML (HTML4, HTML5, and even something called XHTML) so you can pick the style that works best for you. Spoiler alert: We think you should choose HTML5, but that choice is entirely up to you.

This book has its own companion website with HTML and CSS examples from all of its chapters in usable form. In addition to the book content, we share web-only content and live pointers to all of the widgets, websites, and other cool stuff to which we refer, so you can use the techniques we show you to embellish your own web pages and amaze your friends. Please visit www.dummieshtml.com/html5cafe and start browsing from there. (Appendix B in this book covers all of that material in more detail.)

About this Book

Think of this book as a friendly, approachable guide to taking up HTML and CSS and building readable, attractive web pages. These things aren’t hard to pick up, but they pack lots of details. Topics covered in this book include the following:

Understanding web page structure and organization

Uploading and publishing web pages for the whole world to see

Checking and validating your web pages

Diving deep into markup with HTML5 and CSS3

You too can build web pages without years of arduous training, advanced aesthetic abilities, or ritual ablutions in ice-cold streams. If you can tell a friend how to prepare your favorite mac-’n’-cheese, you can build a useful web document. The purpose of this book isn’t to turn you into a rocket scientist (or for that matter, to turn rocket science into HTML). Its purpose is to show you the structural and technical elements needed for good-looking, readable web pages and to give you the confidence to build some!

This book explains how to use HTML and CSS to get your pages up and running on the World Wide Web. We tell you what’s involved in structuring and building effective web documents that can bring your ideas and information to the online world — if that’s what you want to do — and maybe even have some high-tech fun communicating them to others.

To make this book easier to read, keep in mind the following things about working with the markup:

As a convention for this book, all HTML and CSS markup appears in monospaced type like this:

<head><title>What's in a Title?</title></head>

When you type HTML markup, CSS, or other related stuff, copy the information exactly as you see it, including the angle brackets (< and >) because they're part of the magic that makes HTML and CSS work.

The margins on a book page don’t have the same room as do the vast reaches of cyberspace. Therefore, long lines of HTML and CSS markup, or designations for web sites (called URLs, or Uniform Resource Locators), may break across multiple lines. Remember, your computer sees such lines as a single line of HTML or CSS, or as a single URL — so if you type all of that text, be sure to put it all on one line. Don’t insert any hard returns (or press the Enter key) if you see the line wrap. We show you that everything is supposed to be all on one line by breaking at a punctuation character or space and then indenting any overage, like so:

www.infocadabra.transylvania.co/nexlus /plexus/lexus/praxis/okay/this-is-all make-believe-but-real-ones-get LONG.html

HTML4 doesn’t care whether you type tag text in uppercase, lowercase, or both (except for character entities, also known as character codes). HTML5 and CSS, however, want tag text in lowercase only. Thus, to make your work look as much like ours as possible, enter all HTML and CSS tag text, and all other markup, in lowercase only.

Our code listings may be color-coded, where specific colors signify different kinds of markup. We explain this in Chapter 2 in the section about color-coding. (Note: All illustrations use pretty colors, too!)

One more thing: Readers may notice that we refer to the web, websites, and so forth in this book, even though we also call it the World Wide Web. We’ve decided to follow common usage, which no longer treats “web” as a proper name. Finally, the wheels of progress have turned long enough to wear off the top of the initial capital “W” in web!

Foolish Assumptions

Some say that making assumptions makes a fool out of both the person who makes them and the person who falls subject to them. (And just who are they anyway? We assume we know but . . . never mind.)

You don’t need to be a wizard in the arcane arts of programming, nor do you require a PhD in computer science. You don’t even need a detailed sense of what’s going on in the innards of your computer to deal with the material in this book.

Even so, practicality demands that we make a few assumptions about you, our gentle reader: You can turn your computer on and off, you know how to use a mouse and a keyboard, and you want to build your own web pages for fun, profit, or some reason entirely of your own. We also assume you have a working Internet connection and a web browser.

If you can write a sentence and know the difference between a heading and a paragraph, you can build and publish your own documents on the web. The rest consists of details — and we help you with those.

Icons Used in This Book

Here’s a list of the icons we use in this book to flag text and information that’s especially noteworthy.

This icon signals technical details that are informative or interesting but aren’t absolutely essential for writing or understanding HTML and CSS.

This icon flags useful information that makes HTML markup or other important stuff even less complicated than you feared it might be.

This icon points to stuff you shouldn’t skip — don’t overlook these reminders. (The sanity or web page you save could be your own.)

Watch out when you see this icon. It warns you against things you shouldn’t attempt. Consequences can be severe if you ignore these admonitions.

This icon points you to resources available online. Most notably, we steer you to www.dummieshtml.com/html5cafe when we discuss example files you can find there.

Beyond the Book

This section describes where readers can find the book's companion content. Some of it is available at www.dummies.com, and some of it — including all the markup examples in the book — is available at www.dummieshtml.com/html5cafe:

Cheat Sheet: Visit www.dummies.com/cheatsheet/beginninghtml5css3 to see a quick compendium of HTML and CSS markup, plus some handy-dandy color charts.

Extras: We've posted articles that extend the content covered in the book, with one extra short article for Parts II through IV of this book. Parts II and III deal with HTML, and Parts III and IV with CSS. The URL for this material is www.dummies.com/extras/beginninghtml5css3.

Updates: Each For Dummies technical book explains where readers can find updates in case the book changes substantially. This is where any updates or corrections that we make to the book's content and coverage will appear, along with any errata we find and fix. The URL for this stuff is also www.dummies.com/extras/beginninghtml5css3.

For example, our book is chock-full of HTML5 and CSS 3 markup, and the specifications for both HTML5 and CSS3 are still in development, so changes are bound to occur in the months and years ahead.

Companion files: Our book site offers per-chapter downloads with the source HTML and/or CSS files for each chapter, and a one-shot-gets-everything download for the whole book, all at www.dummieshtml/html5cafe. See Appendix B for details about the Dummies HTML website.

Where to Go from Here

This is where you hit the road. Where you start doesn’t matter. Don’t worry — you can handle it. We know you’re ready to have the time of your life. Enjoy!

Part I

Getting Started with HTML and CSS on the Web

Visit www.dummies.com for more great For Dummies content online. Also, there's a website just for this book online at www.dummieshtml.com.

In this part . . .

Taking in HTML from 10,000 feet (an overview)

Understanding the role that Cascading Style Sheets (CSS) play on the web

Digging into HTML-speak: markup, elements, tags, entities, and more

Getting your web pages organized

Creating and viewing your very first web page

Moving pages from your PC to a web server online

1

An Overview of HTML and CSS on the Web

In This Chapter

Bringing web pages to life

Understanding the role that HTML plays on web pages

Appreciating what CSS does to give web pages style

Exploring and analyzing simple markup examples

Welcome to the wonderful world of the web, HTML, and CSS. With just a little knowledge, some practice, and something to say, you can create your own little virtual acre of cyberspace or improve on existing work.

We use the term HTML throughout this book. Using this term lets us refer to the HyperText Markup Language in general, including both HTML4 and HTML5, plus XHTML), all in one go. Although HTML4 and HTML5 are different (and XHTML differs from both of them, too), they’re all enough alike for this reference to make sense.

This book is your down-and-dirty guide to understanding web documents, sprucing up existing web pages, and crafting complex and exciting pages that use intricate designs, multimedia, and scripting.

The best way to start working with HTML is to jump right in, so that’s what this chapter does: It explains the basics of how HTML and CSS work behind the scenes inside web pages, and it introduces you to their underlying building blocks. When you’re done with this chapter, you’ll know how HTML and CSS work so you can start creating or editing web pages right away — albeit very, very simple ones.

How and Where Web Pages Come to Life Online

Web pages can accommodate many kinds of content, such as text, graphics, forms, audio and video files, streaming media, and even interactive games.

Browse the web for only a moment or two, and you see a smorgasbord of information and content displayed in many ways. Every website is different, but all have one thing in common: HyperText Markup Language (also known as HTML). You also run into Cascading Style Sheets (CSS) regularly.