Software Literacy - Images and Hyperlinks in HTML

Visual Enhancements and Image Integration in HTML

  • Purpose of Images in Web Design:

    • Images are integrated into HTML documents to enhance visual presentation, provide necessary context, improve overall layout aesthetics, and increase content readability through visual cues.
    • Practical applications include travel websites using images of specific destinations to effectively showcase their offerings to users.

  • Characteristics of the HTML Image Element:

    • The <img> tag is the fundamental HTML element used to insert an image into a web page.
    • It is classified as an empty tag, meaning it contains attributes only and does not possess a closing tag or direct inner text content.

  • Modern Web Development Best Practices:

    • Styling and visual customization are handled using CSS (Cascading Style Sheets).
    • Standard HTML practices avoid presentational attributes directly on tags, favoring external or embedded CSS rules to govern layout and dimensions.

Attributes of the Image Tag

  • Source Attribute (src):

    • Specifies the exact file path or absolute URL of the image file that needs to be displayed.
    • The image file location can reside within the same directory/folder as the host HTML document or within a completely separate subfolder or web URL.
    • Syntax:
    • ``

  • Alternate Text Attribute (alt):

    • Supplies a text description of the specified image.
    • Functions as a text replacement whenever an image cannot be properly loaded or displayed due to broken pathways, server issues, or network errors (e.g., displaying alternative context such as alt="Image not available").
    • Serves a fundamental role in web accessibility and assistive technologies.

Auxiliary HTML Tag Definitions

  • <hr> Tag: Defines a horizontal rule, inserted to visually separate or break up distinct content blocks on a web page.
  • <br> Tag: Inserts a single line break directly into textual content without generating a new paragraph container.
  • <p> Tag: Defines a distinct structural paragraph block for grouping lines of text.
  • <li> Tag: Defines an individual list item within ordered or unordered list structures.
  • <sub> Tag: Defines subscript text, rendering characters slightly below the standard text line.
  • <sup> Tag: Defines superscript text, rendering characters slightly above the standard text line.