Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore Head First HTML and CSS - 2nd Ed

Head First HTML and CSS - 2nd Ed

Published by Ivan Cvetanovski, 2021-11-13 23:37:41

Description: Head First HTML and CSS - 2nd Ed

Search

Read the Text Version

h Index g Symbols alt attribute, 173, 211, 242 angle brackets (< >), 25 &amp abbreviation, 112–113 anti-aliasing text, 210 & (ampersand) for entities, 113 Applications folder, 12 /* and */ for comments in CSS, 285 application/xhtml+xml MIME type, 708 <!-- and --> for comments in HTML, 6 <article> element, 562–564, 572–573, 595 <>(angle brackets), 25 <aside> element, 551, 595 <code> element, 114 attributes : (colon) in CSS rules, 259 .. (dotdot) syntax for paths, 64–65 attribute selectors, 698 \" \" (double quotes) of elements, 29, 51–53 matching to elements, 52 for parent folders, 65 in opening tags, 36 <q> element and, 86–87 <audio> element, 710 @font-face rule, 322–325 “auto” margins, 502 / (forward slash) autoplay attribute (<video>), 583, 584 in closing tags, 26 for paths, 64–65 B # (hash symbol) for id selectors, 395 @media rules (CSS), 401, 405 backgrounds ; (semicolon) in CSS rules, 259 background-color property, 618, 634 [ ] (square brackets) in form element names, 675 background-image property, 380–383, 405 background-position property, 383, 405 A background-repeat property, 383, 405 colors (web pages), 206, 210 <a> elements changing styles of, 452–453 block elements creating links from elements in HTML5, 153 flowing, 473–478, 537 creating links with, 48–49 planning pages with, 115 in lounge.html, 47 states of, 466 <blockquote> elements, 90–95, 92 <body> tags, 8, 23–24 absolute layouts, 522 bold text, 335–336 absolute paths, 136–137, 145, 159 borders absolute positioning, 504–510, 528–529, 536–537 action attribute, 650–651, 661, 692 adding to <div> element structure, 424–433 active link state, 453 border-bottom property, 265–266, 354 border-collapse property, 616, 634 border-color property, 387, 389 border-radius property, 388, 405, 411 this is the index   711

the index colors borders, continued adding to HTML tables, 618–620 border-spacing (cells), 634 background (web pages), 206, 210 border-spacing property, 516, 616, 639 “color” type attribute, 692 border-style property, 386 color <input> element (forms), 656 border-width property, 387 Color Pickers, 206, 348–349 bottom, 265 color property (CSS), 262, 313 box model and, 369–370, 377–379, 387 of headings, changing, 439 displaying in browsers, 31 naming, 343 shorthand for, 442–445 web colors. See web colors specifying corners of, 388 colspan attribute, 624, 634 bottom property, 504 comments box model (CSS), 367–372 <br> elements, 96–99, 115 CSS, 285 broken images in browsers, 215 HTML, 6 browsers, web. See web browsers container file format, 589 C content area (box model), 368, 371, 372, 405 <caption> element, 634 captions (HTML tables), 609–610 Content Delivery Network (CDN), 591 cd (change directory) command, 130 cells, table, 634 controls attribute (video), 584 character encoding, 238–240 character entities, 112–113, 115 CSS (Cascading Style Sheets) charset attribute (<meta> tags), 239, 249 checkbox controls, 692 box model, 367–372 checkbox <input> element, 653, 663, 673–674 cascade, 458–463 checked attribute (forms), 695 comments in, 285 Chrome, 16 comparing languages with HTML, 294–295 class attributes, 301 CSS Pocket Reference, 260, 445 classes CSS table displays adding elements to, 286–291 creating, 510–520 class attributes, 392–397 laying out forms with, 682–685 placing <div> elements into, 421 layouts, 522 clear property, 495–497, 537 errors in, 297 closing tags, 25 vs. HTML, 34–35 codecs, 589, 590–592 inheriting styles from parent elements, 281–285 collapsing borders, 616 linking pages to external stylesheets, 273–277 properties overview, 300 712  Index rules, 36, 259–260, 301 selectors, 698–699 <style> element, 29–32, 261–263 style definitions, 42 styling forms with, 686–687 styling upgrade project, 362–365 transforms and transitions, 701–702

updating for HTML5 elements, 554 the index validating, 298–299 vender-specific properties, 700 multiple rules for, 267 cursive fonts, 315 nesting, 107–109 new in HTML5, 547–550 D selecting by siblings, 699 structure, 36 data transfers (hosting), 125 styling based on state, 453–454 elixir.html, 54 “date” type attribute, 692 <em> element, 92, 114, 338 <email> element (forms), 663 date <input> element (forms), 657, 671–672 email <input> element (forms), 657 Embedded OpenType fonts, 325 datetime attribute, 565–566 em units for sizing fonts, 329, 334 encoding default.htm files, 138–139, 159 character, 238–240 formats (video), 586–587 definition lists, 106 entities, character, 112–114 executable content in web pages, 703 <del> element (HTML), 353 external stylesheets, 273–277, 301 descendant selectors, 437–439, 466 F dir command, 131 fantasy fonts, 315 <fieldset> element, 689, 692 directions.html, 54 files directories (folders), 130 creating in Mac, 12–13 creating in Windows, 14–15 display: table property, 516 extensions, 15 file <input> element (forms), 690 <div> element (HTML) “file:///” protocol, 145 adding styles to, 424–433 file protocol, 159 defined, 466 organizing in folders, 56–59 dividing pages into sections with, 417–422 transferring to server root folder, 129–133 line-height property and, 440 Firefox, 16 new HTML5 elements and, 595 :first-child pseudo-class, 454 :first-letter pseudo-element, 698 doctype definitions, 225–227, 229–230, 249 :first-line pseudo-element, 698 fixed position elements, 537 domain names, 126–128, 159 fixed positioning, 506, 531–534, 536 Flash video, 592 Dreamweaver, 6 floated elements, 537 E you are here 4  713 editors, text, 16 elements adding to classes, 286–291 basics, 25–26, 36 defined, 25 floating, 479–482, 487–490, 497, 525–529 form, 652–657 height of, 430 linking to with IDs, 151

the index laying out with CSS table display, 682–685 multiple choice menus, 690 floating name attribute, 662 elements, 525–529 placeholder attribute, 691 float property, 472, 478–482, 487–490 required attribute, 691 inline elements, 497 server scripts, 646–647, 650–652, 660, 663 layouts, 521, 525–526 styling with CSS, 686–687 frozen layouts, 501–502, 537 flowing block/inline elements, 473–478 FTP (File Transfer Protocol), 129–132, 159 flow of elements, 537 :focus pseudo-class, 453 G folders get <filename> command, 131 organizing files/images in, 56–59 GET method, 678–680, 692 for thumbnails, 192 GIF image format, 167–168, 172, 211 fonts (CSS) Google Web Fonts, 325–327, 706 changing weight of, 335–336 Guide, HTML, 245–246 colors, background vs. font, 349 families of, 355 H @font-face rule, 322–325 font-family property, 279–280 <h1> element (headings), 22 for Mac/Windows, 321 <h2> element (subheadings), 8, 22 properties, 312–313 <head> element, 8, 23–24, 36 shorthand for, 444 <header> elements, 551, 568–571, 572–573, 595 sizing, 328–334 header images, 523–524 styling, 337–339 Head First HTML5 Programming, 6, 52, 231, 593, 705 Web Fonts, 325–327, 706 Head First learning principles, xxviii footers Head First Lounge project, 4–5 <footer> element (HTML5), 551, 595 Head First Mobile Web, 403 laying out, 493–496, 499 headings formats image, 167 changing color of, 439 video, 586–591 levels of, 6 forms, HTML height properties action attribute, 650, 661, 665, 692 attribute, 174, 584 adding checkboxes/text area to, 673–674 CSS box model and, 366, 371 adding fieldsets/legends to, 689 of elements, 430 adding <input> elements to, 664–666, 671–675 property, 570 adding <label> elements for accessibility, 688 hex code (colors), 32, 345–347, 349, 355 adding password <input> element to, 689 “Hide extensions for known file types” option, 15 basics, 646–649 hosting companies, 125, 159 commonly used elements, 652–657 file <input> element, 690 <form> element, 649–651, 660–663, 692 GET vs. POST methods, 678–680 714  Index

the index hover state, 453–454 I href attribute id attribute, 150–153, 392–397, 405, 418 basics (interview), 53 “Ignore rich text commands in HTML files” option, 13 relative paths in, 59 specifying link destination with, 48–51 images adding logo to myPod application, 202–209 HTML5 broken images in browsers, 215 browser handling of, 164–166 APIs and web apps, 704–705 fixing broken, 66–68 browser support for, 553 formats, 167, 211 building blog with new elements, 562–569 <img> element, 55, 170–172, 381 vs. HTML4.01, 555–556 <img> elements, 211 new elements in, 546–550, 594, 595 as links, 211 specification organizing in folders, 57–58 quality of, 187 doctype, 227 sizing/resizing, 174, 178, 183–184 overview, 231, 242 using as list markers, 632–633 HTML (Hypertext Markup Language) !important, 459, 461 basics, 4 comments, 6 index.html file, 11, 18, 138–139, 159, 176 creating tables with. See tables, HTML creating web page, 9–11, 17–22 inherited properties, 301, 464 vs. CSS, 34–35 forms. See forms, HTML inheriting styles, 281–285 guidelines for well-formed pages, 245–246 Guide to, 245–246 inline elements .html extension, 14 basics, 94–95 <html> tag, 6, 23 flowing, 473–478, 537 HTML & XHTML: The Definitive Guide (O’Reilly), <q> and <em>, 115 setting properties on, 450 52 incorporating CSS into, 259–260 <input> elements (forms), 652–653, 656–657, 664–667, language vs. CSS, 294–295 670–674 legacy elements, 247 living standard, 228 <ins> element, 353 marking up page structure, 38–41 overview, 2–3 Internet Explorer, 16 readability of, 6 saving, 18 italic style text, 337–339 structure for table displays, 512–514 structuring text with tags, 21–23 J version history of, 222–225 JavaScript, 703 HTTP (HyperText Transfer Protocol), 135, 159 jello layouts, 502–503, 521, 537 hypertext links. See links JPEG images, 167–168, 172, 211 you are here 4  715

the index loop attribute (video), 584 lossy/lossless formats (images), 167–168 K lounge.html, 54, 66 keywords for sizing fonts, 330, 334 M L Mac OS X creating HTML files in, 12–13 labels FTP applications for, 132 <label> elements, 688, 692 specifying fonts for, 321 labeling <div> with id attribute, 418 link, 148 margins box model and, 369, 371–372, 377–379 :last-child pseudo-class, 454 margin-right property, 385 layouts, CSS, 521–523 settings for, 405 leading (text), 366 shorthand for, 442–445 left property, 504 legacy HTML elements, 247 markers, list, 631–632 <legend> element, 689 matching tags, 25 <li> elements, 101–106 matte color, setting, 206–207 lighter font-weight property, 335 Matte option linebreaks, 95 line-height property, 365–366, 405, 440 in Photoshop Elements, 210 <link> element, 275–277, 301 in “Save for Web” dialog box, 205 links max-device-width property, 400, 404, 412 max-width property, 404, 412 adding titles to, 147–149 @media rules (CSS), 401 Head First Lounge example, 44–50 media attribute, 400 :link pseudo-class, 455 media queries, 401–402 linking into parent folders, 63–65 <meta> tags, 239–240, 249 linking into subfolders, 60–62 metacognition, xxix–xxxi linking to new windows, 155–157 method attribute (forms), 650, 692 linking to points in pages, 149–152 MIME type, 590 linking within pages, 153 min-device-width property, 400, 404, 412 link labels, 148 min-width property, 404, 412 link states, 453 mismatching tags, 109–110 to other websites, 142–145 mission.html page, 33 relative, 154 mkdir (make directory) command, 131 turning thumbnails into, 196–200 monospace fonts, 315 liquid layouts, 501–502, 537 MP4 containers, 586–587 lists multiple attribute (forms), 690 list-style-image property, 632 multiple classes, 291 list-style-position property, 633 list-style-type property, 631 716  Index

multiple custom fonts, 327 the index multiple links to stylesheets, 463 multiple stylesheets, 399–400 P myPod application (images), 175–177, 188–191 <p> elements, 55, 101 N <p> tags, 8, 22 padding name attribute (form element), 662–663 naming basics, 405 box model and, 368, 371–372, 377–379 classes/ids, 397 padding-left property, 384 colors, 343 shorthand for, 442–445 <nav> element (HTML5), 575–577, 595 paragraphs navigating multiple pages, 573–577 linking, 55 negative property values, 533–534 styling independently (box model), 375–383 nesting parent folders, linking into, 63–65 <div> elements, 420, 466 password <input> element, 689 elements, 107–109 paths (links) lists, 115 absolute, 136–137, 145 nested tags, 26 planning, 60–65 tables, 634 relative, 137, 145 normal keyword, 445 percentages Notepad, 14 positioning elements with, 506 :nth-child pseudo-class, 619, 634 sizing fonts with, 328–329, 334 “number” type attribute, 692 photo images, size of, 211 number <input> element (forms), 656, 671–672 Photoshop Elements finding web colors with, 348–349 O Matte color menu in, 211 resizing images with, 181 oblique style text, 337–339 pixels Ogg container, 586–587 pixel resolutions, 179–180 <ol> element, 103–106 sizing fonts with, 328 online color charts, 349 placeholder attribute (forms), 691, 692 “Open and Save” tab, 13 “Plain text”, 13 opening tags, 25 PNG images, 167–168, 172, 203–205, 211 OpenType fonts, 325 ports, 145 Opera, 16 position property, 504–507, 537 <option> element (forms), 655, 663, 666, 692 poster attribute (video), 584 ordered lists, 102–105, 115, 633 POST method, 678–680, 692 orientation property, 400 <pre> element, 114 overriding style inheritance, 284–285 Preferences, TextEdit, 13 preload attribute (<video>), 584 you are here 4  717

the index rows (HTML tables) adding color to, 618–620 properties cells spanning multiple, 622–624 CSS, 300 columns and, 607 of fonts, 312–313 inherited, 301, 464 rules, CSS list-style (CSS), 634 cascade and, 459 shortcuts for, 466 combining, 264 ordering of, 293, 459 pseudo-classes, 454–456, 466, 619 overriding inherited styles with, 284–285 pseudo-elements, 698 syntax, 259–260 put <filename> command, 130 writing for multiple elements, 264–266 pwd command (FTP), 131 S Q Safari, 16 <q> elements, 86–88, 92, 117 sans-serif fonts, 314, 320 R saving radio buttons, 692 HTML, 18 radio <input> element, 653, 663, 668 images, 187 ragged borders, 389 “Save for Web” option, 183–184, 187, 204–205 “range” type, 692 range <input> element, 656 screen readers, 157 relative font sizing, 328–329 relative links, 154 <script> element, 703 relative paths scripting, server-side, 709 absolute paths and, 137 basics, 69–71 <section> element, 562–564, 572–573, 595 grand challenge solutions, 75–76 vs. URLs, 145, 159 <select> element, 692 relative positioning, 506, 536, 537 reload button (browsers), 24 selecting required attribute, 692 elements by siblings, 699 required attribute (forms), 691 elements with ids/classes, 395 RGB color values <select> element, 655, 663, 665–667 specifying in CSS, 344 web colors and, 340–342 selectors (CSS) right property, 504 basics, 267 root folders (server), 129–133 class, 288 combining, 698–699 718  Index descendant, 437–439 serif fonts, 314, 320 server-side scripting, 651, 709 SFTP (Secure File Transfer Protocol), 132 shortcuts, property, 466 shorthand, CSS, 442–445

sidebars, laying out, 488–490, 499 the index sizing/resizing adding styles to, 612–616 fonts, 312, 328–334 cells spanning multiple rows, 622–624 images, 174, 178–184, 183–185 collapsing borders, 616 creating, 603–607 <source> element, 589–591 CSS table displays, 537, 607 pasting into web pages, 611 <span> element (HTML), 448–450, 466 styling lists in, 631–633 tags, HTML special characters, 112–113 basics, 25–42 in Head First Lounge project, 5–6 specificity, calculating, 460–461 matching, 25 mismatching, 109–110 src attribute (CSS), 68–69, 170, 211, 582, 584 nested, 26 Starbuzz Coffee project, 21 Starbuzz Coffee project starting and ending, 26 adding CSS to, 30–33 structuring text with, 21–23, 39–41 basic structure with HTML tags, 21 target attribute, 156–157, 159 creating web page, 11–12 <td> element, 604–606, 624, 634, 641 loading content into browser, 17 tel <input> element (forms), 657, 663 markup, 38 text structure, 10 anti-aliasing, 210 editors, 16 states of links, 453 flowing onto web pages, 478 fonts. See fonts (CSS) static positioning, 506, 536, 537 text-align property, 431–433, 466, 634 <textarea> element (forms), 654, 663, 673, 692 <strong> element, 114 text-decoration property (CSS), 267, 313, 353, 355 TextEdit (Mac), 12–13 styles text <input> element, 652, 692 guide to applying, 292–293 wrapping around list markers, 633 inheriting from parent elements, 281–285 <th> element (HTML), 604–606, 634 <style> element, 29–32 thumbnails, 192–196, 211 <style> element, placing, 36 <time> element, 114, 565–566, 595 <style> tags, 261–263, 301 <title> element, 8, 23–24 stylesheets, multiple, 399–400, 405 title attribute (<a> element), 147–149 tooltips, 153 styling fonts, 337–339 top property, 504 <tr> element, 604–606 subfolders, linking into, 60–62 transforms and transitions (CSS), 701–702 transparency in images, 204–205, 210 subheadings, HTML, 22 you are here 4  719 submit buttons, 692 submit <input> element (forms), 652, 663 SVG fonts, 325 T <table> element (HTML), 634 tables, HTML adding captions to, 609–610 adding color to, 618–620

the index displaying HTML in, 3–4 displaying HTML tables, 605 TrueType fonts, 325 displaying HTML video, 585 type attribute, 51, 652 handling of forms by, 647 handling of images by, 164–166 U HTML version support, 228 interpreting HTML, 5–6 <ul> element, 103–106, 118–119 loading content into, 17–19 underlining text, 267 opening pages in, 19 Unicode, 112–113, 239 resizing images to fit in, 180–186 unordered lists, 102–105, 633 selecting, 16 URLs (Uniform Resource Locators) supporting HTML5, 553 whitespace and, 36 basics, 134 defined, 159 web colors for images, 171–172 <url> element (forms), 663 basics, 340–342 url <input> element (forms), 657 creating, 355 UTF-8 encoding, 18, 239, 249 finding, 348–349 specifying, 343–347 V Web Fonts, 325–327, 706 validating CSS validator, 298–299 web forms. See forms, HTML W3C Validator, 233–240 WebM container, 586–587 value attribute (forms), 663, 692 web pages vendor-specific CSS properties, 700 vertical-align property, 516, 520, 634 adding executable content to, 703 <video> element (HTML5) applications for creating, 707 dividing into sections with <div> element, 417–422 attributes, 584 how the web works, 2–6 basics, 580–583 linking to external CSS stylesheets, 273–277 formats, 586–591 opening in browsers, 19 :visited pseudo-class, 455 setting background color, 206 void elements, 98–99, 115, 172 structure of, 115 W web pages, constructing W3C Validator, 233–238, 249, 298–299 adding <blockquote> elements, 90–94 web applications, HTML5 for, 242 adding <br> element, 96–99 web browsers adding <q> element, 86–88 outline, 81 basics, 3 overview, 79 broken images in, 215 rough design sketch, 80 built-in default styles, 28 testing page, 84 choosing, 16 web servers 720  Index basics, 3 editing files on, 132

the index moving files to root folder on, 128–131 width property port 80 and, 145 basics, 426–430 requests from browsers, 138 borders and, 387 root folder, importance of, 129 CSS box model and, 369, 371 submitting forms to, 646–647 height of columns and, 520 websites for further information setting for elements, 466 character encoding, 239 windows, linking to new, 155–157 CSS3 Media Queries specification, 403 Windows, Microsoft domain names, 126–127 FTP applications, 132 creating HTML files in, 14–15 hosting companies, 125 FTP applications for, 132 symbol/foreign character abbreviations, 112–113 specifying fonts for, 321 W3C validator, 233 World Wide Web Consortium (W3C), 249 Web Fonts, 327 weight property (CSS fonts), 335–336 X WHATWG and W3C, 591 XHTML, 99 XHTML5, 708 whitespace, use of, 36 XML, 223, 225, 708 width attribute Z images, 174 z-index property, 505–506, 537 video, 584 you are here 4  721



getting to know HTML and CSS Colophon All interior layouts were designed by Eric Freeman and Elisabeth Robson. The book’s look and feel was based and extended from the original design by Kathy Sierra and Bert Bates The book was produced using Adobe InDesign CS5 and Adobe Photoshop CS. The book was typeset using Uncle Stinky, Mister Frisky (you think we’re kidding), Ann Satellite, Baskerville, Comic Sans (can you believe it?), Myriad Pro, Skippy Sharp, Savoye LET, Jokerman LET, Courier New, and Woodrow typefaces. Interior design and production all happened on two Mac Pros and two MacBook Airs. Writing locations included: Bainbridge Island, Washington; Portland, Oregon; Seaside, Florida; Lexington, Kentucky. Long days of writing were powered by zero caffeine and Brew Dr. Kombucha, and the sounds of Foster the People, B-52s, Duran Duran, David Bowie, William Shatner, Elvis Presley, Pink Floyd, Genesis, Simple Minds, Ratt, Skid Row, Men without Hats, Men at Work, Berlin, Steve Roach, Tom Waits, Beyman Brothers, and a heck of a lot more 80s music than you’d care to know about.  you are here 4  723

Don’t you know This isn’t goodbye about the website? We’ve got answers to some of the Bring your brain over to questions in this book, guides to wickedlysmart.com how to do more, and daily updates on the blog from the authors!


Ivan Cvetanovski

Head First HTML and CSS - 2nd Ed
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS