آموزش قدم به قدم HTML – بخش ششم – صفحه بندی در HTML و تگ div

آموزش قدم به قدم HTML – بخش ششم – صفحه بندی در HTML و تگ divReviewed by جواد نبوی on Oct 6Rating: 4.0

سلام دوستان؛ در قسمت ششم از سری آموزش های قدم به قدم HTML از سایت وب تستر هستیم و در این قسمت می خواهیم به یکی از مهم ترین و اساسی ترین موضوعات در HTML بپردازیم. این بخش در مورد صفحه بندی در HTML است و قرار است به طور مفصل با تگ های div و span که مخصوص صفحه بندی و تقسیم کردن صفحه هستند آشنا شویم. اگر قسمت های قبلی آموزش قدم به قدم HTML را نخوانده اید، بهتر است ابتدا آن ها را بخوانید و سپس مطالعه این بخش را شروع کنید.

آموزش قدم به قدم html - صفحه بندی در html

صفحه بندی در HTML

در قدیم برای صفحه بندی سایت از جدول ها استفاده می شد. اما این روش مدت هاست منسوخ شده و دیگر برای این منظور کاربردی ندارد. نه اینکه کلا استفاده از جداول را تعطیل کنیم. نه. بلکه برای صفحه بندی کردن سایت از آن استفاده نمی کنیم. حالا منظورمان از صفحه بندی کردن سایت چیست؟ خب حتما همه ی شما این را می دانید. اگر نمیدانید هم باید بگویم که در یک صفحه از سایت، بخش های مختلفی مثل ستون های چپ و راست سایت (سایدبار)، ستون مطالب، هدر (سربرگ)، فوتر و … قرار گرفته اند. این ستون ها و بخش های مختلف صفحه یک جوری باید ایجاد شوند و وظیفه شان هم تقسیم کردن صفحه به قسمت های مختلف است. ما در HTML میاییم و با استفاده از دو تگ div و span اینکار را انجام می دهیم. البته توجه داشته باشید که در انجام این کار، CSS نقشی حیاتی دارد ولی چون این مطلب در مورد html است، وارد بحث CSS نمی شویم و در سری آموزش های CSS به این موضوع خواهیم پرداخت. در اینجا فقط شیوه انجام کار با html را می گوییم.

تگ div

صفحه بندی در html با تگ div

اول بگویم که تگ div یک عنصر block است. یعنی چی؟ یعنی وقتی یک تگ div ایجاد می کنیم، کل سطری که این تگ ایجاد شده اشغال می شود و چیزی نمیتواند بعد از آن یا قبل از آن قرار بگیرد. در آن طرف ماجرا عناصر inline قرار دارند که وقتی ایجاد می شوند، فقط به اندازه نیازشان از یک سطر، آن را اشغال می کنند و میگذارند بقیه فضای آن سطر را عناصر دیگر بگیرند. حالا که فرق این دو نوع عنصر را متوجه شدید دوباره می گویم که تگ <div> یک عنصر block ایجاد می کند یعنی کل یک سطر را اشغال می کند.

بگذارید با یک مثال فرق block و inline را برای شما توضیح دهم. یک نیمکت را درون یک پارک فرض کنید. این نیمکت برای ۵ نفر جا دارد که رویش بنشینند. در یکی از روز ها یک فرد قوی و قلدری می آید و روی این نیمکت می نشیند. با اینکه این فرد فقط جای یک نفر را اشغال می کند، اما چون زور دارد و زورگو است، نمی گذارد افراد دیگر بیایند و روی آن نیمکت بنشینند. اگر کسی بخواهد روی نیمکتی که ایشان رویش نشسته است بنشیند، جناب قلدر با یک پس گردنی فرد مذکور را به نیمکت دیگری هدایت می کند. ما به این شخص زورگو در html میگوییم عنصر block که با این که ممکن است خودش حجم خیلی زیادی نداشته باشد اما یک سطر از صفحه را اشغال می کند. در سمت دیگر فرض کنید یک روز دیگر شخص دیگری روی این نیمکت نشسته که اصلا هم زورگو نیست. خب افراد می آیند و کنار این شخص روی نیمکت می نشینند و با هم هیچ مشکلی هم ندارند. به اینها می گوییم عناصر inline. به همین سادگی.

تگ div همانطور که از نامش پیداست (مخفف divide) و تلفظ درستش هم دیو است (بعضی ها میگویند دایو، مگر شیرجه است؟!) مخصوص تقسیم کردن صفحه به بخش های مختلف است. این تگ میتواند به عنوان ظرفی برای قرار گرفتن محتویات دیگر باشد و همچنین با استفاده از CSS می توان به آن استایل های زیبایی داد. در کل هر جایی که خواستید یک باکس یا جعبه ای ایجاد کنید بهترین گزینه همین تگ <div> است.

نحوه استفاده از تگ <div>

تگ <div> یک تگ باز و بسته شونده یا به اصطلاح غیر تهی است. یعنی وقتی یک جایی باز شد، باید در جایی دیگر بسته شود و محتویات بین این دو قرار گیرد. اینجوری:

<div>
محتویات
</div>

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

<div>
محتویات سایدبار راست
</div>
<div>
محتویات مطالب
</div>
<div>
محتویات سایدبار چپ
</div>

بعد می خواهم درون سایدبار راست چند تا باکس داشته باشم:

<div>
<div>
باکس اول
</div>
<div>
باکس دوم
</div>
<div>
باکس سوم
</div>
</div>
<div>
محتویات مطالب
</div>
<div>
محتویات سایدبار چپ
</div>

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

تگ <span>

صفحه بندی در html با تگ span

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

زمانی که میخواهید مثلا یک عبارت را درون یک متن بلند به شکل دیگری در آورید می توانید از تگ <span> و CSS استفاده کنید. دایره استفاده از این تگ به همینجا و یک کم آنطرف تر ختم می شود. یعنی خیلی پر کاربرد نیست. اگر چیزی نفهمیدید هم به خودتان فشار نیاورید. بعدا یک پروژه ای چیزی با هم میسازیم اگر نیاز شد ازش استفاده می کنیم.

سخن پایانی

برای صفحه بندی باید چه کار کنیم؟ از تگ div و CSS استفاده می کنیم. تمام شد و رفت. بعدا که CSS را یاد گرفتیم میتوانیم اینکار را انجام دهیم. فعلا این بحث را تا همین جا داشته باشید. به امید شروع زودتر آموزش CSS از سایت وب تستر و خوشحالی شما!

تبلیغات

نویسنده (مدیر سایت)

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

6 دیدگاه برای “آموزش قدم به قدم HTML – بخش ششم – صفحه بندی در HTML و تگ div”

  1. دنیا گفت:

    عاااااااااااااااااااااالی بود خیلی خیلی ممنون ازتون واقعا متشکر کاش زودتر اموزشcss رو بزارید توضیحتون خیلی خوب و ساده قابل فهمه ممنون

    1. جواد نبوی گفت:

      خواهش می کنم
      انشالله سر وقت آموزش css هم شروع می کنیم
      با آرزوی موفقیت

  2. رضا جلالیان گفت:

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

    1. جواد نبوی گفت:

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

  3. کامران گفت:

    با سلام.
    مطلب خیلی خوب و واضحی بود.شیوه‌ی بیان دوستانه ای داشت.

    با تشکر

    1. جواد نبوی گفت:

      خواهش می کنم لطف دارید

پاسخ دهید

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