Index

Symbols

@media rules, 475476

defining media type styles, 473474

not operators, 476477

.. (double dot), directories, 169

/ (forward slash), HTML directories, 168

< > tags. See individual entries indexed according to tag names

; (semicolons)

CSS, 61, 63

JavaScript

best practices, 516

statements, 508

Numbers

2D transformations, 383

moving elements, 386388

multiple transformations, 391392

rotating elements, 384

scaling elements, 385386

slanting (skewing) elements, 388391

3D transformations, 392393

A

<a> HTML tags, 170180, 436

absolute links, 169

absolute positioning, 276277

abstraction, JavaScript, 665

accessibility

JavaScript, 664

tables, 158

adaptive design. See also RWD, dynamic serving, 467

Adobe Photoshop, 201

AJAX (remote scripting), 85, 690

aligning

cells (tables), 154156

elements in web pages, 261262

images in web pages, 219

horizontal image alignment, 219221

vertical image alignment, 221223

text, 136

attributes, HTML tags, 136

block-level elements, 136139

CSS, 67

alpha transparency (RGB color values), 198

Amazon.com, 735

analogous color schemes, 193

anchor HTML tags, linking

to anchor locations, 171174

to email addresses, 179180

to external web content, 178179

identifying anchor locations within web pages, 170171

to non-HTML files, 177178

between web content, 174177

within web pages, 170

anchor objects (DOM), 528

Angular frameworks (JavaScript), 690

animations, 401402

canvas, 420424

keyframes, defining, 402404

naming, 410

pausing, 410

repeating, 408410

timing, 405408

anonymous functions, event handlers (JavaScript) and, 630

applications (HTML5), developing, 501

architectures (site), sample build, 170

arithmetic mean, 587

arrays (JavaScript), 551

accessing elements of, 565

length of, 565

numeric arrays, 564565, 567569

string arrays, 565566

sorting, 567

splitting, 566567

<article> HTML tags, 37, 40, 45, 437

<aside> HTML tags, 37, 4748, 437

attributes, HTML tags, 136, 168

audio, playing in web pages, 240241, 242

<audio> element, 240241

<audio> HTML tags, 436

B

<b> HTML tags, 122, 126

Backbone.js frameworks (JavaScript), 690

backgrounds (cells)

colors, 157

images, 157

backgrounds (lists), color and, 296

backgrounds (web pages), 353354

color, 194

alternating colors, 364365

changing with CSS, 199201

hexadecimal color codes, 194, 195, 196197

RGB color values, 194, 197198

gradients, 365

linear gradients, 366

radial gradients, 367371

images, 226227

in multiple backgrounds, 355359

positioning images, 361

multiple backgrounds, 355359

placing, 359360

scrolling, 361364

sizing, 360

tiled background images, creating, 212214

bad website examples, 195

banners, creating, 210211

BAWSI.org website, 737

Berners-Lee, Sir Tim, 2, 431

block-level elements, aligning text in, 136139

blogs, publishing web content to, 18

<body> HTML tags, 29, 30, 436

body (tables), wrapping, 151

boldface text, 126, 127, 157

Boolean (logical) operators (JavaScript), 557, 597598

Bootstrap framework, 745

borders (tables)

collapsing, 149150

creating, 149

spacing, 157

borders (web pages), 354

color, changing with CSS, 199201

images as, 373

clipping border images, 373375

defining image width, 375376

extending border images beyond border edge, 376

fitting to borders, 376377

multiple borders, 355

box model (CSS), 271275, 318

box-sizing property, changing, 275276

image maps, creating, 296299

lists, 290291

creating, 291292

image maps, creating, 296299

margins, 293294, 295

navigation lists, 299300

navigation lists, horizontal navigation, 310314

navigation lists, multilevel vertical navigation, 305310

navigation lists, primary navigation, 300

navigation lists, single-level vertical navigation, 303305

navigation lists, vertical navigation, 300303

padding, 292294, 295

placing list item indicators, 294296

styling, 291292

outline properties, 275

positioning elements in layout, 277281

absolute positioning, 276277

relative positioning, 276

web page elements, changing height/width, 272274

box-sizing property (CSS), changing, 275276

<br> HTML tags, 32, 129, 436

breakpoints

best practices, 483

debugging, 115, 116118

defined, 471, 477

defining with media queries, 477479

large screen-specific styles, adding with media queries, 482483

optimal breakpoints, 483

scripting and, 115, 116118

browsers

dishonest browsers, JavaScript and, 668669

distributing, 18

history, accessing, 528530

history objects (DOM), 528530

JavaScript

attaching events across browsers, 660661

avoiding browser specificity, 661

browser quirks, 671

cross-browser scripting, 669672

dishonest browsers, 668669

displaying browser information, 667668

feature sensing, 670

non-JavaScript-enabled browsers, 671672

<noscript> tags, 672

reading browser information, 666667

non-JavaScript-enabled browsers, 671672

opening links in new browser windows, 180181

prefixes, 434

search engines, 672

server interaction, 36

testing, 810

timeouts, 645647

web content, displaying, 141

window objects (DOM), 524, 531

windows

creating, 640

dialog boxes, displaying, 648649

moving, 643645

opening/closing, 640643

timeouts, 645647

built-in objects (JavaScript), 510

<button> element, web forms, 718719

buttons

creating, 210211

radio buttons, web forms, 708709

C

canvas, 410411

animations, 420424

drawing

circles, 411413

lines/polygons, 414416

rectangles/squares, 411

triangles, 415416

images, adding to, 417419

cascading, 434

case sensitivity (text)

color names, 195

JavaScript, 514

web servers, 170

cells (tables)

aligning data, 154156

backgrounds

colors, 157

images, 157

boldface text, 157

creating, 147

resizing in responsive tables, 456457

spanning, 156

styling, 147

centering web page elements, 262263

character entities. See also special characters, formatting, 123125

check boxes, web forms, 706708

child (nested) tags, HTML, 142

children (DOM objects), 533

Chrome (Google), Developer Tools, 101, 114118

circles, drawing on canvas, 411413

clarity, indenting code for, 742743

class attributes, HTML tags, 136

click events, event handlers (JavaScript) and, 623627, 631638

client-side scripting, 488

<closing> HTML tags, 29

closing/opening, browser windows, 640643

code (maintainable), writing

documenting code with comments, 740742

indenting for clarity, 742743

version control, 743745

codecs (video), 237

collapsing borders (tables), 149150

color

analogous color schemes, 193

backgrounds (lists), 296

backgrounds (web pages), 194

alternating colors, 364365

changing color with CSS, 199201

hexadecimal color codes, 194, 195, 196197

RGB color values, 194, 197198

borders, changing color with CSS, 199201

choosing (best practices), 192194

color wheels, 193

complementary color schemes, 194

font color, changing, 129, 130, 131133

graphics software, choosing, 201202

gray, spelling in CSS, 194

hexadecimal color codes, 194, 195, 196197

highlighted text, 438

images, tweaking in, 207208

monochromatic color schemes, 194

names, case sensitivity, 195

RGB color values, 195, 197198

screen resolution, 210

text, changing color with CSS, 199201

text links, changing color, 195

triadic color schemes, 194

websites, bad website examples, 195

columns

CSS, 158162

tables, rearranging in responsive tables, 457460

comma-separated lists, media query expressions, 476

comments (JavaScript), 515516, 740742

compiled scripting languages, 80

complementary color schemes, 194

compression (JPEG), 209

conditional expressions (JavaScript), 596597, 599600

conditional operators (JavaScript), 597

conditional statements (JavaScript), 511

content/presentation/behavior, separating (JavaScript), 657

contents, tables of, 730731

continuing loops (JavaScript), 609

converting

between data types (JavaScript), 557558

date formats with Date object (JavaScript), 590

copyrights, images and, 202

cropping images, 204206

CSS (Cascading Style Sheets), 55, 57, 62

aligning web page elements, 261262

animations, 401402

canvas, 420424

keyframes, defining, 402404

naming, 410

pausing, 410

repeating, 408410

timing, 405408

backgrounds (web pages), changing color, 199201

basic style sheets, 5760

selectors, 60

style rules, 6061

borders, changing color, 199201

box model, 271275

box-sizing property, changing, 275276

changing web page element height/width, 272274

outline properties, 275

positioning elements in layout, 276281

breakpoints

best practices, 483

defined, 471, 477

defining with media queries, 477479

large screen-specific styles, adding with media queries, 482483

optimal breakpoints, 483

browser prefixes, 434

canvas, 410411

animations, 420424

drawing circles, 411413

drawing lines/polygons, 414416

drawing rectangles/squares, 411

drawing triangles, 415416

images, adding to, 417419

cascading, 434

centering web page elements, 262263

color

backgrounds (web pages), changing, 199201

gray, spelling, 194

text color, changing, 199201

columns, 158162

creating, 63

debugging with Developer Tools, 107112

defined, 56

display: table; property, 335338

external style sheets, 56

float property and web page elements, 263266

font sizes, 60, 61

frameworks, 745746

HTML documents, linking to, 6162

hyperlink styles, 182186

inline styles, 7273

internal style sheets, 56, 7173

margins, adding to web page elements, 249257

media queries

adding, 473

baseline styles, defining, 479480

breakpoints, best practices, 483

breakpoints, defined, 471, 477

breakpoints, defining with media queries, 477479

breakpoints, large screen-specific styles adding with media queries, 482483

breakpoints, optimal breakpoints, 483

defined, 471472

defining media type styles, 473474

expressions, 476477

handheld media type, 472

large screen-specific styles, adding, 482483

media features, 474476

print media type, 472473

requesting multiple CSS documents, 474

retina devices and, 484

screen media type, 472

small screen-specific styles, adding, 481482

types of, 472474

ordering elements in layout, 281284

outlines, 378

padding, adding to web page elements, 257261

positioning elements in layout, 6365

absolute positioning, 276277

flowing text, 284285

ordering elements, 281284

relative positioning, 276

print style sheets, 472473

requesting multiple CSS documents with media queries, 474

RWD, writing for, 438439

selectors, 60

semicolons (;), 61, 63

style classes, 6870

style ID, 7071

style primer, 63

formatting properties, 63, 6568

layout properties, 6365

style rules, 5657, 6061

tables

accessibility, 158

borders, collapsing, 149150

cells, aligning data, 154156

cells, background colors, 157

cells, background images, 157

cells, boldface text, 157

cells, spanning, 156

cells, styling, 147

laying out, 156, 157158

mixing presentation/content, 158

mobile devices, 158

page layouts, 157158

pre-planning, 156

sizing, 151153

unnecessary redesigns, 158

text

aligning, 67

changing color, 199201

font properties, 6768

indenting, 67

indenting text, 67

transformations

2D transformations, 383

2D transformations, moving elements, 386388

2D transformations, multiple transformations, 391392

2D transformations, rotating elements, 384

2D transformations, scaling elements, 385386

2D transformations, slanting (skewing) elements, 388391

3D transformations, 392393

transitions, 393396

timing, 396397

triggering with JavaScript, 397398

validating, 438439

style sheets, 73

web content, 99, 109111

z-index property, ordering elements in layout, 281284

CSS box model, 318

image maps, creating, 296299

lists, 290291

creating, 291292

image maps, creating, 296299

margins, 293294, 295

navigation lists, 299300

navigation lists, horizontal navigation, 310314

navigation lists, multilevel vertical navigation, 305310

navigation lists, primary navigation, 300

navigation lists, single-level vertical navigation, 303305

navigation lists, vertical navigation, 300303

padding, 292294, 295

placing list item indicators, 294296

styling, 291292

CSS Flexible Box Layout module, 339345

CSS Grid Layout module, 345348

custom JavaScript objects, 510

D

data types (JavaScript), 556, 557

Booleans, 557

converting between, 557558

null data types, 557

number data types, 556

strings, 557

assigning values to, 559560

calculating length of, 560561

converting case of, 561

getting single characters, 563

splitting, 566567

string objects, 558, 559

substrings, 562

substrings, finding, 563564

substrings, getting single characters, 563

substrings, using parts of strings, 562563

using parts of strings, 562563

Date object (JavaScript), 587588

converting date formats, 590

creating, 588

date values

reading, 588589

setting, 588

time zones, 589

<dd> HTML tags, 139, 141, 290

Debug panel (Firefox), 114118

Debugger (Safari), 114118

debugging

breakpoints and, 116118

CSS with Developer Tools, 107112

HTML with Developer Tools, 102107

JavaScript with Developer Tools, 112114

definition HTML lists, 139, 141, 290

design patterns, JavaScript, 664665

Developer Tools

inspector, 99101

debugging CSS, 107112

debugging HTML, 102107

debugging JavaScript, 112114

Sources panel, 114118

dialog boxes, displaying, 648649

directories, 168

absolute links, 169

double dot (..), 169

forward slash (/), 168

levels of, 168

relative addresses, 168, 169

relative-root addresses, 168

site architectures, sample build, 170

subdirectories, 168

dishonest browsers, JavaScript and, 668669

display: table; property (CSS), 335338

displaying

web content, 141

web form data, 721722

<div> elements, changing appearance of with click events, 631638

<div> HTML tags, 136, 137, 436

<dl> HTML tags, 139, 141, 290

<!doctype> HTML tags, 435

document objects (DOM), 525, 531532

getting information about a document, 525526

writing text in a document, 527

documenting JavaScript code, 662663, 740742

Dojo, 686

DOM (Document Object Model), 495

children, 533

DOM objects (JavaScript), 510

event handlers, mouse events, 623627

jQuery, 683684

nodes, 533, 534

basic properties, 534

document methods, 535

methods, 535536

relationship properties, 534535

objects

anchor objects, 528

children, 533

document objects (DOM), 525527, 531532

event object, 621623

events and, 618

hiding/showing, 541543

history objects, 528530

link objects, 527528

location objects, 530531

methods of, 524

notation, 524

parents, 533

properties of, 524

siblings, 533

window objects, 524, 531

parents, 533

positionable elements (layers), 536, 537541

siblings, 533

structure of, 524, 531533

text

adding to web pages, 545546

modifying in web pages, 543545

unobtrusive JavaScript, 496498

window objects, 638639

properties of, 639

windows, creating, 640

windows, displaying dialog boxes, 648649

windows, moving, 643645

windows, opening/closing, 640643

windows, timeouts, 645647

domains, mobile devices and RWD, 468

double dot (..), directories, 169

do.while loops (JavaScript), 607

download speeds, mobile interfaces and RWD, 449450

downs/ups, mouse events, 623627

drawing (canvas)

circles, 411413

lines/polygons, 414416

rectangles/squares, 411

triangles, 415416

<dt> HTML tags, 139, 141, 290

dynamic serving. See also RWD, adaptive design, 467468

dynamic websites

HTML5 applications, developing, 501

images, changing based on user interaction, 498500

JavaScript, in HTML, 488490

scripting

client-side scripting, 488

displaying random content, 491495

DOM, 495, 496498

hiding scripts, 490

placement of scripts, 489

server-side scripting, 488

types of, 487488

unobtrusive JavaScript, 496

unobtrusive JavaScript and DOM, 496498

E

else keyword, if statements (JavaScript), 598599

<em> HTML tags, 126, 127, 436

email addresses, linking web content, 179180

Ember frameworks (JavaScript), 691

<empty> HTML tags, 29

epochs, 588

error handling, JavaScript, 9192, 662

escaping loops (JavaScript), 608609

ESPN.com, 733734

event handlers

HTML, 511513

JavaScript, 511513, 618

adding, 659661

anonymous functions, 630

attaching events across browsers, 660661

click events, 623627, 631638

creating, 618619

defining, 619620

event object, 621623

keyboard events, 627630

load/unload events, 630631

mouse events, 623627

multiple event handlers, supporting, 620621

objects and events, 618

W3C event model, 659660

web forms, text fields/text areas, 713714

event object (JavaScript), 621623

events (JavaScript), 84

attaching events across browsers, 660661

W3C event model, 659660

web forms, 719720

expressions (JavaScript), 555

external style sheets, 56

F

feature sensing, JavaScript cross-browser scripting, 670

file management, 1417

finding, substrings (JavaScript), 563564

Firefox

Debug panel, 114118

Developer Tools, 100

JavaScript, error handling, 92

FireFTP, 1011

fixed web page layouts, 319322

fixed/liquid hybrid web page layouts

creating, 324326

defining two columns in, 326328

height, setting, 329335

width, setting, 328329

Flash, mobile interfaces and RWD, 445

Flexible Box Layout module (CSS), 339345

flexible-width images, responsive images, mobile design, 461462

float property, web page elements and, 263266

flow control (JavaScript)

conditional expressions, 596597, 599600

conditional operators, 597

if statements, 595596

conditional expressions, 596597

conditional operators, 597

else keyword, 598599

logical (Boolean) operators, 597598

if.else statements

testing multiple conditions, 600

testing multiple conditions, HTML file, 600601

testing multiple conditions, JavaScript file, 601602

logical (Boolean) operators, 597598

loops

continuing, 609

do.while loops, 607

escaping, 608609

infinite loops, 608

looping through object properties, 609612

for loops, 604606

while loops, 606607

shorthand conditional expressions, 599600

switch statements, multiple conditions and, 602604

flowing text in web pages, 284285

<font> HTML tags, 122, 129

fonts

color, changing, 129, 130, 131133

CSS

properties, 6768

sizing, 60, 61

font families (typefaces), changing, 130, 131133

Google Fonts, 134135

mobile interfaces and RWD, 447449

sizing, 60, 61, 129, 130, 131133

typefaces (font families), changing, 130, 131133

web fonts, 133135

<footer> HTML tags, 37, 39, 4849, 437

footers (tables), wrapping, 151

formatting properties (CSS), 63, 6568

formatting text

aligning text, 136

attributes, HTML tags, 136

block-level elements, 136139

attributes, HTML tags, 136, 168

boldface text, 126, 127, 157

character entities, 123125

fonts

changing color, 129, 130, 131133

Google Fonts, 134135

sizing, 129, 130, 131133

web fonts, 133135

italic text, 126127

monospaced text, 127, 128129

paragraph breaks, 136

sample text, 122

simple web pages, building with HTML, 33

special characters, 122125

subscript text, 127

superscript text, 127

typefaces (font families), changing, 130, 131133

underlined text, 127128

forms (web-based), 695696

accepting text input, 702703

accessing elements with JavaScript, 720721

<button> element, 718719

check boxes, 706708

creating, 696702

displaying data, 721722

events, 719720

form-processing scripts, 703

grouping elements, 705

hidden data, 705

input controls, 706712

labeling data, 703704

naming data, 703

<output> element, 719

pull-down pick lists, 710712

radio buttons, 708709

selection lists, 710712

submitting data, 718

text fields/text areas, 713715

validating, 85, 716717

forward slash (/), HTML directories, 168

Foundation framework, 745

frameworks

Bootstrap framework, 745

CSS frameworks, 745746

Foundation framework, 745

HTML frameworks, 745746

HTML5 Boilerplate framework, 745

JavaScript, 690, 691

AJAX (remote scripting), 690

Angular frameworks, 690

Backbone.js frameworks, 690

Ember frameworks, 691

Knockout frameworks, 691

MVC pattern, 689690

React frameworks, 691

FTP clients, 10

FireFTP, 1011

selecting, 1011

transferring files, 1214

function calls (JavaScript), 508509

functions (JavaScript), 570

calling, 571573

defining, 570571

naming, 515

returning values, 573575

G

GIF format (images), 211212

GIMP graphics software, 201202

cropping images, 204205, 206

JPEG compression, 209

resizing images, 206

global variables (JavaScript), 553

Gmail, 673

Google Chrome, Developer Tools, 101, 114118

Google Developers, 665

Google Docs, version control, 743

Google Fonts, 134135

graceful degradation, theory of, 428, 431, 658

gradients, backgrounds (web pages), 365

linear gradients, 366

radial gradients, 367371

graphics software, 201. See also images, Adobe Photoshop

choosing, 201202

GIMP, 201202

cropping images, 204205, 206

JPEG compression, 209

resizing images, 206

gray (color), spelling in CSS, 194

Grid Layout module (CSS), 345348

grouping web form elements, 705

H

<h1> HTML tags, 436

<h2> HTML tags, 436

<h3> HTML tags, 436

handheld media type (media queries), 472

<head> HTML tags, 30, 435, 489, 514

<header> HTML tags, 37, 3943, 437

headers (tables), wrapping, 151

headings, simple web pages, building with HTML, 3336

height/width

fixed/liquid hybrid web page layouts, setting in, 329335

images, specifying in, 218219

web page elements, changing in, 272274

“Hello World!” sample file, creating, 910

helper applications, defined, 234

hexadecimal color codes, 194, 195, 196197

hiding

content in responsive tables, 460461

DOM objects, 541543

JavaScript scripts, 490

web form data, 705

highlighted text, 438

history objects (DOM), 528530

horizontal image alignment, 219221

horizontal navigation in navigation lists, creating, 310314

HTML (Hypertext Markup Language)

backgrounds (web pages), changing color, 199201

boldface text, 126, 127

borders, changing color, 199201

<button> element, web forms, 718719

color

backgrounds (web pages), changing, 199201

text color, changing, 199201

CSS, linking to, 6162

debugging with Developer Tools, 102107

directories, 168

absolute links, 169

double dot (..), 169

forward slash (/), 168

relative addresses, 168, 169

relative-root addresses, 168

site architectures, sample build, 170

subdirectories, 168

event handlers, 511513

formatting text

aligning text, 136139

attributes, HTML tags, 136, 168

boldface text, 126, 127

character entities, 123125

font color, changing, 129, 130, 131133

font sizes, 129, 130, 131133

Google Fonts, 134135

italic text, 126127

monospaced text, 127, 128129

sample text, formatting example, 122

special characters, 122125

subscript text, 127

superscript text, 127

typefaces (font families), changing, 130, 131133

underlined text, 127128

web fonts, 133135

forms, 695696

accepting text input, 702703

accessing elements with JavaScript, 720721

<button> element, 718719

check boxes, 706708

creating, 696702

displaying data, 721722

events, 719720

form-processing scripts, 703

grouping elements, 705

hidden data, 705

input controls, 706712

labeling data, 703704

naming data, 703

<output> element, 719

pull-down pick lists, 710712

radio buttons, 708709

selection lists, 710712

submitting data, 718

text fields/text areas, 713715

validating, 716717

frameworks, 745746

history of, 2

if.else statements (JavaScript), testing multiple conditions, 600601

images

creating HTML for image maps, 230233

placement in web pages, 214217

italic text, 126127

JavaScript and, 8183, 488490

linking

to anchor locations, 171174

CSS styles, 182186

to email addresses, 179180

to external web content, 178179

identifying anchor locations within web pages, 170171

naming links, 181182

to non-HTML files, 177178

opening links in new browser windows, 180181

between web content, 174177

within web pages, 170

lists, 139140

definition HTML lists, 139, 141, 290

nested HTML lists, 142146, 290

ordered HTML lists, 139, 290

unordered HTML lists, 139, 290

monospaced text, 127, 128129

<output> element, web forms, 719

pseudo-classes, 182

rounding elements, 371373

RWD, writing for, 435

basic attributes, 437438

tags every web page should contain, 435436

validating HTML, 438439

web content tags, 436437

semantic HTML, 432, 433

simple web pages, building, 2526

creating a basic page, 2728

formatting text, 33

headings, 3336

HTML tags, 2630

line breaks, 3133

paragraph breaks, 3133

preparing for, 2425

saving HTML files, 33

semantic elements, 3642

text editors, choosing, 25

viewing a basic page, 2728

skeleton pages/templates, 30

subdirectories, 168

subscript text, 127

superscript text, 127

tables

accessibility, 158

body, wrapping, 151

borders, collapsing, 149150

borders, creating, 149

borders, spacing, 157

cells, aligning data, 154156

cells, background colors, 157

cells, background images, 157

cells, boldface text, 157

cells, creating, 147

cells, spanning, 156

cells, styling, 147

creating, 147151

footers, wrapping, 151

headers, wrapping, 151

laying out, 156, 157158

mixing presentation/content, 158

mobile devices, 158

page layouts, 157158

pre-planning, 156

rows, wrapping, 151

sizing, 151153

unnecessary redesigns, 158

tags, 2628, 30

<a> HTML tags, 170174, 436

anchor HTML tags, 170174

<article> HTML tags, 37, 40, 45, 437

<aside> HTML tags, 37, 4748, 437

attributes, 136, 168

<audio> HTML tags, 436

<b> HTML tags, 122, 126

<body> HTML tags, 29, 30, 436

<br> HTML tags, 32, 129, 436

<closing> HTML tags, 29

<dd> HTML tags, 139, 141, 290

<div> HTML tags, 136, 137, 436

<dl> HTML tags, 139, 141, 290

<!doctype> HTML tags, 435

<dt> HTML tags, 139, 141, 290

<em> HTML tags, 126, 127, 436

<empty> HTML tags, 29

<font> HTML tags, 122, 129

<footer> HTML tags, 37, 39, 4849, 437

<h1> HTML tags, 436

<h2> HTML tags, 436

<h3> HTML tags, 436

<head> HTML tags, 30, 435, 489, 514

<header> HTML tags, 37, 3943, 437

<html> HTML tags, 30, 435

<i> HTML tags, 122, 126

<img> HTML tag, 215218, 221, 222, 436, 462463

<li> HTML tags, 139, 290

<link> HTML tag, 473

<map> HTML tag, 233

<meta charest> HTML tags, 436

<meta> HTML tags, 29

<nav> HTML tags, 37, 40, 4546, 437

nested (child) tags, HTML, 142

<ol> HTML tags, 139, 290

<opening> HTML tags, 29

<p> HTML tags, 30, 32, 136, 436, 490

<pre> HTML tags, 127, 128129

pseudo-classes, 182

required tags, 2830

<script> HTML tags, 489, 490, 513514

<section> HTML tags, 37, 39, 4445, 177, 437

<span> HTML tags, 436

<strong> HTML tags, 126, 127, 436

<sub> HTML tags, 127

<sup> HTML tags, 127

<tbody> HTML tags, 151

<td> HTML tags, 147, 149, 149, 150, 154

<tfoot> HTML tags, 151

<th> HTML tags, 147, 149, 150, 154

<thead> HTML tags, 151

<title> HTML tags, 29, 30, 436

<tr> HTML tags, 147, 149, 149, 154

<u> HTML tags, 127128

<ul> HTML tags, 139, 290

<video> HTML tags, 237, 238239, 436

viewing in other web pages, 36

templates/skeleton pages, 30

text, changing color, 199201

underlined text, 127128

valid HTML, 432

validating, 9798, 106107, 109111, 438439

well-formed HTML, 432433

<html> HTML tags, 435

HTML5, applications, developing, 501

HTML5 Boilerplate framework, 745

hyperlinks

absolute links, 169

anchor HTML tags

identifying anchor locations within web pages, 170171

linking between web content, 174177

linking to anchor locations, 171174

linking to email addresses, 179180

linking to external web content, 178179

linking to non-HTML files, 177178

linking within web pages, 170

color, changing, 195

CSS styles, 182186

effective use of, 186187

images, turning into links, 223226

images and, 187

multimedia files, 233234, 235236

naming, 181182

opening in new browser windows, 180181

styling, 182187

tappable links, mobile interfaces and RWD, 449

hypertext, defined, 2

I

<i> HTML tags, 122, 126

ID attributes, HTML tags, 136

if statements (JavaScript), 595596

conditional expressions, 596597

conditional operators, 597

else keyword, 598599

logical (Boolean) operators, 597598

if.else statements (JavaScript), testing multiple conditions, 600

HTML file, 600601

JavaScript file, 601602

image maps, list items and CSS box model, creating with, 296299

images

aligning in web pages, 219

horizontal image alignment, 219221

vertical image alignment, 221223

backgrounds (web pages)

multiple images in, 355359

positioning images in, 361

backgrounds (web pages), adding to, 226227

borders (web pages), 373

clipping border images, 373375

defining image width, 375376

extending border images beyond border edge, 376

fitting images to borders, 376377

canvas, adding to, 417419

changing based on user interaction, 498500

color

reducing/removing, 211212

tweaking, 207208

copyrights, 202

cropping, 204206

flexible-width images, responsive images, mobile design, 461462

GIF format, 211212

graphics software

Adobe Photoshop, 201

choosing, 201202

GIMP, 201202

height/width, specifying, 218219

hyperlinks and, 187

image maps, 227228

creating, 230

HTML for image maps, creating, 230233

mapping regions within images, 229230

needs for, 228229

JPEG compression, 209

links, turning images into, 223226

multiple images in backgrounds (web pages), 355359

ownership of, 202

placement in web pages, 214217

PNG format, 211212

positioning in web page backgrounds, 361

resizing, 206207

resolution, 202203

responsive images, mobile design, 461

flexible-width images, 461462

<picture> element, 463

sizes attribute, 462463

<srcset> element, 462463

using different images, 463464

rights management, 202

screen resolution, 210

text descriptions, 217218

tiled background images, creating, 212214

web pages, adding to, 203204

backgrounds, 226227

cropping images, 204206

GIF format, 211212

height/width, specifying, 218219

JPEG compression, 209

placement in web pages, 214217

PNG format, 211212

reducing/removing color, 211212

resizing images, 206207

text descriptions, 217218

tiled background images, creating, 212214

turning images into links, 223226

tweaking color, 207208

web pages, aligning in, 219

horizontal image alignment, 219221

vertical image alignment, 221223

<img> HTML tags, 215218, 221, 222, 436

<picture> element, 463

sizes attribute, 462463

<srcset> element, 462463

indenting

code for clarity, 742743

text, CSS, 67

index pages, file management, 1617

infinite loops (JavaScript), 608

inline styles (CSS), 7273

input controls, web forms, 706712

inspector (Developer Tools), debugging, 99101

CSS, 107112

HTML, 102107

JavaScript, 112114

interesting web content, creating, 738739

interfaces (mobile), RWD, 445

design elements, fitting, 447

download speeds, 449450

fixed-width designs, 446447

Flash and, 445

font sizes, legibility, 447449

layouts, simplifying, 449

mobile web pages, testing, 450451

navigation, simplifying, 449

tappable links, 449

viewports, configuring, 445446

internal style sheets, 56, 7173

Internet Explorer, Developer Tools, 100

interpreted scripting languages, 80

italic text, 126127

J

JavaScript, 80, 488, 507, 523

abstraction, 665

accessibility, 664

AJAX (remote scripting), 690

Angular frameworks, 690

arrays, 551

accessing elements of, 565

length of, 565

numeric arrays, 564565

numeric arrays, sorting, 567569

string arrays, 565566

string arrays, sorting, 567

string arrays, splitting, 566567

Backbone.js frameworks, 690

best practices, 516517, 655656

accessibility, 664

avoiding browser specificity, 661

avoiding errors, 673

browser quirks, 671

content/presentation/behavior, separating, 657

cross-browser scripting, 669672

design patterns, 664665

dishonest browsers, 668669

displaying browser information, 667668

documenting code, 662663

error handling, 662

event handlers, 659661

feature sensing, 670

graceful degradation, theory of, 658

non-JavaScript-enabled browsers, 671672

<noscript> tags, 672

optionality, 672673

overusing JavaScript, 656657

progressive enhancement, 658659

reading browser information, 666667

reusing code, 665666

unobtrusive scripting, 674677

usability, 663664

web page loading speeds, 657658

Booleans, 557, 597598

browsers

attaching events across browsers, 660661

avoiding browser specificity, 661

cross-browser scripting, 669672

dishonest browsers, 668669

displaying browser information, 667668

feature sensing, 670

non-JavaScript-enabled browsers, 671672

<noscript> tags, 672

quirks, 671

reading browser information, 666667

case sensitivity, 514

comments, 515516

conditional expressions, 596597, 599600

conditional operators, 597

conditional statements, 511

content/presentation/behavior, separating, 657

data types, 556, 557

Booleans, 557

converting between, 557558

null data types, 557

number data types, 556

strings, 557

strings, assigning values to, 559560

strings, calculating length of, 560561

strings, converting case of, 561

strings, creating string objects, 559

strings, finding substrings, 563564

strings, getting single characters, 563

strings, splitting, 566567

strings, string objects, 558

strings, substrings, 562564

strings, using parts of strings, 562563

debugging with Developer Tools, 112114

design patterns, 664665

displaying random content, 491495

documenting code, 662663

Dojo, 686

DOM, 495

adding text to web pages, 545546

controlling positionable elements (layers), 537541

event handlers, mouse events, 623627

event object, 621623

modifying text in web pages, 543545

objects, events and, 618

unobtrusive JavaScript, 496498

window objects, 638639

window objects, creating windows, 640

window objects, displaying dialog boxes, 648649

window objects, moving windows, 643645

window objects, opening/closing windows, 640643

window objects, properties of, 639

window objects, timeouts, 645647

Ember frameworks, 691

epochs, 588

error handling, 9192, 662

event handlers, 511513, 618

adding, 659661

anonymous functions, 630

attaching events across browsers, 660661

click events, 623627

click events, changing appearance of <div> elements, 631638

creating, 618619

defining with JavaScript, 619620

event object, 621623

keyboard events, 627630

load/unload events, 630631

mouse events, 623627

multiple event handlers, supporting, 620621

objects and events, 618

W3C event model, 659660

web forms, text fields/text areas, 713714

events, 84

attaching events across browsers, 660661

W3C event model, 659660

web forms, 719720

expressions, 555

external scripts, 8384

features of, 81

flow control

conditional expressions, 596597, 599600

conditional operators, 597

if statements, 595596

shorthand conditional expressions, 599600

form validation, 85

frameworks, 690, 691

AJAX (remote scripting), 690

Angular frameworks, 690

Backbone.js frameworks, 690

Ember frameworks, 691

Knockout frameworks, 691

MVC pattern, 689690

React frameworks, 691

functions, 570

calling, 508509, 571573

combining with tasks, 508509

defining, 570571

naming, 515

returning values, 573575

graceful degradation, theory of, 658

hiding scripts, 490

history of, 81

HTML and, 8183, 488490

HTML5 applications, developing, 501

if statements, 595596

conditional expressions, 596597

conditional operators, 597

else keyword, 598599

logical (Boolean) operators, 597598

if.else statements, testing multiple conditions, 600

HTML file, 600601

JavaScript file, 601602

jQuery, 683684

JSON, 517518

Knockout frameworks, 691

libraries (third-party), 681683

Dojo, 686

effects, adding, 686689

jQuery, 683684

MooTools, 686

Prototype, 685, 687

script.aculo.us, 685686, 687, 687689

loading speeds (web pages), 657658

logical (Boolean) operators, 557, 597598

loops, 511

continuing, 609

do.while loops, 607

escaping, 608609

infinite loops, 608

looping through object properties, 609612

for loops, 604606

while loops, 606607

methods, text fields/text areas, 713

modifying scripts, 8991

MooTools, 686

<noscript> tags, 672

null data types, 557

number data types, 556

objects, 510, 515, 575

built-in objects, 510, 582583

creating, 576

custom objects, 510

Date object, 587588

Date object, converting date formats, 590

Date object, creating, 588

Date object, reading date values, 588589

Date object, setting date values, 588

Date object, time zones, 589

defining, 577578

DOM objects, 510

event object, 621623

instances, creating, 579581

looping through object properties, 609612

Math object, 583

Math object, generating random numbers, 584

Math object, methods, 584587

Math object, rounding, 584

Math object, truncating, 584

methods, 576, 578579

properties, 576

simplifying scripting, 577

operators, 555

common operators, 555556

precedence, 556

output, creating, 8788

overusing, 656657

prioritizing scripts, 513514

progressive enhancement, 434, 658659

Prototype, 685, 687

React frameworks, 691

remote scripting (AJAX), 85

reserved words, 515

reusing code, 665666

RWD, writing for, validating JavaScript, 438439

script.aculo.us, 685686, 687, 687689

semicolons (;), 516

shorthand conditional expressions, 599600

spacing, 515

special effects, 85

statements, 507508

strings, 551, 557

assigning values to, 559560

calculating length of, 560561

converting case of, 561

getting single characters, 563

splitting, 566567

string objects, 558

string objects, creating, 559

using parts of strings, 562563

substrings, 562

finding, 563564

getting single characters, 563

using parts of strings, 562563

switch statements, multiple conditions and, 602604

syntax rules, 514515

tasks, combining with functions, 508509

testing scripts, 89

third-party libraries, 681683

Dojo, 686

effects, adding, 686689

jQuery, 683684

MooTools, 686

Prototype, 685, 687

script.aculo.us, 685686, 687, 687689

time, displaying, 8591

timeouts, 645647

transitions, triggering, 397398

unobtrusive scripting, 496498, 674677

usability, 663664

validating, 438439

variables, 509, 515, 551, 552

assigning values to, 554555

global variables, 553

local variables, 553

naming, 552

semicolons (;) and, 63

storing data in, 8687

W3C event model, 659660

web forms

accessing elements, 720721

events, 719720

web pages

adding scripts to, 88

fitting in, 8183

loading speeds, 657658

modifying text, 543545

website navigation, 8485

window objects (DOM), 638639

properties of, 639

windows, creating, 640

windows, displaying dialog boxes, 648649

windows, moving, 643645

windows, opening/closing, 640643

windows, timeouts, 645647

JPEG compression, 209

jQuery, 683684

JSON (JavaScript Object Notation), 517518

K-L

keyboard events, event handlers (JavaScript) and, 627630

keyframes (animations), defining, 402404

Knockout frameworks (JavaScript), 691

Koch, Peter-Paul, 671

labeling web form data, 703704

large screen-specific styles, adding with media queries, 482483

large web pages

navigating, 735738

organizing, 735738

layers (positionable elements), DOM, 536, 537541

layout properties (CSS), 6365

layouts

CSS display: table; property, 335338

CSS Flexible Box Layout module, 339345

CSS Grid Layout module, 345348

examples of, 318

fixed layouts, 319322

fixed/liquid hybrid web page layouts

creating, 324326

defining two columns in, 326328

height, setting, 329335

width, setting, 328329

liquid layouts, 322324

mobile devices and, 319, 449

progressive enhancement, 318

responsive layouts, mobile design, 464466

separating structure from design/interactivity, 318

<li> HTML tags, 139, 290

libraries (third-party), JavaScript, 681683

Dojo, 686

effects, adding, 686689

jQuery, 683684

MooTools, 686

Prototype, 685, 687

script.aculo.us, 685686, 687, 687689

line breaks, simple web pages, building with HTML, 3133

linear gradients, backgrounds (web pages), 366

lines/polygons, drawing on canvas, 414416

link objects (DOM), 527528

<link> HTML tag, 473

links

absolute links, 169

anchor HTML tags

identifying anchor locations within web pages, 170171

linking between web content, 174177

linking to anchor locations, 171174

linking to email addresses, 179180

linking to external web content, 178179

linking to non-HTML files, 177178

linking within web pages, 170

color, changing, 195

CSS styles, 182186

effective use of, 186187

images, turning into links, 223226

images and, 187

multimedia files, 233234, 235236

naming, 181182

opening in new browser windows, 180181

styling, 182187

tappable links, mobile interfaces and RWD, 449

liquid web page layouts, 322324

liquid/fixed hybrid web page layouts

creating, 324326

defining two columns in, 326328

height, setting, 329335

width, setting, 328329

lists

comma-separated lists, media query expressions, 476

pull-down pick lists, web forms, 710712

selection lists, web forms, 710712

lists (CSS box model), 290291

background colors, 296

creating, 291292

image maps, creating, 296299

margins, 293294, 295

navigation lists, 299300

horizontal navigation, creating, 310314

multilevel navigation, styling, 305310

primary navigation, 300

single-level navigation, styling, 303305

vertical navigation, creating, 300303

padding, 292294, 295

placing list item indicators, 294296

styling, 291292

lists (HTML), 139140

definition HTML lists, 139, 141, 290

nested HTML lists, 142146

nested lists, 290

ordered HTML lists, 139, 290

unordered HTML lists, 139, 290

load/unload events, event handlers (JavaScript) and, 630631

loading speeds (web pages), 657658

local sites, creating, 1718

local variables (JavaScript), 553

location objects (DOM), 530531

logical (Boolean) operators (JavaScript), 557, 597598

loops (JavaScript), 511

continuing, 609

do.while loops, 607

escaping, 608609

for loops, 604606

infinite loops, 608

looping through object properties, 609612

for loops, 604606

while loops, 606607

M

maintainable code, writing, 740

documenting code with comments, 740742

indenting for clarity, 742743

version control, 743745

managing files, 1417

<map> HTML tag, 233

maps

image maps, 227228

creating, 230

HTML for image maps, creating, 230233

mapping regions within images, 229230

needs for, 228229

web pages, adding to, backgrounds, 226227

margins

adding to web page elements, 249257

lists, styling with CSS box model, 293294

Math object (JavaScript), 583

generating random numbers, 584

methods, 584587

rounding, 584

truncating, 584

media queries

adding, 473

baseline styles, defining, 479480

breakpoints

best practices, 483

defined, 471, 477

defining with media queries, 477479

large screen-specific styles, adding with media queries, 482483

optimal breakpoints, 483

defined, 471472

defining media type styles, 473474

expressions, 476477

handheld media type, 472

large screen-specific styles, adding, 482483

media features, 474476

print media type, 472473

requesting multiple CSS documents, 474

retina devices and, 484

screen media type, 472

small screen-specific styles, adding, 481482

types of, 472474

<meta> HTML tags, 29

<meta charest> HTML tags, 436

methods (JavaScript), text fields/text areas, 713

MLB section (ESPN.com), 733734

mobile devices

adaptive design. See also RWD, dynamic serving, 467

dynamic serving. See also RWD, adaptive design, 467468

RWD

alternatives to, 466

difficulties with, 466467

importance of RWD in design, 430431, 443444

Mobile First design, 451454

mobile interfaces, 445451

Mobile Only design, 454455

responsive images, 461464

responsive layouts, 464466

responsive tables, 455461

separate URL/domains, 468

tables, 158

web page layouts, 319

website optimization, 739740

Mobile First design, 451454

mobile interfaces, RWD, 445

design elements, fitting, 447

download speeds, 449450

fixed-width designs, 446447

Flash and, 445

font sizes, legibility, 447449

layouts, simplifying, 449

mobile web pages, testing, 450451

navigation, simplifying, 449

tappable links, 449

viewports, configuring, 445446

Mobile Only design, 454455

mobile web pages, testing, mobile interfaces and RWD, 450451

modifying, JavaScript scripts, 8991

monochromatic color schemes, 194

monospaced text, 127, 128129

MooTools, 686

mouse events, event handlers (JavaScript) and, 623

click events, 623627

click events, changing appearance of <div> elements, 631638

mouseover/mouseout, 623

ups/downs, 623627

moving

browser windows, 643645

elements (2D transformations), 386388

multilevel vertical navigation, styling, 305310

multimedia files

best practices, 242

creating, 234

defined, 192

embedding into web pages, 237

linking to, 233234, 235236

playing audio in web pages, 240241

playing video in web pages, 237239

QuickTime, support for, 236

multiple 2D transformations, 391392

multiple backgrounds in web pages, 355359

multiple borders in web pages, 355

multiple images in backgrounds (web pages), 355359

MVC pattern, JavaScript frameworks, 689690

N

naming

animations, 410

HTML form data, 703

links, 181182

variables (JavaScript), 552

web form data, 703

<nav> HTML tags, 37, 40, 4546, 437

navigating

large web pages, 735738

website optimization, 739

navigation, mobile interfaces and RWD, 449

navigation lists, 299300

horizontal navigation, creating, 310314

primary navigation, 300

vertical navigation

creating, 300303

multilevel navigation, styling, 305310

single-level navigation, styling, 303305

nested (child) tags, HTML, 142

nested lists, 142146, 290

NFL section (ESPN.com), 733734

nodes (DOM), 533, 534

basic properties, 534

document methods, 535

methods, 535536

relationship properties, 534535

non-JavaScript-enabled browsers, 671672

<noscript> tags, 672

not operators, @media rules, 476477

null data types (JavaScript), 557

number data types (JavaScript), 556

numeric arrays (JavaScript), 564565, 567569

O

objects (JavaScript), 510, 515, 575

built-in objects, 510, 582583

creating, 576

custom objects, 510

Date object, 587588

defining, 577578

DOM objects, 510

instances, creating, 579581

looping through object properties, 609612

Math object, 583

generating random numbers, 584

methods, 584587

rounding, 584

truncating, 584

methods, 576, 578579

properties, 576

simplifying scripting, 577

<ol> HTML tags, 139, 290

<opening> HTML tags, 29

opening/closing, browser windows, 640643

operators (JavaScript), 555

common operators, 555556

precedence, 556

optionality of JavaScript, 672673

ordered HTML lists, 139, 290

organizing web pages

large web pages, 735738

simple web pages, 732734

outline properties (CSS box model), 275

outlines (web pages), 378

<output> element, web forms, 719

overusing JavaScript, 656657

P

<p> HTML tags, 30, 32, 136, 436, 490

padding

adding to web page elements, 257261

lists, styling with CSS box model, 292294, 295

page layouts

CSS display: table; property, 335338

CSS Flexible Box Layout module, 339345

CSS Grid Layout module, 345348

examples of, 318

fixed layouts, 319322

fixed/liquid hybrid web page layouts

creating, 324326

defining two columns in, 326328

height, setting, 329335

width, setting, 328329

liquid layouts, 322324

mobile devices and, 319

progressive enhancement, 318

separating structure from design/interactivity, 318

tables, 157158

paragraph breaks, simple web pages, building with HTML, 3133, 136

parents (DOM objects), 533

pausing animations, 410

Peet’s Coffee website, 736737

photos

backgrounds (web pages), adding to, height/width, specifying, 226227

screen resolution, 210

web pages, adding to, 203204

cropping images, 204206

GIF format, 211212

height/width, specifying, 218219

JPEG compression, 209

placement in web pages, 214217

PNG format, 211212

reducing/removing color, 211212

resizing images, 206207

text descriptions, 217218

tiled background images, creating, 212214

turning images into links, 223226

tweaking color, 207208

web pages, aligning in, 219

horizontal image alignment, 219221

vertical image alignment, 221223

Photoshop (Adobe), 201

<picture> element, responsive images, mobile design, 463

plugins, defined, 234

PNG format (images), 211212

polygons/lines, drawing on canvas, 414416

pop-up windows, opening links in, 180181

positioning elements

controlling positioning with JavaScript, 537541

DOM, 536

in layout, 277281

absolute positioning, 276277

CSS layout, 6365

flowing text, 284285

ordering elements, 281284

relative positioning, 276

<pre> HTML tags, 127, 128129

precedence, JavaScript operators, 556

primary navigation (navigation lists), 300

print media type (media queries), 472473

print style sheets, 472473

prioritizing JavaScript scripts, 513514

progressive enhancement

benefits of, 435

content

adjusting the look of with CSS, 433434

separating from presentation/functionality, 432

content layer, editing, 432433

defined, 431

JavaScript interactivity, 434, 658659

web page design, 318

Prototype, 685, 687

pseudo-classes, HTML tags, 182

publishing web content

blogs, 18

locally, 1718

pull-down pick lists, web forms, 710712

Q

QuickTime, support for, 236

quirks (browsers), 671

R

radial gradients, backgrounds (web pages), 367371

radio buttons, web forms, 708709

React frameworks (JavaScript), 691

rectangles/squares, drawing on canvas, 411

reducing/removing color in images, 211212

relative addresses, 168, 169

relative positioning, 276

remote scripting (AJAX), 85

repeating, animations, 408410

reserved words (JavaScript), reserved words, 515

resizing

cells in responsive tables, 456457

images, 206207

resolution

images, 202203

screen, 210

responsive images, mobile design, 461

flexible-width images, 461462

<picture> element, 463

sizes attribute, 462463

<srcset> element, 462463

using different images, 463464

responsive layouts, mobile design, 464466

responsive tables, mobile design, 455

hiding content, 460461

rearranging rows/columns, 457460

resizing cells, 456457

retina devices and media queries, 484

reusing JavaScript code, 665666

RGB color values, 195, 197198

rights management, images and, 202

rotating elements (2D transformations), 384

rows (tables)

rearranging in responsive tables, 457460

wrapping, 151

RWD (Responsive Web Design). See also adaptive design, dynamic serving

alternatives to, 466

CSS, validating, 438439

defined, 427428

difficulties with, 466467

history of, 428

HTML, validating, 438439

HTML, writing, 435

basic attributes, 437438

tags every web page should contain, 435436

web content tags, 436437

JavaScript, validating, 438439

mobile design

importance of RWD in design, 430431, 443444

Mobile First design, 451454

mobile interfaces, 445451

Mobile Only design, 454455

responsive images, 461464

responsive layouts, 464466

responsive tables, 455461

separate URL/domains, 468

mobile interfaces, 445

design elements, fitting, 447

download speeds, 449450

fixed-width designs, 446447

Flash and, 445

font sizes, legibility, 447449

layouts, simplifying, 449

mobile web pages, testing, 450451

navigation, simplifying, 449

tappable links, 449

viewports, configuring, 445446

need for, 429430

S

Safari, Debugger, 114118

sample text, formatting example, 122

saving, HTML files, 33

scaling elements (2D transformations), 385386

screen media type (media queries), 472

screen resolution, 210

<script> HTML tags, 489, 490, 513514

script.aculo.us, 685686, 687, 687689

scripting, 80

breakpoints and, 116118

client-side scripting, 488

compiled scripting languages, 80

hiding scripts, 490

interpreted scripting languages, 80

JavaScript, 80

adding scripts to, 88

error handling, 9192

events, 84

external scripts, 8384

features of, 81

form validation, 85

history of, 81

HTML and, 8183

modifying scripts, 8991

objects, simplifying scripting, 577

output, creating, 8788

remote scripting (AJAX), 85

special effects, 85

testing scripts, 89

time, displaying, 8591

variables, semicolons (;) and, 63

variables, storing data in, 8687

web pages, fitting in, 8183

website navigation, 8485

placement of scripts, 489

server-side scripting, 488

types of, 487488

scrolling in backgrounds (web pages), 361364

search engines, website optimization, 672, 738

creating interesting content, 738739

mobile devices, 739740

navigation, 739

<section> HTML tags, 37, 39, 4445, 177, 437

selection lists, web forms, 710712

selectors (CSS), 60

semantic elements

progressive enhancement, 433

simple web pages, building with HTML, 3642

semantic HTML, 432, 433

semicolons (;)

CSS, 61, 63

JavaScript

best practices, 516

statements, 508

servers

browser interaction, 36

case sensitivity (text) and, 170

file management, 1416

scripting, 488

shorthand conditional expressions (JavaScript), 599600

siblings (DOM objects), 533

simple web pages

building with HTML, 2526

creating a basic page, 2728

formatting text, 33

headings, 3336

HTML tags, 2630

line breaks, 3133

paragraph breaks, 3133

preparing for, 2425

saving HTML files, 33

semantic elements, 3642

text editors, choosing, 25

viewing a basic page, 2728

organizing, 732734

single-level vertical navigation, styling, 303305

single-page interfaces, 730731

site architectures, sample build, 170

sizes attribute, responsive images, mobile design, 462463

sizing

backgrounds (web pages), 360

fonts, 129, 130, 131133

tables, 151153

skeleton pages/templates, HTML, 30

skewing (slanting) elements (2D transformations), 388391

small screen-specific styles, adding with media queries, 481482

sorting

numeric arrays (JavaScript), 567569

string arrays (JavaScript), 567

Sources panel (Developer Tools), 114118

spacing in JavaScript, 515

<span> HTML tags, 436

spanning, cells (tables), 156

special characters, formatting. See also character entities, 122125

splitting, string arrays (JavaScript), 566567

squares/rectangles, drawing on canvas, 411

srcset element, responsive images, mobile design, 462463

Stephenson, Sam, 685

sticky web pages, 729

storing web content

absolute links, 169

attributes, HTML tags, 168

directories, 168

relative addresses, 168, 169

relative-root addresses, 168

string arrays (JavaScript), 565566

sorting, 567

splitting, 566567

strings (JavaScript), 551, 557

assigning values to, 559560

calculating length of, 560561

converting case of, 561

getting single characters, 563

splitting, 566567

string objects, 558, 559

substrings, 562

finding, 563564

getting single characters, 563

using parts of strings, 562563

using parts of strings, 562563

<strong> HTML tags, 126, 127, 436

style attributes, HTML tags, 136

style classes (CSS), 6870

style ID (CSS), 7071

style rules (CSS), 5657, 6061

style sheets. See CSS

<sub> HTML tags, 127

subdirectories, 168

submitting web form data, 718

subscript text, 127

substrings (JavaScript), 562

finding, 563564

single characters, getting, 563

using parts of strings, 562563

<sup> HTML tags, 127

superscript text, 127

switch statements (JavaScript), multiple conditions and, 602604

T

tables

accessibility, 158

body, wrapping, 151

borders

collapsing, 149150

creating, 149

spacing, 157

cells

aligning data, 154156

background colors, 157

background images, 157

boldface text, 157

creating, 147

spanning, 156

styling, 147

creating, 147151

CSS display: table; property, 335338

footers, wrapping, 151

headers, wrapping, 151

laying out, 156, 157158

mixing presentation/content, 158

mobile devices, 158

page layouts, 157158

pre-planning, 156

responsive tables, mobile design, 455

hiding content, 460461

rearranging rows/columns, 457460

resizing cells, 456457

rows, wrapping, 151

sizing, 151153

unnecessary redesigns, 158

tables of contents, 730731

tappable links, mobile interfaces and RWD, 449

<tbody> HTML tags, 151

<td> HTML tags, 147, 149, 149, 150, 154

Technology Review, 431

templates/skeleton pages, HTML, 30

testing

browsers, 810

JavaScript scripts, 89

web content, 1819

text

aligning, 136

attributes, HTML tags, 136

block-level elements, 136139

boldface text, 126, 127, 157

case sensitivity

color names, 195

JavaScript, 514

web servers, 170

character entities, 123125

color, changing, 199201

CSS

aligning text, 67

font properties, 6768

indenting text, 67

DOM

adding to web pages, 545546

modifying text in web pages, 543545

flowing text in web pages, 284285

fonts

changing color, 129, 130, 131133

mobile interfaces and RWD, 447449

sizing, 129, 130, 131133

formatting

aligning text, 136139

attributes, HTML tags, 136, 168

boldface text, 126, 127, 157

italic text, 126127

monospaced text, 127, 128129

paragraph breaks, 136

sample text, 122

simple web pages, building with HTML, 33

special characters, 122125

subscript text, 127

superscript text, 127

underlined text, 127128

highlighted text, 438

HTML forms, accepting text input, 702703

images, describing with text, 217218

italic text, 126127

links, changing color, 195

monospaced text, 127, 128129

sample text, formatting example, 122

special characters, formatting, 122125

subscript text, 127

superscript text, 127

typefaces (font families), changing, 130, 131133

underlined text, 127128

web forms

accepting text input, 702703

text fields/text areas, 713715

web pages

adding text, 545546

modifying text, 543545

writing in documents, document objects (DOM), 527

text editors, choosing, 910

<tfoot> HTML tags, 151

<th> HTML tags, 147, 149, 150, 154

<thead> HTML tags, 151

theory of graceful degradation, 428, 431

third-party JavaScript libraries, 681683

Dojo, 686

effects, adding, 686689

jQuery, 683684

MooTools, 686

Prototype, 685, 687

script.aculo.us, 685686, 687, 687689

tiled background images, creating, 212214

time, displaying with JavaScript, 8591

time zones, Date object (JavaScript) and, 589

timeouts, 645647

timing

animations, 405408

transitions, 396397

<title> HTML tags, 29, 30, 436

<tr> HTML tags, 147, 149, 149, 154

transformations

2D transformations, 383

moving elements, 386388

multiple transformations, 391392

rotating elements, 384

scaling elements, 385386

slanting (skewing) elements, 388391

3D transformations, 392393

transitions, 393396

timing, 396397

triggering with JavaScript, 397398

triadic color schemes, 194

triangles, drawing on canvas, 415416

typefaces (font families), changing, 130, 131133

U

<u> HTML tags, 127128

<ul> HTML tags, 139, 290

underlined text, 127128

unload/load events, event handlers (JavaScript) and, 630631

unobtrusive JavaScript, 496498, 674677

unordered HTML lists, 139, 290

ups/downs, mouse events, 623627

URL, mobile devices and RWD, 468

usability, JavaScript, 663664

UTF-8 web pages, formatting text, special characters, 123

V

valid HTML, 432

validating

CSS, 438439

forms, JavaScript and, 85

HTML, 438439

JavaScript, 438439

style sheets, 73

web content

CSS, 99, 109111

HTML, 9798, 106107, 109111

web forms, 716717

variables (JavaScript), 509, 515, 551, 552

assigning values to, 554555

global variables, 553

local variables, 553

naming, 552

semicolons (;) and, 63

storing data in, 8687

version control

Google Docs, 743

maintainable code, writing, 743745

vertical image alignment, 221223

vertical navigation in navigation lists, creating, 300303

video, 242

codecs, 237

hosting services, 242

playing in web pages, 237239

<video> element, 237239

<video> HTML tags, 237, 238239, 436

viewports, mobile interfaces and RWD, 445446

visual editors, 18

W

W3C event model, 659660

web content

absolute links, 169

color, choosing (best practices), 192194

columns (CSS), 158162

creating, 23

defined, 3

delivery, 36

displaying, 141

interesting web content, creating, 738739

linking

to anchor locations, 171174

CSS styles, 182186

to email addresses, 179180

to external web content, 178179

identifying anchor locations within web pages, 170171

naming links, 181182

to non-HTML files, 177178

opening links in new browser windows, 180181

between web content, 174177

within web pages, 170

publishing

blogs, 18

locally, 1718

relative addresses, 168, 169

relative-root addresses, 168

storing

absolute links, 169

attributes, HTML tags, 168

directories, 168

relative addresses, 168, 169

relative-root addresses, 168

tables

accessibility, 158

body, wrapping, 151

borders, collapsing, 149150

borders, creating, 149

borders, spacing, 157

cells, aligning data, 154156

cells, background colors, 157

cells, background images, 157

cells, boldface text, 157

cells, creating, 147

cells, spanning, 156

cells, styling, 147

creating, 147151

footers, wrapping, 151

headers, wrapping, 151

laying out, 156, 157158

mixing presentation/content, 158

mobile devices, 158

page layouts, 157158

pre-planning, 156

rows, wrapping, 151

sizing, 151153

unnecessary redesigns, 158

testing, 1819

validating

CSS, 99, 109111

HTML, 9798, 106107, 109111

web fonts, 133135

web forms, 695696

accepting text input, 702703

accessing elements with JavaScript, 720721

<button> element, 718719

check boxes, 706708

creating, 696702

displaying data, 721722

events, 719720

form-processing scripts, 703

grouping elements, 705

hidden data, 705

input controls, 706712

labeling data, 703704

naming data, 703

<output> element, 719

pull-down pick lists, 710712

radio buttons, 708709

selection lists, 710712

submitting data, 718

text fields/text areas, 713715

validating, 716717

web hosting providers, selecting, 68

web pages

absolute links, 169

aligning elements in, 261262

aligning text, 136

attributes, HTML tags, 136

block-level elements, 136139

audio, playing in web pages, 240241

backgrounds, 353354

adding images to, 226227

alternating colors, 364365

color, 194

color, changing with CSS, 199201

color, hexadecimal color codes, 194, 195, 196197

color, RGB color values, 194, 197198

gradients, 365

gradients, linear gradients, 366

gradients, radial gradients, 367371

multiple backgrounds, 355359

placing, 359360

positioning images in, 361

scrolling, 361364

sizing, 360

tiled background images, creating, 212214

banners, creating, 210211

borders, 354

color, changing with CSS, 199201

images, 373

images, clipping, 373375

images, defining width of, 375376

images, extending border images beyond border edge, 376

images, fitting to borders, 376377

multiple borders, 355

buttons, creating, 210211

centering web page elements, 262263

color, choosing (best practices), 192194

columns (CSS), 158162

DOM

adding text, 545546

modifying text, 543545

float property and web page elements, 263266

flowing text in layout, 284285

highlighted text, 438

HTML tags, viewing, 36

images, adding to, 203204

cropping images, 204206

GIF format, 211212

height/width, specifying, 218219

JPEG compression, 209

placement in web pages, 214217

PNG format, 211212

reducing/removing color, 211212

resizing images, 206207

text descriptions, 217218

tiled background images, creating, 212214

turning images into links, 223226

tweaking color, 207208

images, aligning in, 219

horizontal image alignment, 219221

vertical image alignment, 221223

JavaScript

adding scripts to web pages, 88

fitting in web pages, 8183

large web pages

navigating, 735738

organizing, 735738

layouts

CSS display: table; property, 335338

CSS Flexible Box Layout module, 339342

CSS Flexible Box Layout module, modifying flex items, 342345

CSS Grid Layout module, 345348

examples of, 318

fixed layouts, 319322

fixed/liquid hybrid web page layouts, creating, 324326

fixed/liquid hybrid web page layouts, defining two columns in, 326328

fixed/liquid hybrid web page layouts, setting height, 329335

fixed/liquid hybrid web page layouts, setting width, 328329

liquid layouts, 322324

mobile devices and, 319

progressive enhancement, 318

separating structure from design/interactivity, 318

linking

to anchor locations, 171174

CSS styles, 182186

to email addresses, 179180

to external web content, 178179

identifying anchor locations within web pages, 170171

naming links, 181182

to non-HTML files, 177178

opening links in new browser windows, 180181

between web content, 174177

within web pages, 170

loading speeds, 657658

margins, adding to elements, 249257

mobile web pages, testing, mobile interfaces and RWD, 450451

multimedia files

embedding into web pages, 237

playing audio in web pages, 240241

playing video in web pages, 237239

ordering elements in layout, 281284

outlines, 378

padding, adding to elements, 257261

paragraph breaks, 136

positioning elements in layout, 277281

absolute positioning, 276277

flowing text, 284285

ordering elements, 281284

relative positioning, 276

relative addresses, 168, 169

relative-root addresses, 168

rounding HTML elements, 371373

simple web pages, organizing, 732734

simple web pages, building with HTML, 2526

creating a basic page, 2728

formatting text, 33

headings, 3336

HTML tags, 2628

HTML tags, required tags, 2830

line breaks, 3133

paragraph breaks, 3133

preparing for, 2425

saving HTML files, 33

semantic elements, 3642

text editors, choosing, 25

viewing a basic page, 2728

single-page interfaces, 730731

sticky web pages, 729

tables

accessibility, 158

body, wrapping, 151

borders, collapsing, 149150

borders, creating, 149

borders, spacing, 157

cells, aligning data, 154156

cells, background colors, 157

cells, background images, 157

cells, boldface text, 157

cells, creating, 147

cells, spanning, 156

cells, styling, 147

creating, 147149

footers, wrapping, 151

headers, wrapping, 151

laying out, 156, 157158

mixing presentation/content, 158

mobile devices, 158

page layouts, 157158

pre-planning, 156

rows, wrapping, 151

sizing, 151153

unnecessary redesigns, 158

tables of contents, 730731

text, color, changing with CSS, 199201

UTF-8 web pages, special characters, formatting, 122125

video, playing in web pages, 237239

web servers, case sensitivity (text) and, 170

websites

adaptive design. See also RWD, dynamic serving, 467

bad website examples, 195

color, choosing (best practices), 192194

dynamic serving. See also RWD, adaptive design, 467468

dynamic websites

changing images based on user interaction, 498500

HTML5 applications, developing, 501

JavaScript in HTML, 488490

scripting, client-side scripting, 488

scripting, displaying random content, 491495

scripting, DOM, 495, 496498

scripting, hiding scripts, 490

scripting, placement of scripts, 489

scripting, server-side scripting, 488

scripting, types of, 487488

scripting, unobtrusive JavaScript, 496498

graceful degradation, theory of, 428, 431

navigating, JavaScript and, 8485

progressive enhancement

adjusting the look of content with CSS, 433434

benefits of, 435

content layer, editing, 432433

defined, 431

JavaScript interactivity, 434

separating content from presentation/functionality, 432

RWD

alternatives to, 466

CSS, validating, 438439

defined, 427428

difficulties with, 466467

history of, 428

HTML, validating, 438439

JavaScript, validating, 438439

mobile design, importance in design, 430431, 443444

mobile design, Mobile First design, 451454

mobile design, mobile interfaces, 445451

mobile design, Mobile Only design, 454455

mobile design, responsive images, 461464

mobile design, responsive layouts, 464466

mobile design, responsive tables, 455461

mobile design, separate URL/domains, 468

need for, 429430

writing HTML, 435

writing HTML, basic attributes, 437438

writing HTML, tags every web page should contain, 435436

writing HTML, web content tags, 436437

search engine optimization, 738

creating interesting content, 738739

mobile devices, 739740

navigation, 739

single-page interfaces, 730731

theory of graceful degradation, 428, 431

well-formed HTML, 432433

well-formed XHTML, 433

while loops (JavaScript), 606607

width/height,

fixed/liquid hybrid web page layouts, setting in, 328329

images, specifying in, 218219

web page elements, changing in, 272274

window objects (DOM), 524, 531, 638639

properties of, 639

windows

creating, 640

dialog boxes, displaying, 648649

moving, 643645

opening/closing, 640643

timeouts, 645647

windows (browsers)

creating, 640

dialog boxes, displaying, 648649

moving, 643645

opening/closing, 640643

timeouts, 645647

World Wide Web, history of, 2

wrapping, rows (tables), 151

X-Y-Z

XHTML, well-formed XHTML, 433

YUI library, 661

z-index property, ordering elements in layout, 281284

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
184.72.135.210