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.
Share and Enjoy:
