گوینده: بیاید همچنان با متن کار کنیم
توی این بخش یاد می‌گیریم چطور لیست درست کنیم
هم لیست‌های نقطه‌ای (بولت‌دار) و هم لیست‌های شماره‌دار
منظورم از لیست هم در واقع همون چیزیه که
مثل یک سری موارد با نقطه جلوی هر کدومه
مثل این مثالی که اینجاست یا لیست شماره‌دار
که آیتم‌هاش به ترتیب ۱۲۳ شماره‌گذاری میشن
خب؟
در HTML ساختن این خیلی ساده‌ست
ببینیم چطوری انجام میشه
اول با لیست شماره‌دار شروع کنیم
این همونیه که اینجا داریم آخر این بخش
از متنمون قرار گرفته
توی قسمت «HTML چیست؟»
اینجا یک پاراگراف داریم بعد پاراگراف بعدی
و در واقع یه پاراگراف دیگه هم داریم
که جا انداختیم
و بعد از اون لیست میاد
پس بیایم کل این محتوا رو بیاریم
اینا سه تا آیتم لیست هستن
و اینم همون پاراگراف جا افتاده
خب کلشو اینجا پیست می‌کنم
و حالا کافیه این بخش رو داخل یک تگ P بذارم
اینجوری پاراگرافمون درست شد
پس همه‌چیز الان ترتیبی و ساختارمند هست
خب حالا وقتشه لیست رو شروع کنیم
برای شروع یک لیست شماره‌دار
که بهش Ordered List هم میگن
از تگ OL استفاده می‌کنیم مثل این
OL یعنی Ordered List یا همون لیست ترتیبی‌شده
وقتی بازش می‌کنیم طبیعتاً
باید آخرش هم بسته بشه
خب بذار یکم فاصله بذارم اینجا
چون برای هر آیتم از لیست
باید یک تگ جداگانه داخل همین OL بسازیم
برای این کار از تگ LI استفاده می‌کنیم
که مخفف List Item هست
یعنی «آیتم لیست»
بازش می‌کنیم و می‌بندیم
حالا محتوای این آیتم رو بیاریم اینجا
این تگ بازکننده رو بذارید ببُریمش
خب این دوتا رو هم می‌بُرم
و پایین اینجا پیست می‌کنم
و همه‌شون رو داخل LIهای دیگه می‌ذاریم
پس دوباره: LI یعنی آیتم لیست
و OL هم یعنی لیست ترتیبی یا شماره‌دار
من اینجا با دکمه تب کمی تورفتگی (Indentation) دادم
که آیتم‌ها زیر هم ترتیبی دیده بشن
و مشخص باشه همگی فرزند OL هستن
شاید متوجه شده باشید من از کلمه‌های
«عنصر فرزند» و «عنصر والد» استفاده کردم
هر وقت یک المنت داخل المنت دیگه باشه
اون چیزی که داره بقیه رو تو خودش نگه می‌داره میشه والد
توی این مثال والد همون لیست ترتیبی هست
و المنت‌هایی که داخل اون هستن
میشن فرزند یا Child Elements
خب
حالا برگردیم و صفحه رو رفرش کنیم
و همون‌طور که می‌بینید لیست شماره‌دارمون ساخته شد
عالیه مرورگر کروم کدمون رو متوجه میشه
و خودش می‌فهمه باید اینو
به صورت یک لیست شماره‌گذاری شده نشون بده
یعنی ۱۲۳
و جالب اینجاست که این شماره‌ها رو خودش میذاره
و ما نیاز نیست دستی چیزی اضافه کنیم
حتی اگه یک آیتم دیگه به لیست اضافه کنیم
مثلاً همین اول بیاریمش
اون به صورت خودکار میشه آیتم شماره یک
اوه ببخشید
همون‌طور که گفتم اون آیتم جدید
میشه آیتم شماره یک
و همون‌طور که می‌بینید الان چهار تا آیتم داریم
و این یکی شده اولی
ولی اینو نمی‌خوایم
پس پاکش می‌کنیم
عالیه پس این شد یکی از لیست‌ها
لیست دیگه اینجاست توی بخش
«چرا باید HTML یاد بگیریم؟»
اینجا هم دوباره یه سری محتوای دیگه هست
پس بیایم همه این بخش رو بیاریم
از همین فایل محتوایی اینجا
این تیترشه و حالا همه این متن‌ها رو لازم داریم
کپی و پیستش می‌کنیم
و دوباره
اول اینا رو داخل پاراگراف می‌ذارم
شاید دارید کم‌کم متوجه میشید که
ما داریم یک ساختار خیلی مرتب و تمیز
برای متن درست می‌کنیم جوری که هر بخش
داخل یک المنت مشخص قرار بگیره
یعنی دیگه هیچ متنی سرگردان و بدون تگ
وسط body رها نشده درسته؟
ما همیشه داریم ساختاری درست می‌کنیم
که هر المنت معنای خودش رو داشته باشه
مثلاً همه اینا پاراگراف هستن
و واسه همین از تگ P استفاده کردیم
و این قسمت محتوا یک لیسته
به همین خاطر از تگ لیست ترتیبی استفاده می‌کنیم
در واقع با این کار به محتوا معنا می‌دیم
و ساختارش رو منطقی می‌کنیم
اینطوری مرورگر می‌تونه محتوا رو
به شکلی نمایش بده که درست باشه
خب حالا این بخش رو داریم
اینجا می‌خوایم یه لیست بولت‌دار درست کنیم
برای این کار از تگ UL استفاده می‌کنیم
و UL همون‌طور که شاید حدس زده باشید یعنی Unordered List لیست غیر ترتیبی
خب پایینش هم باید تگ بسته‌ش رو بذاریم
UL
پس لیست شماره‌دار میشه OL و لیستی که شماره نداره
و ترتیب آیتم‌ها توش مهم نیست
میگیم Unordered یا غیر ترتیبی
واسه همین اسمش UL هست یعنی Unordered List
ولی باز هم داخل همین لیست باید
برای هر آیتم از تگ LI استفاده کنیم
یعنی دقیقاً مثل قبل باید همه آیتم‌ها
رو داخل LI قرار بدیم
این کارو قبلاً انجام دادیم پس مطمئنم بلدید
و احتمالاً حدس زدید که اینجا
یه تمرین کوچیک برای خودتونه
پس ویدئو رو متوقف کنید و دقیقاً همون کاری که بالا کردیم رو انجام بدید
یعنی همه این آیتم‌ها رو
داخل تگ LI بذارید
اینطوری می‌تونید باز هم HTML نوشتن رو
خودتون تمرین کنید
خب امیدوارم تمرین ساده‌ای بوده باشه
حالا بیاید سریع اینجا خودمون هم انجامش بدیم
خب
این یکی آیتم چند خطی هست
که اینجا تموم میشه
می‌بینید که فرمت‌بندی کد الان کلی به‌هم ریخته
ولی نگرانش نیستم چون
برای این کار ابزار Prettier رو داریم درسته؟.
Prettier خودش تمام فرمت‌بندی رو درست می‌کنه
ولی امیدوارم متوجه شده باشید که بدون این فرمت‌بندی
کد کاملاً درهم و نامفهوم میشه
خیلی سخت میشه فهمید چی به چیه
مثلاً این المنت اینجا فرزند تگ P نیست
پس باید بیاریمش جلوتر و تراز کنیم
که البته میشه دستی هم درستش کرد
فقط با پاک کردن این فاصله‌ها
ولی خب می‌تونیم این کارو بسپریم به Prettier
که خودش همه‌چیزو مرتب می‌کنه
خب حالا اینم از لیست بولت‌دارمون
پس دیگه هم لیست مرتب داریم و هم لیست نامرتب
و البته تگ پاراگراف هم که از قبل داشتیم
اینا واقعاً همون چیزای پایه‌ای هستن
که برای نوشتن متن توی HTML استفاده می‌کنیم
و خب تقریباً همه‌شو یاد گرفتیم
پس حالا وقتشه که یکم بریم جلوتر
بیاید دوباره همین فایل محتوا رو نگاه کنیم
می‌بینید که یه جایی نوشته: «اینم یک عکس من از کوه‌ها»
پس اینجا دیگه فقط متن نداریم
بلکه باید یک تصویر هم بذاریم
پس چطوری عکس اضافه کنیم؟
خیلی راحت برای عکس تگ مخصوص داریم
اسمش img هست کوتاه شده‌ی image
و این یکی از تگ‌های خودبسته‌ست
یعنی تگی نیست که شروع و پایان داشته باشه
بلکه همون اول خودش بسته میشه
پس اینطوری می‌نویسیم: Img و بعد یه اسلش آخرش
ولی این کافی نیست باید بهش بگیم چه عکسی رو بیاره
برای همین یه چیزی به اسم attribute داریم
و اینجا از attribute src استفاده می‌کنیم
src یعنی source یعنی منبع عکس
بعدش آدرس فایلی که می‌خوایم نشون بدیم رو می‌نویسیم
مثلاً: "mountainsjpg"
این یعنی برو همین عکس رو بیار
و حالا باید مطمئن باشیم که این فایل واقعاً توی پروژه‌مون هست
در غیر این صورت هیچی نشون داده نمیشه
پس بذارید همین فایل mountainsjpg رو اینجا اضافه کنم
و خب الان باید عکس توی صفحه نمایش داده بشه
بله دقیقاً اینجاست
و این همون تصویریه که توی فایل محتوایی گفته بود
پس حالا یاد گرفتید که چطور یه عکس به HTML اضافه کنید
یه چیز دیگه هم هست که باید بدونید
عکس‌ها همیشه باید یه متن جایگزین داشته باشن
یعنی همون attribute به اسم alt
این متن وقتی نشون داده میشه که عکس لود نشه
یا اینکه برای کسایی که از screen reader استفاده می‌کنن
اینطوری اونا می‌فهمن عکس چی هست
پس اینجا می‌نویسیم: Alt= "نمایی از کوه‌ها"
و حالا تگ‌مون هم کامل‌تر و درست‌تر شده
این یه عادت خیلی خوبه که همیشه از alt استفاده کنیم
پس این هم دیگه جزو چیزای پایه‌ای HTML محسوب میشه
و تا اینجا خیلی پیشرفت کردیم
الان می‌تونیم تیتر بنویسیم پاراگراف بسازیم
لیست مرتب و نامرتب درست کنیم
و حتی عکس هم به صفحه اضافه کنیم
و این یعنی تقریباً همه ابزارای لازم برای شروع رو داریم
پس بریم سراغ قدم‌های بعدی