HTML from Scratch: How to Insert an Image in HTML. Lesson #5 Overcod.net

HTML from Scratch: How to Insert an Image in HTML. Lesson #5

We continue to explore the basics of HTML. In this lesson, you’ll learn how to insert an image into an HTML document, set it as a background, adjust its size, alignment, text wrapping, and more. We’ll go over it with clear examples and results. Images on web pages can be background or regular images. What’s the difference?

Background image — an image placed as the background of a web page, allowing text, images, tables, or other elements to be added on top.
Regular image — a separate element that displaces other page elements. Recommended image formats for web pages: JPEG (JPG), GIF, PNG.

How to Set an Image as a Background in HTML

Use the <background> attribute in the<body> tag:

<body background="image_name.jpg">

Example: Place the image file “fon.jpg” next to your HTML file.

<html>
<head>
  <title>My First HTML Page on overcod.net</title>
</head>
<body background="fon.jpg">
  Hello, this is my first page on overcod.net.
</body>
</html>

Note: File names must be in Latin characters!

How to Insert an Image in HTML

Use the <img> tag with the src attribute to specify the file path:

&lt;img src="image_name.jpg">

Example:

<html>
<head>
  <title>My First HTML Page on overcod.net</title>
</head>
<body>
  <img src="kartinka.jpg">
  Hello, this is my first page on overcod.net.
</body>
</html>

How to Insert an Image from a Folder

If the image is located in a folder, specify the path:

<img src="img/image_name.jpg">

For images from other websites:

<img src="https://www.overcod.net/images/example.jpg">

How to Align an Image in HTML

Use the align attribute:

left — aligns the image to the left; text flows on the right.
right — aligns the image to the right; text flows on the left.

<img src="kartinka.jpg" align="right">

How to Add Margins to an Image

Use the hspace (horizontal margin) and vspace (vertical margin) attributes:

<img src="kartinka.jpg" hspace="20" vspace="20">

How to Resize an Image in HTML

Use the width and height attributes to specify the size:

<img src="kartinka.jpg" width="100" height="50">

How to Add a Border to an Image

The border attribute sets the border thickness:

<img src="kartinka.jpg" border="3">

Full Example

Let’s combine everything:

<html>
<head>
  <title>My First HTML Page on overcod.net</title>
</head>
<body background="fon.jpg">
  <h2>My Dream!</h2>
  <img src="https://www.overcod.net/images/example.jpg" 
       title="Welcome to overcod.net!" 
       align="right" hspace="20" vspace="20">
  <p>I have a dream:</p>
    <p>&#8594; Travel around the world;</p>
    <p>&#8594; Create interesting projects;</p>
    <p>&#8594; Earn more;</p>
    <p>&#8594; Have more time for creativity.</p>
</body>
</html>

Try implementing these examples yourself! 🌟