آموزش زبان HTML (جلسه ۶۵)

آشنایی با تگ های div و span در زبان اچ تی ام ال (HTML)

که می توان دیگر تگ های اچ تی ام ال را داخل آن قرار داد.
تگ <div> از دید یک مرورگر حاوی معنی خاصی نیست اما از آنجایی که تگ <div> تگی از جنس Block Element است و گروهی از تگ های اچ تی ام ال را در خود جای می دهد، مرورگر در حین Parse کردن این تگ یک فاصله قبل و یک فاصله بعد از این تگ قرار می دهند. پیش از این گفتیم که در گذشته برای ساخت Layout یک سایت از جداول استفاده می شد که کار صحیحی نبود چرا که تگ های <table>و<table/> برای نمایش داده ها، اعداد و ارقام و … بایستی مورد استفاده قرار گیرند. امروزه برنامه نویسان وب برای ایجاد ساختار کلی سایت های خود از تگ <div> استفاده می کنند.
چیزی که تاثیر به کارگیری تگ <div> را دوچندان می کند استفاده از CSS است. در حقیقت با به کارگیری تگ های <div> به همراه کدهای CSS می توان Layout هایی بسیار کاربردی و در عین حال جذاب ایجاد کرد.
پیش از توضیح پیرامون تگ دیگری تحت عنوان <span> می بایست با دو مفهوم Block Element و Inline Element آشنا شویم.
به طور کلی منظور از Block Element تگ هایی همانند <p>و <h1>و <table> و … است که در مرورگر در یک خط مختص به خود به نمایش در می آیند. تگی همچون <div> هم Block Level محسوب می شود چرا که در یک خط مجزا به نمایش در می آید.
در مقابل Element هایی از جنس Block چیزی تحت عنوان Inline Element وجود دارد که به تگ هایی اطلاق می شود که با استفاده از آن ها مرورگر آن ها را در یک خط جدید به نمایش در نمی آورد که از آن جمله می توان به تگ های <a>و <img>و <strong> و … اشاره کرد. علاوه بر مواردی که اشاره شد تگ دیگری هم به کرات در طراحی صفحات وب مورد استفاده قرار می گیرد که <span> نام دارد. این تگ هم همانند تگ <div> به عنوان یک ظرف مورد استفاده قرار می گیرد اما این در حالی است که این ظرف برای بخش های کوچک تری از اچ تی ام ال مثل یک عبارت یا جمله مورد استفاده قرار می گیرد.
حال با توضیحی مختصر پیرامون تگ های <div> و <span>، در ادامه این ماژول خواهیم دید که به چه شکل می توان آن ها را به طور عملی مورد استفاده قرار داد (برای روشن تر شدن عملکرد این دو تگ از تعدادی کد سی اس اس هم استفاده خواهیم کرد اما از آنجا که در فصل مرتبط با سی اس اس به طور کامل به توضیح کدهای سی اس اس خواهیم پرداخت از توضیحات تکمیلی در این آموزش خودداری خواهیم کرد):

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>asrefonon</title>
    </head>
     
    <body>
        <div style="background:#000; width:400px; height:100px; color:#fff">هدر</div>
        <div style="background:#ffde57; width:200px; height:300px">منوی سمت چپ</div>
        <div style="background:#ffdeff; width:400px; height:50px">فوتر</div>
    </body>
</html>

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

xdiv_tags_in_html.jpg.pagespeed.ic.BfY6NJxjBw

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

<body>
        <div style="background:#000; width:400px; height:100px; color:#fff">هدر</div>
        <div style="background:#ffde57; width:200px; height:300px">منوی سمت چپ</div>
        <div style="background:#ffdeff; width:400px; height:50px">All
            <span style="font-weight:bold;">rights</span>reserved.</div>
    </body>

همانطور که در کد فوق می بینیم عبارت All rights reserved. به معنی “حق چاپ محفوظ است.” را وارد تگ <div> مرتبط با Footer کرده ایم و با استفاده از تگ های <span> و <span/> استایل خاصی را فقط برای واژه rights در نظر گرفته ایم. با اجرای کد فوق در مرورگر نتیجه را بهتر متوجه خواهیم شد:

xsapn_tags_in_html.jpg.pagespeed.ic.lJ1kiBP68_

همانطور که می بینیم با استفاده از تگ <span> فقط استایل خاصی را برای واژه rights در نظر گرفته ایم (در پروژه عملی پایان دوره به طور کاربردی از این تگ ها استفاده خواهیم کرد).

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان