A Basic HTML and CSS Tutorial... Just enough to get you started

Lesson 1; Creating an HTML Page Foundation

Let's first assume that you already have a place to upload your web pages. For those of you completely new to this, this is called a Web server. In fact, there are numerous free services you can find, such as FreeWebs. These work well for smaller sites, but you may want to consider either upgrading or some other option for larger sites, say one with hundreds of pages.

So, let's get started.

The first thing you'll do is open a basic text editor, either Microsoft's NotePad or something similar. On a blank, new page, type the following code:


                            Remove this and name the page whatever you like




                        This is where you'll be putting your page content


HTML page with text only
See how this code displays on the Web(opens in a new window so I don't lose you)

Now, let me explain what I just did and some basic principles you should remember as you place your code.

First, anything you see placed between a pair of < > is called a tag. Think of a tag as being a type of switch, and whatever you put inside those angle brackets as defining what the switch turns on. So, if a switch gets turned on, it also can be turned off. This is done by adding the slash mark before the tag name you'll place inside the brackets.

Next, remember that once you turn a switch on, it stays on until you turn it off. Keep this idea in mind as you build your page and it should help you understand when conflicts occur that prevent a page from displaying as you'd like it to. In fact, later versions of HTML require that these switches are turned off.

Now, let's refer to these switches by their proper name. When you enclose something between those angle brackets, it is properly called a tag, as I've already stated. When you create the "on" switch with an opening tag, you also will create a shut-off switch with the closing tag. These tag pairs create what are called elements.

Let's save this file and name it so you can open it using your web browser to see how it looks. In your text editor, click File, select Save, then name it, oh, how about "begin.html" (without quotes). You should now be able to double click on the file where you saved it and your browser should open it for you.

Of course, I already know what your reaction is going to be upon seeing how this page displays. You'll be thinking, "Is that all that displays for all that typing?" The answer is, yes. All you should see, unless you changed the text between the opening and closing BODY tags, is "This is where you'll be putting your page content". Hey, it's not fancy, but you now have the foundation in place to begin making your page into something great!

Let's call that enough for the first lesson.

Go to Lesson 2: Page structure and appearance