ویژگی‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از آموزش ویژگی های Html)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

ویژگی‌ها اطلاعات اضافی در مورد عنصرهای HTML فراهم می‌کنند.[۱]

ویژگی های HTML

  • همهٔ عناصر می‌توانند ویژگی هایی داشته باشند
  • ویژگی‌ها در مورد یک عنصر اطلاعات اضافی فراهم می‌کنند
  • ویژگی‌ها همیشه در تگ آغازی تعیین می‌شوند
  • ویژگی‌ها معمولاً بصورت زوج‌های نام / مقدار هستند مانند: name="value"

ویژگی href

لینک‌های HTML با تگ <a> تعریف می‌شوند. آدرس لینک ویژگی href مشخص می‌شود:

مثال

<a href="https://wikicod.ir">This is a link</a>


مشاهدهٔ نتیجه

در مورد تگ <a> در آینده بیشتر خواهید آموخت.

ویژگی src

تصاویر در HTML با تگ <img> تعریف می‌شوند.

نام فایل منبع تصویر در ویژگی src تعیین می‌شود:

مثال

<img src="img_girl.jpg">


مشاهدهٔ نتیجه


ویژگی های عرض و ارتفاع

تصویرهای HTML ویژگی‌های width (به فارسی: عرض) و height (به فارسی: ارتفاع) هم دارند که عرض و ارتفاع تصویر را مشخص می‌کند:

مثال

<img src="img_girl.jpg" width="500" height="600">


مشاهدهٔ نتیجه


بطور پیش فرض واحد عرض و ارتفاع پیکسل است؛ بنابراین width="500" یعنی عرض ۵۰۰ پیکسل است.

ویژگی alt

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

مقدار ویژگی alt توسط صفحه خوان‌ها (به انگلیسی: screen raders) قابل خواندن است. به این ترتیب کسی که به یک صفحه وب «گوش می‌دهد» مثلاً یک فرد نابینا، می‌تواند این عنصر را «بشنود».

مثال

<img src="img_girl.jpg" alt="Girl with a jacket">


مشاهدهٔ نتیجه

ویژگی alt برای تصویری که نمی‌توان نمایش داد نیز مفید است (مثلاً اگر وجود نداشته باشد):

مثال

ببینید چه اتفاقی می‌افتد اگر بخواهیم تصویری را نمایش دهیم که وجود ندارد:

<img src="img_typo.jpg" alt="Girl with a jacket">


مشاهدهٔ نتیجه


ویژگی style

ویژگی style برای مشخص کردن طراحی (به انگلیسی: styling) یک عنصر مانند رنگ، خط، سایز و … به کار می‌رود.

مثال

<p style="color:red">This is a red paragraph.</p>


مشاهدهٔ نتیجه


در مورد styling در آینده در این آموزش و آموزش CSS ما بیشتر خواهید آموخت.


ویژگی lang

زبان یک سند را می‌توان در تگ <html> تعریف کرد.

زبان توسط ویژگی lang تعریف خواهد شد.

تعریف یک زبان برای دسترس پذیری برنامه‌های کاربردی (صفحه خوان‌ها) و موتورهای جستجو مهم است:

1 <!DOCTYPE html>
2 <html lang="en-US">
3 <body>
4 
5 ...
6 
7 </body>
8 </html>

دو حرف اول نوع زبان (en) را مشخص می‌کند. اگر گویشی وجود داشته باشد، دو حرف دیگر باید اضافه شود (US).

ویژگی title

در این مثال یک ویژگی title به عنصر <p> اضافه شده است. زمانیکه ماوس را روی پاراگراف قرار دهید، مقدار ویژگی title بصورت یک راهنمای ابزار (به انگلیسی: tooltip) نمایش داده خواهد شد:

مثال

<p title="I'm a tooltip">
This is a paragraph.
</p>


مشاهدهٔ نتیجه


پیشنهاد ما: از ویژگی‌های با حروف کوچک (به انگلیسی: Lowercase) استفاده کنید

استاندار HTML5 نیازی به نام‌های ویژگی با حروف کوچک ندارد.

ویژگی title را می‌توان با حروف بزرگ یا حروف کوچک مانند title یا TITLE نوشت.

W3C حروف کوچک را در HTML پیشنهاد می‌کند و برای انواع سند سخت تر مانند X HTML حروف کوچک را درخواست می‌کند.

در WikiCod ما همیشه از نام‌های ویژگی با حروف کوچک استفاده می‌کنیم.

پیشنهاد ما: مقادیر ویژگی‌ها را نقل قول کنید

استاندارد HTML5 نیازی به قرار دادن مقدارها در نقل قول " " ندارد.

ویژگی href که در بالا بیان شد را می‌توان بدون نقل قول نوشت:


خوب

1 <a href="https://wikicod.ir">

مشاهدهٔ نتیجه

بد

1 <a href=https://wikicod.ir>

مشاهدهٔ نتیجه

استفاده از نمادهای نقل قول در HTML را پیشنهاد می‌کند و برای انواع سند سخت‌تر مانند XHTML استفاده از نمادهای نقل قول را درخواست می‌کند.

گاهی اوقات نقل قول کردن لازم است. این مثال ویژگی title را به درستی نمایش نمی‌دهد زیرا دارای یک فاصله است:

مثال

<p title=About WikiCod>


مشاهدهٔ نتیجه

استفاده از نقل قول رایج‌ترین است. حذف نقل قول‌ها ممکن است خطاهایی ایجاد کند. در WikiCod ما همیشه از نقل قول در اطراف مقدارهای ویژگی استفاده می‌کنیم.

نقل قول های تکی ' ' یا دوتایی " "؟

در HTML نقل قول دوتایی برای مقدار ویژگی رایج‌ترین است اما نقل قول تکی را هم می‌توان استفاده کرد.

در شرایطی، هنگامی که مقدار ویژگی خودش نقل قول دو تایی دارد، لازم است که از نقل قول تکی استفاده کنیم:

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

یا برعکس:

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


مشاهدهٔ نتیجه


خلاصه بخش

  • همهٔ عنصر های HTML می‌توانند ویژگی هایی داشته باشند
  • ویژگی title اطلاعات “tool-tip” اضافی فراهم می‌کند
  • ویژگی href اطلاعات آدرس برای لینک‌ها را فراهم می‌کند
  • ویژگی‌های width و height اطلاعات اندازه تصاویر را فراهم می‌کند
  • ویژگی alt متن مربوط به صفحه خوان‌ها را فراهم می‌کند
  • در WikiCod ما همیشه از نام‌های ویژگی با حروف کوچک استفاده می‌کنیم
  • در WikiCod ما همیشه از مقدارهای ویژگی با نقل قول استفاده می‌کنیم

تمرین های HTML

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


ویژگی های HTML

در جدول زیر لیست ویژگی‌هایی که اغلب در HTML استفاده می‌شوند به ترتیب حروف الفبا آمده‌است، که در مورد آنها در این آموزش بیشتر خواهید آموخت:

ویژگی توصیف
alt متن جایگزین برای یک تصویر را مشخص می‌کند، زمانی‌که تصویر قابل نمایش دادن نیست
disabled تعیین می‌کند که یک عنصر باید غیرفعال باشد
href به یک لینک URL (به فارسی: آدرس وب) اختصاص می‌دهد
id یک id (شناساگر) یکتا برای یک عنصر تعیین می‌کند
src یک URL (به فارسی: آدرس وب) به یک تصویر اختصاص می‌دهد
style به یک عنصر یک استایل CSS درون خطی تخصیص می‌دهد
title اطلاعات اضافی در مورد یک عنصر را مشخص می‌کند (بصورت tooltip نمایش داده می‌شود)
لیست کامل ویژگی‌ها برای هر عنصر HTML در مرجع ویژگی HTML ما آمده‌است.


منابع آموزشی