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

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

تگ </ img>

برای قرار دادن عکس‌ها در صفحه از این تگ استفاده می‌شود. که جزء تگ‌های تهی نیز هست و نیاز به تگ پایانی ندارد. به طور مثال فرض کنید ما چنین تصویری داریم:

حالا میخواهیم آن را در فایل html مان بگنجانیم. برای این کار میتوان از چنین کدی استفاده کنیم:

<img src="7learn.png" alt="7Learn Logo" border="2" width="400" height="150" />

نتیجه در مرورگر:

حال شما را با صفت‌های این تگ آشنا می‌کنیم:

align : این صفت نحوه قرار گیری عکس نسبت به متن و عناصر اطرافش در صفحه را کنترل میکند. که میتواند مقادیر زیر را بپذیرد:

•  right : عکس را در سمت راست متون اطرافش قرار می‌دهد.
• left : عکس را در سمت چپ متون اطرافش قرار می‌دهد.
• top : قسمت بالای عکس با خطی که در آن قرار دارد تراز خواهد شد.
• middle : میانه های(وسط) عکس با خطی که در آن قرار دارد تراز خوهد شد.
• bottom : قسمت پایینی عکس با خطی که در آن قرار دارد تراز خوهد شد.

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

border : میزان ضخامت حاشیه عکس را با عددی بر حسب px مشخص می‌کند.

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

width : عرض عکس بر حسب px یا درصد بیان می‌کند.

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

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

src : این صفت اصلی‌ترین صفت برای تگ img است و آدرس عکسی که میخواهیم نمایش داده شود را مشخص میکند. مقدار این صفت می‌تواند یکی از انواع آدرس‌های نسبی و مطلق باشد.

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

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

لینک متنی :

<a href="https://7learn.com" target="_blank"> 7Learn </a>

لینک تصویری:

<a href="https://7learn.com" target="_blank" title="click here to return to the 7Learn.com" > <img src="7learn.png" alt="7Learn Logo" border="2" width="400" height="150" /> </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 دیگر است.

<--! this paragraph not display in page -->

<p <!-- title="my paragraph" --> > This is a Pragraph </p>

در مطلب بعدی به کار با لیست‌ها و طریقه ایجاد آن‌ها خواهیم پرداخت.

نویسنده

طاها دریس