Your First HTML Page

tomramier — Sat, 05 Jul 2008 02:31:00 +0000

We are now going to start creating our first HTML page. It will involve your love of cats (whether you have one or not.) This web page will have a title, two paragraphs on how you love cats, and an image of your cat Lulu. Let’s begin with the title. Open up a Simple Text Editor, like Notepad or SimpleText. Not Rich Text! Now:

First you’ll need to create your HTML page using this code:

This code shows that you have an HTML document, a heading and a body. When you create a new page, there is a title. For instance, in your browser window, it says – HTML HQ. We want it to say My Love of Cats. So we alter the code, in between the head tags, we put:

My Love of Cats

We could seperate it for neatness if we wanted to:

<br /> My Love of Cats<br />

Still, it’s all the same. Once you’ve created your title save the Notepad or whatever as “Cats.htm” This will show it up as “Cats” but when you click it the browser will show a blank, white page with “My Love of Cats” as its title.
Next we’ll work on a heading. Inside the body tag you’ll need to put:

My Love of Cats

This will create a large black heading that says My Love of Cats. Now for sub-headings you simply increase the size, all the way up to six. For instance, you may do this:

My Love of Cats

Boy, do I love them!

Or even italicize it for extra effect. Now we’ll begin with the two paragraphs. First you’ll want to line break.

My Love of Cats

Boy, do I love them!

I love cats so much! They are my favorite pet.

Actually, I did a few things here. Don’t look so confused! I used a line break
or
, which is the same effect as pressing enter on the keyboard. The reason I use
is because its a single tag, and their close tag may have a slash in front of it. The reason I use that is because in more advanced languages, like XHTML, you need all lowercase ( is good, is bad) and you need to close single tags.
Okay, back to HTML. The
and
tags mean — you guessed it — paragraphs! Each time you use a new paragraph, it automatically
’s itself and it creates a new one. Continue to do so for another paragraph. Finally, we’ll work on an image. Make sure to save Cats.htm again.

Images get a little confusing. Its a single tag that requires no closing, so in this case it doesn’t need a /> . In order to create an image, use the image tag:

This creates an image. You place the image URL between the quotes. Let’s use Lulu’s image, http://z.about.com/d/drawsketch/1/0/_/I/lulu_cat.jpg.

That displays the image. However, what if the browser doesn’t support the image and it doesn’t show up? No matter!

defines alternate text in case the browser doesn’t support the image. So if the image doesn’t pop up, the word ‘Lulu’ will take its place. Alternates may not be images. By the way, you need to put the URL and name in quotes because the things inside the quotes are called attributes. You’ll need to know that for future lessons.

Save Cats.htm again and view it in a browser. Success!

HTML HQ

Your First HTML Page

My Love of Cats

My Love of Cats

Boy, do I love them!

My Love of Cats

Boy, do I love them!

Tags

Introductory