سبدخرید

هیچ محصولی در سبد خرید نیست.

بازگشت به دوره

آموزش رایگان صفر تا صد اچ‌تی‌ام‌ال (HTML) به زبان ساده

0% تکمیل‌شده
0/0 مرحله
  1. معرفی HTML
  2. ویرایش HTML
  3. مفاهیم پایه‌ی HTML
  4. عناصر HTML
  5. ویژگی‌های HTML
  6. هدینگ (Headings) در HTML
  7. پاراگراف‌ها در HTML

ویژگی‌های HTML اطلاعات اضافی به تگ‌های HTML اضافه می‌کنند. در این مقاله، انواع HTML attributes مثل href، src، alt، style و … را با مثال‌های کاربردی یاد می‌گیرید. 👨‍💻📚

📜 فهرست مطالب

  1. ویژگی‌های HTML چیست؟
  2. ویژگی href در لینک‌ها
  3. ویژگی src در تصاویر
  4. ویژگی‌های width و height
  5. ویژگی alt برای متن جایگزین
  6. ویژگی style برای تغییر ظاهر
  7. ویژگی lang برای تعیین زبان
  8. ویژگی title برای نمایش توضیحات اضافی
  9. نکات مهم در نوشتن ویژگی‌های HTML

🎯 HTML Attributes چیست؟

ویژگی‌های HTML اطلاعات اضافه‌ای به تگ‌های HTML می‌دهند. این ویژگی‌ها معمولاً درون تگ بازکننده (start tag) نوشته می‌شوند و به‌صورت name=”value” مقداردهی می‌شوند.

🔹 مثال:

<a href="https://www.w3schools.com" target="_blank" rel="noopener">بازدید از W3Schools</a>

📌 در مثال بالا، href مشخص می‌کند که این لینک به چه صفحه‌ای برود.

🔗 ویژگی href در لینک‌ها

ویژگی href در تگ <a> مشخص می‌کند که وقتی روی لینک کلیک شود، کاربر به کجا هدایت شود.

✅ مثال:

<a href="https://google.com" target="_blank" rel="noopener">برو به گوگل</a>

📌 وقتی روی این لینک کلیک کنید، صفحه گوگل باز می‌شود.

🔹 چالش:
یک لینک بسازید که کاربر را به صفحه اصلی سایت شما ببرد! 🌍

🖼️ ویژگی src در تصاویر

ویژگی src در تگ <img> مشخص می‌کند که تصویر از کجا بارگذاری شود.

✅ مثال:

<img decoding="async" src="logo.png" alt="logo" title="ویژگی‌های HTML 1">

📌 این کد تصویری به نام logo.png را در صفحه نمایش می‌دهد.

🔹 دو روش برای مقداردهی src:

  1. آدرس مطلق (Absolute URL): آدرس کامل یک تصویر از یک سایت دیگر.
<img decoding="async" src="logo.png" alt="logo" title="ویژگی‌های HTML 1">

2. آدرس نسبی (Relative URL): تصویری که درون هاست سایت خودتان ذخیره شده.

<img decoding="async" src="images/photo.jpg" alt="photo" title="ویژگی‌های HTML 3">

📌 نکته: استفاده از آدرس‌های نسبی بهتر است، چون اگر دامنه سایت تغییر کند، لینک تصاویر خراب نمی‌شود.

📏 ویژگی‌های width و height 

این دو ویژگی اندازه تصویر را برحسب پیکسل مشخص می‌کنند.

✅ مثال:

<img loading="lazy" decoding="async" src="photo.jpg" width="300" height="200" alt="photo" title="ویژگی‌های HTML 4">

📌 در اینجا، تصویر عرض 300px و ارتفاع 200px خواهد داشت.

📌 نکته: بهتر است همیشه نسبت عرض و ارتفاع تصویر را رعایت کنید تا تصویر کشیده نشود.

🎭 ویژگی alt برای متن جایگزین

ویژگی alt متنی را نمایش می‌دهد که اگر تصویر لود نشد، به جای آن نشان داده شود. این ویژگی برای SEO و افراد کم‌بینا که از Screen Reader استفاده می‌کنند، اهمیت دارد. 🦾

✅ مثال:

<img decoding="async" src="avatar.jpg" alt="تصویر پروفایل کاربر" title="ویژگی‌های HTML 5">

📌 اگر تصویر avatar.jpg خراب یا حذف شود، متن “تصویر پروفایل کاربر” نمایش داده می‌شود.

🎨 ویژگی style برای تغییر ظاهر

ویژگی style برای افزودن استایل‌های CSS به یک تگ استفاده می‌شود.

✅ مثال:

<p style="color: blue; font-size: 20px;">این یک متن آبی است.</p>

📌 متن بالا به رنگ آبی و اندازه 20px نمایش داده می‌شود.

📌 نکته: بهتر است استایل‌ها را در یک فایل CSS جداگانه بنویسید و از style فقط در مواقع ضروری استفاده کنید.

🌍 ویژگی lang برای تعیین زبان

ویژگی lang در تگ <html> مشخص می‌کند که زبان محتوای صفحه چیست. این ویژگی به موتورهای جستجو کمک می‌کند تا صفحه شما را بهتر پردازش کنند.

✅ مثال:

<html lang="fa">

📌 این کد مشخص می‌کند که زبان صفحه فارسی است.

همچنین می‌توان کد کشور را نیز مشخص کرد:

<html lang="en-US">

📌 در اینجا، صفحه به زبان انگلیسی (امریکا) تنظیم شده است.

🏷️ ویژگی title برای نمایش توضیحات اضافی

ویژگی title وقتی روی یک عنصر موس ببرید، یک توضیح کوچک به‌صورت Tooltip نمایش می‌دهد.

✅ مثال:

<p title="توضیحی برای این متن">متن نمونه</p>

📌 وقتی موس را روی متن ببرید، پیام “توضیحی برای این متن” نمایش داده می‌شود.

✅ نکات مهم در نوشتن ویژگی‌های HTML

1. همیشه نام ویژگی‌ها را با حروف کوچک بنویسید.
❌ TITLE | ✅ title

2. مقدار ویژگی‌ها را همیشه داخل " یا ' قرار دهید.
❌ <a href=https://google.com>گوگل</a>
✅ <a href="https://google.com">گوگل</a>

3. استفاده از " و ' درون همدیگر:
✅

<p title='John "ShotGun" Nelson'></p>

✅

<p title="John 'ShotGun' Nelson"></p>

🔥 جمع‌بندی

🔹 همه‌ی تگ‌های HTML می‌توانند ویژگی (attribute) داشته باشند.
🔹 href مشخص می‌کند که یک لینک به کجا برود.
🔹 src مسیر یک تصویر را تعیین می‌کند.
🔹 alt برای نمایش متن جایگزین تصویر استفاده می‌شود.
🔹 style برای تغییر ظاهر عنصر به کار می‌رود.
🔹 lang زبان صفحه را مشخص می‌کند.
🔹 title یک Tooltip نمایش می‌دهد.

📌 تمرین:
یک صفحه HTML بسازید که شامل یک لینک، تصویر، پاراگراف با استایل خاص و یک title باشد. 😃