فصل ۵: درج تصاویر و رسانهها

فصل ۵: درج تصاویر و رسانهها
فصل ۵: درج تصاویر و رسانهها – صفحه وب خود را زنده کنید! 🎨
سلام به همه! تا اینجا صفحات وبمون رو با متن و لینکها ساختیم. اما صفحات وب بدون تصاویر، ویدئوها و صداها خیلی خستهکننده میشن، نه؟ توی این فصل یاد میگیریم چطور انواع مختلف رسانه رو به صفحات HTML اضافه کنیم و چطور اونها رو کنترل کنیم.
رسانهها، صفحات وب رو جذابتر، آموزندهتر و کاربرپسندتر میکنن.
۱. تگ
: نمایش تصاویر جادویی! 🖼️
برای نمایش تصاویر در HTML، از تگ <img> استفاده میکنیم. این تگ یه تگ خودبسته (Self-closing) هست، یعنی نیازی به تگ پایاندهنده نداره.
مهمترین خصوصیات تگ :
- src (Source): این خصوصیت، آدرس (URL) فایل تصویری رو مشخص میکنه. میتونه یه مسیر نسبی یا مطلق باشه.
- alt (Alternative Text): این خصوصیت، یک متن جایگزین برای تصویر ارائه میده. این متن در مواقعی نمایش داده میشه که تصویر به هر دلیلی بارگذاری نشه (مثلاً مشکل در آدرس یا قطع بودن اینترنت). همچنین برای موتورهای جستجو و صفحهخوانهای صوتی (Screen Readers) خیلی مهمه.
<img src="images/logo.png" alt="لوگوی وبسایت">
<!-- نمایش یک تصویر از اینترنت -->
<img src="https://www.example.com/images/banner.jpg" alt="تبلیغ">
خصوصیات اختیاری برای تگ
:
- width و height: برای تعیین عرض و ارتفاع تصویر به پیکسل. بهتره این خصوصیات رو در CSS تنظیم کنید، اما میتونید اینجا هم مشخص کنید.
<img src="images/photo.jpg" alt="یک عکس زیبا" width="300" height="200">
همیشه برای تصاویرتون از خصوصیت alt استفاده کنید! این هم برای کاربر و هم برای سئو (SEO) ضروریه.
۲. فرمتهای تصویری رایج: 📸
چندین فرمت تصویری وجود داره که هر کدوم ویژگیهای خودشون رو دارن:
- JPEG (.jpg, .jpeg): ایدهآل برای عکسهای واقعی با رنگهای زیاد. فشردهسازی داره که باعث کوچک شدن حجم فایل میشه.
- PNG (.png): عالی برای تصاویر با پسزمینه شفاف (Transparent Background) و لوگوها. کیفیت بالایی داره اما حجمش ممکنه بیشتر باشه.
- GIF (.gif): برای تصاویر متحرک (Animation) و تصاویر ساده با رنگهای کم مناسبه.
- SVG (.svg): تصاویر برداری (Vector) که کیفیتشون با تغییر اندازه کم نمیشه. برای لوگوها و آیکونها عالیه.
۳. تگ <audio> و <video>: صدا و تصویر در صفحه! 🎬
برای اضافه کردن فایلهای صوتی و تصویری، از تگهای <audio> و <video> استفاده میکنیم.
الف) تگ <audio>:
برای پخش فایلهای صوتی.
<audio controls>
<source src="audio/music.mp3" type="audio/mpeg">
<source src="audio/music.ogg" type="audio/ogg">
مرورگر شما از پخش صدا پشتیبانی نمیکند.
</audio>
خصوصیت controls: کنترلهای پخش (پلی، توقف، صدا) رو به کاربر نشون میده.
تگ <source>: به شما اجازه میده چندین فرمت از یک فایل صوتی رو مشخص کنید تا مرورگر بهترین گزینه رو انتخاب کنه.
ب) تگ <video>:
برای پخش فایلهای ویدیویی.
<video controls width="600" height="400">
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.webm" type="video/webm">
مرورگر شما از پخش ویدئو پشتیبانی نمیکند.
</video>
خصوصیات controls, width, height و تگ <source> مثل تگ <audio> عمل میکنن.
ارائه چندین فرمت فایل صوتی یا تصویری با استفاده از تگ <source>، سازگاری بیشتری با مرورگرهای مختلف ایجاد میکنه.
نکات پایانی:
- بهینهسازی تصاویر: قبل از آپلود تصاویر، حجم اونها رو با ابزارهای مناسب کم کنید تا سرعت بارگذاری صفحه بالا بمونه.
- حق کپی رایت: همیشه از تصاویری استفاده کنید که اجازه استفاده از اونها رو دارید.
با اضافه کردن تصاویر، صدا و ویدئو، صفحات وب شما از حالت ایستا خارج شده و به فضایی پویا و جذاب تبدیل میشن. حسابی خلاق باشید! ✨
مقالات مرتبط
آخرین مقالات
کدهای تمیز: با متغیرها، CSS را هوشمند کنید! 💡
متغیرهای CSS (Custom Properties): کد تمیزتر، مدیریت راحتتر! 🎨 سلام به همگی! توی پروژههای CSS، خیلی وقتا پیش میاد که یه رنگ، یه فونت، یا یه فاصله رو بارها و بارها توی جاهای مختلف استفاده میکنیم. مثلاً رنگ اصلی سایتمون...
ساخت انیمیشنهای حرفهای با @keyframes (گام به گام)
CSS Animations: خلق انیمیشنهای پیچیده با @keyframes! 🎬 سلام به همگی! تا الان با Transitionها آشنا شدیم که تغییرات بین دو حالت رو نرم میکنن. اما اگه بخوایم انیمیشنهای پیچیدهتر، چند مرحلهای، یا حتی انیمیشنهایی که مدام تکرار میشن رو...
دگرگونی سایت با CSS: چرخش، تغییر اندازه و جابجایی
CSS Transforms: جابجایی، چرخش، تغییر اندازه و کج کردن عناصر! 🤸♀️ سلام دوستان! تا اینجا با انیمیشنهای نرم و پیوسته (Transitions) آشنا شدیم. اما گاهی وقتها نیاز داریم که عناصر HTML رو جابجا کنیم، بچرخونیم، اندازهشون رو عوض کنیم یا...
انتقالهای نرم: عناصر خود را متحرک کنید!
CSS Transitions: جادوی حرکت نرم و روان! ✨ سلام به همه! تا حالا شده یه سایت رو ببینید که با هاور کردن روی یه دکمه، رنگش نرم و قشنگ عوض میشه؟ یا با تغییر اندازه یه عنصر، انیمیشن ظریفی رو...