Read Lesson 7 – HTML Phrase and Quotation Tags Use and Code

Check Lesson 7 – HTML Phrase and Quotation Tags from Learn HTML section on e akhabaar

HTML Phrase / Quotation tags are used to give special focus to a text. They are quite similar to text formatting tags. In this lesson, we will learn how to use Phrase and Quotation tags in html.

  •  Emphasized Text:

 Any text that is inserted between html  tag will appear as Emphasized text. Example is explained below: 







Emphasized  Text





This is a emphasized text example





The result will be displayed as:

 Emphasized Text

This is a emphasized text example

  • Quotation Text:  

 Any text that is inserted between html  tag will appear in double quotes. Example is explained below:







Quotation Text Example





This is a quotation text example





The result will be displayed as:

 This is a “quotation” text example

  • Abbreviation Text:

Any text that is inserted between html  tag swill appear as abbreviated. Once you have implemented the abbreviation code, take your mouse courser over abbreviated text, it will show you its full meaning. Example is explained below:







Abbreviation Example





This is a HTML abbreviation text example





The result will be displayed as:

  Abbreviation Example

This is a HTML abbreviation text example

  • Address:

    Any text that is inserted between html 

    tag will appear in address form. Example is explained below:







Address Example



 

House no. 2872 A, Sector – 22, Chandigarh





The result will be displayed as:

 Address Example

House no. 2872 A, Sector – 22, Chandigarh
  • Marked Text:

    Any text that is inserted between html  tag will mark/highlight text in yellow color. The example is explained below:







Mark Example





This is a marked text example/p>



The result will be displayed as:

 Mark Example

This is a marked text example

  • Text Direction:

You can override any text direction rule on a web page using html  tag. Text direction can be set either from left to right or right to left.







Example





Here text will flow from left to right



Here text will flow from right to left





The result will be displayed as:

  Text direction Example

Here text will flow from left to right

Here text will flow from right to left

  • Blockquote Text:

Any text inserted between html 

tag will represent that it is taken from some other source or website. The example is explained below:







Blockquote Example





How to hide tummy  fat.



Tummy fat is a reality that, unless you are genetically blessed with a supermodel physique, we all have to contend with at some point in our lives.





The result will be displayed as:

 Blockquote Example

Tummy fat is a reality that, unless you are genetically blessed with a supermodel physique, we all have to contend with at some point in our lives.

  • Text Citation:

Any text that is inserted between html .. tag will appear as a citation from original author/writer. The text will appear in italics. Example is explained below:







Text Citations Example





Tim Berners-Lee   was the inventor of HTML





The result will be displayed as:

 Text Citations Example

Tim Berners-Lee was the inventor of HTML

  • Keyboard Input Text:

Any text that is inserted between html .. tag will appear as keyboard input text. It represents user input by a keyboard and is displayed in monospace font.  Example is shown below:







Keyboard Example





Normal font This is kbd font Normal font





The result will be displayed as:

 Keyboard Text Example

Normal font 'This is kbd font' Normal font

  • Computer Code Text:

Any text that is inserted between html  tag will appear as computer code text. It represent that displayed text is a computer code. Example is shown below:







Code Example





Normal text write your code here Normal text





The result will be displayed as:

  Code Example

Normal text 'write your code here' Normal text

  • Variable Text:

Any text inserted between html .. tag will appear as mathematical variable. Example is shown below: 







Variable Example





Formula = (x + y)2





The result will be displayed as:

  Variable Example

Formula = (x + y)2

  • Computer Output Text:

Any text that is inserted between html  tag will appear as computer output text. Example is shown below:







Computer Program Output Example





Normal text. ’This is computer programme output text’





The result will be displayed as:

 Computer Program Output Example

Normal text. ‘This is computer programme output text’.

Chapter Summery:

  • Use html  tag for emphasized text.
  • Use html   tag to add double quotes. (e.g. “some text”).
  • Use html  tag for text abbreviation.
  • Use html
     tag to write text in address form.
  • Use html  tag to highlight text background in yellow color.
  • Use html tag to override any existing text direction rule.
  • Use html

    tag to quote original source of the content.

  • Use html tag to cite name/title of original author/writer/picture.
  • Use html tag to display computer input text.
  • Use html tag to display computer code text.
  • Use html  tag to add mathematical expression.
  • Use html <samp> tag to display computer output text.

Interview Question:

  • What is Bi-Directional Override element in html?

Bi-Directional Override element is also known as Text Direction element. It is used to override any existing text direction rules in html document and its syntax is represented by .

Practice Exercise:







Practice Exercise









In above html code:

  • Apply double quotes around text ‘Hyper Text Markup Language’.
  • Highlight background of text ‘non IT personnel’ with yellow color.
  • Use abbreviation for text ‘Hyper Text Markup Language’ (HTML).
  • Change direction of text from right to left.
  • Convert paragraph text into computer output text.

Post your comments about Lesson 7 – HTML Phrase and Quotation Tags below.