Layout در HTML
در این مطلب از آموزش html و css می خواهیم به معرفی Layout در HTML بپردازیم. layout یا همان طرح بندی صفحات وب این قابلیت را به شما می دهد که به کمک عناصر layout بتوانید صفحات سایت خود را به درستی طرح بندی و چیدمان کرده و نمایش دهید. بنابراین لازم است که با ساختار و نحوه کدنویسی روش های مختلف Layout در HTML آشنا شوید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این موضوع پیدا کنید.
Layout در HTML چیست؟
Layout در HTML به معنای طرح بندی است یعنی صفحه وب شما چطور نمایش داده شود. در طراحی سایت، طرح و نوع تقسیم بندی و چیدمان عناصر در صفحات سایت، یکی از مهم ترین مراحل طراحی سایت می باشد. برای اینکه کاربران به نوع چیدمان و طراحی صفحات وب سایت شما جذب شوند، نیاز دارید تا وقت قابل توجهی را صرف طراحی Layout وب سایت خود کنید.
صفحات وب سایت ها معمولا محتوا را در ستون ها و سطرهای مختلفی نشان می دهند (مانند مجله ها و یا روزنامه ها). این روزها همه وب سایت های مدرن از چارچوب هایی بر اساس جاوا اسکریپت و CSS استفاده می کنند تا به وب سایت های پاسخگو و داینامیک تبدیل شوند، اما کار یک Layout در صفحه وب شما، صرفا استفاده از HTML و ویژگی های آن می باشد.
عناصر Layout در HTML
همانطور که گفتیم صفحات وب مانند صفحات روزنامه ها و مجلات، محتوای خود را در ستون ها و طرح های خاصی نمایش می دهند. با معرفی HTML5 مبحث semantics وارد دنیای طراحی وب شد و حالا عناصری هستند که semantic می باشند. semantic در لغت به معنی «معنایی» است و وقتی می گوییم عناصر semantic، منظورمان عناصری است که در HTML5 دیگر تنها یک عنصر نیستند، بلکه برای موتورهای جستجو معنی خاصی دارند. عناصر semantic ای که برای تعریف قسمت های مختلف یک صفحه استفاده می شوند از این قرار هستند:
- <header> مسئول تعریف قسمت header در سایت ها است.
- <nav> مسئول تعریف منوی سایت ها (نوار navigation) است.
- <section> مسئول تعریف یک قسمت در سایت شما است.
- <article> مسئول تعریف قسمتی مستقل است که دارای مقاله ای از سایت شما است.
- <aside> مسئول تعریف قسمت کناری و جانبی سایت است.
- <footer> مسئول تعریف قسمت footer در سایت ها است.
- <details> مسئول تعریف جزئیات بیشتر در صفحات وب است.
- <summary> مسئول تعریف یک heading برای عنصر <details> است.
برای درک بهتر عناصر Layout در HTML به تصویر زیر نگاه کنید:
کاربرد تگ header
برای ایجاد سربرگ صفحه با بخشی از صفحه از تگ header استفاده می شود. همانطور که گفتیم، می توان بخش هدر را با استفاده از تگ div هم زد، اما بهتر است به جای استفاده از تگ div از تگ header برای طرح بندی صفحات یا Layout در HTML استفاده کرد. زیرا درک بهتری برای موتورهای جستجو به وجود می آید. به مثال زیر دقت کنید:
<header id="site-header"> <h1>نام وب سایت</h1> <span>توضیح کوتاه وب سایت</span> </header>
در این مثال سربرگ یک صفحه وب را ایجاد می کنید.
کاربرد تگ footer
تگ footer برای ایجاد پاورقی یک صفحه وب، یا بخشی از یک صفحه وب استفاده می شود. یعنی چه بخواهید فوتر اصلی وبسایت را ایجاد کنید و چه بخواهید فوتر بخشی از یک وبسایت را ایجاد کنید، باید از تگ footer استفاده کنید. به مثال زیر از کاربرد فوتر در Layout در HTML دقت کنید:
<footer id="site-footer"> <p> CopyRight © 2022 </p> <a href="tell:09123456789"> شماره تماس: 09123456789 </a> </footer>
در این مثال یک فوتر اصلی برای وبسایت ایجاد کرده اید که در آن قانون کپی رایت و شماره تماس را نوشته اید.
نکته: اگر بخواهید به یک شماره تماس لینک دهید باید از پروتکل :tell استفاده کنید. کاربر با کلیک روی این لینک می تواند بدون شماره گیری تماس گیرد.
کاربرد تگ nav
تگ nav از ۳ حرف اول کلمه navigation گرفته شده است. از این تگ برای ایجاد منوها در Layout در HTML استفاده می شود. می توان از این تگ به دفعات متعددی در یک صفحه وب استفاده کرد. در مثال زیر برای ایجاد منو از تگ nav استفاده شده است.
<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 یعنی بخش، هرگاه بخواهید یک بخش جدید در وب سایت خود ایجاد کنید می توانید از این تگ در Layout در HTML استفاده کنید. در مثال زیر بخشی برای تبلیغات در صفحه وب در نظر گرفته شده است.
<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 بگذارید. همانطور که از نام این تگ پیداست، این تگ برای ایجاد یک مقاله به کار می رود. می توانید از این تگ برای نمایش پست های خود استفاده کنید.
<article> <div class="thumbnail"> <img src="img/thumb.png"> </div> <h4>عنوان مقاله</h4> <p>چکیده متن مقاله</p> </article>
کاربرد تگ aside
از تگ aside برای ایجاد سایدبار استفاده می شود. می توان از این تگ در Layout در HTML به دفعات متعددی در مکان های مختلف وب سایت استفاده کرد.
<aside class="sidebar"> <p>من یک پاراگراف درون سایدبار هستم</p> </aside>
بنابراین به جای اینکه برای تمام بخش های وب سایت خود از یک تگ استفاده کنید (مثل تگ div)، می توانید از تگ های مناسب برای هر بخش استفاده کنید تا صفحه وب شما از همه جهات بهینه تر باشد.
تکنیک های طرح بندی صفحات یا Layout در HTML
۵ روش مختلف برای ساخت یک طرح چند ستونی وجود دارد که هر کدام مزایا و معایب خود را دارند:
- جداول HTML
- خاصیت float در CSS
- فریمورک های CSS
- flexbox در CSS
- grid در CSS
- گردش نرمال
- مشخصه display
در ادامه مطلب به هر کدام از این تکنیک ها می پردازیم.
جداول HTML
ساده ترین و محبوب ترین راه برای ایجاد Layout در HTML، استفاده از تگ table می باشد. جدول ها در ردیف ها و ستون ها منظم می شوند که شما می توانید از این ردیف ها و ستون ها به هر طریقی که می خواهید استفاده کنید. در سال های بسیار قبل تر از معرفی HTML5، طراحان مجبور بودند برای طراحی سایت های چند ستونه از <table> یا همان جدول ها در HTML استفاده کنند. استفاده از <table> برای شکل دادن به صفحات وب کاری بسیار طاقت فرسا و غیر استاندارد است که کاملا منسوخ شده می باشد.
گرچه می توانید با جدول های HTML Layout های بسیار زیبایی طراحی کنید اما تگ table به عنوان ابزاری برای طرح بندی سایت ساخته نشده است. هدف از عنصر <table> نمایش داده های جدولی است. بنابراین بهتر است از جداول برای طرح بندی سایت استفاده نکنید. جداول، شلوغی زیادی را در کد شما ایجاد می کنند و تصور کنید که طراحی دوباره سایت بعد از چند ماه چقدر سخت خواهد بود. بنابراین از جداول برای طرح بندی سایت استفاده نکنید!
خاصیت float در CSS
معمولا رایج است که همه طرح بندی سایت با استفاده از خاصیت float در CSS انجام شود. استفاده از خاصیت float راحت است. فقط کافی است به خاطر داشته باشید که خاصیت float و clear چطور کار می کنند. از معایب این روش Layout در HTML می توان گفت که شناور کردن عناصر با استفاده از مشخصه Float به شناور شدن صفحه وابسته است که این ویژگی ممکن است به انعطاف پذیری صفحه شما آسیب بزند.
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
فریمورک های CSS
اگر بخواهید طرح بندی سایت خود یا همان Layout در HTML را سریع انجام دهید، می توانید از فریمورک هایی همچون Bootstrap برای این کار استفاده کنید. این فریمورک ها در حقیقت یک سری کلاس های آماده css و توابع آماده JavaScript را در اختیارتان قرار می دهند و دیگر نیازی به بازنویسی این کلاس ها نیست.
فریمورک Bulma
فریمورک Bulma یکی از محبوب ترین فریمورک های CSS است که قبلا با نام Scotch شناخته می شد. از مزیت های اصلی این فریمورک این است که از CSS خالص تشکیل شده است و هیچ کد جاوا اسکریپتی ندارد؛ بنابراین تنها باید یک فایل css را درون پروژه خود import کنید و نیازی به فایل های js نیست. همچنین این فریمورک بر اساس Flexbox طراحی شده است و بر پایه Sass می باشد. بنابراین تنها از کدهایی استفاده خواهید کرد که به آن ها نیاز داشته باشید. طراحی با این فریمورک کاملا واکنش گرا (responsive) بوده و اولویت خود را بر گوشی های موبایل قرار داده است.
فریمورک Bootstrap
بعید است که Bootstrap نیاز به معرفی داشته باشد! Bootstrap یکی از بزرگترین فریمورک های CSS در دنیا می باشد که تا امروز به نسخه چهارم خود رسیده است. این فریمورک، فریمورک پیش فرض اکثر توسعه دهندگان وب است و بر اساس SASS و LESS ساخته شده است. می توان به صورت خلاصه گفت که Bootstrap بزرگترین فریمورک CSS محسوب می شود.
فریمورک های بسیار دیگری نیز وجود دارند اما شما نمی توانید تمام آن ها را بررسی کنید. این دو مورد از موارد مشهور در کنار فریمورک Foundation هستند.
flexbox در CSS
Flexbox یک مدل جدید برای طرح بندی سایت در CSS است. استفاده از flexbox در Layout در HTML این تضمین را می دهد که عناصر، رفتاری قابل پیش بینی برای زمانی که سایت در سایزهای مختلف صفحه نمایش و نمایشگرهای دستگاه های مختلف قرار می گیرد، داشته باشند. از معایب این روش این است که در اینترنت اکسپلورر 10 و نسخه های قدیمی تر کار نمی کند.
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
Grid در CSS
ماژول Grid در CSS به شما اجازه می دهد تا طرحی داشته باشید که بر اساس یک Grid (به معنی «شبکه توری» یا «مشبک») باشد. به تصویر زیر نگاه کنید:
در این تصویر دو صفحه وب را می بینید. صفحه سمت راست بر اساس Grid طراحی شده است و همانطور که گفتیم Grid به شکل یک شبکه توری مانند است و خانه هایی را که می بینید، شکل می دهد. حالا می توانید عناصر خود را با دقت فراوان داخل این خانه ها قرار دهید. اگر از Grid در Layout در HTML استفاده کنید دیگر نیازی به استفاده از float و مدیریت فضای پیشرفته نخواهید داشت.
خصوصیت Grid که به صورت پیش فرض در CSS وجود دارد در مرورگر Internet Explorer 15 و قبل تر کار نمی کند& اما Grid هایی وجود دارند که توسط توسعه دهندگان به عنوان کدهای جداگانه ساخته شده اند. شما می توانید با دانلود کردن این نوع Grid ها از آن ها در هر مرورگری استفاده کنید. به طور مثال یکی از کد های Grid معروف در اینترنت simplegrid نام دارد که می توانید به مراجعه به سایت آن، کد CSS اش را دانلود کنید.
گردش نرمال
گردش نرمال به شیوه قرارگیری پیش فرض اجزای صفحه HTML از سوی مرورگر در صورت عدم وجود layout برای کنترل صفحه گفته میشود. به مثال Layout در HTML زیر توجه کنید:
<p>I love my cat.</p> <ul> <li>Buy cat food</li> <li>Exercise</li> <li>Cheer up friend</li> </ul> <p>The end!</p>
به صورت پیش فرض، مرورگر این کد را به صورت زیر نمایش خواهد داد:
توجه داشته باشید که HTML دقیقا همان طور که در سورس کد بود نمایش یافته است و عناصر روی همدیگر قرار گرفته اند. ابتدا پاراگراف اول و سپس لیست نامرتب و در ادامه پاراگراف دوم آمده است. این عناصر که یکی پس از دیگری در صفحه نمایش داده می شوند، به عنوان «عناصر بلوکی» (Block Elements) خوانده می شوند. در سوی دیگر «عناصر درونخطی» (Inline Elements) قرار دارند که همانند کلمات در یک پاراگراف، در کنار هم قرار می گیرند.
نکته: جهت قرارگیری محتوای عناصر بلوکی به صورت «جهت بلوک» (Block Direction) توصیف میشود. جهت بلوک در زبان هایی مانند انگلیسی که روش نگارش افقی دارند، به صورت عمودی است. اما در زبان هایی مانند ژاپنی که شیوه نگارش عمودی دارند، جهت بلوک به صورت افقی است. «جهت درونخطی» (Inline Direction) متناظر نیز به توصیف شیوه قرارگیری محتوای درون خطی گفته می شود.
زمانی که از CSS برای ایجاد یک Layout در HTML استفاده می کنید، عناصر دیگر دارای گردش نرمال نیستند، اما گردش نرمال برای اغلب عناصر صفحه دقیقا مطابق نیاز شما خواهد بود. به همین جهت است که کار خود را با درک مناسبی از سند HTML خوش-ترکیب آغاز کنید. زیرا به این ترتیب می توانید به جای جنگیدن با روش طرح بندی پیشفرض، آن را به خدمت بگیرید.
متدهایی که می توانند شیوه قرارگیری عناصر را در CSS تغییر دهند، به شرح زیر هستند:
مشخصه display
مقادیر استاندارد از قبیل block ،inline یا inline-block می توانند شیوه رفتار عناصر را در گردش نرمال تغییر دهند. همچنین متدهای Layout در HTML کلی را دارید که از طریق یک مقدار display برای مثال برای CSS Grid و Flexbox فعال می شوند.
Floats
اعمال یک مقدار Float مانند left ممکن است موجب شود که عناصر سطح بلوکی در راستای یک سمت عنصر قرار گیرند. این وضعیت را گاهی اوقات در چیدمان صفحه های مجلات در زمان حروف چینی کلمات پیرامون تصاویر می بینید.
مشخصه position
این مشخصه به ما امکان می دهد که قرارگیری کادرها را درون کادرهای دیگر به دقت کنترل کنید. موقعیت یابی static در گردش نرمال حالت پیشفرض دارد، اما می توانید کاری کنید که عناصر با استفاده از مقادیر دیگر به شیوه متفاوتی قرار گیرند. برای نمونه همواره در گوشه بالا-چپ ویوپورت مرورگر قرار گیرند.
layout جدول
این قابلیت ها برای استایل بندی به بخشهای جدول HTML طراحی شده اند و می توانند برای عناصر غیر جدولی نیز با استفاده از display: table و مشخصه های مرتبط استفاده شوند.
layout چندستونی
مشخصه های layout چند ستونی می توانند تقسیم محتوای یک بلوک به چند ستون شوند. این وضعیتی است که معمولا در روزنامهها می بینید.
مشخصه display
متدهای اصلی برای دست یابی به layout صفحه در CSS شامل همه مقادیر ممکن برای مشخصه display هستند. این مشخصه به شما امکان می دهد که روش پیش فرض نمایش موارد مختلف را تغییر دهید. همه مواردی که در گردش نرمال قرار دارند، این مشخصه display را ارائه می کنند و به عنوان روش پیشفرض تعیین رفتار عناصر مورد استفاده قرار می گیرد. برای نمونه این واقعیت که پاراگراف ها در زبان انگلیسی زیر همدیگر نمایش می یابند ناشی از این واقعیت است که با استفاده از مشخصه display: block تنظیم میشوند.
اگر یک لینک پیرامون متنی درون پاراگراف ایجاد کنید، این لینک به همراه بقیه متن به صورت درون خطی خواهد بود و به خط جدیدی نمی رود. دلیل این امر آن است که عنصر <a> به صورت پیش فرض دارای مشخصه display: inline است. البته این رفتار نمایش پیش فرض را می توان تغییر داد. برای نمونه عنصر <li> به صورت پیش فرض دارای مشخصه display: block است، یعنی آیتم های لیست زیر همدیگر در یک سند به زبان انگلیسی قرار می گیرند.
اگر مقدار این مشخصه را به inline تغییر دهید، این موارد در کنار همدیگر نمایش می یابند، یعنی مانند کلمات یک جمله قرار خواهند گرفت. این واقعیت که می توانید مقدار display را روی هر عنصر تغییر دهید، به این معنی است که می توانید عناصر HTML را برای مفهوم معنا شناختی شان انتخاب کنید و دیگر لازم نیست در مورد طرز کار آن ها نگران باشید. شما فقط شیوه نمایش آن ها را تغییر میدهید.
علاوه بر این که می توانید ارائه پیش فرض را با تبدیل از حالت بلوکی به درون خطی عوض کنید، برخی متدهای لیآوت بزرگ تر نیز وجود دارند که با تعیین مقدار display آغاز می شوند. با این حال، در زمان استفاده از این متدها احتمالا باید برخی مشخصه های اضافی را فراخوانی کنید. دو مقدار display: flex و display: grid برای بررسی Layout در HTML مهم هستند.
سخن پایانی
در این مطلب به طور کامل درباره صفحه بندی صفحات وب و یا Layout در HTML و نحوه بکارگیری آن در یک صفحه وب به همراه چندین مثال صحبت کرده ایم. با مطالعه این مطلب تسلط کافی در روش های مختلف صفحه بندی خواهید داشت و می توانید صفحات وب خود را با کمک این عناصر به درستی صفحه بندی کنید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
دیدگاهتان را بنویسید