آموزش HTML (قسمت ششم) : کار با تصاویر

 

 با سلام مجدد به شما دوستداران زبان کد نویسی HTML ، در جلسه ی قبل به کار کردن با لینک ها در این زبان خاتمه دادیم و این جلسه قصد داریم تا به نکاتی درباره ی کار کردن با تصاویر بپردازیم.

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

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

صفاتی که در کنار این تگ قرار می گیرند عبارتند از :

1- صفت src : اصلی ترین صفتی که در کنار تگ <img/> استفاده می شود این صفت است. چون بیانگر آدرس تصویر است. آدرس مورد نظر می تواند نسبی  ویا مطلق باشد.

2- انواع مختلف صفت align :

*right : عکس را در سمت راست متن های مجاورش قرار می دهد.

*left : عکس را در سمت چپ متن های مجاورش قرار می دهد.

*top : قسمت بالای عکس با خطی که در آن قرار دارد تراز خواهد شد.

*middle : قسمت های میانی عکس با خطی که در آن قرار دارد تراز خواهد شد.

*bottom : قسمت پایینی عکس با خطی که در آن قرار دارد تراز خواهد شد.

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

در زبان XHTML استفاده از این صفت در تگ تصویر الزامی است حتی به صورت خالی. کاربرد دیگر این صفت این است که اطلاعاتی از تصویر موجود در صفحه ی موردنظر به موتور های جست و جو گر می دهد.

4- Border : میزان ضخامت حاشیه و یا همان مرز های دور عکس را با عددی بر حسب px مشخص می کند.

5- Height : ارتفاع عکس را بر حسب px یا درصد بیان میکند.

6- Width : عرض عکس بر حسب px یا درصد بیان می کند.

7- Hspace : میزان فاصله سمت چپ و راست عکس نسبت به عناصر اطراف را کنترل میکند.

8-Vspace : میزان فاصله سمت بالا و پایین عکس نسبت به عناصر اطراف را کنترل میکند.

استفاده از تصاویر به عنوان لینک

در واقع هیچ گاه تصویر به لینک تبدیل نمی شود اما می توان به تصویر لینک داد. بدین منظور کافی است به جای قرار دادن متن ساده در بین تگ های باز و بسته a از یک تگ img که اشاره به عکس مورد نظرتان دارد استفاده کنید. تصاویر در این حالت معمولا برای ایجاد دکمه های گرافیکی یا لینک به سایر صفحات همانند مثال زیر استفاده می شود:

لینک متنی :

<a href="http://www.mksgraphic.blogsky.com" target="_blank"> mks graphic </a>

لینک تصویری:

<a href="http://www. mksgraphic.blogsky.com" target="_blank" title="click here to return to the mksgraphic.blogsky.com" > <img src="mks graphic.jpg" alt="mksgraphic Logo" border="2" width="400"height="300" /> </a> نتیجه کد بالا در مرورگر: درج توضیحات در HTML همانند بسیاری از زبان های برنامه نویسی امکان گنجاندن توضیحات در صفحات HTML  نیز وجود دارد. معمولا از توضیحات در HTML برای خواناتر کردن کدها و مشخص کردن نقاط ابتدایی و انتهایی بخس های صفحه استفاده می شود. یک توضیح در HTML به شکل زیر است: <!-- this is a comment --> همانطور که می بینید یک توضیح با !> و با < ختم می شود. در حقیقت متنی که بین دو -- ابتدایی و دو -- انتهایی قرار میگیرد توسط مرورگر ها به عنوان comment تعبیر خواهد شد. دفت داشته باشید که بین دو -- ابتدایی و انتهایی نباید -- دیگر قرار گیرد. به عنوان مثال دستور زیر نادرست است: <!-- this is a -- comment --> یک دستور comment میتواند حاوی بیش از یک متن به عنوان توضیحات باشد. به عنوان مثال دستور زیر دو comment  را تعریف میکند: <!-- this is a -- -- comment --> در دستور فوق this is a یک comment ، و عبارت comment ، یک comment دیگر است. نکته : دقت داشته باشید که تعداد کاراکترهای -- در یک comment  صحیح باید همیشه مضزبی از 4 باشد. میتوان از comment ها برای از کار انداختن تگ های یک صفحه استفاده کرد. به عنوان مثال در کد زیر دیگر محتوای p در صفحه نمایش داده نخواهد شد: <--! this paragraph not display in page --> اما نمی توان از comment ها برای از کار انداختن صفت های داخل یک تگ استفاده کرد. به عنوان مثال کد زیر نمی تواند از عملی که صفت title انجام می دهد. جلوگیری کند: <p <!-- title="my paragraph" --> > This is a Pragraph </p> خب ، این جلسه هم به پایان رسید . امیدوارم مطالب و نکات این قسمت را هم به خوبی آموخته باشید . در ضمن در صورت داشتن هرگونه مشکل در بخش نظرات سوال خود را بیان کنید تا به زودی پاسخ داده شود.در جلسه ی بعد به مقوله ی فوق العاده مهمی می پردازیم. این مقوله ، مقوله ی کار با لیست هاست که در ساخت قالب خیلی پرکاربرد است . چه در ساخت منو های افقی و چه در ساخت لیست های عمودی.                                                                                  به امید دیدار ، ام کی اس گرافیک