Course Content
Introduction to HTML
In this introductory module, you'll learn what HTML is and its role in web development. You will set up your development environment and create your first HTML page. You'll also understand the basic structure of an HTML document and get familiar with fundamental HTML elements and attributes.
0/4
What is HTML?
Setting up the Environment
Basic HTML Structure
HTML Elements and Attributes
Working with Text in HTML
This module covers how to format text in HTML, including creating headings, paragraphs, and lists. You'll learn how to emphasize text with bold, italics, and underline, and how to create links for navigation. You'll also explore text alignment and introduce inline CSS for basic styling.
0/4
Headings and Paragraphs
Text Formatting
Links and Navigation
Text Alignment and Styles
Working with Images and Multimedia
In this module, you’ll learn how to add images and multimedia to your HTML pages. You'll master the <img> tag, and understand how to work with attributes like src and alt. Additionally, you'll discover how to embed audio and video files directly into your webpage, enhancing its interactivity.
0/3
Adding Images
Embedding Audio and Video
Creating Image Galleries
Tables and Forms in HTML
This module introduces the use of tables for displaying structured data and forms for collecting user input. You'll learn how to create, format, and style tables, and how to build forms with input fields, checkboxes, and buttons. Basic HTML5 form validation will also be covered.
0/2
Creating Tables
Working with Forms
HTML5 Elements and Semantic Markup
Explore the power of HTML5 in this module, where you’ll learn about new HTML5 elements like <article>, <section>, and <nav>. You’ll gain an understanding of semantic HTML, which helps improve search engine optimization (SEO) and accessibility. You’ll also be introduced to HTML5-specific features such as video and audio embedding.
0/3
HTML5 Structural Elements
New HTML5 Features
HTML5 Forms and Input Types
Advanced HTML Concepts
This module dives deeper into advanced HTML topics, including embedding external content using [iframe], working with HTML5 APIs like geolocation, and implementing accessibility best practices with ARIA attributes. You’ll also get a primer on responsive web design with the use of meta tags and media queries.
0/4
HTML5 APIs and Microdata
Embedding External Content
HTML Accessibility (A11y)
Creating Responsive Layouts with HTML
HTML Best Practices
Learn the best practices for writing clean, maintainable, and accessible HTML. This module covers proper code formatting, the importance of semantic HTML, and how to structure your HTML for SEO. You’ll also get practical tips on debugging HTML and using online validators to ensure your code is error-free.
0/3
Writing Clean, Readable HTML Code
SEO and HTML
Debugging HTML Code
Project – Building a Simple Website
Apply everything you’ve learned by creating a complete website from scratch in this hands-on project. You’ll plan, design, and build a multi-page website, incorporating text, images, forms, and navigation. This project will help you solidify your skills and showcase your work.
0/4
Planning the Website Structure
Building the Website
Enhancing the Website
Testing and Finalizing the Website
Conclusion and Next Steps
In the final module, you'll review the key concepts and skills you’ve learned throughout the course. You’ll also get guidance on the next steps in your web development journey, including an introduction to CSS for styling and JavaScript for interactivity. You’ll complete a final assessment to demonstrate your new HTML skills.
0/2
Review of HTML Essentials
What’s Next After Learning HTML?
Complete HTML Course (Free)
About Lesson

 

Links and Navigation

In this lesson, you will learn how to create hyperlinks and build navigation systems in HTML. By the end, you will know how to link pages, create anchors within a page, and design a basic website navigation menu.

1. What Are Links in HTML?

Links are created using the <a> (anchor) tag. They allow users to navigate between different pages or sections of a webpage, or even to external resources.

Syntax:

<a href="URL">Link Text</a>

Example:

<a href="https://example.com">Visit Example</a>

2. Types of Links

  1. External Links:

    • Used to link to an external website. 
      <a href="https://example.com">Go to Example</a>

  2. Internal Links:

    • Used to navigate within the same website, linking to another page or section. 
      <a href="about.html">About Us</a>

  3. Anchor Links:

    • Link to a specific section within the same page using id attributes. 
      <a href="#section1">Go to Section 1</a>
      • The target section: 
        <h2 id="section1">Section 1</h2>

  4. Download Links:

    • Provide a link to download a file by adding the download attribute. 
      <a href="file.pdf" download>Download PDF</a>

  5. Email Links:

    • Create a link to open an email client with a predefined email address. 
      <a href="mailto:example@example.com">Email Us</a>

3. Link Attributes

  1. href:

    • Specifies the URL of the destination.
    • Example: 
      <a href="https://example.com">Visit Example</a>

  2. target:

    • Specifies how the link will open:
      • _self (default): Opens in the same tab.
      • _blank: Opens in a new tab.
      <a href="https://example.com" target="_blank">Open in a new tab</a>

  3. title:

    • Adds a tooltip that appears when hovering over the link. 
      <a href="https://example.com" title="Go to Example">Visit Example</a>

  4. rel:

    • Specifies the relationship between the current page and the linked resource (e.g., nofollow for search engines). 
      <a href="https://example.com" rel="nofollow">No-follow Link</a>

4. Creating a Basic Navigation Menu

Navigation menus help users move between pages of a website. A typical menu is built using a list of links styled with CSS.

Example of a Basic Navigation Menu:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

5. Hands-On Activity: Creating Links and Navigation

  1. Create a Webpage with Links:

    • Save the following code as links_navigation.html: 
      <!DOCTYPE html>
<html>
<head>
    <title>Links and Navigation</title>
</head>
<body>
    <h1>Learn Links and Navigation</h1>
    <p><a href="https://example.com" target="_blank">Visit an external site</a></p>
    <p><a href="about.html">Go to the About page</a></p>
    <p><a href="#section1">Jump to Section 1</a></p>
    <h2 id="section1">Section 1</h2>
    <p>This is Section 1 on the same page.</p>

    <h2>Navigation Menu</h2>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

  2. Test the Page:

    • Open the file in a browser to see how the links and navigation work.

6. Best Practices for Links and Navigation

  1. Descriptive Link Text:

    • Use meaningful text for links instead of generic phrases like “Click here.” 
      <a href="about.html">Learn more about us</a>

  2. Avoid Broken Links:

    • Ensure that all links point to valid destinations.

  3. Open External Links in a New Tab:

    • Use target="_blank" for external links to avoid disrupting the user’s session.

  4. Ensure Accessibility:

    • Make navigation keyboard-friendly and use descriptive title attributes.

7. Summary

  • Links allow users to navigate between pages and resources.
  • The <a> tag is used to create links with attributes like href, target, and rel.
  • Navigation menus structure the website’s navigation, improving user experience.
  • Adhering to best practices ensures functional, user-friendly links and navigation.

In the next module, we’ll explore Text Alignment and Styles.

Previous
Next