حالا وقتشه برای
اولین چالش بزرگ کدنویسی توی این دوره
پس بزن بریم
خب قبل از اینکه بریم سراغ چالش اصلی
می‌خوام اول چند تا تغییر توی ساختار فایل‌هامون بدم
که الان توی این پروژه داریم
به طور خاص می‌خوام همه‌ی عکس‌ها رو
بذارم توی یه پوشه که بعد بهتون نشون بدم
چجوری می‌تونیم عکس‌ها رو وارد کنیم
وقتی که توی یه پوشه‌ی مشخص قرار گرفتن
الان همه‌شون همونطور که اینجا می‌بینیم
توی همون پوشه‌ی دقیقاً مشابه هستن
که فایل indexhtml هم اونجاست
و برای همین تنها کاری که باید بکنیم
اینه که اسم فایل رو اینجا بذاریم و مرورگر خودش
اون‌ها رو توی همون پوشه‌ی فایل HTML پیدا می‌کنه
ولی حالا بیایم یه پوشه جدید بسازیم
با زدن روی این آیکون و اسمش رو میذارم IMG
و بعد همه‌ی تصاویر رو می‌ذارم داخلش
فقط با کشیدن و رها کردن به این صورت
خب
حالا اگه صفحه رو ری‌لود کنیم
نه این یکی که دمو هست
بلکه اون پروژه‌ای که داریم روش کار می‌کنیم
راستی
این بار مجبور شدم دستی صفحه رو ری‌لود کنم
چون کامپیوترم رو وسطش خاموش کرده بودم
و هر وقت این کارو می‌کنی
اولین باری که برمی‌گردی
باید دستی صفحه رو ری‌لود کنی
وقتی داری با افزونه‌ی live server کار می‌کنی
باشه
یادتون باشه که اون رو توی ویدیوی قبلی نصب کردیم
و اگه الان یه تغییری اینجا بدم
پس احتمالاً باید
مثل قبل درست کار کنه
می‌بینین یه تغییر دادم و اینجا ظاهر شد
به هر حال می‌بینید که حالا چون تصاویر
داخل پوشه IMG هستن
دیگه توی همون پوشه indexhtml نیستن
برای همین دیگه این بالا دیده نمی‌شن
پس کاری که باید بکنیم اینه که مسیر تصویر رو
تغییر بدیم
و این اصلاً مشکل سختی نیست
فقط کافیه مسیر جدید رو شروع کنیم
با اسم پوشه
یعنی IMG و بعد یه اسلش
و اینم از این
می‌بینید تصویر دوباره اینجا ظاهر شد
پس همین کارو اینجا هم می‌کنیم ذخیره می‌کنیم
و تصاویرمون برگشتن
خب
معمولاً همیشه تصاویر رو توی یه پوشه‌ی جدا می‌ذاریم
برای همین فکر کردم مهمه که اینو بهتون نشون بدم
خصوصاً الان قبل از این چالش که قراره
از چند تا تصویر دیگه هم استفاده کنیم
خب درباره‌ی چالش
من برگشتم به صفحه‌ی دمو
و در واقع می‌خوام شما این قسمت رو
خودتون کدنویسی کنید
درسته؟
بذارید دقیقاً بهتون نشون بدم توی مارک‌آپ ما کجا باید باشه
پس توی HTML
اینجا بعد از article هست
خب
پس این بخش مربوط به مطالب مرتبط
دیگه بخشی از article نیست
جزو footer هم نیست
پس اینجا یه عنصر دیگه نیاز داریم
و این یکی رو خودم براتون می‌نویسم
اینجا قراره از عنصر aside استفاده کنیم
عنصر aside معمولاً برای
اطلاعات ثانویه‌ای استفاده می‌شه که مکمل
اطلاعات بخش اصلی صفحه هست
پس توی این مورد بخش اصلی صفحه article هست
و aside که اطلاعات ثانویه هست
در واقع یه سری مطالب مرتبطه که مربوط به
article هستن
پس مربوط به بخش اصلی
خب
اما می‌تونیم دوباره از یک جعبه‌ی عمومی بدون معنا استفاده کنیم
یعنی div و از نظر ظاهری هیچ چیزی تغییر نمی‌کنه
درسته؟
البته یه چیزی تغییر کرد
ما کمی از فضای خالی دور متن رو
که در تگ p داشتیم از دست دادیم
خب؟
پس بهتره دوباره برگردونیمش به p
چون می‌خوایم معنا داشته باشه
و البته می‌خوایم همون فاصله‌ها رو هم داشته باشیم
که مرورگر به صورت پیش‌فرض به المان‌های p می‌ده
درسته؟
اما ایده‌ای که گفتم همچنان درسته
چون خیلی راحت می‌تونستیم همین فاصله رو
بعداً با استفاده از CSS بازسازی کنیم
پس اگه می‌خواستیم می‌تونستیم در واقع
کل صفحه‌ی وب رو فقط با div بسازیم
و بعد با CSS هرطور که بخوایم ظاهرشون رو درست کنیم
اما خب ما این کارو نمی‌کنیم
ما از HTML معنایی استفاده می‌کنیم تا به المان‌ها معنا بدیم
حالا شاید بپرسید چرا این کارو انجام می‌دیم؟
و دلایل زیادی وجود داره
و فکر کنم قبلاً هم به بعضیاش اشاره کردم
یکی از اون‌ها بهینه‌سازی برای موتورهای جستجو هست
که basically یعنی موتورهای جستجو
مثل گوگل می‌تونن ساختار محتوای شما رو بهتر بفهمن
و بنابراین خیلی بهتر تحلیل می‌کنن
که محتوای شما و وبسایتتون درباره‌ی چیه
همچنین نوشتن HTML معنایی خیلی مهمه
برای دسترس‌پذیری مخصوصاً برای افرادی
که به صفحه‌خوان‌ها وابسته هستن تا وبسایت رو بخونن
خب؟
پس امیدوارم این موضوع براتون روشن شده باشه
و ما در ادامه‌ی دوره باز هم بهش اشاره خواهیم کرد
اما می‌خواستم از همین اول
این نکته رو خیلی واضح بگم
که وقتی به HTML فکر می‌کنیم
نباید فقط به ظاهرش تو مرورگر توجه کنیم
بلکه حتی بیشتر باید فکر کنیم
که این المان‌ها چه معنایی دارن
و نماینده‌ی چه چیزی هستن
و با این حساب
تقریباً تمام چیزایی که باید توی این بخش یاد می‌گرفتیم رو تموم کردیم
پس تو ویدیوی بعدی
میایم VS Code رو یکم بیشتر پیکربندی می‌کنیم
و بعد میریم سراغ دو تمرین پایانی
توی این بخش
پس منتظر نمونید
و بریم سراغ درس بعدی
پس
و دوباره یه لینک که فعلاً به جایی اشاره نمی‌کنه
و این یکی هست:
قدرت‌های
ناشناخته
CSS
و نوشته‌ی Jim
Dylan
و فعلاً نتیجه رو چک نمی‌کنم
بذار اول کاملش کنیم
پس یه تصویر دیگه
هدف این بخش واقعاً این بود که
تمرین کنی همین کد مشابه رو بارها و بارها بنویسی
یا کدی خیلی شبیه به این رو
چون تنها راهشه
که این چیزا واقعاً توی ذهنت بمونه
خب اسم این یکی رو میذاریم "کد جاوااسکریپت روی صفحه"
و دوباره عرض ۷۵
و ارتفاع ۷۵
می‌بینی که دارم الان یه کم سریع‌تر می‌نویسم
چون
نمی‌خوایم خیلی وقت تلف کنیم
برای نوشتن کد تکراری
این فقط برای تمرین خودت بود
هست
عالی
و در آخر پاراگراف
ذخیره می‌کنیم
و فوق‌العاده
خب این دقیقاً مثل دموی ما شد و الان
تمام محتوایی که می‌خواستیم نمایش بدیم
به‌شکل منطقی و درست نشانه‌گذاری شده
شاید برات سوال باشه چرا اینجا از لیست استفاده کردیم
دلیلش اینه که
برمی‌گرده به مفهوم HTML معنایی
که قبلاً کمی توضیح دادم
وقتی به این پست‌های مرتبط فکر کنیم
خیلی راحت می‌شه گفت
که در اصل یه لیست از پست‌های مرتبط هستن درسته؟
پس وقتی یه لیست هست باید توی HTML هم به شکل لیست باشه
پس باید کدمون رو به‌شکل لیست بنویسیم
و خب این دقیقاً کاریه که انجام دادیم
بعداً با CSS این بولت‌پوینت‌ها رو حذف می‌کنیم
چون توی این زمینه خیلی معنایی ندارن
ولی حتی وقتی بولت‌پوینت‌ها رو حذف کنیم
باز هم می‌خوایم معنای این بخش این باشه
که همه‌ی اینا یه لیست هستن
خب دیگه برای این ویدیو کافیه
واقعاً امیدوارم این چالش رو کامل کرده باشی
و از انجامش لذت برده باشی
حتی اگه یه کم طول کشید
و حتی اگه مجبور شدی بعضی مفاهیم رو
از درس‌های قبلی مرور کنی
کاملاً طبیعیه
و در واقع دقیقاً همین‌طور باید باشه
حالا برای اینکه بیشتر تمرین کنی
یه چالش کدنویسی دیگه هم داریم
که کاملاً جدا از این پروژه‌ست
ولی خیلی هیجان‌انگیزه
پس امیدوارم خیلی زود اونجا ببینمت