<P>
<P> for Paragraph tells your browser to insert a
blank or empty line
and then begin a new line (a new paragraph). <BR> tells the browser when a
line has ended while <P> tells the browser to leave a blank line
and begin a new paragraph.
<HR>
<HR> puts a line across the page. HR stands for
Horizontal Rule.
The two lines you see below were put there with
<HR> tags.
<HTML> is the beginning tag and </HTML> is the ending
tag. The forward slash before the tag
(</ >) cancels the effect
of the tag. This is true for all tags that affect text. Thus
<HTML> tells the browser that what follows is an HTML document
and </HTML> tells the browser that the HTML document is
completed. You can therefore
think of the <HTML> and </HTML> tags as "containers",
containing the entire HTML document. Therefore HTML is called a
container element. You should use the HTML element for
each of your web pages.
Closing Tags
cannot be placed just anywhere. Use the "Last In = First Out" principle
or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out".
Another way of stating this is that the last tag activated
must be the first tag
terminated. An example of a correct sequence of tags is:
In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed.
An example of an incorrect placement of tags is:
In this example, the last tag opened (<tag2>) is not the first tag closed. That is, these tags overlap. </tag2> must come before </tag1>. Therefore this example does not satisfy the LIFO principle. Container tags cannot overlap each other. If you do not place tags properly, your web page simply won't work.
The following is another example of a correct use of tags:
<tagA><tagC><tagB><tagD> statements
</tagD></tagB></tagC></tagA>
Problem 1: Is the following example a correct use of tags? The answer is given at the end of this lesson.
It is good to be actively involved in each lesson, so please SWITCH to NOTEPAD, and type in the following HTML web page. After you have typed it in, you will save the document and then view it in your browser.
Here is the web page. Please type:
Before we study this web page, let's save it. Here are the steps if the coding was typed into NotePad:
Now lets see what the web page looks like in your browser. Here are the steps:
Hi, my name is John Gilson.
This is my first attempt at a Web page.
Why did the lobster blush?
Note: If you made a mistake typing in the coding for the web page, switch back to NotePad and make the correction. Once the correction is made, all you need to do is to click on NotePad's Save button to save the changes. Then switch to your browser and click on the Reload or Refresh button to reload the current page.
We will first discuss the important elements that should appear in all web pages.
<HTML> and </HTML> tags
The HTML element was discussed above in detail so here is a brief summary as it relates to this web page example.
The first line in the coding reads <HTML>. It tells the browser that
what follows is an HTML document. It is called the opening HTML tag.
The last line in our coding reads </HTML>. It
tells the browser that the HTML document is finished. It is called the closing HTML tag.
These opening and closing HTML tags make up the HTML element of our web page.
<HEAD> and </HEAD> tags
Next comes the HEAD element which, like the HTML element, also has an opening and closing tag.
Each web page must have the HEAD element.
Statements (or tags) that give information to a person visiting your website,
or information such as those needed for a Search Engine are
placed between the <HEAD> and </HEAD> tags.
Thus the HEAD part of a document provides information about the document.
You do not see this information displayed in your browser. It can be
seen by choosing Source, or Page Source
or Document Source from the View menu of your
browser (one of these choices should be in the browser's View menu).
The HEAD tag must not contain any text or normal markup tags.
If it does, the browser will assume that it is in the BODY part of
the document (studied below). The HEAD element can actually be omitted, but
only if you group all the tags that go in it at the top of the document.
To avoid any potential problems, I would suggest that you include the
HEAD element in your own documents. If fact, the latest web standard (XHTML) demands
that it be included. If you go back to my home page
and choose Source from the View menu, you will see other
statements between the <HEAD> and </HEAD> tags.
Take me back there now.
We will study these statements in a future lesson when we learn
how to get your web pages on the World Wide Web.
<TITLE> and </TITLE> tags
One of the statements that must be included between the <HEAD> and
</HEAD> tags is the TITLE of your web page.
The title in our example (line 3) is "WEB PAGE DESIGN - BASIC TAGS". Notice
that this title is placed by the browser at the very top of
the screen - above the menu choices.
The TITLE of your web page
must occur between the <TITLE> and </TITLE>
tags and you are only allowed one TITLE element per page. The information
you provide in the title is also used to label the bookmark entry for
your web page. That is, when a visitor bookmarks your site (adds it to their
favorites list), it is the title that appears in the list.
Most search engines also use the title in search engine results. Therefore
you should take time to make up a good descriptive title for each of
your web pages. You will notice that each of my lessons has its own
title that describes the general content of the lesson. In general,
the title should be short. Most search engines insist on a short title and
a general rule of thumb is no more than 75 characters including spaces.
Because we do not want the title to be displayed on the browser
screen, the <TITLE> and </TITLE> tags must be placed
between the <HEAD> and </HEAD> tags.
<BODY> and </BODY> tags
After the title comes the main body of your Web page. It contains
all the text and tags. It is the part that will be displayed on
the browser screen. Thus the BODY element contains the actual contents
of the document. Of course the tags will not be displayed on the
browser screen. The
tags only tell the browser how to display the information. The body of
each of your Web pages is declared through the BODY element. <BODY>
tells your browser that what follows is to be the body of the Web
page and </BODY> tells the browser that the body part of
the page has ended. Thus the <BODY> and </BODY> tags are
container tags, containing the body of your document. The BODY tag can actually
be left out. If you place all the HEAD elements first, the browser will
know where the actual body begins. I believe it is still a good
rule to include the BODY tag - and the latest web standard (XHTML) demands
that it be included. I also like the idea of declaring things
for what they are. This way there will be no confusion for any HTML version
that relies on these declarations.
Now here is the above HTML document again only this time I numbered the lines in the BODY element for discussion purposes. Below the coding are the results once again when viewed in the browser. Below the results is a discussion of the BODY part of the document and some questions for you to answer.
Hi, my name is John Gilson.
This is my first attempt at a Web page.
Why did the lobster blush?
Discussion:
Notice the <BR> at the end of line 1. It simply tells the
browser to drop down to the next line. The <HR> tag at the
end of line 2 placed the first line across the page. Notice that
the <HR> tag does not place any blank lines (empty rows)
above or below the Horizontal Rule.
Problem 2: Why is the <P> tag at the beginning of line 4 ("Why did the lobster blush?") and not at the end of line 3 ("Here is a riddle for you.")?
I wanted to leave a blank line before the third and last Horizontal Rule is placed by the browser across the page. I did this with two <BR> tags (line 5). The first <BR> tag tells the browser to go to the beginning of the next line. The second <BR> tag again tells the browser to go to the beginning of the next line which in effect places a blank line on the screen. The <HR> tag then placed the line across the page.
Problem 3: One <P> has the same effect as two <BR> tags since the <P> tag forces a blank line before continuing on. Why then did I not simply use one <P> tag instead of two <BR> tags at the end of line 5?
Problem 4: What does HR stand for in <HR>
Problem 5: Do all tags require a beginning and an ending tag?
Problem 6: Must tags be written in capital (upper case) letters?
Problem 7: When you typed in the above HTML document, some of the tags were indented (such as <HEAD> and <TITLE>). Do you have to indent tags?
Problem 8: Based on your knowledge of the basic tags, write down exactly what you think will be printed by your browser for the following HTML document. The answer is given in the answer section (no cheating now). Let's assume that the <HTML>, <HEAD> and <TITLE> tags have already been typed in.
<BODY>
I am learning a lot
about
designing my own web pages.
</BODY></HTML>
So with XHTML, the rules have really tightened up. Why are the rules tightening up? As I state in Lesson 42 (in the additional lessons), XHTML is not bringing with it a lot of new tags. The purpose of XHTML is to address the new browser technologies that is sweeping the world. Today web pages are being viewed in browsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devices and communicators. Alternate ways to access the internet are continually being introduced. In many cases, these devices will not have the computing power of a desktop or notebook computer and so will not be able to accommodate poor or sloppy coding practices. XHTML is designed to address these technologies. XHTML also begins to address the need for those with disabilities (such as the blind and visually impaired) to access the internet. Thus web pages written in XHTML will allow them to be viewed on a wide range of browsers and internet platforms. So you may wish now to write all your tags and attributes in lower case letters.
I am learning a lot about designing my own web pages.
Since there are no <BR> or <P> tags in the document, the browser is unable to determine when you want the line to end or when you want blank lines. That is why everything was printed on the same line as one statement. The browser can only read text and has to be told through the use of tags what to do with the text. You can use this to your advantage when making up your web pages. You can use blank lines to section off portions of your work. This will make it easier to spot the sections later when you are looking for them. Also, the large space between the words "a" and "lot" was ignored. You can insert as many spaces as you like, but the browser only allows for one space between words and sentences. If you want more space between words or to indent lines and paragraphs, there is a way to do it, and I will show you how in Lesson Five.