Chapter 1: HTML - Basics of Web Development

Welcome to the HTML chapter! In this chapter, we will explore the fundamentals of HyperText Markup Language (HTML), the standard language used to create webpages. HTML is the backbone of web development and allows us to structure web content.

Topics Covered:

  1. What is HTML?
    • Introduction to HTML and its importance in web development.
    • HTML elements and tags.
  2. Basic Structure of an HTML Document
    • HTML tags: <html>, <head>, <body>, etc.
    • Creating a basic webpage structure.
  3. HTML Elements and Attributes
    • Common HTML tags: <h1>, <p>, <a>, <img>, <div>, etc.
    • Understanding attributes like src, href, alt, and others.
  4. Formatting Text
    • Using tags like <b>, <i>, <strong>, <em>, <u>, etc.
    • Heading tags: <h1> to <h6>.
  5. Links and Navigation
    • Creating hyperlinks using the <a> tag.
    • Opening links in the same or new tab.
  6. Images and Multimedia
    • Embedding images with the <img> tag.
    • Embedding audio and video using <audio> and <video>.
  7. Lists
    • Unordered lists (<ul>) and ordered lists (<ol>).
    • List items using <li> tags.
  8. Forms and Input Fields
    • Creating forms using <form>, <input>, <textarea>, <select>, etc.
    • Submitting data to the server.

Practical Exercises:

  1. Create a basic webpage with your name and a welcome message.
  2. Design a webpage that contains an image and a paragraph of text.
  3. Build a webpage that includes an ordered list of your favorite books and an unordered list of hobbies.
  4. Write a program that creates a form to collect name, email, and message from users.
  5. Create a simple navigation menu using links (<a>) that leads to different sections of the page.

Example Code (Read-Only):

To view the example program, you can see it here, but copying is not allowed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to HTML</title>
</head>
<body>

    <h1>Welcome to HTML Basics</h1>
    <p>This is your first webpage using HTML.</p>

    <h2>Image Example</h2>
    <img src="example.jpg" alt="An example image" width="300">

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

    <h2>Lists Example</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>

</body>
</html>