معرفی عناصر layout در HTML
در دروس قبلی درمورد تگ div و کاربرد آن صحبت کردیم. عناصر layout دقیقا همان کاربرد تگ div را دارند. یعنی برای بخش بندی صفحه وب استفاده می‌شوند، اما باید از آنها در موقعیت‌های مناسب استفاده کنیم.
در زیر لیستی از عناصر layout را آورده‌ایم که در این جلسه درمورد آنها صحبت خواهیم کرد:
- header
- footer
- nav
- section
- article
- aside
کاربرد تگ header
برای ایجاد سربرگ صفحه با بخشی از صفحه از تگ header استفاده می‌شود. همانطور که گفتیم، میتوان بخش هدر را با استفاده از تگ div هم زد، اما بهتر است بجای استفاده از تگ div از تگ header استفاده کرد. زیرا درک بهتری برای موتور‌های جستجو و… به وجود می‌آید.
به مثال زیر دقت کنید:
1 2 3 4 | <header id="site-header"> <h1>نام وبسایت</h1> <span>توضیح کوتاه وبسایت</span> </header> |
در این مثال سربرگ یک صفحه وب را ایجاد کرده‌ایم.
کاربرد تگ footer
تگ footer برای ایجاد پابرگ یک صفحه وب، یا بخشی از یک صفحه وب استفاده می‌شود. یعنی چه بخواهیم فوتر اصلی وبسایت را ایجاد کنیم و چه بخواهیم فوتر بخشی از یک وبسایت را ایجاد کنیم باید از تگ footer استفاده کنیم.
به مثال زیر دقت کنید:
1 2 3 4 | <footer id="site-footer"> <p> CopyRight © 2020 </p> <a href="tell:09123456789"> شماره تماس: 09123456789 </a> </footer> |
در این مثال یک فوتر اصلی برای وبسایت ایجاد کرده‌ایم که در آن قانون کپی رایت و شماره تماس را نوشته‌ایم.
نکته: اگر بخواهیم به یک شماره تماس لینک دهیم باید از پروتکل tell: استفاده کنیم. کاربر با کلیک روی این لینک می‌تواند بدون شماره گیری تماس بگیرد.
کاربرد تگ nav
تگ nav از ۳ حرف اول کلمه navigation گرفته شده است. از این تگ برای ایجاد منو‌ها استفاده می‌شود. میتوان از این تگ به دفعات متعددی در یک صفحه وب استفاده کرد. در مثال زیر برای ایجاد منو از تگ nav استفاده شده است.
1 2 3 4 5 6 7 8 | <nav> <ul> <li><a href="http://google.com/">گوگل</a></li> <li><a href="http://yahoo.com/">یاهو</a></li> <li><a href="http://bing.com/">بینگ</a></li> <li><a href="http://adminesite.com/">ادمین سایت</a></li> </ul> </nav> |
کاربرد تگ section
section یعنی بخش، هرگاه بخواهید یک بخش جدید در وبسایت خود ایجاد کنید می‌توانید از این تگ استفاده کنید. در مثال زیر بخشی برای تبلیغات در صفحه وب خود در نظر گرفته‌ایم.
1 2 3 4 5 | <section id="ads"> <a href="http://google.com/"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> </a> </section> |
کاربرد تگ article
پست‌های خود را درون تگ article بگذارید! همانطور که از نام این تگ پیداست، این تگ برای ایجاد یک مقاله بکار می‌رود. می‌توانید از این تگ برای نمایش پست‌های خود استفاده کنید.
1 2 3 4 5 6 7 | <article> <div class="thumbnail"> <img src="img/thumb.png"> </div> <h4>عنوان مقاله</h4> <p>چکیده متن مقاله</p> </article> |
کاربرد تگ aside
از تگ aside برای ایجاد سایدبار استفاده می‌شود. میتوان از این تگ به دفعات متعددی در مکان‌های مختلف وبسایت استفاده کرد.
1 2 3 | <aside class="sidebar"> <p>من یک پاراگراف درون سایدبار هستم</p> </aside> |
در این درس یاد گرفتیم بجای اینکه برای تمام بخش‌های وبسایت خود از یک تگ استفاده کنیم (مثل تگ div)، از تگ‌های مناسب برای هر بخش استفاده کنیم تا صفحه وب ما از همه جهات بهینه‌تر باشد.
سلام، تویه قسمته فیلتر میشه افکت های خاصی به مثلا عکسمون داد، خب منم یک عکس رو تویه یک دیو در قسمت background-image اوردم و بهش بلور دادم، و داخل اون دیو هم یک دیو دیگه قرار دادم اما اون بلوری که به دیو پدر داده بودم رویه دیو داخلیش هم تاثیر گذاشت، کاری میشه کرد که فقط رویه دیو پدر تاثیر بذاره و به اجزای داخلیش کاری نداشته باشه؟
سلام علیرضا جان.
وقتی به یک باکس افکتی میدی اون افکت به محتوای درون اون باکس (یعنی کل کدهای داخلش) هم اعمال میشه.
پس برای اینکار دیگه نمیتونی باکس موردنظرت رو درون باکسی که بهش افکت بلور دادی بزاری. مجبوری این دوتا باکس رو درکنار هم قرار بدی و از ویژگی position: absolute; برای لایه بندی این دوتا باکس استفاده کنی. برای یادگیری ویژگی position می‌تونی به آموزش “کار با ویژگی Position” مراجعه کنی.
سلام ممنون از محتوای مفید و ارزشمند.
من نمیدونم کی از ویژگی آیدی استفاده باید کرد و کی از ویژگی کلاس.
البته در درس های قبل مطالب رو خوندم ولی متوجه نشدم.
مثلا در همین درس، چرا برای تگ aside از class استفاده شد ولی برای تگ header و یا footer از id استفاده شد؟
در بسیاری ار مواقع خیلی تفاوتی نداره. تفاوت اصلی در اولیت‌هایی هستش که ایجاد میکنن. برای مثال استایلی که با ایدی به عنصر داده شده باشه اولویت داره به استایلی که با کلاس داده شده باشه.
از ای دی فقط یباراستفاده میشه یعنی نمیتونی به تعداد مکررمثل کلاس ازش استفاده کنی برای همین در هدر فوتر ونویگیشن که فقط یبار در سایت کاربرد داره از ای دی استفاده میکنی و از کلاس برای ارتیکل سکشن که به تعداد زیاد تو وباستفاده میکنی میزاری
سلام
وقتی هدر با این روش میزنم یا اصلا کدهای نمومه شما رو کپی پیست میکنم از سمت چپ و راست قسمتی خالیه و جز هدر نیست
با بک گراند رنگی هدر مشخص میشه
دقیقا 8پیکسل که با مارجین چپ و راست 8- پیکسل کاملا به دو طرف میجسبه
علتش چیه؟
چجوری حل میشه بدون مارجین؟
چرا هدر تمام عرض رو نمیگیره؟
سلام به صورت پیش فرض که هدر تمام عرض صفحه رو میگیره مگر اینکه به خود تگ یا تگ‌های والد max-width یا margin و padding داده باشید.
میتونید به تگ body , header یه width صدرصد و پدینگ و مارجین صفر بدید.
سلام
کلا بعضی از مرورگر ها مارجین دارن به صورت پیشفرض برای حل این مشکل میتونید تو فایل css متصل شده به اون صفحتون در بالای صفحه این کد رو قرار بدید :
*{
margin:0px
padding:0px
}
فکر کنم مشکلتون حل میشه
سلام.من هم مشکل ایشون رو دارم
مارجین و پدینگ ۰ هم دادم و width 100% هم دادم.اما مسکلم حل نشد.هدر از بالا فیکس نمیشه و نمیچسبه به صفحه و هرکاری کردم راهی پیدا نکردم
سلام وقت بخیر
خود تگ های body و html احتمالا margin یا padding دارن باید این ویژگیه هارو با مقدار صفر براشون تنظیم کنید
اگر اینکارو کردید اما همچنان از هدر از بالا نچسبید
به خود هدر padding بدید. مهم نیست چه اندازه‌ای.
موفق باشید
سلام. لطفا یک مطلب بنویسید در مورد اینکه هر وبسایت از چه بخش هایی تشکیلی شده و برای هر بخش باید چه layout بزاریم.
سلام سینا جان
ممنون از پیشنهاد شما. این مطلب دقیقا برای همین‌کاره. سعی می‌کنیم با استفاده از چندتا تصویر مثال‌هارو واضح‌تر کنیم تا بیشتر قابل درک بشه.
سلام وقتتون بخیر و ممنون از آموزش خوبتون /لطفا اجرا شده ی هر قسمت را در مرور گر در بخش آموزش قرار بدهید برای فهم بهتر دانشجو
سلام دوست عزیز. قسمت‌هایی که خروجی مشخصی دارند در هر آموزش سعی کردیم اونها رو نشون بدیم اما این آموزش از بخش HTML هستش و بسیاری از تگ‌های HTML خروجی خیلی خاصی ندارند فقط باید دانشجو یاد بگیره که کجا از چه تگی استفاده کنه. وگرنه خروجی اینها همون نوشته درونش هستش و تفاوتی زیادی در خروجی ندارند.
از آنجایی که خروجی گرفتن از HTML خیلی ساده هستش پیشنهاد میکنم که هر بخش رو در یک ادیتور کپی کنید و در مرورگر اجرا کنید تا بهتر متوجه جزییات هر کد بشید.