Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 4: Begin with the Basics

 

 

Objectives:

This chapter introduces tags, the actual controls used in HTML documents. The objectives important to this chapter are:

  • structure tags
  • titles, headings and paragraphs
  • comments
  • lists
Concepts:

Now we review some tags and come to more tags that make the text look better.

  • <html> .. </html> - these tags enclose the entire page, except for the DOCTYPE remark
  • <head>...</head> - these tags are meant to enclose special commands, including the title for the browser window
  • <title>...</title> - contains the text found in the title bar of the browser window that is showing your page
  • <body>...</body> - this pair contains all the text of the body of your document. It may help to think about typing a formal letter. A formal letter has three distinct part: the salutation, the body, and the closing. An HTML page has two parts like that: the head is like the salutation of a letter, while the body of an HTML page is like the body of a letter.
  • <h1>...</h1> - this means to put the enclosed text in Heading Format 1.
    What size it really turns out to be is up to the browser. There are six Heading Formats, and all should look different. Do not confuse the Heading formats with the Head of the page: two concepts that sound similar, but are very different.
  • <p>...</p> - this is the Paragraph tag and its closing tag is optional. You can use both to mark the beginning and end of paragraphs, or just use <P> to mark the start of new paragraphs. Either way, you get a blank line between paragraphs.
  • <br> - this is the Break tag, used to force the browser to go to a new line without a blank line in between the new line and the current line. For compliance with XHTML, we will use the tag like this: <br />. This is the pattern we will see used in tags that were previously unpaired tags.

Now we talk about lists. You see lists everywhere, and although there are five types in the text, most people only use two:

  • <ul>...</ul> - these tags enclose an Unordered, or Bulleted list. It is the kind of list you are looking at right now.
  • <ol>...</ol> - these tags enclose an Ordered, or Numbered list. If you want to number your list items use this one.
  • <li>... </li> - this tag, which now has a closing tag, is used to begin each new List Item in both the Ordered and Unordered lists

Variations exist for each type. Unordered Lists can typically show three different types of bullets, however, not all browsers support all three types. The next list shows the names of three colors. The tag used to start the list is <ul type="disc">.

  • red
  • green
  • blue

The next list begins with the tag <ul type="square">.

  • red
  • green
  • blue

The next list begins with the tag <ul type="circle">.

  • red
  • green
  • blue

Ordered lists come in five types. The next list begins with the tag <ol type="1">. It is the default type.

  1. red
  2. green
  3. blue
The next list begins with the tag <ol type="a">. It uses lower case English letters.
  1. red
  2. green
  3. blue
The next list begins with the tag <ol type="A">. It uses upper case English letters.
  1. red
  2. green
  3. blue
The next list begins with the tag <ol type="i">. It uses lower case Roman numerals.
  1. Red
  2. green
  3. blue
The next list begins with the tag <ol type="I">. It uses upper case Roman numerals.
  1. Red
  2. green
  3. blue

You can also override the numbering scheme in a list, telling it to start with a number other than the usual starting value. As an example I will use <ol type="A" start="4">

  1. orange
  2. yellow
  3. purple

Note: the value for the start attribute is expressed numerically. This is to make it independent of the actual type being used.

Another note: if you have taken a moment to view the source code for this page, you will see some really odd code where I have shown you the names of tags. This is discussed, next week, in Chapter 5. Trust me.

It should also be noted that you can put remarks, or comments, in the code of a page which are not commands to the browser, and also are not text to be displayed. The reason is documentation. When you do something in a program that takes explanation, such comments are often included. They are called comments, remarks, and in-line documentation. Do it like this:
<!-- Your comments go here. >
Essentially, the remark is all inside one tag, with no closing tag. The actual beginning and ending remark brackets need not occur on the same line. This makes it easy to remark large sections of a page in order to test new code, or to hide items not meant to be seen at this time.