50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش HTML – چیدمان صفحه وب

  • منتشر شده در تاریخ

آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با کاربرد دستور Doctype آشنا شدیم. در این بخش قصد داریم نحوه ساختاربندی و چیدمان صفحه وب را یاد بگیریم.

Layout به معنای طرح بندی است یعنی صفحه وب چطور نمایش داده شود. معمولا محتوای سایت در قالب چندین ستون نمایش داده میشود.

ساخت طرح سایت

ساخت طرح سایت یک سری عملیات موقعیت دهی عناطر مختلف است که باعث می شود صفحه وب در یک شکل و ظاهر ساختاربندی شده برای یک وب سایت به خود بگیرید.

شما می توانید سایت های مختلفی در اینترنت پیدا کنید که محتوای آنها در چندین سطر و ستون قرار دارد مثل فرمت بندی مجلات یا روزنامه, که به کاربران عمومی وب امکان خواندن و نوشتن بهتر را می دهد.

شما به راحتی می توانید این کار را با تگ های <table>, <div> یا <span> به همراه کمی استایل CSS انجام بدید.

 

طرح بندی HTML با جداول

جداول در HTML راحترین روش برای ساختار بندی یا همان چیدمان صفحه وب است. معمولا, این کار شامل قرار دادن محتوا داخل سطر و ستون ها است.

طرح html زیر را با استفاده از ۳ سطر و ۲ ستون انجام دادیم, که اولین و آخرین سطر با استفاده از colspan هر دو ستون را شامل شدند.

توجه: برای چیدمان صفحه وب استفاده از مثال بالا اشتباه نیست, اما به هیچ وجه توصیه نمی شود. بنابراین از جداول و استایل های خطی برای ساخت layout صفحه خودداری کنید.

طرح بندی HTML با Div و Span

<div> در HTML (division) برای ساخت یک بلاک از محتوا یا مجموعه ای از المان ها داخل آن استفاده می شود.

این عنصر می تواند شامل تگ div داخلی آن هم باشد اما نمی توانید داخل یک المان inline مثل spanقرار بگیرد.

المنت <span> نیز برای ساخت بخشی درون المان block استفاده می شود.

در مثال زیر ما از المان div برای ساخت ستون های چندگانه استفاده کردیم. که دقیقا همان نتیجه ای که در مثال قبل با جداول بوجود آمد را در اینجا هم می بینید.

نکته: بهترین طرح بندی ها می تواند با div,span,CSS ایجاد شوند. شما می توانید کل طرح بندی صفحات را با تغییر تنها یک فایل CSS ایجاد کنید.

طرح بندی HTML با تگ های HTML5

HTML5 مجموعه ای از تگ های ساختاربندی مثل <head>, <footer>, <nav>, <section> و غیره.. ارایه کرده است. که می توانید از آنها برای ساخت بخش های مختلف صفحات وب بصورت معناگرایانه تر استفاده کنید.

مثال زیر نحوه استفاده از تگ های جدید HTML5 برای ساختاربندی صفحه وب همانند آن چیزی که در مثال قبل دیدیم را نشان می دهد.

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

  • <header> – نشان دهنده بخش هدر صفحه است
  • <footer> – نشان دهنده بخش فوتر صفحه است
  • <nav> – نشان دهنده بخش لینک های ناوبری است
  • <section> – نشان دهنده یک بخش از سند مثل هدر فوتر, یا اسلایدر و غیره است
  • <article> – یک مقاله یا بخش کوچک را تعریف می کند
  • <aside> – بخش های کم اهمیت صفحه که معمولا در سایدبار است مثل تبلیغات, لینک های غیره است.
  • <details> – یک ابزارک برای نمایش جزئیات اضافی و موارد این چنین است.
  • <summary> – یک خلاصه یا سرتیتر برای المان <details> است.

امیدوارم در این بخش آموزش HTML , از نجوه چیدمان صفحه وب نهایت استفاده را برده باشید.

در بخش بعدی در مورد کاربرد تگ head در صفحه وب را یاد می گیریم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۹)

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

  1. حسین صالحی ۱۲ مرداد ۱۳۹۸

    باسلام و خسته نباشد. ببخشید یک سوال درمورد نحوه ورق زدن صفحات سایت دارم .در پایین هرصفحه سایت چند تا دکمه است که رووش نوشته صفحه ۱-صفحه۲- ودر دکمه اخری وقتی کلیک میکنی صفحات را دونه دونه رو ورق میزنه میره جلو تا اخرین صفحه. (مثلا سایتی که بیش از ۱۰۰ صفحه داره) میتونید در این مورد کمکم کنید. نحوه کارش چه جوریه

    پاسخ
    1. حسن شفیعی ۱۲ مرداد ۱۳۹۸

      سلام ممنون. این قابلیت صفحه بندی است
      صفحه بندی
      موفق باشید

      پاسخ
      1. حسین صالحی ۱۲ مرداد ۱۳۹۸

        خیلی ممنونم .ولی زیاد توضیح زیادی نداده . منبعی سراغ ندارید در این مورد مفصل توضیح بده

        پاسخ
      2. حسن شفیعی ۱۲ مرداد ۱۳۹۸
      3. حسین صالحی ۱۲ مرداد ۱۳۹۸

        خیلی سپاسگذارم قربان شما

        پاسخ
      4. حسین صالحی ۱۵ مرداد ۱۳۹۸

        سلام مهندس خسته نباشید یه سوال داشتم در مورد دکمه های صفحه بندی.که امروز متوجه شدم(تمام سایت هایی که دکمه صفحه بندی دارن مطالب سایتشون رو از دیتابیس وارد میکنند )

        پاسخ
      5. حسن شفیعی ۱۶ مرداد ۱۳۹۸

        سلام. ممنون.
        خیلی هم عالی
        موفق باشید.

        پاسخ
      6. حسین صالحی ۱۶ مرداد ۱۳۹۸

        سلام بقیه سوالم این بود که. حالا من که قالب html سایتم رو نوشتم وتموم شده . چه طور میتونم پست های سایتم رو از دیتابیس وارد کنم وجدول براش بسازم؟

        پاسخ
      7. حسن شفیعی ۱۶ مرداد ۱۳۹۸

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

        پاسخ
دوره های آموزشی

می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

50% تخفیف ویژه
فقط 144 هزار تومان

برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
می خواهم طراحی سایت را یاد بگیرم
close-link