JINSI YA KUWEKA PICHA KWENYE TOVUTI YAKO | HOW TO INSERT IMAGES INTO YOUR WEBSITE

Karibu kwenye kozi hii kamili ya HTML na CSS kwa wanaoanza! 🎉

Katika somo hili la kina, tunazingatia ujuzi muhimu sana: Jinsi ya kuweka picha kwenye tovuti yako kwa kutumia HTML na CSS.
Picha hufanya tovuti ziwe za kuvutia zaidi, za kupendeza, na za kitaalamu. Kujifunza jinsi ya kuziweka na kuzipanga vizuri ni jambo la lazima kwa kila anayeanza kujifunza utengenezaji wa tovuti.

👉 Katika video hii, utajifunza:

Jinsi ya kuongeza picha kwa kutumia lebo ya img katika HTML

Jinsi ya kuweka vyanzo vya picha (src attribute) na maandishi mbadala (alt attribute)

Jinsi ya kurekebisha ukubwa na nafasi ya picha kwa kutumia CSS

Jinsi ya kutengeneza picha zinazojibika (responsive images) kwa vifaa tofauti kama simu, tablet, na kompyuta

Makosa ya kawaida unayopaswa kuepuka unapoweka picha

Mambo ya msingi ya SEO (Search Engine Optimization) kwa kutumia picha

Ikiwa unajenga tovuti yako ya kwanza, unataka kuboresha ujuzi wako wa coding, au unavutiwa tu na maendeleo ya tovuti, somo hili litakuongoza hatua kwa hatua kwa njia rahisi na wazi.

🎯 Kufikia mwisho wa somo hili, utakuwa na ujasiri wa kutumia picha kwa ufanisi na kufanya tovuti yako iwe ya kipekee.

➡️ Hili ni sehemu ya Kozi Yetu Kamili ya Kujifunza HTML na CSS kwa Wanaoanza 2023 — hakikisha unatazama pia video nyingine kwenye orodha ya uchezaji ili kukamilisha safari yako ya kujifunza!

🔥 Vifaa na Rasilimali zilizotajwa katika video:

Tovuti za kupata picha za bure (kama Unsplash, Pexels)

Mhariri wa msimbo (Visual Studio Code)

Chaguzi za bure za kuweka tovuti mtandaoni ili kufanya mazoezi

📌 Sehemu za Video:
00:00 - Utangulizi
02:15 - Picha ni Nini katika Tovuti?
05:30 - Jinsi ya Kutumia Lebo ya img
10:45 - Kuweka Alt Text na Umuhimu Wake
14:20 - Kupanga Picha kwa CSS
20:00 - Kutengeneza Picha Zinazojibika
27:15 - Kutatua Changamoto za Picha
32:00 - Vidokezo vya Mwisho na Mawazo ya Miradi

💬 Una maswali yoyote? Tafadhali yaache kwenye sehemu ya maoni — ninajibu kila moja!

✅ Usisahau KUPENDA, KUSUBIRI, na KUBONYEZA kengele ya arifa ili upate masomo mapya ya maendeleo ya tovuti kila wiki.

Asante kwa kutazama, na heri njema katika coding! 🚀
Welcome to this full HTML and CSS course for beginners! 🎉

In this detailed lesson, we are focusing on one important skill: How to insert images into your website using HTML and CSS.
Images make websites more attractive, engaging, and professional, and learning how to properly add and style them is a MUST for every beginner web developer.

👉 In this video, you will learn:

How to add images using the img tag in HTML

How to set image sources (src attribute) and alternative text (alt attribute)

How to adjust image sizes and positioning with CSS

How to make responsive images that look good on phones, tablets, and computers

Common mistakes to avoid when inserting images

Best practices for SEO (Search Engine Optimization) using images

Whether you are building your first website, improving your coding skills, or just curious about web development, this tutorial will guide you step-by-step in a simple and clear way.

🎯 By the end of this lesson, you’ll be confident in using images effectively to make your websites stand out.

➡️ This is part of our Learn HTML and CSS Full Course for Beginners 2023 playlist — be sure to check out the other videos to complete your learning journey!

🔥 Tools and Resources mentioned in the video:

Free images websites (like Unsplash, Pexels)

Code editor (Visual Studio Code)

Free website hosting options to practice your skills

📌 Chapters:
00:00 - Introduction
02:15 - What is an Image in a Website?
05:30 - How to Use the img Tag
10:45 - Adding Alt Text and Why It’s Important
14:20 - Styling Images with CSS
20:00 - Making Responsive Images
27:15 - Troubleshooting Image Issues
32:00 - Final Tips and Project Ideas

💬 Got any questions? Feel free to leave them in the comments — I reply to every one!

✅ Don’t forget to LIKE, SUBSCRIBE, and TURN ON the notification bell to stay updated with new web development lessons every week.

Thanks for watching, and happy coding! 🚀