صفات در html

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

اما به هنگام استفاده از تگ های html، گاهی نیاز هست از صفات html یا همان html attributes استفاده شود. در مورد مشخه ها لازم است بدانید:

صفات html در تگ شروع به کار می روند.

برخی از صفات در html برای تمام تگ ها به کار می روند. اما برخی تگ ها صفات مخصوص به خود را دارند.

صفات در html به صورت:

attribute-name=”attribute value”

به کار میروند که در آن attribute-name نام صفت است و attribute value مقدار صفت است که به وسیله ی یک جفت “ محصور شده است. برای درک مشخصه ها به مثال زیر توجه کنید:

درست کردن لینک با html

برای ایجاد لینک در اچ تی ام ال، از تگ <a> استفاده می شود. به کد زیر توجه کنید:

[php]<a href=”https://onliner.co”>learn web design</a>[/php]

که در آن تگ <a> برای نشانه گذاری لینک مورد استفاده قرار میگیرد. همچنین از صفت href برای مشخص کردن آدرس لینکی که می خواهید به آن صفحه ارجاع بدهید، استفاده می شود. مثلا در مثال بالا وقتی شما کد html را در مرورگر اجرا کنید، مشاهده خواهید کرد که متن learn web design به نمایش در می آید که با کلیک بر روی آن به آدرس https://onliner.co خواهید رفت.

صفت title در لینک ها

همچنین برای توسعه دادن مثالی که در بالا آوردیم، فرض کنید مشخصه ی title را به تگ <a> اضافه می کنیم تا کد ما به صورت زیر تغییر پیدا کند:

[php]<a href=”https://onliner.co” title=”farsi resource for learning”>learn web design</a>[/php]

وقتی کد بالا را به صورت کد اچ تی ام ال در مرورگر خود اجرا کنید، مشاهده خواهید کرد که وقتی ماوس را بر روی لینک می برید، عبارت farsi resource for  learning به صورت یک tool tip ظاهر می شود.

در حقیقت از صفت title برای در اختیار قرار دادن اطلاعات بیشتر برای لینک مورد نظر استفاده می شود.

قرار دادن تصاویر با html

برای قرار دادن تصاویر در صفحات وب، از تگ <img /> استفاده می شود. این تگ از جمله ی تگ هایی است که محتوا ندارد و به صورت تکین به کار می رود. همانطوری که قبلا آموزش داده شد، به این نوع تگ ها، self closing tags گفته می شود. به مثال زیر توجه کنید:

[php]<img src=”http://google.com/logo.png”  />[/php]

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

صفت alt برای تصاویر

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

[php]<img src=”http://google.com/logo.png”  alt=”Google Logo”  />[/php]

در مثال بالا، اگر تصویری که در آدرس http://google.com/logo.png هست، بنا به هر دلیلی در مرورگر لود نشود، متن Google Logo نشان داده می شود.

صفت های اجباری و صفت های اختیاری:

در html استفاده از برخی صفات اجباری است، به طوری که تگ مورد نظر بدون بکارگیری مشخصه ی ضروری، کارآیی لازم را ندارد. در مثال های بالا، مشخصه های href و src بترتیب برای تگ های <a> و <img /> صفت های ضروری محسوب می شوند اما title و alt صفت های اختیاری محسوب می شوند.

نکته:

اگر می خواهید با استفاده از xhtml طراحی صفحات وب را انجام بدهید، استفاده از صفت alt برای تگ های <img /> کاملا ضروری است. این یکی از تفاوت های اصلی بین html و xhtml می باشد.