New Course: Mastering React Hooks Learn ASP.NET Core: Free Beginner Series Database Design Patterns Explained AWS Certification Prep Course Machine Learning Fundamentals

Creating Hyperlinks in HTML

Hyperlinks are created using the <a> tag with the href attribute:

<a href="https://example.com">Visit Example</a>
<a href="about.html">About Page</a>
<a href="#section-id">Jump to Section</a>

Links can point to external sites, internal pages, or specific sections.

Inserting Images with the <img> Tag

The <img> tag is used to embed images:

<img src="image.jpg" alt="Description" width="400" height="300">

Key attributes:

  • src - Image path/URL
  • alt - Alternative text (required)
  • width/height - Dimensions

Adding a Favicon to Your Website

Add a favicon in the <head> section:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Modern browsers also support PNG/SVG favicons:

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">

Setting a Page Title

The <title> tag defines the browser tab title:

<head>
    <title>My Awesome Website</title>
</head>

This also appears in search engine results.

Embedding Videos and Audio in HTML

HTML5 provides native media elements:

Video

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
</video>

Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser doesn't support HTML5 audio.
</audio>

Using YouTube Videos in HTML

Embed YouTube videos using iframe:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID" 
frameborder="0" allowfullscreen></iframe>

Replace VIDEO_ID with the actual YouTube video ID.

Embedding External Content with <iframe>

Iframes embed external content within your page:

<iframe src="https://example.com" 
width="100%" height="500" 
title="Example Embed"></iframe>

Common uses include maps, documents, and external widgets.

Linking to Local and External File Paths

Understanding file paths is crucial for proper linking:

Absolute Paths (External)

<a href="https://example.com/page.html">External Link</a>
<img src="https://example.com/image.jpg">

Relative Paths (Local)

<a href="about.html">Same Directory</a>
<a href="pages/contact.html">Subdirectory</a>
<a href="../index.html">Parent Directory</a>

Root-Relative Paths

<a href="/images/logo.png">Site Root Directory</a>