Lesson 1 - Basic Tags
Learning HTML is a simple matter of learning about 40 different tags that operate in different ways on the text they surround.
- Tags are designated by surrounding them with angle brackets (less than - greater than characters), as in: <title>
- Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on and the second turns it off.
- The second tag, the "off switch", starts with a forward slash to designate the end of the operation. For example, you turn on a bold with <b>, shout your message, and then go back to regular text with </b>.
- There are exceptions. For instance, the <br> tag creates a line break and doesn't have an 'off' switch. Once you've made a break in the line, you can't unmake it.
Besides the tags, there are attributes to learn. These attributes can set certain values to the tag instructions. For example, the <p> tag will start a new paragraph. If you add an alignment attribute, it will change the placement of the new paragraph.
| <p align="center"> |
| will center the new paragraph. |
This will make more sense when you start writing code. But first, you need to open a text editor. Look for a text editor on your computer: Notepad or WordPad on a Windows system (usually hidden under Accessories) and TextEdit or BBEdit on a Mac.
Layout of HTML Document
- First, type the code below, exactly as it appears. Better yet, copy and paste it into your document.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
|
| These lines are known as the DTD (Document Type Definition). You will include them on every page that you create for this course. |
| |
- Next, get the browser's attention by typing the tag to let it know that this is a HyperText Markup Language document: <html>
At the end of the document, you need to close the HTML code. So, hit Return a couple of times and type: </html>
Your code should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
</html>
|
| |
- There are two parts to a HTML document: the head and the body. The head is reserved for specific information having to do with the entire page and the body is where you put the content that you want people to see.
First, open the head section, right after the opening <html> tag: <head>
- And then, give the page a title:
<title>Acme Seed Company</title>
- Next, close the head section and open the body section: </head><body>
Type the first paragraph on your page:
The acme seed company provides high-quality seeds guaranteed to improve your IQ scores.
Obviously, you can type anything you want.
- And finally, close the body section with this tag: </body>
After completing steps 1 through 6, your code should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Acme Seed Company</title>
</head>
<body>
The acme seed company provides high-quality seeds guaranteed to improve your IQ scores.
</body>
</html>
|
None of the bold tags in this code makes any difference. The tags that are being used have been made bold so that you can see them better.
Also, none of the returns or spacing make any difference. You can put in returns anywhere you like, just to make the code simpler for you to read.
Saving & Viewing HTML Documnet
So far, this is a very simple page, but save it anyway. Click on the File option on the top tool bar and choose Save As.
Save it as a "text only" document and give it this name: firstpage.html
Save it to the desktop.
Next, open a browser (Internet Explorer, Netscape, Mozilla, or any other browser you might have). Click on the File option from the top tool bar, and highlight Open File.
From the next screen, choose your firstpage.html file from the desktop:
Click on the image below to see a full-size display of the screenshot of this site.
Wasn't it simple? Now, notice a few things:
- The title is way up at the top of the page in the Title Bar of the browser - Acme Seed Company.
- The only thing in the body of your website is the one sentence you typed.
- The location bar is showing the address to your own computer as local host.
More Interesting HTML Tags
Add some tags to your page to make it more interesting.
- After the <body> tag and before the beginning of the sentence, add a heading.
The <h1> tag is a heading tag and tells the browser to make the font larger and bold. Most browsers can read heading tags between 1 and 6. Just for fun, add this:
| <h4>Cure acne and shyness too!</h4> |
| <h6>Works in 7 years!</h6> |
| Save your work. Back on the browser, click on the Refresh or Reload button at the top of the screen, as shown in the image below. |
 |
- You can also bold individual words or phrases by surrounding them with the <b> tags. Try putting these tags around some words in the paragraph:
| <b>improve your IQ scores!</b> |
| You can do the same for italics by using the <i> tags: |
<i>high-quality seeds</i> |
- Add a horizontal bar at the end of the page. First, you need to surround your sentence with the paragraph tags <p>, which will give you space around the sentence. Then, put a horizontal rule tag at the end: <hr>. The horizontal rule tag is one of those rare tags that doesn't require an open and close tag. Instead, you open and close within one tag.
<html>
<head>
<title>Acme Seed Company</title>
</head>
<body>
<p>The acme seed company provides
<i>high-quality seeds</i>
guaranteed to
<b>improve your IQ scores!</b></p>
<hr>
</body>
</html>
|
| Go to the browser and Refresh, as shown in the image below. |
| |
Your final code should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Acme Seed Company
</title>
</head>
<body>
<h1>Get Smarter!</h1>
<h4>Cure acne and shyness too!</h4>
<h6>Works in 7 years!</h6>
<p>The acme seed company provides
<i>high-quality seeds</i>
guaranteed to
<b>improve your IQ scores!</b></p>
<hr>
</body>
</html>
|
Your page should look something like this:
Summary
You'll be doing a lot of this during the next 12 weeks of class:
- Working and saving in your text editor.
- Loading and refreshing in the browser.
Always remember that before you can see your changes, you need to:
- save the changes you make in the text editor and
- refresh or reload the browser window.
Things to remember about these basic tags:
- Every HTML program starts with the tag- <html>.
- Every HTML program has two parts: a head and a body.
- Only specific things can be put into the head section:
- A title, which will appear at the top of the browser window (Lesson 1).
- Metatags that will help search engines find your page (Lesson 19).
- Links to style sheets that affect the entire page (Lesson 13).
- Links to Javascripts (Lesson 20).
- You have to close the head section with </head> before you can open the body section with <body>.
- The body section contains everything you see on the page.
- At the end of the document, you have to close the body section and close the HTML document. These should be the last two tags in your document: </body> </html>
This is the end of Lesson 1. Please go to the next lesson.
|
