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

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

html

صفحه بندی در HTML

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

تگ div

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

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

یک عنصر block ایجاد می کند یعنی کل یک سطر را اشغال می کند.

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

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

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

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

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

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

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

تگ <span>

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

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

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

سخن پایانی

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)