HTML TUTORIAL FOR BEGINNERS PART 2

In HTML img element is used to display every types of images like:jpg, png, jpeg...
It can also display svg.
img element has many attributes but the most common ones are:loading, src, srcset, height, width and alt.
When we wanna to put image into website we have target the path or address of that image we interested in it.
It’s implementation looks like below:

<img src=’yourimagepath/yourimagename.png’/>

Inside src attribute we can put local images path or online path.
The second important attribute is alt attribute, you have to always include this attribute into your img element because sometimes your image path isn’t correct so the text is written inside alt attribute instead displays.
Your text should be meaningful that conveys the purpose or aim of your image to users.
When your user has slow internet connections your images won’t load properly in that case alt attribute plays crucial role.
For example

<img src="https://www.freecatphotoapp.com/yourcatphoto.jpg" alt="my cat photo eating food"/>

One thing keep in mind that HTML is not case sensitive language you can write it’s elements into capital case or camel case it doesn’t shows any error message.
Google chrome developers recommend us to use loading attribute to speed image loading process.
Looks like this

<img src="https://www.freecatphotoapp.com/yourcatphoto" loading="lazy-loading"/>

We can control the width and height of images using width and height attributes.
Look at this:

<img src="https://www.freecatphotoapp.com/yourcatphoto" width=200 height=150/>

I hope you enjoy the tutorial.
If you have any suggestions or criticism please let me know.
Please share let others to know

--

--

--

I am a web developer who writes web development content for you to make web development easier

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Ultimate Pandas Guide — Joining data with Python

A Panda eating bamboo as it contemplates how to join data in Pandas

Why We Prefer Python for Web Development?

LOCALISATION QA TESTING

Pair Programming

Shopify Private Apps Installation Procedure

Creating Modular Powerup Systems

Issues with Android Emulator | DBFF #54

How to Deal many Amazon SNS messages with Firehose and Lambda

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahmadullahnikzad

Ahmadullahnikzad

I am a web developer who writes web development content for you to make web development easier

More from Medium

Introduction to HTML & CSS for Kids | HTML Course 2022

Create A Circular Progress Bar using HTML CSS

Creating 3D worlds with HTML and CSS 🌪

A SCREENSHOT OF AN UNLIT ROOM Creating 3D worlds with HTML and CSS.

How to create a responsive contact form using HTML