"Hey! What's the <META> in Your <HEAD>?"
"A slicker opening... and I look better on Search Engines!"
After this lesson you will be able to:
Note: If you do not have the working documents from the previous lessons, download a copy now.
In this lesson we will review two uses of <META> tags. This HTML syntax was created to allow "meta" or "extra" information to be embedded in a web page, in the part that is not displayed by the web browsers. There are many other types of META tags that you may come across, but we have provided examples on the two that are most useful.
The place that these tags go are within the <HEAD> ... </HEAD> part of your HTML document that we learned about way back in lesson 1.
The first type of META tag allows you to write HTML that will display your web page, wait an arbitrary number of seconds, and then automatically advance to another page or URL. Why would you even want to do such a thing?
We will show you how to do the third example above, adding an opening screen to the Volcano Web lesson. The <META> tag resides inside the <HEAD>..</HEAD> tags:
<head> <title>My page title</title> <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=newpage_or_URL.html"> </head>
where Xis the number of seconds that this page will be displayed before advancing to the HTML file or URL listed after URL=. Note that the whole string after CONTENT= must be in quotes, and there must be a semi-colon after the value for the number of seconds.
For this lesson we will be creating a cover page, that replaces the entry point to the lesson, index.html.
Before we do anything, we have to adjust the name of the page and all link references to it.
<A HREF="index.html">Index</A> /which should be changed to read:
<A HREF="index1.html">Index</A> /The second place is at the bottom of every page,
<ADDRESS> <b><A HREF="index.html">Volcano Web</A> :which should be changed to read:
<ADDRESS> <b><A HREF="index1.html">Volcano Web</A> :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>Volcano Web</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666> <!-- first table centers all content on any browser window size --> <table border=0 width=100% height=100%> <tr> <td valign=middle align=center> <!-- Second table stretches the word "volcano!" across the width of the screen --> <table border=0 width=100%> <tr> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>v</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>o</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>l</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>c</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>a</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>n</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>o</b></font></td> <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>!</b></font></td> </tr> </table> <p> <A HREF="index1.html"> <IMG SRC="../pictures/cover.gif" ALT="volcano!" WIDTH="206" HEIGHT="186" BORDER="0"></A> <p> <font face="verdana,helvetica,arial" size=2><A HREF="index1.html">enter</A></font> </td> </tr> </table> </body> </html>
NOTE: We are using some table tricks mentioned at the end of lesson 21. All of the content on this page is inside a table sized with a width and height of 100%, so it remains perfectly centered no matter what the dimensions are of the browser window. Then inside this table, we include text, pictures, and another table that is set to be 100% the width of the browser window, evenly stretching the 8 letters
"v o l c a n o !"across the screen (by putting each letter in a table cell that is set to be 1/8 or 12% the width of the screen). Try it, and see what happens if you resize your web browser window!
We also have used <font face=..> styles that may not be on every person's computer; if they do not have the first one, the browser looks for the second, then the third...
Although we will be adding the <META> tag for automatically advancing the web page, it is good design to provide the hyperlinks as well; we have made the image as well as some text links to our "main" page, index1.html
<title>Volcano Web</title>add the META tag line:
<META HTTP-EQUIV="REFRESH" CONTENT="3; URL=index1.html">
NOTE: The META tag instructs the browser to pause 3 seconds and then automatically advance to the web page at index1.html
You are doing all of this hard work to learn HTML and create web pages. Ultimately, you probably want people to be able to find them among the other 10 gizillion pages out there. META tags allow you to add extra information that will help identify your web page when people use Internet searches.
We are not going to go into great detail about web search engines (but we invite you to visit our friendly companion tutorial, "How to be a WebHound"). Basically, some clever programmers have written code that tries to follow as many web links as it can, and return a bit of information about each page it "walks" to a centralized database. They then offer a single web page where you can enter some descriptive words, and their site returns a list from their database that might match what you are looking for.
If you are not familiar, experiment with using the search features from sites such as Altavista, HotBot, Excite, Lycos, etc.
At many of these web sites, the results that are returned display the text of the first few lines of the displayed web page. Unless the very first words on your page are very descriptive, the results will not provide a clear understanding about what is on the page. For example, for our Writing HTML tutorial main page at http://www.mcli.dist.maricopa.edu/tut/, without META tags, a search engine might return something that looks like:
This is not too bad; we can get an idea about what this site is about, but we are seeing the text from the links at the top of the tutorial pages. However, by inserting a META tag, we can make it so that the results appear like:
The HTML format for adding this kind of META tag is
<META name="description" content="The string of text is a really good description of this web page. Perhaps a second sentence would help as well.">
If you are tempted to write a long descriptive narrative, keep in mind that maximum length of a META tag, from the first < to the last > is 1024 characters, leaving 998 characters between the beginning of the tag
<META name="description" content="
and the closing
leaving room for perhaps 100 words.
Another META tag that is useful in shaping how your site fares on web searches allows you to add the important words that you think a visitor might enter when they are searching for a site such as your own. For example, for our Writing HTML tutorial main page at http://www.mcli.dist.maricopa.edu/tut/ we provided these keywords using the format for our META tag:
Now we will add the two descriptor META tags to the main entry page for your
<META HTTP-EQUIV="REFRESH" CONTENT="2; URL=index1.html">add these two additional META tags:
<META name="description" content="A mini lesson about the wide world of volcanoes as an example for the Writing HTML tutorial"> <META name="keywords" content="HTML, volcano, learn, web page, earth, mars, Mount St, Helens, Long Valley, Pliny">
NOTE: The addition of the two META tags will not make your web page look any different. (Why?) but once they are placed on a web server, they will enhance how your web page is "indexed" by the different web search sites.
Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.
Review topics for this lesson:
Can you develop a one or two sentence that would define your site to a person who had not seen it before? Add some META tags for descriptors and keywords to your own page.
Experiment with a front end page that introduces your web site and use the META REFRESH tags to make it jump to your main page. Can you make the opening page compelling enough to "invite" someone into your site? Do you think this page should contain a lot of graphics or very few? Why or why not?
To learn more about search engines and how they work, see Search Engine Watch, and their special section on How to Use Meta Tags.
If you want to learn more about how to search techniques, try our Web Hound tutorial (it is as much or more fun than this one!)
Making hyper links that pop up in another browser window.
Writing HTML: Lesson 24: META tags
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is Alan Levine
Comments to firstname.lastname@example.org