Create Your First HTML Page with Image

Introduction

In this lab, you will learn how to create your first HTML webpage with an image by following a step-by-step process. The lab guides you through setting up a structured project directory, downloading an image resource, creating a basic HTML document, and inserting an image into the webpage. You'll gain practical experience in organizing web development files, using HTML image tags, and understanding how images are displayed in web pages.

By the end of this lab, you will have created a simple yet functional HTML page that demonstrates fundamental web development skills, including project structure management, image handling, and basic HTML document creation. This hands-on approach provides a solid foundation for beginners looking to start their web development journey.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 98% completion rate. It has received a 97% positive review rate from learners.

Set Up Project Structure

In this step, you'll set up the project structure for creating your first HTML page with an image. A well-organized project structure is essential for keeping your web development files neat and manageable.

The project structure has already been set up for you by the VM setup. Check the my-first-webpage directory:

ls my-first-webpage

This structure helps you separate different types of files:

images/ will store your image resources
css/ can be used for styling files (though we won't use it in this lab)

Let's verify the directory structure:

tree

Example output:

.
├── css
└── images

Great! You've now set up a clean and organized project structure that will make it easy to manage your web development files.

Download and Organize Image Resource

In this step, you'll download an image to use in your first HTML webpage. We'll use a simple, freely available image from the internet and save it in the images directory you created earlier.

First, navigate to your project directory:

cd ~/project/my-first-webpage

Let's verify the image was downloaded correctly:

ls images

Example output:

landscape.jpg

If you don't see the image file, you may need to download it by following the commands below. Skip this step if you see the image file in the images directory.

wget -O images/landscape.jpg "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80"

Check the image file details:

file images/landscape.jpg

Example output:

images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3

The image is now ready to be used in your HTML page. We've downloaded a landscape image that will work well for demonstrating image insertion in HTML.

Create Basic HTML Document

In this step, you'll create a basic HTML document that will serve as the foundation for your first webpage. HTML (HyperText Markup Language) is the standard markup language for creating web pages.

Navigate to your project directory:

cd ~/project/my-first-webpage

Open the WebIDE and create a new file called index.html:

touch index.html

Now, let's add the basic HTML structure. Open the index.html file in the WebIDE and enter the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>
  </body>
</html>

Let's break down the key components of this HTML document:

<!DOCTYPE html> declares this is an HTML5 document
<html> is the root element of the HTML page
<head> contains meta information about the document
<body> contains the visible page content
<h1> is a main heading
<p> is a paragraph

Insert Image into HTML Page

In this step, you'll learn how to insert the landscape image you downloaded into your HTML page. The <img> tag is used to embed images in HTML.

Open your index.html file in the WebIDE and modify the content to include the image:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a simple HTML page I'm creating to learn web development.</p>

    <h2>Beautiful Landscape</h2>
    <img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
  </body>
</html>

Let's break down the image tag attributes:

src: Specifies the path to the image file
alt: Provides alternative text for accessibility
width: Sets the display width of the image (in pixels)

Preview and Understand Image Display

In this step, you'll learn how to preview your HTML page and understand how images are displayed in web browsers. Since the LabEx environment provides a WebIDE with a built-in preview feature, you'll be able to see your webpage instantly.

To preview your webpage, look for the "Go Live" button in the WebIDE.

Click the my-first-webpage folder in the page, it will automatically open the index.html file in the preview mode.

This will launch a live view of your index.html file, showing the landscape image you added.

Let's explore some key concepts about image display in HTML:

Image Path

The src attribute specifies the relative path to your image:

<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />

Relative paths are based on the location of the HTML file
Always use forward slashes (/) in web file paths

Image Attributes

width: Controls image display size (in pixels)
alt: Provides text description for accessibility
You can also use height to set image dimensions

Responsive Images

To make images responsive, you can use CSS or adjust HTML attributes:

<img
  src="images/landscape.jpg"
  alt="Scenic Landscape"
  style="max-width: 100%; height: auto;"
/>

The style attribute is used to set the display size of the image. This is a CSS property that allows you to control the width and height of the image.

max-width: 100%; ensures the image does not exceed the container width
height: auto; maintains the aspect ratio of the image

Don't worry about CSS for now, we'll cover it in later labs.

Verify your image is displaying correctly in the WebIDE preview. You should see:

The landscape image
A width of 500 pixels
Clear, readable alternative text

Summary

In this lab, participants learned how to create their first HTML webpage by setting up a structured project environment and working with images. The process began with establishing a clean directory structure using terminal commands, creating dedicated folders for images and CSS, which helps maintain organized web development files.

The lab guided learners through downloading a sample landscape image from Unsplash using wget, demonstrating practical skills in file management and resource acquisition. By systematically organizing project files and retrieving an image resource, participants gained foundational knowledge in preparing web development projects and handling image assets for HTML pages.

Create Your First HTML Page with Image

Introduction

Don’t just read. Do.

Set Up Project Structure

Download and Organize Image Resource

Tutorials are better when they're interactive.

Create Basic HTML Document

Insert Image into HTML Page

Why just read about code when you can run it?

Preview and Understand Image Display

Summary