Build Your Own Web Site The Right Way Using HTML & CSS - Ian Lloyd in 300 words

Written on June 6, 2010

(2nd Ed. November 2008) I highly recommend this book as your first book to building web sites.

Stop building web sites all wrong with bad habits. We once had to because the tools were crude. Not anymore because there are established and published standards for creating web sites.

But how are web sites built? Where do I start? Well you have created simple files using Word or Notepad, before haven't you? That's all you'll be doing now. Creating files with text in them.

We'll be building sites using two types of files that you will create:

  • a file containing the text of what you want to say. This file also contains additional special words called tags which are like commands. This file is called an HTML file.
  • another text file which contains commands of how you want your page to look. This is the CSS file

You don't need to spend money on tools, such as Photoshop or Dreamweaver to create a site. To create these files, we'll be using Notepad(Windows) or TextEdit(Mac). These are called text editors.

While talking about tools, you'll need to look at the masterpieces you create. You'll need a browser. Simple you say. But don't limit yourself to using just Internet Explorer for viewing web pages, and for looking at the pages you create. Try Firefox or some of the other new kids on the block because they offer more than Internet Explorer can.

(You may have noticed pictures on web pages too. If you need to put pictures on your web pages, you can download plenty of free image creating programs)

You typically create a file using your editor and save it on your computer in the same place as you store all your other documents. What? How does that get to the Web? Well first things first. You can create your web pages on your computer even view them. And without even being on the Internet. True story!

Before we create the text file, I'll talk about what's in it. It contains the text of what you want to put on the site plus some commands. This will be your HTML file. Remember an HTML file is just a text file that you create, and store on your own computer.

All HTML files have pretty much the same sections; here are the sections of that file that we'll be building:

■ a doctype
■ an <html> tag
■ a <head> tag
■ a <title> element
■ a <body> tag
■ a <meta> element
■ a section heading
■ content of that section
■ a section heading and more content
■ a </body> tag and a </html> tag

Ok, let's start. Create a new file. Enter the following html code into the file and save it as basic.html. Save it with a name such as basic.html. You save the file on your computer in Documents folder (Windows) or Home (Mac).

This is our HTML file. Ok, another term is XHTML. This is just a more modern version of an HTML file. An XHTML document is built using elements.

An element is like a container for your content. An element consists of an opening tag that looks like: <h1> followed by some content, followed by a closing tag that looks like </h1>. The content of elements can also contain other elements (which must have opening and closing tags and content.)

Notice that the <html> element contains everything else. It is the container that contains all your content.

300 words? well that's 299. I tried. You have just finished page 26. Go buy the book and read from page 27 onward. The book's contents are here (roughly page 27)