Day 1: Understanding the Basics of HTML

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and design the structure of web pages. It provides the building blocks for web content like text, images, and links.

2. Key HTML Tags

Tag Description Example
<html> Wraps the entire HTML document <html> ... </html>
<head> Contains meta information and links <head> ... </head>
<title> Sets the page title (seen in the tab) <title>My Page</title>
<body> Defines the main content of the page <body> ... </body>
<h1> to <h6> Headings (largest to smallest) <h1>Title</h1>
<p> Paragraphs for text <p>Hello, world!</p>
<a> Links to another page or website <a href="https://example.com">Visit</a>
<img> Displays an image <img src="image.jpg" alt="Description">

3. Practical Exercise

Task: Create a simple HTML page that includes a heading, a paragraph, an image, and a link.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 1 - Learn HTML Basics</title>
</head>
<body>
  <h1>Welcome to HTML Basics</h1>
  <p>Today, we learn how to structure content on the web!</p>

  <img src="https://via.placeholder.com/300" alt="Sample Image" width="300">

  <p>Learn more about HTML on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN Documentation</a>.</p>
</body>
</html>

Your Goal:

  1. Save this code as day1.html.
  2. Open it in your browser to see the result.
  3. Experiment by changing the heading, paragraph, image, and link.

4. Reflection

Why is this important? HTML is the foundation of web development. Understanding its basics will make advanced topics like CSS and JavaScript easier to grasp.

Challenge for Tomorrow: Explore how to add styles to this HTML page using CSS.