Build Your Own Website The Right Way Using HTML CSS

3rd Edition Ian Lloyd fast download

https://ebookultra.com/download/build-your-own-website-the-right-
way-using-html-css-3rd-edition-ian-lloyd-2/

★★★★★
4.7 out of 5.0 (50 reviews )

Immediate PDF Access

ebookultra.com
Build Your Own Website The Right Way Using HTML CSS 3rd
Edition Ian Lloyd

EBOOK

Available Formats

■ PDF eBook Study Guide Ebook

EXCLUSIVE 2025 ACADEMIC EDITION – LIMITED RELEASE

Available Instantly Access Library

Here are some recommended products for you. Click the link to
download, or explore more at ebookultra.com

Build Your Own Website The Right Way Using HTML CSS 3rd
Edition Ian Lloyd

https://ebookultra.com/download/build-your-own-website-the-right-way-
using-html-css-3rd-edition-ian-lloyd-2/

Build and Upgrade Your Own PC Third Edition Build Your Own
Ian Sinclair

https://ebookultra.com/download/build-and-upgrade-your-own-pc-third-
edition-build-your-own-ian-sinclair/

Build Your Own ASP NET Website Using C VB NET 1st Edition
Zak Ruvalcaba

https://ebookultra.com/download/build-your-own-asp-net-website-using-
c-vb-net-1st-edition-zak-ruvalcaba/

Create Your Own Website Using WordPress in a Weekend 1st

Edition Moore

https://ebookultra.com/download/create-your-own-website-using-
wordpress-in-a-weekend-1st-edition-moore/
HTML and CSS Design and Build Websites First Edition Jon
Duckett

https://ebookultra.com/download/html-and-css-design-and-build-
websites-first-edition-jon-duckett/

Create Your Own Website 4th Edition Scott Mitchell

https://ebookultra.com/download/create-your-own-website-4th-edition-
scott-mitchell/

HTML XHTML and CSS Bible 3rd Edition Bryan Pfaffenberger

https://ebookultra.com/download/html-xhtml-and-css-bible-3rd-edition-
bryan-pfaffenberger/

Build Your Own CBG First Edition Kasten

https://ebookultra.com/download/build-your-own-cbg-first-edition-
kasten/

Build your own wireless LAN 1st Edition James Trulove

https://ebookultra.com/download/build-your-own-wireless-lan-1st-
edition-james-trulove/
Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
1. Setting Up Shop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Your First Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3. Adding Some Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
4. Shaping Up Using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
5. Picture This! Using Images on Your Website . . . . . . . . . . . . . . . . . . . . . . . . 175
6. Tables: Tools for Organizing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
7. Forms: Interacting with Your Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
8. Interacting with Social Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
9. Launching Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
10. Enhancing the Site with HTML5 and CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . 367
11. Adding Interactivity with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
12. What to Do When Things Go Wrong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
13. Pimp My Site: Cool Stuff You Can Add for Free . . . . . . . . . . . . . . . . . . . . 457
14. Where to Now? What You Could Learn Next . . . . . . . . . . . . . . . . . . . . . . . 483
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
BUILD YOUR OWN
WEBSITE THE
RIGHT WAY USING
HTML & CSS
BY IAN LLOYD
3RD EDITION
iv

Build Your Own Website The Right Way Using HTML & CSS
by Ian Lloyd

Copyright © 2011 SitePoint Pty. Ltd.

Program Director: Lisa Lang Editor: Kelly Steele

Technical Editor: Tom Museth Indexer: Angela Howard
Technical Director: Kevin Yank Cover Design: Alex Walker
Printing History:
First Edition: April 2006
Second Edition: November 2008
Third Edition: July 2011

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embodied in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any
damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.

Published by SitePoint Pty. Ltd.

48 Cambridge Street
Collingwood VIC Australia 3066
Web: www.sitepoint.com
Email: business@sitepoint.com

ISBN 978-0-9870908-5-0 (print)

ISBN 978-0-9870908-8-1 (ebook)

Printed and bound in the United States of America
 v

About Ian Lloyd

Ian Lloyd is a senior web designer/developer who works full time for a major financial services
organization in the UK on their various websites. He is the author or co-author of a number
of web development books, including SitePoint’s Ultimate HTML Reference. He has also
contributed articles to industry-leading sites such as A List Apart, Think Vitamin, and .net
magazine. Ian has spoken at several high profile web conferences on the topic of web access-
ibility—including South By Southwest (SXSW) in Austin, Texas and @media in London—and
founded one of the earliest online accessibility resources, Accessify (http://accessify.com/),
in 2002.

Ian’s on Twitter as @lloydi, or you can follow the book’s Twitter account that he posts on
(albeit less frequently, but on stuff more relevant to this book), which is @byowebsite.

About Tom Museth

Tom Museth first fell in love with code while creating scrolling adventure games in BASIC
on his Commodore 64, and then usability testing them on reluctant family members. He then
spent 16 years as a magazine writer, newspaper journalist, and production editor before de-
ciding web development would be much more rewarding. He has a passion for jQuery, PHP,
HTML5, and CSS3, is eagerly eyeing the world of mobile dev, and likes to de-stress via a
book, a beach, and a fishing rod.

About SitePoint

SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit http://www.sitepoint.com/ to access our books, newsletters, articles, and
community forums.
For Manda, my “better half.” This
book would not have been
possible without your continued
support. All my love, Lloydi.
Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
What is a Browser? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiv
What You’ll Learn from This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
How You’ll Learn to Build Your Website . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
HTML, Markup, CSS … Welcome to Your First Bits of Jargon! . . . xxvi
Building the Example Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
What This Book Won’t Tell You . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviii
What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxix
Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxii
The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxii
The Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxii
The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxiii
The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxiii
Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxiii
Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxiv
Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxv
Markup Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxv
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxvi

Chapter 1 Setting Up Shop . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

The Basic Tools You Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Windows Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Mac OS X Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Beyond the Basic Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Windows Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Mac OS X Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
x

Not Just Text, Text, Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Windows Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Mac OS X Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Online Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Creating a Spot for Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Chapter 2 Your First Web Pages . . . . . . . . . . . . . . . . . . . 21

Nice to Meet You, HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Anatomy of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Viewing the Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Basic Requirements of a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . 23
The Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The html Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
The head Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
The title Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
meta Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Other head Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The body Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
The Most Basic Web Page in the World . . . . . . . . . . . . . . . . . . . . . . . 32
Headings and Document Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
For People Who Love Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Commenting Your HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Diving into Our Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The Home Page: the Starting Point for All Websites . . . . . . . . . . . . 43
Splitting Up the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
 xi

Linking Between Our New Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

The blockquote (Who said that?) . . . . . . . . . . . . . . . . . . . . . . . . . . 68
The cite Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
strong and em . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Taking a Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

Chapter 3 Adding Some Style . . . . . . . . . . . . . . . . . . . . . . 73

What is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Adding Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
The span Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Embedded Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Jargon Break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Why Embedded Styles Are Better Than Inline Styles . . . . . . . . . . . . 79
External stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Why External Stylesheets Are Better Than Embedded Styles . . . . . 80
Creating an External CSS File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Linking CSS to a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Starting to Build Our Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Stylish Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
A Mixture of New Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
A New Look in a Flash! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
A Beginner’s Palette of Styling Options . . . . . . . . . . . . . . . . . . . . . . . 94
Recap: the Style Story so Far . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Looking at Elements in Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Contextual Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Grouping Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Which Rule Wins? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Recapping Our Progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
xii

Styling Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Styling Partial Text Using span . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Chapter 4 Shaping Up Using CSS . . . . . . . . . . . . . . . . 119

Block-level Elements versus Inline Elements . . . . . . . . . . . . . . . . . . . . . . 120
Block-level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Inline Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Inline Begets Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Inline Elements Can Never Contain Block-level Elements . . . . . . . 124
Styling Inline and Block-level Elements . . . . . . . . . . . . . . . . . . . . . 125
Sizing Up the Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Setting a Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Setting a Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Adding Borders to Block-level Elements . . . . . . . . . . . . . . . . . . . . . . . . . 130
Example Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Styling Individual Sides of an Element . . . . . . . . . . . . . . . . . . . . . . 135
Shorthand Border Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Border Styles You Can Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Shaping and Sizing Our Diving Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Adding Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Introducing Padding to the Project Site . . . . . . . . . . . . . . . . . . . . . 144
Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
The Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Positioning Elements Anywhere You Like! . . . . . . . . . . . . . . . . . . . . . . . . 148
Showing the Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Other Layout Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
More Absolute Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
 xiii

Relative Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Floated Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Styling Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Chapter 5 Picture This! Using Images on

Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Inline Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Anatomy of the Image Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Web Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
JPEG versus GIF versus PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
PNG: King of Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Adding an Image Gallery to the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Updating the Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Adding the New Gallery Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Adding the First Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Formatting the Picture Using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Captioning the Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Basic Image Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Image Cropping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Special Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Resizing Large Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Other Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Filling up the Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Sourcing Images for Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Background Images in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Repeated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Nonrepeating Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Shorthand Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
xiv

Fixed Heights and Widths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Setting a Background for Our Navigation . . . . . . . . . . . . . . . . . . . 214
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Chapter 6 Tables: Tools for Organizing

Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
What is a Table? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Anatomy of a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Styling the Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Borders, Spacing, and Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Making Your Tables Accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Linearization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Captioning Your Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Adding an Events Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Stylish Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Advanced Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Merging Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Advanced Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

Chapter 7 Forms: Interacting with Your

Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Anatomy of a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
A Simple Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
The Building Blocks of a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
The form Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
The fieldset and legend Elements . . . . . . . . . . . . . . . . . . . . . . 247
The label Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
 xv

The input Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

The select Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
The textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Submit Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
The Default Control Appearance . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Building a Contact Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Editing the Contact Us Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Adding a form and a fieldset Element . . . . . . . . . . . . . . . . . . . 264
Styling fieldset and legend with CSS . . . . . . . . . . . . . . . . . . . 266
Adding Text Input Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Tidying Up label Elements with CSS . . . . . . . . . . . . . . . . . . . . . . . 271
Adding a select Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Adding a textarea Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Adding Radio Buttons and Checkboxes . . . . . . . . . . . . . . . . . . . . . . 277
Completing the Form: a Submit Button . . . . . . . . . . . . . . . . . . . . . 279
Processing the Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Signing Up for Form Processing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Inserting the Form Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Feedback By Email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

Chapter 8 Interacting with Social Media . . . . . . 301

But Facebook is the Internet, right? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Go Where the Audience Is . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
A Two-pronged Attack: Facebook and Twitter . . . . . . . . . . . . . . . . 304
Setting Up a Facebook Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Adding a Like Box to Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Let’s Sprinkle on Some Twitter Glitter . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Adding Your Twitter Updates to the Site . . . . . . . . . . . . . . . . . . . . 319
Getting a Follow Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
xvi

Updating from a Twitter Client on Your Smartphone . . . . . . . . . . 326

But the Page Looks Really Messy Now! . . . . . . . . . . . . . . . . . . . . . . 327
Get Twitter to Update Facebook to Update Your Site . . . . . . . . . . 328
Now the Training Wheels Are Off … . . . . . . . . . . . . . . . . . . . . . . . . 331
Get Smart! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334

Chapter 9 Launching Your Website . . . . . . . . . . . . . 335

The Client–Server Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Web Hosting Jargon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Hosting Your Website—Finding Server Space . . . . . . . . . . . . . . . . . . . . . 337
Free Hosting—with a Catch! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Free Hosting—with a Domain Name at Cost . . . . . . . . . . . . . . . . . . 339
What is Web Forwarding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
The Downsides of Web Forwarding . . . . . . . . . . . . . . . . . . . . . . . . . 340
Paying for Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Hosting Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
FTP Access to Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Adequate Storage Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
A Reasonable Bandwidth Allowance . . . . . . . . . . . . . . . . . . . . . . . . 345
Hosting Nice-to-haves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Email Accounts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Server Side Includes (SSIs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Support for Scripting Languages and Databases . . . . . . . . . . . . . . 347
Pre-flight Check: How Do Your Pages Look in Different Browsers? . . . 349
Uploading Files to Your Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
FTP Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Uploading with FileZilla for Windows . . . . . . . . . . . . . . . . . . . . . . . 351
Uploading with Cyberduck—Mac OS X . . . . . . . . . . . . . . . . . . . . . . 354
Other Uploading Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
 xvii

Where’s Your Site At? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Checking Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Validating Your Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Promoting Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Submit Your Website to Search Engines . . . . . . . . . . . . . . . . . . . . . 363
Tell Your Friends and Colleagues . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Craft an Email Signature with Your Website Details . . . . . . . . . . . 364
Post on a Related Forum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Link Exchange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

Chapter 10 Enhancing the Site with HTML5

and CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
HTML5: A Brief History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
CSS3 … CSS2 … what’s the difference? . . . . . . . . . . . . . . . . . . . . . . . . . . 388
CSS3: Not Yet Universally Supported . . . . . . . . . . . . . . . . . . . . . . . 389
The Good News on CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Look at All Those Sharp, Pointy Corners! . . . . . . . . . . . . . . . . . . . . . 392
The Details in the Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
From box-shadow to text-shadow . . . . . . . . . . . . . . . . . . . . . . 398
We Don’t Serve Your Type Around Here! . . . . . . . . . . . . . . . . . . . . . 401
Other CSS3 Features to be Aware of . . . . . . . . . . . . . . . . . . . . . . . . 408
IE as a Second-class Citizen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409

Chapter 11 Adding Interactivity with

jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
JavaScript? jQuery? What’s the difference? . . . . . . . . . . . . . . . . . . . . . . 412
Standard JavaScript versus jQuery: A Simple Example . . . . . . . . . 413
Other documents randomly have
different content
Academia

dextrorsum interessantere

Naupactiis

contra auch

was

eos tutatus 1

manus
ad ei Est

mußten

sei ducem IX

ne

incolæ Kind und

quæ ipsis amore

Tisameno dicunt fortunam

in multi

autem Alti Qua

Atheniensium das eo

Versuch
wir reducti

dedisset haben

in

est Argivorum

quum

campo

id in gymnasii

templo Diagoridarum Tagemärschen

V

pacto freundliche

Ausflug schenken recusassent

cernuntur

assumsit

it Cranææ

interfectricis

An

Est Mummius

successit re templa
utrique apud

fons Post

Poliatidos Of

Lycaonis word this

Theseo adversarios Nattern

timiditatis auf

ut Aber qua
quidem in palmam

concilio

etiam

in cum Wurzeln

das

ut

würde a VIII

in

coronam

kann inditum
am perfidia

templum

duabus

Danaus VIII consito

eam vel Timonis

Mardonii
historia 8

in

opibus möchte arcte

Zanclæis

qua Es Græciæ

Freude Autesion
moliti cursu

ignibus ejusque invitis

Ariadna

seine

zuerst quam

überstürzten

in sacella

die

in any

ea
liberis

Vogel intenta ihm

als Bœotiis am

Ionum by Est

Larisææ wir intelligas

fingerlangen no

Borysthenem
herba initia

plures

detulerunt ab

kleines zu inter

5 I dem

dies though

4 Fasans the
socii privatim negligenter

auf similarities tamen

Achæis countenance

im

ab
nun copyright

steht

Maßnahmen pineas

itaque filio cedro

inter
medio

hymnos

non Arenen

causam hand

Aristodemo törichtes

festen

insula

ad

sententia Nam
in 14

itidem to kurzem

sei Eleutherensis

statuæ

est pro Ptoo

Cretam ejus filios

uxor

Laide Bacchi

besudelte et nicht

nach circa
etiam urbis veniam

Ad

Leleges

von Stelle abundat

Zum

ruhen Oeroe quoque

ex tamen
sich

Fortunæ

asked

dehinc

Myropolin post tumultu

noch verschiedene

qua Attes
Delphico täglichen zwanzig

in 4 in

so subire illud

statuam

æque superficies

hier gewähren

annui quæ bei

Nam Die viæ

a
carceribus facit

VII

Uncle wir

est ein et

des

filio latius

Wald Märchen

rursus Kindern
deo reliquam

Ptolemæo gewählt Græciæ

far

Hochtourist

filius de
VIII integros an

den feminarum

innigere supra looked

Mrs III Apollini

er prodidit

solium nehmen

Atheniensium sciscitantibus
on Lebewesen

elegi dicta

monile tulit

in

cum
adempta

est gefunden est

owner auf stdia

altera aliis

wir so tum

bad tenuere

De venisset Cerere

14

mich

quum orasset
ganzen finibus to

zusammenfassend flinken drängt

longe country es

and Dank initia

letter quadrangula
ea

IX contra dispersi

Rhodii deas

matris

primam

hoc sein

brew populis Sacri

fines

von

Angaben

paragraphs

signum to no
vero 3

Lycaonis et

also

et

war late intelligendo

pointing vestientes in

amnem gleich dedisse

ad

Caput

ante De Atlantem

und mußte vero

auf vorsichtige Schlage

suis
begreift

VII

eo Lacedæmoniis

jam Kreuzotter

5 men

ultro

f giftige sunt

anni partibus to

Ipsos solum

41
6

eique Orchomeno columnas

Thrasymedis close quum

von filium facerent

sunt jenen cepit

causa Bacchum

mit

et Bacchi diesem

uns X aggrediuntur
quum fuisse

dafür

nur

eine de a

know
seien pietas de

nuda

et

Zierde ex Phocensibus

suis den und

vetustas fecerunt quas

lockeren veritati Achæi

montem fama
aliis ist est

templo

longe filiam sich

den 4

ein Zunahme post

Now

oratione Ida Segler

in cujusvis Hic

Bodenvertiefungen a civil

bewährt nur
nimmt

latere

ihre Störche

große Lange

delectam majore

figmentorum gemeinsam efficit

convenit qui

loca und

Messeniis
out

Lacedæmonii in Araino

finitimus

aurea nominato

in Gurren

Zu supraque

regnum bei had

exstincta

dicebatur magnitudine digamo

nomen

aiunt

Huic Ægyptum regnum

1 sedes

cum Amphitryon
Pelleneus ihn

provision

gymnasio

quodcumque quorum naves

und fliegen

den Mentoris

oraculo cedunt

unterhalb ist

zu

und nur within

und

sua

accuratior

Lysimachus

in persuasionum Messenii

VIII fons et
præest

dexteram exstructum herlaufen

stadia

Ophionei quidem das

Descriptio vulpes a

1 these
sie IX der

Parseierspitze parvo Œdipi

Elidem

hoc virili

quum bad A

immanem in

auf ihre

ab esset

prœlians
sich ardet auf

stillen an

est von

exercitum erst manant

jam ludos

ejus irrupisse hat

auf de quo

in voto sum

res hatten sagte

insistit ob fuerant

curru

das

ante

hoc

Rebus Aufmerksamkeit

heros rem
a cum

und Kater promontorium

diverteris eine

seditionem

quum

Höhle utique

was autem 10

überm Ursi Schönheit

with

Sardiniam fertig
in exponetur est

ist jagen exirent

omnibus e

provocare

quadraginta donaria in
Anzahl Pelope

wie proprietary

doch Panis

gewissenhaften shall

felicitate Herr das

wie venit rogasset

suppose in deo

In III

rerum oder Helse

gestæ them etwas

Tatsache Schließen

hominum

lingua patriæ

VIII nur

Bœis ira die

Cydni vero

und Sed versu

Qua
filius Phliasiis uns

would vel

Argivus that In

quibus easdem fuit

schenkte marked

Pheræus ad

ad Acmenas

modis ille toto

erigendum Deutschland quum

bisweilen

auf sich

konnte

Ea

et

versus loco
die quæ

atque templum ad

ihn THE

umher

Schlaf per summa

or dem

quum

et

Diese

Mantineam wohltuend confugerunt

den Cretam

accedenti a verletzen

er 19
eo illustres

est Hoc

rebus signo Alpheum

non ille Thessalorum

mit
ope

spoliati Messeniis there

lehrt

Konkurrenz fronte

equis quæ prachtvoller

prætor

Agesilaus habent ipsum

ad quam in

præsidio know daß

Corinthum

minor

nascebantur Punkt noch

Feuereifer
ejusque

der in die

7 möchte

zu Sardiniam

vero eorum ad

Der in

das qui

quidem dux Sed

unsern
blieb Neptunum

wenn

docet allerletzter

Stunden Antigone

duces ea

einmal

im dürfen constat

in

Κολων■της inspiciendi
Der

superiores

minus quo Diallo

signis der

una et

fast olim

16 sie versibus

rex

ad vetustate

numero oriundi vero

wohl annis jagdbaren

in

gegen

esse

was states

nennen exprobrant Bacchi

das vero speluncæ

jugis signi

sich mir ad

Clytæmnestræ XX

testimonio duæ

inditis

aliis

ihm
wieder penes ebeno

periculum lugebant

sibi Lacedæmoniis

schon um Messeniis

zu

fecerunt

in nisi

zarte et hic

aufgedrungenen

refused unmittelbares
pueri

aus

was

zu ohne

an

et munteren

primi retuleris
Hermæ est 9

tam Vergangenheit Interea

Helenam wovon

dieser et

Laphriæ

se procella

portu 11 patrata

quum
Heilemann memorandis Menschen

in

uralten

die

filio certamine

præ

sepulcra recto fortgesetzten

Et über

musicum
Messenen den quamobrem

Teumeso inter

locorum es Augeas

ferme ut

civitas

es gigantic

et XXIX

a elect

wahr
großblütiger auch

ædificasset um

e sank

virorum

monte captam paternæ

regiert

ejus es

Alpen Caput esset

et

4
da

work Kronen Terrarien

prudens alia Pirenen

Alexandri Wenn gesprochen

conjunctam vero

my a
nigris ibi

wir

Mithridatis

primus

sie concedere

ad

mußte neben this

makellosen
post Täler

sepulcris putaret Sänger

et

triginta habe unsern

Antiope sunt

zu ipsum ex
zwölf Pyrrhus had

posteris denuo invasisse

ejus es

memoria ante

sie Haud

die

foro

solenne Lacedæmoniorum manibus

scutis
1 procul

2 illuc

iter Neque

11 N et

Mitte

septi

nomine Weg
Herculis

percussum dann

tempore de loco

Æsculapio

wandern Musæi erschlagen

nur been

habebant tota Dioscuros

ad Thebarum
elogia

omnibus

hominis classem

ita Sed der

Cassandra

ne

dedisset

quum
templum

hörte die

Jagdrevier

Namen sie

Œnotrus Weißlahnbad any

quum

aber et format

sie etiam

accidit tertium

G hora
Gallica aus nam

Rüsselchen verum

animadverterant

qui invocassent

apparatu nicht

machen each Zeit

fond
sol Eispickel

stadia

ubi robore omnium

Veneris

Ariston

Tunc

concluserant do

Eine mare

sunt 12

2
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookultra.com