Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
Preface
How This Book Is Organized
Acknowledgments
About the Author
Using Code Examples
We’d Like to Hear from You
I. Getting Started
1. Where Do I Start?
Where Do I Start?
What Does a Web Designer Do?
Design
User Experience, Interaction, and User Interface design
Visual (graphic) design
Development
Authoring/markup
Styling
Scripting and programming
Content strategy and creation
Multimedia
What Languages Do I Need to Learn?
Hypertext Markup Language (HTML)
Cascading Style Sheets (CSS)
JavaScript/DOM scripting
Server-side programming
What Do I Need to Buy?
Equipment
Software
Web page authoring
HTML editors
Image editing and drawing software
Internet tools
What You’ve Learned
Test Yourself
2. How the Web Works
The Internet Versus the Web
Serving Up Your Information
A Word About Browsers
Web Page Addresses (URLs)
The parts of a URL
Default files
The Anatomy of a Web Page
HTML documents
A quick introduction to HTML markup
But where are the pictures?
Adding a little style
Putting It All Together
Test Yourself
3. Some Big Concepts You Need to Know
A Dizzying Multitude of Devices
For further reading
Sticking with the Standards
For further reading
Progressive Enhancement
For further reading
Responsive Web Design
For further reading
One Web for All (Accessibility)
For further reading
The Need for Speed (Site Performance)
For further reading
Test Yourself
II. HTML Markup for Structure
4. Creating a Simple Page: (HTML Overview)
A Web Page, Step by Step
Before We Begin, Launch a Text Editor
Creating a new document in Notepad (Windows)
Creating a new document in TextEdit (Mac OS X)
Step 1: Start with Content
Learning from step 1
Step 2: Give the Document Structure
Introducing...HTML elements
Basic document structure
Step 3: Identify Text Elements
Introducing...semantic markup
Block and inline elements
Default styles
Step 4: Add an Image
Empty elements
Attributes
Step 5: Change the Look with a Style Sheet
When Good Pages Go Bad
Validating Your Documents
Test Yourself
Element Review: Document Structure
5. Marking Up Text
Paragraphs
Headings
Heading groups
Lists
Unordered lists
Ordered lists
Description lists
More Content Elements
Long quotations
Preformatted text
Figures
Organizing Page Content
Sections and articles
Aside (sidebars)
Navigation
Headers and footers
Headers
Footers
Addresses
The Inline Element Roundup
Text-level (inline) elements
Emphasized text
Important text
The previously presentational elements that are sticking around in HTML5 with fancy new semantic definitions
b
i
s
u
small
Short quotations
Abbreviations and acronyms
Citations
Defining terms
Program code elements
Subscript and superscript
Highlighted text
Times and machine-readable information
Inserted and deleted text
Adding Breaks
Line breaks
Word breaks
Generic Elements (div and span)
Divide it up with a div
Get inline with span
id and class attributes
Identification with id
Classification with class
Some Special Characters
Putting It All Together
Test Yourself
Element Review: Text
6. Adding Links
The href Attribute
Linking to Pages on the Web
Linking Within Your Own Site
Linking within a directory
Linking to a lower directory
Linking to a higher directory
Site root relative pathnames
It’s the same for images
Linking to a specific point in a page
Step 1: Identifying the destination
Step 2: Linking to the destination
Linking to a fragment in another document
Targeting a New Browser Window
A new window with markup
Pop-up windows
Mail Links
Telephone Links
Test Yourself
Element Review: Links
7. Adding Images
First, a Word on Image Formats
The img Element
Providing the location with src
Providing alternate text with alt
Providing width and height dimensions
Match values with actual pixel size
A Window in a Window
Test Yourself
Element Review: Images
8. Table Markup
How Tables Are Used
Minimal Table Structure
Table Headers
Spanning Cells
Column spans
Row spans
Table Accessibility
Describing table content
Connecting cells and headers
Wrapping Up Tables
Test Yourself
Element Review: Tables
9. Forms
How Forms Work
From data entry to response
The form Element
The action attribute
The method attribute
The POST method
The GET method
Variables and Content
The name attribute
Naming your variables
The Great Form Control Roundup
Text entry controls
Single-line text field
Multiline text entry field
Specialized text entry fields
Password entry field
HTML5 text inputs
Submit and reset buttons
Radio and checkbox buttons
Radio buttons
Checkbox buttons
Menus
Drop-down menus
Scrolling menus
Grouping menu options
File selection control
Hidden controls
Date and time controls (HTML5)
Numerical inputs (HTML5)
Color selector (HTML5)
Form Accessibility Features
Labels
fieldset and legend
Form Layout and Design
Usable forms
Styling Forms
Test Yourself
Element Review: Forms
10. What’s Up, HTML5?
A Funny Thing Happened on the Way to XHTML 2
A “don’t blink or you’ll miss it” history of HTML
Enter XHTML
Hello HTML5!
In the Markup Department
A minimal DOCTYPE
Elements and attributes
New form input types
New global attributes
Obsolete HTML 4.01 Markup
Meet the APIs
Video and Audio
The good news and the bad news
How media formats work
Meet the video formats
Meet the audio formats
Adding a video to a page
Video for all!
Adding audio to a page
Canvas
The canvas element
Drawing with JavaScript
Final Word
Test Yourself
III. CSS for Presentation
11. Cascading Style Sheets Orientation
The Benefits of CSS
The power of CSS
How Style Sheets Work
1. Marking up the document
2. Writing the rules
Selectors
Declarations
3. Attaching the styles to the document
The Big Concepts
Inheritance
Document structure
Parents and children
Pass it on
Conflicting styles: the cascade
Specificity
Rule order
The box model
Grouped selectors
Moving Forward with CSS
Books
Online resources
CSS tools
Test Yourself
12. Formatting Text: (Plus More selectors)
The Font Properties
Specifying the font name
Font limitations
Generic font families
Font stack strategies
Specifying font size
Percentage values
Em measurements
Em best practices
Pixels and absolute measurements
Working with keywords
Font weight (boldness)
Font style (italics)
Font variant (small caps)
The shortcut font property
Changing Text Color
A Few More Selector Types
Descendant selectors
ID selectors
Class selectors
Specificity 101
Text Line Adjustments
Line height
Indents
Horizontal alignment
Underlines and Other “Decorations”
Changing Capitalization
Spaced Out
Text Shadow
Changing List Bullets and Numbers
Choosing a Marker
Marker position
Make your own bullets
Test Yourself
CSS Review: Font and Text Properties
13. Colors and Backgrounds: (Plus Even More Selectors and External Style Sheets)
Specifying Color Values
Color names
RGB color values
A word about RGB color
Picking a color
Writing RGB values in style sheets
About hexadecimal values
RGBa color
Summing up color values
Foreground Color
Background Color
Playing with Opacity
Introducing...Pseudo-class Selectors
Link pseudo-classes
User action pseudo-classes
Focus state
Hover state
Active state
Putting it all together
Other pseudo-class selectors
Pseudo-element Selectors
First letter and line
Generated content with :before and :after
Attribute Selectors
Background Images
Adding a background image
Controlling tiling direction
Background position
Background attachment
The Shorthand background Property
Multiple backgrounds
Like a Rainbow (Gradients)
Linear gradients
Radial gradients
Introducing vendor prefixes
Designing gradients
Finally, External Style Sheets
Using the link element
Importing with @import
Modular Style Sheets
Test Yourself
CSS Review: Color and Background Properties
14. Thinking Inside the Box: (Padding, Borders, and Margins)
The Element Box
Specifying Box Dimensions
Sizing the content box (default)
The border-box model
Specifying height
Handling overflow
Padding
The shorthand padding property
Borders
Border style
Border width (thickness)
Border color
Combining style, width, and color
Rounded corners with border-radius
Elliptical corners
Browser support
Picture-perfect borders
Margins
Margin behavior
Collapsing margins
Margins on inline elements
Negative margins
Assigning Display Roles
Adding Drop Shadows to Boxes
Test Yourself
CSS Review: Basic Box Properties
15. Floating and Positioning
Normal Flow
Floating
Floating inline and block elements
Floating an inline text element
Floating block elements
Clearing floated elements
Floating multiple elements
Containing floats
Using floats to create columns
Positioning Basics
Types of positioning
Specifying position
Relative Positioning
Absolute Positioning
Containing blocks
Specifying position
Pixel measurements
Percentage values
Stacking order
Fixed Positioning
Test Yourself
CSS Review: Floating and Positioning Properties
16. Page Layout with CSS
Page Layout Strategies
Fixed layouts
How to create fixed-width layouts
Fluid page design
How to create fluid layouts
Elastic layouts
How to create elastic layouts
Hybrid layouts
Which one should I use?
Page Layout Techniques
Using the examples
Multicolumn Layouts Using Floats
Two columns, fluid layout
Two columns, fixed-width layout
Two columns, fixed width, centered
Three columns, fluid layout
Any order columns using negative margins
Positioned Layout
Three columns, positioned, fluid layout
Three columns, positioned, fixed
Top-to-Bottom Column Backgrounds
Faux columns for fluid layouts
Three faux columns
Test Yourself
17. Transitions, Transforms, and Animation
Ease-y Does It (CSS Transitions)
Transition basics
Specifying the property
How long should it take?
Timing functions
Setting a delay
The shorthand transition property
Applying multiple transitions
A transition for all occasions
CSS Transforms
Transforming the angle (rotate)
Transforming the position (translate)
Transforming the size (scale)
Making it slanty (skew)
Applying multiple transforms
Smooooooth transforms
3-D transforms
Keyframe Animation
Establishing the keyframes
Adding animation properties
Test Yourself
CSS Review: Transitions, Transforms, and Animation
18. CSS Techniques
A Clean Slate (CSS Reset)
Image Replacement Techniques
CSS Sprites
Styling Forms
The markup
Step 1: Adding basic styles
Step 2: Aligning labels and inputs
Step 3: Fixing fieldsets and minor labels
Step 4: Adjusting the buttons
Styling Tables
Separated and collapsed borders
Separated border model
Collapsed border model
Empty cells
Basic Responsive Web Design
A simple example
How it works
Setting the viewport
Fluid layouts
Making images flexible
Media query magic
Media queries in the document head
“Mobile first” media queries
The tricky bits
Choosing breakpoints
Responsive images
One size doesn’t fit all
Responsive limitations
Wrapping Up Style Sheets
Test Yourself
CSS Review: Table Properties
IV. JavaScript for Behaviors
19. Introduction to JavaScript
What Is JavaScript?
What it isn’t
What it is
What JavaScript can do
Adding JavaScript to a Page
Embedded script
External scripts
Script placement
The Anatomy of a Script
The basics
Statements
Comments
Variables
Data types
Arrays
Comparison operators
Equal versus identical
Mathematical Operators
If/else statements
That covers “if,” but what about “else”?
Loops
Functions
Native functions
Custom functions
Arguments
Returning a value
Variable scope and the var keyword
The Browser Object
Events
As an HTML attribute
As a method
addEventListener
Putting It All Together
Example 1: A tale of two arguments
Example 2: The longest word
Test Yourself
20. Using JavaScript
Meet the DOM
The node tree
Accessing DOM nodes
By element name
By id attribute value
By class attribute value
By selector
Accessing an attribute value
Manipulating nodes
Adding and removing elements
For further reading
Polyfills
HTML5 shiv (or shim)
Modernizr
Selectivizr
Respond.js
JavaScript Libraries
A few libraries you ought to know
How to use a JS library (jQuery)
Download the jQuery .js file
Add it to your document
Get “ready”
Scripting with jQuery
But what if I don’t know how to write scripts...?
Big Finish
Test Yourself
V. Creating Web Graphics
21. Web Graphics Basics
Image Sources
Creating your own images
Stock photography and illustrations
Clip art and icons
Hire a designer
Meet the Formats
The ubiquitous GIF
8-bit indexed color
GIF compression
Transparency
Interlacing
Animation
The photogenic JPEG
24-bit Truecolor images
Lossy compression
Progressive JPEGs
Decompression
The powerful PNG
Multiple image formats
Transparency
Progressive display (interlacing)
Gamma correction
Embedded text
When to use PNGs
Choosing the best format
Saving an image in your chosen format
Image Size and Resolution
Goodbye inches, hello pixels!
Pixel madness
Resizing images
Working with Transparency
How binary transparency works
How alpha transparency works
Making transparent GIFs and PNGs
Avoiding “halos”
Adding transparency to flattened images
Introduction to SVG
Drawing with XML
SVG tools
Adding SVG to a page
But wait...there’s more!
Browser support
For further reading
Summing Up Images
Test Yourself
22. Lean and Mean Web Graphics
General Image Optimization Strategies
Optimizing GIFs
Reducing the number of colors
Reducing dithering
Using the Lossy filter
Designing for GIF compression
Keep it flat
Horizontal stripes
Summing up GIF optimization
Optimizing JPEGs
Getting to know JPEG compression
Avoid detail
Avoid flat colors
Be aggressive with compression
Choose optimized JPEGs
Blurring or smoothing the image
Selective quality (Fireworks)
Summing up JPEG optimization
Optimizing PNGs
PNG-24
PNG-8
Optimize to File Size
Optimization in Review
Test Yourself
A. Answers
Chapter 1: Where Do I Start?
Chapter 2: How the Web Works
Chapter 3: Some Big Concepts You Need to Know
Chapter 4: Creating a Simple Page (HTML Overview)
Chapter 5: Marking Up Text
Exercise 5-1
Exercise 5-2
Exercise 5-3
Chapter 6: Adding Links
Exercise 6-1
Exercise 6-2
Exercise 6-3
Exercise 6-4
Exercise 6-5
Exercise 6-6
Exercise 6-7
Chapter 7: Adding Images
Exercise 7-1
Chapter 8: Basic Table Markup
Exercise 8-1
Exercise 8-2
Exercise 8-3
Exercise 8-4
Chapter 9: Forms
Exercises 9-1 through 9-3: Final source document
Chapter 10: What’s Up, HTML5?
Chapter 11: CSS Orientation
Exercise 11-1
Chapter 12: Formatting Text
Exercises 12-1 through 12-3
Chapter 13: Colors and Backgrounds
Exercise 13-1
Exercise 13-2
Exercise 13-3
Exercise 13-4
Exercise 13-5
Exercise 13-6
Exercise 13-7
Exercise 13-8
Chapter 14: Thinking Inside the Box
Exercise 14-1
Exercise 14-2
Exercise 14-3
Chapter 15: Floating and Positioning
Exercise 15-1
Exercise 15-2
Exercise 15-3
Exercise 15-4
Exercise 15-5
Chapter 16: Page Layout with CSS
Exercise 16-1
Exercise 16-2
Chapter 17: Transitions, Transforms, and Animation
Exercise 17-1
Exercise 17-2
Chapter 18: CSS Techniques
Exercises 18-1 through 18-3
Chapter 19: Introduction to JavaScript
Exercise 19-1
Exercise 19-2
Chapter 20: Using JavaScript
Chapter 21: Web Graphics Basics
Chapter 22: Lean and Mean Web Graphics
B. CSS3 Selectors
Index
About the Author
Colophon
Copyright
← Prev
Back
Next →
← Prev
Back
Next →