Web Design 101

The name of this tutorial is Web Design 101, but it could have been called HTML 101. HTML which stands for Hyper Text Markup Language is the code that we're going to type onto the blank Notepad page that we opened. The code is what the web browser reads to display exactly what we tell it to display.

Tags:

HTML coding is not difficult. It is written using tags. Tags are commands that are written in between the less than < and greater than > signs. There are open tags and close tags. A close tag is the same as an open tag but contains a back slash / right after the less than symbol.

Example of tags:

Before we dive into coding, you should know that there are four tags included in every html document. They are HTML, Head, Title and Body.

It doesn't matter if you use capitals or not when typing tags. The web browser doesn't care. Use what is most comfortable for you.

Now that I've totally confused you, maybe it's better to try it. You'll understand it better.

Let's go over to that blank Notepad page that we opened in the introduction and do some typing. Type the same text as I've typed below:

Notice that the 'Title' tags are in between the 'Head' tags? Titles always go in between the head tags. There are a few other tags that go in between the head tags, but we'll discuss those later.

Saving our File:

Now, let's save our Notepad document as: index.htm into your storage shed as follows:

1. In the Notepad window click 'File' then click 'Save As'.

2. Then navigate to your storage shed 'web 101'.
   1. To find your storage shed, click the down arrow at the top of the 'Save As' window next to the box that says 'Save In' and select 'Desktop' (Or, if your system is like mine, click on the desktop icon to the left in the Save As window).

   2. You should see the folder 'web 101'. Click on it.

3. Now go to the bottom of the window to where it says 'Save as type'. The box will probably say 'Text Documents (*txt)', click the down arrow to the right of that and select 'All Files'.

4. Next go to the 'File Name' box and type index.htm and click 'Save'.

For this tutorial, all web documents will be saved with the file extension .htm. Web browsers like pages to have an extension of either .htm or .html.

Viewing our Web Page

Now open your storage shed and then double click on the only file that's in there which should be index.htm. This is what you should see:

See how the title displays at the top of the page? That wasn't hard was it? Congratulations! You've created your first webpage. Now that the basics are out of the way, it gets easier.

If you want to spruce it up a bit, let's go on to Lesson 2.

Page 1 | 2 | 3 | 4 | 5

Last Modified: Tuesday, 26-May-2009 08:13:35 CDT

Tidbits & Stuff was born on Thursday, March 9, 2006
© 2006, 2007, 2008, 2009 Felicia A. Williams

Contact Us | Writing Guidelines| Privacy Policy