Sunday, April 20, 2025

HTML Images

When inserting image into web page, there is no need to have ending img tag with a slash. One img tag is enough.

Attribute src will lead to image location on your device. To simplify things, keep image you want to insert into same folder where you have web page you are working on.

In this case, image extension is .jpg, and image name is trol.jpg:

<img src="trol.jpg">

You can set image width using pixels, like this:

<img src="trol.jpg" width="250">

 Also, we can set height of the image, like this:

<img src="trol.jpg" alt="Place for Trol Image">	

To set alternative text for image, in case that for some reason image can't be loaded, but we need explanation for end users what is happening, use alt attribute:

<img src="trol.jpg" alt="Place for Trol Image">	

This is our simple web page, with same image inserted using all options we mentioned: 

<!DOCTYPE html>

<html>
<head>
	<title>Security Tutorials</title>
</head>

<body>

	<h1>Image in Web Page - How To</h1>
	
	<img src="trol.jpg">
	
	<br>
	
	<img src="trol.jpg" width="250">
	
	<br>
	
	<img src="trol.jpg" width="250" height="300">
	
	<br>
	
	<img src="trol.jpg" alt="Place for Trol Image">	
	
</body>
</html>

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...