Chapter 9HTML Tutorial~1 min read
HTML Images
<img> Tag — src, alt, width, height
Images web pages ला visually appealing बनवतात. HTML मध्ये images <img> tag ने embed होतात. <img> हे self-closing tag आहे.
<img> Tag Syntax
Basic Image Syntax
html
<img src="image चा path" alt="Image चे description" />src आणि alt — Mandatory Attributes
<img> tag साठी src आणि alt हे दोन attributes mandatory आहेत. यांच्याशिवाय image properly work करत नाही.
src आणि alt — उदाहरण
html
<!-- Local image (same folder मध्ये असलेली) -->
<img src="photo.jpg" alt="माझा Photo" />
<!-- Sub-folder मधील image -->
<img src="images/logo.png" alt="Company Logo" />
<!-- External image (दुसऱ्या website वरून) -->
<img src="https://example.com/banner.jpg" alt="Banner" />- ▸src — "source" — image कुठे आहे ते path किंवा URL. Image load होण्यासाठी हे accurate असणे महत्वाचे.
- ▸alt — "alternative text" — image load नाही झाल्यास किंवा screen reader साठी हा text वाचला जातो. Accessibility + SEO साठी नेहमी लिहा.
Image Dimensions — width आणि height
Image Dimensions
html
<!-- Width आणि height attributes -->
<img src="profile.jpg" alt="Profile Picture" width="300" height="200" />
<!-- CSS ने dimensions set करणे (Modern best practice) -->
<img src="profile.jpg" alt="Profile Picture" style="width: 300px; height: 200px;" />📌
width आणि height attributes specify केल्याने page load होताना layout shift होत नाही — हे Google चा Core Web Vitals score (CLS) सुधारतो आणि SEO साठी चांगले.
Clickable Image — Link + Image
Clickable Image
html
<!-- Image ला link बनवणे — anchor tag आत img tag -->
<a href="https://youtube.com" target="_blank">
<img src="youtube-logo.png" alt="YouTube" width="120" />
</a>💡
Image file चा path जाणून घेण्यासाठी: File वर right-click → Properties → Location. किंवा browser मध्ये image वर right-click → "Copy image address".
✅ Key Points — लक्षात ठेवा
- ▸<img> self-closing tag आहे — </img> नाही
- ▸src = image चा path/URL (required)
- ▸alt = description text — accessibility + SEO साठी नेहमी लिहा
- ▸PNG, JPEG, JPG, GIF, WebP — supported formats
- ▸width + height specify करणे layout shift रोखते (CLS score)
0/13 chapters पूर्ण