Teach Yourself Web Publishing with HTML 4 in 21 Days
Chapter 4: Begin with the Basics
This chapter introduces tags, the actual controls used in HTML
documents. The objectives important to this chapter are:
- structure tags
- titles, headings and paragraphs
Now we review some tags and come to more tags that make the text look
- <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
- <ol>...</ol> - these tags enclose an Ordered,
or Numbered list. If you want to number your list items use this
- <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">.
The next list begins with the tag <ul type="square">.
The next list begins with the tag <ul type="circle">.
Ordered lists come in five types. The next list begins with the tag
<ol type="1">. It is the default type.
The next list begins with the tag <ol type="a">.
It uses lower case English letters.
The next list begins with the tag <ol type="A">.
It uses upper case English letters.
The next list begins with the tag <ol type="i">.
It uses lower case Roman numerals.
The next list begins with the tag <ol type="I">.
It uses upper case Roman numerals.
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">
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.