Meta refresh is basically a simple way to redirect, it is much easier than Java or PHP.
There are two basic parts to the Meta-Refresh code and they are the content and the url. The content is the amount of time before the actual redirection/refresh, and the url is the location you wish to go to.
In this tutorial I am going to have the code redirect to the homepage of w3schoolss.blogspot.com
<meta http-equiv="Refresh" content="5;URL=http://w3schoolss.blogspot.com" />
Now it's time to break it down:
<meta http-equiv="Refresh"
This part of the code is what tells the document that you want to use the refresh.
content="5;
This is the content, the content is basically the delay and can be however long you want it to be.
URL=http://w3schoolss.blogspot.com" />
This is the URL, or the final destination of the refresh. You can put in different sites, different pages on your site, or the page itself.
<meta http-equiv="Refresh" content="5;URL=http://w3schoolss.blogspot.com" />
This is the final code, as you can see it is very simple and very efficient when you need it.
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Tuesday, November 30, 2010
Sunday, October 10, 2010
HTML Images
The images are very important to beautify and representative of many concepts to your web page. Its is true that a picture is worth thuasands words. So, as a web developer, you should have a clear understanding on how to use images in your web pages.
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
Following is the simple syntax to use this tag.
<img src="http://www.blogger.com/img/logo40.png" alt="Blogger" border="1" width="150px" height="40" />
This will produce following result:
Following are most frequently used attributes for <img > tag
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
Following is the simple syntax to use this tag.
<img src="http://www.blogger.com/img/logo40.png" alt="Blogger" border="1" width="150px" height="40" />
This will produce following result:
Following are most frequently used attributes for <img > tag
- width: sets width of the image. This will have a value like 150px or 10%etc..
- height: sets height of the image.
- border: sets a border around the image.
- alt:It is an alternative text that will appear if the image is missing.
- align: This sets the horizontal alignment of the image and takes the value either to the left, right or center.
HTML Email Tag
HTML <a> tag provides you facility to specifiy an email address to send an email. While using <a> tag as an email tag then you will use mailto:email address along with href attribute. Following is the syntax of using mailto instead of using http.
<a href="mailto:abhi@gmail.com">Send Email</a>
This code will generate following link:
Send Email
Now if a user will click this link then it will lanuch one Email Client ( like Outlook Express, Lotus Notes, etc. ) installed on your user's computer.
<a href="mailto:abhi@gmail.com">Send Email</a>
This code will generate following link:
Send Email
Now if a user will click this link then it will lanuch one Email Client ( like Outlook Express, Lotus Notes, etc. ) installed on your user's computer.
HTML Marquees
HTML is a big piece of rolling text displayed either horizontally or vertically down your website page based on the parameters. This is created using HTML tag <marquees> .
A simple syntax to use marquee is as follows:
<marquee>This is basic example of marquee</marquee>
This will produce following result:
<marquee direction="right">This text will scroll from left to right</marquee>
This will produce following result:
<marquee direction="up">This text will scroll from bottom to up</marquee>
This will produce following result:
A simple syntax to use marquee is as follows:
<marquee>This is basic example of marquee</marquee>
This will produce following result:
<marquee direction="right">This text will scroll from left to right</marquee>
This will produce following result:
<marquee direction="up">This text will scroll from bottom to up</marquee>
This will produce following result:
HTML Text Links
Web pages can contain links that lead directly to other pages and even individual parts of a given page.These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between pages by clicking on words, phrases and images. This allows you to create hyperlinks using text and images available in your webpage.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag.
The <a>tag can be used in two ways:
<a href="http://www.w3schoolss.blogspot.com/">Learn HTML Online</a>
which will display like this
Learn HTML Online
Following are most frequently used attributes for <a> tag.
Hyperlinks allow visitors to navigate between pages by clicking on words, phrases and images. This allows you to create hyperlinks using text and images available in your webpage.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag.
The <a>tag can be used in two ways:
- To create a link to another document using the href
- To create a bookmark in a document with the name attribute
<a href="http://www.w3schoolss.blogspot.com/">Learn HTML Online</a>
which will display like this
Learn HTML Online
Following are most frequently used attributes for <a> tag.
- href: Specifies the URL of the target of a hyperlink. Its value is a valid document URL, absolute or relative, including a fragment identifier or a fragment of JavaScript code.
- target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page, if set to "_top" or "_parent" then same window will be used to display the loaded document, if set to "_self" then loads the new page in current window. By default its "_self".
- event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript of VBscript code.
HTML List
This section lists the tags often used with HTML lists:
<ol>, <ul>, and
<li>.
<ol>The <ol>tag specifies that the following list is ordered. <ul>The <ul>tag specifies that the following list is unordered.
<li>
The </li>
<li> tag lists each item, whether ordered or numbered. Note that each item is indented.
Example 1: Ordered list.
HTML:
<ol>
<li>list 1.</li>
<li>list 2.</li>
</ol>
Display
HTML:
<ul>
<li>Unordered list 1.</li>
<li>Unordered list 2.</li>
</ul>
Display:
<ol>, <ul>, and
<li>.
<ol>The <ol>tag specifies that the following list is ordered. <ul>The <ul>tag specifies that the following list is unordered.
<li>
The </li>
<li> tag lists each item, whether ordered or numbered. Note that each item is indented.
Example 1: Ordered list.
HTML:
<ol>
<li>list 1.</li>
<li>list 2.</li>
</ol>
Display
- list 1.
- list 2.
HTML:
<ul>
<li>Unordered list 1.</li>
<li>Unordered list 2.</li>
</ul>
Display:
- Unordered list 1.
- Unordered list 2.
<ul type="square"> <ul type="disc"> <ul type="circle">
HTML Tables
The tables are very useful for organizing and HTML are used very often, almost all web developers. Tables are like spreadsheets, and are composed of rows and columns.
Will create a table in HTML / XHTML using <table> tags. Inside <table> array element is written row by row. A row is contained in a <tr> tags. which means that the row of the table. And each cell is written in row with <td> tags. representing the data tables.
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:
HTML Tables and the Border Attribute
If you do not specify an attribute of the border, the table will be displayed without borders. Sometimes it can be useful, but mostly, we want the border to display the attribute. To view a table with borders, set the attribute:
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:
Table Cellpadding and Cellspacing:
There are two known attribiutes cellpadding and cellspacing to be used to adjust the white space in table cell. Cellspacing sets the width of the border, while cellpadding is the distance between cell borders and content. Here is an example:
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
This will produce following result:
Will create a table in HTML / XHTML using <table> tags. Inside <table> array element is written row by row. A row is contained in a <tr> tags. which means that the row of the table. And each cell is written in row with <td> tags. representing the data tables.
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
HTML Tables and the Border Attribute
If you do not specify an attribute of the border, the table will be displayed without borders. Sometimes it can be useful, but mostly, we want the border to display the attribute. To view a table with borders, set the attribute:
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
Table Cellpadding and Cellspacing:
There are two known attribiutes cellpadding and cellspacing to be used to adjust the white space in table cell. Cellspacing sets the width of the border, while cellpadding is the distance between cell borders and content. Here is an example:
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
This will produce following result:
| Name | Salary |
|---|---|
| Ramesh Raman | 5000 |
| Shabbir Hussein | 7000 |
HTML Colors
| Color Name | HEX | Color |
|---|---|---|
| AliceBlue | #FF8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
HTML Fonts
Font and color depends entirely on the computer and browser used to view your page. But <font>the</font> tag <font>is used to add style, size and color for text on your site. You can use a code to define all of your text the same size, face and color.</font>
The font tag is known to have three attributes of size, color and face to customize fonts.
To change the font attributes at any time in your site, simply use <font>the </font> tag.
Font Size:
You can set the size of your font with size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
Example:
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>
This will produce following result:
Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
Font Face:
You can configure all the fonts you want to face attribute, but be aware that if the user visits the page did not install the font, they will not be able to see it. Instead, the default Times New Roman for your font size attribute. See below some examples of using different fonts
Example:
This will produce following result:
Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock
Font Color:
You can choose any font color you like color attribute. You can specify the color you want by color name or hexadecimal code for that color. See the complete list of HTML color names with codes.
Example:<font color="#FF00FF">This text is hexcolor #FF00FF</font>
<font color="red">This text is red</font>
This will produce following result:
This text is hexcolor #FF00FF
This text is red
The font tag is known to have three attributes of size, color and face to customize fonts.
To change the font attributes at any time in your site, simply use <font>the </font> tag.
Font Size:
You can set the size of your font with size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
Example:
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>
This will produce following result:
Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"
Font Face:
You can configure all the fonts you want to face attribute, but be aware that if the user visits the page did not install the font, they will not be able to see it. Instead, the default Times New Roman for your font size attribute. See below some examples of using different fonts
Example:
<font face="Times New Roman" size="5">Times New Roman</font> <font face="Verdana" size="5">Verdana</font> <font face="Comic sans MS" size="5">Comic Sans MS</font> <font face="WildWest" size="5">WildWest</font> <font face="Bedrock" size="5">Bedrock</font> |
Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock
Font Color:
You can choose any font color you like color attribute. You can specify the color you want by color name or hexadecimal code for that color. See the complete list of HTML color names with codes.
Example:<font color="#FF00FF">This text is hexcolor #FF00FF</font>
<font color="red">This text is red</font>
This will produce following result:
This text is hexcolor #FF00FF
This text is red
HTML Comments
And well comment code, especially for complex documents to show parts of the document should be, and any comment to anyone looking at the code. And comments will help others understand the code.
HTML comment lines are marked with a special tag to the start <!-- and ending tag --> placed at the beginning and end of each line is considered a comment.
For example: Given line is a valid comment in HTML
<!-- This is comment -->
HTML comment lines are marked with a special tag to the start <!-- and ending tag --> placed at the beginning and end of each line is considered a comment.
For example: Given line is a valid comment in HTML
<!-- This is comment -->
HTML Formatting Tags
This section includes the tags often used for formatting the HTML text. HTML uses diffrent types tags like <i> for italic, <b> for bold to formatting text of web page. formatting must to your web page. formatting also attracts users.
examples of formatting text:-
example 1:
HTML:
<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>
Display:
This illustrates the attributes of the font tag.
example 2:
HTML:
<font size="+1" face="Verdana" color="#AA5088">This illustrates the attributes of the font tag.</font>
Display:
This illustrates the attributes of the font tag.
example 3:
HTML:
This <b>example</b> shows how <i>important</i> it is to use <u>tags</u>.
Display:
This example shows how important it is to use tags.
Header Tags
The header tags <h1>, ... <h6> allows us to place additional importance on the text within such tags. <h1> has the largest size, and <h6> the smallest. Many search engines put additional weight on the texts within the header tags.
example 4:
HTML:
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>
Display:
The <center> tag causes all the text within the tag to be centered. An example is as follows:
Example 5:
HTML:
<center>This is centered text.</center>
Display:
This is centered text.
<br>
The <br> tag indicates a line break. This tag is most often used by itself, without a corresponding closing tag.
<p>
The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.
examples of formatting text:-
example 1:
HTML:
<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>
Display:
This illustrates the attributes of the font tag.
example 2:
HTML:
<font size="+1" face="Verdana" color="#AA5088">This illustrates the attributes of the font tag.</font>
Display:
This illustrates the attributes of the font tag.
example 3:
HTML:
This <b>example</b> shows how <i>important</i> it is to use <u>tags</u>.
Display:
This example shows how important it is to use tags.
Header Tags
The header tags <h1>, ... <h6> allows us to place additional importance on the text within such tags. <h1> has the largest size, and <h6> the smallest. Many search engines put additional weight on the texts within the header tags.
example 4:
HTML:
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>
Display:
This is h1 text.
This is h2 text.
This is h3 text.
This is h4 text.
This is h5 text.
This is h6 text.
<center>The <center> tag causes all the text within the tag to be centered. An example is as follows:
Example 5:
HTML:
<center>This is centered text.</center>
Display:
This is centered text.
<br>
The <br> tag indicates a line break. This tag is most often used by itself, without a corresponding closing tag.
<p>
The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.
HTML Attributes
Attributes are another important part of HTML markup language.Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value parts like: name="value".
The name is the property & the value is what you want the value of the property to be.
below is example of HTML Attributes.
<font face="arial" color="#CC0000">
in above example font is name & arial, #CC0000 are values. values should be put in double quotation marks.
The name is the property & the value is what you want the value of the property to be.
below is example of HTML Attributes.
<font face="arial" color="#CC0000">
in above example font is name & arial, #CC0000 are values. values should be put in double quotation marks.
Saturday, October 9, 2010
HTML Meta Tags
HTML meta tags used in head section of HTML document.HTML metadata lets you specify information about a document rather than document content in
a variety of ways. the meta element can be used to include name of the author, description of the page, keywords,etc..
the <meta> tag is an empty element and so does not have a closing tag, rather,<meta> tags carry information within attributes, so you need a
forward slash character at the end of the element.
meta tag is a very imprortant part of the web. meta tags can assist search engines (Google, Yahoo, Bing,etc....) in finding the best match when a
user performs a search. search engines will often look at metadata included on web page. search engines gives rank to your web depends which keywords you're using. search engines rank it higher than another page with less relevant metadata, or with no metadata at all.
some of examples of meta tags:
you can add metadata to your web page by placing <meta> tags between head section of the document.(between <head>....</head>)
meta tags can include the following attributes:
1) Name : name of the property. it can by anything keywords, author, description, etc.....
2) content : content specifies web page value.
3) http-equiv : Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, refresh, expires and set-cookie.
etc.....
let's see some important usage of meta tags:
Defining keywords:
we specify keywords which will be used by the search engine to search a web pgae. using of keywords is so important to your web page.
by using keywords search engine gives rank to your web site.
by using following tag, you can specify important keywords related to your web page.
e.g:
<head>
<meta name="keywords" content="learn html,metadata,markup tutorial" />
</head>
Document Description:
Document Description is again important information & many search engine use this information as well while searching a web page. so it is important you should give an appropriate description of the page.
e.g:
<head>
<meta name="description" content="Learn about HTML." />
</head>
Setting Author Name:
You can set an author name in a web page using Meta Tag. See an example below:
<head>
<meta name="author" content="Abhishek" />
</head>
Page Redirection:
You can specify a page redirection using Meta Tag. Following is an example of redirecting current page to another page. You can specify a duration after which page will be redirected.
<head>
<meta http-equiv="refresh"
content="5; url=http://www.w3schoolss.blogspot.com" />
</head>
Document Refreshing:
You can specify a duration after which your web page will keep refreshing. If you want your page keep refreshing after every 5 seconds then use the following syntax.
<head>
<meta http-equiv="refresh" content="5" />
</head>
a variety of ways. the meta element can be used to include name of the author, description of the page, keywords,etc..
the <meta> tag is an empty element and so does not have a closing tag, rather,<meta> tags carry information within attributes, so you need a
forward slash character at the end of the element.
meta tag is a very imprortant part of the web. meta tags can assist search engines (Google, Yahoo, Bing,etc....) in finding the best match when a
user performs a search. search engines will often look at metadata included on web page. search engines gives rank to your web depends which keywords you're using. search engines rank it higher than another page with less relevant metadata, or with no metadata at all.
some of examples of meta tags:
you can add metadata to your web page by placing <meta> tags between head section of the document.(between <head>....</head>)
meta tags can include the following attributes:
1) Name : name of the property. it can by anything keywords, author, description, etc.....
2) content : content specifies web page value.
3) http-equiv : Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, refresh, expires and set-cookie.
etc.....
let's see some important usage of meta tags:
Defining keywords:
we specify keywords which will be used by the search engine to search a web pgae. using of keywords is so important to your web page.
by using keywords search engine gives rank to your web site.
by using following tag, you can specify important keywords related to your web page.
e.g:
<head>
<meta name="keywords" content="learn html,metadata,markup tutorial" />
</head>
Document Description:
Document Description is again important information & many search engine use this information as well while searching a web page. so it is important you should give an appropriate description of the page.
e.g:
<head>
<meta name="description" content="Learn about HTML." />
</head>
Setting Author Name:
You can set an author name in a web page using Meta Tag. See an example below:
<head>
<meta name="author" content="Abhishek" />
</head>
Page Redirection:
You can specify a page redirection using Meta Tag. Following is an example of redirecting current page to another page. You can specify a duration after which page will be redirected.
<head>
<meta http-equiv="refresh"
content="5; url=http://www.w3schoolss.blogspot.com" />
</head>
Document Refreshing:
You can specify a duration after which your web page will keep refreshing. If you want your page keep refreshing after every 5 seconds then use the following syntax.
<head>
<meta http-equiv="refresh" content="5" />
</head>
Nested HTML Elements
Most HTML elements can be nested, all html documents consist of nested of HTML elements & tags.
please see below example for Nested HTML elements.
<html>
<body>
<p>This is my first paragraph.</p>
</body>
The example above contains 3 HTML elements.(html, body & p).
<p> defines for paragraph. The element has a start tag <p> and an end tag </p>. p elements content is This is my first paragraph.
<body> defines body of the HTML document.
<html> defines above document in HTML.
please see below example for Nested HTML elements.
<html>
<body>
<p>This is my first paragraph.</p>
</body>
The example above contains 3 HTML elements.(html, body & p).
<p> defines for paragraph. The element has a start tag <p> and an end tag </p>. p elements content is This is my first paragraph.
<body> defines body of the HTML document.
<html> defines above document in HTML.
HTML Tags and Elements
HTML Documents are defined by HTML elements.HTML language is a markup language and we use many tags to markup text. Every tag consists of a tag name, sometimes followed by an optional list of tag attributes , all placed between opening and closing brackets (< and >). the element content is everything between the start and the end tag.Some HTML elements have empty content.Empty elements are closed in the start tag.
some examples for tags and elements <html>, <body>, <p>, <h1>,etc.....
HTML Document Structure
An HTML document starts with <html> & ends with </html> tags. by using these tags tells browser that the entire document is composed in HTML. Inside these two tags, the document is split into 2 sections:
- The <head>...</head> elements, which contain information about the document such as title of the document, description, keywords, canonical tag, etc. Information inside this tag does not display outside.
- The <body>..</body> elements, which contain the real content of the document that you seen on your screen.
Creating HTML Document
Creating an HTML document is easy.To begin coding HTML you need only two things: a simple-text editor and a web browser. Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it.
just copy below code & paste in your notepad & save page as index.html
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Now, open index.html page in your browser (Mozilla,Internet Explorer, etc...).
you will find heading & paragraph in index.html page.
Introducing HTML
HTML or Hypertext Markup Language, is the most widely used language on Web.with HTML you can create your own web site.Technically, HTML is not a programming language, but rather a markup language.
in HTML
- Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext.
- Markup Language refers to how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.
main aim of HTML defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
HTML is easy to learn - You will enjoy it.
Subscribe to:
Posts (Atom)