Sunday, July 2, 2017

Html-Meta Tags

Hello guys evening,for those of you that visit this blog for tutorials on web design,you all know we have gone a little bit far on HTML,tho no topic on CSS have been treated but tutorials on CSS will commence once we round up tutorials on HTML.So for the purpose of this tutorial we gonna be talking about HTML meta tags.

HTML allows you to specify metadata (additional important information about a document in a vast number of ways.) The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

The <meta> tag is used to provide such addittional information, This tag is an empty element meaning that it does not have a closing tag but it carries information within its attributes.

You should know that it is very much possible to include one or more meta tags in your document based on what information you wanna keep in your document but in general, meta tags do not affect physical appearance of the web page so from appearance point of view, its does not realy matter if meta data are included or not.

Adding Meta Tags to Your Document
Now lets take a good look at how meta tags can be added to the head section of our document.
You can add meta data to your web pages by placing <meta> tags in the header of the document which is been represented by <head>........</head> tags. A meta tag can have the following attributes below in addition to core attributes.

Attribute                                               Description

Name                      Name of the property, can be anything. 
                                Example includes, Keywords, description, 
                                author, revised, generator etc.

Content                   Specifies the property's value.

Scheme                   Specifies a scheme to interpret the property's 
                                value.

http-equiv               Used for http response message headers. For 
                               example, http-equiv can be used to refresh the 
                               page or set a cookie, values includes content-
                               type, expires, refresh and set-cookie.

Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by search engines while indexing your webpage for searching purpose.


Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="keywords" content="HTML, CSS, BOOTSTRAP" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

Like i said earlier Meta data does not have any effect on the physical appearance of the webpage,but you can try the above code out using your text editor for better understanding,it is said that practice makes perfect.

Document Description
You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.

Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="description" content="Learning about meta tags on web design tutorialz" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

Like i said earlier Meta data does not have any effect on the physical appearance of the webpage,but you can try the above code out using your text editor for better understanding,it is said that practice makes perfect.

Document Revision Date 
You can also use the <meta> tag to give information about when last the document was last updated. This information can be used by various web browsers while refreshing your web page.



Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="revised" content="Web design tutorialz , 02/07/2017" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

You can try the above code out and feel free to drop your questions in the comment box.

Document Refreshing
You can use the <meta> tag to specify the duration after which your web page will keep refreshing automatically.



Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="refresh" content="10" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

You can try the above code out and feel free to drop your questions in the comment box,In the above code the web page is gonna be refreshing automatically in every ten seconds.

Page Redirection
You can use <meta> tag to redirect your web page to any other web page, you can also specify a duration if you want to redirect the page after a certain number of seconds.



Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="refresh" content="10; url=https://webdesigntutorialz.blogspot.com.ng" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

You can try the above code out to get a better understanding of what we realy talking about.

Setting Cookies
First let me explain what cookies are,they are data stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various informations based on your web application need.

You can use <meta> tag to store cookies on client side and later this informations can be used by the web server to track the site visitors.

Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="cookie" content="userid=abx; expires=Wednesday, 05-july-17 20:20:59 GMT;" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

Take note that if expiration date and time is not included, then the cookie is considered as a session cookie and will be deleted when the user exists the browser.

Seeing Author Name
You can set name of author in a web page using the <meta> tag.



Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name="name" content="Nkpara Kennedy Chinaza" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

Specify Character Set 
You can use <meta> tag to specify character set used within the web page.



Example 
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta http-equiv="Content Type" Content="text/html; charset=UTF-8" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

Alrigth guys thats the end of this tutorial,In my next tutorial i will be talking about HTML comments,bye for now.

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION]
Share:

0 comments:

Post a Comment