میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

چیدمان عناصر در Html

چیدمان عناصر در Html چیست و چگونه طراحی می شود ؟

با سلام به خدمت دوستان عزیز و گرامی در این بخش از آموزش قصد داریم  مطالبی در مورد چیدمان عناصر در Html مباحثی را عنوان کنیم باشد باشد که مفید مواقع شود .
HTML دارای چندین تگ معنایی است که قسمتهای مختلف یک صفحه وب را تعریف می کند.
 nav و  section و article و aside و footer و details و summary و header
هر یک از این تگ ها قسمت ها و بخش های مختلف صفحه را بیان می کنند.
نکته : چیدمان عناصر در HTML علاوه بر راحتی طراحی و راحتی برای بازنگری کدها در آینده باعث افزایش امتیاز سئو نیز می شود .

 

چیدمان عناصر در Html
چیدمان عناصر در Html
تگ <header>  سرصفحه یک سند یا یک بخش را تعریف می کند
تگ <nav>  مجموعه ای از پیوندهای شناور را تعریف می کند
تگ <section>  بخشی را در یک سند تعریف می کند
تگ <article>  محتوای مستقل و مستقل را تعریف می کند
تگ <aside>  محتوای جدا از محتوا را تعریف می کند (مانند نوار کناری)
تگ <footer>  پانویس برای یک سند یا یک بخش را تعریف می کند
تگ <details>  جزئیات بیشتری را تعریف می کند که کاربر می تواند در صورت تقاضا باز و بسته کند
تگ <summary>  عنوانی را برای عنصر <details> تعریف می کند

 

 

تکنیک های چیدمان عناصر در HTML

چهار روش مختلف برای ایجاد پوسته های چندگانه وجود دارد. هر راه دارای مزایا و معایب است:

HTML tables

CSS float property

CSS framework

CSS flexbox

 

کدام یک را انتخاب کنید؟

جداول HTML

تگ <table> برای چیدمان  پوسته طراحی نشده است . هدف تگ <table>  برای نمایش داده های جدولی است. بنابراین، از جداول برای طرح بندی صفحه استفاده نکنید آنها توده ای از کد  را به شما نشان می دهند. و تصور کنید چقدر سخت است که پس از گذشت چند ماه از سایتتان دوباره طراحی کنید.

نکته: از جداول برای طرح بندی صفحه استفاده نکنید.

چارچوب CSS

اگر می خواهید طرح خود را سریع ایجاد کنید، می توانید از یک چارچوب مانند W3.CSS یا Bootstrap استفاده کنید.

شناورهای CSS

شایع است که تمام پوسته های وب با استفاده از ویژگی شناور CSS انجام شود. شناور برای یادگیری آسان است – شما فقط نیاز دارید که  به یاد داشته باشید  خواص شناور چگونه  کار می کنند.

معایب: عناصر شناور به جریان سند گره خورده است، که ممکن است به انعطاف پذیری آسیب برساند.

 

CSS Flexbox

Flexbox یک حالت طرح جدید در CSS3 است.

استفاده از flexbox تضمین می کند که  زمانی که طرح بندی صفحه باید به اندازه صفحه نمایش های مختلف در دستگاههای مختلف نمایش داده شود عناصر به صورت قابل پیش بینی رفتار می کنند و دستگاههای مختلف صفحه نمایش را در خود جای می دهند.  معایب: در IE10 و قبل از آن کار نمی کند.

 

امیدواریم این بخش از آموزش در مورد چیدمان عناصر در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟