تا %60 تخفیف خرید برای 6 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه


نکات مربوط به attribute ها


1- ساختار کلی (نه همیشه) یک تگ در اچ تی ام ال به صورت زیر می باشد:

<tagname>Content</tagname>

2- تگهای اچ تی ام ال می توانند تو در تو باشند یعنی برای مثال شما می خواهید متنی را به صورت پاراگراف و عنوان به نمایش در بیاورید خب برای اینکار ابتدا یکی از تگ ها را نوشته سپس تگ بعدی به عنوان محتوای تگ اول شناسایی شده و در بخش محتوای تگ دوم متن را بنویسید.یک قانون کلی تگی که اول از همه باز می شود در آخر از همه نیز بسته خواهد شد. یک مثال ساده:

<h1>
<p>
This text is title also paragraph
</p>
</h1>

توجه داشته باشید که تگ عنوان اول باز شده است و در انتهای همه بسته شده است. به این نوع کدنویسی در اچ تی ام ال تودرتو یا Nested می گویند.

3- تگ های خالی اچ تی ام ال به تگ هایی گفته می شود که علاوه بر اینکه دارای تگ پایانی نیستند برای درست کار کردن احتیاج خاصی به صفتی هم ندارند، مثل تگ <br> ! این تگ برای آن استفاده می شود که یک خط شکسته شود. در اچ تی ام ال برای شکستن خط یا به اصطلاح اینتر کردن باید از این تگ استفاده کنید، زدن دکمه اینتر هیچ کاربردی ندارد. حتی زدن دکمه Space بیش از یک کاراکتر نیز هیچ فایده ای ندارد!

4- نکته ی پایانی، اچ تی ام ال یک زبان حساس به بزرگی یا کوچکی کلمات نیست یعنی نوشتن <P> و <p> با هم برابر هستند و هیچ تفاوتی ندارند، اما من نمیدونم چرا هیچوقت از کلمات بزرگ استفاده نمی کنم پیشنهاد می کنم شما هم استفاده نکنید!

صفات یا Attributes


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

  • تمام تگهای اچ تی ام ال می توانند شامل صفات باشند.
  • صفات اطلاعات اضافی درباره تگ ها می دهند و کاربرد تگ ها را توسعه می بخشند.
  • تمام صفات بدون استثنا در قسمت آغازین تگ ساخته می شوند.
  • هر صفت دارای یک نام/مقدار می باشد. به ساختار زیر توجه داشته باشید:
  • <tagname tagattributes="Value">
    

مثال:

<a href="http://www.tosinso.com"></a>
  • a نام تگ
  • href: نام صفت
  • http:////www.tosinso.com: مقدار صفت

چند صفت مهم و کاربردی در اچ تی ام ال برای تگ ها


  • صفت Lang در تگ HTML : برای تعیین نام سایت که برای مرورگرها بسیار مهم است و همچنین بعضی اوقات گوگل ترانسلیت براساس آن تصمیم به ترجمه سایت می کند صفت Lang می باشد که مربوط به تگ <html> می باشد.
  • <html lang="fa_IR">
    </html>
    یا
    <html lang="en_US">
    </html>
    

اجزای اصلی مقادیر صفت Lang زبان و کشور می باشد، یعنی به صورت زیر استفاده می شود:

(language_country)

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

فارسی: fa
انگلیسی: en
کردی: ckb
-
ایران: IR
آمریکا: US
انگلیس: UK

توجه داشته باشید که خیلی اوقات کشور تعیین کننده زبان نیز می باشد برای نمونه ما دو نوع فارسی داریم یکی فارسی که در ایران استفاده می شود و فارسی افغانستان یا دری!

صفت title در تگ P: زمانی که میخواهیم برای پاراگراف هایمان یک عنوان قرار دهیم از صفت title استفاده می کنیم اما توجه کنید که این عنوان به صورت تولتیپ ظاهر می شود یعنی زمانی که ماوس روی متن اصلی پاراگراف رفت یا Hover شدبه صورت یک تولتیپ ظاهر میشه کد زیر را اجرا کنید تا متوجه شوید:

<p title="I'm a tooltip">
This is a paragraph.
</p>
  • صفت href در تگ a : تگ a جزو آن دسته از تگ هاست که بدون صفت هیچ کاری را انجام نمیدهد یکی از صفت های این تگ href می باشد که آدرس مربوط به لینک را در آن می نویسیم به مثال زیر توجه کنید:
  • <a href="http://www.tosinso.com">This is a link</a>
    

در این مثلا متنی با عنوان "This is a link" ظاهر می شود که با کلیک روی آن وارد سایت Itpro.ir می شود.

  • صفت های مربوط به تگ img : تگ img نیز مثل تگ a بدون صفت هیچ کاربردی ندارد، اولین صفت مهم این تگ صفت منبع یا src می باشد که آدرس تصویر را معلوم می کند. صفت اندازه در تگ img نیز یکی از مهمترین تگ ها می باشد برای اندازه از دو صفت width و height استفاده میکنیم که در هر دو حالت مقدار عددی با فرمت px همراه است. و آخرین و جالبترین صفت این تگ alt می باشد که برای زمانی مناسب است که آدرس تصویر تغییر کرده باشد یا بنا به هر دلیلی تگ img قادر به نمایش تصویر نباشد، مقدار این صفت نمایش داده می شود. مقدار این صفت همیشه متنی می باشد. به مثال زیر توجه کنید:
  • <img src="c:/1.jpg" width="104" height="142" alt="ITPRO"> 
    

در این کد یک تصویر واقع در آدرس c: با نام 1.jpg ظاهر می شود اگر بنا به هر دلیلی این تصویر نمایش داده نشود متن ITPRO نمایش داده می شود.

چند نکته مهم دراین بخش


  • همانطور که متوجه شدیم مقدار صفات باید در بین دوبل کتیشن قرار بگیرد اما در اچ تی ام ال 5 می توان بدون این علامت هم صفتی را مقدار دهی کرد. با این حال من پیشنهاد میکنم از دوبل کتیشن استفاده کنید.
  • می توانیم از کتیشن و دوبل کتیشن نیز استفاده کرد، مثلا زمانی که در مقداردهی ما به کاراکتر " نیاز داریم(یعنی می خواهیم نمایش دهیم) باید از تک کتیشن استفاده کنیم! مثال:
  • <p title="John 'ShotGun' Nelson">
    یا
    <p title='John "ShotGun" Nelson'> 
    

برای دیدن لیست کاملی از تگ ها می توانید به این آدرس بروید.

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند