HTML (HyperText Markup Language) is exactly what its name implies. It is a language that is used to "mark up" content for display on web browsers. When you think about "marking up" something, you probably imagine your high school English teacher with a red pen, adding his or her thoughts to your work. HTML works (kind of) the same way.
When you mark up a bit of text in HTML, you tell an internet browser how to read it. For example, if you want the browser to show a word in bold face, you would mark it up with <strong>bold</strong> tags.
Speaking of tags, HTML has two flavors: paired and unpaired. Paired tags have both an opening tag that turns the feature on and a closing tag that turns it off. The bold example in the previous paragraph is one case you'll see very frequently
Unpaired tags, as their name implies, don't need a closing tag to turn them off. That's because the content they are used to identify has a discreet ending all by iteself. One example of this is the <img> tag, which is used to insert an image into a page.
In this lesson, you'll learn some of the most common paired tags and have a chance to play around with them.
We'll begin this lesson where we left off on Lesson 2. Open Notepad++, then copy and paste the code below into your new document.
<html>
<title>Hello World</title>
<body>
Hello World!
</body>
</html>
First we're going to take a look at the structural tags that make up this document. You'll notice three different pairs of them:
First, note how each pair identifies the opening < > differently from the closing </ >. The opening tag and closing are exactly the same except for the backslash (/) which tells the browser, "that's it! I'm closed!"
The three tags I've identified here have specific purposes in seeting up an HTML file that you can actually look at in a web browser. First, the <HTML> tags tell your browser, "this page is written with HTML markup. Make sure to look for the tags and render the content the way they tell you."
The <title> tags identify the page title. Have you ever looked at the tabs across the top of your browser? What you're seeing there is the page title. If you're reading this lesson right now, you should see "Lesson 3: An Open and Shut Case" written in the tab. If I hadn't defined that as the page title, you wouldn't see it there!
Finally, there are the <body> tags. These tags tell the browser, "hey! This is where the content of the page is hanging out!" Everything between these two tags makes up the content of the page. If it's outside of them, it will cause errors or you jsut won't see it
There are other tags that fit into the structural definition (like <style> and <script>) but these are a little more advanced, so we'll save them for a later lesson.
Ok, blah, blah, blah... structure... lame, boring. Let's get to the fun stuff, shall we? The next set of tags I'll introduce are the ones commonly used to format content on your page. These include:
First, let's go back to the Hello World sample and correct a little omission that I left out. On line 4, I typed "Hello World!" but I left out something very important. Do you know what it was? If you guessed the opening and closing <p> tags, you'd be right!. Let's go back and add those in, shall we?
<html>
<title>Hello World</title>
<body>
<p>Hello World!</p>
</body>
</html>
The <p> tags signify a hard carriage return (like hitting Enter on your keyboard) should happen after the content they surround. Let's go ahead and copy that line and paste it into line 5 so that you can see how it looks.
<html>
<title>Hello World</title>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>
Next, let's play with some of the formatting tags. Add boldface, italics, and underline to your text by including the <strong>, <em>, <u> tags.
<html>
<title>Hello World</title>
<body>
<p><strong>Hello World!</strong></p>
<p><em><u>Hello World!</em></u></p>
</body>
</html>
Notice how, on line 5, I used both the <em> and <u> tags? What I did here is called nesting. One way to think of it is like those Russian dolls. The smallest doll is your content, and you can continue to put pigger and bigger dolls around it. With each doll surrounding your content, you change the way the original doll appears.
So there you have the basics of tagging. To complete this lesson, save your file witht he name MyLesson3.html, and load it to the learning directory with your name on it. If you did it right, the file should show when you click here.
If that's not working for you, go back to Lesson 1 and re-read the FTP instructions. Finally, if you want to see how the finished file should appear, check here.
Back to the lesson plan.