Index

A, B

Adobe Dreamweaver, 154

Advanced audio coding (ACC), 171

Ajax, 1

Android, 269

Application programming interface (API), 13

Audio and video encoding, 173

C

Chrome, 229

Client-side storage, 281

contenteditable attribute, 281

IndexedDB, 283

local storage, 281, 283

sessionStorage object, 281

Web SQL, 283

ColorZilla, 218

Content model categories, 31

content grouping elements, 47, 48

document metadata and scripting elements, 36–37

document sectioning elements, 45, 46

embedded content elements, 71–73

form elements, 68–70

interactive elements, 73–74

tabular data elements, 60–61

text-level semantic elements, 55–59

Cryptographic key generator, 135

CSS2.1, 177–178

CSS3

:checked and :indeterminate selectors, 196

:enabled and :disabled selectors, 195

:focus selector, 195

:in-range and :out-of-range selectors, 196

:read-only and :read-write selectors, 196

:required/:optional selectors, 196

:valid/:invalid selectors, 196

attribute selectors, 189–190

background color and images

background-attachment property, 211

background-clip property, 211–213

background-color property, 210

background-image property, 210

background-origin property, 212, 213

background-position property, 211

background-repeat property, 210, 212, 213

background-size property, 213–214

basic settings, 210

border-box, 211

contain (L) and cover (R) values, 214

content-box, 211

padding-box, 211

space and round properties, 210

check box, 196

class selectors, 183, 184

class style rules, 185

color

additive color model, 217

background and foreground colors, 218

functional notation syntax, 219

hex triplet, 217

hexadecimal notation, 217, 218

hue, saturation, lightness, 219–220

opacity, 220, 221

web color value calculation, 217–218

combinators and complex selectors, 186–188

combining selectors, 185–186

CSS box model

block-level box, 205–207

box layering setting, 209

box position setting, 209

box type setting, 207, 209

inline-level box, 205–207

line-level box, 205

drop shadows, 216

ID selectors, 183

location pseudoclass selectors, 190, 191

miscellaneous selectors, 203, 205

modules, 178

multiple backgrounds, 214–215

pattern matching selectors

header and footer section, 200

nth-type selectors, 197

pattern formula, 199

tree-structural pseudoclass selectors, 197–198

unordered list, 199

zebra striping, 199

pseudoelement selectors

::before and ::after selectors, 201, 202

::first-line and ::first-letter selectors, 201

generated and replaced content module, 201, 202

url() and attr() notation syntax, 201

rounded corners, 215–216

simple selectors, 183, 184

style rules, 181–183

style sheet attachment

colors-deuteranopia.css style sheet, 180

colors-generic.css style sheet, 180

colors-protanopia.css style sheet, 180

firefox, 181

link element, 179

main.css style sheet, 180

meta element, 181

persistent, preferred and alternative style sheets, 181

rel attribute, 179

title attribute, 180

type selectors, 183

user action pseudoclass selectors, 192

user interface states pseudoclass selectors, 194–195

web typography, 221

multiple columns, 223

rules, 224

text effects, 223–224

web fonts, 221–222

D, E

Doctype switching, 10

Document object model (DOM), 8

F

File API, 285

Firefox, 229

Form handler, 107

Form mastery

accept-charset attribute, 109

acknowledgment page, 144, 145

action attribute, 109

autocomplete and novalidate attributes, 110

commentary gathering, 141–144

enctype attribute, 109

fieldsets and labels, 136–137

form controls, 110

form handler, 107

form input types, 111–112

form usability, 145–147

get and post methods, 107

input element attributes

autocomplete and autofocus, 126–127

data lists, 127–128

form input controls, 125

header and footer submit controls, 125

placeholder text, 126

readonly attribute, 126

input types

button, submit, reset, and image inputs, 117

check boxes, 115

color picker, 118

date and time input, 118–121

e-mail, phone, and website URL inputs, 121

file input, 114–115

hidden input, 117

numerical inputs, 121

password input, 114

radio buttons, 116

search input, 121

text input, 113

menus

Boolean multiple attribute, 128

cryptographic key generator, 135

disabled and size attribute, 128

disabled, selected, value, and label attributes, 129

displaying progress, 132

gauge display, 132–134

list menu, 129

optgroup element, 130–131

output element, 134

select element, 128

shorthand labels, 130

text boxes, 131–132

method attribute, 109

name attribute, 110

PHP code, 108

shape-shifting, 111

superglobal variables, 108

target attribute, 110

thank-you message, 144

type attribute, 111

user details gathering

datalist element, 140

e-mail address field, 140

generic text input field, 139

list attribute, 140

min and max attributes, 140

optional age field, 140

personal details fieldset, 140

placeholder text, 139

progress element, 139

regex pattern, 139

select element, 140

telephone and website input fields, 140

tip submittion form, 137, 138

tipster's mailing address, 139

validating and submitting forms

email input type, 122

image input control, 124

novalidate attribute, 122

pattern attribute, 123

regex, 123

reset button, 124

submit buttons, 124

tel input type, 122

url input type, 122

validation error, 123

webforms2.js, 122

web form, 108

G

Geolocation API

clearWatch() method, 275

coords property, 276

error codes, 277

geolocation settings, 278

getCurrentPosition() method, 275–278

locatedFailed() function, 277

locatedSuccess() function, 276, 277

location query, 276

satellite-based GPS, 275

timestamp property, 276

watchPosition() method, 275, 278

Google Chrome, 255

H

H.264 codecs, 164

HTML5

Ajax

ajax/js directory, 234–235

event handling function, 234

hashtag, 237

init() function, 237

onpopstate event, 237

open index.html, 236

open() method, 234

prevButtonDown() and nextButtonDown() methods, 236, 237

pushState() method, 236, 237

replaceState() method, 236

var keyword, 234

XMLHttpRequest, 234

anatomy, 4

API, 13

attributes, 6–7

backward-compatibility, 8

browser layout engines and developer tools, 20

character encoding, 11

content grouping elements, 23, 46

blockquote, 50

description lists, 53

division element, 54

figure and figcaption elements, 54

horizontal rule, 49

inevitable paragraph, 49

pre element, 49

unordered and ordered lists, 50–53

content model categories, 12, See also Content model categories

copyright and legal information, 12

CSS technologies, 272–273

doctype declaration, 9–11

doctype switching, 10

document metadata and scripting elements, 23

base element, 39

character encoding information, 35

CSS stylesheets, 35

link element, 40-42

script and noscript element, 42–44

style element, 42

web page information, 37–39

document sectioning elements, 23, 44–46

drag-and-drop operations

dataTransfer object, 255

dragEndHandler() function, 257

dragenter and dragover events, 256

draggable attribute, 253–255

dragLeaveHandler() function, 257

dragOverHandler() function, 257

dragStartHandler() function, 255–256

dropHandler() function, 257

dropzone attribute, 258

edit script.js, 254

event handling functions, 255

events, 253–254

list sorting, 259–261

preventDefault() method, 256

setData() method, 256

styles.css, 254

elements, 5, 6

embedded content elements, 24, 70–73

error handling, 9

form elements, 23, 67–70

global attributes, 25

accessibility, 26–27

contenteditable attribute, 29

core functionality, 24

custom data, 31

draggable and dropzone attributes, 30

hidden attribute, 29–30

id and class attribute, 27–29

metadata, 27

spellcheck attribute, 29

style attribute, 30

text directionality, 30

header, nav, and footer, 12

id attribute, 12

interactive elements, 24, 73

menu and command, 76

summary and detail elements, 74–76

JavaScript

alert() method, 232

Chrome, 229

CSS style sheet, 228

document object, 232

DOM, 228

events, 233

Firefox, 229

history object, 232

HTMLVideoElement, 231

Internet Explorer, 229

jstemplate, 227

location object, 232

navigator object, 231

Opera, 229

prototype chain, 231

Safari, 229–231

screen object, 232

script element, 227

stop() and play() methods, 231

text editor, 227

MathML, 13

microdata, 13, 270–271

MIME types, 17

mobile web, 263

mobile web pages testing, 268–269

obsolete elements, 14–16

offline application cache, 269–270

open web technologies, 4

presentational markup, 13

responsive design

media queries, 266–268

screen size, 264

viewport, 264–266

web design standard, 264

root element, 23, 33–34

scripted 2D canvas API

animation, 251–253

arcTo() method, 246

beginPath() method, 245

bezierCurveTo() method, 246

canvas path drawing methods, 246

canvas state, 249

CanvasRenderingContext2DPrototype, 243

closePath() method, 245

fill() method, 245

getContext() method, 241

getElementById() method, 242

interactivity, 250–251

JavaScript console, 243

lineCap and lineJoin properties, 246, 247

lineTo() method, 246

lineTo(x,y) method, 245

moveTo(x,y) method, 245

quadraticCurveTo() method, 246

rectangle drawing, 244–245

stroke() method, 245

triangle drawing, 246

trigonometry, 247–248

webgl, 243

semantic Web, 12

SGML, 13

SVG, 13

tabular data elements, 23

Adobe Photoshop, 59

caption element, 63

colgroup and col element, 65–67

flow content model category, 59

pixel-precise website layouts, 59

table basics, 61

table headers, 62–63

thead, tfoot, and tbody element, 64–65

text/html, 17

text-level semantic elements, 23, 54–59

undo manager API, 272

video controller

block-level element, 240

CSS sprites, 238, 241

fallback content, 239

getElementById() method, 239

image sprite, 238

init() function, 239

overflow property, 240

pauseVideo() function, 240

play() method, 238

stop() method, 238

W3C, 2, 3

Web applications 1.0, 3, 4

web browser support, 18–20

WHATWG, 2, 3

XHTML, 2, 18

HTML5 outlines, 79, 88, 89

I, J, K

Indexed Database API, 283

Internet Explorer, 229

iOS, 269

L

Layout engine, 20

M, N

Mathematical Markup Language (MathML), 13, 279–280

Media queries, 266–268

Metadata, 27

Microdata, 270–271

Mobile web, 263

Multimedia

audio, 170–172

audio and video encoding, 173

canvas element, 174

captions track, 172–173

embed element, 154–155

iframe element

frame and frameset elements, 157

horizontal and vertical scrollbars, 158

inline frame, 157

longdesc

attribute, 159

Netscape Navigator 2.0, 157

restricted local access, 160

sandbox attribute, 159–161

scrollbars, 158

seamless attribute, 159, 160

src

attribute, 158, 160

srcdoc attribute, 159–160

target attribute, 161

image maps

Adobe Dreamweaver, 154

Boolean ismap attribute, 152

client-side image map, 153

coords attribute, 154

href attribute, 153

server-side image map, 152

shape attribute, 153

usemap attribute, 153

img element

alt attribute, 150, 151

CSS sprites, 152

image-handling capabilities, 152

ismap and usemap attributes, 152

Mosaic web browser, 149

src and alt attributes, 150

title attribute, 151

WebP, 150

width and height attributes, 151

object element, 155–157

video

Adobe Flash, 161

autoplay attribute, 168

Boolean controls attribute, 167–168

codec, 162

container format, 162, 163

cross-origin policy, 170

fallback content, 165–167

flash embed code, 166

iOS 3.x, 165

licensing, 163

media groups, 170

MIME type, 164

muted attribute, 169

poster attribute, 169

preload attribute, 168

source element, 164

type attribute, 164

VP8 and Vorbis, 164

WebM, Ogg and MPEG-4 codec parameters, 164

Multipurpose Internet Mail Extensions (MIME) types, 17

O

Offline application cache, 269–270

Opera, 229, 269

P, Q, R

Peer-to-peer communication, 284

S

Safari, 229–231

Satellite-based global positioning system (GPS), 275

Scalable vector graphics (SVG), 13, 279–280

Semantic recognition

bdo and bdi elements, 103–104

cite element, 102

City Press

dfn and abbr elements, 99, 100

download attribute, 94

em and strong elements, 96

fragment identifier, 92

homepage, 90, 91

href attribute, 92, 93

hreflang attribute, 94

hypertext anchor, 92

i and b elements, 97

inline quote, 99

line break element, 101

mark element, 98

media, type, and download attributes, 94

rel attribute, 94–95

s element, 98

skip links, 93

small element, 97

subscript and superscript, 100, 101

target attribute, 94

text-level semantics, 92

time element, 101

web page outline, 91

code, var, samp, and kbd elements, 102

div and span elements, 90

foreign scripts, 103

headers and footers

address element, 87

content determination flowchart, 87, 88

hgroup, 86

navigational menu, 85

paragraph element, 86

heading content element, 80–81

homepage outline, 78

HTML5 outlines, 79, 88, 89

lang attribute, 77

ruby notation, 103

sectioning content element

article element, 84

body element, 82

featured content area, 84

flowchart, 83

h1 elements, 82

multiple h1 tags, 84

section element, 81

sectioning roots, 82

table of contents/site map, 78

text insertions and deletions, 102

time element, 78

web development communities, 77

Semantic Web, 12

Standard Generalized Markup Language (SGML), 13

T, U

Trigonometry, 247–248

V

Video codec, 162

Video conferencing, 284

W

Web 2.0, 1

Web Accessibility Initiative-Accessible Rich Internet applications, 285

Web Hypertext Application Working Group (WHATWG), 2, 3

Web resources, 285–286

Web sockets API, 284

Web SQL, 283

Web typography, 221

multiple columns, 223

rules, 224

text effects, 221, 223–224

web fonts, 221–222

Web workers, 283

Windows Phone 7, 269

World Wide Web Consortium (W3C), 2, 3

X, Y, Z

XHTML, 2