By: Rob Larsen
ISBN: 978-1-118-34018-9
Paperback
672 pages
March 2013
Other Available Formats: E-book
Description
Everything you need to build websites with the newest versions of HTML and CSSIf you develop websites, you know that the goal posts keep moving, especially now that your website must work on not only traditional desktops, but also on an ever-changing range of smartphones and
tablets. This step-by-step book efficiently guides you through the thicket. Teaching you the very latest best practices and techniques, this practical reference walks you through how to use HTML5 and CSS3 to develop attractive, modern websites for today's multiple devices. From handling text, forms, and video, to implementing powerful JavaScript functionality, this book covers it all.
- Serves as the ultimate beginners guide for anyone who wants to build websites with HTML5 and CSS3, whether as a hobbyist or aspiring professional developer
- Covers the basics, including the different versions of HTML and CSS and how modern websites use structure and semantics to describe their contents
- Explains core processes, such as marking up text, images, lists, tables, forms, audio, and video Delves into CSS3, teaching you how to control or change the way your pages look and offer tips on how to create attractive designs
- Explores the jQuery library and how to implement powerful JavaScript features, such as tabbed content, image carousels, and more Get up to speed on HTML5, CSS3, and today's website design with this practical guide.
Then, keep it on your desk as a reference!
Table of Contents
Introduction xxxiiiChapter 1: Structuring Documents for the Web 1
A Web of Structured Documents 1
Introducing HTML5 2
Tags and Elements 4
Separating Heads from Bodies 5
Attributes Tell You about Elements 6
Learning from Others by Viewing Their Source Code 8
Elements for Marking Up Text 8
Attribute Groups 9
Core Attributes 9
The id Attribute 10
The class Attribute 10
The title Attribute 10
The style Attribute 11
Internationalization 11
The dir Attribute 11
The lang Attribute 12
Core Elements 13
About DOCTYPEs 13
The <html> Element 13
The <head> Element 13
The <title> Element 14
Links and Style Sheets 15
Ensuring Backward Compatibility for HTML5 Tags 15
The <body> Element 16
Common Content Elements 16
Basic Text Formatting 17
White Space and Flow 17
Creating Headings Using <hn> Elements 18
Creating Paragraphs Using the <p> Element 20
Creating Line Breaks Using the <br> Element 20
Creating Preformatted Text Using the <pre> Element 21
Understanding Block and Inline Elements 24
Grouping Content 25
The New Outline Algorithm in HTML5 25
The <div> Element 26
The <header> Element 26
The <hgroup> Element 27
The <nav> Element 27
The <section> Element 27
The <article> Element 28
The <hr> Element 28
The <blockquote> Element 28
Using the cite Attribute with the <blockquote> Element 29
The <aside> Element 29
The <footer> Element 29
The <address> Element 30
Working with Lists 30
Using the <ul> Element to Create Unordered Lists 30
Ordered Lists 31
Using the start Attribute to Change the Starting Number in
Ordered Lists 32
Count Down in Your Ordered Lists with the reversed Attribute 32
Specify a Marker with the type Attribute 33
Definition Lists 33
Nesting Lists 34
Summary 35
Chapter 2: Fine-tuning Your Text 39
Elements That Describe Text-Level Semantics 39
The <span> Element 39
The <em> Element 40
The <strong> Element 40
The <b> Element 41
The <i> Element 41
<strong> versus <b> and <em> versus <i> 41
The <small> Element 41
The <cite> Element 41
The <q> Element 42
The <dfn> Element 42
The <abbr> Element 42
The <time> Element 43
The <code> Element 44
<figure> and <figcaption> Elements 44
The <var> Element 45
The <samp> Element 45
The <kbd> Element 45
The <sup> Element 46
The <sub> Element 46
The <mark> Element 46
Editing Text 49
Using Character Entities for Special Characters 51
Comments 51
Summary 52
Chapter 3: Links and Navigation 55
Basic Links 56
Linking to Other Web Pages 56
Linking to E‑mail Addresses 57
Understanding Directories and Directory Structures 60
Understanding URLs 61
Absolute and Relative URLs 63
Same Directory 64
Subdirectory 64
Parent Directory 64
From the Root 65
The <base> Element 65
Creating In-Page Links with the <a> Element 65
Creating a Source Anchor with the href Attribute 65
Creating a Destination Anchor Using the name and id Attributes
(Linking to a Specific Part of a Page) 66
The <a> Element’s Other Attributes 68
The accesskey Attribute 69
The hreflang Attribute 69
The rel Attribute 69
The tabindex Attribute 70
The target Attribute 71
The title Attribute 71
The type Attribute 71
Advanced E‑mail Links 74
Summary 75
Chapter 4: Images, Audio, and Video 79
Adding Images Using the <img> Element 80
The src Attribute 80
The alt Attribute 81
The height and width Attributes 81
Adding Images to a Web Page 82
Using Images as Links 84
Choosing the Right Image Format 85
GIF Images 87
Animated GIFs 90
JPEG Images 91
PNG Images 92
Keeping File Sizes Small 92
Adding Flash, Video, and Audio to Your Web Pages 95
Adding YouTube Movies to Your Web Pages 95
Adding Rich Media with the <audio> and <video> Elements 97
Controlling Playback with the preload, autoplay, loop, and muted
Attributes 97
Using the poster Attribute to Customize the Initial Frame 98
Adding Video Playback Controls with the controls Attribute 98
Adding Audio to Your Web Pages Using the <audio> Element 99
On Containers and Codecs 99
Adding Flash Movies to Your Web Pages 100
Cross-Browser Video—Using Video for Everybody 103
Video Size 104
A Closer Look at the <object> and <param> Elements 104
The data Attribute 105
The height and width Attributes 105
The tabindex Attribute 105
The usemap Attribute 105
The <param> Element 105
Summary 106
Chapter 5: Tables 111
Introducing Tables 111
Basic Table Elements and Attributes 118
The <table> Element Creates a Table 119
The dir Attribute 119
The <tr> Element Contains Table Rows 119
The <td> and <th> Elements Represent Table Cells 119
The colspan Attribute 119
The headers Attribute 120
The rowspan Attribute 120
The scope Attribute 120
Creating a Basic Table 120
Adding a Caption to a Table 122
Grouping Sections of a Table 123
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
Nested Tables 129
Accessible Tables 130
How to Linearize Tables 131
Using the id, scope, and headers Attributes 132
Creating an Accessible Table 133
Summary 135
Chapter 6: Forms 139
Introducing Forms 140
Creating a Form with the <form> Element 143
The action Attribute 143
The method Attribute 143
The id Attribute 143
The name Attribute 144
The enctype Attribute 144
The accept-charset Attribute 144
The novalidate Attribute 145
The target Attribute 145
The autocomplete Attribute 145
Form Controls 145
Text Inputs 146
Single-Line Text Input Controls 147
Password Input Controls 148
Multiple-Line Text Input Controls 149
New HTML5 Input Types and Attributes 151
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
Using Images for Buttons 157
Creating Buttons Using the <button> Element 158
Check Boxes 159
Radio Buttons 161
Select Boxes 163
The <select> Element 164
The <option> Element 164
Creating Scrolling Select Boxes 165
Selecting Multiple Options with the multiple Attribute 166
Grouping Options with the <optgroup> Element 166
Attributes for Select Boxes 167
File Select Boxes 168
Hidden Controls 169
New HTML5 Form Elements 170
Track Completion of a Task with the New <progress> Element 170
Represent Scalar Measurement within a Range with the <meter>
Element 171
Create an Autocomplete List with an <input> and the New <datalist>
Element 171
Creating a Contact Form 172
Creating Labels for Controls and the <label> Element 174
Structuring Your Forms with <fieldset> and <legend> Elements 176
Focus 177
Tabbing Order 178
Access Keys 179
Disabled and Read-Only Controls 181
Sending Form Data to the Server 183
HTTP get 183
HTTP post 184
Creating More Usable Form Fields 185
Summary 187
Chapter 7: Cascading Style Sheets 191
Introducing CSS 192
A Basic Example 193
Inheritance 197
Where You Can Add CSS Rules 197
The <link> Element 198
The rel Attribute 199
The href Attribute 199
The media Attribute 199
The <style> Element 200
Advantages of External Style Sheets 200
CSS Properties 201
Controlling Text 203
The font-family Property 204
The font-size Property 206
The font-weight Property 207
The font-style Property 209
The font-variant Property 209
Text Formatting 210
The color Property 211
The text-align Property 211
The vertical-align Property 212
The text-decoration Property 214
The text-indent Property 214
The text-shadow Property 215
The text-transform Property 216
The letter-spacing Property 217
The word-spacing Property 217
The white-space Property 218
The direction Property 219
Text Pseudo-Classes 220
The first-letter Pseudo-Class 220
The first-line Pseudo-Class 221
Styling Text 221
Selectors 224
Universal Selector 224
The Type Selector 224
The Class Selector 224
The ID Selector 225
The Child Selector 225
The Descendant Selector 226
The Adjacent Sibling Selector 226
The General Sibling Selector 226
Using Child and Sibling Selectors to Reduce Dependence on
Classes in Markup 227
Attribute Selectors 228
Lengths 231
Relative Units 231
px 231
em 231
ex 232
New Relative Units: rem, vh, and vw 232
Absolute Units 232
Percentages 233
Introducing the Box Model 233
An Example Illustrating the Box Model 234
The border Properties 236
The border-color Property 236
The border-style Property 236
The border-width Property 238
Expressing border Properties Using Shorthand 238
The padding Property 239
The margin Property 240
Dimensions of a Content Box 241
The height and width Properties 242
The line-height Property 243
The max-width and min-width Properties 244
The min-height and max-height Properties 244
The overflow Property 245
The Internet Explorer Box Model and box-sizing: border-box 246
Creating a Style Sheet for Code 248
Summary 252
Chapter 8: More Cascading Styl e Sheets 257
Links 258
Backgrounds 259
The background-color Property 260
The background-image Property 261
The background-repeat Property 262
The background-position Property (for Fixing Position of
Backgrounds) 264
The background-attachment Property (for Watermarks) 265
The background Property (the Shorthand) 266
Lists 267
The list-style-type Property 267
The list-style-position Property 269
The list-style-image Property 270
The list-style Property (the Shorthand) 271
Tables 271
Table-Specific Properties 273
The border-collapse Property 274
The border-spacing Property 275
The empty-cells Property 276
The caption-side Property 277
The table-layout Property 278
Outlines 280
The outline-width Property 281
The outline-style Property 281
The outline-color Property 281
The outline Property (the Shorthand) 281
The :focus and :active Pseudo-Classes 282
Generated Content 283
The :before and :after Pseudo-Elements 283
The content Property 284
Counters 284
Quotation Marks 287
Miscellaneous Properties 288
The cursor Property 288
The display Property 289
The visibility Property 290
Additional Rules 291
The @import Rule: Modularized Style Sheets 291
The !important Rule 292
Positioning and Layout with CSS 293
Normal Flow 294
The position Property 294
Box Offset Properties 295
Relative Positioning 295
Absolute Positioning 296
Fixed Positioning 298
The z-index Property 299
Floating Using the float Property 300
The clear Property 302
Building a Sample Layout 303
Summary 308
Chapter 9: Rounded Corners, Animations, Custom Fonts, and More with CSS 3 311
The Modular Approach of CSS3 312
Mature CSS3 Modules 312
More Powerful CSS Selectors 312
Advanced Color Options 315
Use New, Easier-to-Understand, Numerical Color Values with HSL 316
Control Transparency with RGBA, HSLA, and the opacity Property 317
Backgrounds and Borders Module 319
Multi-column Layout Module 321
Media Queries 323
New and In-Development Modules 326
Custom Fonts with the @font-face Directive 326
On Font Formats, Compatibility, and the Evolution of the Bulletproof
@font-face Syntax 327
Adding Custom Fonts to Example Café 327
Advanced CSS Manipulations with Transforms, Animations, and
Transitions 331
2D Transforms 331
3D Transforms 332
CSS Animations and CSS Transitions 334
Summary 336
Chapter 10: Learning JavaScript 339
What Is Programming About? 340
How to Add a Script to Your Pages 343
Comments in JavaScript 344
The <noscript> Element 344
Create an External JavaScript 345
The Document Object Model 346
Accessing Values Using Dot Notation 346
Different Types of Objects 346
Starting to Program with JavaScript 347
The JavaScript Console 347
General Programming Concepts 349
Variables 349
Assigning a Value to a Variable 350
Lifetime of a Variable 350
Operators 351
Arithmetic Operators 351
Assignment Operators 352
Comparison Operators 353
Logical or Boolean Operators 353
String Operators (Using + with Strings) 354
Functions 354
How to Define a Function 354
How to Call a Function 355
The return Statement 356
Function Expressions and Anonymous Functions 356
Conditional Statements 357
if Statements 357
if . . . else Statements 358
switch Statements 358
Looping 360
while 360
do . . . while 361
for 361
Infinite Loops and the break Statement 362
Events 363
Built-in Objects 364
String 364
Properties 365
Methods 365
Manipulating Strings with JavaScript 366
Date 368
Math 371
Properties 371
Methods 372
Array 373
Window 375
Properties 376
Methods 377
Writing JavaScript 377
A Word about Data Types 378
Keywords 379
Summary 380
Chapter 11: Working with jQuery 383
Why jQuery? 384
Adding jQuery to Your Page 384
jQuery Basics 386
Introducing the $ Function 386
Chaining 386
Start Your Scripts the Smart Way with $( document ).ready() 387
jQuery and the DOM 387
Selecting Elements with jQuery 387
Creating and Adding Elements 389
Manipulating Elements with jQuery 391
Manage CSS Classes with $().addClass(), $().removeClass(),
$().hasClass(), and $().toggleClass() 391
Get or Set Attributes with $().attr() 392
Get or Set CSS Properties with $().css() 393
Get or Set the HTML of an Element with $().html() 394
Basic Animations and Effects 395
Show and Hide Elements with $().show(), $().hide(), and $().toggle() 395
Animate Opacity with $().fadeIn(), $().fadeOut(), and $().fadeToggle() 396
Create a Sliding Doors Effect with $().slideUp(), $().slideDown(), and $().slideToggle() 396
Managing Events with jQuery 397
Bind Events with $().on() and $().off() 398
Legacy jQuery Event Handling 400
Using jQuery, CSS, and HTML to Add Interactivity 400
Summary 403
Chapter 12: jQuery: Beyond the Basics 407
Ajax with jQuery 407
JSON, XML, or Text 409
Working with XML 409
Working with Text Responses 410
GETting and POSTing 411
Form Validation 414
Using jQuery to Add a Contact Form to a Site 416
jQuery UI 420
Getting jQuery UI 420
jQuery UI Behaviors 421
Draggable and Droppable 421
Resizable 423
Selectable 423
Sortable 424
jQuery UI Widgets 425
The Accordion Widget 425
The Autocomplete Widget 426
The Button Widget 426
The Datepicker Widget 427
The Dialog Widget 427
The Menu Widget 428
The Progressbar Widget 430
The Slider Widget 431
The Spinner Widget 431
The Tabs Widget 432
The Tooltip Widget 432
Summary 433
Chapter 13: Checklists 437
Search Engine Optimization Checklist 437
On-Page Techniques 437
Identifying Keywords and Phrases 438
Brainstorm for Words People Might Search On 439
Select Five to Ten Major Keywords 439
List Other Keywords and Phrases That Correspond to Your Major
Keywords 439
Look Up Related Words (Not Exact Matches) 439
Determine the Popularity of Terms 440
Prioritize the Core Terms 440
Location 440
Mapping Core Terms to Pages 440
Homepages 440
Off-Page Techniques 441
Accessibility Checklist 441
Setting Up Your Document 441
Structural and Semantic Markup 442
Links and Navigation 442
Images and Multimedia 442
Color 443
Tables 443
Forms 443
Style Sheets 444
JavaScript 444
Skip Links 444
Appendix A: Answers to Exercises 447
Chapter 1 447
Chapter 2 448
Chapter 3 449
Chapter 4 451
Chapter 5 454
Chapter 6 455
Chapter 7 458
Chapter 8 463
Chapter 9 466
Chapter 10 468
Chapter 11 470
Chapter 12 472
Chapter 13 474
Appendix B: HTM L El ement Reference 475
Appendix C: CSS Properties 515
Font Properties 515
font 515
font-family 516
font-size 516
font-size-adjust 516
font-stretch 516
font-style 517
font-variant 517
font-weight 517
Text Properties 518
letter-spacing 518
text-align 518
text-decoration 518
text-indent 519
text-shadow 519
text-transform 520
white-space 520
word-spacing 520
Color and Background Properties 521
background 521
background-attachment 521
background-color 522
background-image 522
background-position 522
background-positionX 523
background-positionY 523
background-repeat 523
Border Properties 523
border (border-bottom, border-left, border-top, border-right) 523
border-color (border-bottom-color, border-left-color, border-top-color,
border-right-color) 524
border-style (border-bottom-style, border-left-style, border-top-style,
border-right-style) 524
border-width (border-bottom-width, border-left-width, border-top-width,
border-right-width) 525
Dimensions 525
height 525
line-height 526
max-height 526
max-width 526
min-height 527
min-width 527
width 527
Margin Properties 528
margin (margin-bottom, margin-left, margin-top, margin-right) 528
Padding Properties 528
padding (padding-bottom, padding-left, padding-right, padding-top) 528
List Properties 529
list-style 529
list-style-position 529
list-style-type 529
marker-offset 530
Positioning Properties 531
bottom 531
clip 531
left 531
overflow 532
overflow-x 532
overflow-y 532
position 532
right 533
top 533
vertical-align 533
z-index 534
Outline Properties 534
outline (outline-color, outline-style, outline-width) 535
Table Properties 535
border-collapse 535
border-spacing 535
caption-side 536
empty-cells 536
table-layout 536
Classification Properties 537
clear 537
display 537
float 537
visibility 538
Internationalization Properties 538
direction 538
unicode-bidi 539
Selected CSS3 Properties 539
Color 539
Backgrounds and Borders 540
border-radius (border-top-left-radius, border-top-right-radius,
border-bottom-right-radius, border-bottom-left-radius) 540
box-shadow 540
Multi-Column 541
column-count 541
column-gap 542
column-width 542
Media Queries 542
@font-face 544
2D Transforms 544
3D Transforms 545
Animations 546
Transitions 547
Lengths 548
Absolute Lengths 548
Relative Lengths 549
CSS3 Relative Length Properties 549
Appendix D: Color Names and Values 551
Using Hex Codes to Specify Colors 551
Understanding Hex Codes 553
Using Color Names to Specify Colors 554
Color Name and Number Reference 555
Appendix E: Character Encodings 561
Appendix F: Special Characters 565
Character Entity References for ISO 8859-1 Characters 566
Character Entity References for Symbols, Mathematical Symbols, and Greek Letters 570
Character Entity References for Markup-Significant and Internationalization Characters 575
Appendix G: Language Codes 577
Appendix H: MIME Media Types 583
Text 584
Image 585
Multipart 586
Audio 586
Video 588
Message 589
Model 590
Application 590
Appendix I: Changes between HTM L4 and HTM L5 595
New Elements 595
New <input> Element Types 596
New Attributes 597
Global Attributes 598
Changed Attributes 598
Obsolete Elements 600
Obsolete Attributes 600
At-Risk Elements 602
Index 603
Download
DepositfilesBy: Shahen Gasparyan
No comments:
Post a Comment