HTML & CSS: Design and build websites [1 ed.] 9781118008188, 9781118871645, 9781119038634, 9781118907443

Table of contents :
Cover
Title Page
Copyright
Credits
Contents
Introduction
Is it Hard to Learn?
The Structure of this Book
How People Access the Web
How Websites are Created
How The Web Works
Chapter 1: Structure
How Pages use Structure
Structuring Word Documents
HTML Describes the Structure of Pages
HTML Uses Elements to Describe the Structure of Pages
A Closer Look at Tags
Attributes Tell us More about Elements
Body, Head & Title
Creating a Web Page on a PC
Creating a Web Page on a MAC
Code in a Content Management System
Looking at How Other Sites are Built
Summary: Structure
Chapter 2: Text
Headings
Paragraphs
Bold & Italic
Superscript & Subscript
White Space
Line Breaks & Horizontal Rules
Visual Editors & Their Code Views
Semantic Markup
Strong & Emphasis
Quotations
Abbreviations & Acronyms
Citations & Definitions
Author Details
Changes to Content
Example: Text
Summary: Text
Chapter 3: Lists
Ordered Lists
Unordered Lists
Definition Lists
Nested Lists
Example: Lists
Summary: Lists
Chapter 4: Links
Writing Links
Linking to Other Sites
Linking to Other Pages on the Same Site
Directory Structure
Relative URLs
Email Links
Opening Links in a New Window
Linking to a Specific Part of the Same Page
Linking to a Specific Part of Another Page
Example: Links
Summary: Links
Chapter 5: Images
Choosing Images for Your Site
Storing Images on Your Site
Adding Images
Height & Width of Images
Where to Place Images in Your Code
Old Code: Aligning Images Horizontally
Old Code: Aligning Images Vertically
Three Rules for Creating Images
Tools to Edit & Save Images
Image Formats: JPEG
Image Formats: GIF
Image Dimensions
Cropping Images
Measuring Images and Resolution
Vector Images
Animated GIFS
Transparency
Examining Images on the Web
HTML5: Figure and Figure Caption
Example: Images
Summary: Images
Chapter 6: Tables
What's a Table?
Basic Table Structure
Table Headings
Spanning Columns
Spanning Rows
Long Tables
Old Code: Width & Spacing
Old Code: Border & Background
Example: Tables
Summary: Tables
Chapter 7: Forms
Why Forms?
Form Controls
How Forms Work
Form Structure
Text Input
Password Input
Text Area
Radio Button
Checkbox
Drop Down List Box
Multiple Select Box
File Input Box
Submit Button
Image Button
Button & Hidden Controls
Labelling Form Controls
Grouping Form Elements
HTML5: Form Validation
HTML5: Date Input
HTML5: Email & URL Input
HTML5: Search Input
Example: Forms
Summary: Forms
Chapter 8: Extra Markup
The Evolution of HTML
Doctypes
Comments in HTML
Id Attribute
Class Attribute
Block Elements
Inline Elements
Grouping Text & Elements in a Block
Grouping Text & Elements Inline
Iframes
Information About Your Pages
Escape Characters
Example: Extra Markup
Summary: Extra Markup
Chapter 9: Flash, Video & Audio
How Flash Works
Use of Flash
Timeline: Flash, Video & Audio
Adding a Flash Movie to Your Web Page
Understanding Video Formats and Players
Using Hosted Video Services
Preparing a Flash Video for Your Site
Adding a Flash Video to Your Pages
HTML5: Preparing Video for Your Pages
HTML5: Adding Video to Your Pages
HTML5: Multiple Video Sources
HTML5: Combining Flash & HTML5 Video
Adding Audio to Web Pages
Adding a Flash MP3 Player
HTML5: Adding HTML5 Audio to Your Pages
HTML5: Multiple Audio Sources
Example: Flash, Video & Audio
Summary: Flash, Video & Audio
Chapter 10: Introducing CSS
Understanding CSS: Thinking Inside the Box
CSS Associates Style Rules with HTML Elements
CSS Properties Affect How Elements are Displayed
Example: Introducing CSS
Using External CSS
Using Internal CSS
CSS Selectors
How CSS Rules Cascade
Inheritance
Why use External Style Sheets?
Different Versions of CSS & Browser Quirks
Summary: Introducing CSS
Chapter 11: Color
Foreground Color: color
Background Color: background-color
Understanding Color
Contrast
CSS3: Opacity
CSS3: HSL Colors
CSS3: HSL & HSLA
Example: Color
Summary: Color
Chapter 12: Text
Typeface Terminology
Choosing a Typeface for Your Website
Techniques that Offer a Wider Choice of Typefaces
Specifying Typefaces: font-family
Size of Type: font-size
Type Scales
Units of Type Size
More Font Choice: @font-face
Understanding Font Formats
Bold: font-weight
Italic: font-style
Uppercase & Lowercase: text-transform
Underline & Strike: text-decoration
Leading: line-height
Letter & Word Spacing: letter-spacing,word-spacing
Alignment: text-align
Vertical Alignment: vertical-align
Indenting Text: text-indent
CSS3: Drop Shadow: text-shadow
First Letter or Line: :first-letter, :first-line
Styling Links: :link, :visited
Responding to Users: :hover, :active, :focus
Attribute Selectors
Example: Text
Summary: Text
Chapter 13: Boxes
Box Dimensions: width, height
Limiting Width: min-width, max-width
Limiting Height: min-height, max-height
Overflowing Content: overflow
Border, Margin & Padding
White Space & Vertical Margin
Border Width: border-width
Border Style: border-style
Border Color: border-color
Shorthand: border
Padding: padding
Margin: margin
Centering Content
IE6 Box Model
Change Inline/Block: display
Hiding Boxes: visibility
CSS3: Border Images: border-image
CSS3: Box Shadows: box-shadow
CSS3: Rounded Corners: border-radius
CSS3: Elliptical Shapes: border-radius
Example: Boxes
Summary: Boxes
Chapter 14: Lists, Tables & Forms
Bullet Point Styles: list-style-type
Images for Bullets: list-style-image
Positioning the Marker: list-style-position
List Shorthand: list-style
Table Properties
Border on Empty Cells: empty-cells
Gaps Between Cells: border-spacing, border-collapse
Styling Forms
Styling Text Inputs
Styling Submit Buttons
Styling Fieldsets & Legends
Aligning Form Controls: Problem
Aligning Form Controls: Solution
Cursor Styles: cursor
Web Developer Toolbar
Example: Lists, Tables and Forms
Summary: Lists, Tables and Forms
Chapter 15: Layout
Key Concepts in Positioning Elements
Controlling the Position of Elements
Normal Flow: position:static
Relative Positioning: position:relative
Absolute Positioning: position:absolute
Fixed Positioning: position:fixed
Overlapping Elements: z-index
Floating Elements: float
Using Float to Place Elements Side-by-Side
Clearing Floats: clear
Parents of Floated Elements: Problem
Parents of Floated Elements: Solution
Creating Multi-Column Layouts with Floats
Screen Sizes
Screen Resolution
Page Sizes
Fixed Width Layouts
Liquid Layouts
A Fixed Width Layout
A Liquid Layout
Layout Grids
Example Grid
Possible Layouts: 960 Pixel Wide 12 Column Grid
CSS Frameworks
Using the 960.GS Grid
A Grid-Based Layout Using 960.GS
Multiple Style Sheets: @import
Multiple Style Sheets: link
Example: Layout
Summary: Layout
Chapter 16: Images
Controlling Sizes of Images in CSS
Aligning Images Using CSS
Centering Images Using CSS
Background Images: background-image
Repeating Images: background-repeat: background-attachment
Background Position: background-position
Shorthand: background
Image Rollovers & Sprites
CSS3: Gradients: background-image
Contrast of Background Images
Example: Images
Summary: Images
Chapter 17: HTML5 Layout
Traditional HTML Layouts
New HTML5 Layout Elements
Headers & Footers:
Navigation:
Articles:
Asides:
Sections:
Heading Groups:
Figures:
Sectioning Elements:
Linking Around Block-Level Elements
Helping Older Browsers Understand
Example: HTML5 Layout
Summary: HTML5 Layout
Chapter 18: Process & Design
Who is the Site For?
Why People Visit Your Website
What Your Visitors are Trying to Achieve
What Information Your Visitors Need
How Often People Will Visit Your Site
Site Maps
Example Site Map
Wireframes
Example Wireframe
Getting Your Message Across Using Design
Visual Hierarchy
Grouping and Similarity
Designing Navigation
Summary: Process & Design & Design
Chapter 19: Practical Information
Search Engine Optimization (SEO)
On-Page SEO
How to Identify Keywords and Phrases
Analytics: Learning About Your Visitors
How Many People are Coming to Your Site?
What are Your Visitors Looking At?
Where are Your Visitors Coming From?
Domain Names & Hosting
FTP & Third Party Tools
Summary: Practical Information
Index
Troubleshooting
HTML Elements
HTML Attributes
CSS Properties
EULA