Writing HTML | About | FAQ | References | Tags | Lessons | previous | next |
24. META tags
"Hey! What's the <META> in Your <HEAD>?"
"A slicker opening... and I look better on Search Engines!"
Objectives
After this lesson you will be able to:
- Write the HTML to have one web page automatically advance to another page
- Add embedded information that will help others find your site using Internet searches
Lesson
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.
META REFRESH for auto advancing of web pages
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?
- Pages that have moved. As a web site designer, you should strive to avoid your visitors striking the dreaded Error 404 Site Not Found message. Often you may create a web site available on the web, and then because you re-design the site, the file has been moved to a different folder/directory (see Swiss Web Knife), or moved to another web server (see M2C), or is just no longer made available (see Math Software Evaluations). It is nice to leave a page that offers a link to the newly named or moved site, but with the META tag, you can have it jump there automatically.
- Timed Slide Shows You may create a series of web pages that each sit for say 10 seconds before automatically advancing to another web page, like a kiosk (see 1996 League of Innovation Conference Web Display)
- Opening Sequences Many web sites now are designed to load a quick opening page, perhaps with a small logo, that pauses a few seconds before jumping automatically to a more comprehensive page. This presents a more eye-pleasing introduction, especially if the main page is "busy", like the opening credits to a movie.
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.
- First, you will need to get a copy of a colorful Volcano graphic image from the Lesson 24 Image Studio. Put this image inside of your pictures folder/directory with your other image files.
- Change the name of the HTML file index.html to index1.html
- Using your text editor, open all of your HTML files, and change every link to file index.html to read index1.html. This occurs twice in every page, at the top of the page
<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> :
- Now we will create a new page to replace the index.html page we had before. We will first construct it and verify the HTML before inserting the META tag (it is difficult to test your pages if it keeps moving every time you load it!). Using your text editor, create a new HTML file that looks like:
<!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="206px" height="186px" 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 - Save and Reload in your web browser. Test all of your links to make sure they lead back to the index1.html file.
- Now open your newly created index.html file in your text editor, and after the line that reads:
<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
- Save and Reload index.html in your web browser. See if it makes the auto jump to the second web page.
META Descriptor tags
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:
<META name="keywords" content="HTML, tutorial, learn,
make, create, design, web page, home page, education,
maricopa, mcli, writing, form, tables, frames,
javascript">
Now we will add the two descriptor META tags to the main entry page for your
- Open the index.html file in your text editor.
- After the portion of the HEAD tag that reads:
<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"> - Save the HTML file and Reload in your Web browser.
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.
Check Your Work
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
Review topics for this lesson:
- How can you make one web page automatically jump to another?
- If you edit the META DESCRIPTION=... tags, why do you not see anything different when you view your web page?
- How would you use META REFRESH tags to create a 10 screen, auto-advancing, slide show? How would you make it cycle endlessly through all 10 slides?
- How can you use META tags to increase the chances of your web page being found by web search engines?
Independent Practice
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?
More Information
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!)
Coming Next....
Making hyper links that pop up in another browser window.
GO TO.... | Lesson Index | previous: "Clickable Image Maps" | next: "Target That Window" |
Writing HTML: Lesson 24: META tags
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
URL: http://www.mcli.dist.maricopa.edu/tut/tut24.html