سرخط خبرها

تگ عکس در HTML

تگ عکس در HTML

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

تگ <img> برای نمایش عکس ها در صفحات html :

یکی از مهمترین و پر استفاده ترین تگ ها در HTML تگ img یا عکس می باشد.

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

در html از تگ <img> برای نمایش عکس ها استفاده می شود ، به این صورت که باید آدرس عکس مورد نظرمان را در تگ <img> بنویسیم . برای این منظور از مشخصه src در تگ <img> استفاده می شود .

در HTML امکان فراخوانی عکس با یک تگ ساده وجود دارد و این تگ نیاز به بسته شدن هم ندارد .

مهمترین خصوصیات <img> بصورت زیر است:

 خصوصیت  مقادیر و توضیح مختصر
 src آدرس عکس در فضای وب 
alt متن جایگزین متن
width عرض تصویر به پیکسل
height ارتفاع تصویر به پیکسل
border مقدار پیکسل حاشیه (پیش فرض صفر)
usemap نام شناسه ی نقشه ی تصویر متصل به عکس

 

خصوصیت Src : در این خصوصیت که اصلی ترین خصوصیت تگ <img> می باشد ، آدرس تصویر آپلود شده در فضای اینترنت قرار میگیرد. 

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

ساختار ساده یک تگ عکس در HTML :

<“imgsrc=”farzad.jpg”alt=”farzad logo”width=”104″height=”142>

 یک تگ عکس در حالت ساده مشابه کد بالا ، چند ویژگی دارد که در ادامه ذکر می کنیم.

۱- آدرس عکس با src فراخوانی می شود .

شما می توانید برای لود شدن عکس از سطح وب ، آدرس آن را به ویژگی src نسبت دهید که دو حالت دارد.

اول ) عکس از دامنه و سایت دیگری است و شما آدرس آن عکس را در بخش src قرار می دهید. مانند : http://sitename.com/image.png

دوم ) عکس داخل هاست و فضای وب سایت شماست، و برای فراخوانی آن نیازی به ذکر نام دامنه مانند حالت اول نیست. کافیست در بخش src نام عکس به همراه پسوند آن را بنویسید. مانند نمونه ای که در بالا ارائه شد.

مثال :

<img   src=”http://jizjiz.ir/administrator/files/UploadFile/1.jpg”   />

۲- ویژگی alt :

این ویژگی برای زمانی است که آدرس عکس فراخوانی شده ، به هر دلیلی لود نمیشود.

مثلاً فرض کنید به دلیل قطع شدن کانکشن کاربری که وب سایت شما را باز می کند یا حتی اشتباه وارد کردن src توسط شما، عکسی برای کاربر نمایش داده نمیشود. در این صورت ، اگر یک عبارت در ویژگی alt وارد کرده باشید، آن عبارت برای کاربر نمایش داده میشود.

در مثال ساده بالا، اگر عکس نمایش داده نشود ، عبارت farzad logo به نمایش در می آید.

اهمیت ویژه ی این خصوصیت برای موتورهای جستجوگر می باشد که در بخش Seo به آن می پردازیم. به طور خلاصه اینکه موتور های جستجوگر قادر به خواندن عکس نمی باشند و از طریق این خصوصیت به محتوای عکس قرار داده شده مطلع می گردند.

توصیه ی اکید میشود که برای تمامی عکس ها از این خصوصیت استفاده نمایید.

مثال:

<img src=”administrator/files/UploadFile/1.jpg1″ alt=”عکس مربوط به چشم” />

۳- ویژگی طول و عرض عکس :

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

دو ویژگی کاربردی دیگر در تعریف عکس ها در تگ عکس، طول و عرض عکس می باشد که به ترتیب ، طول با height  و عرض با width شناخته می شود. کافیست مقدار طول و عرض مورد نظر را بر حسب پیکسل در این ویژگی ها تعریف کنید تا عکس شما به آن طول و عرض نمایش داده شود. البته بجز مقدار مورد نظر شما، می توان به این ویژگی ها auto هم نسبت داد تا بصورت اتوماتیک طول و عرض شناسایی و نمایش داده شود و عکس در سایز اصلی به نمایش درآید.

این ویژگی ها در حالت عادی بهتر است وارد شوند و اگر وارد نشوند ، باعث مشکلاتی می شوند . فرض کنید عکس مورد نظر شما به هر دلیلی نمایش داده نشود، در این صورت، مرورگر حین لود کردن کل صفحه ، فضایی مخصوص آن عکس در نظر نمی گیرد و ممکن است باعث به هم ریختگی قالب شما شود . همچنین تعیین طول و عرض عکس در تگ HTML آن از یک جهت دیگر موثر و مفید است.

شما فرض کنید صفحه ای طراحی میکنید که بیش از ۲۰ عکس مختلف کوچک و بزرگ دارد . طبیعی ست مدت زمانی طول می کشد تا آن عکس ها یک به یک لود شوند. مخصوصاً با وضعیت اسفناک اینترنت ایران ، ما با سرعت خوبی مواجه نیستیم و عده زیادی از مردم ، همچنان از اینترنت های معمولی و حتی دایل آپ استفاده می کنند. لذا تصور کنید صفحه ای با تعداد عکس متوسط و بالا را این افراد باز کنند. اگر طول و عرض عکس ها معرفی و تعریف نشده باشد، آنها برای مشاهده قالب و layout کلّی صفحه ی سایت شما ، مجبورند صبر کنند تا تمامی عکس ها یک به یک باز و لود شوند. تا با layout اصلی قالب شما (طرح کلی مد نظر شما) مواجه شوند.

ولی اگر طول و عرض ها تعریف شوند، با باز شدن صفحه ی سایت ، layout اصلی قالب شما به نمایش در می آید و مرورگر فضایی را برای عکس های فراخوانی شده توسط شما در نظر می گیرد. حالا این عکس ها چه باز بشوند و چه باز نشوند، طرح کلی قالب شما برای بازدید کننده مشخص و نمایان است. پس هرگز این دو ویژگی را از یاد نبرید. البته نمی توان از اثر خوبی که تعریف این دو ویژگی روی سئو و بهینگی سایت شما دارن هم چشم پوشی کنیم.

در مباحث ابتدایی شرح داده شد که بهتر است بر روی desktop خود فولدری به نام www.mysite.com بسازید و در آن فایلی را که کدها را در آن تست می کنید (با نام index.html) قرار دهید . چنانچه این کار را انجام داده باشید ، اکنون باید درون این فولدر یک فولدر با نام images بسازید تا فایل های عکس ها را در این فولدر قرار دهید . در مثال های بعدی فرض شده است که فایل های عکس شما درون این فولدر قرار دارد .

مثال :

<img   src=”administrator/files/UploadFile/1.jpg”   alt=”عکس مربوط به چشم”  width=”100″    height=”100″   border=”2″   />

به مثال زیر توجه کنید :

مثال :

ابتدا درون فولدر images عکسی با نام photo.gif قرار دهید . سپس کدهای زیر را بنویسید :

<html>
<head>
</head>
 
<body>
 
<p>
first paragraph .
</p>
 
<img src=”images/photo.gif” />
 
<p>
second paragraph .
</p>
 
</body>
</html>

نتیجه :

first paragraph .

second paragraph .

 

خصوصیت Usemap : 

این خصوصیت برای استفاده از عکس محدوده ای با استفاده از تگ های map و area می باشد. در بخش عکس محدوده ای map , area میتوانید نحوه ی کاربرد آنرا مشاهده نمایید .

QR Code For: تگ عکس در HTML

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.