آموزش رایگان html
جلسه پنجم

معرفی ویژگی های HTML یا html attributes

ویژگی های html (یا html attributes) ، اطلاعات اضافی در مورد عناصر html هستند. در واقع html attributes به ما کمک میکند تا یکسری ویژگیهای خاص را برای عناصر html تعریف کنیم.   ویژگیهای html تمامی عناصر Html میتوانند از attribute استفاده کنند. attribute ویژگی های اضافی را به عناصر HTML نسبت میدهد. attributes ، همیشه […]

ویژگی های html (یا html attributes) ، اطلاعات اضافی در مورد عناصر html هستند.

در واقع html attributes به ما کمک میکند تا یکسری ویژگیهای خاص را برای عناصر html تعریف کنیم.

 

ویژگیهای html

name=”value

 

در عبارت بالا ، نام خاصیت (attribute) مورد نظر به جای name و مقدار این خاصیت در عنصر مورد نظر به جای value قرار می گیرد.

در ادامه به معرفی مهمترین ویژگی های عناصر یا همان attributes میپردازیم.

 

ویژگی زبان یا (lang attribute)

زبان صفحه HTML مورد نظر ما میتواند از طریق ویژگی lang در تگ <html> تعریف شود.

تعیین زبان (Language) صفحات html برای دسترسی برنامه های مختلف و موتور های جستجوگر بسیار ضروری است.

 

در نمونه کد بالا زبان صفحه مورد نظر انگلیسی (ایالات متحده امریکا) تعریف شده است.(en-US)

en به معنای نوع زبان (انگلیسی) و US برای تعریف گویش (ایالات متحده امریکا) استفاده شده است.

برای سایت های فارسی زبان باید این گزینه بر روی fa تنظیم شود.یعنی بصورت زیر

 

ویژگی عنوان یا (title attribute)

از ویژگی title برای تعریف عنوان عناصر HTML استفاده میشود.این عنوان با قرار گرفتن موس بر روی عنصر مورد نظر بصورت tooltip نمایش داده میشود.

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

کد:

 

اجرای کد (ماوس را برای چند ثانیه روی نوشته زیر نگه دارید):

این یک پاراگراف آزمایشی است.

 

tooltip ها ابرهای شناوری هستند که مقدار وارد شده در خاصیت title عناصر html را نمایش میدهند.

 

ویژگی مسیر لینک یا (href)

لینک ها (آدرس های) HTML ، توسط خاصیت href در تگ های <a> تعریف میشوند.

کد :

 

اجرای کد (بر روی عبارت زیر کلیک کنید):

This is a link

در مثال بالا متن “this is a link” نمایش داده خواهد شد که با کلیک بر روی آن به  آدرس “http://www.web-negar.com” هدایت میشویم.

 

در مراحل بعدی آموزش HTML با تگ های <a> بیشتر آشنا خواهیم شد.

 

ویژگی سایز عناصر

تصاویر در صفحه HTML از طریق تگ <img> تعریف میشوند.

در این تگ ها از ویژگی src (مخفف source به معنی منبع) برای وارد کردن آدرس(لینک) تصویر مورد نظر استفاده می شود.

همچنین از ویژگی های width و height ، به ترتیب برای معین کردن عرض و ارتفاع تصویر استفاده میشود.

 

کد نمونه :

 

اجرای کد بالا :

 

نمونه تصویر با تگ <img>

 

در نمونه کد بالا تصویری با آدرس “http://web-negar.com/wp-content/uploads/2016/10/sample-1.jpg” قرار دادیم که دارای عرض ۴۲۰ پیکسل و ارتفاع ۳۱۵ پیکسل میباشد.

 

اگر آدرس بالا را در مرورگر خود وارد کنید تصویر برای شما نمایش داده خواهد شد.
بعداً با تگ <img> بیشتر آشنا خواهیم شد.

 

ویژگی متن جایگزین یا (alt attribute)

بوسیله تگ alt میتوان یک متن جایگزین برای تصاویر تعریف کرد.به این صورت که اگر تصویر ما (به هر دلیلی) لود نشد و قابل نمایش نبود ، محتوای درون تگ alt به جای آن نمایش داده میشود.

این تگ برای موتور های جستجوگر اهمیت بسیار زیادی دارد و وجود آن برای همه تصاویر (تگ ها <img>) الزامی است.

همچنین در صورتیکه یک فرد نابینا (با ابزار های مخصوص این افراد) وارد سایت شما بشود ، میتواند تصاویر را بشنود!

 

پیشنهاد ما : برای تعریف ویژگی ها (html attributes) از حروف کوچک استفاده کنید!

مطابق با استاندارد HTML5 شما مجبور نیستید که از حروف کوچک برای نوشتن نام ویژگی ها (attributes) استفاده کنید.امّا در ورژن های سخت گیرانه تر HTML ، مانند XHTML شما ملزم به استفاده از حروف کوچک در این موارد هستید.

برای مثال در HTML5 تفاوتی بین ALT و alt وجود ندارد ، امّا در XHTML فقط میتوان این ویژگی را بصورت alt بکار برد.

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

 

پیشنهاد ما : حتماً برای تعریف مقدار ویژگی ها از Quote (یا همان “) استفاده کنید.

در HTML5 قرار دادن علامت نقل قول (Quote) در ابتدا و انتهای مقدار ویژگی ها الزامی نیست ، امّا در ورژن های سخت گیرانه تر HTML ،مانند XHTML شما ملزم به استفاده از آن هستید.

این بدان معناست که در HTML5 ، دو نمونه کد زیر با هم تفاوتی ندارند و هردو به درستی اجرا میشوند.

توصیه ما این است که همیشه مقادیر ویژگی ها را درون quote قرار دهید تا مطابق با استاندارد W3C عمل کرده باشید.

ضمناً در بعضی از مواقع که مقدار ویژگی ها دارای فاصله (space) باشد ، اگر از quote استفاده نکنید ، عبارت بعد از فاصله به عنوان مقدار ویژگی شناسایی نمیشود.(حتی در HTML5)

مثلا در نمونه کد زیر

فقط مقدار About در عنوان پاراگراف قرار داده میشود و عبارت وب نگار Webnegar در این عنوان قرار نمی گیرد.

استفاده از quote رایج تر از استفاده نکردن از آن است.در این دوره آموزشی ما همیشه از نقل قول ها (quotes) استفاده میکنیم.

 

Quote منفرد استفاده کنیم یا دوتایی؟

معمولاً استفاده از quote دو گانه (یعنی “) رایج تر از استفاده از quote منفرد (یعنی ‘) است اما از هر دوی آنها میتوان استفاده کرد.

به مثال زیر توجه کنید:

در مثال بالا مقدار وارده برای عنوان پاراگراف عبارت John “ShotGun” Nelson است ، و از آنجاییکه خود این عبارت دارای Quote دوگانه است برای تعریف کل آن از quote منفرد استفاده شده است.مثال زیر هم حالت برعکس مثال بالاست.

بنابراین استفاده از quote یگانه و منفرد در HTML5 تفاوت چندانی ندارد.

 

چند نمونه از HTML attribute ها

ویژگی (attribute)توضیحات
altیک متن جایگزین برای تصاویر تعریف میکند تا در صورت عدم نمایش تصویر ، متن مورد نظر نمایش داده شود.
disabledبرای عناصر ورودی (مانند فیلد ها ) استفاده میشود و میتواند آن را غیر فعال کند.
hrefآدرس (url) مورد نظر برای لینک ها را تعریف میکند.
idیک آیدی مخصوص برای هر عنصر تعریف میکند.
srcآدرس (url) مورد نظر برای تصاویر را تعریف می کند.
styleاز طریق این ویژگی میتوان به عناصر Html بصورت inline خصوصیات css را افزود.(تعیین ظاهر عنصر)
titleاطلاعات اضافی را در مورد یک عنصر html مشخص میکند(بصورت tooltip)

 

بعداً در مورد این ویژگی ها بصورت مفصل بحث خواهیم کرد و طریقه استفاده از هرکدام را به شما می آموزیم.
کلیه حقوق مدرسه مجازی وب متعلق به گروه طراحی وب نگار میباشد.کپی برداری تنها با ذکر منبع مجاز میباشد.