Afroj Mansoori's Blog

HTML Assignment

Afroj Mansoori's photo
Afroj Mansoori
·

4 min read

1.What are inline and block element in HTML and the difference between them ? name a few inline elements and block elements.

  1. Inline Elements:

    • Inline elements do not start on a new line and only take up as much width as necessary.

    • They typically flow within the content and do not create a new "block" of content.

    • Examples of inline elements include <span>, <a>, <strong>, <em>, <img>, <br>, <code>, and <abbr>.

  2. Block Elements:

    • Block elements start on a new line and occupy the full width available, creating a new "block" of content.

    • They usually define the structure of the document, such as paragraphs, headings, lists, etc.

    • Examples of block elements include <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <blockquote>, <table>, and <form>.

2. How to work with images in HTML and explain in details <img/> tag important atributes

Working with images in HTML involves using the <img> (image) tag. The <img> tag is an empty, self-closing tag, and it is used to embed images in an HTML document. Here are the important attributes of the <img> tag:

  1. src (Source):

    • This attribute specifies the URL or file path of the image.

    • Example: <img src="image.jpg" alt="Description">

  2. alt (Alternate Text):

    • This attribute provides alternative text for the image. It is displayed if the image cannot be loaded or for accessibility purposes.

    • Example: <img src="image.jpg" alt="A beautiful landscape">

    • <!DOCTYPE html>

    • <html lang="en">

    • <head>

    • <meta charset="UTF-8">

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">

    • <title>Image Example</title>

    • </head> <body>

    • <h1>My Image</h1>

    • <img src="image.jpg" alt="A beautiful landscape" width="300" height="200" title="Click for larger view">

    • </body>

    • </html>

3.How to create lists in HTML?

In HTML, you can create lists using three main types of list elements: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). Each type of list has its own set of child elements to represent individual list items.

  1. Ordered List (<ol>):

    • Ordered lists are used when the order of the items matters. Each list item is marked with a number.

    • Use the <ol> element to define an ordered list and <li> (list item) for each item.

    • Example:

        htmlCopy code<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>

  2. Unordered List (<ul>):

    • Unordered lists are used when the order of the items does not matter. Each list item is typically marked with a bullet point.

    • Use the <ul> element to define an unordered list and <li> (list item) for each item.

    • Example:

        htmlCopy code<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
  </ul>

  3. Definition List (<dl>):

    • Definition lists are used to define terms and their corresponding definitions. Each term is marked with <dt> (definition term), and each definition is marked with <dd> (definition description).

    • Use the <dl> element and include <dt> and <dd> for each term and definition pair.

    • Example:

        htmlCopy code<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </dl>

4.How to interlink webpages and navigate people to other websites?

In HTML, you can create hyperlinks to interlink webpages within your own website or link to external websites. Hyperlinks are created using the <a> (anchor) element, and the href attribute specifies the destination URL. Here are examples of how to interlink webpages and navigate people to other websites:

Internal Linking (Linking to Pages Within Your Website):

  1. Relative Paths:

    • Use relative paths to link to pages within your website. The path is specified relative to the current page.

    • Example:

        htmlCopy code<a href="about.html">About Us</a>

  2. Absolute Paths:

    • Use absolute paths to specify the complete URL of the linked page.

    • Example:

        htmlCopy code<a href="https://www.example.com/about.html">About Us</a>

  3. Linking to Sections Within the Same Page (Fragment Identifier):

    • You can link to a specific section within the same page using a fragment identifier.

    • Example:

        htmlCopy code<a href="#section2">Go to Section 2</a>

        htmlCopy code<h2 id="section2">Section 2</h2>

External Linking (Linking to Other Websites):

  1. Absolute URLs:

    • Use absolute URLs to link to external websites. Provide the complete URL starting with "http://" or "https://."

    • Example:

        htmlCopy code<a href="https://www.example.com" target="_blank">Visit Example.com</a>

    • The target="_blank" attribute opens the link in a new tab or window.

  2. Linking to Email Addresses:

    • You can create links that open the user's email client to compose a new email.

    • Example:

        htmlCopy code<a href="mailto:info@example.com">Email Us</a>

Additional Attributes:

  1. target Attribute:

    • The target attribute controls how the linked page opens. Common values include:

      • _blank: Opens the link in a new tab or window.

      • _self: Opens the link in the same tab or window (default behavior).

      • _parent: Opens the link in the parent frame or window.

      • _top: Opens the link in the full body of the window.

    • Example:

        htmlCopy code<a href="https://www.example.com" target="_blank">Visit Example.com</a>

  2. Linking to Files (e.g., PDFs, Images):

    • You can link to various types of files using the same <a> element. Just provide the path to the file in the href attribute.

    • Example:

        htmlCopy code<a href="documents/document.pdf" target="_blank">Download PDF</a>
#pwskillspwa web app development,