Index COPYRIGHTED MATERIAL. Symbols and Numerics. </a> element, 25

Size: px

Start display at page:

Download "Index COPYRIGHTED MATERIAL. Symbols and Numerics. </a> element, 25"

Shanon Hodge
6 years ago
Views:

1 Index Symbols and declarations, adding mid-point steps, 274 adding motion, basic coding steps, CSS 3.0 Maker, generating with, defining animation paths, moving banners, creating, overview, significant properties listing, 278 transforms, examples, {} (brackets), media queries, using with, 188 : (colon) declarations, using with, 31 pseudo-class selectors, using with, 32, (comma), selectors, using with, 32 - (dashes), declarations, using with, 30 # (hashtag), ID selector, using with, grid, 23 % (percent sign) border-image style, using with, column design, using with, (period), ID selector, using with, 31 " " (quotes), values, using with, 163 ; (semi-colon), declarations, using with, 31 3D animation, 261 _ (underscore) characters, declarations, using with, 30 A A (alpha) color value browser support, 225 opacity versus, overview, syntax, <a> element, 25 </a> element, 25 : active selector, 32 <address> element default styling in, 43 definition, 101, 113 rules for, semantic markup elements, example of, 98 Adobe Creative Cloud website, 157 Adobe Dreamweaver downsides, 309 jquery Mobile integration, 189 overview, 308 website, 308 Adobe Flash Player advantages of, 147, 149 continuing relevancy, disadvantages, 148 native elements versus, Adobe Illustrator CSS3 versus, 12 RGB color definitions, 224 Adobe Kuler website color scheme generating, 318 hexadecimal color values, 31 Adobe Media Encoder website, Adobe Premiere website, 157 AIFF (Mac) audio files, 165 alpha (A) color value browser support, 225 opacity versus, overview, syntax, alphabets, UTF-8 encoding system character set declarations, 30 definition, 22 AMP Express website, 311 Animate.css website, 322 COPYRIGHTED MATERIAL

2 340 HTML5 & CSS3 For Dummies adding mid-point steps, 274 adding motion, basic coding steps, defining animation paths, moving banners, overview, significant properties listing, 278 Animate.css, generating with, CSS 3.0 Maker, generating with, CSS3 integration, 60 effects animating, 240 HTML5 and CSS3 advantages, 12 interaction, creating, JavaScript, combining with CSS3, 61 pseudo-class selectors, using for, 211 transforms examples, overview, transitions, animation-delay 278 animation-duration 278 animation-timing-function 278 Apple Final Cut Pro website, 157 arrow connectors, 1 <article> element body element, using with, 107 content, organizing with, 8, 98, 107 definition, 44 ID selectors, using with, 107 key element listing, 105 rules for, 106 syntax, 105 articles (in publications), 106 <aside> element definition, 44 key element listing, 105 placement of, 44 syntax, 105 warning about using, declarations, adding mid-point steps, 274 adding motion, basic coding steps, CSS 3.0 Maker, generating with, defining animation paths, moving banners, creating, overview, significant properties listing, 278 transforms, examples, audio, native elements, 48 <audio> element, 148 autoplay functions, mobile device disabled, 154 autoplay parameter audio, using for, 168 video, using for, 162 AVI (Windows video) format continuing relevancy, 150 future of, 149 B background-color style, 251 backgrounds CSS3 advantages, 12 gradients advantages of, blends, 290 history, mobile design considerations, radial and rotated, tiled versus, 286 <bdi> element, 103 Beighley, Lynn, 94 blog postings, 106 blur parameter (shadow effects), 247 <body> element content, 17 definition, 20, 22 <div> element, relationship to, overview, 22 syntax, 23 body style, 30

3 Index 341 border backgrounds image files, using with, overview, border style, 251 border-image style overview, 245 percent sign ( % ), using with, 244 properties of, slice percentage, defining, border-image-outset, 245 border-image-repeat, 245 border-image-slice, 245 border-image-source, 245 border-image-width, 245 border-radius style browser issues, 233 button, creating with, 251 circles, creating with, effects, defining with circles, class selectors, using for, multiple corners, values, effects of, 242 overview, 63 64, SEO advantages, 235 transforms, using with, 233 Box Model circles, CSS3 versus CSS2, CSS evolution of, CSS3 design changes, 62 65, HTML5, relationship to, 23 transforming with, 63 CSS3 changes to, <div> element, using with, 23 effects and transforms, using with, 69 fluid versus responsive, 23 history, images, designing with, 65 box-shadow effect buttons, using with, 248 color, using with, 247 overview, 247 syntax, vendor-specific prefixes, using with, 249 brackets ({}), media queries, using with, 188 browsers alternatives to Internet Explorer, 81 compatibility 278 border-radius style, 233 color values, 225, 227 CSS3 effects, doctype declaration advancements, 80 form field parameters, 129 gradients, IE8 persistence, 78, 82 native audio, 166 new elements, interpreting, 80 overview, preload parameter (video), 165 transitions, Ultimate CSS Gradient Generator, 317 video formats, 90 93, 151 compatibility workarounds audio options, 168 form field parameters, 129 HTML5Shiv JavaScript hack, multiple video formats, 151 native video, 163 overview, Respond JavaScript hack, vendor-specific prefixes, 90, , 238 default styling, overriding, 29, 43 designing for, 1 doctype declaration advancements, 80 doctype declaration support, 21 East Asian character sets, support for, 104 form validation support, 51 gradient syntax differences, HTML5 and CSS3 implementation comparisons, support for, 14, 39, 61, 78 HTML5 code, accessing with, 11 12

4 342 HTML5 & CSS3 For Dummies browsers (continued) IE (Internet Explorer) alternatives to, 81 doctype declaration support, 21 HTML5 and CSS3, support, 14 HTML5Shiv JavaScript hack, IE8, audience identification, 78, Microsoft upgrade policies, 81 Respond JavaScript hack, video display customization, display optimizing, support issues, 49 type parameter, using, 162 buttons effects and transforms, using with, 69 links, using for, rounded corners, using, 233 shadow effects, using, 248 C Can I Use website, 61 <canvas> element definition, 53 JavaScript, adding to, libraries for, overview, 54 cascading, 25 case sensitivity doctype declaration simplification of, XHTML issues, 41 character sets, UTF-8 encoding declarations, 30 definition, declarations, 30 charset meta element, 22 circles creating, CSS3 advantages, 235 class selectors clear style, using with, 26 <div> element, appending to, 26 effects definitions, using with, ID versus, 26 semantic markup elements, replacing with, 43 syntax, 31 clear style definition, 26 syntax, 26 clickable hotspots, creating, 260 client-side scripts, 50 code editors Adobe Dreamweaver downsides, 309 overview, 308 Komodo Edit, Notepad RT, Notepad++ overview, 304 special features, 305 website, 13 recommendations, 13 text editors versus, 13 TextWrangler overview, website, 13 transforms, using with, 260 use with this book, 1 warning about using, 39 40, 304 CODEC definition, 146 standards, variation of, 150 colon ( : ), declarations, using with, 31 color parameter (forms), 127 color parameter (shadow effects), 247 Color Scheme Designer website, 319 colors Adobe Kuler color scheme generating, 318 hexadecimal color values, 31 alpha (A) value, CSS2 versus CSS3, 223 defining, methods of, 221 form parameters, 127 mobile design choices, 176 opacity control, standard versus hexadecimal, 31, 222

5 Index 343 columns CSS3 Generator, creating with, 320 ID tag, defining with, 24 mobile design considerations, selectors, using with, 31 comma (, ), selectors, using with, 32 <command> element, 104 comments example, 30 syntax, 21 comments (posted), 106 compatibility 278 audience identification, 80, border-radius style, 233 color values, 225, 227 competing native formats, 151 CSS3, 61 CSS3 effects, 238 doctype declaration advancements, 80 form field parameters, 129 graceful 278 CSS3 gradients, 285 definition, 88 example, overview, 87 transitions, 215 video formats, 93 gradients competing browser syntax, IE8 support, SVG files, solving with, 295 HTML5Shiv JavaScript hack, IE8 hacking solutions HTML5Shiv JavaScript, investing in, Respond JavaScript, 84 86, 188 IE8 issues CSS3 effects, form field parameters, 129 media queries, 188 Microsoft upgrade policies, 81 outline text, overview, 78 media players HTML5 freedom from, 36, 144 video compression standards, 150 mobile devices, 93 new elements, interpreting, 80 outline text, overview, preload parameter (video), 165 progressive enhancement, 87 Respond JavaScript hack, transforms, transitions, Ultimate CSS Gradient Generator, vendor-specific prefixes, 90, , 238, video compression standards, 150 video formats, web fonts, testing, 73 compression (video) amateur files, 150 CODEC variations, 150 overview, 150 video converters compression options, 158 software choices, 157 computer resources, minimizing, 11 contrast, mobile design adjustments, controls parameter (video) HTML5 requirement, 161 syntax, 162 conventions used in book, 1 CSS 3.0 Maker website, 322 CSS Gradient Background Maker, 296 CSS Gradient Generator, 296 CSS Menu Maker website, 324 CSS3. See also compatibility issues; individual features by name Adobe Illustrator versus, 12 advantages of, animation, programming advantages, 12 browsers compatibility, 61 default styling, overriding, 29

6 344 HTML5 & CSS3 For Dummies CSS3 (continued) cascading definition, 25 example, 25 code editors versus text editors, 13 <div> element, advantages of, 15 external style sheets embedding styles versus, 15 HTML style properties versus, 15 Flash versus, 12, 94 history phase 1 (CSS), phase 2 (CSS2), phase 3 (CSS3), 210 HTML5 box design example, 23 linking to, 17 using with, 1, 3 interactivity, programming advantages, 12 Internet Explorer (IE) issues, 14 JavaScript, advantages over, 12 local trumps global, 25 media query files multiple, 183 single, 187 mobile devices, advantages for, new animation, 12, 210 Box Model design, browser compatibility, color definitions, 207, effects, 11, 14, gradients, images, mobile tools, overview, 10 11, 60 rich graphical backgrounds, 12 transforms, 210, transitions, 207, , 266 older versions, advantages over, 14 overview, 8, rich graphical backgrounds, advantages, 12 styling tools, new, 8, 11 <table> element, changes in usage, 209 transforms advantages of, 67 Box Model example, definition, 60 gradients, creating backgrounds with, vendor-specific prefixes, 90 transitions, UTF-8 opening statement, 30 vendor-specific prefixes, 90 video displays, customizing, web fonts, accessing, CSS3 Box Shadow Generator website, 321 CSS3 Generator website, 320 CSS3 Gradient Generator, 295 cubic-bezier value (transitions), 215 D dashes ( - ), declarations, using with, 30 data client-side management, 334 forms, collecting with, 122 server-side management, <data> element definition, 53 JavaScript, using with, libraries for, datalists (forms) definition, 126 HTML5 advantages, 138 data-roles (jquery), 194 data-themes (jquery), date parameter (forms), 127 <datetime> element definition, 101 semantic markup elements, example of, 98 SEO optimization, using for, <time> element, using with, 116

7 Index 345 datetime parameter (forms), 127 declarations definition, 30 selectors, using with, 31 syntax, deprecated elements, definition, 38 <details> element definition, <summary> element, using with, syntax, 114 details/summary block, syntax, 114 <dialog> element, 104 dials, effects and transforms, using with, 69 disabilities, accessibility testing, 311 <div> element advantages of, 15 <body> element, relationship to, class selectors, relationship to, 24 class styles, appending to, 26 clear style, using with, 26 continuing relevancy, 46 CSS evolution of, definition, 17, 24 fluid design versus responsive design, 23 HTML5, continuing need for, 23 ID selector, relationship to, grid, using with, 23 tables versus, 15 wrapper style, 24 divider element advantages of, 15 tables versus, 15 doctype declaration browser support, 21 case sensitivity, definition, 16, 20 simplification of, syntax, document structure, example, 20 Document Type Definition (DTD), 41 download time, minimizing, 12 Dreamweaver downsides, 309 jquery Mobile integration, 189 overview, 308 website, 308 drop shadows box-shadow effect buttons, using with, 248 color, using with, 247 overview, 247 syntax, vendor-specific prefixes, using with, 249 DTD (Document Type Definition), 41 duration 278 E ease-in value (transitions), 215 ease-in-out value (transitions), 215 EaselJS website, 54 ease-out value (transitions), 215 East Asian character sets, 104 effects animation hovering, using for, overview, 240 border images, box-shadow style, vendor-specific prefixes, 249 circles, combining, 232 compatibility issues, 238 defining border-image style, border-radius style, overview, 240 definition, 60 drop shadows box shadows versus, 237 buttons, using with, 248 color, using with, 247 mobile design advantages, 237 overview, 237, 247 syntax,

8 346 HTML5 & CSS3 For Dummies effects (continued) overview, pseudo-class selectors, using for, 252 rounded corners, text outline, creating, 250 text shadows overview, 249 parameters for, 249 elements. See also individual elements by name deprecated elements, definition, 38 headings, hierarchy of, 24 nonhierarchical <address> element, <details> / <summary> pair, <figure> / <figcaption> pair, 115 list of, 113 <mark> element, overview, 112 pairs of, 113 <time> / <datetime> pair, 116 open and close tags, 21 organization of, 42 paragraph type, 24 semantic markup, definition, 9 styling content elements, syntax, 21 tags versus, 18 traditional new role for, 47 semantic markup versus, address validation, 51, 125, 140 comments, collecting, 132 data collection, 132 parameter, using with, 140 forms action scripts, 132 online resources, 132 security issues, 132 templates for, mailing lists, managing, 329 parameter (forms), 137, 140 MeForm website, 335 Embedded Open Type (EOT), 76 embedding (audio/video) hosting, MP4 files, warning about placement, 161 native audio advantages, source files, defining, 161 syntax (audio), 166 syntax (video), 161 embedding styles, external style sheets versus, 15 EOT (Embedded Open Type), 76 external style sheets embedding styles versus, 15 <figure> and <figcapture> elements, using with, 115 headings, customizing with, 24 media queries, using with, 182 properties, defining in, 23 selectors, using, 30 structural elements, adding to, style definitions, combining, 32 web fonts, linking to, 74 F feedback (users), 52 <figcaption> element definition, 44, 113 <figure> element, using with, 114 styling, 115 <figure> element definition, 44, 113 <figcaption> element, using with, 114 styling, 115 syntax, 114 File Transfer Protocol (FTP) client definition, 18, 309 FileZilla, overview of, 309 files, organizing, 16 FileZilla FTP website, 18

9 Index 347 Flash advantages of, 147, 149 animated objects (SWF) files, 94 animation, 38 Apple decisions, effects of, continuing relevancy, disadvantages, 148 drop shadows, using for, 237 freedom from, history of, HTML5 and CSS3 versus, 12, 94 IE8 video solutions, 93 Steve Jobs position letter, 148 video (FLV) files, 94 web design, replacing for, 65 Flash animated objects (SWF) files, 94 Flash Player advantages of, 147, 149 continuing relevancy, disadvantages, 148 native elements versus, Flash Video (FLV) files advantages of, 147, 149 continuing relevancy, YouTube use, 147 float property aligning with, 31 boxes, displaying, 26 clear style, using with, 26 fluid design definition, 179 responsive design drawbacks, responsive design versus, 23 FLV (Flash Video) files continuing relevancy, YouTube use, 147 : focus selector, 32 folders, website file organization, 16 font-family property, 74 font-family style, 251 fonts download time, minimizing, EOT, 76 historical issues, 71 linking syntax, 72 TTF, 76 web fonts advantages of, backup fonts, providing, 74 Internet connection required, 74 font-size style, 251 <footer> element content, organizing with, 8, 99 definition, 44 key element listing, 105 syntax, 105 warning about using, 108 form action parameters. See also individual parameters by name definition, 130 form testing, 132 server-side scripts linking to, online resources, syntax, 130 <form> element form field parameters, enclosing in, 130 overview, form field parameters. See also individual parameters by name color, 127 compatibility issues, 129 datalists, 126 date, 127 <form> element, enclosing in, 130 number input types, 126 placeholder text, 72, 126 required rules, 126 validation rules, 126 warning about using, 130 form tools client-side scripts versus, form-management resources, 52 validation changes to, 36 HTML5 limitations, 51 Form Tools website, 333

10 348 HTML5 & CSS3 For Dummies forms. See also form action parameters; form field parameters compatibility issues browser accommodation, 129 browser support, 129 creating, options for, 328 CSS3 and HTML5 advantages, limitations, e-commerce, using with, 122, actions, 132 feedback from, 122, 335 <form> element, using, form fields, defining, generators for, 331, , HTML5 advantages, 124, 128 JavaScript versus, HTML5 advantages, 128 mailto: (form action), 132 management tools MeForm, Form Tools, Freedback, 335 FreeFind, 330 Google Custom Search Engine, Google Docs, 331 jquery Menu Widget, MailChimp, 329 TheSiteWizard, Zoho Creator, names, collecting, 133 online resources, 52, overview, parameters color, 127 datalists, 126 date, 127 datetime, 135 datetime-local, 135 , 135 month, 135 number, 135 number input types, 126 output, 139 placeholder text, 72, 126 range, 136 required, 126, 140 search, 137 tel, 135 time, 137 url, 137 validation, 126 week, 135 registered visitors, tracking, 122 search boxes, downloading, 131 testing, 132 validation importance of, 125 tools for, 125 Freedback website, 335 FreeFind website, 131, 330 FTP (File Transfer Protocol) client definition, 18, 309 FileZilla, overview of, 309 furigana typography, 104 G Galarza, Damian, 295.gallery-box (class style), 268 GitHub website, 85 Google Custom Search Engine website, 331 Google Docs website, 331 Google Fonts website, 72 graceful 278 definition, 88 example, overview, 87 transitions, 215 video formats, 93 gradient generators CSS Gradient Background Maker, 296 CSS Gradient Generator, 296 CSS3 Gradient Generator, 295

11 Index 349 overview, 294 style sheets commenting for accuracy, 300 pasting code into, Ultimate CSS Gradient Generator gradient stops, defining, 298 main features, 317 overview, 297 preset palettes, using, saving and pasting code, websites, 297 gradients Adobe Illustrator versus CSS3, 12 advantages of, 67, browser syntax differences, compatibility issues browser prefix and syntax differences, IE8 support, SVG files, solving with, 295 CSS evolution of, CSS3, creating with, 11 CSS3 integration, 60 gradient generators CSS Gradient Background Maker, 296 CSS Gradient Generator, 296 CSS3 Gradient Generator, 295 overview, 294 testing code from, 300 Ultimate CSS Gradient Generator, , 317 history, image backgrounds versus CSS3 design, mobile device support, radial and rotated, tiled backgrounds versus, 286 transitions, combining with, graphics CSS evolution of, CSS3, creating with, 11 rich graphical backgrounds, CSS3 advantages, 12 H <h1> element, 24 h.264 (MP4) video format converting to OGG format, 92 creating video with, 91.mp4 filename format, 91 overview, 49 hacks (browser compatibility scripts) definition, 80 IE8 solutions HTML5Shiv JavaScript, Respond JavaScript, investing in, overview, 83 Harris, Andy, 41 hashtag (#), ID selector, using with, 31 <head> element content charset meta element, 22 CSS3 links, 22 <title> element, 22 definition, 100 example, 20 overview, 17 <header> element content, organizing with, 8, 99 definition, 44, 100 key element listing, 105 syntax, 105 warning about using, 108 headings definition, 24 elements, hierarchy, 24 style sheets, customizing with, 24 syntax, 24 height parameter (video), 162 hexadecimal color values alternatives, 222 overview, hierarchy rules semantic markup elements, traditional elements versus semantic markup, 48

12 350 HTML5 & CSS3 For Dummies Hipster Ipsum example, 115 placeholder text downloads, 312 website, 75 hosting (videos) embedding, online hosting services, online resources, 159 : hover selector, 32 hovering animating, 69 animating effects, CSS evolution of, 211 mobile design considerations, 177 pseudo-class selectors, using for, 69, 211 transitions, combining with, HSL (Hue-Saturation Value) color system defining color with, 221 syntax, 224 <html> element contents of, 17 definition, 20 syntax, 16 HTML5. See also compatibility issues advantages of, animation, programming advantages, 12, 38 <body> element content, 17 definition, 20 overview, 22 browser software, accessing with, browser support form validation, 51 improvements, 41, 43 issues, 14, 39, 49 code editors versus text editors, 13 comments example, 30 syntax, 21 computer resources, minimizing, CSS3 box design example, 23 linking to, 17 using with, 1, 3 <div> element, continuing need for, 23, 46 doctype declaration (simplified) advantages of, definition, 16, 20 document structure, example, 20 download time, minimizing, 12 DTDs, dispensing with, 41 element syntax, 21 elements, opening and closing, 21 Flash versus, 12, 94 form tools, validation issues, form validation, changes to, 36 <head> element definition, 20 placement of, 17 <html> element contents of, 17 definition, 20 interactivity, programming advantages, 12 Internet Explorer (IE) issues, 14 JavaScript, advantages over, 12 markup, privacy warning, 21 mobile devices, advantages for, native elements, native video formats, new features <audio> element, 148 browser compatibility, 41 43, datalists, 138 data-role elements, 193 doctype declaration (simplified), 16, form input types, 133 form tools, 50 52, form validation, 12, interactivity and animation, 12 native audio/video, 48 50, overview, 8 10, 14, scripting elements, semantic markup elements, 44 45, validation tools, <video> element, 11 12, 148

13 Index 351 older versions, advantages over, 14 overview, 8 plugins, freedom from, programming skill requirements, 12 semantic markup elements content, organizing with, 8, definition, 9 server-side scripts freedom from, 12 HTML5 versus, style properties CSS3 style sheets versus, 15 external style sheets versus, 15 template, downloading, web font style sheet links, 74 website file organization, 16 HTML5 & CSS3 For Dummies website, 3 HTML5Shiv JavaScript downloading/installing, 84 linking to, 83 testing options, 86 Hue-Saturation Value (HSL) color system defining color with, 221 syntax, 224 I icons, explained, 2 ID selectors assigning to HTML5 pages, 110 class selectors versus, 26 definition, 24 multiple columns, creating, 24 semantic markup elements, replacing with, 43 syntax, 31 IE (Internet Explorer). See also compatibility issues browser alternatives, 81 doctype declaration support, 21 graceful 278 definition, 88 example, overview, 87 transitions, 215 video formats, 93 hacking solutions HTML5Shiv JavaScript, investing in, Respond JavaScript, HTML5 and CSS3 support, 14 IE8 compatibility 278 form field parameters, 129 gradients, Microsoft upgrade policies, 81 overview, 78 IE8 persistence, 82 video solutions, 93 Illustrator, backgrounds, creating with, 67 images border backgrounds, using with, , border images creating, percent sign ( % ), using with, 244 saving, 246 slice percentage, defining, Box Model, designing with, 65 circles, creating with, CSS3 usage changes, 210 drop shadows, creating with, 237 effects and transforms, using with, 69, image backgrounds versus CSS3 gradients, responsive design considerations, 188 rounded corners, slices, creating disadvantages, transforms, replacing with, 259 tiled backgrounds gradients versus, 286 history of, limitations, 286 transforms versus, 260

14 352 HTML5 & CSS3 For Dummies impairment accessibility testing, 311 InDesign, 224 <input> element new features, 133 syntax, input types. See also individual parameters by name advantages, 134 definition, 132 listing of, 135 overview, 134 required property, using with, 140 search engine optimization (SEO) advantages, , 119 syntax, 134 interactivity CSS3 creating with, JavaScript, combining with, 61 HTML5 and CSS3 advantages, 12 mobile design considerations, 177 Internet browser trends, native elements, need for, video traffic statistics, 146 Internet Explorer (IE). See also compatibility issues browser alternatives, 81 doctype declaration support, 21 graceful 278 definition, 88 example, overview, 87 transitions, 215 video formats, 93 hacking solutions HTML5Shiv JavaScript, investing in, Respond JavaScript, HTML5 and CSS3 support, 14 IE8 compatibility 278 form field parameters, 129 gradients, Microsoft upgrade policies, 81 overview, 78 IE8 persistence, 82 video solutions, 93 ipsum lorem website, 312 J JavaScript <canvas> element, adding to, code libraries, using, 53 54, 57 CSS3, combining with, 61 <data> element, using with, HTML5 versus animation advantages, 12 form advantages, 12 13, interactivity advantages, 12 relationship to, 53 online resources, samples and demos, 55 video displays, customizing, Jobs, Steve Flash, Apple position statement, 94 Flash, letter about, 148 JPEG files poster images, displaying as, 164 universal display properties, 146 jquery Menu Widget website, 334 jquery Mobile basic template adding pages, 192 creating, data-role elements, 193 data-themes assigning, ThemeRoller, customizing with, Dreamweaver integration, 189 mobile devices, detecting, 201 overview, page content, customizing with HTML5, 194 placeholder text, customizing with, 194

15 Index 353 jquery Mobile ThemeRoller custom swatch generation, customizing themes with, website, 190 jquery Mobile website, 196 jquery website, 94 jquery Widget Factory website, 313 K Karlins, David, 18, 240 Kayak mobile website, adding mid-point steps, 274 adding motion, basic coding steps, CSS 3.0 Maker, generating with, defining animation paths, moving banners, creating, overview, significant properties listing, 278 transforms, examples, Komodo Edit overview, 307 website, 306 Kuler website (Adobe) color scheme generating, 318 hexadecimal color values, 31 L <label> element, labels definition, 129 placeholder text, substituting for, 129 LAMP, 86 <li> (list) element example, 24 placement of, 42 libraries (JavaScript), 53 54, 57 lighting, mobile design challenges, 175 linear value (transitions), 214 : link (pseudo-class), 32 links button design, 233 clickable hotspots, creating, 260 example, 25 mobile-friendly designs, , 233 placement of, 42 self-referential, 218 syntax, 25 text, including in, 25 transforms, advantages of, 260 URL, including in, 25 list (<li>) element example, 24 placement of, 42 local trumps global, 25 loop parameter audio, using for, 168 video, using for, 163 M Mac (AIFF) audio files, 165 MailChimp website, 131, 329 mailing lists generating, 52 managing, 329 mailto: (form action), 132 MAMP, 86 margin-right style, 251 <mark> element definition, 113 highlighting with, selector, using with, 116 markup, privacy warning, 21 media queries columns, redesigning, contrast adjustments, CSS3 multiple files, creating, 183 single versus multiple files, 181 IE8, compatibility issues, 188 IE8 support, providing, 84 links, using buttons for, multiple CSS3 files, 182

16 354 HTML5 & CSS3 For Dummies media queries (continued) overview, syntax, 188 viewport size detection, 179 forcing actual width reporting, 182 viewport size adjustments contrast schemes, CSS3 files, creating, 183 menus CSS Menu Maker, using for, 324 datalists, designing with, 138 <meta> element, 22 metadata (video), 165 mime types, 162 Miro Video Converter website, 50, mobile design. See also media queries ambient lighting considerations, 184 autoplay functions disabled, 154 button animation, color value support, 227 columns, redesigning, compatibility, 93 computer resources, minimizing, 11 CSS3 advantages, definition, drop shadows, advantages, 237 gradients advantages of, 290 device support, strategies for, 289 hovering, avoiding, 177 HTML5 versus JavaScript, image size considerations, 188 jquery Mobile basic template, data-role elements, 193 data-themes, Dreamweaver integration, 189 mobile devices, detecting, 201 overview, page content, customizing with HTML5, 194 placeholder text, customizing with, 194 links, using buttons for, placeholder text, using with, 134 Play icons, using, responsive design definition, 179 display techniques, 181 example, 171 factors requiring, 172 fluid design drawbacks, image size considerations, 177 interactivity considerations, 177 lighting challenges, overview, text color choices, 176 text size considerations, 177 users, considering, rounded corners, using, 233 special requirements of, 67 video, effect upon, 149 viewport size, categorizing, 175 monofont type, use of, 1 month parameter (forms), 136 MOV (QuickTime video) format continuing relevancy, 150 future of, 149 MP3 files (audio format) browsers, alternative options for, 168 OGG format converting to, 166 exporting, MP4 files, 49, 91 mpeg (MP3) file type, 167 Mueller, John Paul, 53 muted attribute (video), 162 N native audio advantages, browser support, testing, 166 converting MP3 to OGG format, quality compromises, native video advantages, 145, 161 browser display variations, definition, 146 Flash versus, 148 formats, competing versions, 151

17 Index 355 future of, 149 h.264 (MP4) video format, 49, 91 historical use of, 146 hosting choices embedding, online hosting services, overview, 158 MP4 files, warning about placement, 161 overview, poster images, including, 164 preloading choices, 165 syntax, 161 Theora OGG video format, 49, 91 <nav> element, 44, grid, 23 Nobel, Jeff, 27 nonhierarchical elements <address> element, <details> / <summary> pair, <figure> / <figcaption> pair, 115 list of, 113 <mark> element, overview, 112 pairs of, 113 <time> / <datetime> pair, 116 nonstructural elements overview, 101 rules for, 102 structural versus, 102 normalize.css website, 29 Notepad RT website, 325 Notepad++ overview, 304 special features, 304 website, 13 number input types (forms), 126 number parameter (forms), 135, 141 O OGG (video format) compatibility issues, 91 converting from h.264 (MP4) format, 92.ogv filename format, 91 overview, 49 On the Web icon, 2 Online Audio Converter (website), 166 online resources animation, 266, audio format support, 166 border-image attributes, 245 box shadow generator, 321 browser support information, 51 browser tools, 29 code editors Adobe Dreamweaver, 308 Komodo Edit, 306 Notepad RT, 325 Notepad++, 13 TextWrangler, 13 color scheme designer, 319 color scheme generator, 318 color tables, 222 CSS3 browser compatibility, 61 CSS3 generator, 320 effects, 266, 322 forms, 335 form action scripts, form data management, client-side, 334 form data management, server-side, form generation/management, 330, 335, 336 gradient generators (free), hexadecimal color values, 31 HTML syntax documentation, 310 HTML5 & CSS3 For Dummies website, 3 IE8 compatibility issues, IE8 testing options, impairment accessibility testing, 311 input parameters, 133 interactivity, 266 JavaScript templates, 54 JavaScript video controls, 157 jquery documentation, 94 jquery Mobile stylesheets, 190 laptop/desktop mobile displays, 290 mail list manager, 329 markup validation, menus, 324

18 356 HTML5 & CSS3 For Dummies online resources (continued) mobile device detection scripts, 201 MP3 to OGG conversion, native video formats, 151 placeholder text, 75, 312 rules for elements, 105 search engines, transforms, 322 video converters, 50, video formats, 90 video hosting, 159 web fonts, 72, 75 widgets, 313 only screen parameter (media query), 182 opacity alpha values versus, overview, output parameter (forms), 139 P <p> element, 21 </p> element, 21 padding style, 251 page design Box Model CSS3 changes to, <div> element, using with, 23 fluid versus responsive, 23 history, circles, CSS3 versus CSS2, CSS evolution of, CSS3 design changes, 62 65, HTML5, relationship to, 23 transforming with, 63 effects and transforms, using with, 69 images, designing with, 65 paragraphs, placement of, 42 parameters (audio), 167 parameters (forms). See input types parameters (video), 163 percent sign ( % ) border-image style, using with, column design, using with, period (. ), ID selector, using with, 31 Photoshop, backgrounds, creating with, 67 PHP (scripting language) freedom from, 12 generators for, 52 placeholder text compatibility issues, 129 definition, 126, 133 example, 72 jquery Mobile, customizing with, 194 labels, substituting with, 129 mobile devices, using with, 134 online resources, 75 overview, syntax, 133 plugins audio, continued relevancy, 165 continuing relevancy, 93 94, 150 freedom from, 10 13, 60, 92, 147 IE8 video solutions, poster images (video) definition, 218 displaying, 164 preload parameter audio, using for, 168 video, using for, 165 privacy issues data collection, 337 markup, warning about, 21 programmable elements, <progress> element, 99, progressive enhancement, 87 properties Box Model, transforming with, columns, creating with, 46 HTML5 form elements, 52 pseudo-class selectors, using with, 32 style sheets, defining in, 23 pseudo-class selectors definition, 32 effects, using with, 252 overview, 211

19 Index 357 Q QuickTime Player Flash versus, 147 freedom from, native elements versus, QuickTime video (MOV) format continuing relevancy, 150 future of, 149 QuirksMode website, 61 quotes (" "), values, using with, 163 R range parameter (forms), 136 RealMedia (RM) files, future of, 149 RealMedia Player, 147 red/green/blue (RGB) color system browser support, 227 definition, syntax, 224 registered visitors, tracking, 122 Remember icon, 2 repeat option (border images), 245 required parameter (validation property), 126, 140 Respond JavaScript advantages of, 84 downloading versus linking, 86 downloading/installing, 85 linking to, 86 media query support, 84 testing, 86 responsive design definition, 179 design options, 178 display techniques, 181 example, 171, 180 factors requiring, 172 fluid design drawbacks, fluid design versus, 23 image size considerations, 177, 188 interactivity considerations, 177 lighting challenges, media queries CSS3: single versus multiple files, overview, single file technique, 187 viewport, actual size reporting, 182 viewport size detection, grid, using with, 23 overview, text color choices, 176 text size considerations, 177 viewport size categorizing, 175 challenges of, RGB (red/green/blue) color system browser support, 227 definition, syntax, 224 RGBA color values CSS3 Generator, creating with, 320 definition, 227 rich graphical backgrounds, CSS3 advantages, 12 RM (RealMedia) files, future of, 149 rotate (transforms), 261 rounded corners mobile design usage, 233 overview, <rt> element, 104 Ruby annotations, 104 freedom from, 12 <ruby> element, 104 rules (selectors), 30 S Sahlin, Doug, 18, 240 Sauce Labs website, 86 scalable vector graphic (SVG) files, 295 scale (transforms), 261 scalex (transforms), 261 scaley (transforms), 261 scripts, handling, 50 51

20 358 HTML5 & CSS3 For Dummies search boxes embedding, 52 form action scripts, downloading, 131 providing, search engine optimization (SEO) border-radius style advantages, 235 overview, semantic markup elements, advantages of, 119 <time> element advantages, 116 transforms, advantages of, 259 search parameter (forms), 137 <section> element <article> element, using with, 107 definition, 44, 107 example, 102 key element listing, 105 syntax, 105 warning about using, 107 security issues forms, 132 markup privacy warning, 21 selectors (rules) definition, 30 global versus specific, 32 pseudo-classes, 32 syntax, self-referential links, 218 semantic markup elements advantages of, 119 CSS3, defining with, 43 definition, 9 IE8 workarounds HTML5Shiv JavaScript hack, Respond JavaScript hack, nonstructural type, organizing content with, 36 37, 38 overview, 44 45, programmable elements, standardizing design with, structural type, structural versus nonstructural, 102 syntax, 105 traditional elements, relationship to, types of, 99 typography elements, semi-colon ( ; ), declarations, using with, 31 SEO (search engine optimization) border-radius style advantages, 235 overview, semantic markup elements, advantages of, 119 <time> element advantages, 116 transforms, advantages of, 259 server-side scripts forms linking from, managing with, 51 online resources, HTML5 versus, programming languages, 52 Sirota, Alex, 295 skew (transforms), 261 skewing example, 69 overview, transitions, combining with, skewx (transforms), 261 skewy (transforms), 261 </a> element, 25 </p> element, 21 slices (images) disadvantages, transforms, replacing with, 259 source parameter (video), 161 spaces declarations, forbidden in, 30 parameters, using with, 163 spreadsheets collecting form data in, 52 FreeFind, using with, 330 Google Docs, using with, 52, 331 Google Forms, using with, 52 stretch option (border images), 245 structural elements key elements <article> element, <aside> element, example, <footer> element, 108

21 Index 359 <head> element, 108 list of, 105 <section> element, 107 nonstructural versus, 102 overview, styles, adding with CSS3, style sheets embedding styles versus, 15 <figure> and <figcapture> elements, using with, 115 headings, customizing with, 24 media queries, using with, 182 properties, defining in, 23 selectors, using, 30 structural elements, adding to, style definitions, combining, 32 web fonts, linking to, 74 styles commas, using with, 32 CSS evolution of, <figure> and <figcapture> elements, using with, 115 heading, defining with, 47 interaction, creating, structural elements, adding to, styling content elements, subordination, 48 <summary> element definition, 101, 113 <details> element, using with, syntax, 114 SVG (scalable vector graphic) files, 295 syntax alpha (A) color value, <audio> element, 167 <audio> element, embedding, 167 <body> element, 23 charset meta element, 22 clear style, 26 comments, 21 controls parameter (video), 162 CSS3 links, 22 datalists, 138 declarations, details/summary block, 114 doctype declaration, drop shadows, elements, 21, 42 parameter, 140 <figcaption> element, 114 <figure> element, 114 fonts, linking to, 72 form action parameters, 130 gradients, browser differences, headings, 24 HSL color system, 224 <html> element, 16 input types, 133 links, 25, 42 list (<li>) element, 42 media queries multiple CSS files, 182 single CSS files, 188 number parameter, 140 output parameter, 139 parameters, 163 placeholder text, 133 preloading metadata, 165 quotes (" "), using, 163 RGB color system, 224 selectors (rules), semantic markup elements, 105 spaces, using, 163 <title> element, 22 transform combinations, 262 transforms, transition delays, 216 transitions, 212, values, 163 <video> element, embedding, 161 XHTML case sensitivity, 41 T <table> element changes in usage, <div> element versus, 14 tags. See elements technical conventions used in book, 1 Technical stuff icon, 2

22 360 HTML5 & CSS3 For Dummies tel parameter (forms), 135 animated banner, 279 Diagonal animation, 279 three-color, 274 three-color moving, 276 two-color, 272 <article> element, 47 CSS3 responsive design, 187 CSS3 styles, 27 data-role elements, 193 EaselJS, forms, gallery with skew, HTML5 basic page, 18 19, 109 jquery Mobile, media query files, 187 testing browser audio support, 166 forms, 132 gradient code, 300 HTML5Shiv JavaScript hack, 86 IE8 functions, Respond JavaScript hack, 86 web font support, 73 text outline effects creating, 250 CSS3 Generator, using for, 320 shadow effects creating, 247 CSS3 Generator, creating with, 320 history of, 237 shadow effects, creating, 249 transforms, advantages of, text editors code editors versus, 13 warning about using, text-decoration style, 251 text-shadow effect, 247 TextWrangler overview, website, 13 ThemeRoller, jquery Mobile custom swatch generation, customizing themes with, website, 190 Theora OGG (video format) compatibility issues, 91 converting from h.264 (MP4) format, 92.ogv filename format, 91 overview, 49 Theora website, 92 TheSiteWizard website, 131, 332 3D animation, 261 tiled backgrounds, 12, time parameter (forms), 137 <time> element <datetime> element, using with, 116 definition, 100, 113 SEO optimization, using for, timelines, 69 Tip icon, explanation of, 2 <title> element, 22 Tittel, Ed, 27 transforms 3D animation, 261 advantages of, 67, animating with transitions examples, overview, 266 triggering mechanisms, 267 border-radius style, using with, 233 Box Model example, boxes to circles, , clickable hotspots, creating, 260 combining multiple properties examples, syntax, 262 compatibility issues, CSS3 Generator, creating with, 320 definition, 60 elements, corners of, 256 example, 257 gradients, creating backgrounds with, images versus, 260

23 Index 361 key styles, 256 overview, 256 SEO advantages, 259 slices disadvantages, replacing, 259 syntax, transitions, combining with, z-axis values, 261 z-index values definition, 264 overlapping layers, defining with, transition-delay, 213 transition-duration, 213 transition-property, 213 transitions animating with CSS3, CSS3 Generator, creating with, 320 defining process, definition, 211 delays compatibility issues, syntax, 216 examples, , 216, 220 pacing options, properties, pseudo-class selectors, using for, 211 syntax, 212, timelines, defining, 69 transforms, animating examples, overview, 266 triggering mechanisms, 266 transforms, combining with, transition-timing-function definition, values for, translate (transforms), 261 translatex (transforms), 261 translatey (transforms), 261 transparency (color) alpha values versus opacity, RBGA value, defining with, 223 True Type Fonts (TTF), 76 type parameter audio, using for, 167 video, using for, 162 typography elements East Asian character sets, 104 overview, U UCS Transformation Format 8-bit (UTF-8) character set declarations, 30 definition, 22 <ul> (unordered list) element, 24 Ultimate CSS Gradient Generator color stops, adjusting, 298 colors, importing, 298 compatibility issues, 317 IE9 support checkbox, using, 299 main features, 317 overview, 297 palettes, preset choosing, 297 gradient stops, defining, 298 orientation adjustments, 297 preview options, 298 size adjustments, 298 saving and pasting code, website, 297 underscore (_) characters, declarations, using with, 30 unordered list (<ul>) element, 24 URL form action links, links, including in, 25 url parameter (forms), 137 UTF-8 (UCS Transformation Format 8-bit), 22 UTF-8 encoding system CSS3, opening statement, 30 overview, 22

24 362 HTML5 & CSS3 For Dummies V validation parameter, 140 example, 125 form tools, providing with, 125 forms, adding to, 12, 52 HTML5 uses and limitations, 51 importance of, 125 input types, using for, 134 number parameter, 140, 141 overview, 139 range parameter, using with, 141 required property, 140 validation rules (forms), 126 values, 163 vendor-specific CSS3 prefixes, 90, , 238, video. See also Flash browsers optimizing for, support issues, 49, 90 CODEC variations, 150 compression amateur files, 150 overview, 150 controls, displaying, display customization CSS3 styling, JavaScript player controls, h.264 (MP4) video format, 49 history of, IE8 plugin solutions, mobile devices autoplay functions disabled, 154 effects upon, 149 MP4 files, warning about placement, 161 native formats advantages, 145, 161 conversion options, 158 conversion software, 157 definition, 146 Flash versus, 148 h.264 (MP4) video format, 49, 91, 151 historical use of, 146 JPEG history, 146 overview, Theora OGG video format, 49, 91, 151 WebM format, 151 plugins continuing relevancy, 93 94, 150 development of, freedom from, 10 13, 60, 92, 147 poster images, including, 164 preloading choices, 165 prevalence of, 146 Theora OGG format, 91 <video> element advantages, 161 history, 148 syntax, 161 viewports categorizing, 175 definition, 154 mobile size considerations, Vimeo website, : visited (pseudo-class), 32 W W3C (World Wide Web Consortium) website, 105 W3Schools website, 310 WAMP, 86 Warning icon, explanation of, 2 WAV (Windows audio) files, 165 <wbr> element, 103 WC3 Markup Validation Service overview, website, 310 web fonts backup fonts, providing, 74 download time, minimizing, Internet connections required, 74 linking syntax, 72 online resources, 72 overview, resolution specifications, 76

25 Index 363 Web Hypertext Application Technology Working Group (WHATWG), 148 -webkit (vendor prefix), WebM format, 151 WebMatrix, 86 websites Adobe Creative Cloud, 157 Adobe Kuler, 318 Adobe Media Encoder, Adobe Premiere, 157 AMP Express, 311 Animate.css, 322 Apple Final Cut Pro, 157 Can I Use, 61 Color Scheme Designer, 319 CSS 3.0 Maker, 322 CSS Menu Maker, 324 CSS3, improving with, 11 CSS3 Box Shadow Generator, 321 CSS3 Generator, 320 Dreamweaver, 308 EaselJS, 54 MeForm, 335 files, organizing, 16 FileZilla FTP, 18 Form Tools, 333 Freedback, 335 FreeFind, 131, 330 GitHub, 85 Google Custom Search Engine, 331 Google Docs, 331 Google Fonts, 72 Hipster Ipsum, 75 HTML5 & CSS3 For Dummies, 3 ipsum lorem, 312 jquery, 94 jquery Menu Widget, 334 jquery Mobile, 196 jquery Mobile ThemeRoller, 190 jquery Widget Factory, 313 Kayak mobile site, 290 Komodo Edit, 306 Kuler (Adobe), 31 MailChimp, 131, 329 Miro Video Converter, 50, normalize.css, 29 Notepad RT, 325 Notepad++, 13 Online Audio Converter, 166 quirksmode, 61 Sauce Labs, 86 TextWrangler, 13, 40 Theora, 92 TheSiteWizard, 332 Ultimate CSS Gradient Generator, 297 Vimeo, W3Schools, 310 WC3 Markup Validation Service, 310 World Wide Web Consortium, 105 YouTube videos, 159 Zoho Creator, 336 week parameter (forms), 135 what you see is what you get (WYSIWYG), 295 WHATWG (Web Hypertext Application Technology Working Group), 148 width parameter (video), 162 Windows audio (WAV) files, 165 Windows Media Player Flash versus, 147 freedom from, native elements versus, Windows video (WMV, AVI) formats continuing relevancy, 150 future of, 149 WOFF (Web Open Font Format), 76.woff filename extension, 76 World Wide Web Consortium (W3C) website, 105 wrapper style definition, <div> element, using with, 46 WYSIWYG (what you see is what you get), 295

26 364 HTML5 & CSS3 For Dummies X XHTML, 41 x-offset parameter (shadow effects), 247 Y y-offset parameter (shadow effects), 247 YouTube videos, 147 YouTube website, 159 Z z-axis values (transforms), 261 z-index values (transforms) definition, 264 overlapping layers, defining with, Zoho Creator website, 336

Index LICENSED PRODUCT NOT FOR RESALE

Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using