آموزش صفت HTML به زبان ساده

صفت های HTML کلمات ویژه ای هستند که اطلاعات اضافی درباره عناصر ارائه می دهند و یا ویژگی های اصلاح کننده عنصر HTML هستند.
هر عنصر یا تگ می تواند صفت هایی داشته باشد که رفتار و و ضعیت آن عنصر را تعریف می کنند.
صفت ها همیشه باید در تگ شروع قرار گیرند.
صفت باید همیشه با دوتایی نام و مقدار آن استفاده شود.
نام و مقادیر صفت ها به کوچکی و بزرگی حروف حساس هستند و W3C (کنسرسیوم شبکه جهانی وب) توصیه می کند که فقط باید با حروف کوچک نوشته شوند.
می توانید چندین صفت را همزمان به یک عنصر HTML اعمال کنید اما باید بین هر دو صفت فاصله قرار دهید.

ساختار

فهرست عناوین

    <نام تگ نام صفت=”مقدار صفت”>محتوا</نام تگ>

     <!DOCTYPE html>

    <html>

    <head>

    </head>

    <body>

        <h1>  This is Style attribute </h1>

       <p style=”height: ۵۰px; color: blue”> It will add style property in element </p>

        <p style=”color: red”>It will change the color of content</p>

    </body>

    </html>

<نام تگ نام صفت=”مقدار صفت”>محتوا</نام تگ>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1> This is Style attribute </h1>

<p style=”height: ۵۰px; color: blue”> It will add style property in element </p>

<p style=”color: red”>It will change the color of content</p>

</body>

</html>

توضیحات مثال بالا:

    <p style=”height: ۵۰px; color: blue”>It will add style property in element</p>

1	<p style=”height: ۵۰px; color: blue”>It will add style property in element</p>

برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.

در جمله بالا از تگ پاراگراف استفاده کرده ایم که در آن صفت استایل به کار برده شده است. این صفت برای اعمال ویژگی CSS روی هر عنصر HTML استفاده می شود. با استفاده از این ویژگی ارتفاع پاراگراف px50 و رنگ آبی برای رنگ متن تنظیم شده است.

    <p style=”color: red”>It will change the color of content</p>

1	<p style=”color: red”>It will change the color of content</p>

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

توجه: در اینجا تعدادی از صفات رایج را آورده ایم. همه صفات همراه با توضیحات آن ها در لیست صفات HTML آورده شده است.

صفت title

توضیحات: از صفت title به عنوان tooltip ( پنجره شناور) متن در بیشتر مرورگرها استفاده می شود. هنگامی که کاربر مکان نما را بر روی یک پیوند یا متن حرکت می دهد، یک متن به صورت شناور نمایش داده می شود. می توانید از این صفت برای هر متن یا پیوند برای نشان دادن توضیح درباره آنها استفاده کنید. در مثال های زیر این صفت را با تگ های p و h1 استفاده کرده ایم.

مثال

با تگ <h1>:

    <h1 title=”This is heading tag”>Example of title attribute</h1>

1	<h1 title=”This is heading tag”>Example of title attribute</h1>

با تگ <p>:

    <p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>

1	<p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>

کد:

    <!DOCTYPE html>

    <html>

      <head>

     </head>

    <body>

       <h1 title=”This is heading tag”>Example of title attribute</h1>

      <p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>

    </body>

    </html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 title=”This is heading tag”>Example of title attribute</h1>

<p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>

</body>

</html>

خروجی کد:

بیشتر بخوانید:

آموزش رایگان HTML مقدماتی تا پیشرفته بخش صفت ها

ساختار

توضیحات مثال بالا:

صفت title

مثال

کد:

خروجی کد:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

ساختار

توضیحات مثال بالا:

صفت title

مثال

کد:

خروجی کد:

مطالب زیر را حتما مطالعه کنید

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

DOM چیست و چه کاربردی دارد؟

دوره رایگان دیجیتال مارکتینگ

دیدگاهتان را بنویسید لغو پاسخ