"How to Create Your First Webpage: Step-by-Step Tutorial with complete Image Guide & Image Map tutorial"

CodeEasy May 04, 2025
How to Write Your First HTML Page | Tags, Images, Links & Text Formatting

Previously, We Learned Basic HTML Syntax – Now Let’s Start Building a Page!

In our last post, we explored the basics of HTML syntax — how the structure works and some important tags like <html>, <head>, <body>, <h1> and <p>. These tags form the basic HTML structure and are found in almost every HTML file, whether you're building a simple site or a large project.

Now that we’ve got a grip on the foundation, we’re ready to take the next step: creating a webpage using HTML.
In this lesson, we’ll start building a simple webpage using the tags we’ve already learned. To make our page more engaging, we’ll add an image in HTML. We’ll also explore HTML image map, which allows to make any area of your image clickable. In simple term we will see all about html image from basic to advanced with step-by-step HTML tutorial.

Creating a webpage using HTML.

  • step-1: Write basic html structure.
    start with doctype,html,head,title and body tag.

    • Example :

      <!DOCTYPE html>

<html>

<head>

     <title>Myfirstwebpage<title>

</head>

<body>

</body>

</html>
  • step-2:Add headings and paragraphs.
    Use <h1> and <p> inside <body> to add headings and paragraphs to your webpage.

    • Example :

       <!DOCTYPE html>

<html>

<head>

     <title>Myfirstwebpage<title>

</head>

<body>
  
<h1>My first web page.</h1>
    
<p>This is my first web page.</p>
    
</body>

</html>
  • step-3: Save this file as example.html, and open in browser.

Congratulations on creating your first webpage. This is just a beginning ,you can be able to do more if stay!

Add image to HTML pages : Complete Beginner-to-Advanced guide.

Whether you're creating a personal blog, an e-commerce website, or an online portfolio, images play a massive role in enhancing your site's visual appeal and improving user engagement. In this comprehensive guide, you’ll everything about using images in — from inserting basic images to advanced techniques like background images and image maps.

Let's bring your pages to life with images!

1. Basic HTML Image Tag Syntax

<img> tag helps to add an image in html webpages. It is a self-closing tag and requires at least two attributes:
src="image.jpg" - this tells the browser where the image is (the file path or URL).
alt="..." – alternative text shown if the image doesn't load.

Example :


<img src="images/photo.jpg" alt="Description of photo">

Key Attributes:

  • src – Specifies the image source (URL or file path).
  • alt – Alternative text (important for accessibility and SEO).
  • width and height – Control the image size.
  • title – Tooltip text shown on hover.
  • loading – Improves performance (e.g., loading="lazy").

1. If Image On Another Folder

If you wanted to addy images which is in a sub-folder, you must include the folder name in the src attribute:

Example :

<img src="/folder/file.extension" alt="image">

2. If Image On Same Folder.

If the image tou wanted to add in your page, is in the same folder, then you just have to include the file name with its extention.

Example :

<img src="file.extension" alt="image">

3. If Image On Another Website/Server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute. Copy the url of image from another website and paste in src attribute.

Example :

<img src="https://www.example.com/images/name.jpg" alt="image">
Note:

External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.

Tip:

  • Always include alt text for better SEO and accessibility.
  • Use the right image formats:
    • .jpg or .jpeg for photos,
    • .png for transparency,
    • .webp for fast-loading, modern images.
  • Compress large images to improve load speed.
  • Use descriptive filenames like mountain-view.jpg instead of img001.jpg.

Show a Tooltip Using the Title Attribute.

You can make a small popup message appear when someone hovers their mouse over an image. This is done using the title attribute.

Example :


<img 
src="images/html-logo.png" alt="HTML logo" title="This is HTML logo">
What happens?

When users move their mouse over the image, a little box appears showing the text from the title. This is useful for giving extra information or hints without taking up space on the page.

Use Lazy Loading to Make Your Website Load Faster

Lazy loading means your image will only load when it's about to appear on the screen. This helps your website load faster, especially if it has many images. Here's how to do it:

Example :


<img 
src="images/large-image.jpg" alt="A beautiful scenic view" loading="lazy">
Why is this helpful?
  • It makes your site open faster by not loading all images at once.
  • It's good for SEO and user experience because it improves performance, especially on slower connections.

HTML Image Maps: Make your Images Interactive.

Image map turn a single image into multiple clickable zones, each linking to a different page or section.

What is an Image Map in HTML

An image map is a single image with multiple clickable areas. Each area can act as a separate link, leading to different pages, sections, or actions.
For example, imagine a world map image — you can click on each continent, and each takes you to a specific page with information about that continent. Cool, right?

The key tag used in image maps is:

  • <map> : The HTML <map> tag defines an image map.
  • <area> : It defimes clickable areas within <map>.

These work in tandem with the tag using the usemap attribute.

Step-by-Step Guide: How to Create an HTML Image Map

Let’s walk through it step by step.

Step 1: Choose or Create an Image

Select an image you want to make interactive, using the <img> tag. The only difference from other images is that you must add a usemap attribute:

Example :


<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Note:

The usemap value must begin with a hash tag "#", and the corresponding <map> element should have the same name without the hash, to create a relationship between the image and the image map.

Step 2: Create Image Map

Then, add a <map> element.
The <map> element is used to create an image map, and is linked to the image by using the usemap value of required image in it's name attribute.

Example :


   <map name="workmap">
Note:

The name attribute must have the same value as the <img>'s usemap attribute but, without # tag.

Step 3: Define clickable area.

<area> element is used to define clickable area.

key attributes of <area> tag:
  • Shape - defines shape of area to be clicked.
  • coords - defines coordinates for the required shape.
  • href - contains url to another website.
  • alt - alternative text for accessibility and SEO.

Shapes and their coordinates:

You must define the shape of the clickable area, and you can choose one of these values:

  • shape="rect" - defines a rectangular region.
  • shape="circle" - defines a circular region.
  • shape="poly" - defines a polygonal region.
  • shape="default" - defines the entire region.

shape="rect" :

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.
So, the coordinates X1,Y1 is located X1 pixels from the left margin and Y1 pixels from the top:

image of rect coords.

The coordinates X2,Y2 is located X2 pixels from the left margin and Y2 pixels from the top:

image of rect coords.

Example :


<area 
shape="rect" coords="X1,Y1, X2,Y2" href="computer.htm">
image of selected area.

This is the area that becomes clickable and will send the user to the page "computer.htm".

shape="circle" :

For a circlular area, first locate the coordinates of the center of the circle: X1,Y1.
And then specify the radius of the circle: r pixels.

image of circle coords.

Example :


<area 
shape="circle" coords="X1, Y1, r" href="coffee.htm">
image of selected area.

This is the area that becomes clickable and will send the user to the page "coffee.htm".

shape="poly" :

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).
This can be used to create any shape. We have to find the x and y coordinates for all edges. The coordinates come in pairs, one for the x-axis and one for the y-axis.

image with poly coords.

Example :


<area 
shape="poly" coords="X1,Y1, X2,Y2, ...X9,Y9" href="url">
image of selected area.

This is the area that becomes clickable.


"That's it for this post, but we're not done with images yet! In the next post, we'll learn how to use images as background and explore more HTML elements to make your page interactive. Stay tuned — it's going to be exciting!"

Quick Takeaway:

  • You created your first HTML page structure.
  • Learned how to use the <img> tag to insert images.
  • Built an interactive image map with clickable areas.

Project: My Personal Page

Make a simple web page with your name, and add a photo using the <img> tag, and a nice background. You can use image map, to your photo, this will make your page look more interactive.

Roll up your sleeves and try it out!

Great job creating your first HTML page with images and image map—stay tuned for the next post, where we'll explore how to add background image, links, lists, and text formatting to take your webpage design to the next level.
"Stay tuned — it's going to be exciting!"

Happy Coding!

CodeEasy

Posted by CodeEasy

Post a Comment

0 Comments