defining media type styles, 473–474
.. (double dot), directories, 169
/ (forward slash), HTML directories, 168
< > tags. See individual entries indexed according to tag names
; (semicolons)
JavaScript
best practices, 516
statements, 508
2D transformations, 383
multiple transformations, 391–392
rotating elements, 384
slanting (skewing) elements, 388–391
absolute links, 169
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
elements in web pages, 261–262
images in web pages, 219
horizontal image alignment, 219–221
vertical image alignment, 221–223
text, 136
attributes, HTML tags, 136
CSS, 67
alpha transparency (RGB color values), 198
Amazon.com, 735
analogous color schemes, 193
anchor HTML tags, linking
to external web content, 178–179
identifying anchor locations within web pages, 170–171
within web pages, 170
anchor objects (DOM), 528
Angular frameworks (JavaScript), 690
naming, 410
pausing, 410
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, 564–565, 567–569
sorting, 567
<article> HTML tags, 37, 40, 45, 437
<aside> HTML tags, 37, 47–48, 437
attributes, HTML tags, 136, 168
audio, playing in web pages, 240–241, 242
<audio> HTML tags, 436
Backbone.js frameworks (JavaScript), 690
backgrounds (cells)
colors, 157
images, 157
backgrounds (lists), color and, 296
backgrounds (web pages), 353–354
color, 194
hexadecimal color codes, 194, 195, 196–197
RGB color values, 194, 197–198
gradients, 365
linear gradients, 366
in multiple backgrounds, 355–359
positioning images, 361
sizing, 360
tiled background images, creating, 212–214
bad website examples, 195
BAWSI.org website, 737
block-level elements, aligning text in, 136–139
blogs, publishing web content to, 18
body (tables), wrapping, 151
Boolean (logical) operators (JavaScript), 557, 597–598
Bootstrap framework, 745
borders (tables)
creating, 149
spacing, 157
borders (web pages), 354
color, changing with CSS, 199–201
images as, 373
clipping border images, 373–375
extending border images beyond border edge, 376
multiple borders, 355
box-sizing property, changing, 275–276
navigation lists, horizontal navigation, 310–314
navigation lists, multilevel vertical navigation, 305–310
navigation lists, primary navigation, 300
navigation lists, single-level vertical navigation, 303–305
navigation lists, vertical navigation, 300–303
placing list item indicators, 294–296
outline properties, 275
positioning elements in layout, 277–281
relative positioning, 276
web page elements, changing height/width, 272–274
box-sizing property (CSS), changing, 275–276
breakpoints
best practices, 483
defining with media queries, 477–479
large screen-specific styles, adding with media queries, 482–483
optimal breakpoints, 483
browsers
dishonest browsers, JavaScript and, 668–669
distributing, 18
history objects (DOM), 528–530
JavaScript
attaching events across browsers, 660–661
avoiding browser specificity, 661
browser quirks, 671
cross-browser scripting, 669–672
displaying browser information, 667–668
feature sensing, 670
non-JavaScript-enabled browsers, 671–672
<noscript> tags, 672
reading browser information, 666–667
non-JavaScript-enabled browsers, 671–672
opening links in new browser windows, 180–181
prefixes, 434
search engines, 672
web content, displaying, 141
window objects (DOM), 524, 531
windows
creating, 640
dialog boxes, displaying, 648–649
built-in objects (JavaScript), 510
<button> element, web forms, 718–719
buttons
radio buttons, web forms, 708–709
drawing
rectangles/squares, 411
cascading, 434
case sensitivity (text)
color names, 195
JavaScript, 514
web servers, 170
cells (tables)
backgrounds
colors, 157
images, 157
boldface text, 157
creating, 147
resizing in responsive tables, 456–457
spanning, 156
styling, 147
centering web page elements, 262–263
character entities. See also special characters, formatting, 123–125
check boxes, web forms, 706–708
child (nested) tags, HTML, 142
children (DOM objects), 533
Chrome (Google), Developer Tools, 101, 114–118
circles, drawing on canvas, 411–413
clarity, indenting code for, 742–743
class attributes, HTML tags, 136
click events, event handlers (JavaScript) and, 623–627, 631–638
client-side scripting, 488
<closing> HTML tags, 29
closing/opening, browser windows, 640–643
code (maintainable), writing
documenting code with comments, 740–742
indenting for clarity, 742–743
codecs (video), 237
collapsing borders (tables), 149–150
color
analogous color schemes, 193
backgrounds (lists), 296
backgrounds (web pages), 194
changing color with CSS, 199–201
hexadecimal color codes, 194, 195, 196–197
RGB color values, 194, 197–198
borders, changing color with CSS, 199–201
choosing (best practices), 192–194
color wheels, 193
complementary color schemes, 194
font color, changing, 129, 130, 131–133
graphics software, choosing, 201–202
gray, spelling in CSS, 194
hexadecimal color codes, 194, 195, 196–197
highlighted text, 438
monochromatic color schemes, 194
names, case sensitivity, 195
RGB color values, 195, 197–198
screen resolution, 210
text, changing color with CSS, 199–201
text links, changing color, 195
triadic color schemes, 194
websites, bad website examples, 195
columns
tables, rearranging in responsive tables, 457–460
comma-separated lists, media query expressions, 476
comments (JavaScript), 515–516, 740–742
compiled scripting languages, 80
complementary color schemes, 194
compression (JPEG), 209
conditional expressions (JavaScript), 596–597, 599–600
conditional operators (JavaScript), 597
conditional statements (JavaScript), 511
content/presentation/behavior, separating (JavaScript), 657
continuing loops (JavaScript), 609
converting
between data types (JavaScript), 557–558
date formats with Date object (JavaScript), 590
copyrights, images and, 202
CSS (Cascading Style Sheets), 55, 57, 62
aligning web page elements, 261–262
naming, 410
pausing, 410
backgrounds (web pages), changing color, 199–201
selectors, 60
borders, changing color, 199–201
box-sizing property, changing, 275–276
changing web page element height/width, 272–274
outline properties, 275
positioning elements in layout, 276–281
breakpoints
best practices, 483
defining with media queries, 477–479
large screen-specific styles, adding with media queries, 482–483
optimal breakpoints, 483
browser prefixes, 434
drawing lines/polygons, 414–416
drawing rectangles/squares, 411
cascading, 434
centering web page elements, 262–263
color
backgrounds (web pages), changing, 199–201
gray, spelling, 194
creating, 63
debugging with Developer Tools, 107–112
defined, 56
display: table; property, 335–338
external style sheets, 56
float property and web page elements, 263–266
HTML documents, linking to, 61–62
internal style sheets, 56, 71–73
margins, adding to web page elements, 249–257
media queries
adding, 473
baseline styles, defining, 479–480
breakpoints, best practices, 483
breakpoints, defined, 471, 477
breakpoints, defining with media queries, 477–479
breakpoints, large screen-specific styles adding with media queries, 482–483
breakpoints, optimal breakpoints, 483
defining media type styles, 473–474
handheld media type, 472
large screen-specific styles, adding, 482–483
requesting multiple CSS documents, 474
retina devices and, 484
screen media type, 472
small screen-specific styles, adding, 481–482
ordering elements in layout, 281–284
outlines, 378
padding, adding to web page elements, 257–261
positioning elements in layout, 63–65
relative positioning, 276
requesting multiple CSS documents with media queries, 474
selectors, 60
style primer, 63
formatting properties, 63, 65–68
tables
accessibility, 158
cells, background colors, 157
cells, background images, 157
cells, boldface text, 157
cells, spanning, 156
cells, styling, 147
mixing presentation/content, 158
mobile devices, 158
pre-planning, 156
unnecessary redesigns, 158
text
aligning, 67
indenting, 67
indenting text, 67
transformations
2D transformations, 383
2D transformations, moving elements, 386–388
2D transformations, multiple transformations, 391–392
2D transformations, rotating elements, 384
2D transformations, scaling elements, 385–386
2D transformations, slanting (skewing) elements, 388–391
triggering with JavaScript, 397–398
style sheets, 73
z-index property, ordering elements in layout, 281–284
CSS box model, 318
navigation lists, horizontal navigation, 310–314
navigation lists, multilevel vertical navigation, 305–310
navigation lists, primary navigation, 300
navigation lists, single-level vertical navigation, 303–305
navigation lists, vertical navigation, 300–303
placing list item indicators, 294–296
CSS Flexible Box Layout module, 339–345
CSS Grid Layout module, 345–348
custom JavaScript objects, 510
Booleans, 557
null data types, 557
number data types, 556
strings, 557
calculating length of, 560–561
converting case of, 561
getting single characters, 563
substrings, 562
substrings, getting single characters, 563
substrings, using parts of strings, 562–563
using parts of strings, 562–563
Date object (JavaScript), 587–588
converting date formats, 590
creating, 588
date values
setting, 588
time zones, 589
Debug panel (Firefox), 114–118
debugging
CSS with Developer Tools, 107–112
HTML with Developer Tools, 102–107
JavaScript with Developer Tools, 112–114
definition HTML lists, 139, 141, 290
design patterns, JavaScript, 664–665
Developer Tools
dialog boxes, displaying, 648–649
directories, 168
absolute links, 169
double dot (..), 169
forward slash (/), 168
levels of, 168
relative-root addresses, 168
site architectures, sample build, 170
subdirectories, 168
dishonest browsers, JavaScript and, 668–669
display: table; property (CSS), 335–338
displaying
web content, 141
<div> elements, changing appearance of with click events, 631–638
<div> HTML tags, 136, 137, 436
<!doctype> HTML tags, 435
document objects (DOM), 525, 531–532
getting information about a document, 525–526
writing text in a document, 527
documenting JavaScript code, 662–663, 740–742
Dojo, 686
DOM (Document Object Model), 495
children, 533
DOM objects (JavaScript), 510
event handlers, mouse events, 623–627
basic properties, 534
document methods, 535
relationship properties, 534–535
objects
anchor objects, 528
children, 533
document objects (DOM), 525–527, 531–532
events and, 618
methods of, 524
notation, 524
parents, 533
properties of, 524
siblings, 533
parents, 533
positionable elements (layers), 536, 537–541
siblings, 533
text
modifying in web pages, 543–545
unobtrusive JavaScript, 496–498
properties of, 639
windows, creating, 640
windows, displaying dialog boxes, 648–649
windows, opening/closing, 640–643
domains, mobile devices and RWD, 468
double dot (..), directories, 169
do.while loops (JavaScript), 607
download speeds, mobile interfaces and RWD, 449–450
downs/ups, mouse events, 623–627
drawing (canvas)
rectangles/squares, 411
dynamic serving. See also RWD, adaptive design, 467–468
dynamic websites
HTML5 applications, developing, 501
images, changing based on user interaction, 498–500
scripting
client-side scripting, 488
displaying random content, 491–495
hiding scripts, 490
placement of scripts, 489
server-side scripting, 488
unobtrusive JavaScript, 496
unobtrusive JavaScript and DOM, 496–498
email addresses, linking web content, 179–180
Ember frameworks (JavaScript), 691
<empty> HTML tags, 29
epochs, 588
error handling, JavaScript, 91–92, 662
escaping loops (JavaScript), 608–609
event handlers
anonymous functions, 630
attaching events across browsers, 660–661
click events, 623–627, 631–638
multiple event handlers, supporting, 620–621
objects and events, 618
web forms, text fields/text areas, 713–714
event object (JavaScript), 621–623
events (JavaScript), 84
attaching events across browsers, 660–661
expressions (JavaScript), 555
external style sheets, 56
feature sensing, JavaScript cross-browser scripting, 670
finding, substrings (JavaScript), 563–564
Firefox
Developer Tools, 100
JavaScript, error handling, 92
fixed web page layouts, 319–322
fixed/liquid hybrid web page layouts
defining two columns in, 326–328
Flash, mobile interfaces and RWD, 445
Flexible Box Layout module (CSS), 339–345
flexible-width images, responsive images, mobile design, 461–462
float property, web page elements and, 263–266
flow control (JavaScript)
conditional expressions, 596–597, 599–600
conditional operators, 597
conditional expressions, 596–597
conditional operators, 597
logical (Boolean) operators, 597–598
if.else statements
testing multiple conditions, 600
testing multiple conditions, HTML file, 600–601
testing multiple conditions, JavaScript file, 601–602
logical (Boolean) operators, 597–598
loops
continuing, 609
do.while loops, 607
infinite loops, 608
looping through object properties, 609–612
shorthand conditional expressions, 599–600
switch statements, multiple conditions and, 602–604
flowing text in web pages, 284–285
fonts
color, changing, 129, 130, 131–133
CSS
font families (typefaces), changing, 130, 131–133
mobile interfaces and RWD, 447–449
sizing, 60, 61, 129, 130, 131–133
typefaces (font families), changing, 130, 131–133
<footer> HTML tags, 37, 39, 48–49, 437
footers (tables), wrapping, 151
formatting properties (CSS), 63, 65–68
formatting text
aligning text, 136
attributes, HTML tags, 136
attributes, HTML tags, 136, 168
fonts
changing color, 129, 130, 131–133
paragraph breaks, 136
sample text, 122
simple web pages, building with HTML, 33
subscript text, 127
superscript text, 127
typefaces (font families), changing, 130, 131–133
accessing elements with JavaScript, 720–721
form-processing scripts, 703
grouping elements, 705
hidden data, 705
naming data, 703
<output> element, 719
submitting data, 718
text fields/text areas, 713–715
forward slash (/), HTML directories, 168
Foundation framework, 745
frameworks
Bootstrap framework, 745
Foundation framework, 745
HTML5 Boilerplate framework, 745
AJAX (remote scripting), 690
Angular frameworks, 690
Backbone.js frameworks, 690
Ember frameworks, 691
Knockout frameworks, 691
React frameworks, 691
FTP clients, 10
function calls (JavaScript), 508–509
functions (JavaScript), 570
naming, 515
GIMP graphics software, 201–202
JPEG compression, 209
resizing images, 206
global variables (JavaScript), 553
Gmail, 673
Google Chrome, Developer Tools, 101, 114–118
Google Developers, 665
Google Docs, version control, 743
graceful degradation, theory of, 428, 431, 658
gradients, backgrounds (web pages), 365
linear gradients, 366
graphics software, 201. See also images, Adobe Photoshop
JPEG compression, 209
resizing images, 206
gray (color), spelling in CSS, 194
Grid Layout module (CSS), 345–348
grouping web form elements, 705
<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, 39–43, 437
headers (tables), wrapping, 151
headings, simple web pages, building with HTML, 33–36
height/width
fixed/liquid hybrid web page layouts, setting in, 329–335
images, specifying in, 218–219
web page elements, changing in, 272–274
“Hello World!” sample file, creating, 9–10
helper applications, defined, 234
hexadecimal color codes, 194, 195, 196–197
hiding
content in responsive tables, 460–461
JavaScript scripts, 490
web form data, 705
highlighted text, 438
history objects (DOM), 528–530
horizontal image alignment, 219–221
horizontal navigation in navigation lists, creating, 310–314
HTML (Hypertext Markup Language)
backgrounds (web pages), changing color, 199–201
borders, changing color, 199–201
<button> element, web forms, 718–719
color
backgrounds (web pages), changing, 199–201
debugging with Developer Tools, 102–107
directories, 168
absolute links, 169
double dot (..), 169
forward slash (/), 168
relative-root addresses, 168
site architectures, sample build, 170
subdirectories, 168
formatting text
attributes, HTML tags, 136, 168
font color, changing, 129, 130, 131–133
sample text, formatting example, 122
subscript text, 127
superscript text, 127
typefaces (font families), changing, 130, 131–133
accessing elements with JavaScript, 720–721
form-processing scripts, 703
grouping elements, 705
hidden data, 705
naming data, 703
<output> element, 719
submitting data, 718
text fields/text areas, 713–715
history of, 2
if.else statements (JavaScript), testing multiple conditions, 600–601
images
creating HTML for image maps, 230–233
placement in web pages, 214–217
JavaScript and, 81–83, 488–490
linking
to external web content, 178–179
identifying anchor locations within web pages, 170–171
opening links in new browser windows, 180–181
within web pages, 170
definition HTML lists, 139, 141, 290
nested HTML lists, 142–146, 290
unordered HTML lists, 139, 290
<output> element, web forms, 719
pseudo-classes, 182
RWD, writing for, 435
tags every web page should contain, 435–436
simple web pages, building, 25–26
formatting text, 33
saving HTML files, 33
text editors, choosing, 25
skeleton pages/templates, 30
subdirectories, 168
subscript text, 127
superscript text, 127
tables
accessibility, 158
body, wrapping, 151
borders, creating, 149
borders, spacing, 157
cells, background colors, 157
cells, background images, 157
cells, boldface text, 157
cells, creating, 147
cells, spanning, 156
cells, styling, 147
footers, wrapping, 151
headers, wrapping, 151
mixing presentation/content, 158
mobile devices, 158
pre-planning, 156
rows, wrapping, 151
unnecessary redesigns, 158
<article> HTML tags, 37, 40, 45, 437
<aside> HTML tags, 37, 47–48, 437
<audio> HTML tags, 436
<closing> HTML tags, 29
<div> HTML tags, 136, 137, 436
<!doctype> HTML tags, 435
<empty> HTML tags, 29
<footer> HTML tags, 37, 39, 48–49, 437
<h1> HTML tags, 436
<h2> HTML tags, 436
<h3> HTML tags, 436
<head> HTML tags, 30, 435, 489, 514
<header> HTML tags, 37, 39–43, 437
<img> HTML tag, 215–218, 221, 222, 436, 462–463
<link> HTML tag, 473
<map> HTML tag, 233
<meta charest> HTML tags, 436
<meta> HTML tags, 29
<nav> HTML tags, 37, 40, 45–46, 437
nested (child) tags, HTML, 142
<opening> HTML tags, 29
<p> HTML tags, 30, 32, 136, 436, 490
pseudo-classes, 182
<script> HTML tags, 489, 490, 513–514
<section> HTML tags, 37, 39, 44–45, 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
<video> HTML tags, 237, 238–239, 436
viewing in other web pages, 36
templates/skeleton pages, 30
valid HTML, 432
validating, 97–98, 106–107, 109–111, 438–439
<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, 170–171
linking between web content, 174–177
linking to anchor locations, 171–174
linking to email addresses, 179–180
linking to external web content, 178–179
linking to non-HTML files, 177–178
linking within web pages, 170
color, changing, 195
images, turning into links, 223–226
images and, 187
multimedia files, 233–234, 235–236
opening in new browser windows, 180–181
tappable links, mobile interfaces and RWD, 449
hypertext, defined, 2
ID attributes, HTML tags, 136
if statements (JavaScript), 595–596
conditional expressions, 596–597
conditional operators, 597
logical (Boolean) operators, 597–598
if.else statements (JavaScript), testing multiple conditions, 600
image maps, list items and CSS box model, creating with, 296–299
images
aligning in web pages, 219
horizontal image alignment, 219–221
vertical image alignment, 221–223
backgrounds (web pages)
positioning images in, 361
backgrounds (web pages), adding to, 226–227
borders (web pages), 373
clipping border images, 373–375
extending border images beyond border edge, 376
fitting images to borders, 376–377
changing based on user interaction, 498–500
color
copyrights, 202
flexible-width images, responsive images, mobile design, 461–462
graphics software
Adobe Photoshop, 201
height/width, specifying, 218–219
hyperlinks and, 187
creating, 230
HTML for image maps, creating, 230–233
mapping regions within images, 229–230
JPEG compression, 209
links, turning images into, 223–226
multiple images in backgrounds (web pages), 355–359
ownership of, 202
placement in web pages, 214–217
positioning in web page backgrounds, 361
responsive images, mobile design, 461
flexible-width images, 461–462
<picture> element, 463
using different images, 463–464
rights management, 202
screen resolution, 210
tiled background images, creating, 212–214
height/width, specifying, 218–219
JPEG compression, 209
placement in web pages, 214–217
reducing/removing color, 211–212
tiled background images, creating, 212–214
turning images into links, 223–226
web pages, aligning in, 219
horizontal image alignment, 219–221
vertical image alignment, 221–223
<img> HTML tags, 215–218, 221, 222, 436
<picture> element, 463
indenting
text, CSS, 67
index pages, file management, 16–17
infinite loops (JavaScript), 608
input controls, web forms, 706–712
inspector (Developer Tools), debugging, 99–101
interesting web content, creating, 738–739
interfaces (mobile), RWD, 445
design elements, fitting, 447
Flash and, 445
font sizes, legibility, 447–449
layouts, simplifying, 449
mobile web pages, testing, 450–451
navigation, simplifying, 449
tappable links, 449
viewports, configuring, 445–446
internal style sheets, 56, 71–73
Internet Explorer, Developer Tools, 100
interpreted scripting languages, 80
abstraction, 665
accessibility, 664
AJAX (remote scripting), 690
Angular frameworks, 690
arrays, 551
accessing elements of, 565
length of, 565
numeric arrays, sorting, 567–569
string arrays, sorting, 567
string arrays, splitting, 566–567
Backbone.js frameworks, 690
best practices, 516–517, 655–656
accessibility, 664
avoiding browser specificity, 661
avoiding errors, 673
browser quirks, 671
content/presentation/behavior, separating, 657
cross-browser scripting, 669–672
displaying browser information, 667–668
error handling, 662
feature sensing, 670
graceful degradation, theory of, 658
non-JavaScript-enabled browsers, 671–672
<noscript> tags, 672
progressive enhancement, 658–659
reading browser information, 666–667
unobtrusive scripting, 674–677
web page loading speeds, 657–658
browsers
attaching events across browsers, 660–661
avoiding browser specificity, 661
cross-browser scripting, 669–672
displaying browser information, 667–668
feature sensing, 670
non-JavaScript-enabled browsers, 671–672
<noscript> tags, 672
quirks, 671
reading browser information, 666–667
case sensitivity, 514
conditional expressions, 596–597, 599–600
conditional operators, 597
conditional statements, 511
content/presentation/behavior, separating, 657
Booleans, 557
null data types, 557
number data types, 556
strings, 557
strings, assigning values to, 559–560
strings, calculating length of, 560–561
strings, converting case of, 561
strings, creating string objects, 559
strings, finding substrings, 563–564
strings, getting single characters, 563
strings, string objects, 558
strings, using parts of strings, 562–563
debugging with Developer Tools, 112–114
displaying random content, 491–495
Dojo, 686
DOM, 495
adding text to web pages, 545–546
controlling positionable elements (layers), 537–541
event handlers, mouse events, 623–627
modifying text in web pages, 543–545
objects, events and, 618
unobtrusive JavaScript, 496–498
window objects, creating windows, 640
window objects, displaying dialog boxes, 648–649
window objects, moving windows, 643–645
window objects, opening/closing windows, 640–643
window objects, properties of, 639
window objects, timeouts, 645–647
Ember frameworks, 691
epochs, 588
anonymous functions, 630
attaching events across browsers, 660–661
click events, changing appearance of <div> elements, 631–638
defining with JavaScript, 619–620
multiple event handlers, supporting, 620–621
objects and events, 618
web forms, text fields/text areas, 713–714
events, 84
attaching events across browsers, 660–661
expressions, 555
features of, 81
flow control
conditional expressions, 596–597, 599–600
conditional operators, 597
shorthand conditional expressions, 599–600
form validation, 85
AJAX (remote scripting), 690
Angular frameworks, 690
Backbone.js frameworks, 690
Ember frameworks, 691
Knockout frameworks, 691
React frameworks, 691
functions, 570
naming, 515
graceful degradation, theory of, 658
hiding scripts, 490
history of, 81
HTML5 applications, developing, 501
conditional expressions, 596–597
conditional operators, 597
logical (Boolean) operators, 597–598
if.else statements, testing multiple conditions, 600
Knockout frameworks, 691
libraries (third-party), 681–683
Dojo, 686
MooTools, 686
script.aculo.us, 685–686, 687, 687–689
loading speeds (web pages), 657–658
logical (Boolean) operators, 557, 597–598
loops, 511
continuing, 609
do.while loops, 607
infinite loops, 608
looping through object properties, 609–612
methods, text fields/text areas, 713
MooTools, 686
<noscript> tags, 672
null data types, 557
number data types, 556
built-in objects, 510, 582–583
creating, 576
custom objects, 510
Date object, converting date formats, 590
Date object, creating, 588
Date object, reading date values, 588–589
Date object, setting date values, 588
Date object, time zones, 589
DOM objects, 510
looping through object properties, 609–612
Math object, 583
Math object, generating random numbers, 584
Math object, rounding, 584
Math object, truncating, 584
properties, 576
simplifying scripting, 577
operators, 555
precedence, 556
progressive enhancement, 434, 658–659
React frameworks, 691
remote scripting (AJAX), 85
reserved words, 515
RWD, writing for, validating JavaScript, 438–439
script.aculo.us, 685–686, 687, 687–689
semicolons (;), 516
shorthand conditional expressions, 599–600
spacing, 515
special effects, 85
calculating length of, 560–561
converting case of, 561
getting single characters, 563
string objects, 558
string objects, creating, 559
using parts of strings, 562–563
substrings, 562
getting single characters, 563
using parts of strings, 562–563
switch statements, multiple conditions and, 602–604
tasks, combining with functions, 508–509
testing scripts, 89
third-party libraries, 681–683
Dojo, 686
MooTools, 686
script.aculo.us, 685–686, 687, 687–689
transitions, triggering, 397–398
unobtrusive scripting, 496–498, 674–677
global variables, 553
local variables, 553
naming, 552
semicolons (;) and, 63
web forms
web pages
adding scripts to, 88
properties of, 639
windows, creating, 640
windows, displaying dialog boxes, 648–649
windows, opening/closing, 640–643
JPEG compression, 209
JSON (JavaScript Object Notation), 517–518
keyframes (animations), defining, 402–404
Knockout frameworks (JavaScript), 691
Koch, Peter-Paul, 671
labeling web form data, 703–704
large screen-specific styles, adding with media queries, 482–483
large web pages
layers (positionable elements), DOM, 536, 537–541
layout properties (CSS), 63–65
layouts
CSS display: table; property, 335–338
CSS Flexible Box Layout module, 339–345
CSS Grid Layout module, 345–348
examples of, 318
fixed/liquid hybrid web page layouts
defining two columns in, 326–328
progressive enhancement, 318
responsive layouts, mobile design, 464–466
separating structure from design/interactivity, 318
libraries (third-party), JavaScript, 681–683
Dojo, 686
MooTools, 686
script.aculo.us, 685–686, 687, 687–689
line breaks, simple web pages, building with HTML, 31–33
linear gradients, backgrounds (web pages), 366
lines/polygons, drawing on canvas, 414–416
<link> HTML tag, 473
links
absolute links, 169
anchor HTML tags
identifying anchor locations within web pages, 170–171
linking between web content, 174–177
linking to anchor locations, 171–174
linking to email addresses, 179–180
linking to external web content, 178–179
linking to non-HTML files, 177–178
linking within web pages, 170
color, changing, 195
images, turning into links, 223–226
images and, 187
multimedia files, 233–234, 235–236
opening in new browser windows, 180–181
tappable links, mobile interfaces and RWD, 449
liquid web page layouts, 322–324
liquid/fixed hybrid web page layouts
defining two columns in, 326–328
lists
comma-separated lists, media query expressions, 476
pull-down pick lists, web forms, 710–712
selection lists, web forms, 710–712
lists (CSS box model), 290–291
background colors, 296
horizontal navigation, creating, 310–314
multilevel navigation, styling, 305–310
primary navigation, 300
single-level navigation, styling, 303–305
vertical navigation, creating, 300–303
placing list item indicators, 294–296
definition HTML lists, 139, 141, 290
nested lists, 290
unordered HTML lists, 139, 290
load/unload events, event handlers (JavaScript) and, 630–631
loading speeds (web pages), 657–658
local variables (JavaScript), 553
location objects (DOM), 530–531
logical (Boolean) operators (JavaScript), 557, 597–598
loops (JavaScript), 511
continuing, 609
do.while loops, 607
infinite loops, 608
looping through object properties, 609–612
maintainable code, writing, 740
documenting code with comments, 740–742
indenting for clarity, 742–743
<map> HTML tag, 233
maps
creating, 230
HTML for image maps, creating, 230–233
mapping regions within images, 229–230
web pages, adding to, backgrounds, 226–227
margins
adding to web page elements, 249–257
lists, styling with CSS box model, 293–294
Math object (JavaScript), 583
generating random numbers, 584
rounding, 584
truncating, 584
media queries
adding, 473
baseline styles, defining, 479–480
breakpoints
best practices, 483
defining with media queries, 477–479
large screen-specific styles, adding with media queries, 482–483
optimal breakpoints, 483
defining media type styles, 473–474
handheld media type, 472
large screen-specific styles, adding, 482–483
requesting multiple CSS documents, 474
retina devices and, 484
screen media type, 472
small screen-specific styles, adding, 481–482
<meta> HTML tags, 29
<meta charest> HTML tags, 436
methods (JavaScript), text fields/text areas, 713
MLB section (ESPN.com), 733–734
mobile devices
adaptive design. See also RWD, dynamic serving, 467
dynamic serving. See also RWD, adaptive design, 467–468
RWD
alternatives to, 466
importance of RWD in design, 430–431, 443–444
separate URL/domains, 468
tables, 158
web page layouts, 319
mobile interfaces, RWD, 445
design elements, fitting, 447
Flash and, 445
font sizes, legibility, 447–449
layouts, simplifying, 449
mobile web pages, testing, 450–451
navigation, simplifying, 449
tappable links, 449
viewports, configuring, 445–446
mobile web pages, testing, mobile interfaces and RWD, 450–451
modifying, JavaScript scripts, 89–91
monochromatic color schemes, 194
MooTools, 686
mouse events, event handlers (JavaScript) and, 623
click events, changing appearance of <div> elements, 631–638
mouseover/mouseout, 623
moving
elements (2D transformations), 386–388
multilevel vertical navigation, styling, 305–310
multimedia files
best practices, 242
creating, 234
defined, 192
embedding into web pages, 237
playing audio in web pages, 240–241
playing video in web pages, 237–239
QuickTime, support for, 236
multiple 2D transformations, 391–392
multiple backgrounds in web pages, 355–359
multiple borders in web pages, 355
multiple images in backgrounds (web pages), 355–359
MVC pattern, JavaScript frameworks, 689–690
naming
animations, 410
HTML form data, 703
variables (JavaScript), 552
web form data, 703
<nav> HTML tags, 37, 40, 45–46, 437
navigating
website optimization, 739
navigation, mobile interfaces and RWD, 449
horizontal navigation, creating, 310–314
primary navigation, 300
vertical navigation
multilevel navigation, styling, 305–310
single-level navigation, styling, 303–305
nested (child) tags, HTML, 142
NFL section (ESPN.com), 733–734
basic properties, 534
document methods, 535
relationship properties, 534–535
non-JavaScript-enabled browsers, 671–672
<noscript> tags, 672
not operators, @media rules, 476–477
null data types (JavaScript), 557
number data types (JavaScript), 556
numeric arrays (JavaScript), 564–565, 567–569
built-in objects, 510, 582–583
creating, 576
custom objects, 510
DOM objects, 510
looping through object properties, 609–612
Math object, 583
generating random numbers, 584
rounding, 584
truncating, 584
properties, 576
simplifying scripting, 577
<opening> HTML tags, 29
opening/closing, browser windows, 640–643
operators (JavaScript), 555
precedence, 556
optionality of JavaScript, 672–673
organizing web pages
outline properties (CSS box model), 275
outlines (web pages), 378
<output> element, web forms, 719
padding
adding to web page elements, 257–261
lists, styling with CSS box model, 292–294, 295
page layouts
CSS display: table; property, 335–338
CSS Flexible Box Layout module, 339–345
CSS Grid Layout module, 345–348
examples of, 318
fixed/liquid hybrid web page layouts
defining two columns in, 326–328
mobile devices and, 319
progressive enhancement, 318
separating structure from design/interactivity, 318
paragraph breaks, simple web pages, building with HTML, 31–33, 136
parents (DOM objects), 533
pausing animations, 410
Peet’s Coffee website, 736–737
photos
backgrounds (web pages), adding to, height/width, specifying, 226–227
screen resolution, 210
height/width, specifying, 218–219
JPEG compression, 209
placement in web pages, 214–217
reducing/removing color, 211–212
tiled background images, creating, 212–214
turning images into links, 223–226
web pages, aligning in, 219
horizontal image alignment, 219–221
vertical image alignment, 221–223
Photoshop (Adobe), 201
<picture> element, responsive images, mobile design, 463
plugins, defined, 234
polygons/lines, drawing on canvas, 414–416
pop-up windows, opening links in, 180–181
positioning elements
controlling positioning with JavaScript, 537–541
DOM, 536
relative positioning, 276
precedence, JavaScript operators, 556
primary navigation (navigation lists), 300
print media type (media queries), 472–473
prioritizing JavaScript scripts, 513–514
progressive enhancement
benefits of, 435
content
adjusting the look of with CSS, 433–434
separating from presentation/functionality, 432
content layer, editing, 432–433
defined, 431
JavaScript interactivity, 434, 658–659
web page design, 318
pseudo-classes, HTML tags, 182
publishing web content
blogs, 18
pull-down pick lists, web forms, 710–712
QuickTime, support for, 236
quirks (browsers), 671
radio buttons, web forms, 708–709
React frameworks (JavaScript), 691
rectangles/squares, drawing on canvas, 411
reducing/removing color in images, 211–212
relative positioning, 276
remote scripting (AJAX), 85
repeating, animations, 408–410
reserved words (JavaScript), reserved words, 515
resizing
cells in responsive tables, 456–457
resolution
screen, 210
responsive images, mobile design, 461
flexible-width images, 461–462
<picture> element, 463
using different images, 463–464
responsive layouts, mobile design, 464–466
responsive tables, mobile design, 455
rearranging rows/columns, 457–460
retina devices and media queries, 484
reusing JavaScript code, 665–666
RGB color values, 195, 197–198
rights management, images and, 202
rotating elements (2D transformations), 384
rows (tables)
rearranging in responsive tables, 457–460
wrapping, 151
RWD (Responsive Web Design). See also adaptive design, dynamic serving
alternatives to, 466
history of, 428
HTML, writing, 435
tags every web page should contain, 435–436
JavaScript, validating, 438–439
mobile design
importance of RWD in design, 430–431, 443–444
separate URL/domains, 468
mobile interfaces, 445
design elements, fitting, 447
Flash and, 445
font sizes, legibility, 447–449
layouts, simplifying, 449
mobile web pages, testing, 450–451
navigation, simplifying, 449
tappable links, 449
viewports, configuring, 445–446
sample text, formatting example, 122
saving, HTML files, 33
scaling elements (2D transformations), 385–386
screen media type (media queries), 472
screen resolution, 210
<script> HTML tags, 489, 490, 513–514
script.aculo.us, 685–686, 687, 687–689
scripting, 80
client-side scripting, 488
compiled scripting languages, 80
hiding scripts, 490
interpreted scripting languages, 80
JavaScript, 80
adding scripts to, 88
events, 84
features of, 81
form validation, 85
history of, 81
objects, simplifying scripting, 577
remote scripting (AJAX), 85
special effects, 85
testing scripts, 89
variables, semicolons (;) and, 63
variables, storing data in, 86–87
placement of scripts, 489
server-side scripting, 488
scrolling in backgrounds (web pages), 361–364
search engines, website optimization, 672, 738
creating interesting content, 738–739
navigation, 739
<section> HTML tags, 37, 39, 44–45, 177, 437
selection lists, web forms, 710–712
selectors (CSS), 60
semantic elements
progressive enhancement, 433
simple web pages, building with HTML, 36–42
semicolons (;)
JavaScript
best practices, 516
statements, 508
servers
case sensitivity (text) and, 170
scripting, 488
shorthand conditional expressions (JavaScript), 599–600
siblings (DOM objects), 533
simple web pages
formatting text, 33
saving HTML files, 33
text editors, choosing, 25
single-level vertical navigation, styling, 303–305
single-page interfaces, 730–731
site architectures, sample build, 170
sizes attribute, responsive images, mobile design, 462–463
sizing
backgrounds (web pages), 360
skeleton pages/templates, HTML, 30
skewing (slanting) elements (2D transformations), 388–391
small screen-specific styles, adding with media queries, 481–482
sorting
numeric arrays (JavaScript), 567–569
string arrays (JavaScript), 567
Sources panel (Developer Tools), 114–118
spacing in JavaScript, 515
<span> HTML tags, 436
spanning, cells (tables), 156
special characters, formatting. See also character entities, 122–125
splitting, string arrays (JavaScript), 566–567
squares/rectangles, drawing on canvas, 411
srcset element, responsive images, mobile design, 462–463
Stephenson, Sam, 685
sticky web pages, 729
storing web content
absolute links, 169
attributes, HTML tags, 168
directories, 168
relative-root addresses, 168
string arrays (JavaScript), 565–566
sorting, 567
strings (JavaScript), 551, 557
calculating length of, 560–561
converting case of, 561
getting single characters, 563
substrings, 562
getting single characters, 563
using parts of strings, 562–563
using parts of strings, 562–563
<strong> HTML tags, 126, 127, 436
style attributes, HTML tags, 136
style rules (CSS), 56–57, 60–61
style sheets. See CSS
<sub> HTML tags, 127
subdirectories, 168
submitting web form data, 718
subscript text, 127
substrings (JavaScript), 562
single characters, getting, 563
using parts of strings, 562–563
<sup> HTML tags, 127
superscript text, 127
switch statements (JavaScript), multiple conditions and, 602–604
tables
accessibility, 158
body, wrapping, 151
borders
creating, 149
spacing, 157
cells
background colors, 157
background images, 157
boldface text, 157
creating, 147
spanning, 156
styling, 147
CSS display: table; property, 335–338
footers, wrapping, 151
headers, wrapping, 151
mixing presentation/content, 158
mobile devices, 158
pre-planning, 156
responsive tables, mobile design, 455
rearranging rows/columns, 457–460
rows, wrapping, 151
unnecessary redesigns, 158
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
JavaScript scripts, 89
text
aligning, 136
attributes, HTML tags, 136
case sensitivity
color names, 195
JavaScript, 514
web servers, 170
CSS
aligning text, 67
indenting text, 67
DOM
modifying text in web pages, 543–545
flowing text in web pages, 284–285
fonts
changing color, 129, 130, 131–133
mobile interfaces and RWD, 447–449
formatting
attributes, HTML tags, 136, 168
paragraph breaks, 136
sample text, 122
simple web pages, building with HTML, 33
subscript text, 127
superscript text, 127
highlighted text, 438
HTML forms, accepting text input, 702–703
images, describing with text, 217–218
links, changing color, 195
sample text, formatting example, 122
special characters, formatting, 122–125
subscript text, 127
superscript text, 127
typefaces (font families), changing, 130, 131–133
web forms
text fields/text areas, 713–715
web pages
writing in documents, document objects (DOM), 527
<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, 681–683
Dojo, 686
MooTools, 686
script.aculo.us, 685–686, 687, 687–689
tiled background images, creating, 212–214
time, displaying with JavaScript, 85–91
time zones, Date object (JavaScript) and, 589
timing
<title> HTML tags, 29, 30, 436
<tr> HTML tags, 147, 149, 149, 154
transformations
2D transformations, 383
multiple transformations, 391–392
rotating elements, 384
slanting (skewing) elements, 388–391
triggering with JavaScript, 397–398
triadic color schemes, 194
triangles, drawing on canvas, 415–416
typefaces (font families), changing, 130, 131–133
unload/load events, event handlers (JavaScript) and, 630–631
unobtrusive JavaScript, 496–498, 674–677
unordered HTML lists, 139, 290
ups/downs, mouse events, 623–627
URL, mobile devices and RWD, 468
usability, JavaScript, 663–664
UTF-8 web pages, formatting text, special characters, 123
valid HTML, 432
validating
forms, JavaScript and, 85
style sheets, 73
web content
variables (JavaScript), 509, 515, 551, 552
global variables, 553
local variables, 553
naming, 552
semicolons (;) and, 63
version control
Google Docs, 743
maintainable code, writing, 743–745
vertical image alignment, 221–223
vertical navigation in navigation lists, creating, 300–303
video, 242
codecs, 237
hosting services, 242
<video> HTML tags, 237, 238–239, 436
viewports, mobile interfaces and RWD, 445–446
visual editors, 18
web content
absolute links, 169
color, choosing (best practices), 192–194
defined, 3
displaying, 141
interesting web content, creating, 738–739
linking
to external web content, 178–179
identifying anchor locations within web pages, 170–171
opening links in new browser windows, 180–181
within web pages, 170
publishing
blogs, 18
relative-root addresses, 168
storing
absolute links, 169
attributes, HTML tags, 168
directories, 168
relative-root addresses, 168
tables
accessibility, 158
body, wrapping, 151
borders, creating, 149
borders, spacing, 157
cells, background colors, 157
cells, background images, 157
cells, boldface text, 157
cells, creating, 147
cells, spanning, 156
cells, styling, 147
footers, wrapping, 151
headers, wrapping, 151
mixing presentation/content, 158
mobile devices, 158
pre-planning, 156
rows, wrapping, 151
unnecessary redesigns, 158
validating
accessing elements with JavaScript, 720–721
form-processing scripts, 703
grouping elements, 705
hidden data, 705
naming data, 703
<output> element, 719
submitting data, 718
text fields/text areas, 713–715
web hosting providers, selecting, 6–8
web pages
absolute links, 169
aligning text, 136
attributes, HTML tags, 136
audio, playing in web pages, 240–241
color, 194
color, changing with CSS, 199–201
color, hexadecimal color codes, 194, 195, 196–197
color, RGB color values, 194, 197–198
gradients, 365
gradients, linear gradients, 366
gradients, radial gradients, 367–371
positioning images in, 361
sizing, 360
tiled background images, creating, 212–214
borders, 354
color, changing with CSS, 199–201
images, 373
images, defining width of, 375–376
images, extending border images beyond border edge, 376
images, fitting to borders, 376–377
multiple borders, 355
centering web page elements, 262–263
color, choosing (best practices), 192–194
DOM
float property and web page elements, 263–266
flowing text in layout, 284–285
highlighted text, 438
HTML tags, viewing, 36
height/width, specifying, 218–219
JPEG compression, 209
placement in web pages, 214–217
reducing/removing color, 211–212
tiled background images, creating, 212–214
turning images into links, 223–226
images, aligning in, 219
horizontal image alignment, 219–221
vertical image alignment, 221–223
JavaScript
adding scripts to web pages, 88
large web pages
layouts
CSS display: table; property, 335–338
CSS Flexible Box Layout module, 339–342
CSS Flexible Box Layout module, modifying flex items, 342–345
CSS Grid Layout module, 345–348
examples of, 318
fixed/liquid hybrid web page layouts, creating, 324–326
fixed/liquid hybrid web page layouts, defining two columns in, 326–328
fixed/liquid hybrid web page layouts, setting height, 329–335
fixed/liquid hybrid web page layouts, setting width, 328–329
mobile devices and, 319
progressive enhancement, 318
separating structure from design/interactivity, 318
linking
to external web content, 178–179
identifying anchor locations within web pages, 170–171
opening links in new browser windows, 180–181
within web pages, 170
margins, adding to elements, 249–257
mobile web pages, testing, mobile interfaces and RWD, 450–451
multimedia files
embedding into web pages, 237
playing audio in web pages, 240–241
playing video in web pages, 237–239
ordering elements in layout, 281–284
outlines, 378
padding, adding to elements, 257–261
paragraph breaks, 136
positioning elements in layout, 277–281
relative positioning, 276
relative-root addresses, 168
rounding HTML elements, 371–373
simple web pages, organizing, 732–734
simple web pages, building with HTML, 25–26
formatting text, 33
HTML tags, required tags, 28–30
saving HTML files, 33
text editors, choosing, 25
single-page interfaces, 730–731
sticky web pages, 729
tables
accessibility, 158
body, wrapping, 151
borders, creating, 149
borders, spacing, 157
cells, background colors, 157
cells, background images, 157
cells, boldface text, 157
cells, creating, 147
cells, spanning, 156
cells, styling, 147
footers, wrapping, 151
headers, wrapping, 151
mixing presentation/content, 158
mobile devices, 158
pre-planning, 156
rows, wrapping, 151
unnecessary redesigns, 158
text, color, changing with CSS, 199–201
UTF-8 web pages, special characters, formatting, 122–125
video, playing in web pages, 237–239
web servers, case sensitivity (text) and, 170
websites
adaptive design. See also RWD, dynamic serving, 467
bad website examples, 195
color, choosing (best practices), 192–194
dynamic serving. See also RWD, adaptive design, 467–468
dynamic websites
changing images based on user interaction, 498–500
HTML5 applications, developing, 501
scripting, client-side scripting, 488
scripting, displaying random content, 491–495
scripting, hiding scripts, 490
scripting, placement of scripts, 489
scripting, server-side scripting, 488
scripting, unobtrusive JavaScript, 496–498
graceful degradation, theory of, 428, 431
navigating, JavaScript and, 84–85
progressive enhancement
adjusting the look of content with CSS, 433–434
benefits of, 435
content layer, editing, 432–433
defined, 431
JavaScript interactivity, 434
separating content from presentation/functionality, 432
RWD
alternatives to, 466
history of, 428
JavaScript, validating, 438–439
mobile design, importance in design, 430–431, 443–444
mobile design, Mobile First design, 451–454
mobile design, mobile interfaces, 445–451
mobile design, Mobile Only design, 454–455
mobile design, responsive images, 461–464
mobile design, responsive layouts, 464–466
mobile design, responsive tables, 455–461
mobile design, separate URL/domains, 468
writing HTML, 435
writing HTML, basic attributes, 437–438
writing HTML, tags every web page should contain, 435–436
writing HTML, web content tags, 436–437
search engine optimization, 738
creating interesting content, 738–739
navigation, 739
single-page interfaces, 730–731
theory of graceful degradation, 428, 431
well-formed XHTML, 433
while loops (JavaScript), 606–607
width/height,
fixed/liquid hybrid web page layouts, setting in, 328–329
images, specifying in, 218–219
web page elements, changing in, 272–274
window objects (DOM), 524, 531, 638–639
properties of, 639
windows
creating, 640
dialog boxes, displaying, 648–649
windows (browsers)
creating, 640
dialog boxes, displaying, 648–649
World Wide Web, history of, 2
wrapping, rows (tables), 151
XHTML, well-formed XHTML, 433
YUI library, 661
184.72.135.210