Build Your Own Website The Right Way Using HTML & CSS
Start Building Websites Like a Pro!
Published on 23. July 2011
500 pages
978-1-4571-9178-7 (ISBN)
Description
With over 60,000 copies sold since its first edition, this SitePoint best-seller has just had a fresh update to include recent advances in the web industry.With the first two editions coming highly recommended by established, leading web designers and developers, the third edition with all its extra goodies will continue that trend. Also fully updated to include the latest operating systems, web browsers and providing fixes to issues that have cropped up since the last edition.Readers will learn to:Style text and control your page layout with CSSCreate and Optimize graphics for the WebAdd interactivity to your sites with formsInclude a custom search, contact us page, and a News/Events section on your siteTrack visitors with Google AnalyticsExtend your reach and connect your site with Social MediaUse HTML5&CSS3 to add some cool, polished features to your siteUse diagnosis/debug tools to find any problemsAnd lots more.
More details
Other editions
Additional editions
Book
08/2011
3rd Edition
SitePoint Pty Ltd
€30.50
Shipment within 3-4 weeks
Content
- Front Cover
- Front Matter
- Build Your Own Website The Right Way Using HTML & CSS
- Copyright
- Bios
- Dedication
- Table of Contents
- Preface
- What is a Browser?
- Who Should Read This Book
- What You'll Learn from This Book
- How You'll Learn to Build Your Website
- HTML, Markup, CSS . Welcome to Your First Bits of Jargon!
- Building the Example Site
- What This Book Won't Tell You
- What's in This Book
- Where to Find Help
- The SitePoint Forums
- The Book's Website
- The Code Archive
- Updates and Errata
- The SitePoint Newsletters
- The SitePoint Podcast
- Your Feedback
- Acknowledgements
- Conventions Used in This Book
- Markup Samples
- Tips, Notes, and Warnings
- Body
- Setting Up Shop
- The Basic Tools You Need
- Windows Basic Tools
- Your Text Editor: Notepad
- Your Web Browser: Internet Explorer
- Mac OS X Basic Tools
- Your Text Editor: TextEdit
- Your Web Browser: Safari
- Beyond the Basic Tools
- Windows Tools
- NoteTab
- Firefox
- Mac OS X Tools
- TextWrangler
- Firefox
- Not Just Text, Text, Text
- Windows Tools
- Picasa
- Mac OS X Tools
- Preview
- iPhoto
- Online Tools
- Creating a Spot for Your Website
- Windows
- Mac OS X
- Summary
- Your First Web Pages
- Nice to Meet You, HTML
- Anatomy of a Web Page
- Viewing the Source
- Basic Requirements of a Web Page
- The Doctype
- The html Element
- The head Element
- The title Element
- meta Elements
- Other head Elements
- The body Element
- The Most Basic Web Page in the World
- Analyzing the Web Page
- Headings and Document Hierarchy
- Paragraphs
- For People Who Love Lists
- Commenting Your HTML
- Using Comments to Hide Markup from Browsers Temporarily
- Symbols
- Diving into Our Website
- The Home Page: the Starting Point for All Websites
- Setting a Title
- Welcoming New Visitors
- What's It All About?
- Adding Structure
- Nesting Explained
- The Sectioned Page: All Divided Up
- Splitting Up the Page
- Linking Between Our New Pages
- The blockquote (Who said that?)
- The cite Element
- strong and em
- Taking a Break
- Summary
- Adding Some Style
- What is CSS?
- Inline Styles
- Adding Inline Styles
- The span Element
- Embedded Styles
- Jargon Break
- Why Embedded Styles Are Better Than Inline Styles
- External stylesheets
- Why External Stylesheets Are Better Than Embedded Styles
- The Bad Old Days
- Happy Days! CSS Support Is Here
- Creating an External CSS File
- Linking CSS to a Web Page
- Starting to Build Our Stylesheet
- Stylish Headings
- A Mixture of New Styles
- A New Look in a Flash!
- A Beginner's Palette of Styling Options
- Recap: the Style Story so Far
- Changing the Emphasis
- Emphasis or Italics? Strong or Bold?
- Looking at Elements in Context
- Contextual Selectors
- Grouping Styles
- Which Rule Wins?
- Recapping Our Progress
- Styling Links
- Link States
- Class Selectors
- Styling Partial Text Using span
- Summary
- Shaping Up Using CSS
- Block-level Elements versus Inline Elements
- Block-level Elements
- Inline Elements
- Inline Begets Inline
- Inline Elements Can Never Contain Block-level Elements
- Styling Inline and Block-level Elements
- Sizing Up the Blocks
- Setting a Width
- Setting a Height
- Adding Borders to Block-level Elements
- Example Borders
- Simple Black Border
- Inset Border
- Colored Ridge Border
- Bold Border Effects
- Simple Gray Border
- Simple Gray Border (Version 2!)
- Dotted, Red Border
- Dashed, Gray Border
- Double Borders
- Styling Individual Sides of an Element
- Shorthand Border Styles
- Border Styles You Can Use
- Shaping and Sizing Our Diving Site
- Adding Padding
- Introducing Padding to the Project Site
- Margins
- The Box Model
- Positioning Elements Anywhere You Like!
- Showing the Structure
- Absolute Positioning
- Getting Ready to Move into Position
- Other Layout Options
- More Absolute Positioning
- Relative Positioning
- Benefits of Relative Positioning
- Floated Positioning
- Styling Lists
- Summary
- Picture This! Using Images on Your Website
- Inline Images
- Anatomy of the Image Element
- The alt Attribute: Making Images Useful to Everyone
- Web Accessibility
- Screen Readers: Hearing the Web
- What Makes a Good alt?
- JPEG versus GIF versus PNG
- Transparency
- PNG: King of Transparency
- Adding an Image Gallery to the Site
- Updating the Navigation
- Adding the New Gallery Page
- Adding the First Image
- Formatting the Picture Using CSS
- Captioning the Picture
- Basic Image Editing
- Image Cropping
- Picasa
- Preview
- Special Effects
- Picasa
- Preview
- Resizing Large Images
- Picasa
- Preview
- Other Software
- Filling up the Gallery
- Sourcing Images for Your Website
- Background Images in CSS
- Repeated Patterns
- Horizontal Repeats
- Vertical Repeats
- Nonrepeating Images
- Shorthand Backgrounds
- Fixed Heights and Widths
- Setting a Background for Our Navigation
- Applying a Fade to the Tagline
- A Lick of Paint for the Main Heading
- Summary
- Tables: Tools for Organizing Data
- What is a Table?
- Anatomy of a Table
- Styling the Table
- Borders, Spacing, and Alignment
- class-ifying Your Tables
- Making Your Tables Accessible
- Linearization
- summary
- Captioning Your Table
- Adding an Events Table
- Stylish Table Cells
- Advanced Tables
- Merging Table Cells
- rowspan and colspan
- Advanced Accessibility
- The scope Attribute
- Summary
- Forms: Interacting with Your Audience
- Anatomy of a Form
- A Simple Form
- The Building Blocks of a Form
- The form Element
- The fieldset and legend Elements
- The label Element
- The input Element
- Text Input
- Setting the Value of a Text Box
- Password Input
- Hidden Inputs
- Checkboxes
- Preselecting Checkboxes
- Radio Buttons
- Preselecting Radio Buttons
- The select Element
- Preselecting Options
- The textarea Element
- Submit Buttons
- The Default Control Appearance
- Building a Contact Page
- Editing the Contact Us Page
- Adding a form and a fieldset Element
- Styling fieldset and legend with CSS
- Adding Text Input Controls
- Tidying Up label Elements with CSS
- Adding a select Element
- Adding a textarea Element
- Adding Radio Buttons and Checkboxes
- Completing the Form: a Submit Button
- Processing the Form
- Signing Up for Form Processing
- Inserting the Form Code
- Feedback By Email
- Summary
- Interacting with Social Media
- But Facebook is the Internet, right?
- Go Where the Audience Is
- A Two-pronged Attack: Facebook and Twitter
- Setting Up a Facebook Page
- Adding a Like Box to Your Site
- Yes! People Like Me! They Really Like Me!
- Let's Sprinkle on Some Twitter Glitter
- Adding Your Twitter Updates to the Site
- Getting a Follow Button
- Updating from a Twitter Client on Your Smartphone
- But the Page Looks Really Messy Now!
- Get Twitter to Update Facebook to Update Your Site
- Now the Training Wheels Are Off .
- Get Smart!
- Summary
- Launching Your Website
- The Client-Server Model
- Web Hosting Jargon
- Hosting Your Website-Finding Server Space
- Free Hosting-with a Catch!
- Free Hosting with Your ISP
- Free Hosting-with a Domain Name at Cost
- What is Web Forwarding?
- The Downsides of Web Forwarding
- Paying for Web Hosting
- Hosting Essentials
- FTP Access to Your Server
- Adequate Storage Space
- A Reasonable Bandwidth Allowance
- Hosting Nice-to-haves
- Email Accounts
- Server Side Includes (SSIs)
- Support for Scripting Languages and Databases
- Pre-flight Check: How Do Your Pages Look in Different Browsers?
- Uploading Files to Your Server
- FTP Settings
- Uploading with FileZilla for Windows
- Uploading with Cyberduck-Mac OS X
- Other Uploading Tools
- Where's Your Site At?
- Checking Links
- Validating Your Web Pages
- How to Validate Your Live Web Pages
- Validate Everything
- Promoting Your Website
- Submit Your Website to Search Engines
- Tell Your Friends and Colleagues
- Craft an Email Signature with Your Website Details
- Post on a Related Forum
- Link Exchange
- Summary
- Enhancing the Site with HTML5 and CSS3
- HTML5: A Brief History
- Paving the Cow Paths
- Browser Support for HTML5
- Fixing IE Support
- Replacing Generic divs with Proper HTML5 Elements
- Marking Up the Main Content
- The aside Element
- The footer Element
- The article Element
- The figure and figcaption Elements
- And There's Still More to HTML5
- HTML5 Forms Will Rock ... Soon
- More Complex HTML5 (and Related) Technologies
- CSS3 . CSS2 . what's the difference?
- CSS3: Not Yet Universally Supported
- In Support of Vendor Prefixes
- The Reasoning Behind Vendor Jargon
- The Good News on CSS3
- Look at All Those Sharp, Pointy Corners!
- The Details in the Shadows
- From box-shadow to text-shadow
- We Don't Serve Your Type Around Here!
- Google Web Fonts
- Other CSS3 Features to be Aware of
- IE as a Second-class Citizen
- Summary
- Adding Interactivity with jQuery
- JavaScript? jQuery? What's the difference?
- Standard JavaScript versus jQuery: A Simple Example
- How do I get jQuery and use it?
- Hang On a Moment!
- jQuery: Primed and Ready For Action
- Using jQuery on the Project Site
- Setting Up References to jQuery
- Adding Default Form Value
- Showing the Picture Gallery's Captions on Hover
- Summary
- What to Do When Things Go Wrong
- Prevention
- Keep Multiple Browsers Open While Developing
- Running Multiple Versions of Internet Explorer
- Validate HTML and CSS as You Go
- Learn About Known Browser CSS Bugs
- Prepare Your Browser for Battle-with Extensions!
- Get Firebug
- Install Web Developer Toolbar
- Add XRAY
- Inspecting Problems with Firebug
- Web Developer Toolbar
- Disable CSS
- Disable JavaScript
- Outline Elements on the Page
- Hide Images or Reveal alt Attributes
- View Information about CSS and JavaScript
- And So Much More .
- How to use XRAY
- Summary
- Pimp My Site: Cool Stuff You Can Add for Free
- Getting the Low-down on Your Visitors
- Choosing a Statistics Service
- Registering a Google Account
- Adding the Statistics Code to Your Web Pages
- What to Look for-a Summary
- A Search Tool for Your Site
- Searching by Genre
- Enhancing Search Further with jQuery
- Discussion Forums
- Summary
- Where to Now? What You Could Learn Next
- Improving Your HTML
- The Official Documentation
- Other Useful HTML Resources
- The Ultimate HTML Reference
- HTML Dog
- HTML5 Doctor
- A List Apart
- HTML5 & CSS3 For The Real World
- Advancing Your CSS Knowledge
- The Official Documentation
- The Ultimate CSS Reference
- HTML Dog
- CSS3.info
- CSS Discussion Lists
- The CSS Discuss List's Companion Site
- Learning JavaScript
- Becoming a jQuery Guru
- Improving Website Performance
- Learning Server-side Programming
- Scripting Languages in Brief
- Learning PHP
- Where Can You Learn PHP?
- Summary
- Index
- Back Cover
