HTML Project - Photo Gallery 🎯

Welcome to your first major project with HTML! Today, we're going to build a simple yet functional Photo Gallery. By the end of this tutorial, you'll have a solid understanding of HTML, and you'll be able to create your own photo gallery or similar projects.

Understanding the Basics 📝 1.1. HTML Structure 1.2. HTML Tags 1.3. HTML Elements
Creating the Photo Gallery 💡 2.1. Building the Basic Structure 2.2. Adding Images 2.3. Organizing Images with <div> and <span> 2.4. Linking Images to Full Size Versions
Styling the Photo Gallery (optional) 🎨 3.1. Introduction to CSS 3.2. Basic CSS Properties 3.3. Styling the Photo Gallery
Quiz 📝

Understanding the Basics 📝

Before diving into the project, let's cover some basic HTML concepts that will help you grasp the project better.

1.1. HTML Structure

HTML (Hyper Text Markup Language) is the standard language for creating web pages. Every HTML document has a specific structure, which is defined by a series of tags.

1.2. HTML Tags

HTML tags are the building blocks of web pages. They define the structure of a document and are used to wrap content. Tags always come in pairs, with an opening tag and a closing tag.

1.3. HTML Elements

HTML elements are the pieces of content surrounded by opening and closing tags. The content within the tags is the content of the element.

Creating the Photo Gallery 💡

Now that we have a basic understanding of HTML, let's start building our photo gallery.

2.1. Building the Basic Structure

First, let's create the basic structure of our HTML document. Save a new file as photo-gallery.html and paste the following code:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Photo Gallery</title>
</head>
<body>
  <!-- Our Photo Gallery will be placed here -->
</body>
</html>

This code sets up the basic HTML structure of the document, with a <head> section for metadata and a <body> section for the content of the page.

💡 Pro Tip: The <title> tag is crucial for SEO (Search Engine Optimization) as it defines the title of the webpage displayed in browser tabs and search engine results.

2.2. Adding Images

Next, let's add some images to our photo gallery. We'll be using placeholder images for this tutorial.

html

<body>
  <h1>My Photo Gallery</h1>

  <div class="photo-gallery">
    <a href="full-image-1.jpg" target="_blank">
      <img src="small-image-1.jpg" alt="Image 1" />
    </a>

    <a href="full-image-2.jpg" target="_blank">
      <img src="small-image-2.jpg" alt="Image 2" />
    </a>

    <!-- Add more images here -->
  </div>
</body>

In this code, we added an <h1> tag to display the title of our photo gallery, and a <div> to contain all our images. Each image is wrapped within an <a> tag, which allows us to link the image to its full-size version when clicked. The target="_blank" attribute opens the full-size image in a new tab.

💡 Pro Tip: The alt attribute is used to provide alternative text for images, improving accessibility for users who cannot see the images.

2.3. Organizing Images with `<div>` and `<span>`

You may notice that our images are currently displayed one below the other. To create a more organized layout, let's use a combination of <div> and <span> elements.

html

<div class="photo-gallery">
  <div class="photo-row">
    <span class="photo-column">
      <a href="full-image-1.jpg" target="_blank">
        <img src="small-image-1.jpg" alt="Image 1" />
      </a>
    </span>

    <span class="photo-column">
      <a href="full-image-2.jpg" target="_blank">
        <img src="small-image-2.jpg" alt="Image 2" />
      </a>
    </span>

    <!-- Add more images here -->
  </div>

  <!-- Add more photo rows here -->
</div>

In this code, we created a new <div> tag with class photo-row to group our images into rows. We then added another <div> tag with class photo-column to group our images into columns within each row. This will give our photo gallery a more organized layout.

2.4. Styling the Photo Gallery (optional)

While our photo gallery is functional, it may not be visually appealing. To improve its appearance, we can add some CSS (Cascading Style Sheets) to style our photo gallery.

That's all for this tutorial! You now have a basic understanding of HTML and have created a photo gallery.

Quiz 📝

Keep practicing and exploring HTML to enhance your skills! 🚀

HTML Project - Photo Gallery 🎯

HTML Project - Photo Gallery 🎯

Table of Contents

Understanding the Basics 📝

1.1. HTML Structure

1.2. HTML Tags

1.3. HTML Elements

Creating the Photo Gallery 💡

2.1. Building the Basic Structure

2.2. Adding Images

2.3. Organizing Images with <div> and <span>

2.4. Styling the Photo Gallery (optional)

Quiz 📝

2.3. Organizing Images with `<div>` and `<span>`