Your First HTML Page
July 5, 2008
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:
<html>
<head>
</head>
<body>
</body>
</html>
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:
<head>
<title>My Love of Cats</title>
</head>
We could seperate it for neatness if we wanted to:
<head>
<title>
My Love of Cats
</title>
</head>
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:
<body>
<h1>My Love of Cats</h1>
<body>
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:
<body>
<h1>My Love of Cats</h1>
<h4>Boy, do I love them!</h4>
</body>
Or even italicize it for extra effect. Now we’ll begin with the two paragraphs. First you’ll want to line break.
<body>
<h1>My Love of Cats</h1>
<h4>Boy, do I love them!</h4><br />
<br />
<p>I <b>love</b> cats so much! They are my favorite pet.</p>
</body>
Actually, I did a few things here. Don’t look so confused! I used a line break <br /> or <br>, which is the same effect as pressing enter on the keyboard. The reason I use <br /> 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 (<b> is good, <B> is bad) and you need to close single tags.
Okay, back to HTML. The <p> and </p> tags mean — you guessed it — paragraphs! Each time you use a new paragraph, it automatically <br />’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:
<img src=”">
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.
<img src=”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!
<img src=”http://z.about.com/d/drawsketch/1/0/_/I/lulu_cat.jpg” alt=”Lulu”>
<alt> 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!
Tags
July 2, 2008
Tags are the basis of HTML. There are two types of tags: an open tag <, which declares the beginning of a tag, and a closed tag >, which declares the end of a tag. If you wanted text to be bold, you’d use this tag, the bold tag: <b>TEXTHERE</b>
Would produce: TEXTHERE. There are many different types of tags that you use in HTML, which we’ll go over more thoroughly in other lessons. Remember, in order to close a tag after you’re done put a / after the open tag. (</) There are some exceptions, but keep that as a rule of thumb. These are some text formatting tags:
Text Formatting
<b>TEXT</b> : TEXT : Boldface/Strongface
<i>TEXT</i> : TEXT : Italics/Emphasis
<u>TEXT</u> : TEXT : Underline
<s>TEST</s> : TEXT : Strikeout
By now you should be able to:
- Write a one-paragraph excerpt
Tomorrow we’ll go over lots of the other tags that contain your HTML: <html>, <body>, and <head>! So long, and also how to save your HTML piece! Feel free to comment with questions.
Introductory
July 2, 2008
This blog goes throughout my journey of teaching HTML to the masses and also learning myself. If I find helpful tips or anything of the sort I’ll show you. I write all my posts in HTML. I’m Edd and I’m here to teach you the fundamentals.
While you’re bored waiting for my first lesson, Tags, entertain yourself with this pointless button and this seemingly pointless button.
