مدرس: یکی از چیزهایی که پست وبلاگ‌مون هنوز کم داره همین الان
چند تا تصویره.
پس بیاید حالا یاد بگیریم چطور از المنت image در HTML استفاده کنیم.
اگر صفحه دمو رو چک کنیم،
می‌بینیم که اینجا
دو تا تصویر مهم داریم.
یکی این تصویر بزرگ که نوعی
تصویر توضیحی برای پست وبلاگه.
و بعد هم این عکس نویسنده.
پس بیاید حالا با اضافه کردن این تصویر
به بلوک‌مون شروع کنیم.
البته تصاویر در فولدر پروژه‌مون هستن.
اونا با فایل‌های استارتر اومدن،
و اونی که می‌خوایم اضافه کنیم
این post image هست.
می‌بینید وقتی دابل کلیک می‌کنید،
وقتی این فایل رو باز می‌کنید، VS Code
می‌تونه فایل‌های تصویر رو
بدون هیچ مشکلی نمایش بده.
ما این تصویر رو
دقیقاً اینجا بعد از نویسنده می‌خوایم.
در واقع تصویر مثل یک جداکننده عمل می‌کنه
بین ابتدای مقاله
و بقیه صفحه.
یعنی بخش بالایی.
حالا، فکر می‌کنم این تیتر اینجا،
یعنی این المنت h2 باید قبل از نویسنده باشه.
بیاید اون رو پایین‌تر ببریم.
درسته.
پس اول البته، مثل چیزی که اینجا داریم،
عنوان اصلی می‌آد،
یعنی المنت هدینگ،
و بعد نویسنده و بعد این تصویر.
خب، اما حالا بیاید المنت img رو اضافه کنیم.
پس دوباره، دقیقاً اینجا بعد از این پاراگراف،
می‌خوایم این تصویر رو اضافه کنیم.
پس مثل هر المنت دیگه،
با نوشتنش مثل این شروع می‌کنیم.
اما حالا یادتون باشه که چطور در اولین درس این بخش
بهتون گفتم.
که المنت img یک المنت خاصه،
و دلیلش اینه که هیچ محتوایی نداره،
و بنابراین تگ بسته‌شدنی هم نداره.
به جاش کاری که می‌کنیم،
اینه که فقط یک اسلش اینجا
در انتهای المنت اضافه کنیم.
حالا ممکنه تعجب کنید
که اگر هیچ محتوایی برای این المنت image مشخص نکنیم،
پس HTML چطور می‌دونه که کدوم تصویر رو نمایش بده؟
و این یک سوال عالیه،
که ما رو می‌بره به چیزی جدید در HTML،
که attributes هستن.
پس attributes در واقع قطعات داده‌ای هستن
که می‌تونیم برای توصیف المنت‌ها استفاده کنیم.
پس کلی attribute مختلف در HTML وجود داره،
و یکی‌شون attribute source هست.
و این همونی هست که الان بهش علاقه‌مندیم.
پس source مثل این نوشته می‌شه،
src،
و بعد یک علامت برابر.
و بعد نیاز به دابل کوتیشن داریم، مثل این.
و بعد اینجا می‌تونیم به سادگی نام تصویر رو مشخص کنیم.
یادتون باشه که post-img.jpg هست.
پس فقط می‌نویسیم
post-
img،
و حتی می‌تونیم اجازه بدیم VS Code کد رو
به طور خودکار کامل کنه.
مثل کلیک کردن اینجا یا پایین رفتن.
و در واقع کار نکرد،
اما اگر فقط اینتر بزنیم اینجا،
اونوقت خوب کار می‌کنه.
پس دوباره، می‌تونیم دستی بنویسیم یا از
قابلیت اتو کامپلیت VS Code استفاده کنیم.
و این واقعاً همه‌شه.
این اصول اولیه‌ایه که نیاز داریم
برای نمایش یک تصویر.
پس اگر حالا ریلود کنیم،
می‌بینید که واقعاً اینجاست.
عالی.
پس دوباره، بیاید سریع مرور کنیم.
ما تصویر رو با مشخص کردن محتوایی
در این المنت مشخص نکردیم.
به جاش، کاری که باید می‌کردیم مشخص کردن یک attribute بود.
و در این مورد، attribute source هست.
و یادتون باشه که attribute اساساً
مثل یک قطعه داده‌ست.
یعنی قطعه اطلاعاتی که این المنت رو توصیف می‌کنه.
پس اینجا داریم منبع رو توصیف می‌کنیم که
مرورگر باید تصویر رو ازش بخونه.
خب.
حالا علاوه بر attribute source
attributeهای دیگه‌ای هم هست که می‌تونیم برای تصاویر مشخص کنیم.
و یکی که نباید هیچوقت ازش صرف‌نظر کنیم attribute alt هست.
پس مثل این می‌نویسیمش
و alt مخفف alternative text هست.
پس اساساً چیزی که باید اینجا مشخص کنیم
متنیه که تصویر رو توصیف کنه.
و این به دلایل مختلفی خیلی مهمه.
یکی‌شون اینه که به موتورهای جستجو
مثل Google اجازه می‌ده
بدونن که چی داخل تصویر هست
چون بدون این توصیف
موتورهای جستجو واقعاً راهی برای دونستن
اینکه تصویر در مورد چیه ندارن.
و دوم و احتمالاً مهم‌تر
اینه که با مشخص کردن توصیف تصویر
می‌تونیم به افراد نابینا هم اجازه بدیم از وبسایت استفاده کنن.
پس کاربرانی که از screen reader استفاده می‌کنن تصویر رو نمی‌بینن
اما به جاش screen reader
این متن رو براشون می‌خونه.
پس این attribute واقعاً مهمه
و نباید هیچوقت فراموشش کنیم.
و اگر تصویر صرفاً تزئینی باشه،
پس می‌تونیم attribute رو خالی بذاریم
تا screen readerها ازش صرف‌نظر کنن.
اما در این مورد، این تصویر مهمه
چون بخشی از محتواست.
پس بیاید بگیم که این یک تصویر تزئینی
از صفحه وبلاگ هست.
یا چیزی شبیه این.
خب، حالا attributeهای دیگه‌ای که می‌تونیم مشخص کنیم
width و height هستن.
پس width مثل این نوشته می‌شه
و height هم همینطور.
و این‌ها عرض و ارتفاع تصویر رو مشخص می‌کنن
که بر حسب پیکسل هستن.
حالا، این تصویر اصلی رو اگر چک کنیم،
می‌بینیم که عرضش ۱۰۰۰ پیکسله
و ارتفاعش ۴۰۰ پیکسل.
و این نسبت تصویر مهمه
چون اگر width و height رو مشخص کنیم
که با نسبت اصلی تصویر جور درنیاد،
تصویر کج و کوله می‌شه.
پس باید نسبت رو حفظ کنیم.
حالا، اگر یکی‌شون رو مشخص کنیم،
مثلاً فقط width،
مرورگر به طور خودکار height رو محاسبه می‌کنه
تا نسبت حفظ بشه.
پس بیاید width رو روی ۱۰۰۰ بذاریم
و height رو حذف کنیم.
و حالا اگر ریلود کنیم،
می‌بینید که تصویر همون اندازه اصلیشه
و نسبتش حفظ شده.
حالا، اگر width رو روی ۵۰۰ بذاریم،
مرورگر height رو روی ۲۰۰ تنظیم می‌کنه
تا نسبت حفظ بشه.
و این کار رو به طور خودکار انجام می‌ده.
اما اگر هر دو رو مشخص کنیم،
باید مطمئن بشیم که نسبت درست باشه.
پس مثلاً اگر width رو ۵۰۰ بذاریم،
که نصف ۱۰۰۰ هست،
height هم باید نصف ۴۰۰ باشه اینجا.
پس ۲۰۰ می‌شه.
خب.
حالا باید همونطوری به نظر برسه و همینطوره.
اما البته اگر بخوام،
می‌تونم مربعی‌ش کنم، مثلاً.
که اونوقت تصویر کاملاً کج و کوله می‌شه درست
همونطوری که اینجا می‌بینیم.
البته، این رو نمی‌خوایم.
پس برگردونیمش و تمام.
عالی.
پس این چگونگی اضافه کردن تصاویر به سند HTMLه.
و این یکی فقط اولین چیزی بود که می‌خواستیم.
تصویر دیگه این تصویر نویسنده‌ست دقیقاً اینجا
بالای این پاراگراف نویسنده.
پس تصویری که حالا می‌خوایم این یکی‌ست، Laura Jones.
و می‌خوایم با height و width ۵۰ پیکسل.
خب، پس یک چالش دیگه براتون دارم.
و چیزی که این بار می‌خوام انجام بدید،
اینه که این تصویری که تازه نشونتون دادم رو
خودتون دقیقاً اینجا اضافه کنید.
خب؟
پس یک دقیقه وقت بگیرید و ویدیو رو پاز کنید
و این تصویر رو با ۵۰ در ۵۰ پیکسل اضافه کنید،
و بعد من یک دقیقه دیگه با راه‌حل برمی‌گردم.
خب.
پس امیدوارم تمرین بیشتری کرده باشید.
پس img و من بلافاصله شروع به نوشتن attributeها می‌کنم،
و بعد در انتها، المنت رو می‌بندم.
پس اینجا Laura Jones رو می‌خوایم،
و حالا فقط اینتر یا return می‌زنم
تا نام فایل رو اتو کامپلیت کنه.
و بعد متن alt،
بیاید بگیم که این یک
headshot
از Laura Jones هست،
و نه Jonas
و یک height.
و اینجا دوباره، می‌تونیم اینتر بزنیم
یا return تا اتو کامپلیت بشه.
اما من واقعاً می‌خوام این attributeها رو
خودتون دستی بنویسید تا تو ذهن‌تون بمونه.
پس این واقعاً مهمه.
پس height و یک width
از
۵۰.
و تمام.
پس المنت رو ببندیم،
ذخیره‌ش کنیم،
و بعد Prettier این کار خوب رو انجام می‌ده
که هر attribute رو در یک خط می‌ذاره،
که دیدنش رو واقعاً راحت می‌کنه.
در واقع، بیاید سایدبارمون رو اینجا ببندیم.
و بیاید ببینیم.
و تمام.
پس اینجا عکس Laura Jones حالا هست.
خب، آفرین.
پیشرفت خوبی بود.
پس حالا می‌دونیم تصاویر چطور کار می‌کنن
و attributeها هم چطور.
و در واقع می‌تونیم attributeها رو
روی برخی المنت‌های دیگه در HTML هم مشخص کنیم.
و یکی که این خیلی مهمه
در واقع خود المنت HTMLه.
پس اینجا در این المنت HTML،
باید زبانی که برای این صفحه وب استفاده می‌کنیم رو مشخص کنیم.
پس برای این سند، و می‌تونیم با گفتن lang این کار رو بکنیم.
پس مشخص کردن attribute lang.
و در این مورد، چون انگلیسیه،
می‌تونیم en بذاریم.
اما برای زبان‌های دیگه کدهای دیگه‌ای هست.
مثلاً برای آلمانی احتمالاً de هست،
یا برای پرتغالی باید pt باشه.
و اگر زبان دیگه‌ای دارید،
می‌تونید به راحتی با گوگل کردن کد رو پیدا کنید.
چیز دیگه‌ای که می‌تونیم، و در واقع باید انجام بدیم،
که نیاز به attribute داره،
مشخص کردن character set
است که در سند استفاده می‌شه.
پس این چیزیه که در head می‌ره،
چون قطعه اطلاعاتیه که سند رو توصیف می‌کنه.
پس اینجا نیاز به یک المنت جدید دیگه داریم.
این فقط meta نامیده می‌شه، که مخفف meta data هست.
پس meta data یعنی داده در مورد داده.
و پس اینجا داریم توصیف می‌کنیم که character set
رو که با این attribute توصیف می‌کنیم.
پس می‌گیم که character set باید UTF
8 باشه،
که اساساً همه کاراکترهای ساده‌ایه که در زبان انگلیسی استفاده می‌کنیم.
حالا این یکی اینجا یکی دیگه از این المنت‌هاست
که تگ بسته‌شدنی نداره.
و پس فقط مثل این می‌بندیمش.
خب؟
حالا من زمان زیادی
روی این المنت‌ها و این جور چیزها صرف نمی‌کنم،
چون بعداً وقتی خودتون صفحه‌هاتون رو می‌سازید
این‌ها همه به طور خودکار اتفاق می‌افته.
خب؟
این فقط برای نشون دادن بود
که این فقط راه دیگه یا جای دیگه‌ایه
که نیاز به attribute داریم
که بعد باید یک مقدار براش مشخص کنیم.
خب.
پس UTF 8 اینجا مقداریه که مشخص کردیم
برای این attribute character set.
خب.
و آره، فکر می‌کنم این همه‌ش برای این درس بود.
پس در درس بعدی می‌بینمتون.
خب.
و آره، فکر می‌کنم این همه‌ش برای این درس بود.
پس در درس بعدی می‌بینمتون.