The <META> command it is one of those little-used commands of the HTML language. However, it is responsible for important aspects of an HTML page. With it, we can create dynamic documents or create specific information that will be used by the server in response to a request by the user or by the internet search engines.
To better understand the use of this command, you must understand a little about the HTTP protocol. When a browser requests a document contained in a web server, the server responds to the request by sending the document requested preceded by a header (not to be confused with the HTML language <HEAD> command), indicating some information to the browser so that it can correctly display the information being sent. This header is transparent to the user and is not part of the HTML document.
Here is an example of this information:
HTTP/1.0 200 0K
Date: Sunday, 15-Dec-96 20:23:00 GMT
Server: CERN
MIME-version: 1.0
Last-modified: Saturday, 08-Dec-96 10:23:00 GMT
Content=length: 987
<HTML>
<HEAD><TITLE>My home page</TITLE>....
The first line indicates that the server is using the http 1.0 protocol and sends the code 200 saying that the client's request was successfully answered. Next, the server sends the date and and identify the the type of server. The next line says that the server uses the MIME format to describe the type of information which will be sent. Then the size of the information that will be sent is given (in bytes), followed by a blank line. Finally, the information, in this case the command of the HTML document requested, is sent.
Using the <META> command, the developers can add information to this header so that the browser can execute actions based on their content.
<META> Syntax
The <META> command can be used to create meta-information or variables and their contents which describe characteristics of the HTML document, such as the name of the author, expiration or creation date of the document, keywords, etc.
The basic Syntax of the command is the following:
<META
HTTP-EQUIV=answer
CONTENT=description
NAME=description
URL=url>
Where:
HTTP-EQUIV= answer-- Gives the page developer a way to create or identify information that should be inserted in the headers of a document returned by a server in response to a browser request.
CONTENT= description-- Defines the information associated with the name of the variable or meta-information.
NAME= description-- The name of the meta-information or variable being created. Content should be attributed to it through the CONTENT option.
URL= url-- Indicates the URL of the document.
For example, if the following lines are included in a documents:
<META HTTP-EQUIV="Expires" CONTENT="Sun, 04 Mar 1997 20:00:00 GMT">
<META HTTP-EQUIV="Reply-to" CONTENT="joseantonio@ramalho.com">
<META HTTP-EQUIV="Keywords" CONTENT="HTML, internet">
the server creates a header containing the following information:
Expires: Sun, 04 Mar 1997 20:00:00 GMT
Keywords: HTML, internet
Reply-to: joseantonio@ramalho.com
The <META> command should be specified between the <HEAD> and </HEAD> commands of the HTML document.
Dynamic Documents
An HTML page must have user interaction for a new page to be displayed. This can be done by clicking on a hypertext link or pressing a next or back type button. Most browsers allow two ways of automatically loading other documents without user interaction.
One of the the techniques is called server push. This is where the server periodically sends information to the browser. In this case, the connection with the server is kept open all the time. The server has total control as to when and how to send the data. The other technique, which is relevant here, is called client pull. Here, the server, oriented by a <META> commands contained in the document, sends information at defined time intervals. For example, you can include a command for the HTML page that was opened to be automatically reloaded every 15 seconds, or that another page be loaded after 10 seconds.
Automatically Loading Another Document
Use of the self-loading feature is appropriate when you wish to display some initial information and then other information. For example, the user accesses a page displaying general company information, and after some time loads another page. This effect is achieved by using the <META HTTP-EQUIV> command.
See the source code below:
<html>
<head>
<title>meta - loading another document - meta01A.htm</title>
<META HTTP-EQUIV="REFRESH" CONTENT = " 5; URL=META01B.HTM">
</head>
<body bgcolor="#FFFFFF">
<h2>This document is displayed for 5 seconds. Next the meta01b.htm document is automatically loaded</h2>
</body>
</html>
The <META> command creates a meta-information called refresh in which CONTENT is the number 5 and the URL is meta01b.htm.
In practice, this command tells the browser to load the meta01b.htm (URL) document after 5 seconds.
After the time indicated elapses, the specified document is displayed.
Some Practical Uses of the <META> Command
Some sophisticated applications may be made using this command. For example, using a digital camera and specific software, you can capture an image of some object, person, or place every 10 seconds.
<META HTTP-EQUIV="REFRESH" CONTENT = " 10">
An HTML page containing the <IMG> command that displays the file of this captured image and the <META> command would cause the page to be loaded every 10 seconds. And the new photograph displayed, another interesting application, is a monitor panel, where a CGI application generates an HTML page based on the contents of a a constantly updated database. This page may be loaded once and automatically update itself in the time interval desired.
A presentation can be easily created using this feature. Imagine that you created five screens, or pages, which sequentially display some information. For it to be executed continuously, just at the <META> command indicating a time and the URL of the next page that will be loaded. In the last page, indicate the URL of the first page.
Important Note
Once an HTML page containing the <META> command with the Refresh instruction is loaded, it will be executed automatically when the determined time is reached. The only way to interrupt this process is to load another page in the current window by pressing the back button or clicking on a hyperlink.
See our presentation using this feature in the htmladv\meta\test directory. Load the the sld001.htm file and watch The show. For demonstration purposes, we left a very short time--5 second-- to advance to the next slides. In practice, this time should be adjusted to a higher value. In any case, press one of the advanced or return buttons below the figure before the time is up to change slides manually.
Creating Animation
One of the ways of creating animation in an HTML page is to use the <META> command to load different images to the same location. If the value 0 is specified as transition time, the images will be changed immediately. In an internet or local network, this will give the impression of animation. In the internet, the image transmission time may be very long due to the net traffic, which many times makes this animation feature not feasible. A much more efficient solution is the use of animated images, discussed in Some next episodes of this series. However, it is worthwhile to show this technique.
The anima01.htm file makes use of this techniques (compare this same animation made using animated images):
An Animated Panel:-
You can create an interesting panel where several images are displayed in different frames by using the technique described in the previous section along with the frames feature.
Load the PANEL.HTM document and watch a little of the animation:
In a few moments, the figure and the colours start to change positions:
Here is the program's code:
<html>
<title>Panel.html</title>
<frameset rows="360" , cols="160,160,*" frameborder=0>
<frameset rows="184,184">
<frame name="Frame 1" src="potil.htm" scrolling="no" noresize frameborder=0 marginwidth=0 marginheight=0>
<frame name="Frame 2" src="red.htm" scrolling="no" noresize frameborder=0 marginwidth=0 marginheight=0>
</frameset>
<frameset rows="184,184">
<frame name="Frame 3" src="green.htm" scrolling="no" noresize frameborder=0 marginwidth=0 marginheight=0>
<frame name="Frame 4" src="sue.htm" scrolling="no" noresize frameborder=0 marginwidth=0 marginheight=0>
</frameset>
<frameset rows="184,184">
<frame name="Frame 5" src="pichu.htm" scrolling="no" noresize frameborder=0 marginwidth=0 marginheight=0>
<frame name="Frame 6" src="black.htm" scrolling="no" noresize frameborder=0 marginwidth=0 marginheight=0>
</frameset>
</frameset>
</html>
Each frame load se different file. These files, some with photographs of my three troublemakers and others simply with a background colour, make use of the <META> command to load another file in its place. All the files are called in a sequence. For example, the POTI1.HTM file calls the WHITE.HTM file, which is turn calls RED.HTM and so forth until the POTI1.HTM file is called again. An interesting detail is that we use different times to load the files. This is necessary to cause a random effect so that just one frame is loaded at a time, rather than all of them at once.
POTI1.HTM File:-
<html>
<head>
<title>poti1.htm</title>
<meta http-equiv="refresh" content="3; url= white.htm">
</head>
<body bgcolor="#FFFFFF">
<img src="poti1.gif" width=160 height=184 border=0>
</body>
</html>
WHITE.HTM File:-
<html>
<head>
<title>white.htm</title>
<meta http-equiv="refresh" content="2; url= red.htm">
</head>
<body bgcolor="#FFFFFF">
<img src="white.gif" width=160 height=184 border=0>
</body>
</html>
Internet Search Engine and the <META> Command
At the end of this series you will find an appendix showing how to register your page in the main internet search engines such as Yahoo, AltaVista, Lycos, and others. It is not enough to place your page in your provider's web server. If you want it to be found by someone looking for a subject that it contains, you need to index it carefully. Each one of these search engines uses its own technique or algorithm to index the pages registered with it. A suggestion it to enter each one of these engines and obtain details about how it works.
Generally, if one of these engines does not find any hint about the content of the page, it takes the first words it finds as keywords. Other take all the words of the page. And many of them make use of the <META> command to obtain really important keywords about your page.
Below is a list of the main engines and their addresses:
| Internet Search Engine | Comments |
|---|---|
| http://ultra.infoseek.com/- | One of the most popular and swift net engines. |
| http://altavista.digital.com/- | Perhaps the largest of all. When nothing else helps, use AltaVista. By being very broad, it returns an excess of information to be filtered. |
| http://yahoo.com/- | The most popular among researchers. |
| http://lycos.com/- | This is one of my favourites. It has a specific search of persons and multimedia files along with a very nice index of cities. |
| http://webcrawler.com/- | A good alternative based on America online. |
| http://index.opentext.com/- | One of the oldest engines. Indexes all the words of a page. |
| http://excite.com/- | It has an interesting characteristic-- it searches for words associated with a concept. |
Next is a list of attributes of the <META> command that can be used to make the work of these search engines easier:
<TITLE> -- The <TITLE> command, used in the HEAD area of the document, is used by most of the browsers to place a title in the browser window title bar. Some engines use its contents to display the result of a search.
KEYWORDS -- The most important attribute. It should contain a list of the keywords associated with the document, separated by commas. Place the most important words first. Some engines differentiate between upper- and lowercase letters.
DESCRIPTION -- The content of this attribute is displayed to the user together with the page title as the result of a search.
EXPIRY DATE -- Indicates the date after which the listing should be arranged. This is used by Netscape and by some servers to erase the page from the server's cache area.
Now see the news of some of these attributes of the <META> command:
<html>
<head>
<TITLE>META Tag Builder</TITLE>
<meta name="keywords" content="META search engine keywords metadata">
<meta name="description" content="Description of tags generated by Vancouver webpages ' Meta Tag Builder">
In this example, the words metadata, keywords, search, engine, and meta used as keywords.
There are some sites on the Internet where you can fill in a form and get back the proper <META> command for your page. Check the following addresses:
https://www.websitepromote.com/resources/meta/
This is one of the most practical sites for this type of task. You just fill in the blanks in a form and receive in your mailbox the <META> tag command. Then just cut and paste of your HTML code.
Using the <META> command with the KEYWORDS attribute makes your page more visible to the world.
👈Episode 14.2 Episode 16.1👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.