Sunday, 15 October 2017

HTML - Phrase Tags

The expression labels have been desicolgned for particular purposes, however they are shown comparably as other essential labels like <b>, <i>, <pre>, and <tt>, you have seen in past section. This part will take you through all the vital expression labels, so we should begin seeing them one by one.

Underlined Text 

Anything that shows up inside <em>...</em> component is shown as underlined content.

Case 

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
 
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
 
</html>

Checked Text 

Anything that shows up with-in <mark>...</mark> component, is shown as set apart with yellow ink.

Case 

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
 
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
 
</html>
Solid Text 

Anything that shows up inside <strong>...</strong> component is shown as vital content.

Case 

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
 
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
 
</html>
Content Abbreviation 

You can curtail a content by putting it inside opening <abbr> and shutting </abbr> labels. In the event that present, the title trait must contain this full portrayal and that's it.

Case 

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
 
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
 
</html>
Acronym Element 

The <acronym> component enables you to demonstrate that the content amongst <acronym> and </acronym> labels is an acronym.

At show, the significant programs don't change the presence of the substance of the <acronym> component.

Illustration 

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
 
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
 
</html>

Content Direction 

The <bdo>...</bdo> component remains for Bi-Directional Override and it is utilized to abrogate the present content heading.

Illustration 

<!DOCTYPE html>
<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>
Uncommon Terms 

The <dfn>...</dfn> component (or HTML Definition Element) enables you to indicate that you are presenting an extraordinary term. It's use is like italic words amidst a section.

Normally, you would utilize the <dfn> component the first occasion when you present a key term. Latest programs render the substance of a <dfn> component in an italic text style.

Case 

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
 
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
 
</html>

Citing Text 

When you need to cite a section from another source, you should place it in the middle of <blockquote>...</blockquote> labels.

Content inside a <blockquote> component is normally indented from the left and right edges of the encompassing content, and here and there utilizes a stressed text style.

Illustration 

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
 
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for 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> component is utilized when you need to include a twofold quote inside a sentence.

Illustration 

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
 
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
 
</html>
Content Citations 

On the off chance that you are citing a content, you can demonstrate the source setting it between an opening <cite> tag and shutting </cite> tag

As you would expect in a print production, the substance of the <cite> component is rendered in stressed content naturally.

Case 

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>
PC Code 

Any programming code to show up on a Web page ought to be put inside <code>...</code> labels. Normally the substance of the <code> component is introduced in a monospaced textual style, much the same as the code in most programming books.

Illustration 

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>
Console Text 

When you are discussing PCs, on the off chance that you need to advise a peruser to enter some content, you can utilize the <kbd>...</kbd> component to demonstrate what ought to be written in, as in this illustration.

Illustration 

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

Programming Variables 

This component is generally utilized as a part of conjunction with the <pre> and <code> components to show that the substance of that component is a variable.

Illustration 

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>
Program Output 

The <samp>...</samp> component shows test yield from a program, and content and so forth. Once more, it is for the most part utilized while reporting programming or coding ideas.

Illustration 

<!DOCTYPE html>
<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> component is utilized to contain any address.

Illustration 

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>Muslim town lahore</address>
   </body>
   
</html>

HTML - Meta Tags

HTML gives you a chance to indicate metadata - extra critical data about an archive in an assortment of ways. The META components can be utilized to incorporate name/esteem sets portraying properties of the HTML record, for example, creator, expiry date, a rundown of catchphrases, archive creator and so forth. 

The <meta> tag is utilized to give such extra data. This tag is an unfilled component thus does not have an end tag but rather it conveys data inside its traits. 

You can incorporate at least one meta labels in your report in light of what data you need to keep in your archive however as a rule, meta labels don't affect physical appearance of the record so from appearance perspective, it doesn't make a difference on the off chance that you incorporate them or not. 

Adding Meta Tags to Your Documents 

You can add metadata to your site pages by setting <meta> labels inside the header of the archive which is spoken to by <head> and </head> labels. A meta tag can have following credits notwithstanding center characteristics − 

Sr.NoAttribute & Description
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.

Determining Keywords 

You can utilize <meta> tag to determine essential watchwords identified with the archive and later these catchphrases are utilized by the web indexes while ordering your page for seeking reason. 

Case 

Following is a case, where we are including HTML, Meta Tags, Metadata as imperative catchphrases about the report. 

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

Archive Description 

You can utilize <meta> tag to give a short depiction about the report. This again can be utilized by different web search tools while ordering your website page for looking reason. 

Illustration 

<!DOCTYPE html>
<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>
Record Revision Date 

You can utilize <meta> tag to give data about when last time the record was refreshed. This data can be utilized by different web programs while reviving your site page. 

Illustration 

<!DOCTYPE html>
<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 = "googletech786, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>
Record Refreshing 

A <meta> tag can be utilized to determine a length after which your site page will continue invigorating consequently. 

Illustration 

On the off chance that you need your page continue reviving after like clockwork at that point utilize the accompanying language structure. 

<!DOCTYPE html>
<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 = "googletech786, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>
Page Redirection 

You can utilize <meta> tag to divert your page to some other website page. You can likewise indicate a span in the event that you need to divert the page following a specific number of seconds. 

Illustration 

Following is a case of diverting current page to another page following 5 seconds. On the off chance that you need to divert page promptly then don't determine content characteristic. 

<!DOCTYPE html>
<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 = "googletech786, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.googletech786.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Setting Cookies 

Treats are information, put away in little content records on your PC and it is traded between web program and web server to monitor different data in light of your web application require. 

You can utilize <meta> tag to store treats on customer side and later this data can be utilized by the Web Server to track a website guest. 

Case 

Following is a case of diverting current page to another page following 5 seconds. On the off chance that you need to divert page promptly then don't indicate content property. 

<!DOCTYPE html>
<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 = "googletech786, 3/7/2014" />
      <meta http-equiv = "cookie" content = "userid = xyz;
         expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>
On the off chance that you do exclude the termination date and time, the treat is viewed as a session treat and will be erased when the client leaves the program. 

Note − You can check PHP and Cookies instructional exercise for a total detail on Cookies. 

Setting Author Name 

You can set a creator name in a page utilizing meta tag. See a case underneath − 

Case 

<!DOCTYPE html>
<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 = "author" content = "Rizvi" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>
Indicate Character Set 

You can utilize <meta> tag to indicate character set utilized inside the site page. 

Case 

Naturally, Web servers and Web programs utilize ISO-8859-1 (Latin1) encoding to process Web pages. Following is a case to set UTF-8 encoding − 

<!DOCTYPE html>
<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 = "author" content = "Rizvi" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>
To serve the static page with conventional Chinese characters, the page must contain a <meta> tag to set Big5 encoding − 

<!DOCTYPE html>
<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 = "author" content = "Rizvi" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>
Subscribe to: Posts (Atom)

Translate

GoogleTech786. Powered by Blogger.

Subscribe Youtube

Our Facebook Page

Googletech786

Wikipedia

Search results

Popular Posts

Adsense

Copyright © GoogleTech786 | Powered by Blogger
Rizvi Web Solutions (R)