HTML and CSS:
An Absolute Beginner's Guide

By Ian Lloyd, SitePoint.com

So, you're ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We've got quite a ride ahead, so I hope you're feeling adventurous.

Before you dive in and start to build your web site, we need to take a little time to get your computer set up and ready for the work that lies ahead. That's what this section is all about: ensuring that you have all the tools you need installed and ready to go.

This information is an excerpt from my newly-released SitePoint book, Build Your Own Web Site The Right Way Using HTML & CSS. In the following pages, I'll show you how to set up your computer -- be it PC or Mac -- so that you're ready to build a site.

Then, we'll meet XHTML [3] and walk through the details of how to structure a web page correctly. In the process, we'll play around with elements, comments, and symbols, and we'll talk about the concept of nesting. It might sound complex, but it's not! In fact, by the end of that discussion, you'll have a working web page that displays text, links, an image and even a quote!

Finally, we'll turn to the topic of Cascading Style Sheets, which we'll use to change the way elements of your web page look. We'll discuss the different ways in which you can use styles to control the way your page looks before creating our own .css file and using it - as well as tools like selectors and spans - to spruce up our web page's headings, text, and so on.

Don't worry if some of these terms are unfamiliar - this excerpt, like the book itself, assumes that you have no knowledge about building web pages. The information I'll present here basically comprises the first three chapters of the book -- later chapters go on to show you how to build forms, optimize graphics for the Web, publish your site, and soup it up with plug-in tools such as blogs, image galleries, and more -- the Table of Contents [4] has all the details.

But now, let's start to set up your computer so that you're ready to build your first web page.

Tooling Up

If you were to look at the hundreds of computing books for sale in your local bookstore, you could be forgiven for thinking that you'd need to invest in a lot of different programs to build a web site. However, the reality is that most of the tools you need are probably sitting there on your computer, tucked away somewhere 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.

We've made the assumption that you're already on the Internet -- your web site wouldn't be of much use without it! And, though it's not essential, it will also be handy if you have a broadband internet connection. Don't worry if you don't have broadband: it won't affect any of the tasks we'll undertake in this book. It will, however, mean that some of the suggested downloads may take a while to load onto your computer, but you probably knew that already.

Planning, Schmanning

At this point, it might be tempting to look at your motives for building a web site. 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. This is not to say that project planning isn't an important aspect to consider, but we're going to assume that because you've picked up a book entitled Build Your Own Web Site The Right Way, you probably want to just get right into the building part.

As this is your first web site, and will be a fairly simple one, 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 might 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 earlier, many of the tools you'll need to build your first web site are already on your computer. So, what tools do you need?

1. The primary, and most basic, tool that you'll need is a text editor. You'll use this to write your web pages.
2. Once you've written a web page, you can see how it looks in a web browser.
3. Finally, when you're happy with your new web page, you can put it on the Internet using an FTP client. Using FTP can be a little complicated, but thankfully you won't need to do it too often. We'll discuss FTP clients in detail in Chapter 8, Getting your Web Site Online.

You've already got most of these programs on your computer, so let's go find them.

Windows Basic Tools

Your Text Editor: Notepad

The first tool we'll consider is the text editor. Windows comes with a very simple text editor called Notepad. Many professional web designers who use complicated software packages first started out many years ago using Notepad; indeed, many professionals who have expensive pieces of software that should be time-savers still resort to using Notepad for many tasks. Why? Well, because it's so simple, little can go wrong with it. Bells and whistles are definitely not on the menu here.

You can find Notepad in the Start menu: go to Start > All Programs > Accessories.

Note: Shortcut to Notepad

To save yourself navigating to this location each and every time you want to open Notepad, create a shortcut on your desktop. With the Start menu open to display Notepad's location, hold down the Ctrl key, click and hold down the mouse button, then drag the Notepad icon to your desktop. When you release the mouse button, a shortcut to the application will appear on your desktop, as in Figure 1.1.

Figure 1.1 Creating a shortcut to Notepad

Notepad is the simplest of simple applications. See Figure 1.2 for a depiction of its fancy interface (that was sarcasm, by the way).

Figure 1.2. Notepad: a contender for the world's ugliest program?

Your Web Browser: Internet Explorer

Once you've created a web page using Notepad, you'll need a way to view the results of your handiwork. You'll remember that, in the preface to this book, we mentioned Internet Explorer. Well, that's your viewer! As Figure 1.3, 'Internet Explorer: there's no hiding this baby away!' shows, Internet Explorer sits right there in the Programs folder, and also lurks on your desktop.

Figure 1.3. Internet Explorer: there's no hiding this baby away!

Mac OS X Basic Tools

Like Windows, the Mac operating system (specifically OS X; we won't be looking at previous versions of the Mac OS) has a number of tools that you can use straight out of the box. These tools are virtually equivalent to the Windows programs mentioned above.

Your Text Editor: TextEdit

While Windows has Notepad, the Mac has TextEdit, which can be found in the Applications folder, as Figure 1.4 illustrates.

Figure 1.4. TextEdit comes as part of Mac OS X's default installation

Unlike Notepad, TextEdit works as what we call a "rich text editor" by default, which means we can work with fonts, make text bold and italic, and so on. However, we want to work with TextEdit as a plain text editor, so you'll need to fiddle with some of TextEdit's preferences. Start TextEdit, then select TextEdit > Preferences from the menu to bring up the Preferences screen. Select Plain text within New Document Attributes, then close the Preferences screen. The next time you create a new file in TextEdit, it will be a plain text document.

Your Web Browser: Safari

Internet Explorer is also available for Mac, but was abandoned by Microsoft when Apple began to make its own web browser, Safari, so it's considerably outdated. You can usually find Safari in the dock, but you can also access it through the Applications folder, as Figure 1.5 illustrates.

Figure 1.5. Internet Explorer and Safari are available via Mac's Applications folder

Beyond the Basic Tools

You can certainly make a good start using the tools mentioned above. However, once you're dealing with a handful of web pages and other resources, you may want to go beyond these basic tools. We'll show you how to use some slightly more advanced applications later in the book.

Countless other text editors and web browsers are available for download, and many of them are free. Obviously, we don't have time to describe each and every one of them, so I've settled on a few options that have worked for me in the past, and which you might like to download and have at your disposal.

Windows Tools

NoteTab

NoteTab's tabbed interface lets you have many different files open simultaneously without cluttering up your screen, as Figure 1.6. Files that you've opened are remembered even after you close the program and open it again later (very useful when you're working on a batch of files over many days, for instance). You can download the free NoteTab, or its Light version, from http://www.notetab.com/ [7].

Figure 1.6. NoteTab Light's tabbed interface

Firefox

Firefox is a popular alternative to Internet Explorer, and, as we proceed through this book, it will be our browser of choice for a number of reasons. As with NoteTab, Firefox offers a nice tabbed interface that keeps your computer free from window clutter. You can download Firefox from http://www.mozilla.com/firefox/; the browser is depicted in Figure 1.7.

Figure 1.7. Firefox -- this critter is worth hunting down

Mac OS X Tools

It is true that there are fewer free programs available for the Mac operating system than there are for Windows. However, there are a few programs that you might like to consider as you move beyond the basics.

TextWrangler

TextWrangler is a free, simple text editor made by BareBones Software. As with NoteTab for Windows, TextWrangler can tidy up your workspace by allowing several text files to be open for editing at the same time (the documents are listed in a pull-out 'drawer' to one side of the interface, rather than in tabs). You can download TextWrangler, which is shown in Figure 1.8 from the BareBones Software web site.

Figure 1.8. TextWrangler, a free text editor from BareBones Software

Firefox

Firefox is gaining popularity not just among Windows users, but among Mac users too! A web page viewed in Firefox should display the same regardless of whether the browser is installed on a PC running Windows XP, on a Mac running OS X, or on Linux [10] (an operating system favored by people who really, really hate Microsoft products with a vengeance). The predictability of Firefox is a welcome change from the bad old days of endless browser competition, and is one very good reason why we will primarily use Firefox in the examples included in this book.

Not Just Text, Text, Text

You can build an entire web site using just the tools mentioned above, but it won't be the sexiest site on the Web. The missing element here is images: so far, the programs we've mentioned are used to manipulate plain text or view web pages. If your web site is going to be visually appealing, you'll need to be able to create and manipulate images, either from scratch, using photos you've taken, or using images that you have the legal right to use on your web site.

Unfortunately, when it comes to image editing software, that old saying "You get what you pay for" is alive and well. A professional image editing program, like Photoshop or Fireworks, costs hundreds of dollars. While these programs offer some excellent capabilities, we cannot really recommend that you go out and pay for them unless you are absolutely sure that they're right for you. If you already have a copy of one of these, or a similar image editing program, by all means use it and experiment with it. Programs like Paint Shop Pro or Photoshop Elements (a cut-down version of Photoshop) are more reasonably priced. However, for the purposes of this book, we'll look only at tools that are free to download, and offer enough functionality to give you an idea of what's possible.

Keep an eye open for free image editors that are included on disks attached to the covers of internet, computing, and design magazines. Software vendors often give away older versions of their software in the hopes that users might be tempted to upgrade to a new version at a later date. Look out for Paint Shop Pro, or any image editor that supports 'layers.' While we'll keep our image editing fairly simple throughout this book, it's certainly worth keeping an eye open for free (and full-featured) image editing software, as these offers will not always be available.

Windows Tools

A standard Windows install is not exactly blessed with image editing software (although you might be lucky enough to have bought a PC, scanner, or digital camera that came bundled with some image editing software; scout around in your Start > All Programs menu to see what you can uncover). As a general rule, you'll have to look elsewhere for useful image manipulation software.

Picasa

Though the Windows default image editing and management tools are distinctly lackluster, the good news is that there's an excellent program just begging to be downloaded and used, and it's brought to you by those good people at Google. The program is called Picasa, and it's extremely well equipped to handle most of the tasks that you're likely to encounter as you manage imagery for your web site. Download a copy from the Picasa web site [16], and soon enough you'll be using this program to crop, rotate, add special effects to, and catalogue the images stored on your computer. Figure 1.9 gives you an idea of the program's interface.

Figure 1.9. Picasa, Google's free, fully-featured photo and image editing and management tool

Mac OS X Tools

The Mac has a reputation for being favored by designers and creative types, and the platform makes many tools available to the budding artist. However, they usually come at a price, and often that price is higher than those of the Windows equivalents! So, what free software can we use on the Mac, assuming that we want something more permanent than a 30-day trial version of Photoshop or Fireworks?

GraphicConverter

GraphicConverter has much greater capabilities than its name suggests. It's bundled with most newer Macs, and is also available for download [17] (you'll be encouraged to pay a modest registration fee for the software, but you can try it out for free). Sure, this is primarily a tool for converting graphic files, but it can also be used for simple editing tasks. Using GraphicConverter, which is illustrated in Figure 1.10, you'll be able to crop, resize, rotate, and add text to any image.

Figure 1.10. GraphicConverter does a lot more than simply convert graphics!

iPhoto

Also included with Mac OS X is a program that probably needs no introduction to the experienced Mac user: iPhoto. This excellent program is not intended as a fully-featured image editor; it's really designed for managing and viewing large numbers of photos stored on a computer. It's great for organizing photo albums, but with recent updates, iPhoto has been given some editing facilities that have promoted it beyond a mere cataloguing tool. Unfortunately, the latest version of iPhoto is not available as a free download, and must be purchased as part of Apple's iLife suite of programs.

iPhoto, pictured in Figure 1.11 can be found in the Applications folder, or in the dock.

Figure 1.11. The iPhoto 5 image adjustment tools

Creating a Spot for your Web Site

So far, we've looked at some of the tools that you'll need to create your web site. We've looked at programs that are readily available, and where you can find them on your computer. And for cases in which the free tools that came with your computer are not up to the job, we've suggested other programs that you can download and use. The next task we must tick off our to-do list before we go any further is creating a space for your web site on the hard drive.

Windows

The easiest and most logical place to keep your web site files is in a dedicated folder within the My Documents folder. There should be a My Documents folder on your desktop, but don't worry if it's not there: it's easy to get it to appear there (see the tip below for details). Double-click on My Documents, then create a new folder called Web by selecting File > New > Folder.

Note: Displaying the 'My Documents' Folder

Lost your "My Documents" folder? It's easily done: in an effort to clean up your desktop, you may have removed the icon by accident. You can return the folder to your desktop as follows:

• From the Start Menu, select Control Panel.
• Select Appearance and Themes, then select Display (if you don't see Appearance and Themes, but do see Display, double click on that). A Display Properties window will appear.
• Select the Desktop tab along the top, then click the 'Customize Desktop' button at the bottom.
• You'll be presented with the Desktop Items dialog, which will include a set of Desktop icons checkboxes that allow you to select the icons you'd like to see on your desktop. Check the My Documents checkbox, then click OK on both open dialogs.
• Your My Documents folder should now be back on the desktop, as shown in Figure 1.12, 'The My Documents folder displaying on the desktop in XP'.

Figure 1.12. The My Documents folder displaying on the desktop in XP

Mac OS X

In Mac OS X, there's already a handy place for you to store your web site files: the Sites folder shown in Figure 1.13, 'The Sites folder displaying in the Mac OS X home directory'. Open your home directory (from Finder, select Go > Home), and there it is!

Figure 1.13. The Sites folder displaying in the Mac OS X home directory

It's easy to add the Sites folder to your sidebar (which you can see in Figure 1.14) for quick access: just drag the folder to the sidebar in the same way you add items to the dock.

Figure 1.14. The Sites folder appearing in the sidebar

Getting Help

Books may be a wonderful way to learn: you're sitting there with a computer running, a cup of coffee keeping your mind ticking over (you've got one there, right? A coffee, that is, not a mind), and a bookmark signifying your progress to date. Great. But what if you don't understand something in the book? What do you do next? Shouting at the book won't help (well, it may be therapeutic, but you won't get a response)!

Hopefully, you won't find yourself asking too many questions as you work through this book, but if you're the curious type -- or a quick learner -- you might want to go beyond what we're going to teach you here.

Whether you're getting stuck on something, or you want to learn more, your first stop should be the SitePoint Forums [18]. It will only take a few moments to register, and once you've done so, you can log in and ask questions in a range of different forums. Whether you have questions about writing your web site, you need marketing tips, or you're facing a few tricky graphic design issues, the hundreds of experts who contribute to and moderate these pages every day will be happy to help out.

Register at SitePoint's forums today; then, when we recommend further reading or research, you'll be good to go. Oh, and did we mention that all this friendly, helpful advice is 100% free of charge? I thought that might encourage you!

Summary

Believe it or not, we've now got everything we need to build our own web site -- and all without spending a cent! Not only do we have the basic tools -- our text editor (Notepad or TextEdit) and our web browser (Internet Explorer or Safari) -- but we've also looked at some alternatives to these.

We've reviewed some simple and freely available image editing programs that can help us spruce up our sites: Picasa for Windows, and GraphicConverter and iPhoto for Mac. Finally, we mentioned some more capable -- and more expensive -- options, such as Photoshop and Paint Shop Pro.

Now we've got the tools, let's learn how to use them!

Glossary

[1] http://www.sitepoint.com/books/html1/
[2] http://www.sitepoint.com/glossary.php?q=C#term_8
[3] http://www.sitepoint.com/glossary.php?q=X#term_63
[4] http://www.sitepoint.com/books/html1/toc.php
[5] http://www.sitepoint.com/popup/popup.php?zone=2&popupid=78
[6] http://www.sitepoint.com/glossary.php?q=A#term_61
[7] http://www.notetab.com/
[8] http://www.sitepoint.com/glossary.php?q=F#term_45
[9] http://www.mozilla.com/firefox/
[10] http://www.sitepoint.com/glossary.php?q=L#term_18
[11] http://www.adobe.com/products/photoshop/tryout.html
[12] http://www.adobe.com/products/photoshopelwin/
[13] http://www.adobe.com/products/photoshopelmac/
[14] http://www.macromedia.com/go/tryfireworks/
[15] http://www.corel.com/paintshoppro/
[16] http://www.google.com/picasa/
[17] http://www.graphicconverter.net/
[18] http://www.sitepoint.com/forums/