Tài liệu Beginning HTML & CSS doc

Learning from Others by Viewing Their Source Code 8 Internationalization 11 Ensuring Backward Compatibility for HTML5 Tags 15 Creating Headings Using Elements 18Creating Paragraphs Usin

Beginning HTML & CSS

inTroduCTion xxxiii

CHapTer 1 Structuring Documents for the Web 1

CHapTer 2 Fine-tuning Your Text 39

CHapTer 3 Links and Navigation 55

CHapTer 4 Images, Audio, and Video 79

CHapTer 5 Tables 111

CHapTer 6 Forms 139

CHapTer 7 Cascading Style Sheets 191

CHapTer 8 More Cascading Style Sheets 257

CHapTer 9 Rounded Corners, Animations, Custom Fonts, and More with CSS3 311

CHapTer 10 Learning JavaScript 339

CHapTer 11 Working with jQuery 383

CHapTer 12 jQuery: Beyond the Basics 407

CHapTer 13 Checklists 437

appendix a Answers to Exercises 447

appendix B HTML Element Reference 475

appendix C CSS Properties 515

appendix d Color Names and Values 551

appendix e Character Encodings 561

appendix F Special Characters 565

appendix g Language Codes 577

appendix H MIME Media Types 583

appendix i Changes between HTML4 and HTML5 595

index 603

Beginning

HTML & CSS

Beginning

HTML & CSS

Rob Larsen

Indianapolis, IN 46256

www.wiley.com

Copyright © 2013 by John Wiley & Sons, Inc., Indianapolis, Indiana

Published simultaneously in Canada

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 Web site 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 Web site may provide or recommendations it may make Further, readers should be aware that Internet Web sites 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 United States at (877) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.

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: 2012954405

Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are

trademarks or registered trademarks of John Wiley & Sons, Inc and/or its affiliates, in the United States and other countries, 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.

For Jo & Ingmar I’ll take good care of Jude.

aBouT THe auTHor

roB LarSen has more than 13 years of experience as a front-end engineer and team lead, building websites and applications for some of the world’s biggest brands

He is an active writer and speaker on web technology with a special focus

on emerging standards like HTML5, CSS3, and the ongoing evolution of the

JavaScript programming language He is co-author of Professional jQuery

(Wrox) He’s also active in the open source community, helping to bridge the gap between the front lines of web development and the people actively working on the tools that drive the web

In his career Rob has spent time at Sapient Global Markets, Isobar, The Brand Experience, and Cramer and as an independent consultant Over the years, he has solved unique problems for clients such as Samsung, Adidas, Motorola, Philips, Reebok, Gillette, Boston’s Museum of Science, and Harvard Kennedy School

(P hoto by R icaRdo S alema : www.ricardosalema.com)

Mary Beth Wakefield

Freelancer editorial Manager

I’ve got to give a big shout-out to John Duckett—standing on the shoulders of giants and all that

As always, I want to thank all the great front-end engineers I’ve worked with at Cramer, Isobar, and Sapient for pushing me to be a better programmer, manager, and colleague

Finally, I’d like to thank my wife for her support and understanding throughout this process I couldn’t have done it without her

Learning from Others by Viewing Their Source Code 8

Internationalization 11

Ensuring Backward Compatibility for HTML5 Tags 15

Creating Headings Using <hn> Elements 18Creating Paragraphs Using the <p> Element 20Creating Line Breaks Using the <br> Element 20Creating Preformatted Text Using the <pre> Element 21

is Organized errata

HapTer 4: STruCTuring doCuMenTS For THe weB

introducing HTML5

groups

elements

inline elements grouping Content

HapTer 5: Fine-Tuning Your TexT

elements That Describe Text-Level Semantics

editing Text

entities for Special Characters

The New Outline Algorithm in HTML5 25

Using the cite Attribute with the <blockquote> Element 29

Using the <ul> Element to Create Unordered Lists 30

<strong> versus <b> and <em> versus <i> 41

<figure> and <figcaption> Elements 44

CONTENTS

Creating a Source Anchor with the href Attribute 65

Creating a Destination Anchor Using the name and id Attributes

Summary 75

Adding Images to a Web Page 82

Adding Rich Media with the <audio> and <video> Elements 97Controlling Playback with the preload, autoplay, loop, and

Using the poster Attribute to Customize the Initial Frame 98Adding Video Playback Controls with the controls Attribute 98Adding Audio to Your Web Pages Using the <audio> Element 99

Cross-Browser Video—Using Video for Everybody 103

A Closer Look at the <object> and <param> Elements 104

Summary 106

CHapTer 5: TaBLeS 111

The <table> Element Creates a Table 119

The <tr> Element Contains Table Rows 119The <td> and <th> Elements Represent Table Cells 119

CONTENTS

Spanning Columns Using the colspan Attribute 123

Spanning Rows Using the rowspan Attribute 124

Splitting Up Tables Using a Head, Body, and Foot 125

Grouping Columns Using the <colgroup> Element 128

Columns Sharing Styles Using the <col> Element 128

Using the id, scope, and headers Attributes 132

Summary 135

CHapTer 6: ForMS 139

Using the placeholder Attribute to Illustrate Example Input 154

Ensuring User Privacy and Security with the autocomplete Attribute 154

Ensuring Information Is Provided with the required Attribute 155

Buttons 155

Creating Buttons Using the <input> Element 156

Creating Buttons Using the <button> Element 158

The <select> Element 164

Selecting Multiple Options with the multiple Attribute 166Grouping Options with the <optgroup> Element 166

Track Completion of a Task with the New <progress> Element 170Represent Scalar Measurement within a Range with the

Create an Autocomplete List with an <input> and the New

Focus 177

CONTENTS

Selectors 224

Using Child and Sibling Selectors to Reduce Dependence on

An Example Illustrating the Box Model 234

Expressing border Properties Using Shorthand 238

The min-height and max-height Properties 244

The Internet Explorer Box Model and box-sizing: border-box 246

Summary 252

Links 258 Backgrounds 259

The background-position Property (for Fixing Position

The background-attachment Property (for Watermarks) 265

Lists 267

Tables 271

CONTENTS

Outlines 280

Counters 284

The @import Rule: Modularized Style Sheets 291

Summary 308

CHapTer 9: rounded CornerS, aniMaTionS, CuSToM

Use New, Easier-to-Understand, Numerical Color Values with HSL 316

Control Transparency with RGBA, HSLA, and the opacity Property 317

Custom Fonts with the @font-face Directive 326

On Font Formats, Compatibility, and the Evolution of the

Advanced CSS Manipulations with Transforms, Animations,

Functions 354

Function Expressions and Anonymous Functions 356

Start Your Scripts the Smart Way with $( document ) ready() 387

Manage CSS Classes with $() addClass(), $() removeClass(),

$() hasClass(), and $() toggleClass() 391

Get or Set CSS Properties with $() css() 393

Get or Set the HTML of an Element with $() html() 394

Show and Hide Elements with $() show(), $() hide(), and $() toggle() 395Animate Opacity with $() fadeIn(), $() fadeOut(), and $() fadeToggle() 396Create a Sliding Doors Effect with $() slideUp(), $() slideDown(),

Bind Events with $() on() and $() off() 398

Using jQuery, CSS, and HTML to Add Interactivity 400

Summary 403

Summary 433

Brainstorm for Words People Might Search On 439

List Other Keywords and Phrases That Correspond to Your

Look Up Related Words (Not Exact Matches) 439

appendix C: CSS properTieS 515

font 515font-family 516font-size 516font-size-adjust 516font-stretch 516font-style 517font-variant 517font-weight 517

letter-spacing 518text-align 518text-decoration 518text-indent 519text-shadow 519text-transform 520white-space 520word-spacing 520

background 521background-attachment 521background-color 522background-image 522background-position 522background-positionX 523background-positionY 523background-repeat 523

Color 539

border-radius (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) 540box-shadow 540Multi-Column 541column-count 541column-gap 542column-width 542

Lengths 548

Character entity References for Symbols, Mathematical Symbols,

Character entity References for Markup-Significant and

CONTENTS

THere are a LoT oF BookS about building web pages, so thank you for picking up this one I’ve spent the last 13 years building websites, so hopefully I’ve picked up a thing or two that I can share with you to make your purchase worthwhile

If you’re just starting out with building web pages, you’ve picked a great time to get started The way web pages are built is changing right now in a big way While the same basic technologies we’ve used for the last 15–20 years are still in place, there are new versions available that have people like

me very excited for the future of the web

This book presents a practical introduction to the process of making websites using a blend of the latest and greatest techniques, as well as a healthy understanding of some older technologies that have been around for a while The techniques described in this book are informed by having solved real-world problems; so, although it has an eye toward the future it’s grounded in the act of making websites today

You will learn a few different languages to create effective and attractive web pages:

➤

➤ HTML is needed to explain the structure of a web page This page is made up of a lot of

words On web pages, it is the job of HTML to explain the structure of the words—which words form a heading, where paragraphs start and end, and which text should have bullet points This language also specifies things such as the links between different web pages, where images should appear, where videos should appear, and forms for entering text

➤

➤ CSS is used to control how your pages look For example, you can use CSS to specify that a typeface should be a large, bold Arial typeface or that the background of a page should be

a light green You can also use CSS to control where different items appear on a page, such

as placing three columns of text next to each other

➤

➤ JavaScript can add interactivity to your web pages JavaScript is a huge topic in itself, so it

is not covered in the same depth as HTML and CSS, but I teach you just enough JavaScript

to write your own basic scripts and to be able to effectively use jQuery, the most popular JavaScript library in the world

aBouT THe Book

As you have already seen, you’ll learn how to control the structure of a web page using HTML,

how to style it using CSS, and how to add interactivity using JavaScript and jQuery Learning how

this code works will give you a solid foundation for building websites, and alongside this you will see plenty of practical advice that helps you learn about issues you are likely to meet when you start building sites

While learning how to code, you will see lots of advice on usability—how to build websites that are

easy to use and enable visitors to achieve what they came for In several parts of the book, I also discuss issues regarding accessibility—making a site available to as many users as possible (in particular, people with disabilities, who may have impaired vision or difficulty using a mouse) In the same way that many countries have laws requiring architects to design buildings that are accessible, there are strict acces-sibility guidelines for building websites to ensure they do not exclude visitors A little careful thought before you build your website means that people with vision impairments can either view your site with

larger text or have it read to them by a piece of software called a screen reader Whole books are

dedi-cated to the topics of usability and accessibility and are aimed at web developers who need to learn how

to make their code more accessible and usable My aim is to teach you to code with these principles in mind from the start

Although it is important to learn the latest practices for creating web pages using these languages, if you intend to create websites that anyone can access, you will also have to learn some older aspects of the languages you meet This is important because not everyone has the latest web browser installed

on his or her computer; as a result, the latest features may not work for everyone, and in such cases you need to learn techniques that will work in some older browsers that are still popular today

By the end of this book, you will be writing web pages that not only use the latest technologies but also are still viewable by older browsers—pages that look great and can also be accessed by those with visual and physical impairments These are pages that not only address the needs of today’s audiences but can also work on emerging technologies—and therefore the skills you will learn should be relevant longer

wHo THiS Book iS For

This book is written for anyone who wants to learn how to create web pages, and for people who may have dabbled in writing web pages (perhaps using some kind of web page authoring tool), but who want to really understand the languages of the web, to give them more control over the pages they create

More experienced web developers can also benefit from this book because it teaches some of the latest technologies and encourages them to embrace web standards that not only meet the needs of the new devices that access the web but also help make their sites available to more visitors

You don’t need any previous programming experience to work with this book This is one of the first steps on the programming ladder Whether you are just a hobbyist or want to make a career

of web programming, this book will teach you the basics of programming for the web

wHaT THiS Book CoVerS

By the end of this book, you will be able to create professional-looking and well-coded web pages.Not only will you learn the code that makes up HTML, but you will also see how to apply this code

so you can create sophisticated layouts for your pages, positioning text and images where you would

to work with jQuery

The code I encourage you to write is based on what are known as web standards; HTML and CSS are all created and maintained by the World Wide Web Consortium, or W3C (www.w3.org/), an organization dedicated to the development of the web You will also learn about some features that are not in these standards; it is helpful to know about some of these in case you come across such markup and need to know what it does Where these are introduced, I make it clear they are not part of the standard

wHaT You need To uSe THiS Book

All you need to work through this book is a computer with a web browser (preferably the latest version of Firefox, Chrome, or Internet Explorer 9 or higher), and a simple text editor such as Notepad or Sublime Text on Windows or TextEdit or Sublime Text on Mac

How THiS Book iS organized

The first chapter of this book will show you that the main task in creating a website is marking up the text you want to appear on your site, using elements and attributes As you will see, these elements

and attributes describe the structure of a document (what is a heading, what is a paragraph of text, what is a link, and so on)

The first six chapters of the book describe the different elements and attributes that make up HTML and how you can use them to write web pages These chapters are organized into task-related areas, such as structuring a document into headings and paragraphs; creating links between pages; adding images, audio, and video; and displaying tables With each task or topic that is introduced, you will see an example first to give you an idea of what is possible; then you can look at the elements and attributes used in detail

When you first read this book, you do not need to closely read the detailed explanations of every single element As long as you understand the gist of the markup, feel free to move on, and then come back and look at the finer detail when you need it

Each chapter ends with exercises designed to get you working with the concepts you’ve just learned Don’t worry if you have to go back and review the content of the chapter in order to complete the exercises; this book has been created with the intention that it should be a helpful reference for years to come, so don’t feel that you need to learn everything by heart Along the way, you’ll see which browsers support each element and you’ll learn plenty of handy tips, tricks, and techniques for creating professional web pages

Once you have seen how to create and structure a document using HTML, Chapters 7, 8, and 9 will show you how to make your pages look more attractive using CSS For example, you’ll learn how to change the typefaces and size of fonts, color of text, backgrounds, and borders that go around items

In addition, you’ll learn how to control where items appear on the page, which will enable you to create attractive layouts

Having worked through the three chapters on CSS, and using the examples in the book, you should be able to write quite complex web pages The chapters up to that point can then act as a helpful reference you can keep coming back to, and the examples will act as a toolkit for building your own sites.Chapter 10 introduces you to JavaScript, a programming language that enables you to add inter-activity to your pages While the entire JavaScript language is too large to teach you in one chap-ter, you will learn how to create your own basic scripts and also how to integrate scripts other people have written into your pages

Chapters 11 and 12 introduce you to jQuery, a library that helps you code JavaScript more easily jQuery is by far the most popular library for working with JavaScript It’s easy to use and fun, and

it lies at the center of a vast ecosystem of scripts that you can use to enhance your own site

The final chapter, Chapter 13, includes some checklists These bring together some topics that are dotted throughout the book

I have also included several helpful appendices, including a reference to HTML elements and CSS properties There is an appendix that explains how HTML and CSS specify colors Other appendi-ces show you available character encodings, language codes, and escape characters that can be used with HTML, XHTML, CSS, and JavaScript Finally, there is an appendix that outlines the major differences between the last two major versions of HTML

ConVenTionS

To help you get the most from the text and keep track of what’s happening, I’ve used a number of conventions throughout the book

TrY iT ouT

The Try It Out is an exercise you should work through, following the text in the book.

1 They usually consist of a set of steps

2 Each step has a number

3 Follow the steps through with your copy of the database

introduction

WARNING Boxes like this one hold important, not-to-be-forgotten information

that is directly relevant to the surrounding text

NOTE Notes, tips, hints, tricks, and asides to the current discussion are offset

and placed in italics like this

As for styles in the text:

➤ Code appears like this:

We use a monofont type with no highlighting for most code examples.

We use bolding to emphasize code that’s particularly important in the present context.

SourCe Code

As you work through the examples in this book, you may choose either to type in all the code ually or to use the source code files that accompany the book All of the source code used in this book is available for download at www.wrox.com Specifically for this book, the code download is

man-on the Download Code tab at www.wrox.com/remtitle.cgi?isbn=9781118340189 You can also search for the book at www.wrox.com by ISBN (the ISBN for this book is to find the code

NOTE Because many books have similar titles, you may find it easiest to search

by ISBN; this book’s ISBN is 978-1-118-34018-9

Once you download the code, just decompress it with your favorite compression tool Alternately, you can go to the main Wrox code download page at www.wrox.com/dynamic/books/download.aspx to see the code available for this book and all other Wrox books

To find the errata page for this book, go to www.wrox.com and locate the title using the Search box

or one of the title lists Then, on the book details page, click the Book Errata link On this page you can view all errata that have been submitted for this book and posted by Wrox editors

NOTE A complete book list including links to errata is also available at

www.wrox.com/misc-pages/booklist.shtml.

If you don’t spot “your” error on the Errata page, click the Errata Form link and complete the form

to send us the error you have found We’ll check the information and, if appropriate, post a message to the book’s errata page and fix the problem in subsequent editions of the book

p2p wrox CoM

For author and peer discussion, join the P2P forums at p2p.wrox.com The forums are a web-based system for you to post messages relating to Wrox books and related technologies and interact with other readers and technology users The forums offer a subscription feature to e-mail you topics

of interest of your choosing when new posts are made to the forums Wrox authors, editors, other industry experts, and your fellow readers are present on these forums

At http://p2p.wrox.com you will find a number of different forums that will help you not only as you read this book but also as you develop your own applications To join the forums, just follow these steps:

1 Go to p2p.wrox.com and click the Register link

2 Read the terms of use and click Agree

3 Complete the required information to join, as well as any optional information you wish to provide, and click Submit

4 You will receive an e-mail with information describing how to verify your account and complete the joining process

NOTE You can read messages in the forums without joining P2P, but in order to

post your own messages, you must join

Once you join, you can post new messages and respond to messages other users post You can read messages at any time on the web If you would like to have new messages from a particular forum e-mailed to you, click the Subscribe to this Forum icon by the forum name in the forum listing.For more information about how to use the Wrox P2P, be sure to read the P2P FAQs for answers to questions about how the forum software works, as well as many common questions specific to P2P and Wrox books To read the FAQs, click the FAQ link on any P2P page