HTML For Juniors | PART : 6

HTML For Juniors | PART  : 6

In this article I’ll be discussing basic part of HTML that a junior (beginner) needs to know. From juniors I mean to all those who are who just passed High School or are 14 years or above.

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 :

<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 :

<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.

<blockquote >

HTML <abbr> for Abbreviations

·        The HTML <abbr> element defines an abbreviation or an acronym.

·        Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Example :

<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 italic. Most browsers will add a line break before and after the element.

Example :

<address>
Biography of HELEN KELLER written by helen keller

Visit – “http://www.biography.com/people/helen-keller-9361967 ”
</address>

HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.

Browsers usually displays <cite> elements in italic.

Example :

<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 :

<bdo dir="rtl">Chipko Andolan is a movement that practiced the Gandhian methods of satyagraha and non-violent resistance </bdo>

Result

Computer Code

var person = {
    firstName:"shresthi",
    lastName:"jaiswal",
    age:15,
    eyeColor:"brown"
}

Result

HTML Computer Code Formatting

Normally, HTML uses 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 size and spacing.

---

HTML Keyboard Formatting

The HTML <kbd> element defines keyboard input.

Example :

<p>To open a file, select:</p>

<p><kbd>File | Open...</kbd></p

Result

HTML Sample Formatting

The HTML <samp> element defines a computer output.

Example :

<samp>

http://www.c-sharpcorner.com/

</samp>

Result

HTML Code Formatting

·        The HTML <code> element defines programming code.

Example :

<code>

var person = { firstName:"shresthi", lastName:"jaiswal", age:15, eyeColor:"brown" }

</code>

·        The <code> element does not preserve extra whitespace and line-breaks.

Example :

<code>

var person = {

    firstName:"shresthi",

    lastName:"jaiswal",

    age:15,

    eyeColor:"brown"

}

</code>

Result

·        To fix this, you must wrap the code in a <pre> element.

Example :

<p>Coding Example:</p>

<code>

<pre>

var person = {

    firstName:"shresthi",

    lastName:"jaiswal",

    age:15,

    eyeColor:"brown"

}

</pre>

</code>

Result

HTML Variable Formatting

The HTML <var> element defines a mathematical variable.

Example :

<p>Einstein wrote:</p>

<p><var>E = m c²</var></p>

Result

HTML Quotations, Citations, Definition and Computer Code

Elements

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<dfn>	Defines the definition of a term or an abbreviation.
<q>	Defines a short inline quotation
<cite>	Defines the title of a work
<code>	Defines programming code
<kbd>	Defines keyboard input
<samp>	Defines computer output
<var>	Defines a mathematical variable
<pre>	Defines preformatted text

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldEditEdit in GingerEdit in Ginger×