آموزش ایجاد لایه بندی (Layout) و ساختاردهی در HTML

چرا ساختاردهی مناسب در HTML اهمیت دارد؟

HTML یا HyperText Markup Language ابزاری است که ساختار اصلی صفحات  و طراحی سایت را چیدمان و طراحی می‌کند. فونداسیون و اسکلت اصلی وبسایت با این زبان نشانه‌گذاری پی‌ریزی می‌شود. زبان HTMl این امکان را به شما می‌دهد تا با استفاده از تگ ها، ساختار و ساختمان کلی صفحه وب خود را تعریف نمایید. همان‌طور که تا امروز دیده‌اید اغلب محتوای صفحات را در چندین ستون نمایش می‌دهند(مانند یک روزنامه یا مجله). در این حالت ستون‌ها در کنار یکدیگر هستند و محتوای صفحه داخل این ستون قرار خواهد گرفت.

در نسخه به‌روزرسانی HTML5 عناصر جدیدی برای تعریف بخش‌های مختلف صفحات وب وجود دارد که شامل:

header: یک هدر برای صفحه یا یک section تعریف نمایید.

nav : برای تعریف یک نگه‌دارنده جهت لینک‌های ناوبری یاد می‌شود.

section : تعریف یک بخش جدید در صفحه

article :  یک نگهدارنده خود مختار برای تعریف یک مقاله مستقل

aside   :  تعریف محتوا در کنار محتوای دیگر (مانند سایدبار)

Footer : تعریف یک فوتر برای یک صفحه یا بخش

details : تعریف بخش جزییات بیشتر

summary : تعریف یک heading برای تگ details، که با رعایت این موارد می‌توانید سایتی با ساختار بسیار مناسب داشته باشید.

المان‌های div و span و ساختاردهی و استایل‌دهی | آموزش ایجاد لایه بندی (Layout)

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

المان تگ Div یا division بخش‌های مختلف صفحه را به طور جداگانه طراحی می‌کند و این امکان را فراهم می‌کند که عناصری که در  Div قرار داده‌اید با زبان CSS سبک و استایل پیدا کند. برای مثال: قسمت پایین هر سایت (Footer) در کدهای HTML یک Div محسوب می‌شوند که آیکون‌ها، متن و سایر المان‌هایی که در فوتر می‌بینید در آن دیو قرار می‌گیرند.

با کمک Div عناصر قسمتی از صفحه که به دلخواه شما چیده شده‌اند، استایل می‌گیرند. همچنین تمامی بخش‌های یک صفحه مانند تصاویر، متن، دکمه و غیره با استفاده از این تگ قابل جداسازی هستند.

به کمک تگ span نیز می توایند به هر عنصر مستقل، بدون تغییر دادن سایر عناصر استایل بدهید. به‌عنوان‌مثال می‌توانید این تگ را برای یک پاراگراف  در کدهای خود استفاده کرده و استایل آن را تغییر دهید بدون اینکه سایر متن‌ها تغییری کنند.

تفاوت تگ Div با Span چیست ؟

تگ div و تگ span در کنار CSS کاربرد زیادی برای وب‌سایت دارند و در موارد زیادی بسیار کمک‌حال طراحان هستند. در ادامه به تفاوت تگ Div و Span می‌پردازیم:

    تگ  Div

تگ Div یک المان بلاکی می‌باشد.

برای استایل دادن به کادرهای موجود در صفحه که دارای المان‌های مختلفی ، به کار می‌رود.

    تگ  Span  

این تگ برای استایل دادن به عناصر صفحه کاربرد دارد.

تگ Span از نمونه های المان درون خطی می باشد.

استفاده از تگ‌های هدر برای تشخیص و تقسیم‌بندی اجزاء وب‌سایت

توجه کنید که در HTML4 و نسخه های قبل از آن برای تعریف سربرگ اصلی یا همان هدر سایت باید در تمام صفحات سایت ، از یک تگ div که در داخل آن یک id که معمولا برابر با header بود استفاده شود. البته هنوز هم برخی طراحان از تگ div برای ساخت هدر سایت کمک می گیرند و تمام عناصر مورد نیاز هدر نیز درون همان تگ با id هدر قرار می‌دهند.

برای کار با تگ هدر در html5 نیز باید این نکته را در نظر بگیرید که بصورت همزمان می توان در یک صفحه از چندین تگ header کمک گرفت و هیچ مشکلی برای هیچ قسمتی رخ ندهد.

در این بروزرسانی نیز شما می‌توانید برای بخش‌های مختلف یک سایت اعم از مقالات articles  ، ساید بارaside  ، سکشن های متنوع و غیره هم از تگ header یا تگ سربرگ کمک بگیرید. البته این قضیه برای تگ footer نیز موضوع تایید است. بنظر شما با  این شرایط چگونه باید یک ساختار منظم برای سایت بسازیم؟ در ادامه به این موضوع اشاره می‌کنیم.

تگ‌های مانند section، article و aside | ایجاد ساختار منظم و آموزش ایجاد لایوت

در بروزرسانی اخیر HTML5 تغییرات بسیاری نسبت به نسخه پیشین از خود نشان داده است. یکی از مهم‌ترین ویژگی‌های HTML5 مشخص نمودن نوع محتوا و آموزش ایجاد لایوت (Layout) می‌باشد. این سطح دسترسی تحولی در عرصه‌ موتورهای جستجو را به دنبال داشته است. به این صورت که شما با مشخص کردن مکان دقیق مطالب موردنظر، آن‌ها را از قسمت‌های دیگر سایت که همیشه ثابت هستند جدا کرده و با دسته‌بندی صحیح برای موتورهای جستجو نمایش می‌دهید.

Aside

محتوای سایت باید در کنار صفحه و جدای از محتوای اصلی تعریف گردد و البته با دیگر محتوای صفحات دیگر مرتبط شوند. لینک‌های صفحه در این قسمت قابل‌تعریف می‌باشند.

section

از این تگ برای تعریف بخش‌های هر صفحه استفاده می‌گردد. فصل‌ها ، سر صفحه ، پاورقی ، بخش مربوط به تبلیغات و یا هر بخش دیگر از صفحه با این تگ مشخص و مجزا می‌شوند.

article

برای اینکه بخواهید محتوای خارجی را تعریف نمایید باید از تگ  article  کمک بگیرید. محتوای خارجی می‌تواند یک برشی از مقالات خبری از وب‌سایت‌های خارجی باشد یا یک متن از وبلاگ یا یک‌برشی از بخش از منبع را نشان می‌دهد.

 نتیجه‌گیری

آموزش ایجاد لایوت (Layout) و آموزش ساختاردهی در HTML از مواردی است که برای دسترسی به چیدمان مناسب عناصر در صفحات وبسایت حائز اهمیت هستند زیرا کاربران همیشه جذب طراحی وبسایت هایی می شوند که چیدمان و ناوبری آسان و البته جذابی داشته باشند. برای طراحی لایوت (Layout) و ساختار کلی وبسایت خود زمان کافی بگذارید تا در نهایت با تحقیق و بررسی به بهترین نتیجه دست پیدا کنید. برای درک بهتر زبان  HTML دو مقاله با نام های  آموزش  HTML | زبان اساسی برای ساخت وب‌سایت‌ها و روند تکاملی طراحی وبسایت‌ها | از HTML تا تجربه کاربری بهینه را مطالعه نمایید.