top of page
Search

HTML Lecture 08 - HTML Images

  • Writer: Alex Wright
    Alex Wright
  • Oct 15, 2020
  • 2 min read

Updated: Jul 1, 2022


Today we are going to learn about How to use images on your webpage. Images can improve the design and the appearance of a web page. We will be looking at the image syntax, and its different attributes, and how different types of images can be used for our webpage.


HTML Image Syntax


The element used to embed images on a webpage is <img>. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The two required attributes of <img> tag are 'src' which is used to define the source of an image and 'alt' which displays an alternate text if the image does not show up on the page. The syntax is:


<img src="url" alt="alternatetext">

We can also use Height and width attributes in the <img> tag to define the size of an image. The sizes are always defined in pixels. We can embed images from another folder on the computer or from any website. Make sure that you are using the correct path to embed the image. Let's code our program to embed some images on a webpage.


<!DOCTYPE html>
<html>
<head>
<title>Lecture 08</title>
</head>
<body>

<h1 style="text-align: center">HTML Lecture 08</h1>
<p>JPG Image embedded from local machine.</p>
<img src="C:\Users\Atif.Rabbani\Desktop\Text files\nature.jpg" alt="Nature" height="200" width="200">
<p>JPG Image embedded from another website.</p>
<img src="https://i.insider.com/5df126b679d7570ad2044f3e?width=1100&format=jpeg&auto=webp" alt="Dog" height="200" width="200">
<p>GIF Image embedded from another website.</p>
<img src="https://media3.giphy.com/media/VbnUQpnihPSIgIXuZv/giphy-downsized.gif" alt="Cat" height="200" width="200">

</body>
</html>

The result:

HTML Background Images


We can also use Images as a background of our webpage. For that, we will use <style> element with different other attributes like background-cover which is used to cover the whole screen size with the embedded background image. Let's look at the code:


<!DOCTYPE html>
<html>
<head>
<title>Lecture 08</title>
<style>
body {
  background-image: url('https://media3.giphy.com/media/VbnUQpnihPSIgIXuZv/giphy-downsized.gif');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<h1 style="text-align: center; color:blue">HTML Lecture 08</h1>
<h4 style="color:blue">Background image with 50% opacity.</h4>

</body>
</html>

The result:


Try these codes yourself with different images and create a cool webpage!


Comentarios

bottom of page