جلسه چهارم را به بحث در مورد Attribute ها و تگ img اختصاص میدهیم.
attribute ها (خصوصیات)
attribute ها صفت یا ویژگی خاصی را برای تگ تعریف می کنند. و می توانند یکسری اطلاعات به آن ها افزوده یا آن ها را اصلاح کنند و همیشه در تگ آغازین المان ها می آیند. بیشتر خصوصیات دارای یک مقدار (value) هستند. توجه کنید که حتماً مقدار بین علامت کوتیشن (" ") باشد و مابین attribute و value علامت مساوی قرار گیرد. value مقدار و نوع خصوصیت تگ را تعیین می کند. به مثال زیر نگاه کنید:
<p align="center"> This text is aligned to center </p>
در مثال بالا align یک attribute و center مقدار آن است. خاصیت align ترازبندی متن یا المان در جهت افقی را تعیین می کند. که شامل مقادیر center ،right و left می باشد. نتیجه کد بالا را در تصویر زیر می بینیم که متن را به وسط صفحه انتقال داده است:
در مثال زیر یک پاراگراف را می بینیم که در وسط قرار داده شده و یک خط که در سمت راست صفحه آمده است:
<html> <head> <title> Attributes </title> </head> <body> <p align="center"> This is a text <br> <hr width="10%" align="right" > This is also a text. </p> </body> </html>
همانطور که در تصویر زیر می بینیم؛ متن اول در وسط، خطی که توسط تگ hr ایجاد شده، در سمت راست صفحه با پهنایی که خودمان تعیین کردیم و متن دوم در سمت چپ قرار گرفته است.
خاصیت valign ترازبندی متن را در جهت عمودی تعیین می کند که دارای مقادیر middle ،top و bottom می باشد.
خصوصیات مربوط به اندازه و سایز المان ها (Attribute Measurements)
بطور مثال ما می توانیم پهنای خط افقی که با استفاده از تگ <hr> رسم می کنیم را تغییر دهیم. این کار به کمک خاصیت width امکان پذیر است.
<hr width="50px">
پهنای المان هم توسط پیکسل (px) و هم توسط درصد (%) تعیین می شود:
<hr width="50%">
تگ img
برای قرار دادن یک تصویر یا عکس در صفحه از تگ img استفاده می کنیم. محتوای این المان فقط attributeها هستند، این المان تگ پایانی ندارد. آدرس تصویر (URL=Uniform Resource Locator) توسط خاصیت src که مخفف source می باشد، تعیین می شود. تگ img در HTML به صورت زیر نوشته می شود:
<img src="image.jpg" alt="توضیحات" >
دقت کنید که عکس موردنظر که قصد قرار دادن آن در صفحه را داریم حتما باید در همان پوشه ای باشد که فایل html را ذخیره کردیم. مقدار src که بین علامت کوتیشن (" ") آمده است، آدرس عکس به همراه نام آن می باشد. با کد زیر می توانیم عکس دلخواه خود را در صفحه بیاوریم:
<html> <head> <title> first page </title> </head> <body> <img src="tree.jpg" alt="عکسی زیبا از درخت" > </body> </html>
توجه داشته باشید که برای قرار دادن عکس در سایت خود طوری که بقیه افراد قادر به دیدن آن باشند باید فایل عکس را در یک سرور آپلود کرده لینکی که سرور می دهد را در قسمت src قرار دهیم. در مواقعی که به هر دلیل (مثلاً مشکل داشتن سرور یا عدم پشتیبانی مرورگر)، عکس نمایش داده نشود عبارتی که در خصوصیت alt می نویسیم، نمایش داده می شود. که این عبارت می تواند توضیحی در مورد عکس باشد یا اینکه دلیل نمایش ندادن عکس را بیان کند. دقت کنید که وجود خصوصیت alt الزامی است.
برای تغییر اندازه عکس از خصوصیات width و height استفاده می کنیم. که این خصوصیات با پیکسل و درصد تعیین می شوند.
<html> <head> <title> first page </title> </head> <body> <img src="tre.jpg" height="150px" width="150px" alt="توضیحات" > <!-- یا --> <img src="tre.jpg" height="150%" width="150%" alt="توضیحات" > </body> </html>
توجه کنید که عکس با حجم زیاد، سرعت باز شدن صفحه شما را پایین می آورد؛ پس در انتخاب عکس دقت کنید.
به طور پیش فرض عکس بدون کادر در صفحه قرار می گیرد. برای قرار دادن کادر اطراف عکس از خصوصیت border در تگ img استفاده می کنیم. هرچه عدد مربوط به ضخامت کادر بشتر باشد، کادر ضخیم تر می شود.
<img src="tree.jpg" height="150px" width="150px" border="1px" alt="توضیحات" >
البته در نسخه های ۹ و پایین تر از مرورگر Internet Explorer بدون تعریف خصوصیت border، عکس با یک حاشیه نمایش داده می شد.
با ادامه توضیحات ما در مورد HTML5 در جلسات بعدی همراه باشید.
دیدگاه بگذارید