HTML: April 2023

Tuesday, 11 April 2023

HTML Text Formatting

 - This tag is used to italicize text, meaning the text enclosed within  tags will be rendered in italic font style. However, it is recommended to use CSS for styling purposes instead of the  tag, as it is mainly used for semantic purposes.
 - This tag is used to make text bold, meaning the text enclosed within  tags will be rendered in bold font style. However, similar to the  tag, it is recommended to use CSS for styling purposes instead of the  tag, as it is mainly used for semantic purposes.
 - This tag is used to underline text, meaning the text enclosed within  tags will be rendered with an underline. However, it is also recommended to use CSS for styling purposes instead of the  tag, as it is mainly used for semantic purposes.
 - This tag is used to highlight text with a marker-like effect, usually in a yellow background color. The text enclosed within  tags will be rendered with the defined background color, making it stand out.
 - This tag is used to render text as subscript, meaning the text enclosed within  tags will be rendered in a smaller font size and slightly below the baseline of the surrounding text. This is commonly used for mathematical or chemical formulas.
 - This tag is used to render text as superscript, meaning the text enclosed within  tags will be rendered in a smaller font size and slightly above the baseline of the surrounding text. This is commonly used for mathematical exponents or footnotes.
 - This tag is used to emphasize text with strong importance, typically rendered in bold font style. It is commonly used to highlight important or critical information on a webpage, and it carries semantic meaning to indicate the text's significance.
 - This tag is used to emphasize text with italic or emphasized style. It is commonly used to highlight text for emphasis or to convey stress or importance, and it also carries semantic meaning to indicate the text's emphasis.
 - This tag is used to render text in a smaller font size compared to the surrounding text. It is commonly used for fine print or legal disclaimers, and it can also be used for indicating smaller or less important information.
<code> - This tag is used to represent inline code or computer code within text. It is commonly used to display code snippets, programming instructions, or other code-related content, and it is usually rendered in a monospace font for clarity.
<pre> - This tag is used to define preformatted text, preserving whitespace and font spacing. It is commonly used for displaying text in a fixed-width font, such as monospace, and it is often used for displaying code blocks or other content that requires precise formatting.

The <ins> and <del> tags in HTML are used to represent inserted and deleted text respectively. The <ins> tag is used to mark text that has been inserted into the document, and the <del> tag is used to mark text that has been deleted or removed from the document.

HTML Code for text formatting:

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<h1>Formatting text</h1>

This is a paragraph of text with italicized text,
bold text, underlined text, and
highlighted text. The paragraph also
contains subscript text and
superscript text. Additionally, there is
strongly emphasized text and
emphasized text. The paragraph also
includes smaller text and
<code>inline code</code> snippets. Finally, there
is a block of preformatted text:


The <ins>quick</ins> brown <del>fox</del>
jumps over the <ins>lazy</ins> dog.

<pre>
This text
will be
formatted
exactly
as
it
appears
here.
</pre>

</body>
</html>

Output

It's important to note that while these HTML text formatting tags can be used for styling purposes, it's generally recommended to use CSS for styling in modern web development practices, as it provides more flexibility and separation of concerns. These tags are mainly used for semantic purposes, indicating the intended meaning or importance of the text, and they can be used in combination with CSS for achieving desired visual effects on web pages.

Practice Time!

Create a paragraph of text that includes italicized, bold, and underlined text, as well as a highlighted text using the , , , and  tags.
Display a chemical formula using subscript and superscript text using the  and  tags.
Highlight an important sentence in a paragraph using the  tag for strong emphasis and the  tag for italicized emphasis.
Display a piece of inline code with a monospace font style and a background color using the <code> tag and inline CSS.
Create a paragraph of text with smaller font size for fine print or disclaimers using the  tag.
Display a block of preformatted text using the <pre> tag with a fixed-width font style.
Design a web page that shows a paragraph of text, with some words marked as inserted using the <ins> tag and others marked as deleted using the <del> tag.
Create a paragraph of text that includes a combination of different text formatting tags to achieve a specific visual effect, such as a paragraph with italicized, bold, and underlined text, along with a highlighted keyword, subscript and superscript text, and emphasized text.

HAPPY CODING!

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> Life is a journey, and if you fall in love with the journey, you will be in love forever. <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.

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

<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> The only way to do great work is to love what you do. <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.

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

<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

Email: john.doe@example.com

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!

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.
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".
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.
Write an HTML code to display an address using the <address> tag. The address should be "123 Main Street, Anytown, USA".
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".
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."
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".
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.
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!