سلام خدمت کاربران سایت کدتاک . با قسمت چهارم از سری آموزش های HTML5 در خدمت شما هستیم. در این قسمت میخواهیم به آموزش HTML Attributes بپردازیم؛ پس با ما همراه باشید.

 

HTML Attributes

  • attribute ها اطلاعاتی اضافی در مورد عناصر html فراهم میکنند.
  • attribute ها همیشه در تگ آغازی تعریف میشوند.
  • attribute ها معمولا به صورت “name=”value تعریف میشوند.

<tagname  name=value” > Content … </tagname>

خصوصیت href

در html ، لینک ها به وسیله تگ <a> تعریف میشوند. با استفاده از خصوصیت  href میتوانیم لینک را آدرس دهی کنیم.

<a href=http://codetalk.net” > Codetalk </a>

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

خصوصیت src

در html ، عکس ها را با استفاده از تگ <img> تعریف میکنیم. این تگ دارای خصوصیتی به نام scr می باشد که آدرس عکس مورد نظر را مشخص میکند.

<img src=“Images/codetalk.png >

خصوصیت width و height

با استفاده از خصوصیات width و height میتوانیم اندازه یک عکس را تعیین کنیم.

<img src=“Images/codetalk.pngwidth=“500px” height=“300px” >

که px  به معنای واحد پیکسل می باشد.

برای تعیین اندازه عکس سعی کنید از مقادیر مناسب استفاده کنید. در غیر این صورت ممکن است عکس با کیفیت نامناسبی نمایش داده شود!

width & height

در مثال بالا، تصویر سمت چپ دارای عرض ۵۰۰ پیکسل و طول ۳۰۰ پیکسل می باشد که با کیفیت نسبتاً مناسبی نمایش داده شده است. ولی تصویر سمت راست دارای عرض ۲۰۰ پیکسل و طول ۲۵۰ پیکسل می باشد که مقدار مناسبی نیست و به همین خاطر کیفیت خوبی ندارد.

در آموزش های بعدی در مورد عکس ها بیشتر صبحت خواهیم کرد.

خصوصیت alt

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

همچنین این متن میتواند توسط screen reader ها برای افراد نابینا خوانده شود.

برای مثال میخواهیم عکسی با نام codetalk.png که در پوشه Images میباشد را نمایش دهیم.

<img src=“Images/codetalk.pngalt=“codetalk logo” >

اگر عکس در مسیر مورد نظر وجود نداشته باشد یا به هر دلیلی  حذف شده باشد ، codetalk logo به جای عکس نمایش داده میشود.

HTML Attributes

برای افزایش سئو و بهینه سازی سایت سعی کنید از این خصوصیت برای تمامی تصاویر استفاده کنید.

خصوصیت style

برای استایل دهی به یک عنصر مثلا رنگ ، فونت ، اندازه و … از خصوصیت style  استفاده میکنیم. برای مثال میخواهیم پاراگرافی با متن قرمز رنگ و اندازه ۲۰px داشته باشیم؛ کد ما به صورت زیر خواهد بود:

<p style=“color:red; font-size:20px> This is a Paragraph </p>

style attribute

در دوره css ، به آموزش استایل دهی عناصر html خواهیم پرداخت.

خصوصیت lang

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

مقدار lang ، برابر با دو حرف اول زبان مورد نظر ماست. برای مثال اگر زبان سایت ما فارسی است ، مقدار lang برابر با “fa” خواهد بود.

<html lang=“fa> </html>

خصوصیت title

با استفاده از این خصوصیت میتوانیم اطلاعاتی اضافی در مورد عنصر را به صورت tooltip نشان دهیم. هنگامی که نشانگر موس بر روی عنصری برود، توضیحات مشخص شده ظاهر خواهد شد.

<p title=“I am a tooltip> This is a Paragraph </p>

title attribute

* نکته اول : نام خصوصیات به بزرگی یا کوچکی حروف حساس نیست. برای مثال شما هم میتوانید از title و هم از TITLE استفاده کنید. ولی W3C پیشنهاد میکند که همیشه از حروف کوچک استفاده کنید.

* نکته دوم : در html5 نیازی به گذاشتن مقدار خصوصیات درون کوتیشن (” “) نیست. ولی W3C پیشنهاد میکند که مقادیر خصوصیات حتما درون کوتیشن قرار گیرند.

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

خصوصیت تعریف
alt در صورت عدم نمایش عکس ، متنی را جایگزین عکس میکند .
class برای عنصر یک class مشخص میکند.
disabled یک عنصر ورودی را غیرفعال میکند.
href یک آدرس برای لینک مشخص میکند.
id یک id منحصر به فرد برای عنصر مشخص میکند.
src یک آدرس برای عکس مشخص میکند.
style یک استایل درونی برای عنصر مشخص میکند.
title اطلاعاتی اضافی درباره عنصر مشخص میکند.
value مقدار خاصی را برای یک عنصر مشخص میکند.

منابع مورد استفاده در این آموزش

لینک منبع


دیگر قسمت ها

قسمت اول

قسمت دوم

قسمت سوم


منبع : کدتاک


نویسنده : میثم شمس