Powered by AI
Copilot
Sure! Here is the revised note on HTML images:
---
**HTML Images**
You can insert HTML images in a web page to make it more
attractive and visually appealing. Common image formats include
.jpg, .png, .jpeg, and .gif.
**How to Insert HTML Images**
Images can be inserted using the <img> tag in HTML. The src
attribute specifies the image URL (address). The <img> tag is an
empty tag, so it does not have a closing tag, but you can optionally
close it like this: <img />.
Example to include “photo.jpg”:
<img src="photo.jpg">
**Example using Relative Image URL**
A relative URL specifies a path that is relative to the current
folder/page. If the image is in the same folder, you only need to
specify the image name.
Example:
<img src="myimage.jpg">
If the image is in a sub-folder, mention the folder name with a slash /
and then the image name. For example, if "myphoto.jpg" is in the
"pictures" folder:
Example:
<img src="pictures/myphoto.jpg">
**Example using Absolute Image URL**
An absolute URL refers to the full image URL/path. You can include
images from an external website using an absolute URL.
Example:
<img
src="http://tutorialsclass.com/wp-content/uploads/2016/04/tuto
rialsclass-logo1.png">
**Image Alternate Text Attribute**
The alt attribute specifies an alternate text for an image, which is
displayed if the image is not found.
Example:
<img src="test.png" alt="Test Photo Alternate Text">
Powered by AI
**Image Title Attribute**
The title attribute specifies the title of an image, visible when you
hover over the image.
Example:
<img
src="http://tutorialsclass.com/wp-content/uploads/2016/04/tuto
rialsclass-logo1.png" title="This is Tutorials Logo Title">
**Image Size (Width & Height Attribute)**
The width and height attributes specify the image dimensions in
pixels.
Example:
<img src="www.tutorialsclass.com/photo.jpg" height="300"
width="500">
**Image Border Attribute**
The border attribute sets a border around the image. By default,
border thickness is measured in pixels.
Example:
<img src="www.tutorialsclass.com/photo.jpg" border="5px">
**Image Alignment Attribute**
The align attribute aligns the image horizontally. Commonly used
align properties are:
● align="left"
● align="right"
● align="center"
Example:
This is sample text. <img
src="www.tutorialsclass.com/photo.jpg" align="right"> This is
another text.
**Complete Example using all Image Attributes**
You can use multiple images in any webpage and combine different
attributes.
Example:
<html>
<head>
<title>Example of Image Tag & Attribute - Tutorials
Class</title>
</head>
<body>
<p>This is a test paragraph.</p>
Powered by AI
<img src="sample-picture.jpg" alt="Sample Image Text"
border="5" align="right">
<p>This is sample text. We will add image in html page.</p>
<img src="test-photo.jpg" height="300" width="400"
title="Sample title">
</body>
</html>
---
I hope this helps! If you have any more questions or need further
assistance, feel free to ask.
