ويژگي هايhtml اطلاعات زيادتري براي عناصرش تامين ميكند .براي ويژگي ها موارد زيرامورد توجه قرار دهيد.
تگ<a> يك پيوند يا هايپرلينك را مهيا ميكند .ويژگيhref آدرس urlصفحه اي كه بايد لينك انجام گيرد مشخص ميكند.
نمونه استفاده تگ<a> با ويژگي href
<a href="https://www.w3schools.com">Visit W3Schools</a>
مثال ـ نمونه برنامه استفاده از تگ<a>
<!DOCTYPE html> <html> <body> <h2>The href Attribute</h2> <p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p> <a href="https://www.w3schools.com">Visit W3Schools</a> </body> </html>
در ارتباط با لينك اطلاعات بيشتري در بخش اختصاصي آن مشاهده ميكنيد.
تگ<img> براي قرار دادن تصوير درصفحه بكار ميرود.ويژگي src در تگ فوق مسير ونام فايل تصويري كه بايد نمايش داده شود، مشخص ميكند .نمونه دستور مطابق زير
<img src="img_girl.jpg" width="500" height="600">
مثال ـ نمونه استفاده از تگ<img>
<!DOCTYPE html> <html> <body> <h2>The src Attribute</h2> <p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p> <img src="img_girl.jpg" width="500" height="600"> </body> </html>
بدو روش آدرسurl را در src مشخص ميشود .مطابق زير :
تذكر ـ تصوير خارجي ممكن است تحت قانون كپي رايت باشد، واگر اجازه استفاده ازآنرا دريافت نكنيد، ممكن است قانون كپي رايت را نقض كنيد .علاوه براين شما كنترل تصوير را نداريد، امكان دارد بطور ناگهاني حذف يا تغييركند.
تگ تصوير داراي دو ويژگيwidthوheight ميباشد .اين دو ابعاد تصوير را مشخص ميكنند .مقدارآنها برحسب پيكسل اعلام ميشود .نمونه دستور مطابق زير:
<img src="img_girl.jpg" width="500" height="600">
مثال ـ نمونه استفاده از تصوير با ابعاد تصوير
<!DOCTYPE html> <html> <body> <h2>Width and Height Attributes</h2> <p>The width and height attributes of the img tag, defines the width and height of the image:</p> <img src="img_girl.jpg" width="500" height="600"> </body> </html>
ويژگيalt براي تگ تصوير ضروري ميباشد .در اين ويژگي متن كمكي براي عدم نمايش تصوير ميتواند باشد .در هنگاميكه در نمايش تصوير اشكالي باشد، متن ظاهر شده وميتواند كمك كند.
نمونه تگ تصوير با ويژگيalt
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
مثال ـ نمايش تصوير با ويژگيهاي مطرح شده
<!DOCTYPE html> <html> <body> <h2>The alt Attribute</h2> <p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image contains:</p> <img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600"> </body> </html>
مثال ـ مشاهده كنيد كه چه اتفاقي مي افتد وقتي تصوير وجود ندارد.
<!DOCTYPE html> <html> <body> <img src="img_typo.jpg" alt="Girl with a jacket"> <p>If we try to display an image that does not exist, the value of the alt attribute will be displayed instead. </p> </body> </html>
باstyle ميتوان تركيبي از ويژگيهائي مثل رنگ ،فونت ،انداره وغيره را براي عنصر htmlاعلام نمود .نمونه استفاده استايل در تگ<p>
<p style="color:red;">This is a red paragraph.</p>
مثال ـ نمونه استفاده ازstyle
<!DOCTYPE html> <html> <body> <h2>The style Attribute</h2> <p>The style attribute is used to add styles to an element, such as color:</p> <p style="color:red;">This is a red paragraph.</p> </body> </html>
در موردstyle دربخش هاي بعدي مطالب بيشتر خواهيم گفت.
براي كمك به موتور هاي جستجو بهتر است هميشه ويژگيlang را در داخل تگ <html>قرار دهيد .اين ويژگي زبان صفحه را مشخص ميكند .
مثال ـ در مثال زير انگليسي بعنوان زبان ميباشد.
<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
پيشنهاد ميشود مقادير ويژگيها در داخل كوتيشن گذاشته شود .اما درhtml استاندارد لازم نيست اين كار انجام شود، وبدون كوتيشن هم قابل قبول ميباشد. با اين حالW3C پشنهاد ميكند كه مقاديربراي html در داخل كوتيشن باشد، اما براي اسناد XHTML تقاضاي رعايت آنرا دارد .با اين حال اعلام مقادير با كوتيشن خوب منظور ميشودو بدون آن بد.
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
گاهي اوقات بايد از كوتيشن براي اعلام مقادير استفاده كنيد .در مواقعيكه متن داراي بلنك باشد وبخواهد براي مقدار ويژگي استفاده شود، بايد از كوتيشن استفاده شود .به نمونه زير توجه كنيد كه نتيجهtitle درست نمايش داده نميشود.
<p title=About W3Schools>
مثال ـ نمونه نادرست بالا
<!DOCTYPE html> <html> <body> <h1>About W3Schools</h1> <p title=About W3Schools> You cannot omit quotes around an attribute value if the value contains spaces. </p> <p><b> If you move the mouse over the paragraph above, your browser will only display the first word from the title. </b></p> </body> </html>
دبل كوتيشن عموما در اطراف مقادير ويژگيHTML قرار ميدهند .ولي از كوتيشن هم ميتوان استفاده كرد .اما درحالتيكه مقدار مشخصه خود، داراي گيومه هاي دوگانه است لازم است ازهردودرآن استفاده شود .مطابق زير
يا بصورت زير
مثال ـ استفاده كوتيشن ودبل كوتيشن تركيبي
<html> <body> <h2>Single or Double Quotes?</h2> <p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p> <p>Move your mouse over the paragraphs below to see the effect:</p> <p title='John "ShotGun" Nelson'>John with double quotes</p> <p title="John 'ShotGun' Nelson">John with single quotes</p> </body> </html>