[HTML-Tutorial-13] img Element | Images | Width & Height Attributes in img as per new HTML standards

Опубликовано: 18 Октябрь 2024
на канале: Code Range

6,392

How to include images on your web page?
What are the attributes that go into the img tag?
Learn about including width and height attributes in the img element as per the new HTML standards.
Learn about the different types of links that go into the src attribute.
Understand the importance of alt attribute and how to write it.
Learn about optimizing image sizes for faster download speed & improved web performance.

- - - Contents Of The Video - - - -

00:00 - Introduction
00:23 - How are images put on a web page? What makes up an img element?
01:38 - src Attribute
01:53 - Absolute URL / Adding images from the web
02:52 - Relative URL / Adding images that are saved on your device
03:24 - Image formats & File extensions (.jpg .png .gif etc.)
04:13 - alt Attribute, Importance of alt text and Creating alt text
07:51 - Including Width & Height Attributes as per newest HTML standards
11:16 - Proportional Image Dimensions
11:53 - Creating Responsive Images with CSS
13:19 - Reducing Image Size (Resolution) for the web
14:58 - Review

- - - Interesting Links - - - -

Code Links:

1. Images (Web Page): https://juthikashetye.github.io/Code-...

2. Images (Code): https://github.com/juthikashetye/Code...

3. Link to all Demos: https://juthikashetye.github.io/Code-...

Recommended Resources:

1. W3 Alt Decision Tree: https://www.w3.org/WAI/tutorials/imag...

2. Images Concepts: https://www.w3.org/WAI/tutorials/images/

3. Image Aspect Ratio Calculator: https://eikhart.com/blog/aspect-ratio...