Subscribe to RSS Feed
Follow our blog on Twitter
Search

HTML TUTORIALS

INTRODUCING HTML

UNDERSTANDING HTML

HTML stands for HyperText Markup Language.                 H yper
                 T ext
                 M arkup
                 L anguage
LET'S BREAK THIS DOWN A LITTLE FURTHER

HYPER

You may have heard the expression "hyper" in describing someone. In simplest terms, it means active, kind of "all over the place". The word "Hyper" as part of HTML is similar in context. It simply means that when you are on the internet using a browser such as Netscape Navigator or Internet Explorer, you can in fact, go "all over the place". In browsing through the World Wide Web (WWW), if you see something you like, you can go immediately to it. There is no set order to do things in. Hyper is the opposite of "linear". Linear means that there is a certain order you must follow such as "you must do this before you can do that". Programming languages such as BASIC and FORTRAN are linear. HTML does not hold to that and allows you to jump to any page on the WWW and at any time. Thus the word HYPER refers to the idea that the text in HTML is not linear.

TEXT

We are working with text only files. More on that in Lesson Two.

MARKUP

"Markup" comes from the fact that in order to create web pages, we will be typing in the text and then "marking up" the text. If you are familiar with WordPerfect, consider this example. Suppose you just typed a document in WordPerfect. If you choose REVEAL CODES from the VIEW menu, the monitor screen or Window splits into two parts. The top half of the screen shows the text you typed in and the bottom half shows the same text but with the words marked up with "codes" or "tags". For example, suppose you typed the following three lines in WordPerfect:Hi, this is bold
This is italics
These words are centered
If you choose REVEAL CODES, you would see the following on the bottom half of your screen in one version of WordPerfect:
[Bold On]Hi, this is bold[Bold off][HRt]
[HRt]
[Italic On]This is italics[Italic Off][HRt]
[HRt]
[Just:Center]These words are centered[HRt]
In other words, the text has been marked up with codes or tags as indicated between the [  ] symbols. Each [HRt] indicates that the ENTER key was pressed. [Bold On] means that everything after this tag is bolded. The [Bold Off] tag simply says that bolding is to end here. Unless you choose REVEAL CODES, you won't see these tags. All word processors have codes that tell the computer how to display the document, how to print it out, etc.
        In HTML, WordPerfect tags or the tags from any other word processor won't work. HTML has its own set of tags to mark up text. If you want something bolded or centered, you have to indicate so with HTML tags. WordPerfect automatically puts the tags in for you. In HTML, you must put in the tags yourself. If you want to see the tags for this page, just choose VIEW from the menu bar of your browser and then chooseSOURCE or DOCUMENT SOURCE.

LANGUAGE

"Language" means that we are using a language with all its syntax. Note that HTML is not a programming language such as BASIC or FORTRAN. These are linear programming languages and are based on a whole different set of rules and are far more complicated to learn. The HTML language is easy to learn (trust me).

So HTML is the basic language for creating web pages on a website and eventually you will want your own website host to experiment with and to upload your web pages to.

| top | | bottom |

DIFFERENT VERSIONS OF HTML

HTML 1.0

The original version of HTML was HTML 1.0. It had very limited features which greatly limited what you could do in designing your web pages.

HTML 2.0

HTML 2.0 then arrived and included all the features of HTML 1.0 plus several new features for web page design. Until January, 1997, HTML 2.0 was the standard in web page design.

HTML 3.0

HTML 2.0 served its purpose very well, but many people designing web pages (called HTML authors or webmasters) wanted more control over their web pages and more ways to mark up their text and enhance the appearance of their websites. Netscape, the leading browser at that time, introduced new tags and attributes called the Netscape Extension Tags. Other browsers tried to duplicate them but Netscape did not fully specify their new tags and so these extension tags did not work in most other browsers. It led to considerable confusion and problems when HTML authors used these tags and attributes and then saw that they didn't work as expected in other browsers.
        At about that time, an HTML working group, led by Dave Raggett, introduced the HTML 3.0 draft which included many new and useful enhancements to HTML. However, most browsers only implemented a few elements from this draft. The phrase "HTML 3.0 enhanced" quickly became popular on the web but it more often than not referred to documents containing browser specific tags (discussed below in "The Netscape Problem" section), instead of referring to documents adhering to the HTML 3.0 draft. This was one of the reasons why the draft was abandoned. HTML 3.0 is now an expired draft. Another reason why HTML 3.0 did not make it was because it was so "big". Future versions were now to be introduced in a more "modular" way so that browsers can implement them modular by modular or bit by bit.

HTML 3.2 (WILBUR)

As more browser-specific tags were introduced, it became obvious that a new standard was needed. For this reason, the Word Wide Web Consortium (W3C), founded in 1994 to develop common standards for the evolution of the World Wide Web, drafted the WILBUR standard, which later became known as HTML 3.2. HTML 3.2 captures the recommended practice as of early 1996 and became the official standard in January, 1997. Most, if not all, popular browsers in use today fully support HTML 3.2.

HTML 4.0 (COUGAR)

In the early days, HTML 4.0 was code-named COUGAR. This version introduces new functionality, most of which comes from the expired HTML 3.0 draft. This version became a recommendation in December, 1997 and a standard as of April, 1998. Explorer has done a very good job in implementing the many features of HTML 4.0. Unfortunately, Netscape has not kept pace. The latest version of Netscape Communicator still doesnot recognize the many tags and attributes introduced with HTML 4.0. This means that a web page that involves HTML 4.0 specific tags will look great in Explorer but can look disastrous in Netscape.

XHTML 1.0

You would think that the next major version after HTML 4.0 would be HTML 5.0 and with it would come a bunch of new tags that would do all sorts of wonderful things. That would be a good guess - but it would also be a wrong guess. The next version of HTML after HTML 4 is XHTML.XHTML stands for EXtensible HyperText Markup Language.
      EXtensible
      Hyper
      Text
      Markup
      LanguageXHTML 1.0 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.
XHTML 1.0 is the result of the hard working World Wide Web Consortium (the W3C) to bring some sort of standard to provide rich high quality web pages through these varied devices. XHTML became an officialW3C recommendation in January, 2000. XHTML is now a web standard and is the next generation of HTML.





GETTING STARTED


NAMING YOUR WEB PAGE

When you save your web page for the first time, you need to give it a name. You not only have to give it a name but you also need to add a suffix (an extension) to the name.
THE NAME: If you are not running at least Windows 95, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer. Since most people today are using at least Windows 95, this is not an issue. It is strongly recommended that you do not use spaces in the file name. Browsers will replace the space with a coding such as %20 so that the name "my web page" will look like "my%20web%20page" which is confusing and does not look good. We do not want strange symbols in our file names and so it is best to avoid spaces in the name.
THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ".htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document.
You must use ".htm" if you are not running Windows 95 or higher. Again, this is no longer an issue and so you can use either .htm or .html for the file extension.
So if "homepage" is the name of the HTML document (your web page), you can have either
homepage.htm
OR
homepage.html





SAVING YOUR WEB PAGE (YOUR HTML FILE OR DOCUMENT)

This section may be better understood when we do an actual example in the next lesson, but here is a summary on saving a web page.
  • IF YOU ARE USING ONLY NOTEPAD, WORDPAD or a similar text editor:
    • Choose File from the menu bar, then from the drop down menu, choose Save As.
    • In the Save As dialog window, make sure in NotePad that the Save as type box reads All Files. In the case of WordPad, it should be Text Document.
    • In the File name box, type in a suitable file name along with an extension (either .htm or .html).
    • Click on OK and the file (the web page) is saved. In the case of WordPad you may be told that saving the file will remove all formatting. That is okay because we do not want any formatting saved with the file.
  • IF YOU ARE USING WORDPERFECT, WORD, WORKS (or any popular word processor):
    In lesson one, I gave an example in WordPerfect of what happens when you chose REVEAL CODES. In the lower half of the screen, you see your text all marked up with WordPerfect tags. If you need to review this, just click here on Lesson One. Well, it doesn't matter which word processor you use, it will have its own set of tags or codes which lets it know what the margins are, what is bolded, underlined, when the ENTER key has been pressed, and so on. If you save your HTML web page as a normal document file, all these little tags or codes are saved as well. In HTML, we don't want that. You must save your work asTEXT ONLY files. HTML browsers can read only text. If you don't save as TEXT ONLY, you will be saving a lot more than text. You will also be saving margin settings, bold, italics, indents, etc. When you are ready to save your HTML document or file, you must first choose SAVE AS ... from the FILE menu. Then, besides choosing a suitable file name, you must make sure to also choose TEXT ONLY, ASCII TEXT DOS, MSDOS TEXT, PLAIN TEXT, or just TEXT - your processor will have one of these options or a similar option. You can then click on "OK" to save your HTML file.

HTML TAGS


HTML works in a very straightforward manner. You type in your text and your tags. To get large print, centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than inserting tags around your text. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called content-based markup, as opposed to presentational markup. We will get more into this in Lesson Four when we study web page design. Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. I have also heard them called "pointed brackets"
   

<BR>, <P> and <HR> TAGS

<BR>
<BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which means that no codes are saved and so your browser will not know when to end a line and continue on to the next line. The <BR> tag does this for you.<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> and </HTML> tags


Before we can try out the <BR>, <P>, and <HR> features, we first need to learn how to set things up properly in an HTML document (or file as it is also called). Every HTML document should first be declared that it is in fact an HTML document. When the document is completed we also need to indicate this. You do this with the tags <HTML> and </HTML>. Recall that HTML stands for HyperText Markup Language which is the language of web page design.<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



CORRECT USE OF TAGS



We have "beginning" or "opening" tags (such as <HTML>) and we have "ending" or "closing" tags (such as </HTML>). Many elements consist of an opening tag and a closing tag. An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element.
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





<HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY> and </BODY> tags







In this section we will study the HEAD, TITLE and BODY container elements and we will learn about these tags (most people still refer to "elements" as "tags") by studying the following web page (HTML document).
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:
<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>
</HEAD>
<BODY>
Hi, my name is John Gilson.<BR>
This is my first attempt at a Web page.<HR>
Here is a riddle for you.
<P>Why did the lobster blush?<HR>
Because it saw the salad dressing.<BR><BR><HR>
</BODY>
       </HTML>Before we study this web page, let's save it. Here are the steps if the coding was typed into NotePad:
  1. From NotePad's File menu, choose Save As. This will display the Save As dialog window.
  2. In the Save As dialog window, click into the Save as type box and choose All Files.
  3. In the File name box, type in the name riddle.htm. You can of course enter any suitable name and also the extension .html instead of .htm.
  4. Everything else can be left as is and so click on OK. The web page is now saved.
Now lets see what the web page looks like in your browser. Here are the steps:
  1. Open your browser.
  2. From the File menu choose Open or Open File (whatever your browser says).
  3. Browse to the folder where the web page is saved. When you find the file, click on the name and then click on Open. If you get an Open window, click on OK. You should now see your riddle web page. This is what you should see in your browser:
Hi, my name is Hamm
This is my first attempt at a Web page



<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. 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.
<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>
</HEAD>
<BODY>
Line 1:    Hi, my name is John Gilson.<BR>
Line 2:    This is my first attempt at a Web page.<HR>
Line 3:    Here is a riddle for you.
Line 4:    <P>Why did the lobster blush?<HR>
Line 5:    Because it saw the salad dressing.<BR><BR><HR>
</BODY>
       </HTML>Hi, my name is Hamm.
This is my first attempt at a Web page



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.")?


The second line across the page was placed by the <HR> tag at the end of line 4.
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?
IN SUMMARY, WE HAVE:
<HTML>
<HEAD>
    <TITLE>the title or name of your page goes here </TITLE>
</HEAD>
<BODY>
.
.
.
all your web page work goes here in this section
.
.
.
         </BODY>
</HTML>



DESIGNING YOUR WEB PAGES

Just how should you design your web pages? Well, you should not design your pages only for appearance. You also need to design your pages for content. For example, you could add color to certain portions of text or you can highlight certain words with color to make them stand out. In your browser, it may look great. However, many people still use browsers that do not support coloring portions of text. So while it looks great in your browser, it will not give the same looks in other browsers, and text that you thought were highlighted by color will not be highlighted in these other browsers. Color is used to change the appearance of text. If a browser can't perform the appearance change, it has no way to determine an alternative. As a result the color attribute is simply ignored.Also, you may be able to fit a heading neatly on one line in your browser while in another browser, the font size could be a little bigger and the heading will not fit on one line. Or the reverse could be true, a heading may not fit on one line in your browser, but in another browser with a little smaller font size, it will fit into one line. Thus the appearance of the heading in your browser could be different in another browser. Also keep in mind that some browsers and servers do not support graphics. A user also has the option of turning off graphics to speed up the loading of web pages. Of course we still want our web pages to be pleasing to the eye but we need to keep in mind that how something looks in one browser could look entirely different in another browser. One person told me how surprised she was to see her web pages look so differently in another browser. She now designs her pages with this in mind.
Consider this example: Suppose you want to have something printed by the browser in italics to set it apart from the rest of the text. Using the italics tag, you could tell the browser to "print these words in italics". But what if someone's browser does not support the italics tag? The browser will simply not be able to perform the requested "appearance" change and the tag will be ignored. The italics tag was originally a Netscape extension tag that was not recognized by a number of other browsers. Instead, it would be better to tell the browser to "emphasize" the text through the "emphasis tag". In most browsers, this would be italics but it could also be rendered as something else. In any event, the text will be emphasized in some manner. The same is true for bolding text. If you tell the browser to bold a portion of text to make it stand out from the rest of the text, you are assuming the browser will recognize the "boldface" tag. The boldface tag was also originally a Netscape extension tag and so not recognized by a number of browsers. Instead, it would be better to tell the browser to "strongly emphasize" the text. In most browsers this will be boldface, but it could also be something else. Now with the passing of time, browsers today do support the italics and bolding tags but there are still a number of other tags supported by some browsers and not by others. That is, there are still a number of tags out there that are browser specific. That is why you sometimes see a statement such as "This web page is best viewed in Internet Explorer."
The "emphasis" and "strong emphasis" tags are "content based" markup tags and the above examples illustrate why you should use "content based" markup tags to mark up your text. Content based markup allows for browser independence. Knowing the meaning of a piece of text through a content based tag allows a browser to pick the best way possible to display the text on the platform it is running. Tags that are based on content and not on appearance are called LOGICAL TAGS. You are encouraged to use logical tags because the browser can then pick the best way to display the text on the screen.
If all this sounds too confusing, don't quit on me. Just follow through on the following examples involving logical tags. It should all become clear. Then I would suggest you come back and read again this introduction on "Designing Your Web Pages".



HEADER TAGS

Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time.There are only six HEADER tags and they range from H1 to H6.
     H1 produces the largest size heading and is called the "level 1 heading".
     H6 produces the smallest size heading and is called the "level 6 heading".
To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML document (this will also allow you to experiment with the document):

<HTML>
<HEAD>
<TITLE>HEADING LEVELS</TITLE>
</HEAD>
<BODY>
<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.
<H2>THIS IS H2.</H2> THIS IS NORMAL SIZE.
<H3>THIS IS H3.</H3> THIS IS NORMAL SIZE.
<H4>THIS IS H4.</H4> THIS IS NORMAL SIZE.
<H5>THIS IS H5.</H5> THIS IS NORMAL SIZE.
<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR>
</BODY>
       </HTML>Now SWITCH to your browser and load the document. This is what you should see in the browser window:

THIS IS H1.

THIS IS NORMAL SIZE.

THIS IS H2.

THIS IS NORMAL SIZE.

THIS IS H3.

THIS IS NORMAL SIZE.

THIS IS H4.

THIS IS NORMAL SIZE.
THIS IS H5.
THIS IS NORMAL SIZE.
THIS IS H6.
THIS IS NORMAL SIZE.
Note the following points:
  1. <H1> gives the largest size heading while <H6> gives the smallest size heading.
  2. In most browsers, the HEADER tags print the headings in boldface. A Level 1 heading (H1), because it is the largest heading, is considered to be the most prominent or most important heading. The Level 2 heading (H2) is the second most important heading. That is, it is more prominent than a Level 3 heading (H3) but less prominent than a Level 1 heading.
  3. Good HTML form dictates that HEADER tags should be used in hierarchical order. Don't jump all over the place with your heading levels. For example, if you use a Level 2 heading for a title or heading, then the next size to use for a sub-title would be a level 3 heading.
Study the above HTML document again and answer the following problems. The answers are given at the end of this lesson.
Problem 1: Which heading size is closest to the normal size?
Problem 2: Compare the document file with the results in your browser. Something does not seem to add up. From what you have learned so far in these lessons, state some of the inconsistencies. These will be fully explained in the answer section


Final remarks on the HEADER tags:
  • After all that has been said here about the header tags, keep in mind that they are logical tags. This means that you cannot assume, for example, that H1 means "very large bold text" in every browser. It will in most browsers - but you can't assume true in all browsers. It can be anything the browser chooses it to be - which could be defined by the viewer.
  • Some search engines give words appearing in headers more importance in their index. The headers are often used by these search engines to build an "outline" of the document which appears in the search results.

CENTERING TEXT

You can see from my lessons that I make good use of centering headings and titles. The center command is: ALIGN="CENTER" (no spaces around the equal sign) and must be used in conjunction with a HEADER tag or the PARAGRAPH tag as in:<H2 ALIGN="CENTER">a heading goes here</H2>
or
<P ALIGN="CENTER">a paragraph or block of text goes here</P>
Here are some points to remember concerning these two centering commands.
  1. In the first example, a "heading" is centered (as indicated by the H2), and remember that because we are using a Header tag, a blank line will automatically be inserted before and after the heading. For this section, my heading "CENTERING TEXT" was centered using the H3 Header tag.
  2. The second example is used to center whole portions of text - which could be several lines of text.
    In other words, we are centering a "paragraph"
    or "block of text" with each line centered on the screen
    just as these lines are centered (hopefully).
    To end centering a block of text,
    we use the </P> tag which is the closing paragraph tag.
    This </P> tag is a new tag for us
    and one that you may not end up using all that often.
    But it does have its uses and this is one of them.
    Choose DOCUMENT SOURCE from the VIEW menu
    if you want to see how I centered these lines.
  3. In ALIGN="CENTER", the ALIGN part is called an attribute. In the first example, ALIGN is the attribute for the Header tag. In the second example, ALIGN is the attribute for the Paragraph tag. An attribute provides extra information about the tag and the text it encloses. An attribute can have a value. In our two examples, the ALIGN attribute has the value "CENTER". In the first example, the browser is told to place (align) the heading in the "center" of the line. If a viewer should make the browser screen smaller, the heading will still remain centered in whatever the new screen size is. In the next example, a heading will be centered. When you do the example, be sure to try also ALIGN="RIGHT" and ALIGN="LEFT" (which is the default value if the ALIGN attribute is not used).
  4. The value must be enclosed in quotation marks if it contains anything more than letters, numbers, hyphens and/or periods. Otherwise placing the quotes around the value is optional. Since our two examples have only letters in the value ("CENTER"), the quotes may be omitted. If you are ever in doubt about the quotes, then just put them in. Of course the attribute and value do not have to be written in upper case (capital) letters either. They may be written in lower case. The maximum length of an attribute and its value is 1024 characters including the quotation marks if used.
  5. ALIGN="CENTER" is also called a "command within a command". The first command (ALIGN), tells the browser to align something and the second command (CENTER) tells the browser to align it in the center.
  6. Sometimes you will see documents use only the CENTER command (no ALIGN="CENTER") to center text as in:     <CENTER>
              .
              .
         all lines or blocks of text will be centered between these two tags
              .
              .
         </CENTER>
    <CENTER> was one of the first Netscape extension tags and, as was the case with many of Netscape extension tags, not supported by a number of browsers at the time. ALIGN="CENTER" is an official part ofHTML 3.2 and accepted by all browsers. You are therefore encouraged to use ALIGN="CENTER" for centering headings and paragraphs of text. If a browser does not support the CENTER tag, the headings and text will simply be left justified. We will be using the ALIGN="CENTER" command in the next example.



    EMPHASIZING TEXT

    There are two ways to emphasize text that I want to introduce here. These were alluded to at the beginning of this lesson under "Designing Your Web Pages". One is called ITALICS and the other is called BOLDFACE. Let's study both of them with the following example, which will also include the centering of the heading.Please SWITCH to NOTEPAD and type in the following HTML document:

    <HTML>
           <HEAD>
    <TITLE>OUTDOOR LIVING - ONTARIO</TITLE>
           </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">OUTDOOR LIVING IN ONTARIO</H2>
    <H3>POINTS OF INTEREST</H3><HR>
    <P>Northern Ontario:
    <P><STRONG>Five Mile Lake Provincial Park</STRONG>
    <P><EM>1.5 square miles.</EM> Camping, fishing (<EM>walleye, northern pike, brook trout</EM>), canoeing, self-guided nature trails.
    <P><STRONG><EM>Recommended</EM></STRONG> <HR>
    </BODY></HTML>
    Now load the document into your browser and your web page should look like the following:

    EMPHASIZING TEXT

    There are two ways to emphasize text that I want to introduce here. These were alluded to at the beginning of this lesson under "Designing Your Web Pages". One is called ITALICS and the other is called BOLDFACE. Let's study both of them with the following example, which will also include the centering of the heading.
    Please SWITCH to NOTEPAD and type in the following HTML document:

    <HTML>
           <HEAD>
    <TITLE>OUTDOOR LIVING - ONTARIO</TITLE>
           </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">OUTDOOR LIVING IN ONTARIO</H2>
    <H3>POINTS OF INTEREST</H3><HR>
    <P>Northern Ontario:
    <P><STRONG>Five Mile Lake Provincial Park</STRONG>
    <P><EM>1.5 square miles.</EM> Camping, fishing (<EM>walleye, northern pike, brook trout</EM>), canoeing, self-guided nature trails.
    <P><STRONG><EM>Recommended</EM></STRONG> <HR>
    </BODY></HTML>
    Now load the document into your browser

    <EM> = EMPHASIZE TEXT

    <EM> is used to emphasize text. It is a logical tag and so describes the meaning of the text to be displayed rather than how the text is to be displayed. In most browsers, the meaning is italics. However, if the browser doesn't support italics or the viewer changes the meaning, the browser will pick the best alternative way to display the text on the screen.

    <STRONG> = STRONGLY EMPHASIZE TEXT

    <STRONG> is also a logical tag. It is used to strongly emphasize text. <STRONG> is distinct from <EM>. In most browsers, STRONG is identical to boldface. If a browser does not recognize boldface or if the viewer changes the meaning of STRONG, then the browser will pick the best alternative from the platform it is running on.

    Using <B> for Boldface or <I> for Italics (Original Netscape Extension Tags)

    <STRONG> is accepted by all browsers as a way of strongly emphasizing text which in most cases is boldface. Instead of the <STRONG> and </STRONG> tags for strongly emphasizing text, you will sometimes see <B> and </B> for bolding text. While <STRONG> is a "Logical Style Command", <B> is not. <B> is a "Physical Style Command". A physical style command cannot be rendered differently. Therefore if a browser does not accept the <B> tag, then your text will simply not be bolded as the browser has no alternative way to display them on the screen.    The same reasoning is also be applied for using the tag <I> to print in italics instead of the <EM> tag. Now if for some reason you want to ensure only italics or boldface and nothing else, then use the italic font <I> or the boldface font <B>.



    INDENTING A LINE and CREATING SPACES with &nbsp;


     I indented the beginning of this paragraph. Remember that your browser normally prints text left justified and only leaves one space between words and sentences. To force extra spaces or simply to indent a line, use the following command. It works.

    &nbsp;

            These six characters will create a space as if you pressed the space bar. I used 8 of them to indent this paragraph as in:
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;These six characters will ...
    In &nbsp;, the nbsp stands for non-breaking space character. &nbsp; is simply known as the space character. How many of these non-breaking space characters you use in a row is up to you. Use whatever number suits your purpose. Note that the "nbsp" must be in lower case letters. &NBSP; will not work. The character "&" is pronounced "ampersand" and these 6 characters form an ampersand command. We know that browsers read commands inside angle brackets (<    >). Well, browsers also read commands between the "&" and ";" (that is, between the ampersand and semicolon). Ampersand commands are used to create special characters not found on the keyboard such as the copyright symbol, the trademark symbol, the symbol for degrees, etc. All you need to know is that special code that goes between the "&" and the ";".
    Here are some popular symbols and their ampersand commands that work in all browsers



    CREATING A LIST

    Lists are often used to present information in an easy to read fashion. Lists can also be used to indent information. Lists can be bulleted, numbered or printed without bullets and numbers. It should also be noted that in any type of list, you can still use the line break and paragraph tags and the normal text markup tags to emphasize text, etc.There are three types of lists:
    • UNORDERED LISTS (uses bullets)
    • ORDERED LISTS (uses numbers)
    • DEFINITION LISTS (no numbers or bullets


    CREATING AN UNORDERED LIST

    Unordered Lists are bulleted lists. You use the opening tag <UL> to indicate the beginning of an Unordered List. To indicate the end of the Unordered List, you use the ending tag </UL>. Furthermore, each item in your bulleted list must begin with the tag <LI>. <LI> stands for List Item. This is how you do it then:<UL>
    <LI>item
    <LI>item
    <LI>item
    </UL>
    To see an unordered list in action, SWITCH to NOTEPAD and type in the following HTML document. When finished, save the document, SWITCH back to your browser and LOAD the document file so you can see it in action and also to experiment with the document by trying different things. NOTE: Once a document has been loaded into the browser, it is not necessary to choose FILE and then LOAD FILE each time you want to check how your document looks. If your document is already in the browser, then just click on the RELOAD button on the menu bar (assuming you have that option). This will reload your document so you can examine your updates. Now back to the task at hand. Type in the following HTML document which we will call document #1 as it will also be used later for ordered and definition lists.
    This is document #1:

    <HTML>
    <HEAD>
    <TITLE>SAFETY TIPS </TITLE>
    </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
    <UL>
    <LI>Be able to swim
    <LI>Wear a life jacket at all times
    <LI>Don't stand up or move around
    <LI>Don't overexert yourself
    <LI>Use a bow light at night
    </UL>
    </BODY></HTML>    All my examples are for illustration purposes only. They should not be considered complete lists. This is the way your document should look:

    SAFETY TIPS FOR CANOEISTS

    • Be able to swim
    • Wear a life jacket at all times
    • Don't stand up or move around
    • Don't overexert yourself
    • Use a bow light at night
    Notice from the above results that:
    1. <UL> denotes the beginning of an Unordered List
    2. </UL> denotes the end of the Unordered List
    3. each <LI> denotes the next item in the list to receive a bullet
    4. the bullets are round and solid
    5. each item in the list has been indented 3 or 4 spaces from the left side of the screen
    6. no </LI> tag is required - although you can use it to signal the end of each List Item. However, each new <LI> implies that the previous List Item is finished.
    7. no <BR> tag is needed as each new LI command forces a line break before printing the next item. Try experimenting with <BR> after a list item or a <P> tag before a list item.
    You can also have lists within lists (nested lists). For example, the following HTML web page (which we will call document #2) is the same as the last one, except that for the third item in the list, I have added some statements on what to do if the canoe tips. What to do if the canoe tips will form a second list of items within the first list. SWITCH to NOTEPAD and make the necessary changes so that the web page now looks like the following.
    Document #2 is:
    <HTML>
    <HEAD>
    <TITLE>SAFETY TIPS</TITLE>
    </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
    <UL>
    <LI>Be able to swim
    <LI>Wear a life jacket at all times
    <LI>Don't stand up or move around. If canoe tips,
    <UL>
    <LI>Hang on to the canoe
    <LI>Use the canoe for support and
    <LI>Swim to shore
    </UL>
    <LI>Don't overexert yourself
    <LI>Use a bow light at night
    </UL>
    </BODY></HTML>    I indented the second list for emphasis. You don't have to do that. Here is the browser output for this web page.

    SAFETY TIPS FOR CANOEISTS

    • Be able to swim
    • Wear a life jacket at all times
    • Don't stand up or move around. If canoe tips,
      • Hang on to the canoe
      • Use the canoe for support and
      • Swim to shore
    • Don't overexert yourself
    • Use a bow light at night

    CREATING AN ORDERED LIST (A NUMBERED LIST)

    An Ordered List is a numbered list where the numbers are in order beginning with the number 1. In other words, instead of using bullets, numbers are used to number each item in the list. You treat an Ordered List in the same way as an Unordered List, except that you use <OL> instead of <UL>. OL stands for Ordered List.To see an ordered list, let's use document #1 and simply change the <UL> tag to <OL> and the closing </UL> tag to </OL>. So SWITCH to NOTEPAD, load in document #1 and make the two changes so that the web page now looks like:

    <HTML>
    <HEAD>
    <TITLE>SAFETY TIPS</TITLE>
    </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
    <OL>
    <LI>Be able to swim
    <LI>Wear a life jacket at all times
    <LI>Don't stand up or move around
    <LI>Don't overexert yourself
    <LI>Use a bow light at night
    </OL>
    </BODY></HTML>    This is the way your web page should now look:

    SAFETY TIPS FOR CANOEISTS

    1. Be able to swim
    2. Wear a life jacket at all times
    3. Don't stand up or move around
    4. Don't overexert yourself
    5. Use a bow light at night
    Notice the similarities here to that of the Unordered List in that:
    1. <OL> denotes the beginning of an ordered or numbered list
    2. </OL> denotes the end of the ordered list
    3. each <LI> denotes the next item in the list to receive a number
    4. the numbers are in sequence (in order) - hence the name Ordered List)
    5. each item in the list has been indented 4 or 5 spaces from the left side of the screen
    6. no </LI> tag is required to end a list item.
    7. no <BR> tag is needed to force a line break at the end of a list item.
    8. With ordered lists, if you insert another item into the list, or if you delete an item from the list, the list will automatically be renumbered (try it).
    9. A list item can take up more than one line. These nine items are an Ordered List and note that list items 8 and 9 take up more than one line and everything still nicely lines up. This is also true for Unordered and Definition Lists (studied below)

    COMBINING UNORDERED AND ORDERED LISTS

    We can combine unordered and ordered lists. To see this, let's use HTML document #2 where we had a list within a list. We will make some changes so that we will have a numbered list for the main items and a bulleted list for the items on "what to do if the canoe tips". Here is the revised document #2.
    <HTML>
    <HEAD>
    <TITLE>SAFETY TIPS</TITLE>
    </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
    <OL>
    <LI>Be able to swim
    <LI>Wear a life jacket at all times
    <LI>Don't stand up or move around. If canoe tips,
    <UL>
    <LI>Hang on to the canoe
    <LI>Use the canoe for support and
    <LI>Swim to shore
    </UL>
    <LI>Don't overexert yourself
    <LI>Use a bow light at night
    </OL>
    </BODY></HTML>    Here is the browser output for this web page.

    SAFETY TIPS FOR CANOEISTS

    1. Be able to swim
    2. Wear a life jacket at all times
    3. Don't stand up or move around. If canoe tips,
      • Hang on to the canoe
      • Use the canoe for support and
      • Swim to shore
    4. Don't overexert yourself
    5. Use a bow light at night

    CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)

    A Definition List also manipulates text for you. Unordered Lists and Ordered lists are "single item" or "one tier" lists because each <LI> creates one list item. A Definition List is a "two item" or a "two tier" list as you will see in the next example.The following example illustrates a DEFINITION LIST and we will not use one of our previous examples for this. SWITCH to NOTEPAD and type in the following new document.

    <HTML>
    <HEAD>
    <TITLE>TRIP PLANNING</TITLE>
    </HEAD>
    <BODY>
    <H2 ALIGN="CENTER">SUMMER CAMPING TRIP PLANNING</H2><HR>
    <DL>
    <DT>Winter
         <DD>Write for maps and travel brochures
         <DD>Read camping books
         <DD>Prepare budget and equipment list
    <DT>Spring
         <DD>Visit camping shows
         <DD>Buy essential items
         <DD>Make reservations
    <DT>Week Before Trip
         <DD>Have vehicle serviced
         <DD>Vaccinate pets
         <DD>Buy traveler's cheques
         <DD>Cancel newspaper and other deliveries
    <DT>Day before trip
         <DD>Load vehicle
    </DL>
    </BODY></HTML>    When you execute this HTML document, it should look like the following:



    CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS


    The TYPE attribute

    You can use the TYPE attribute to control the "appearance" of the bullets and also to control a numbered list. The TYPE attribute was originally a Netscape extension and new to HTML 3.2. It is now supported by all browsers.

    CHANGING THE APPEARANCE OF BULLETS

    Here is the way to change your bullets to SQUARE bullets:<UL TYPE="square">
    <LI>item 1
    <LI>item 2
    <LI>item 3
    </UL>
    If your browser supports the TYPE attribute, you should see the following square bullets. If your bullets are not square, then your browser does not support the TYPE attribute. Note that the value "square" is written in lowercase letters. The TYPE attribute will not work if it is written in uppercase letters.

    • item 1
    • item 2
    • item 3
    You can also change the appearance of your bullets to hollow or open bullets with:
    <UL TYPE="circle">
    To get the round solid bullets back again (which is the default value), use:
    <UL TYPE="disc">

    CHANGING THE APPEARANCE OF AN ORDERED LIST

    We can also change the ordered list to something other than Arabic numbers (1, 2, 3, etc.). For example, to change to a capitalized Roman Numeral numbered list, it is:
    <OL TYPE="I">
    <LI>item 1
    <LI>item 2
    <LI>item 3
    </OL>
    Note that the "I" is a capital or upper case "I" and not the number 1. The above example will give the following output in the browser:

    1. item 1
    2. item 2
    3. item 3
    The following replacements for the numbered list can also be made:<OL TYPE="i"> for lower case Roman Numerals (i, ii, iii, iv, and so on).
    <OL TYPE="A"> for capital letters (A, B, C, and so on).
    <OL TYPE="a"> for lower case letters (a, b, c, and so on).
    Note that <OL TYPE="1"> (the number 1) is the default for listing the items as 1, 2, 3, and so on.

    The START attribute

    The START attribute like the TYPE attribute is new to HTML 3.2 and so do not assume it will work for your website visitor.
    The START attribute is used to begin an Ordered List with any number or letter. For example,
    <OL START="3">
    as in:
    <OL START="3">
    <LI>item 3
    <LI>item 4
    <LI>item 5
    </OL>
    will begin numbering the list with the number 3 as in:

    1. item 3
    2. item 4
    3. item 5
    Also, try the following if your browser supports these attributes:<OL TYPE="I" START="3">
    will begin numbering with Roman Numeral III.
    <OL TYPE="i" START="3">
    will begin numbering with Roman Numeral iii.
    Problem 3: What do you think <OL TYPE="A" START="4"> will do to the list?
    Problem 4: What will <OL TYPE="a" START="5"> do to the list?



    The VALUE attribute

    The VALUE attribute is used to change the number WITHIN A LIST and is used as part of the LI command. The following example numbers the statements in the list as 1, 2, 3, 7, 8 as shown below the document.<OL>
    <LI>This is List Item 1
    <LI>This is List Item 2
    <LI>This is List Item 3
    <LI VALUE="7">This is List Item 7
    <LI>This is List Item 8
    </OL>
    which gives the following results:
    1. This is List Item 1
    2. This is List Item 2
    3. This is List Item 3
    4. This is List Item 7
    5. This is List Item 8

    The COMPACT attribute

    The COMPACT attribute basically tells the browser that the list items are short so that it can make the list more compact. For example, the browser could put more than one list item on a line. The COMPACT attribute is not widely implemented.





    LINKS

    You use links to:
    1. jump from section to section within the same web page (also called Page Jump)
    2. link to a different page within your own website (such as my linking this lesson to the next lesson or to my home pa
      1. link to another web page or website anywhere in the world

    There are different ways to provide these links. The three most common ones are:

    1. clicking on a word, phrase or sentence - such as those you see at the top of each of my lessons (and also on my home page to choose the lessons).
    2. clicking on a button - such as those you see at the very end of this lesson to take you back to my home page or to the next lesson.
    3. clicking on an image (that is, a picture or graphic)


    LINKS WITHIN A PAGE - PAGE JUMP

    Notice at the top of this page I offer the choice of either reading this lesson in its entirety or choosing a topic and going directly to that topic. If you were to print out this lesson, it would take approximately 11 sheets of letter size paper. On a browser screen, it can take some time scrolling to find a specific section or topic. Many viewers do not want to waste a lot of time searching and so offering page jumps will make this process easier. So with Page Jumps, you have the option of jumping to different sections or topics without having to search through the entire web page for the topic.
         Notice that at the end of each topic or section, I also offer the choice of going back to the top of the page or to the bottom of the page. So you can see that I make good use of page jumps.
    To offer a page jump, you need two items:
    1. The command that points or sends the browser to another section on your web page.
    2. The place or point on the page where you want the browser to jump to.
    You can also think of page jumps as bookmarks. You place bookmarks at different places on your web page and then at the top of your web page you provide links to these bookmarks. You must assign a name to each bookmark, otherwise the browser will not know where the bookmark is located. Here is the basic link command that points to another section on your web page.
    <A HREF="#linkname">Click on these words to go to the bookmark</A>
    Where "linkname" is the name of the section you are jumping or linking to. That is, a section of the web page has been bookmarked with the name "linkname". An example of a page jump is the following (to return back here, just click on the BACK button on your browser menu bar):

    This is the actual command I used for this:
    <H4 ALIGN="CENTER">
    <A HREF="#top">click here to go to the top of the page</A></H4>
    If you do not want to use a header tag, then use the paragraph tag as in:
    <P ALIGN="CENTER">
    <A HREF="#top">click here to go to the top of the page</A></P>
    At the point or place where you want the browser to jump to, you insert the following command:
    <A NAME="linkname"></A>
    For example, at the top of this page (right after the BODY tag), I entered this command:
    <A NAME="top"></A>
    and this is the spot that the browser will jump to whenever someone clicks on the words "click here to go to the top of the page". Thus I have bookmarked the top of the web page using the name "top".
    Note the following points with these two commands:
    1. When you move the mouse pointer anywhere on the words, "click here to go to the top of the page", it turns into a pointing hand. Anytime you see a pointing hand, it means that you are on a link and clicking on the link will take you some place. Notice that when you move the pointer over the words "click here to go to the top of the page", the location of this lesson, the file name of this lesson (lesson6.htm) and the "linkname" (#top) appears on the status line at the bottom of the browser (try it to see for yourself).
    2. "#top" is called the URL which stands for Universal Resource Locator. A URL is the address or location of the link.
    3. The A stands for Anchor. In general, the anchor tag tells the browser to anchor or to attach to something else. In HREF="#top", we are using it to tell the browser to anchor or attach to another section on the same page called "top".
    4. Every Anchor tag must have a closing or end tag (</A>) to signal the end of the anchor.
    5. The anchor element is a "container element". Everything contained between the <A> and </A> tags is affected by the element. In our example, the container element A not only contains the name of the section we are jumping to ("top"), but also the words to be clicked on ("click here to go to the top of the page").
    6. The Anchor element is called a Hyperlink as it allows you to link to any location or address you want. The anchor tag is the glue for hypertext documents. When the enclosed text (which can also be an image instead of text) is selected by the viewer, the viewer is immediately sent to the location specified in the HREF attribute.
    7. HREF stands for Hypertext REFerence. It means that "this is where the link is going to" - that is, where the link is referenced. In my example, it is going to a section called "top".
    8. As my example shows, the name I chose for the "linkname" was "top". Choose your link names to reflect the section you are jumping to and there is no need to have long link names.
    9. The # symbol that you see in the first command (in my example, "#top") must be there. The # denotes an internal page link. Without it, your browser will be looking for the code name outside the page you are on and of course, it won't find the name.
    10. There is no # symbol in the NAME attribute.
    11. The NAME attribute is used to set up "named anchors". The named anchor in our example is "top". When you click on the link, the section where you place the NAME command (the target of your HREF attribute) will appear at the top of the browser screen.
    12. The name you choose in the HREF attribute, must match the case in the NAME attribute.
    13. The value of the HREF attribute ("#top" in our example) and the value of the NAME attribute ("top") must be enclosed with quotation marks. If you don't enclose with quotation marks, the hyperlink may not work correctly.
    14. Anchors cannot be nested. You cannot have an anchor within an anchor.
    15. Please note that the following two statements do exactly the same thing:<A NAME="park"></A>A WALK THROUGH THE PARK
      and
      <A NAME="park">A WALK THROUGH THE PARK</A>
      Both these statements will place "A WALK THROUGH THE PARK" at the top of the browser screen when the viewer clicks to go to that section. With the first statement, a good HTML validator (a program to make sure you are writing correct HTML) will warn you that you have an empty container element A because no statement is contained between the anchor tags. Normally when you use a container element, it would be expected that something would be "contained" between the opening and closing tags - hence the warning. The second statement avoids this warning message as "A WALK THROUGH THE PARK" is contained between the anchor tags. Note also that a HEADER tag is not allowed between anchor tags, so if "A WALK THROUGH THE PARK" uses a HEADER tag, then you must use the first statement.
    Notice at the beginning of the lesson I have six choices to cover all the main topics. To separate them I used vertical bars ( | ) as in




    The vertical bar is usually located on the backslash key (\). It is the key that has the two vertical dashes on it, one above the other. The two dashes will appear as a solid vertical bar in your text editor (such as NotePad) and in your browser (and in other software as well).
    Now, if you need more than one choice in the menu, you simply place each of your links side by side as in:


    These are the links at the beginning of this lesson. The links shown here most likely do not appear as neatly as those at the beginning of this lesson, so we will work with this example until it does appear like the links at the beginning of this lesson.
    Here are the statements that support the above links:
    <H4 ALIGN="CENTER"><A HREF="#links">| Links in general |</A>
    <A HREF="#page">| Links within a page - page jump |</A>
    <A HREF="#another">| Linking to another page in your website |</A>
    <A HREF="#world">| Linking to another page anywhere in the world |</A>
    <A HREF="#button">| Using a link button |</A>
    <A HREF="#mail">| MAILTO: (sending an e-mail) |</A></H4>
    There are several things that can be learned from this one example and here they are:
    1. Notice that these page jumps are all centered with only ONE center command. Do not use the <BR> tag. In other words, don't say, "I can only get these two links on one line and so I will insert a page BReak command and then place the next three links on the next line, and so on. The problem with doing this is that you are designing for appearance instead of for content. If you want your links centered, then center them all with one ALIGN attribute and let each individual browser decide how they will be centered. In some browsers, maybe three links can fit on one line and in other browsers, maybe only two links will fit. Also, one browser may be able to fit all your links into two lines while another browser may require three lines. You need to take all these thoughts into consideration and so one center command is all you need and your links will look good in all browsers.
    2. Notice also that you not only can click on your link words (such as "Links in general"), but you can also click on the vertical bars (they are also underlined and highlighted in blue). This is because the vertical bars are also contained between the Anchor tags (that is, between the <A> and the </A> tags). You may not want this. Notice at the top of this lesson that I do not have the vertical bars as part of the link statement (they are not underlined). Compare the last example which is

    LINKING TO ANOTHER PAGE IN YOUR WEBSITE


    My main home page is the web page that contains a table of all these lessons. If you want to study a particular topic then you can go to my home page and choose the needed lesson. Each lesson in this course is also a web page, but it is not my home page. All my web pages (or simply "pages") taken together make up my website. In the table on my home page, when you choose a lesson, the lesson appears on the screen through a basic link command. Thus each cell in the table is a link to a lesson. At the end of each lesson, I have three links - one giving you the option of returning to my home page, one to my alternate home page, and one to go on to the next lesson.Linking to pages within your own website is easy to do. Recall that the basic command for a page jump studied in the last section is:
    <A HREF="#linkname">Click on these words</A>
    Well, to link to another page such as to your home page, just replace the #linkname with the name of your file as in:
    <A HREF="filename.htm">Click on these words</A>
    For example, if your home page was named index.htm, you could have:
    <A HREF="index.htm">Go back to home page</A>
    which will be displayed in the browser as:



    If you do click on these words, the browser will immediately load my home page. To return to this spot, click on the "BACK" button on the menu bar.
    Note the following points with the above command:
    1. As before, the A stands for anchor and in this case, it begins the attachment to another page.
    2. HREF as before, tells the browser that this is where the link is going to.
    3. The value of the attribute HREF is "index.htm". That is, "index.htm" is the file or document name of the web page you are linking to. The file name must be enclosed with quotation marks.
    4. Since the words "Go back to home page" are contained between the anchor tags <A> and </A>, a person can click anywhere on those words and the browser will load the home page.
    5. You do not need a <A NAME="filename"></A> command as the file (in our example, "index.htm") already exists.
    6. When you lay the mouse pointer anywhere on the words, "Go back to home page", you will see the file name ("index.htm") and its location displayed on the status line at the bottom of the browser screen. In other words, the complete URL is displayed.
    Problem 4: Where will the browser look for this file called "index.htm" or whatever file name you choose for your web page?



    LINKING TO ANOTHER PAGE ANYWHERE IN THE WORLD

    Often you see web pages with links to other web pages or websites and these other web pages can be anywhere in the World Wide Web (WWW). Recall in the above section, that the command to link to another web page within your own website is:<A HREF="filename">Click on these words</A>
    as in:
    <A HREF="index.htm">Go back to home page</A>
    where the browser will load the file called "index.htm" when you click on the words "Go back to home page".
    To link to any page in the world, just replace the file name with the COMPLETE ADDRESS (URL) of the page you want to link to. Remember that you must also enclose the COMPLETE ADDRESS (the URL) of the link with quotation marks. For example, the command
    <A HREF="http://www.dayspring.com/ecards/">Want to e-mail a greeting card to someone?</A>
    will link you to a website that lets you send e-mail greeting cards. If you want to try it now, here it is:
    Problem 5: In summary, the three link commands that we studied in this lesson are very similar statements. The only differences are in the names. Here are the three situations showing their similarities. Give a brief description of when each is used.
    a)   <A HREF="#top">enclosed text</A>
    b)   <A HREF="index.htm">enclosed text</A>
    c)   <A HREF="http://www.press.com/perma/">enclosed text</A>



    USING A LINK BUTTON

    At the very end of this lesson, I used three link buttons - one to allow you to go back to my main home page, one to my alternate home page, and one to take you to the next lesson. Buttons are neat and professional looking. Here is an example of a link using a button (feel free to click on it and then choose the BACK button to return to this spot).


    Here are the HTML statements that give this button:
    <H3 ALIGN="CENTER">
    <FORM METHOD="GET" ACTION="index.htm">
    <INPUT TYPE="submit" VALUE="Return to Home Page">
    </FORM></H3>
    Note the following explanations on these statements:
    1. There are two main command lines here. The first one is called the FORM command and the second one is called the INPUT command.
    2. FORM is a container element. The opening tag tells the browser that a form item is going here. The closing tag </FORM> ends the form item (which you see at the end of the statements). We will learn about forms in a later lesson.
    3. The FORM command has two attributes - METHOD and ACTION.
    4. METHOD, a FORM attribute, tells the browser how to handle the FORM command. Its value here is "GET". That is, the browser is to "get" something which in this case points to a link through the ACTION attribute.
    5. ACTION means the connection that you want to make. In this case, the action is a connection to my home page which is a file called "index.htm". If you want to connect to a page on the WWW, be sure to type in the complete address (URL). ACTION is a required attribute as it specifies the URL of the location you want to link to.
    6. The second command line is the INPUT command and it generates the button.
    7. The TYPE attribute lets the browser know what TYPE of INPUT will occur. In this case we want to SUBMIT a button (a button is assumed in "submit"). Thus TYPE="submit" produces a button.
    8. The VALUE attribute gives the wording that will appear on the button.
    9. Only the value of the ACTION and VALUE attributes require quotation marks. Quotation marks for the METHOD and TYPE values are optional.
    If you want two buttons above each other, then just repeat the above statements twice, changing the ACTION and VALUE attributes to whatever is appropriate for your situation. Here are two centered buttons. The statements are given below the buttons. The buttons are active so you can click on them.


    Here are the statements that give the above two buttons:
    <H3 ALIGN="CENTER">
    <FORM METHOD="GET" ACTION="index.htm">
    <INPUT TYPE="submit" VALUE="Return to Home Page">
    </FORM>
    <FORM METHOD="GET" ACTION="Lesson7.htm">
    <INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
    </FORM></H3>



    E-MAIL (using the MAILTO: command)

    Before we leave this lesson on links, let's take a look at the command that allows people to write to you simply by clicking on your e-mail address or on some statement pointing to your e-mail address. To do this, we use the MAILTO: command which in effect creates a link to your server by opening up the e-mail box allowing a message to be sent immediately.Here is a statement that would allow anyone to send me an e-mail:
    Please tell me what you think of these lessons by sending me, HAMM, an e-mail.
    Note that only "John Gilson" is underlined and in blue meaning that if you want to send me an e-mail, you only need to click on my name. Try it and see what happens. You won't be able to send me an e-mail as I am using a dummy address so you can experiment with the MAILTO: command. If you want to send me an e-mail, you can do it from my home page. To close the e-mail box, just choose FILE and then CLOSE and the e-mail box will disappear.
    Here is the HTML line that gives the above statement:
    Please tell me what you think of these lessons by sending
    me, <A HREF="mailto:jcgilson@bfree.on.ca">HAMM</A>, an e-mail.
    In this example, jcgilson@bfree.on.ca is my complete e-mail address. For your own web pages, just replace my e-mail address with yours. Note that the only difference between this e-mail link command and a link to any web page is that the e-mail address goes in place of the web page URL

















Subscribe to: Posts (Atom)