HTML is Like a Human Body! 👧

Let's learn how to build a webpage by comparing it to a person

What is HTML?

HTML (Hyper Text Markup Language) is the skeleton of every webpage. Just like people have heads, bodies, and feet, webpages have similar parts!

Think of a webpage like a person:

  • Head - Contains the title and information about the page
  • Body - Shows the main content that people see
  • Footer - The feet that hold extra information at the bottom

The Basic HTML Structure

Every HTML document follows this basic pattern:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first webpage.</p>
  </body>
  <footer>
    <p>Made with love by me!</p>
  </footer>
</html>

See the Connection!

Here's how HTML compares to a human body:

<head>
The Brain
<body>
The Torso
<footer>
The Feet

The <head> is like our brain - it contains important information but doesn't show on the outside.

The <body> is like our torso - it's the main part that everyone sees.

The <footer> is like our feet - it supports the page from the bottom.

Let's Try It in VS Code!

Follow these steps to create your first HTML file:

Step 1: Create a new file

Open VS Code and create a new file called my-first-webpage.html

Step 2: Type the HTML skeleton

VS Code Tip: Type ! and then press Tab to automatically generate the HTML skeleton!

Or copy this code into your file:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Page</title>
</head>
<body>
  <h1>Welcome to My World!</h1>
  <p>I'm learning to code HTML!</p>
</body>
  <footer>
    <p>Made with love by me!</p>
  </footer>
</html>

Step 3: Save and view your page

Save the file and open it in a web browser to see your creation!

Lesson 2: Adding Style with CSS - Giving Our HTML "Body" Some colored-Clothes! 👕

CSS (Cascading Style Sheets) is like the color, clothes and accessories for our HTML body. It makes our webpage look beautiful and stylish!

What is CSS?

CSS controls how HTML elements look on the page - their colors, sizes, positions, and more.

How to Add CSS to Your HTML

There are three ways to add CSS:

We'll focus on the best practice: External CSS!

Step 1: Create a CSS File

In VS Code, create a new file called styles.css in the same folder as your HTML file.

Step 2: Link the CSS File to Your HTML

Add this line inside the <head> section of your HTML file:

<link rel="stylesheet" href="styles.css">

Step 3: Write CSS Rules

CSS uses selectors to target HTML elements and properties to style them. Here's the basic syntax:

selector {
  property: value;
  another-property: another-value;
}

Let's Style Our HTML Elements!

Here's some CSS that will style the headings and paragraphs in your HTML:

/* Style the main heading */
h1 {
  color: #2c3e50;
  text-align: center;
  font-size: 2.5rem;
  text-decoration: underline;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Style paragraphs in the body */
body p {
  color: #34495e;
  font-size: 1.2rem;
  line-height: 1.6;
  background-color: #ecf0f1;
  padding: 10px;
  border-radius: 5px;
}

/* Style the footer paragraph */
footer p {
  color: #7f8c8d;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  border-top: 2px dashed #bdc3c7;
  padding-top: 10px;
}

/* Style the page title */
title {
  color: #e74c3c;
  font-weight: bold;
}

/* Add background color to the body */
body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  margin: 20px;
}

/* Style the footer */
footer {
  background-color: #34495e;
  color: white;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

Now, here's now how the human body looks like with CSS:

<head>
The Brain
<body>
The Torso
<footer>
The Feet

Lesson 3: More HTML Elements - Adding Features to Our Webpage

Now that we understand the basic structure of HTML, let's add more elements to make our webpage more interesting and functional!

Common HTML Elements

HTML has many elements for different purposes. Let's explore some of the most useful ones:

1. Images - <img>

The <img> tag is used to embed images in a webpage. It's a self-closing tag (doesn't need a closing tag).

Example Code:

<img src="images/bunny.jpg" alt="A cute bunny" width="300">

Attributes Explained:

CSS to Style Images:

/* Style all images on the page */
img {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  margin: 10px 0;
}

/* Add hover effect to images */
img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

Live Preview:

A cute bunny

Note: This is a placeholder. In your project, use images/bunny.jpg

2. Links - <a>

The <a> tag (anchor tag) creates hyperlinks to other webpages or resources.

Example Code:

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

Attributes Explained:

CSS to Style Links:

/* Style all links */
a {
  color: #4a6fa5;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  padding: 5px 10px;
  border-radius: 4px;
}

/* Style links on hover */
a:hover {
  color: #3a5a80;
  background-color: #f0f7ff;
  text-decoration: underline;
}

/* Style visited links */
a:visited {
  color: #6c5ce7;
}

Live Preview:

This is a sample link (hover to see the effect)

3. Buttons - <button>

The <button> tag creates clickable buttons that can trigger actions.

Example Code:

<button onclick="alert('Button clicked!')">Click Me!</button>

CSS to Style Buttons:

/* Style all buttons */
button {
  background-color: #4a6fa5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Style buttons on hover */
button:hover {
  background-color: #3a5a80;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Style buttons when clicked */
button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

Live Preview:

4. Tables - <table>

The <table> tag creates structured data in rows and columns.

Example Code:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Tags Explained:

CSS to Style Tables:

/* Style all tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Style table headers */
th {
  background-color: #4a6fa5;
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: bold;
}

/* Style table cells */
td {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
}

/* Style alternating rows */
tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* Style table row hover effect */
tr:hover {
  background-color: #e6f2ff;
}

Live Preview:

Name Age City
Alice 25 New York
Bob 30 London
Charlie 22 Paris

Putting It All Together

Here's an example of a complete HTML page using all these elements with CSS styling:

<!DOCTYPE html>
<html>
<head>
  <title>My Enhanced Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Enhanced Page</h1>
  
  <img src="images/bunny.jpg" alt="A cute bunny" width="400">
  
  <p>Check out this <a href="https://www.example.com" target="_blank">awesome website</a>!</p>
  
  <button onclick="alert('Thanks for clicking!')">Click for a Surprise</button>
  
  <h2>My Friends</h2>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Favorite Color</th>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>28</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>32</td>
      <td>Green</td>
    </tr>
  </table>
</body>
</html>