Post
Ask Question

HTML For Beginners: Part 5

Introduction

 

HTML Quotation, Citation and Computer Code Elements

 
HTML <q> for Short Quotations
 
The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element.
 
Example 
  1. <q> The starting point of all achievements is desire. </q>   
HTML <blockquote> for Long Quotations
 
The HTML <blockquote> element defines a quoted section. Browsers usually indent <blockquote> elements.
 
Example
  1. <blockquote cite="http://www.brainyquote.com/quotes/topics/topic_success.html">Success is not final, failure is not fatal :it is the courage to continue that counts.    
  2. <blockquote >  
HTML <abbr> for Abbreviations
  • The HTML <abbr> element defines an abbreviation or an acronym.
  • Marking abbreviations can provide useful information to browsers, translation systems, and search-engines.
Example
  1. <p>The <abbr title=" United Nations International Children's Emergency Fund ">UNICEF</abbr> was founded in December 11, 1946.</p> 
HTML <address> for Contact Information
  • The HTML <address> element defines contact information of a document or article.
  • The element is usually displayed in italics. Most browsers will add a line break before and after the element.
Example
  1. <address>    
  2.     Biography of HELEN KELLER written by helen keller    
  3.     Visit – “http://www.biography.com/people/helen-keller-9361967 ”    
  4. </address>   
HTML <cite> for Work Title
 
The HTML <cite> element defines the title of a work. Browsers usually display <cite> elements in italics.
 
Example
  1. <p><cite> The Dandi March </cite> also known as the Salt Satyagraha, began on 12 March 1930 .</p>  
Result
 
 
HTML <bdo> for Bi-Directional Override
 
The HTML <bdo> element defines Bi-Directional Override. If your browser supports BDO, this text will be written from right to left.
 
Example
  1. <bdo dir="rtl">Chipko Andolan is a movement that practiced the Gandhian methods of satyagraha and non-violent resistance </bdo>   
Result
 
 
Computer Code
  1. var person = {    
  2. firstName:"shresthi",    
  3. lastName:"jaiswal",    
  4. age:15,    
  5. eyeColor:"brown"    
  6. }   
Result
 
 
HTML Computer Code Formatting
 
Normally, HTML uses a variable letter size and variable letter spacing. This is not wanted when displaying examples of computer code. The <kbd>, <samp>, and <code> elements all support fixed letter sizes and spacing.
 
HTML Keyboard Formatting
 
The HTML <kbd> element defines keyboard input.
 
Example
  1. <p>To open a file, select:</p>    
  2. <p><kbd>File | Open...</kbd></p >  
Result
 
 
HTML Sample Formatting
 
The HTML <samp> element defines sample output.
 
Example
  1. <samp>    
  2. http://www.c-sharpcorner.com/    
  3. </samp>  
Result
 
 
HTML Code Formatting
  • The HTML <code> element defines programming code.
Example
  1. <code>    
  2. var person = { firstName:"shresthi", lastName:"jaiswal", age:15, eyeColor:"brown" }    
  3. </code>  
  • The <code> element does not preserve extra whitespace and line-breaks.
Example
  1. <code>    
  2.    var person =   
  3.    {    
  4.    firstName:"shresthi",    
  5.    lastName:"jaiswal",    
  6.    age:15,    
  7.    eyeColor:"brown"    
  8.    }    
  9. </code>   
  • To fix this, you must wrap the code in an <pre> element.
Example
  1. <p>Coding Example:</p>    
  2. <code>    
  3.     <pre>    
  4.         var person =     
  5.      {    
  6.         firstName:"shresthi",    
  7.         lastName:"jaiswal",    
  8.         age:15,    
  9.         eyeColor:"brown"    
  10.     }    
  11.     </pre>    
  12. </code>  
HTML Variable Formatting
  
The HTML <var> element defines a mathematical variable.
 
Example
  1. <p>Einstein wrote:</p>    
  2. <p><var>E = m c<sup>2</sup></var></p>   
    Result
     
     
    HTML Quotations, Citations, Definition and Computer Code
     
    Elements
    1. <abbr>: Defines an abbreviation or acronym
    2. <address>: Defines contact information for the author/owner of a document
    3. <bdo>: Defines the text direction
    4. <blockquote>: Defines a section that is quoted from another source
    5. <dfn>: Defines the definition of a term or an abbreviation
    6. <q>: Defines a short inline quotation
    7. <cite>: Defines the title of a work
    8. <code>: Defines programming code
    9. <kbd>: Defines keyboard input 
    10. <samp>: Defines computer output
    11. <var>: Defines a mathematical variable
    12. <pre>: Defines preformatted text

    Conclusion

     
    In this article, we studied basics of HTML.


    Similar Articles