Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 4 -- Understanding the Basics of HTML

Chapter 4

Understanding the Basics of HTML


CONTENTS



Now that you've learned how to use markup tags and have even written your first HTML document, you're ready to dig a little deeper and learn the basics of the HTML language.

In this chapter, you will uncover the different sections of an HTML document, such as the head and body, and learn what type of information goes in each. You'll also discover how to include basic paragraphs in your document, as well as insert headlines and special characters. So take a deep breath and get ready to dive right in.

How to Use the Head Section

In the previous chapter, you took a brief look at the <HEAD> section of an HTML document. This section of your HTML document is relatively small, but it conveys some very important information about your document to Web browsers and servers.

Tip Sheet

  1. Open a new document in Notepad and type <HTML>. To begin the head section, insert an opening tag into your HTML document by typing <HEAD>.

    Figure 4.2 :

  2. The only element required in the head section is the Title of your document. Your title should be short enough to fit in the title bar of a typical browser window, but descriptive enough to explain what your HTML document contains.

    Figure 4.3 :

  3. Insert a title tag within the head section by typing <TITLE>, followed by the actual title of your document. In this example, we'll name this document HTML: Easier Than We Thought. Go ahead and type in that title, then close the tag by typing </TITLE> on the same line.

    Figure 4.4 :

  4. Close the head section by typing </HEAD> on the line below the title line.

    Figure 4.5 :

How to Use the Body Section



The body section of your HTML document contains most of the text, graphics, hypertext links, and other information that will appear on the page. All of your HTML formatting tags, which describe the content and appearance of your document, are placed in the body section. These tags will be explained in detail in the next two chapters.

Tip Sheet

  1. Insert the opening body tag by typing <BODY> on a new line in your document. Make sure that the new body tag follows the end of the head section of your document.

    Figure 4.7 :

  2. Following the <BODY> tag, begin entering the actual text of your HTML document. For this example, we'll just insert a simple sentence. Type HTML is much easier than I thought.

    Figure 4.8 :

  3. Close the body section of your document by typing </BODY> on a new line. Make sure that this closing tag appears before the </HTML> tag at the very bottom of your document.

    Figure 4.9 :

  4. Here's what your HTML document looks like so far when viewed with Netscape. Notice the placement of the document title and the body text.

    Figure 4.10 :

  5. At this point, you should save your file in Notepad. Make sure you save it with an extension of .htm or.html (it doesn't matter which-all browsers will handle both types). Keep this file open, because you'll be adding to it in the next lesson.

How to Use Headings

Headings are used in HTML documents to indicate different sections. There are six different Heading sizes, which range from very large to very small (smaller than the default body text). You should use headings judiciously, keeping them short and concise. The most common use for a heading is as the first line of a home page. In essence, it becomes a headline for your document.

Tip Sheet

  1. To insert a heading into your document, place an opening tag anywhere in the body section. A heading tag follows the format of <Hx>, where x is a number from 1 to 6, indicating the size from largest to smallest. To enter a level 1 heading, which is the largest, type <H1>.

    Figure 4.12 :

  2. Any text you enter immediately after the <H1> tag will be displayed in large bold type by a Web browser.

    Figure 4.13 :

  3. Close the heading tag by typing </H1>.

    Figure 4.14 :

  4. You can experiment with different sized headings by changing the number of the heading tag to any value between 1 and 6. The result will look something like this.

How to Use the Paragraph Tag

One of the most commonly used tags in HTML is the paragraph marker, which is used to break apart blocks of text into separate paragraphs. Any formatting that you perform in Notepad, such as placing carriage returns, extra spaces, or tab stops, will be ignored by Web browsers. The only way to indicate separate paragraphs is by using the paragraph marker. Unfortunately, despite its simplicity, the paragraph marker is also one of the most misunderstood tags in HTML.

Tip Sheet

  1. The most important thing to remember about the paragraph tag is that it marks the beginning of a paragraph, not the end. The original HTML standard used the paragraph marker differently, which has led to some confusion.
  2. To insert a new paragraph, type <P> anywhere in the body section of your HTML document. This will tell the browser to insert a line space and start a new paragraph.

    Figure 4.16 :

  3. Enter the text of the paragraph after this tag. Remember that any carriage returns or line breaks you enter into Notepad will be ignored by a Web browser. The browser will continue to treat the text as part of the current paragraph until it sees another <P> tag.

    Figure 4.17 :

  4. You can indicate the end of a paragraph by typing </P>. However, this tag is optional. The end of the current paragraph is implied whenever a new paragraph marker is found by a browser.

    Figure 4.18 :

  5. Continue entering new paragraphs of text, using the <P> tag to indicate the beginning of each.

    Figure 4.19 :

How to Use Special Characters

By now, you may have noticed a potential problem with HTML. All of the markup tags are indicated by left and right angle brackets (greater-than and less-than symbols). These characters are reserved by HTML for use with tags. What happens when you want to include one of these characters in your text?

That's a good question, and the problem isn't limited to just those two symbols. A number of characters can't be typed directly into the body text HTML, including many foreign language symbols. Fortunately, HTML provides a solution through the use of character entities. By using special codes, HTML can display all of the characters in the ISO-Latin-1 (ISO 8859) character set. HTML 3.2 also includes support for many mathematical symbols.

Tip Sheet

  1. Locate your cursor at the position in the document where the character entity for the special character is to be placed.

    Figure 4.20 :

  2. A character entity begins with an ampersand (&), followed by the code, and ends with a semicolon. To place a double quote in your document, for example, type &quot;.

    Figure 4.21 :

  3. Other common character entities for characters that are reserved for HTML tags are &lt; for the less-than symbol; &gt; for the greater-than symbol; and &amp; for the ampersand. Note that these named character entities are case-sensitive.
  4. You can also use named character entities for many foreign language symbols. For example, to create the umlaut used in the German phrase, über alles, you would type in &uuml;ber alles.

    Figure 4.22 :

  5. In addition to named character entities, you can use numbered character entities. HTML uses a subset of the ISO 8859/1 8-bit character set, and several characters, including the copyright symbol, trademark symbol, and mathematical symbols, are available when referenced by their numbered character entity.
  6. To insert a numerical character entity into HTML, type an ampersand, followed by a pound sign, the number of the character and a semicolon. For example, to enter the registered trademark symbol into your document, you would type &#174;. You can find a partial list of numerical character entities in the Appendix.

    Figure 4.23 :