How to insert images in HTML | HTML KICK

How to insert images in HTML

How to insert images in HTML?

Images improve the aesthetic appeal of a webpage while illustrating the concepts in its textual content. Use the <img> element to include new images in your document. This is a void element that only contains attributes. Here is its syntax

<img src = ?url? alt= ?text? >

Definitions of code attributes

Note that src stands for source. This attribute tells the browser where it will find the image that you intend to display. The alt attribute is an alternative value that is displayed if a browser cannot display the image you selected correctly. Its value is user defined ? images can fail to display correctly because of a slow connection or an error in the src value.

Changing the default size of images

To change the size of an image that’s included in one of your webpages, use the width and height attributes. Below is an example that resets the size of an image to a square whose length is 300.

<img src="kites.jpg" alt="htmlkick" width="300" height="300">

How to insert images in HTML: Changing the default size of a website beforehand reduces chances of display issues that could cause the screen on which it is being loaded to flicker.

What is HTML Elements in HTML5? | HTML KICK

Link on Image

<a href="#"><img src="kites.jpg" alt="htmlkick" width="300" height="300"></a>

How to insert Animated Images

you can insert gif image on your web page for animation. It give you fantastic look to user and improve web page quality.

Example

<img src="animated.gif" alt="cartoon" style="width:512px;height:512px;">

alt Attribute in image tag

Must insert alt attribute in img tag that if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Example

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

Import other Images on Another Server/Website

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Link on Image

You can add link on image for navigate. put <a> (anchor tag) for link on image

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

 

Terry White

Terry White is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him

View all posts by Terry White →