Summary of Contents

Preface

1. Setting Up Shop

2. Your First Web Pages

3. Adding Some Style

4. Shaping Up Using CSS

5. Picture This! Using Images on Your Website

6. Tables: Tools for Organizing Data

7. Forms: Interacting with Your Audience

8. Interacting with Social Media

9. Launching Your Website

10. Enhancing the Site with HTML5 and CSS3

11. Adding Interactivity with jQuery

12. What to Do When Things Go Wrong

13. Pimp My Site: Cool Stuff You Can Add for Free

14. Where to Now? What You Could Learn Next

Index

BUILD YOUR OWN WEBSITE THE RIGHT WAY USING HTML & CSS

BY IAN LLOYD

3RD EDITION

Build Your Own Website The Right Way Using HTML & CSS

by Ian Lloyd

Copyright © 2011 SitePoint Pty. Ltd.

Program Director: Lisa Lang

Technical Editor: Tom Museth

Technical Director: Kevin Yank

Editor: Kelly Steele

Indexer: Angela Howard

Cover Design: Alex Walker

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: [email protected]

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 accessibility—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 deciding 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.

Preface

Congratulations on buying this book. Oh, wait a minute—perhaps you’re yet to buy it. Perhaps you’ve just picked up this book in your local bookshop, and are trying to decide whether it’s right for you. Why should this be the book that makes it into your shopping basket? The answer can be found in the title of the book. It’s all about getting it right the first time and not learning bad habits—bad habits that you have to unlearn at a later date—for the purpose of a quick result.

Let’s take a step back for a moment, and look at another skill that many people learn at some point in their lives: learning to drive. Apologies if that particular experience is also new to you, but stick with me. For many people, their first driving lessons can be very confusing; they have to figure out which pedals to press and in what order, and then drive off without hitting anything. Meanwhile, other more experienced people just jump into their cars, start the engine, and drive from A to B without really thinking about what they’re doing. These drivers may have picked up a few bad habits along the way, but if they learned with a proper driving instructor, the chances are they were taught properly from the beginning—following a strict set of rules to ensure they stayed safe.

The driving instructor tells you to check your mirrors diligently, observe speed limits, and avoid cutting corners (literally as well as metaphorically!). Imagine, though, if the instructor told you to ignore the speed limit signs, to put your foot down because the road is clear, or that the one-way sign wasn’t important at that time of night. It’d be a miracle if you passed your driving test, and chances are those bad habits would stay with you (so long as you could manage to keep your license).

Learning to build web pages can be a bit like that.

I’ve been designing and building websites for over ten years now, but I can clearly remember the joy of creating my first site. Admittedly, in hindsight, it was quite a nasty-looking website, but it achieved the goal at the time—I had published a website, and I was able to create it with the bare minimum of tools. It gave me an enormous sense of achievement, and made me want to learn more and create even better websites.

At the time, there were a limited number of books available that provided what I wanted, but I lapped up everything I could find, learning some tricks from books, and gaining other ideas from visiting websites. But then I discovered that I’d been doing it all wrong. The books I’d learned from had given me what later turned out to be poor advice, while the websites I’d visited had been built by people learning from the same sources and hence, making use of similar, bad techniques. So, what had gone wrong?

In the early days of the Web, when people first started to properly embrace the technology—publishing home pages and developing online corporate presences for their companies—they all realized quickly that the medium was limited. Necessity is the mother of invention, though, so web developers began to coax tricks and displays out of their web pages that were never intended by the technologies they used. Browsers helped along the way, adding features that offered even more opportunities for this kind of behavior.

Numerous books have been written on the topics of web design and programming, as have many free tutorials that you can read on the Web. Many of them were written during those heady years, and were based on what seemed like best practices back then; however, their authors were constrained by browsers that often rendered the same well-designed pages in vastly different ways. This meant that the tutorials’ authors needed to resort to abusing various features of these browsers, such as using data tables to lay out pages. This certainly encouraged many people to build their first web pages, but it ensured that bad habits were ingrained at an early stage, and many people are still using these bad practices years later.

Web developers the world over have learned bad habits (myself included) and must now try to unlearn them all. There’s no longer a need for these practices—they often produce pages that are inflexible, slow to download, and difficult to maintain—but like the badly taught driver who insists on flouting the rules because it’s worked for him so far, many developers find these outdated habits difficult to break.

I saw the light several years ago, and have tried to educate as many people as possible since. But for the eager beginner, those same old books are still peddling the same bad old ideas. This just has to stop. And it stops here and now.

You’re not going to learn any bad habits in this book. Not one.

In this book, you’ll learn the right way to build a website. If there’s a wrong way to do things—a way that cuts corners to save time, but encourages bad techniques—I won’t even tell you about it. Not even as a by the way, you might try this … There’s no need to avert your eyes—it will be taken care of for you!

What is a Browser?

If you use Microsoft Windows (Windows 7, Vista, or XP), you probably know the browser as the little blue e on the desktop (shown in Figure 1), commonly called Internet Explorer. A large number of people don’t stray beyond using this program for the purposes of viewing web pages—for many, Internet Explorer is the Internet.

Figure 1. Internet Explorer—the little blue e on the desktop

Internet Explorer (or IE, as we’ll refer to it from now on) is the most commonly used browser, largely because Microsoft included it as part of the Windows operating system as far back as Windows 95. As it’s the first browser that many people use, they tend to stick with it because it’s familiar.

However, there are other browsers that you can use instead of IE. Still riding a wave of popularity is Firefox, an alternative browser with a number of attractive features not available in IE (at the time of writing). It also handles the features of some web pages better than IE. Since the second edition of this book, another browser has been released and become very popular in a short space of time—Chrome, by some company called Google (of which you may have heard). Both Firefox and Chrome are available for Windows, Mac OS X, and Linux operating systems; IE, however, is only available for Windows operating systems.

The screenshots you’ll see in this book were taken using Firefox on Windows 7, unless stated otherwise. Because of the cross-platform nature of Firefox and the excellent standards support, I recommend that you download a copy of Firefox for the purposes of working through the exercises in this book.

You might like to try another browser, other than Firefox or Chrome, that supports web standards (a topic we’ll cover very soon). For Windows users, Opera’s web browser offers excellent standards support and a unique set of features; it also has a very loyal following and, like Firefox, can be freely downloaded. Mac users can also use the Opera browser, or simply stick with the Apple browser that’s installed by default, Safari, which again offers excellent support for web standards. A selection of Mac browser icons appears in Figure 2.

Figure 2. There are numerous browsers that you can try, as shown by the Mac dock

Happy with the browser you’re currently using? If you’re a Windows user and would prefer to stick with what you know, you can still use IE—as indeed the majority of people using the Web still do. In fact, you can be sure that almost everything you read in this book will work in all recent browsers, whatever your choice, without any real hiccups. Almost everything? I say almost, because there are still some differences in the way browsers handle the newer technologies; for example, CSS3. But even that’s okay, as long as you know where to expect differences, and are happy that this doesn’t adversely affect the end result. I’ll be covering these differences in later chapters—no nasty surprises, I promise!

Who Should Read This Book

Does this sound like you?

You’re an absolute beginner—at least as far as creating web pages go.

You are confident with using a computer, but wouldn’t necessarily call yourself a power user.

You use the Web a lot, enjoy other people’s websites, and would like to create your own for a hobby, or a community you belong to.

You’re quickly put off by the technobabble that computer people tend to speak when you try to discuss a technical problem.

You’re perhaps a little daunted about learning this new skill, but still keen to learn (with some friendly hand-holding).

If any of the above descriptions strike a chord with you, this is the book to put in your shopping cart. You’ll be eased in gently, and building web pages like a pro in no time!

There’s no need to worry if you feel that the terminology your 15-year-old nephew keeps spouting is beyond you when you ask him about building websites. I’ve assumed readers have no prior knowledge of any of these terms, and I’ll be guiding you through the process of creating a website from scratch. By the end of this book, you’ll know how to build the site, obtain some hosting, promote the site, and keep it running once it’s live.

The best part is this: what you learn in this book, you’ll never have to discard. You’ll be learning how to build sites the right way from the get-go.

What You’ll Learn from This Book

By the time you finish reading this book and trying out the exercises contained within, you’ll be able to build a complete website—the right way—without incurring any costs for expensive software or web hosting.

Using an example website, I’ll guide you through the process of developing web pages from scratch. From these humble beginnings, great things will evolve! By the end of the book, you’ll be able to create a website that includes the following features:

easy-to-use navigation

a professional-looking site header

a Contact Us page

tables—the presentation of data in neatly organized grids

attractive web page forms

a simple image gallery

a search engine that covers your site, as well as related sites

simple statistics that you can use; for example, being able to see who’s using your site, how they found your site, and so on

You’ll also learn how to manage your website effectively, without it becoming a chore or too technical. I’ll show you how you can:

establish your own dot-com (or dot-net, dot-org, or the like) web address

find a place to host your website

upload your files to your website

gain feedback from visitors while avoiding spam emails

We’ll also look at how your site can fit in with and complement other existing social networking sites, by covering how to:

create a Facebook page and embed site updates on your own site

sign up for a Twitter account and display status updates on your site

add Facebook Like and Twitter Follow buttons on your site

How You’ll Learn to Build Your Website

This book will take you through each new topic using a step-by-step approach. It provides a mixture of examples and practical exercises that will soon have you feeling confident enough to try a little HTML for yourself.

HTML, Markup, CSS … Welcome to Your First Bits of Jargon!

From here on in, you’re going to see these terms more and more. But what do they mean?

HTML

HTML stands for Hypertext Markup Language. It’s the primary language that’s used to create web pages, so you’ll come to know it very well through the course of this book. We’ll be using HTML5, the latest version of the language. There are many ways that you can write HTML5 for it to be valid, ranging from lazy and—dare we say—sloppy ways, to strict and ordered. In this book, we’ll use the more formal syntax in the example website, XHTML, and avoid demonstrating the slipshod way of writing code. This will encourage a better approach to writing markup and code, and foster a more logical way of thinking that’s more likely to put you in better stead for future learning. The difference between HTML and XHTML is explained in the SitePoint HTML Reference.

Markup

Imagine, if you will, that you’re a newspaper editor. You’ve been given a news story, but the text—from the heading through to the conclusion—is all the same size, with the headings, paragraphs, quotes, and other textual features not clearly indicated. It’s just one big block of text. For starters, you’d probably want to emphasize the headline, maybe by displaying it in bold or italic text (or in caps with an exclamation mark if you were working for a tabloid). As an editor, you’d probably grab a pen and start scribbling annotations on the printout: an h here to signify a heading, a p here, there, and everywhere to show where paragraphs start and end, and a q to denote quotations.

This is essentially what markup is—a set of simple tags that suggest the structure of a document: this section is a heading, this is a paragraph, and so on. We’ll cover the various tags that HTML uses in detail a little later.

Note: Markup isn’t Computer Code

Markup is not the same as code. Often, people incorrectly refer to markup as code, but code goes beyond the basic abilities of markup. With code, you can create programs and make your web page more dynamic, while markup simply deals with the page’s structure. So, if you want to impress your friends and relatives, refer to it as markup rather than code. See, I told you I’d teach you good habits!

CSS

CSS stands for Cascading Style Sheets. We’ll be using a combination of HTML and CSS to create websites. CSS is a language that lets you control how your web pages look, but we’ll go over that in more detail later. For now, it’s important that you know what the abbreviation stands for. You’ll also learn that CSS, like HTML, evolves over time. As such, we’ll be covering some of the new CSS3 properties in this book and explaining how they work across the various browsers, while the bulk of it will be CSS2 (or CSS2.1, a minor update). Don’t worry, you won’t need to know the version numbers—there’s no test at the end!

Web Standards

Web Standards advocate best practices for building websites. The term Web Standards may be used to describe a range of philosophies and specifications, but for our purposes, we’re mostly referring to the recommendations published by the World Wide Web Consortium (W3C)—in their own words, an international community where member organizations, full-time staff and the public work together … to develop the Web to its maximum potential.

At a practical level, compliance (or adherence) to web standards refers to the development of web pages that validate according to the W3C recommendations, like those for HTML, XHTML, or CSS, or to the guidelines for accessibility.

Building the Example Site

All examples presented in this book are backed up with a sample of the markup you need to write and a screenshot that shows how the results should look.

Each example is complete. You’ll see the picture build gradually, so you won’t be left guessing how the example website evolved to a particular stage. The files we’ll use in all the examples are provided in a separate code archive (described in more detail in a moment).

What you can expect from the example website:

a fun website project that will be built up through the chapters

a complete site that demonstrates all the features you’re likely to need in your own website

all the HTML and CSS used to build the site in a single download

You can pick up the project at any point, so mistakes you might have made in a previous chapter’s exercises won’t come back to haunt you!

What This Book Won’t Tell You

While it might be tempting to cram everything into one book and claim that the reader will learn everything in a short time frame, the truth is that this isn’t necessarily the right approach for everyone.

This book doesn’t try to force-feed you everything there is to know about creating web pages; instead, it focuses on the most beneficial aspects that you’ll find yourself using over and over again.

This book does not cover:

JavaScript in any depth (we will very briefly cover some simple JavaScript effects using jQuery, before pointing you in the direction of further learning that’s more in-depth)

server-based programming/scripting languages; for example, ASP, PHP, or Ruby

creating Flash-based content

search engine optimization techniques

By the time you’ve finished this book and had a chance to tackle your own website, you might want to take the next steps to increasing your site-building knowledge. I’ll make recommendations where appropriate throughout the book, and suggest other resources that you might like to check out.

So, this is where the introductory bits end and the learning process begins—learning how to build websites the right way. So step this way, ladies and gentlemen …

What’s in This Book

Chapter 1: Setting Up Shop

In this chapter, we’ll make sure that you have all the tools you’re going to need to build your website. I’ll explain where you can access the right tools—all of them for free! By the chapter’s end, you’ll be ready to get cracking on your first website.

Chapter 2: Your First Web Pages

Here, we’ll learn what makes a web page. We’ll explore HTML, understand the basic requirements of every web page, and investigate the common elements that you’ll see on many web pages. Then, you’ll start to create pages yourself. In fact, by the end of this chapter, you’ll have the beginnings of your first website.

Chapter 3: Adding Some Style

Now we’ll start to add a bit of polish to the web pages we created in Chapter 2. You’ll learn what CSS is and why it’s a good technology, before putting it into action for yourself. As the chapter progresses, you’ll see the project website start to take shape as we apply background and foreground colors, change the appearance of text, and make web links look different according to whether they’ve been visited or not.

Chapter 4: Shaping Up with CSS

This chapter builds on Chapter 3’s introduction to the color and text-styling abilities of CSS to reveal what CSS can do for border styles and page layouts in general. First, we’ll review the full range of border effects that you can apply to elements such as headings and paragraphs. We’ll experiment with dotted borders, and big, bold borders, as well as some more subtle effects. In the second half of the chapter, we’ll learn how it’s possible to use CSS to position the elements of a web page—including blocks of navigation—anywhere on the screen.

Chapter 5: Picture This! Using Images on Your Website

As the chapter title suggests, this one’s all about images. We’ll discover the difference between inline images and background images, and look into the issue of making images accessible for blind or visually impaired web surfers. We’ll also learn how to adjust pictures to suit your website using the software that we downloaded in Chapter 1. Then, we’ll put all this knowledge together in a practical sense to create a photo gallery for the project site.

Chapter 6: Tables: Tools for Organizing Data

Here, we’ll learn when tables should be used and, perhaps more importantly, when they should not be used. Once the basics are out of the way, I’ll show how you can breathe life into an otherwise dull-looking table—again, using CSS—to make it more visually appealing.

Chapter 7: Forms: Interacting with Your Audience

In Chapter 7, we learn all about forms—what they’re used for, what’s required to build a form, and what you can do with the data you collect through your form. I’ll teach you what the different form elements—text inputs, checkboxes, and so on—do, and show you how to use CSS to make a form look more attractive. Finally, I’ll show you how you can use a free web service to have the data that’s entered into your form emailed to you.

Chapter 8: Interacting with Social Media

With the website almost built, it’s time to start thinking about other websites and services out there that you can use to your advantage. As (seemingly) everyone is on Facebook or Twitter these days, it would be remiss of us not to look at the opportunities that those sites and their services can offer. We’ll look at how you can embed your Facebook and Twitter updates on your site simply and easily and show how to add Like and Follow links.

Chapter 9: Launching Your Website

It’s all well and good to build a website for fun, but you need a way for people to see it—that’s what this chapter is all about. We’ll learn about hosting plans, discuss the pros and cons of using free services, and look at the tools you’ll need in order to transfer your files from your computer to a web server for the world to see.

Chapter 10: Enhancing the Site with HTML5 and CSS3

You will have already been using HTML5 up to this point, though not features that are new to HTML5. Likewise, you’ll have a good grounding of CSS by this stage, but there are some new CSS3 features that you’ll really love. In this chapter, we’ll give the project site an HTML5 and CSS3 makeover, showing how you can enhance the site, but also pointing out some of the pitfalls and quirks to be aware of with these newer features.

Chapter 11: Adding Interactivity with jQuery

The days of static websites are well and truly over. You want to present a dynamic, interactive site that gives users a sense of ownership and inclusion—not to mention some seriously impressive effects. How do you add that all-important layer of behavior to your site? That’s where jQuery—a downloadable JavaScript library brimming with functionality—comes in.

Chapter 12: What to Do When Things Go Wrong

In the previous chapters, you were guided through all the steps needed to build your website, but once you go off and do your own thing, you’ll almost certainly encounter some problems. In this chapter, we’ll look at some tools you can use in your browser to diagnose problems, find out the problem’s source, and then rectify it.

Chapter 13: Pimp My Site: Cool Stuff You Can Add for Free

You’ve heard of the MTV reality program Pimp My Ride, right? No? Well, every week, these guys take an everyday car and transform it—with some well-placed and carefully executed cosmetic touches—into a real head-turner of a vehicle. And that’s the aim of this chapter for your website! You’ll discover that there are all kinds of tools, plugins, and add-ons that you can build into your website to make it even more useful to you and your visitors. Among the tools on offer are site search facilities, statistics programs, and online discussion forums.

Chapter 14: Where to Now? What You Can Learn Next

In the final chapter, we summarize the skills you’ve learned in this book, and then consider your options for expanding on these. I’ll recommend websites that can take you to the next level, and books that really should be on your bookshelf—or rather, open on your desk next to your computer! We want to ensure you continue to learn the good stuff once you’ve put this book down.

Where to Find Help

SitePoint has a thriving community of web designers and developers ready and waiting to help you out if you run into trouble. We also maintain a list of known errata for the book, which you can consult for the latest updates.

The SitePoint Forums

The SitePoint Forums are discussion forums where you can ask questions about anything related to web development. You may, of course, answer questions too. That’s how a forum site works—some people ask, some people answer, and most people do a bit of both. Sharing your knowledge benefits others and strengthens the community. A lot of interesting and experienced web designers and developers hang out there. It’s a good way to learn new stuff, have questions answered in a hurry, and generally have a blast.

The Book’s Website

Located at http://www.sitepoint.com/books/html3/, the website supporting this book will give you access to the following facilities:

The Code Archive

As you progress through this book, you’ll note a number of references to the code archive. This is a downloadable ZIP archive that contains complete every line of example source code printed in this book. If you want to cheat (or save yourself from carpal tunnel syndrome), go ahead and download the archive. It also includes a copy of the Bubble Under website, which we use as an example throughout the book.

Updates and Errata

No book is perfect, and I expect that watchful readers will be able to spot at least one or two mistakes before the end of this one. The Errata page on the book’s website, will always have the latest information about known typographical and code errors, as well as necessary updates for new browser releases and versions of web standards.

In addition to the official site hosted and maintained by SitePoint, I have also put together some resources at http://beginningwebdesign.com. Here, you’ll be able to find links to a Twitter account for the book, a Facebook page, and more.

The SitePoint Newsletters

In addition to books like this one, SitePoint publishes free email newsletters, such as the SitePoint Tech Times, SitePoint Tribune, and SitePoint Design View. In them, you’ll read about the latest news, product releases, trends, tips, and techniques for all aspects of web development. Browse the archives or sign up to any of SitePoint’s free newsletters on our website.

The SitePoint Podcast

You can also join the SitePoint Podcast team for news, interviews, opinion, and fresh thinking for web developers and designers. We discuss the latest web industry topics, present guest speakers, and interview some of the best minds in the industry. You can catch up on all previous podcasts on our website, or subscribe via iTunes.

Your Feedback

If you’re unable to find an answer through the forums, or you wish to contact SitePoint for any other reason, the best place to write is [email protected]. We have a well-staffed email support system set up to track your inquiries, and if our support team members are unable to answer your question, they’ll send it straight to us. Suggestions for improvements, as well as any mistakes you may find, are especially welcome. Finally, you can get in touch with me via my Facebook page if needed (although word of warning: I don’t do Facebook all that often!).

Acknowledgements

While writing a book sometimes seems like a solitary process, the truth is that there are a lot of people who guide the hands that type the words on these pages. None of this would have been possible had I not been pointed in the direction of websites like webmonkey.com, whose CSS tutorial first made me see the light, and individuals such as Jeffrey Zeldman, Molly Holzschlag, and Eric Meyer, whose pioneering work has benefited me (and many others) greatly. However, if I were to list the names of all the people who have inspired me in the last few years, this section would end up looking more like an index! You folks know who you are, keep up the good work!

I would like to acknowledge the work undertaken by the Web Standards Project (of which I was once a member), in particular the InterAct team on the Web Standards Curriculum. I’d also like to give a little shout-out to my fellow Britpackers—wear those Union Jack pants with pride, folks!

Thanks to all those at SitePoint who have helped me craft each edition of this book over the years: Simon Mackie, Marc Garrett, Matthew Magain, Andrew Tetlaw, Georgina Laidlaw, Julian Carroll, Kelly Steele, Alex Walker, Lisa Lang, and Tom Museth.

Finally, thanks to Manda for putting up with me when deadlines loomed and I all but shut myself off from civilization to have the chapters in on time. Social life? Oh that! I remember … At those times it seemed like it would never end, but finally we can both see the fruits of my labor.

Conventions Used in This Book

You’ll notice that we’ve used certain typographic and layout styles throughout the book to signify different types of information. Look out for the following items:

Markup Samples

Any markup—be that HTML or CSS—will be displayed using a fixed-width font, like so:

webpage.html (excerpt)

A perfect summer's day

It was a lovely day for a walk in the park. The birds were

    singing and the kids were all back at school.

If the code is to be found in the book’s code archive, the name of the file will appear at the top of the program listing, like this:

example.css

.footer {

  background-color: #CCC;

  border-top: 1px solid #333;

}

If only part of the file is displayed, this is indicated by the word excerpt:

example.css (excerpt)

border-top: 1px solid #333;

If additional code is to be inserted into an existing example, the new code will be displayed in bold:

.footer {

  background-color: #CCC;

  border-top: 1px solid #333;

padding: 5px;

}

Where existing code is required for context, rather than repeat all the code, a vertical ellipsis […] will be displayed:

.footer {

  …

margin: 5px;

}

Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ↵ indicates a line break that exists for formatting purposes only, and should be ignored:

URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she

↵ets-come-of-age/");

Tips, Notes, and Warnings

Tip: Hey, You!

Tips will give you helpful little pointers.

Note: Ahem, Excuse Me …

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Important: Make Sure You Always …

… pay attention to these important points.

Warning: Watch Out!

Warnings will highlight any gotchas that are likely to trip you up along the way.

Chapter ¹

Setting Up Shop

Before you dive in and start to build your website, we need to set your computer up so that it’s ready for the work that lies ahead. This is what this chapter is all about: ensuring that you have all the tools you need installed and are ready to go.

If you were to look at the hundreds of computing books for sale in your local bookstore, you’d be forgiven for thinking that you need to invest in a lot of different programs to build a website. However, the reality is that most of the tools required are probably sitting there on your computer, tucked away where you wouldn’t think to look for them. And if ever you don’t have the tool for the job, there’s almost certain to be one or more free programs available that can handle the task.

I’ve assumed that you already have an internet connection, most likely broadband (or similar). There’s no need to worry if you have a slower connection, though: it won’t affect any of the tasks we’ll undertake in this book. It will, however, mean that some of the suggested downloads or uploads may take longer to complete, but you probably knew that already.

Note: Planning, Schmanning

At this point, it might be tempting to look at your motives for building a website. Do you have a project plan? What objectives do you have for the site?

While you probably have some objectives, and some idea of how long you want to spend creating your site, we’re going to gloss over the nitty-gritty of project planning to some extent. Project planning is still an important aspect to consider, but because you’ve picked up a book entitled Build Your Own Website The Right Way, I’ll assume you probably want to get right into the building part.

As this is your first website, it will be a fairly simple one, so we can overlook some of the more detailed aspects of site planning. Later, once you’ve learned—and moved beyond—the basics of building a site, you may feel ready to tackle a larger, more technically challenging site. When that time comes, proper planning will be a far more important aspect of the job. But now, let’s gear up to build our first simple site.

The Basic Tools You Need

As I mentioned, many of the tools you’ll need to build your first