Kyurious Minds Computer Academy Blog HTML : Working with Links and Images

HTML : Working with Links and Images

HTML Links

Links, or hyperlinks, are essential for navigating between pages on the web. They are created using the <a> tag (anchor tag).

Basic Syntax of the <a> Tag:
<a href="URL">Link Text</a>

  • href: Specifies the URL of the page the link points to.

Example:
<a href="https://www.kyuriousminds.com">Visit Kyurious Minds</a>

Types of URLs:

  1. Absolute URL: Specifies the full path (including protocol).
    Example: <a href="https://example.com/page.html">Absolute Link</a>
  2. Relative URL: Specifies the path relative to the current page.
    Example: <a href="about.html">Relative Link</a>

Attributes of the <a> Tag:

  • target=”_blank”: Opens the link in a new tab.
    Example: <a href="https://example.com" target="_blank">Open in New Tab</a>
  • title: Adds a tooltip when the user hovers over the link.
    Example: <a href="https://example.com" title="Go to Example">Hover Over Me</a>
  • Anchor Links: Navigate within the same page by linking to an element’s id.
    Example:
    <a href="#section1">Go to Section 1</a>
    <div id="section1">Welcome to Section 1</div>

HTML Images

Images in HTML are embedded using the <img> tag. The <img> tag is self-closing and does not require an end tag.

Basic Syntax of the <img> Tag:
<img src="image.jpg" alt="Description of the image">

  • src: Specifies the file path or URL of the image.
  • alt: Provides alternative text for the image, which improves accessibility and SEO.

Common Attributes:

  1. Image Dimensions:
    Set width and height of an image.
    Example: <img src="image.jpg" alt="Image" width="200" height="150">
  2. Responsive Images:
    Use only the width or set dimensions in percentages for responsiveness.
    Example: <img src="image.jpg" alt="Responsive Image" width="100%">

Best Practices for Links and Images

  • Always use meaningful and descriptive alt text for images.
  • Use the title attribute for additional link or image context when needed.
  • Optimize image size and format (.jpg, .png, .webp) for faster loading.
  • Use relative paths for internal links and images, and absolute paths for external resources.

Examples

1. Creating a Simple Link:
<a href="https://www.wikipedia.org" target="_blank" title="Visit Wikipedia">Wikipedia</a>

2. Embedding an Image:
<img src="logo.png" alt="Company Logo" width="150">

3. Linking an Image:
<a href="fullsize-image.jpg">
<img src="thumbnail.jpg" alt="Click to view full size">
</a>

4. Anchor Links for Navigation:
<a href="#about">About Us</a>
<div id="about">Welcome to the About Us section!</div>

Practice Tasks for Students

  1. Task 1: Create a webpage with:
    • A link to your favorite website that opens in a new tab.
    • Add a tooltip using the title attribute for the link.
  2. Task 2: Embed an image of your choice:
    • Ensure the image has descriptive alt text.
    • Set the width to 300px.
  3. Task 3: Create a page with anchor links:
    • Add a link at the top of the page that navigates to a section at the bottom.
  4. Task 4: Design an image gallery:
    • Use thumbnails that link to the full-size images.