خانه / مقالات اموزشی / html / آموزش قرار دادن تصویر در html
آموزش HTML5
آموزش HTML5

آموزش قرار دادن تصویر در html

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

تگ </ img>

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لینک متنی :

لینک تصویری:

 

 

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

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

 

درج توضیحات در HTML

همانند بسیاری از زبان های برنامه نویسی امکان گنجاندن توضیحات در صفحات HTML نیز وجود دارد. معمولا از توضیحات در HTML برای خواناتر کردن کدها و مشخص کردن نقاط ابتدایی و انتهایی بخس های صفحه استفاده می شود. یک توضیح در HTML به شکل زیر است:

 

همانطور که می بینید یک توضیح با !> و با < ختم می شود. در حقیقت متنی که بین دو — ابتدایی و دو — انتهایی قرار میگیرد توسط مرورگر ها به عنوان comment تعبیر خواهد شد.

دفت داشته باشید که بین دو — ابتدایی و انتهایی نباید — دیگر قرار گیرد. به عنوان مثال دستور زیر نادرست است:

یک دستور comment میتواند حاوی بیش از یک متن به عنوان توضیحات باشد. به عنوان مثال دستور زیر دو comment  را تعریف میکند:

 

در دستور فوق this is a یک comment ، و عبارت comment ، یک comment دیگر است.

نکته :دقت داشته باشید که تعداد کاراکترهای — در یک comment  صحیح باید همیشه مضزبی از ۴ باشد.میتوان از comment ها برای از کار انداختن تگ های یک صفحه استفاده کرد. به عنوان مثال در کد زیر دیگر محتوای p در صفحه نمایش داده نخواهد شد:
 

اما نمی توان از comment هابرای از کار انداختن صفت های داخل یک تگ استفاده کرد. به عنوان مثال کد زیر نمی تواند از عملی که صفت title انجام می دهد. جلوگیری کند:

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

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

پاسخی بگذارید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net