Home Page Icon
Home Page
Table of Contents for
Cover Page
Close
Cover Page
by Jon Duckett
HTML & CSS: Design and Build Websites
Cover Page
Title Page
Copyright
CREDITS
Tryout
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
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 P1AGE 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
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
3: LISTS
ORDERED LISTS
UNORDERED LISTS
DEFINITION LISTS
NESTED LISTS
EXAMPLE
SUMMARY LISTS
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
SUMMARY
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 DIMENSIONS
CROPPING IMAGES
IMAGE RESOLUTION
VECTOR IMAGES
ANIMATED GIFS
TRANSPARENCY
EXAMINING IMAGES ON THE WEB
HTML5: FIGURE AND FIGURE CAPTION
EXAMPLE IMAGES
SUMMARY IMAGES
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
7: FORMS
WHY FORMS?
FORM CONTROLS
HOW FORMS WORK
FORM STRUCTURE
TEXT INPUT
PASSWORD INPUT
TEXT AREA
RADIO BUTTON
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
SUMMARY
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
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
10: INTRODUCING CSS
UNDERSTANDING CSS: THINKING INSIDE THE BOX
CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS
CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED
EXAMPLE
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
11: COLOR
FOREGROUND COLOR
BACKGROUND COLOR
UNDERSTANDING COLOR
CONTRAST
CSS3: OPACITY
CSS3: HSL COLORS
CSS3: HSL & HSLA
EXAMPLE COLOR
SUMMARY COLOR
12: TEXT
TYPEFACE TERMINOLOGY
CHOOSING A TYPEFACE FOR YOUR WEBSITE
TECHNIQUES THAT OFFER A WIDER CHOICE OF TYPEFACES
SPECIFYING TYPEFACES
SIZE OF TYPE
TYPE SCALES
UNITS OF TYPE SIZE
MORE FONT CHOICE
UNDERSTANDING FONT FORMATS
BOLD
ITALIC
UPPERCASE & LOWERCASE
UNDERLINE & STRIKE
LEADING
LETTER & WORD SPACING
ALIGNMENT
VERTICAL ALIGNMENT
INDENTING TEXT
CSS3: DROP SHADOW
FIRST LETTER OR LINE
STYLING LINKS
RESPONDING TO USERS
ATTRIBUTE SELECTORS
EXAMPLE TEXT
SUMMARY TEXT
13: BOXES
BOX DIMENSIONS
LIMITING WIDTH
LIMITING HEIGHT
OVERFLOWING CONTENT
BORDER, MARGIN & PADDING
WHITE SPACE & VERTICAL MARGIN
BORDER WIDTH
BORDER STYLE
BORDER COLOR
SHORTHAND
PADDING
MARGIN
CENTERING CONTENT
IE6 BOX MODEL
CHANGE INLINE/BLOCK
HIDING BOXES
CSS3: BORDER IMAGES
CSS3: BOX SHADOWS
CSS3: ROUNDED CORNERS
CSS3: ELLIPTICAL SHAPES
EXAMPLE BOXES
SUMMARY BOXES
14: LISTS, TABLES AND FORMS
BULLET POINT STYLES
IMAGES FOR BULLETS
POSITIONING THE MARKER
LIST SHORTHAND
TABLE PROPERTIES
BORDER ON EMPTY CELLS
GAPS BETWEEN CELLS
STYLING FORMS
STYLING TEXT INPUTS
STYLING SUBMIT BUTTONS
STYLING FIELDSETS & LEGENDS
ALIGNING FORM CONTROLS: PROBLEM
ALIGNING FORM CONTROLS: SOLUTION
CURSOR STYLES
WEB DEVELOPER TOOLBAR
EXAMPLE LISTS, TABLES AND FORMS
EXAMPLE LISTS, TABLES AND FORMS
SUMMARY LISTS, TABLES AND FORMS
15: LAYOUT
KEY CONCEPTS IN POSITIONING ELEMENTS
CONTROLLING THE POSITION OF ELEMENTS
NORMAL FLOW
RELATIVE POSITIONING
ABSOLUTE POSITIONING
FIXED POSITIONING
OVERLAPPING ELEMENTS
FLOATING ELEMENTS
USING FLOAT TO PLACE ELEMENTS SIDE-BY-SIDE
CLEARING FLOATS
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
MULTIPLE STYLE SHEETS
EXAMPLE LAYOUT
SUMMARY LAYOUT
16: IMAGES
CONTROLLING SIZES OF IMAGES IN CSS
ALIGNING IMAGES USING CSS
CENTERING IMAGES USING CSS
BACKGROUND IMAGES
REPEATING IMAGES
BACKGROUND POSITION
SHORTHAND
IMAGE ROLLOVERS & SPRITES
CSS3: GRADIENTS
CONTRAST OF BACKGROUND IMAGES
EXAMPLE IMAGES
EXAMPLE IMAGES
SUMMARY IMAGES
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
SUMMARY
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
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
INDEX
TROUBLESHOOTING
HTML ELEMENTS
HTML ATTRIBUTES
CSS PROPERTIES
PSEUDO-CLASSES, ELEMENTS & RULES
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Title Page
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset