HTML & CSS: Design and Build Websites

HTML & CSS: Design and Build Websites

Released November 2011
Publisher(s): Wiley
ISBN: 9781118008188

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

A full-color introduction to the basics of HTML and CSS from the publishers of Wrox!

Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content management system or e-commerce store) and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach.

  • Introduces HTML and CSS in a way that makes them accessible to everyone—hobbyists, students, and professionals—and it's full-color throughout

  • Utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging

  • Boasts a unique structure that allows you to progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure

This educational book is one that you will enjoy picking up, reading, then referring back to. It will make you wish other technical topics were presented in such a simple, attractive and engaging way!

Table of contents

  1. Cover Page
  2. Title Page
  3. Copyright
  4. CREDITS
  5. Tryout
  6. Contents
  7. INTRODUCTION
    1. IS IT HARD TO LEARN?
    2. THE STRUCTURE OF THIS BOOK
    3. HOW PEOPLE ACCESS THE WEB
    4. HOW WEBSITES ARE CREATED
    5. HOW THE WEB WORKS
  8. 1: STRUCTURE
    1. HOW PAGES USE STRUCTURE
    2. STRUCTURING WORD DOCUMENTS
    3. HTML DESCRIBES THE STRUCTURE OF PAGES
    4. HTML USES ELEMENTS TO DESCRIBE THE STRUCTURE OF PAGES
    5. A CLOSER LOOK AT TAGS
    6. ATTRIBUTES TELL US MORE ABOUT ELEMENTS
    7. BODY, HEAD & TITLE
    8. CREATING A WEB P1AGE ON A PC
    9. CREATING A WEB PAGE ON A MAC
    10. CODE IN A CONTENT MANAGEMENT SYSTEM
    11. LOOKING AT HOW OTHER SITES ARE BUILT
    12. SUMMARY STRUCTURE
  9. 2: TEXT
    1. HEADINGS
    2. PARAGRAPHS
    3. BOLD & ITALIC
    4. SUPERSCRIPT & SUBSCRIPT
    5. WHITE SPACE
    6. LINE BREAKS & HORIZONTAL RULES
    7. VISUAL EDITORS & THEIR CODE VIEWS
    8. SEMANTIC MARKUP
    9. STRONG & EMPHASIS
    10. QUOTATIONS
    11. ABBREVIATIONS & ACRONYMS
    12. CITATIONS & DEFINITIONS
    13. AUTHOR DETAILS
    14. CHANGES TO CONTENT
    15. EXAMPLE TEXT
    16. SUMMARY TEXT
  10. 3: LISTS
    1. ORDERED LISTS
    2. UNORDERED LISTS
    3. DEFINITION LISTS
    4. NESTED LISTS
    5. EXAMPLE
    6. SUMMARY LISTS
  11. 4: LINKS
    1. WRITING LINKS
    2. LINKING TO OTHER SITES
    3. LINKING TO OTHER PAGES ON THE SAME SITE
    4. DIRECTORY STRUCTURE
    5. RELATIVE URLS
    6. EMAIL LINKS
    7. OPENING LINKS IN A NEW WINDOW
    8. LINKING TO A SPECIFIC PART OF THE SAME PAGE
    9. LINKING TO A SPECIFIC PART OF ANOTHER PAGE
    10. EXAMPLE
    11. SUMMARY
  12. 5: IMAGES
    1. CHOOSING IMAGES FOR YOUR SITE
    2. STORING IMAGES ON YOUR SITE
    3. ADDING IMAGES
    4. HEIGHT & WIDTH OF IMAGES
    5. WHERE TO PLACE IMAGES IN YOUR CODE
    6. OLD CODE: ALIGNING IMAGES HORIZONTALLY
    7. OLD CODE: ALIGNING IMAGES VERTICALLY
    8. THREE RULES FOR CREATING IMAGES
    9. TOOLS TO EDIT & SAVE IMAGES
    10. IMAGE DIMENSIONS
    11. CROPPING IMAGES
    12. IMAGE RESOLUTION
    13. VECTOR IMAGES
    14. ANIMATED GIFS
    15. TRANSPARENCY
    16. EXAMINING IMAGES ON THE WEB
    17. HTML5: FIGURE AND FIGURE CAPTION
    18. EXAMPLE IMAGES
    19. SUMMARY IMAGES
  13. 6: TABLES
    1. WHAT'S A TABLE?
    2. BASIC TABLE STRUCTURE
    3. TABLE HEADINGS
    4. SPANNING COLUMNS
    5. SPANNING ROWS
    6. LONG TABLES
    7. OLD CODE: WIDTH & SPACING
    8. OLD CODE: BORDER & BACKGROUND
    9. EXAMPLE TABLES
    10. SUMMARY TABLES
  14. 7: FORMS
    1. WHY FORMS?
    2. FORM CONTROLS
    3. HOW FORMS WORK
    4. FORM STRUCTURE
    5. TEXT INPUT
    6. PASSWORD INPUT
    7. TEXT AREA
    8. RADIO BUTTON
    9. DROP DOWN LIST BOX
    10. MULTIPLE SELECT BOX
    11. FILE INPUT BOX
    12. SUBMIT BUTTON
    13. IMAGE BUTTON
    14. BUTTON & HIDDEN CONTROLS
    15. LABELLING FORM CONTROLS
    16. GROUPING FORM ELEMENTS
    17. HTML5: FORM VALIDATION
    18. HTML5: DATE INPUT
    19. HTML5: EMAIL & URL INPUT
    20. HTML5: SEARCH INPUT
    21. EXAMPLE
    22. SUMMARY
  15. 8: EXTRA MARKUP
    1. THE EVOLUTION OF HTML
    2. DOCTYPES
    3. COMMENTS IN HTML
    4. ID ATTRIBUTE
    5. CLASS ATTRIBUTE
    6. BLOCK ELEMENTS
    7. INLINE ELEMENTS
    8. GROUPING TEXT & ELEMENTS IN A BLOCK
    9. GROUPING TEXT & ELEMENTS INLINE
    10. IFRAMES
    11. INFORMATION ABOUT YOUR PAGES
    12. ESCAPE CHARACTERS
    13. EXAMPLE EXTRA MARKUP
    14. SUMMARY EXTRA MARKUP
  16. 9: FLASH, VIDEO & AUDIO
    1. HOW FLASH WORKS
    2. USE OF FLASH
    3. TIMELINE: FLASH, VIDEO & AUDIO
    4. ADDING A FLASH MOVIE TO YOUR WEB PAGE
    5. UNDERSTANDING VIDEO FORMATS AND PLAYERS
    6. USING HOSTED VIDEO SERVICES
    7. PREPARING A FLASH VIDEO FOR YOUR SITE
    8. ADDING A FLASH VIDEO TO YOUR PAGES
    9. HTML5: PREPARING VIDEO FOR YOUR PAGES
    10. HTML5: ADDING VIDEO TO YOUR PAGES
    11. HTML5: MULTIPLE VIDEO SOURCES
    12. HTML5: COMBINING FLASH & HTML5 VIDEO
    13. ADDING AUDIO TO WEB PAGES
    14. ADDING A FLASH MP3 PLAYER
    15. HTML5: ADDING HTML5 AUDIO TO YOUR PAGES
    16. HTML5: MULTIPLE AUDIO SOURCES
    17. EXAMPLE FLASH, VIDEO & AUDIO
    18. SUMMARY FLASH, VIDEO & AUDIO
  17. 10: INTRODUCING CSS
    1. UNDERSTANDING CSS: THINKING INSIDE THE BOX
    2. CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS
    3. CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED
    4. EXAMPLE
    5. USING EXTERNAL CSS
    6. USING INTERNAL CSS
    7. CSS SELECTORS
    8. HOW CSS RULES CASCADE
    9. INHERITANCE
    10. WHY USE EXTERNAL STYLE SHEETS?
    11. DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS
    12. SUMMARY
  18. 11: COLOR
    1. FOREGROUND COLOR
    2. BACKGROUND COLOR
    3. UNDERSTANDING COLOR
    4. CONTRAST
    5. CSS3: OPACITY
    6. CSS3: HSL COLORS
    7. CSS3: HSL & HSLA
    8. EXAMPLE COLOR
    9. SUMMARY COLOR
  19. 12: TEXT
    1. TYPEFACE TERMINOLOGY
    2. CHOOSING A TYPEFACE FOR YOUR WEBSITE
    3. TECHNIQUES THAT OFFER A WIDER CHOICE OF TYPEFACES
    4. SPECIFYING TYPEFACES
    5. SIZE OF TYPE
    6. TYPE SCALES
    7. UNITS OF TYPE SIZE
    8. MORE FONT CHOICE
    9. UNDERSTANDING FONT FORMATS
    10. BOLD
    11. ITALIC
    12. UPPERCASE & LOWERCASE
    13. UNDERLINE & STRIKE
    14. LEADING
    15. LETTER & WORD SPACING
    16. ALIGNMENT
    17. VERTICAL ALIGNMENT
    18. INDENTING TEXT
    19. CSS3: DROP SHADOW
    20. FIRST LETTER OR LINE
    21. STYLING LINKS
    22. RESPONDING TO USERS
    23. ATTRIBUTE SELECTORS
    24. EXAMPLE TEXT
    25. SUMMARY TEXT
  20. 13: BOXES
    1. BOX DIMENSIONS
    2. LIMITING WIDTH
    3. LIMITING HEIGHT
    4. OVERFLOWING CONTENT
    5. BORDER, MARGIN & PADDING
    6. WHITE SPACE & VERTICAL MARGIN
    7. BORDER WIDTH
    8. BORDER STYLE
    9. BORDER COLOR
    10. SHORTHAND
    11. PADDING
    12. MARGIN
    13. CENTERING CONTENT
    14. IE6 BOX MODEL
    15. CHANGE INLINE/BLOCK
    16. HIDING BOXES
    17. CSS3: BORDER IMAGES
    18. CSS3: BOX SHADOWS
    19. CSS3: ROUNDED CORNERS
    20. CSS3: ELLIPTICAL SHAPES
    21. EXAMPLE BOXES
    22. SUMMARY BOXES
  21. 14: LISTS, TABLES AND FORMS
    1. BULLET POINT STYLES
    2. IMAGES FOR BULLETS
    3. POSITIONING THE MARKER
    4. LIST SHORTHAND
    5. TABLE PROPERTIES
    6. BORDER ON EMPTY CELLS
    7. GAPS BETWEEN CELLS
    8. STYLING FORMS
    9. STYLING TEXT INPUTS
    10. STYLING SUBMIT BUTTONS
    11. STYLING FIELDSETS & LEGENDS
    12. ALIGNING FORM CONTROLS: PROBLEM
    13. ALIGNING FORM CONTROLS: SOLUTION
    14. CURSOR STYLES
    15. WEB DEVELOPER TOOLBAR
    16. EXAMPLE LISTS, TABLES AND FORMS
    17. EXAMPLE LISTS, TABLES AND FORMS
    18. SUMMARY LISTS, TABLES AND FORMS
  22. 15: LAYOUT
    1. KEY CONCEPTS IN POSITIONING ELEMENTS
    2. CONTROLLING THE POSITION OF ELEMENTS
    3. NORMAL FLOW
    4. RELATIVE POSITIONING
    5. ABSOLUTE POSITIONING
    6. FIXED POSITIONING
    7. OVERLAPPING ELEMENTS
    8. FLOATING ELEMENTS
    9. USING FLOAT TO PLACE ELEMENTS SIDE-BY-SIDE
    10. CLEARING FLOATS
    11. PARENTS OF FLOATED ELEMENTS: PROBLEM
    12. PARENTS OF FLOATED ELEMENTS: SOLUTION
    13. CREATING MULTI-COLUMN LAYOUTS WITH FLOATS
    14. SCREEN SIZES
    15. SCREEN RESOLUTION
    16. PAGE SIZES
    17. FIXED WIDTH LAYOUTS
    18. LIQUID LAYOUTS
    19. A FIXED WIDTH LAYOUT
    20. A LIQUID LAYOUT
    21. LAYOUT GRIDS
    22. EXAMPLE GRID
    23. POSSIBLE LAYOUTS: 960 PIXEL WIDE 12 COLUMN GRID
    24. CSS FRAMEWORKS
    25. USING THE 960.GS GRID
    26. A GRID-BASED LAYOUT USING 960.GS
    27. MULTIPLE STYLE SHEETS
    28. MULTIPLE STYLE SHEETS
    29. EXAMPLE LAYOUT
    30. SUMMARY LAYOUT
  23. 16: IMAGES
    1. CONTROLLING SIZES OF IMAGES IN CSS
    2. ALIGNING IMAGES USING CSS
    3. CENTERING IMAGES USING CSS
    4. BACKGROUND IMAGES
    5. REPEATING IMAGES
    6. BACKGROUND POSITION
    7. SHORTHAND
    8. IMAGE ROLLOVERS & SPRITES
    9. CSS3: GRADIENTS
    10. CONTRAST OF BACKGROUND IMAGES
    11. EXAMPLE IMAGES
    12. EXAMPLE IMAGES
    13. SUMMARY IMAGES
  24. 17: HTML5 LAYOUT
    1. TRADITIONAL HTML LAYOUTS
    2. NEW HTML5 LAYOUT ELEMENTS
    3. HEADERS & FOOTERS
    4. NAVIGATION
    5. ARTICLES
    6. ASIDES
    7. SECTIONS
    8. HEADING GROUPS
    9. FIGURES
    10. SECTIONING ELEMENTS
    11. LINKING AROUND BLOCK-LEVEL ELEMENTS
    12. HELPING OLDER BROWSERS UNDERSTAND
    13. EXAMPLE
    14. SUMMARY
  25. 18: PROCESS & DESIGN
    1. WHO IS THE SITE FOR?
    2. WHY PEOPLE VISIT YOUR WEBSITE
    3. WHAT YOUR VISITORS ARE TRYING TO ACHIEVE
    4. WHAT INFORMATION YOUR VISITORS NEED
    5. HOW OFTEN PEOPLE WILL VISIT YOUR SITE
    6. SITE MAPS
    7. EXAMPLE SITE MAP
    8. WIREFRAMES
    9. EXAMPLE WIREFRAME
    10. GETTING YOUR MESSAGE ACROSS USING DESIGN
    11. VISUAL HIERARCHY
    12. GROUPING AND SIMILARITY
    13. DESIGNING NAVIGATION
    14. SUMMARY PROCESS & DESIGN
  26. 19: PRACTICAL INFORMATION
    1. SEARCH ENGINE OPTIMIZATION (SEO)
    2. ON-PAGE SEO
    3. HOW TO IDENTIFY KEYWORDS AND PHRASES
    4. ANALYTICS: LEARNING ABOUT YOUR VISITORS
    5. HOW MANY PEOPLE ARE COMING TO YOUR SITE?
    6. WHAT ARE YOUR VISITORS LOOKING AT?
    7. WHERE ARE YOUR VISITORS COMING FROM?
    8. DOMAIN NAMES & HOSTING
    9. FTP & THIRD PARTY TOOLS
    10. SUMMARY
  27. INDEX
  28. TROUBLESHOOTING
  29. HTML ELEMENTS
  30. HTML ATTRIBUTES
  31. CSS PROPERTIES
    1. PSEUDO-CLASSES, ELEMENTS & RULES

Product information

  • Title: HTML & CSS: Design and Build Websites
  • Author(s):
  • Release date: November 2011
  • Publisher(s): Wiley
  • ISBN: 9781118008188