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! 🚀