رفتن به مطلب
ssabaqi

تگ های HTML

Recommended Posts

ساختار تگ‌های HTML

تگ‌های HTML در دو حالت ارائه می‌شوند. تگ‌هایی که تگ بسته منحصر به فرد دارند و تگ‌هایی که خودشان، خودشان را می‌بندند.
هر کدام از تگ‌ها یک فضای کاری دارند. یعنی در خود یکسری محتوا را قبول می‌کنند. برای مشخص کردن مرز شروع و پایان تگ ما از تگ شروع و تگ پایان استفاده می‌کنیم. به ساختار زیر دقت کنید:

1
<TagName> Content </TagName>

تگ باز شدن با استفاده از علامت بزرگ و کوچک ریاضی <> و نام تگ پیاده‌سازی می‌شود، همچنین تگ بستن با استفاده از همان موارد به اضافه یک علامت Forward Slash قبل از نام تگ پیاده‌سازی می‌شود. در بین باز و بسته شدن تگ نیز محتوا قرار می‌گیرد.

حالت دوم تگ‌ها، تگ‌هایی هستند که نیاز به تگ بستن ندارند. در واقع این تگ‌ها خودشان به صورت خودکار بسته می‌شوند. به این تگ‌ها Self Closing می‌گویند. در ادامه مطالب با این نوع تگ‌ها نیز آشنا خواهیم شد.

بیایید به کدهای‌مان باز گردیم:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    
    </body>
</html>

در کدهای بالا از خط دوم به بعد ما با ۴ تگ سر و کار داریم:
<HTML>: تمام کدهای مربوط به فایل HTML در بین این تگ (تگ باز و تگ بستن) قرار می‌گیرد. محتوای خارج از این تگ به عنوان کد HTML شناخته نمی‌شود. می‌توانید به HTML به عنوان یک چیزبرگر نگاه کنید، نان ابتدایی و انتهایی چیزبرگر همان HTML هستند.
<Head>: اطلاعاتی راجع به وبسایت را تحویل مرورگر، موتورهای جستجوگر، بات‌ها و… می‌دهد. ما در ابتدا کمتر با این تگ سر و کار داریم. المان‌های غیر بصری –غیر دیداری از چشم کاربر- در این قسمت قرار می‌گیرد.
<Title>: این تگ منحصرا باید در داخل <head> و </head> استفاده شود. محتوای بین این دو تگ، عنوان وبسایت را مشخص کرده و روی تب‌های مرورگر قرار می‌دهد.
<Body>: این تگ بدنه وبسایت شما را تعیین می‌کند. در واقع هر چیزی که بین این دو تگ استفاده شود در مرورگر به شما نمایش داده می‌شود. در این قسمت است که ما تصاویر، متن‌ها، لیست‌ها و کلی عنصر دیگر را به وبسایت‌مان اضافه می‌کنیم. پس کار اصلی ما در این دوره پرداختن به این تگ و محتوای میان آن است.

نکته ۱: هر تگی که زودتر باز شود دیرتر از همه بسته خواهد شد. برای مثال به تگ head و title توجه کنید:
ابتدا تگ head باز شده و سپس تگ title اما روند بسته شدن آن‌ها برعکس است، ابتدا تگ title بسته شده و سپس تگ head. این یکی از قوانین اصلی در تو در تو نویسی کدهای HTML است.

آشنایی با تگ P

حال که با ضروری‌ترین تگ‌های HTML آشنا شدیم بیایید با تگ‌های مهم دیگری آشنا شویم. قبل از هر کاری فایل test1.html را یک بار دیگر در مرورگر باز کنید. در صفحه مرورگر چه چیزی ظاهر می‌شود؟ هیچ! خالی است. چرا؟ به این دلیل که ما هیچ محتوایی را در قسمت بصری HTML که همان تگ Body است قرار ندادیم. اولین تگی که ما از مجموعه تگ‌های Body یاد می‌گیریم تگ <p> </p> است. از این تگ برای تعریف یک پاراگراف خطی در HTML استفاده می‌شود. به مثال زیر دقت کنید.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>This is a new Paragraph</p>
  </body>
</html>

همانطور که می‌توانید مشاهده بکنید تگ <p> دارای تگی برای بسته شدن نیز است. پس مرز مشخصی دارد و محتوای مشخصی در آن قرار می‌گیرد.
فایل test.html را در یک ویرایشگر کد باز کرده و براساس کدهای زیر تغییرات جدید را اعمال کنید. بعد از آن فایل را ذخیره کرده و در مرورگر اجرا کنید.
شما موفق شدید! صفحه شما حال خالی نیست و در آن یک متن جدید قرار دارد.

چالش: سعی کنید که همان کلمه Paragraph را در کدهای بالا به یک خط جدید بیاورید. به احتمال زیاد شما اینگونه عمل می‌کنید:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This is a new
            Paragraph</p>
    </body>
</html>

این کار را انجام دهید و یک بار دیگر مرورگر را باز کنید، آیا تغییر آنچنان که می خواستید اعمال شد؟
خیر! چرا؟!
HTML فرمان‌هایی را که در محیط متنی مانند Word انجام می‌شود را نادیده می‌گیرد. HTML از Enter پشتیبانی نمی‌کند بجای آن برای اینکه بتوانید یک Paragraph را به یک خط جدید بیاورید نیاز است که از یک تگ جدید استفاده کنید.

تگ <br />

تگ <br /> یک تگ Self closing است. به این معنا که تگی برای بسته شدن ندارد، پس محتوایی نیز در بین آن قرار نمی‌گیرد (چون مرز مشخصی ندارد). به مثال زیر که در آن می‌خواهیم Paragraph را به یک خط جدید بیاوریم دقت کنید:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <p>This is a new <br /> Paragraph</p>
    </body>
</html>

حال مانند کد بالا فایل test1.html را تغییر دهید و در مرورگر اجرا نمایید. آیا Paragraph به خط جدید آمد؟

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

×