خب، ما قبلاً چندتا از
مهم‌ترین المنت‌های HTML رو یاد گرفتیم
و همین حالا هم می‌تونیم یه صفحه خوب بسازیم
با یه سری قابلیت‌های جالب.
اما حالا وقتشه که واقعاً یه ساختار اضافه کنیم
به داکیومنت و به المنت‌های خودمون.
پس بیاید یاد بگیریم
چندتا المنت جدید HTML5 رو برای این کار.
وقتی گفتم صفحه یه مقدار ساختار کم داره
منظورم این بود که همه این المنت‌ها
که توی داکیومنت گذاشتیم،
همه‌شون فقط
یکی پشت سر هم ظاهر میشن، درسته؟
واقعاً از همدیگه متمایز نیستن
و مخصوصاً به‌طور منطقی گروه‌بندی نشدن.
پس بیاید اینو تغییر بدیم
با ایجاد یه سری المنت کانتینر
که بتونن این المنت‌ها رو کنار هم جمع کنن.
خب، یکی از چیزایی که اول به ذهن میاد
اینا لینک‌ها هستن.
ما کلی لینک اینجا داریم
و این تقریباً شبیه یه ناوبری صفحه به نظر میاد، درسته؟
ناوبری صفحه معمولاً همون چیزیه که می‌خوایم
وقتی چندتا لینک بالای صفحه داریم.
پس کاری که می‌تونیم بکنیم اینه که یه المنت خاص مشخص کنیم
و همه لینک‌ها رو داخل اون قرار بدیم.
و اون المنت چیزی نیست جز nav.
یعنی nav، که مخفف navigation هست.
به این صورت.
و حالا اینا باید یه مقدار تورفتگی داشته باشن
یا حداقل بهتره داشته باشن.
وقتی ذخیره می‌کنم
prettier خودش خودکار فرمتش می‌کنه.
و حالا این چهار تا لینک قشنگ کنار هم
توی این کانتینر جمع شدن.
یعنی داخل این المنت والد که همون navigation هست.
اما نکته اینه که وقتی صفحه رو آپدیت کنیم
ظاهرش دقیقاً همونه.
یعنی تنها چیزی که اتفاق افتاده اینه
که یه جور جعبه نامرئی ساخته شده
که حالا این المنت‌ها رو توی خودش نگه داشته.
پس خود المنت کاری انجام نمی‌ده.
فقط این المنت‌ها رو کنار هم جمع می‌کنه.
می‌دونم که الان
خیلی منطقی یا بدیهی به نظر نمیاد که این کارو بکنیم
ولی باور کنید وقتی به بخشی برسیم
که می‌خوایم لایه‌بندی درست کنیم
و حتی توی بخش بعدی که فقط CSS هست،
خیلی مهم میشه که همه بخش‌های مختلف
داخل کانتینر خودشون باشن.
باشن.
خیلی خب.
باشه.
خب، وقتی به صفحه نگاه می‌کنیم،
این الان همون navigation هست
و این یکی هم heading ماست.
بعد از اون، همه این بخش رو داریم
که در واقع پست ماست.
یعنی همون بلاگ‌پست ما.
پس این یه جورایی با بخش بالایی فرق داره.
یعنی همه این دوباره بلاگ‌پست حساب میشه
و این بالایی مثل بخش بالای صفحه ماست.
پس کاری که می‌تونیم بکنیم اینه که navigation
و heading رو توی یه المنت header بذاریم.
خب، بیاید این کارو بکنیم.
اینم یکی دیگه از المنت‌های HTML5 هست
که اسمش header هست.
و header در اصل به معنی
بخش بالای یه داکیومنت وب هست
یا می‌تونه به معنی بخش بالای یه واحد کوچیک‌تر هم باشه
که در چند لحظه دیگه خواهیم دید.
به هر حال،
این فقط یه مقدمه‌ایه روی المنت‌های HTML5.
بعداً خیلی بیشتر ازشون استفاده می‌کنیم
و بیشتر هم توضیح میدم
وقتی پروژه بزرگ وب‌سایتمون رو بسازیم
کمی بعدتر توی این دوره.
خب، دوباره هیچ تغییری از نظر ظاهری ایجاد نمیشه
ولی الان به مرورگر گفتیم که، خب
همه این بخش هدر صفحه وب ماست،
یعنی همون بخش بالایی صفحه.
و همه این بخش، همونطور که قبلاً گفتم
از اینجا به بعد، بخش اصلی صفحه‌ست
که توی این حالت همون بلاگ‌پست ماست.
و یه المنت خیلی رایج که می‌تونیم برای
بلاگ‌پست استفاده کنیم المنت article هست.
پس اینم یه المنت کانتینر دیگه‌ست
ولی این بار مخصوص یه مقاله یا همون article.
و article توی این زمینه فقط به معنی یه متن نوشته‌شده نیست،
بلکه می‌تونه باشه
چیزای دیگه از دنیای واقعی.
مثلاً یه کامپیوتر یه article حساب میشه
یا یه خودکار یا یه گوشی.
همه اینا article هستن
و اگه بخوایم یه کامپیوتر رو توی HTML نمایش بدیم،
article هم می‌تونه المنت خوبی براش باشه.
خب، و حالا در اصل
body ما فقط دو تا فرزند مستقیم داره.
ما فقط یه header داریم و یه article.
که اگه به صفحه نگاه کنیم واقعاً همینو داریم.
پس ما یه header داریم
و بعدش هم تمام اون بخش دیگه،
که در واقع میشه article ما.
یعنی الان همه‌چی خیلی مرتب داخل جعبه‌ی خودش قرار گرفته.
حالا ممکنه از خودتون بپرسید:
خب اگه این جعبه‌ها (containerها)
هیچ کاری به‌صورت مستقیم انجام نمی‌دن،
پس چرا همه‌شونو nav یا header یا article صدا نزنیم؟
یعنی همه رو nav بذاریم
یا همه رو header یا article کنیم.
مثلاً این یکی هم می‌تونست article باشه
و توی صفحه هیچ تغییری نمی‌کرد، درسته؟
اما ما این کار رو نمی‌کنیم،
به خاطر چیزی به اسم Semantic HTML.
و من توی ویدیوی بعدی خیلی کوتاه توضیح میدم
که این اصطلاح دقیقاً یعنی چی.
ولی الان که جلوتر بریم،
می‌تونیم یه سری گروه‌بندی دیگه هم داخل article داشته باشیم.
به این قسمت نگاه کنید: ما یه بخش بالایی داریم
از همین article.
یعنی همون heading، اسم نویسنده،
و همین‌طور عکس.
یعنی این بخش میشه قسمت بالایی مقاله ما.
و بعدش اینجا محتوای اصلی قرار داره، درسته؟
و دوباره دقت کنید من گفتم
این قسمت مثل بخش بالایی مقاله‌ست.
همونطور که اینجا بخش بالایی کل صفحه‌ست.
کل صفحه وب.
یعنی اینجا هم دوباره باید از header استفاده کنیم
تا بتونیم اون رو مشخص کنیم.
و وقتی میگم مشخص کردن یا mark up،
یعنی توصیف بهتر محتوا.
پس داخل article هم می‌خوایم یه header داشته باشیم.
و داخل اون header باید این heading باشه،
این عکس نویسنده،
اسم نویسنده،
و بعد هم این تصویر اینجا.
خب، بعدش هم ببندیمش.
حالا همه‌ی اینا طبیعتاً یه مقدار سلیقه‌ای هم هست.
یعنی چیزی که برای من خیلی منطقیه،
ممکنه برای یه توسعه‌دهنده دیگه
اونقدرا منطقی نباشه.
ولی فکر می‌کنم کاری که تا اینجا کردیم
برای همه منطقیه و کاملاً قابل درکه.
و خب معنی هم میده.
پس دوباره اینجا بخش header مقاله‌ست.
و با این کار
یه مقدار ساختار بیشتری به مقاله‌مون دادیم.
یعنی الان یه header داریم
و بعد از اون بقیه محتوا میاد.
خب، تا اینجا خیلی قشنگ شده.
ولی اگه نگاهی به دموی صفحه بندازیم،
می‌بینیم یه چیزی هنوز کمه.
در واقع چندتا چیز هنوز نیست.
مثلاً پست‌های مرتبط رو نداریم
که اون رو بعداً اضافه می‌کنیم.
ولی یه بخش دیگه هم اینجاست پایین صفحه.
یعنی همین متن کپی‌رایت.
و اینجور محتواهایی که آخر صفحه میان
معمولاً همون footer یا پانوشت نامیده می‌شن.
و خب همونطور که حدس می‌زنید،
برای اونم یه المنت مخصوص توی HTML5 داریم.
و اون چیزی نیست جز footer.
پس اینجا footer رو می‌ذاریم،
و خب باید ببندیمش هم.
به این شکل.
و حالا باید متن کپی‌رایت رو بیاریم اینجا.
اما اینجا موجود نیست،
پس باید دستی خودمون بنویسیمش.
خب حالا دو راه داریم:
می‌تونیم متن رو داخل یه پاراگراف بذاریم
و بعد اون رو توی footer قرار بدیم.
یا اینکه مستقیم متن رو همین‌جا توی footer بنویسیم.
خب من همین کار دوم رو انجام میدم.
چون اینجا دیگه نیازی نیست یه پاراگراف جدید درست کنیم.
چون این متن قراره تنها محتوای footer باشه.
پس دیگه لزومی نداره.
خب حالا کلمه‌ی copyright رو می‌نویسیم.
و اینجا همون علامت کپی‌رایت معروف رو می‌بینید.
که مطمئنم شما هم می‌شناسید.
ولی خب چطور می‌تونیم اون رو توی HTML بذاریم؟
این چیزی هست به اسم HTML Entity.
یعنی یه موضوع جدید.
بذارید سریع نشونتون بدم.
اول یه & می‌نویسیم.
و بعد، چون من اسم کاراکتر رو می‌دونم،
کافیه شروع کنم به نوشتن کلمه‌ی "copy".
و بعد می‌تونم این گزینه رو انتخاب کنم
یا اینکه مستقیم یه ; بذارم آخرش.
و خب کارمون تمومه.
یعنی این HTML Entity اینجا
نماینده همین علامت C هست.
و خب جدول‌های کامل HTML Entity هم وجود دارن.
که من یکی از اون‌ها رو توی صفحه منابعم گذاشتم.
فکر کنم هنوز اون صفحه منابع رو بهتون نگفتم،
ولی لینکش توی اولین درس متنی همون بخش اول دوره هست.
و همین‌طور توی ریپازیتوری گیت‌هابی که اوایل نشونتون دادم.
اونجا لینکی پیدا می‌کنید
که کل این جدول‌های HTML Entity رو داره.
به هر حال، بعداً توی دوره عالی ✨ اینجا بخش پایانی از 201 تا 222 با همون فرمت SRT (زمان + ترجمه خط‌به‌خط): ________________________________________
باز هم با چندتا از این HTML Entity ها کار می‌کنیم.
خب، پس علامت کپی‌رایت رو گذاشتیم.
حالا بعدش باید اسم سایت یا شرکت رو بیاریم.
پس اینجا می‌نویسم “Jonas Schmedtmann”.
و خب همین شد متن کپی‌رایت ما.
بذارید صفحه رو ریفرش کنم،
و می‌بینید که اون پایین اضافه شد.
این هم از پانوشت یا footer.
پس تا الان همه بخش‌های اصلی یه وب‌سایت رو داریم.
یه هدر داریم بالا،
یه بخش کناری داریم (همون aside)،
یه بخش اصلی (article)،
و همین‌طور یه پانوشت (footer).
همه اینا با هم ساختار اصلی سایت رو شکل میدن.
حالا شما تقریباً همه المنت‌های اصلی HTML5 رو دیدید.
و همونطور که دیدید، هیچ‌کدوم کار خاصی روی صفحه انجام نمی‌دن.
ولی وقتی با CSS ترکیب بشن،
اون موقع قدرت واقعی‌شون معلوم میشه.
و اون وقته که می‌تونیم ظاهر صفحه رو عوض کنیم.
فعلاً فقط ساختاردهی مهمه.
پس الان ساختار اصلی صفحه‌ی نمونه ما کامل شده.
و آماده‌ایم که وارد مرحله‌ی بعدی بشیم.