Tuesday 4 April 2023

HTML Quotations and Other tags



There are several HTML tags that can be used to add quotations and citations to web page. Here are some of the most common ones:


<blockquote> - This tag is used to indicate a longer quotation, such as a paragraph or more. The text inside the tag is indented and typically styled differently from the surrounding text.

<blockquote> <p>Life is a journey, and if you fall in love with the journey, you will be in love forever.</p> <cite>Oprah Winfrey</cite> </blockquote>

 
<q> - This tag is used to indicate a shorter quotation, typically just a few words. The text inside the tag is usually enclosed in quotation marks.

<p>As Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p> 


<cite> - This tag is used to indicate the source of a quotation or other piece of information. It can be used in conjunction with <blockquote> or <q>, or on its own.

<blockquote> <p>The only way to do great work is to love what you do.</p> <cite>Steve Jobs</cite> </blockquote> 


<abbr> - This tag is used to indicate an abbreviated term, and can include a title attribute that provides more information about the term.

<p>The <abbr title="World Wide Web">WWW</abbr> has revolutionized the way we access and share information.</p> 


<address> - The <address> tag in HTML is used to indicate the contact information for the author of a web page or article. It can contain any combination of text, links, and other HTML elements, and is typically displayed in italics. 

<address> Written by John Doe<br> 

Email: john.doe@example.com<br> 

Website: <a href="https://example.com/">https://example.com/</a> 

</address>


In this example, the <address> tag is used to display the name and contact information for the author of the page.


<pre> - The <pre> tag in HTML is used to preserve white space and formatting within a block of text. Any text within the <pre> tag is displayed in a fixed-width font, and any extra spaces, line breaks, and other formatting are preserved exactly as they appear in the HTML code. This tag is commonly used for displaying code snippets or other text that requires exact formatting. 

<pre>

    The woods are lovely, dark and deep,

    But I have promises to keep,

    And miles to go before I sleep,

    And miles to go before I sleep.

</pre>

 In this example, the <pre> tag is used to preserve the formatting of the poem, including the line breaks and spacing. Without the <pre> tag, the poem would be displayed as a single block of text with no line breaks, and the formatting would be lost. But with the <pre> tag, the poem is displayed exactly as it was intended to be read, with the correct line breaks and spacing.

HTML code for all tags


<!DOCTYPE html>
<html>
<title>Other Tags</title>
</head>
<body>
<h1>Block Quote indicates longer quotation</h1>
<blockquote>
<p>Life is a journey, and if you fall in love with 
            the journey, you will be in love forever.</p>
<cite>Oprah Winfrey</cite>
</blockquote><hr>
<h1>q tag indicates shorter quotation</h1>
<p>As Albert Einstein once said, <q>Imagination is more 
            important than knowledge.</q></p><hr>
<h1>cite tag indicates the sources of quotation</h1>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
<cite>Steve Jobs</cite>
</blockquote><hr>
<h1>abbr tag is used to indicate abbreviation</h1>
<p>The <abbr title="World Wide Web">WWW</abbr> has revolutionized
             the way we access and share information.</p><hr>
<h1>address tag is used to indicate address</h1>
<address>
Written by John Doe<br>
Email: john.doe@example.com<br>
Website: <a href="https://example.com/">https://example.com/</a>
</address><hr>
<h1>pre preserves white spaces</h1>
<pre>
The woods are lovely, dark and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.
</pre>
</body>
</html>

output




Practice Time!

  1. Write an HTML code to display a block of text using the <blockquote> tag. The text should be "Success is not final, failure is not fatal: it is the courage to continue that counts." - Winston Churchill.
  2. Write an HTML code to display an abbreviation using the <abbr> tag. The abbreviation should be "HTML" and the title should be "HyperText Markup Language".
  3. Write an HTML code to display a citation using the <cite> tag. The citation should be "The Hitchhiker's Guide to the Galaxy" by Douglas Adams.
  4. Write an HTML code to display an address using the <address> tag. The address should be "123 Main Street, Anytown, USA".
  5. Write an HTML code to display a list of items using the <pre> tag. The list should include the following items: "Apples", "Bananas", "Oranges", and "Grapes".
  6. Write an HTML code to display a block of text using the <address> tag. The text should be "For more information, please contact us at info@example.com."
  7. Write an HTML code to display a table using the <pre> tag. The table should have two columns and two rows. The first row should contain the headings "Name" and "Age". The second row should contain the data "John" and "30".
  8. Write an HTML code to display a quotation using the <q> tag. The quotation should be "To be or not to be, that is the question." - William Shakespeare.
  9. Write an HTML code to display a quotation using the <q> tag. The quotation should be "Life is what happens when you're busy making other plans." - John Lennon.

HAPPY CODING!


No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...