Section Two - Getting Started:
   Lesson 2-1: HTML Elements

   In this lesson, you will create your first web page. In order to create your page, you need to learn a few basic HTML elements first.

    HTML tags are used to tell the browser what to do with the text, graphics, and other items in a file. HTML tags are always enclosed in angle brackets like these. When a browser finds something in angle brackets, it treats it as a tag, not as text. Therefore, tags do not display on the screen. Tags are like commands you send to the browser.

   Keep in mind, that there are two types of tags: standalone tags and container tags. Standalone tags are used for elements which have no logical beginning or end. One example of a standalone tag is the br tag, which is used for carriage returns/blank lines, like this one:

   Most tags, though, are used in pairs. Each pair has an opening (or start) tag, and a closing (or end) tag. You can think of a pair of tags as a kind of container. Tags tell the browser software what to do with whatever they contain. Most of the tags you will work with are container tags.

The following set of tags is the absolute minimum necessary to create a home page:

html head title /title /head body /body /html

   Really! That's all you need.

    Let's take a look at the tags above one-by-one. First, you can see the opening html tag at the beginning, and the closing /html tag at the end. This pair of tags tells the browser that this file is an HTML file (a web page). These tags also mark where the file begins and ends.

   Second comes the head tag. The head/head tags can contain various information which does not display on the page itself. For the time being, the only information we will need to put in the head/head area is the title/title element. The text between the title/title tags is not displayed as a headline on the page. In fact, it doesn't appear on the page at all. Rather, it appears in the title bar at the top of the screen (outside of the page itself).

   Next is the body/body element. Everything on the page itself is contained by the body tags. There are many other tags which can be used in web pages, but these four are the minimum required elements.

   You can also put extra information inside of many tags. That information tells the browser more specifically what to do with that element. These extra pieces of information are called attributes. Attributes also have values. The value modifies the attribute, and the attribute modifies the tag/element.

    In this example, the background color (bgcolor) of the body of the page is color #C0C0C0 (gray). You can think of tag names as nouns, and attributes as adjectives which modify the nouns. The values modify the attributes, so you can think of values as adverbs. Remember, HTML is a markup language, and it has its own syntax. These are the simple rules of HTML tags:

1. Tags are always put in angle brackets: tag
2. One space must be put between the tag and the attribute: tag attribute
3. The attribute is connected to its value with an equals sign, but no spaces:
      tag attribute="value"
4. Values are put inside quotation marks: "value"
5. Closing (end) tags begin with a slash mark: /tag

   Now, let's build your first page using just these four elements. The browser software doesn't care if you type the tags in UPPERCASE or lowercase, but lowercase is recommended for tags. Many people like UPPERCASE because UPPERCASE tags stand out from the page text, making it easier to read the source file. However, lowercase tags may become required in the future.

   Be very careful not to make mistakes when typing tags. If you make spelling or other mistakes in the contents of your page, the computer doesn't care. But if you make a mistake in a tag, it might prevent the entire page from displaying.

Now, in Notepad, or your editor program, type the following exactly:

html head titleMy First Home Page /title /head body Only this sentence should appear on the page. /body /html

   When you finish typing the red text above, go to the File menu and save the file in a floppy disk. In the [Save File] window, be sure the location for saving is set to A: (floppy disk). Name your file "mypage.htm" (without the quotation marks, of course).

   After saving the file, start up your browser, open your file, and look at it. If you are not sure how to do that, try one of the following:
1) find the file you just saved either with MyComputer or Windows Explorer, then double-click on the file name, or
2) start your browser, open the file menu, and select "Open a file". Find the file named mypage.htm in your floppy disk. Double-click it, and then click the "Open" button.

    You should see the words "My First Home Page" in the title bar at the top of the screen. On the page itself, the only thing you should see is the sentence, "Only this sentence should appear on the page." If your page does not display properly, go back to Notepad and check to see if all of your tags are typed correctly. After making corrections, save the file again, and reload (refresh) your browser window. If you used word processing software instead of an editor, and you cannot view the file, you probably saved the file in word processor format. Again, use a text editor, not a word processor.

   In your browser, your file should look something like this:

Fig. 1

   If your page displays correctly, congratulations! You have just successfully created your first home page.

• Tags tell the browser what to do with the items on a page.
• There are two basic types of tags: standalone tags and container tags.
• The four essential tags for web pages are html/html, head/head,
  title/title, and body/body.
• Paired tags act like a container. An opening tag must be followed by a closing tag.
• A tag may be modified by an attribute, and an attribute may be assigned a value.
• The rules of HTML syntax must be followed exactly.
• It is best to type all tags in lowercase.