HTML:Meta Tags

Welcome to another post, in this post we shall be looking at yet another common tag used in HTML… Meta Tags…. I chose to discuss Meta tags today because anyone who has a website or blog or is planning to create one will obviously want that website/blog to be found by search engines(Google, Yahoo, Bing, etc.) and in so doing increase their reader base/traffic to their site.

Search Engines have become the most used tool on the internet today to find relevant information about just any thinkable topic and it is expedient that your website/blog gets found in this large sea of information that is available on the World Wide Web….. Wouldn’t it be very awful if someone was searching for information on a subject you know so well and you have taken the time to explain it in a well detailed manner on your site but can’t seem to see your site but all the person sees is other crappy websites that show up in their search result, that is why it is important to use Meta tags…

So, what really are meta tags……

Well, Meta tags are special tags in HTML that allow the HTML coder(the person that writes the website or edits it) to specify a description and keywords that a search engine can run through to see  if the website is relevant to the search criteria. It allow you to specify a description of your site that the user(the person searching) will see in his/her search result so that he/she can make the best choice of website to view.

To use Meta tags in a website is very easy, you use the tags <meta>. Unlike other tags like the <body> tag which have closing a tag, the <meta> tags doesn’t have a closing tag. The <meta> tag provides metadata about the HTML document, metadata is simply information about the HTML or website/blog data. Metadata will not be displayed on the page, but can be read by search engines.

Meta elements are typically used to specify page description, keywords, author of the document, last modified etc.

The <meta> tag always goes inside the head element.

E.g.

<html>

<head>

<meta   data goes here>

</head>

</html>

The metadata can be used by browsers in knowing how the content of a webpage is displayed or reloaded; it is also used by search engines in finding out relevant content using keywords; or other web services.

This post is consigned in the optimization of a website or a blog by using Meta tags so I will focus on description and keyword.

For specifying a description for a site, i.e. the description a person will see when he/she searches for your site we use the below:

<meta name="description" content="A place where everything relating to websites and blogs is discussed" />

You replace everything in between the double quote of the content with your own description E.g.

content=“put you own description here”

To specify a keyword for a search engine to use to categorize your site content you use:

<meta name="keywords" content="AAA, BBBBB, CCCCCC" />

Where AAA, BBBBB, CCCCCCC represent your own keywords. You can specify as many keywords as you like as long as you separate each one with a comma, for example

<meta name="keywords" content="HTML, CSS, XML, BLOGS, WEBSITES" />

A lot of webmasters have used <meta> tags for spamming, like repeating keywords (or using wrong keywords) for higher ranking. Therefore, most search engines have stopped using <meta> tags to index/rank pages.

Happy new year from WebsitesNBlogs

New Beginings:part 5

Hello and welcome to another part (part 5) of the HTML series. In the previous part (part 4), I discussed the color attribute and its application in a body tag.

 In this post I want to explain how the color attribute can be used in another tag (the font tag). When used in the font tag, it “tells” the browser that you wish to display all the text in between the tag in that particular font, text size and color you specified.

E.g
let us take a look at a use of the font tag   <font> ..... some text .... </font>

we could modify the above tag combination by adding color=" your color ", size=“a number representing the size” or face=“font_family e.g. Arial” to the body opening tag.

i.e.  <font face=“Arial” size="3" color="red">This is WebsiteNBlogs, a site that contains all you need to know about websites and blogs. </font>

The above font formatting will change the font style/face, size and color of the sentence in-between the font tags to a size 3 Arial type font with its color being red.... As in the previous tutorial of the body tag, you can also use other colors.....hex codes can also be used to specify the color, a list of HTML color codes can be found here.
To use the hex code in a font tag is the same as in a body tag, you have to place a hash symbol before you text in the hex code. This is to " tell " the browser that you are inputting a code and not names ... 

E.g  <font color=#thehexcode> ...some text...</font>

i.e. <font color="#00FF00"> ..some text..</font>     changes the font color to Green.

Remember that RGB ( stands for Red Green Blue) color code ... so to specify maximum color use FF… that is why i used R(00) G(FF) B(00) to display the green above meaning, zero value for red, maximum value for green and zero value for blue; hence the code 00FF00.

 You can also use the RGB directly,

i.e. <font color="rgb(255,0,0)"> ..some text.. </font>     changes the font color to red.

As in the last part, I have also included a complete table showing how to use the various version of using the color attribute below...

Value	Description
color_name	Specifies the background color with a color name (like " red ")
hex_number	Specifies the background color with a hex code (like "#ff0000")
RGB_number	Specifies the background color with an rgb code (like " rgb(255,0,0) ")

The font tag also supports the following attributes

Attribute	Value	Description
class	classname	Specifies a classname for an element
dir	ltr    rtl	Specifies the text direction for the content in an element
Id	id	Specifies a unique id for an element
lang element	Language_code	Specifies a language code for the content in an element
style	Style_definition	Specifies an inline style for an element
title	text	Specifies extra information about an element

           
This is the same complete but simple page I posted in the last part (part 4) showing the full usages of the color attribute. The only edition I made to the HTML page is the font tag; I modified it with the other attribute (face and size) I discussed earlier in this post.

<html>
<body bgcolor="#FF0000">
<h1>Hello world!</h1>
<p>
<center>
<font face=  “verdana” size=“4” color="red">This is some text!</font> 
<a href="http://www.websitesnblogs.blogspot.com">visit here for HTML Tutorials!</a>
</p>
</center>
</body>
</html>

A point I should make here is that presently CSS implementation of the font face, size and color is being used. It is recommended that you use CSS.
I will discuss a very important HTML tag in the next post, a must to know if you want to make a website or a blog or already have one. See you in the next post...

Happy New Year from WebsitesNBlogs

New Beginings:part 4

Hello everyone, i know it is quite a long time since i posted something on this blog....
Sorry for the long break but i am back and i will like to start off from where i left....
Today i will want us to know some other useful things you can do with tags in HTML....
The last post i made introduced some tags like the <font>  </font> and also the <body>  </body>, well if you tried them out you will notice that your text is displayed in your browser using the default color (usually black and white) and the default size...
Wouldn't it be boring if we had only one type of color in the world... the world of HTML is suppose to be colorful (after all its name is Hyper Text MARKUP Language).... So welcome to the world of colors in HTML which is the focus of this post...
First i will start by discussing the color attribute, this attribute allows you to specify the type of color you wish the browser to display for all the text in between the tags, or the background color of the web page if you use it in the <body> tag.
E.g
let us take the body tag for instance  <body> .....content .... </body>

we could modify the above tag combination by adding bgcolor=" your color " to the body opening tag.

i.e.  <body bgcolor=" red " >  ... content... </body>

The above will change the background of that page to red....you can use other colors.....
hex codes can also be use to specify the color, click here for a list of HTML color codes.
To use the hex code in a body tag, you have to place a hash symbol before you text in the hex code. This is to " tell " the browser that you are inputting a code and not names ... 

E.g  <body bgcolor=#thehexcode> ...content...</body>

i.e. <body bgcolor="#FF0000"> ..content..</body>     changes the background color to red.

You can also use RGB ( stands for Red Green Blue) color code as well...

 i.e. <body bgcolor="rgb(255,0,0)"> ..content.. </body>     changes the background color to red.

check out the complete table below showing how to use the various version of using the color attribute...

Value	Description
color_name	Specifies the background color with a color name (like " red ")
hex_number	Specifies the background color with a hex code (like "#ff0000")
RGB_number	Specifies the background color with an rgb code (like " rgb(255,0,0) ")

This is a complete but simple page showing the full usage of the color attribute for the body tag.

<html>
<body bgcolor="#FF0000">
<h1>Hello world!</h1>
<p>
<center>
<font color="red">This is some text!</font> 
<a href="http://www.websitesnblogs.blogspot.com">visit here for HTML Tutorials!</a>
</p>
</center>
</body>
</html>

 Something you might not be familiar with in the above code is the <p></p> tag which is a paragraph tag, all it does is to place two line spacing in between lines...
I will discuss the color attribute for the <font> </font> tag in the next post and also something interesting you can do with HTML tags. see you in part 5...

check out other related posts on this blog