HTML Images

Rumman Ansari   Software Engineer   2023-03-27   7141 Share
☰ Table of Contents

Table of Content:

An image is a visual representation of something. Images can improve the design and the apperance of a web page.

You have the basics of text, but pages without images are . . . well, a little boring. Pictures do a lot for a Web page, and they’re not that hard to work with. Still, you should know some things about using pictures in your pages. In this chapter, you get all the fundamentals of adding images to your pages.

In This Chapter

  • Understanding the main uses of images
  • Choosing an image format
  • Creating inline images
  • Changing image sizes
  • Modifying images with filters

Adding Images to Your Pages

  • External link
  • Embedded images
  • Background images
  • Custom bullets

HTML Images Syntax

In HTML, images are defined with the tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: 



<img src="url">

Adding links to images



   <body>
		<h1>Linking to an External Image</h1>
			<p>
			<a href = "sirapj.jpg">
			Mr. Apj Abdul Kalam
			</a>
		</p>
	</body>

Live Preview

Here Image and .html file should be in same directories or folder.

The href points to an image file, not an HTML page. You can point to any type of file you want in an anchor tag. If the browser knows the file type (for example, HTML and standard image formats), the browser displays the file. If the browser doesn't know the file format, the user's computer tries to display the file using whatever program it normally uses to open that type of file.

Adding inline images using the <img> tag

 
<body>
<h1>A.P.J. Abdul Kalam</h1>
	<p>
		<img src = "sirapj.jpg"
			height = "480"
			width = "640"
			alt = "A.P.J. Abdul Kalam" />
	</p>
<p>
 <em>A.P.J. Abdul Kalam</em>, in full Avul Pakir Jainulabdeen Abdul Kalam (born October 15, 1931,
 Rameswaram, India—died July 27, 2015, Shillong), Indian scientist and politician who played a leading role in the development of India's missile
 and nuclear weapons programs. He was president of India from 2002 to 2007.
</p>
</body>

Live Preview

The image (img) tag is the star of this page. This tag allows you to grab an image file and incorporate it into the page directly. The image tag is a one- shot tag. It doesn’t end with </img>. Instead, use the /> characters at the end of the img definition to indicate that this tag doesn’t have content.

You might have noticed that I italicized A.P.J. Abdul Kalam in the page, and I used the <em> tag to get this effect. </em> stands for emphasis, and <strong> means strong emphasis. By default, any text within an <em></em> pair is italicized, and <strong>...</strong> text is boldfaced. Of course, you can change this behavior with CSS.

src (source)

The src attribute allows you to indicate the URL (Uniform Resource Locator) of the image. This can be an absolute or relative reference. Linking to an image in your own directory structure is generally best because you can't be sure an external image will still be there when the user gets to the page.

alt (alternate text)

The alt attribute gives you an opportunity to specify alternate text describ- ing the image. Alternate text information is used when the user has images turned off and by screen-readers. Internet Explorer (IE) automatically cre- ates a ToolTip (floating text) based on the alternate text.

 
<img src="sirapj.jpg" alt="Flowers in Chania">

You can actually add a floating ToolTip to any element using the title attribute. This works in all standards-compliant browsers, with nearly any HTML element

height and width

The height and width attributes are used to indicate the size of the image. The browser uses this information to indicate how much space to reserve on the page

You can use the style attribute to specify the width and height of an image.

 
<img src="sirapj.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

 
<img src="sirapj.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

One Example of height and width 

 
<p> Fixed size: width 130 height 130 </p>
<img src="apple.png" alt="Photo of red apple" width="130" height="130">

<p> Enlarged: width 160 (no height specified) </p>
<img src="apple.png" alt="Photo of red apple" width="160">

<p> Stretched: width 80 height 150 </p>
<img src="apple.png" alt="Photo of red apple" width="80" height="150">

align Attribute

 
<h2>No aligh</h2>
<p>You have to dream before your dreams can come true.
Look at the sky. We are not alone. The whole universe is friendly to us and conspires only to give the best to those who dream and work.
Man needs his difficulties because they are necessary to enjoy success.
Great dreams of great dreamers are always transcended.</p>
<img src="sirapj.png" alt="Photo of A. P. J. Abdul Kalam" width="100" height="100">
<p>We should not give up and we should not allow the problem to defeat us.
Be more dedicated to making solid achievements than in running after swift but synthetic happiness.
Climbing to the top demands strength, whether it is to the top of Mount Everest or to the top of your career.</p>

<h2>aligh right</h2>
<p>You have to dream before your dreams can come true.
Look at the sky. We are not alone. The whole universe is friendly to us and conspires only to give the best to those who dream and work.
Man needs his difficulties because they are necessary to enjoy success.
Great dreams of great dreamers are always transcended.</p>
<img src="sirapj.png" alt="Photo of A. P. J. Abdul Kalam" width="100" height="100">
<p>We should not give up and we should not allow the problem to defeat us.
Be more dedicated to making solid achievements than in running after swift but synthetic happiness.
Climbing to the top demands strength, whether it is to the top of Mount Everest or to the top of your career.</p>

<h2>left aligh</h2>
<p>You have to dream before your dreams can come true.
Look at the sky. We are not alone. The whole universe is friendly to us and conspires only to give the best to those who dream and work.
Man needs his difficulties because they are necessary to enjoy success.
Great dreams of great dreamers are always transcended.</p>
<img src="sirapj.png" alt="Photo of A. P. J. Abdul Kalam" width="100" height="100" align="left"> 
<p>We should not give up and we should not allow the problem to defeat us.
Be more dedicated to making solid achievements than in running after swift but synthetic happiness.
Climbing to the top demands strength, whether it is to the top of Mount Everest or to the top of your career.</p>

Live Preview

Choosing an Image Format

Almost nobody uses raw images on the Web because they’re just too big and unwieldy. Usually, Web images are compressed to take up less space. All the types of image files you see in the computer world (BMP, JPG, GIF, and so on) are essentially different ways to make an image file smaller. Not all the formats work on the Web, and they have different characteristics, so it’s good to know a little more about them.

BMP

The BMP format is Microsoft’s standard image format.

JPG/JPEG

The JPG format (also called JPEG) is a relatively old format designed by the Joint Photographic Experts Group. (Get it? JPEG!) It works by throwing away data that’s less important to human perception. Every time you save an image in the JPG format, you lose a little information.

GIF

The GIF format was developed originally for CompuServe, way before the Web was invented. This format was a breakthrough in its time and still has some great characteristics.
GIF is a lossless algorithm so, potentially, no data is lost when converting an image to GIF (compare that to the lossy JPG format). GIF does its magic with a color palette trick and a run-length encoding trick

PNG

Open-source software advocates created a new image format that combines some of the best features of both JPG and GIF, with no legal problems. The resulting format is Portable Network Graphics, or PNG. This format has a number of interesting features, such as

  • Lossless compression
  • Dynamic color palette
  • No software patents
  • True alpha transparency

Images with respect to Folder

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

 
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:120px; height:100px;">

Images on Another Server 

 
<img src="https://www.atnyla.com/images/html5.gif" alt="atnyla.com">

Background Image 

 

 <body style="background-image:url('html5.gif')">

<h2>Background Image</h2>

</body>
‹ Previous not possible this is first one.
‹ Next