Let's add the image to the web page. ^^
Create an image tag which makes an image shown in the web page as below.
<img src="the address of image" alt="the description of image" />
Since it is a single tag, add / before closing
You can also apply width and height directly to the image tag.
The width is width = "number (in pixels)" The height is height = "number (in pixels)".
alt = "Image description" is the text that will appear when you hover over the image. That's the explanation for this image.
For example, if we write down “robot “, the text “robot” will appear.
If alt = "" is not specified, web standard inspection will cause warnings or errors.
This is needed when you want to give an accurate description of the image.
There is another reason for this. There is a tool that allows people with visual impairments to read what the image is like when they use the Web.
This is called web accessibility.
Use the following tag, including the alt attribute:
<img src="asimo.jpg" alt="photo of asimo" />
When the width is applied
<img src="asimo.jpg" width="500" alt="the image of asimo, photo of asimo" />
Write it like above. In the above example, the height is not fixed. In this case, height is determined by the ratio, and vice versa.
Typing only height in the tag, width will be calculated by ratio,
If you apply width or height, without ratio, the image might look awkward.
So let's test it with my Ashimo’s picture on my blog.
url of image :
https://www.quizgum.com/material/images/HTML/asimo.png
Image Size: Width 740 Length 555
Tip: If you would like to get URL of an image, click the right button on your mouse, then go to property!
If you would like to test with an image you have, put the image in the same folder with html file being tested.
<img src="image name" alt="" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>image taag</title>
</head>
<body>
<h1>Popping up an image </h1>
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" alt="photo of asimo" />
<h1>Typing only width</h1>
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" width="500" alt="photo of asimo" />
<h1>Typing only Height</h1>
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" height="300" alt="photo ofasimo" />
<h1> If you increase width over the original length</h1>
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" height="700" alt="photo of asimo" />
<h1>Typing both width and height without ratid</h1>
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" width="500" height="500" alt="photo of asimo" />
</body>
</html>
The result of the image is too long so I will display it. You have learned the image tag with the above source, we could easily test it on your own. J
Let's learn how to navigate to the URL you want to move when you click on the image, using Hyperlink tag we learned previous lesson.
Very simple. You can add a hyperlink tag to an image tag. Let's make it to move to my website. First, create a hyperlink tag and the URL you are going to paste is “http://www.cybercronox.com”
<a href="http://www.cybercronox.com"></a>
Then insert the image tag inside the hyperlink tag. And the below URL is the image we are going to use.
https://www.quizgum.com/asimo.png
Image tag is as below.
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" alt="machine" />
Then if you put the above image tag into the hyperlink, the tags are as below.
<a href="http://www.cybercronox.com" target="_blank">
<img src="https://www.quizgum.com/material/images/HTML/asimo.png" alt="machine"/>
</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>my site</title>
</head>
<body>
<a href='http://www.cybercronox.com' target='_blank'>
<img src='https://www.quizgum.com/material/images/HTML/asimo.png' alt='machine' />
</a>
</body>
</html>
Then I will finish this lesson here. In the next lesson, I will cover “a table”.