کار با تصاویر در HTML

 

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

تگ </ img>

 

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

7Learn <a  style=آموزش HTML (قسمت 6) : کار با تصاویر در HTML" title="آموزش HTML (قسمت 6) : کار با تصاویر در HTML 7learn.com" width="400" height="153" />

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

 

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

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

img tag <a  style=آموزش HTML (قسمت 6) : کار با تصاویر در HTML" title="آموزش HTML (قسمت 6) : کار با تصاویر در HTML 7learn.com" width="505" height="303" />

 

حال شما را با خصوصیات این تگ آشنا می نماییم:

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

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

 


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

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

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

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

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

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

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

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

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

 

لینک متنی :

 

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

 

لینک تصویری:

 

<a href="http://www.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>

 

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

 

link 7learn <a  style=آموزش HTML (قسمت 6) : کار با تصاویر در HTML" title="آموزش HTML (قسمت 6) : کار با تصاویر در HTML 7learn.com" width="503" height="302" />

 


 

درج توضیحات در 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 Paragraph </p>

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

ارسال نظر