HTML – META TAGS Adding Meta Tags to Your Documents: You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes: 1) Name: Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. 2) content: Specifies the property's value. 3) scheme: Specifies a scheme to interpret the property's value (as declared in the content attribute). 4) 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, 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 the search engines while indexing your webpage for searching purpose. where we are adding HTML, Meta Tags, Metadata as important keywords about the document. --> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> </head> <body> <p>Hello HTML5!</p> </body> </html> <!-- 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. --> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Learning about Meta Tags." /> </head> <body> <p>Hello HTML5!</p> </body> </html> <!--
Document Revision Date:
You can use <meta> tag to give information about when last time the document
was updated. This information can be used by various web browsers while refreshing
your webpage.
-->
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="syllabus", 11/06/2023" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
<!--
Document Refreshing:
A <meta> tag can be used to specify a duration after which your web page will keep
refreshing automatically.
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="syllabus", 11/06/2023" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Page Redirection:
You can use <meta> tag to redirect your page to any other webpage. You can also
specify a duration if you want to redirect the page after a certain number of
seconds.
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="syllabus", 11/06/2023" />
<meta http-equiv="refresh" content="5; url=https://unikode.unikaksha.com/course/view.php?id=147" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Setting Cookies:
Cookies 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 information based on your
web application need.
-->
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="syllabus", 11/06/2023" />
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15
23:59:59 GMT;" />
</html>
<!--
2)
-->
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content="Albert einstein" />
<meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
<p>Hello HTML5</p>
</body>
</html>
[23:06] Pranesh Unikaksha: HTML - formatting:
1) bold text:
-->
<html>
<head>
<title>Bold Text</title>
</head>
<body>
<p> This following word uses <b> BOLD </b> letters.</p>
</body>
</html>
<!--
2) italic text:
-->
<html>
<head>
<title>italic Text</title>
</head>
<body>
<p> This following word uses <i> italic </i> letters.</p>
</body>
</html>
<!--
3) underlined text:
-->
3) underlined text:
-->
<html>
<head>
<title>underlined Text</title>
</head>
<body>
<p> This following word uses <u> underlined </u> letters.</p>
</body>
</html>
<!--
strike text:
-->
<html>
<head>
<title>strike Text</title>
</head>
<body>
<p> This following word uses <strike> strike </strike> letters.</p>
</body>
</html>
<!--
monospaced font:
-->
<html>
<head>
<title>monospaced Text</title>
</head>
<body>
<p> This following word uses <tt>monospaced</tt> letters.</p>
</body>
</html>
<!--
superscript text:
-->
<html>
<head>
<title>superscript Text</title>
</head>
<body>
<p> This following word uses ten <sup> two </sup> letters.</p>
</body>
</html>
<!--
subscript text:
-->
<html>
<head>
<title>subscript Text</title>
</head>
<body>
<p> This following word uses ten <sub> two </sub> letters.</p>
</body>
</html>
<!--
inserted and delete text:
-->
<html>
<head>
<title>inserted Text</title>
</head>
<body>
<p> The volkswagen is <del> built </del> <ins> well built </ins></p>
</body>
</html>
<!--
large text:
-->
<html>
<head>
<title>large Text</title>
</head>
<body>
<p> The volkswagen Polo is <big>Fabulous</big> </p>
</body>
</html>
<!--
smaller text:
-->
<html>
<head>
<title>smaller Text</title>
</head>
<body>
<p> The volkswagen Polo is <big>Fabulous</big>.
others are <small> worst </small> </p>
</body>
</html>
<!--
grouping content:
-->
<html>
<head>
<title>smaller Text</title>
</head>
<body>
<p> The <span style="color: green;"> volkswagen Polo </span> is Fabulous.
<span style="color: red;"> others are worst </span> </p>
</body>
</html>
[23:06] Annam Sai Vamshi: started from core attributes
[23:06] Pranesh Unikaksha: HTML – PHRASE TAGS:
Emphasized Text:
Anything that appears within <em>...</em> element is displayed as emphasized text.
-->
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
<!--
Marked Text:
Anything that appears with-in <mark>...</mark> element, is displayed as marked with
yellow ink.
-->
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
<!--
Strong Text:
Anything that appears within <strong>...</strong> element is displayed as important
text.
-->
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
<!--
Text Abbreviation:
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags.
If present, the title attribute must contain this full description and nothing else.
-->
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>
<!--
Text Direction:
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to
override the current text direction.
-->
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
<!--
Special Terms:
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that
you are introducing a special term. It's usage is similar to italic words in the
midst of a paragraph. Typically, you would use the <dfn> element the first
time you introduce a key term. Most recent browsers render the content of a
<dfn> element in an italic font.
-->
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
<!--
Quoting Text:
When you want to quote a passage from another source, you should put
it in between<blockquote>...</blockquote> tags. Text inside a
<blockquote> element is usually indented from the left and right edges of
the surrounding text, and sometimes uses an italicized font.
-->
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>This is the following description of XHTML :</p>
<blockquote>XHTML 1.0 is the W3C's first XHTML, following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
<!--
Short Quotations:
The <q>...</q> element is used when you want to add a double quote within a sentence.
-->
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
<!--
Text Citations:
If you are quoting a text, you can indicate the source placing it between an
opening <cite>tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered
in italicized text by default.
-->
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML <cite> is Standard for HTML</cite>.</p>
</body>
</html>
<!--
Computer Code:
Any programming code to appear on a Web page should be placed
inside <code>...</code>tags. Usually the content of the <code> element is presented
in a monospaced font, just like the code in most programming books.
-->
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
<!--
Keyboard Text:
When you are talking about computers, if you want to tell a reader to enter some text,
you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this
example.
-->
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
<!--
Program Output:
The <samp>...</samp> element indicates sample output from a program, and script
etc. Again, it is mainly used when documenting programming or coding concepts.
-->
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
<!--
Address Text:
The <address>...</address> element is used to contain any address.
-->
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, road number, street name - city</address>
</body>
[23:07] Pranesh Unikaksha: core attributes:
1) id
2) title
3) class
4) style
1) id:
-->
<html>
<head>
<title> ID </title>
</head>
<body>
<p align="left", id="html"> first statement </p>
<p align="center", id="html2"> second statement </p>
</body>
</html>
<!--
title (tool tip of the cursor):
-->
<html>
<head>
<title> title attribute </title>
</head>
<body>
<h1 title="HTML">Title Heading</h1>
</body>
</html>
<!--
3) class:
4)style:
-->
<html>
<head>
<title> style </title>
</head>
<body>
<p align="left" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
;color: red;;"
> first statement </p>
<p align="center"> second statement </p>
<p align="right"> third statement </p>
</body>
</html>
<!--
generic attributes:
attrribute option function
1) align - right, left, center horizontal alligns tags
2) valign- top, middle, bottom vertical aligns tags
3) bgcolor- numeric, hexadecimal, places a background color behind
RGB values
4) background URL place a background image behind
an element.
5) id user defined names an element for use with css
6) class user defined classifies an element for use with css
7) width numeric value specifies the width of table,image or
table cells.
8) height numeric value specifies the height of table,image or
table cells.
9) title user defined "pop-up" title for elements.
-->
0 Comments