آموزش رایگان HTML مقدماتی تا پیشرفته بخش صفت ها
آموزش صفت HTML به زبان ساده
- صفت های HTML کلمات ویژه ای هستند که اطلاعات اضافی درباره عناصر ارائه می دهند و یا ویژگی های اصلاح کننده عنصر HTML هستند.
- هر عنصر یا تگ می تواند صفت هایی داشته باشد که رفتار و و ضعیت آن عنصر را تعریف می کنند.
- صفت ها همیشه باید در تگ شروع قرار گیرند.
- صفت باید همیشه با دوتایی نام و مقدار آن استفاده شود.
- نام و مقادیر صفت ها به کوچکی و بزرگی حروف حساس هستند و W3C (کنسرسیوم شبکه جهانی وب) توصیه می کند که فقط باید با حروف کوچک نوشته شوند.
- می توانید چندین صفت را همزمان به یک عنصر HTML اعمال کنید اما باید بین هر دو صفت فاصله قرار دهید.
ساختار
فهرست عناوین
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<نام تگ نام صفت=”مقدار صفت”>محتوا</نام تگ> <!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> |
توضیحات مثال بالا:
1 |
<p style=”height: ۵۰px; color: blue”>It will add style property in element</p> |
برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.
در جمله بالا از تگ پاراگراف استفاده کرده ایم که در آن صفت استایل به کار برده شده است. این صفت برای اعمال ویژگی CSS روی هر عنصر HTML استفاده می شود. با استفاده از این ویژگی ارتفاع پاراگراف px50 و رنگ آبی برای رنگ متن تنظیم شده است.
1 |
<p style=”color: red”>It will change the color of content</p> |
در جمله بالا دوباره از صفت استایل در تگ پاراگراف استفاده کرده ایم که رنگ قرمز برای قلم تعیین شده است.
توجه: در اینجا تعدادی از صفات رایج را آورده ایم. همه صفات همراه با توضیحات آن ها در لیست صفات HTML آورده شده است.
صفت title
توضیحات: از صفت title به عنوان tooltip ( پنجره شناور) متن در بیشتر مرورگرها استفاده می شود. هنگامی که کاربر مکان نما را بر روی یک پیوند یا متن حرکت می دهد، یک متن به صورت شناور نمایش داده می شود. می توانید از این صفت برای هر متن یا پیوند برای نشان دادن توضیح درباره آنها استفاده کنید. در مثال های زیر این صفت را با تگ های p و h1 استفاده کرده ایم.
مثال
با تگ <h1>:
1 |
<h1 title=”This is heading tag”>Example of title attribute</h1> |
با تگ <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> |
کد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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 و CSS
- دانلود افزونه فرم ساز گرویتی فرمز| Gravity Forms
- تکنیکهای سئو دسته بندی محصولات در فروشگاه اینترنتی
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها
- معرفی زبان PHP و مزیتهای آن
- آموزش رایگان HTML مقدماتی تا پیشرفته
- بهترین افزونه های اسلایدر وردپرس
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش دوم
- چگونه این موضوع امکان پذیر خواهد شد
- 20اقدام مهم برای افزایش امنیت وردپرس
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش سوم
- چند پروژه تمرینی HTML و CSS
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش چهارم
- برترین افزونه های جدول ساز وردپرس
دیدگاهتان را بنویسید