آموزش کار با صفات یا Attributes در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با صفات یا Attributes در HTML با من همراه باشید.

آموزش کار با صفات یا Attributes در HTML

Free-Learn

کار با صفات یا Attributes در HTML

صفت یا Attribute میتواند یکسری اطلاعات را به یک عنصر در HTML ارائه دهد، تعداد صفت های عناصر در HTML‌ بسیار زیاد می باشند لذا همه ی آنها را در این قسمت ارائه نخواهم داد بلکه فقط چندین صفت پرکاربرد و ضروری را در این قسمت ارائه خواهم داد تا بطور کلی با صفات در HTML آشنا شوید.

نکاتی درباره صفات یک عنصر در HTML :

  • تمامی عناصر موجود در HTML میتوانند صفت داشته باشند
  • یک صفت یکسری اطلاعات در مورد عنصر مورد نظر میدهد
  • یک صفت همیشه در قسمت تگ شروع یک عنصر قرار میگیرد
  • یک صفت معمولا از دو قسمت تشکیل می شود (نام صفت + مقدار)
  • صفات در HTML به حروف کوچک و بزرگ انگلیسی حساس نیستند ولی پیشنهاد میکنم حتما با حروف کوچک انگلیسی بنویسید.
  • در HTML5 اگر در قسمت مقدار یک صفت علامت های ” ” را نگذارید باز هم خروجی صحیح به شما نمایش داده می شود. البته به شرطی که در محتوای مقدار یک صفت، فاصله ای ایجاد نشود. و اگر فاصله ای ایجاد شود لازم و ضروری است که از ” ” استفاده شود.
  • مقدار یک صفت را در بین تک کوتیشن ‘ ‘ یا دوبل کوتیشن ” ” میشه گذاشت و فرقی ندارد.حتی از هر دو در کنار هم میشه استفاده کرد.

پیشنهاد میکنم حتما لیست کامل صفات عمومی HTML را مشاهده نمایید.

پیشنهاد میکنم حتما لیست کامل صفات خصوصی تگ های HTML را مشاهده نمایید.

Free-Learn

صفت Href

این صفت یکی از پرکاربردترین صفت ها در تمامی صفحات وب در دنیا می باشد، ما از این صفت در تگ <a> استفاده میکنیم، برای اضافه کردن یک آدرس مقصد جهت کلیک کاربر بروی آن و انتقال آن به مکانی دیگر استفاده می شود.

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

آموزش صفت href را بصورت کامل تر مطالعه نمایید.


امتحان کنید

Free-Learn

صفت Src

این صفت هم به نوبه ی خودش یکی از پرکاربردترین صفات در HTML‌ می باشد، که در تگ <img> مورد استفاده قرار میگیرد. ما با استفاده از این صفت میتونیم آدرس یا منبع یک تصویر را مشخص نماییم، در قسمت های بعدی بطور کامل با تگ <img> آشنا خواهید شد.

آموزش صفت src را بصورت کامل تر مطالعه نمایید.


امتحان کنید

Free-Learn

صفت Width و Height

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

آموزش صفت Width و Height را بصورت کامل تر مطالعه نمایید.


امتحان کنید

Free-Learn

صفت Alt

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

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

این صفت تاثیر بسیار مثبتی در سئوی یک تصویر و بطور کلی یک وبسایت و نمایش آن در موتورهای جستجوگر دارد، لذا همیشه سعی کنید از صفت Alt در تصاویرتان استفاده نمایید.

آموزش صفت alt را بصورت کامل تر مطالعه نمایید.


امتحان کنید

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

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

امتحان کنید

Free-Learn

صفت Style

صفت استایل یا style از نظره من یکی از جذابترین صفات در HTML‌ می باشد که ما با استفاده از آن میتوانیم ظاهر یک عنصر رو مانند اندازه،رنگ و.. از طریق دستورات CSS مشخص نماییم. برای یادگیری کامل و قدم به قدم زبان CSS پیشنهاد میکنم آموزش های سی اس اس CSS فری لرن رو دنبال نمایید.

در قسمت های بعدی از آموزش HTML بطور کامل با آموزش نحوه استفاده از Style در HTML آشنا خواهید شد ولی در اینجا فقط میخوام بطور کلی با صفت Style آشنا شوید.

آموزش صفت Style را بصورت کامل تر مطالعه نمایید.


امتحان کنید

Free-Learn

صفت Title

صفت تایتل یا عنوان یکی دیگر از صفات کاربردی در HTML‌ می باشد، این صفت تقریبا میشه گفت صفتی است که در اکثریت عناصر HTML مورد استفاده قرار میگیرد، کاره اصلی این صفت اینه که یک متن را برای عنوان یک عنصر مشخص نماید.

صفت Title موقعی که ماوس بروی عنصر برای چند لحظه قرار بگیرد نمایش داده می شود.

آموزش صفت Title را بصورت کامل تر مطالعه نمایید.


امتحان کنید

خب دوستان عزیز و محترم به پایان آموزش کار با صفات یا Attributes در HTML رسیدیم، همونطور که گفتم تعداد صفات HTML زیاد می باشند لذا در آینده ان شاالله با همه ی صفات این زبان آشنا خواهید شد.

Free-Learn

  • خلاصه ی این بخش
  • صفت چیزی هست که درون یک تگ قرار میگیرد و میتونه یکسری ویژگی یا امکاناتی را به یک تگ اضافه کند.
  • یک صفت معمولا دارای ۲ قسمت می باشد: (قسمت اول» نام صفت) و (قسمت دوم»مقدار صفت)
  • برخی از صفات هستند که تنها هستند، یعنی هیچ مقداری ندارند.
  • یک صفت همیشه در قسمت ابتدایی یا تگ شروع یک عنصر قرار میگیرد.
  • صفت href درون تگ a میتواند مقصد یا مکانی که باید کاربر به آن منتقل شود را مشخص کند.
  • صفت src درون تگ img میتواند محل/مکان فایل تصویر را مشخص کند.
  • با استفاده از صفات Width و Height میتوان اندازه عرض و ارتفاع یک عنصر را مشخص کرد.
  • با استفاده از صفت alt میتوان یک متن را جایگزین یک تصویر کرد تا اگر مشکلی برای نمایش تصویر به وجود آمد، آن متن جایگزین نمایش داده شود.
  • با استفاده از صفت Style میتوان برای یک تگ با استفاده از دستورات سی اس اس استایل تعریف کرد.
  • با استفاده از صفت Title میتوان عنوان یک تگ را مشخص کرد، که وقتی ماوس بروی تگ برای چند لحظه بی حرکت ماند آن عنوان یا متن به نمایش در می آید.
  • سعی کنید همیشه از صفات Width و Height و alt درون تگ img استفاده نمایید.
  • وجود صفت href درون تگ a برای ایجاد یک لینک ضروری می باشد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید