HTML

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!

Friday 31 March 2023

HTML Lists

HTML lists are a way to organize content on a web page by grouping related items together. They provide an easy and effective way to present information in a structured format, making it easier for users to read and understand the content.

Lists are commonly used in many different types of websites, including e-commerce sites, news sites, and educational sites. For example, an e-commerce site might use lists to organize product categories or display related items that customers might be interested in. A news site might use lists to present news articles or blog posts in a specific order, such as by date or popularity. An educational site might use lists to organize course materials or display important information for students.

In addition to their functional uses, lists can also be styled using CSS to create unique and visually appealing designs. This can help to enhance the overall look and feel of a website and make it more engaging for users.

Overall, HTML lists are an important tool for web developers and designers to use in order to create organized and structured content on a web page. By using lists effectively, they can help to improve the user experience and make information more accessible and easy to understand.

HTML provides two types of lists, ordered and unordered lists, that can be used to organize content on a web page.

Unordered Lists

Unordered lists are used to group items that don't have a particular order or sequence. They are created using the <ul> tag, with each list item represented by the <li> tag. Here's an example of an unordered list:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>      
</body>
</html>

This will produce a bullet point list of three items:

Item 1
Item 2
Item 3

Output

Ordered Lists

Ordered lists are used to group items that have a specific order or sequence. They are created using the <ol> tag, with each list item represented by the <li> tag. Here's an example of an ordered list:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
      </ol>  
</body>
</html>

This will produce a numbered list of three items:

First item
Second item
Third item

Output

Nested Lists

Lists can be nested inside other lists to create more complex structures. For example, you can have an ordered list that contains unordered lists, or vice versa. Here's an example:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <ol>
        <li>First item</li>
        <li>Second item
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
          </ul>
        </li>
        <li>Third item</li>
      </ol>        
</body>
</html>

This will produce an ordered list with a nested unordered list:

First item
Second item
- Subitem 1
- Subitem 2
Third item

Output

Lists can be styled using CSS to change the appearance of the bullets or numbers, or to add additional spacing between list items.

Description lists:

HTML description lists are used to display a list of terms and their corresponding definitions. They are created using the <dl>, <dt>, and <dd> elements.

Here is an example:

<!DOCTYPE html>
<html>
<head>
    <title>Description list</title>
</head>
<body>
    <dl>
        <dt>Ice cream</dt>
        <dd>- chacolate smooth frozen</dd>
        <dt>Desert</dt>
        <dd>- Fruits with custurd and honey</dd>
    </dl>
</body>
</html>

Output

Description lists are commonly used for glossaries, dictionaries, and other situations where a list of terms and their definitions need to be presented in a structured manner on a webpage

Projects

Famous People List - Create a list of famous people from a certain field (e.g. science, art, music) using an unordered list. Each list item should include the person's name and a brief description of their achievements.
Grocery List - Create a simple grocery list using an unordered list. Each list item should represent a different grocery item, and you can use nested lists to group related items together (e.g. fruits, vegetables, dairy, etc.).
Travel Itinerary - Create a list of places to visit on a trip using an ordered list. Each list item should include the name of the place, the date of the visit, and a brief description of what to do or see there. You can use nested lists to group related places together (e.g. cities, national parks, landmarks, etc.).
Create a description list with three terms and their corresponding definitions related to programming languages.
Add a description list to your webpage with two terms and their definitions related to computer hardware.
Write the HTML code for a description list with four terms and their definitions related to sports.
Create a description list with at least three terms and their definitions related to food and cuisine.
Add a description list to your webpage with two terms and their definitions related to mobile app development.
Write the HTML code for a description list with five terms and their definitions related to data science.
Create a description list with at least four terms and their definitions related to environmental conservation.

Happy Coding!