به نام خدا
با عرض سلام و وقت بیخر خدمت بازدید کنندگان گرامی وبسایت وان پی سی
در این قسمت از آموزش ، به سراغ تصاویر در HTML خواهیم رفت
همراهی شما باعث افتخار ماست
تصاویر در HTML:
در HTML برای نمایش تصاویر و یا لینک کردن تصاویر باید از تگ <img> استفاده شود
تگ <img> یک تگ خالی است و جزو تگ هایی است که انتها ندارد
یک مثال :
<img src=” url ” alt=” some_text “>
ویژگی alt :
alt یم ویژگی برای تگ <img> است که در مواقعی که عکس کامل بارگذاری نشود ، به جای عکس این نوشته نمایش داده می شود
alt یک تگ مهم است (خیلی مهم سئو کار عزیز)
صفحه خوان HTML :
برنامه نویسان برای اینکه افراد نا بینا هم از صفحات وب استفاده کنند ، از یک صفحه خوان استفاده میکنند که در آن نرم افزار ، متن عکس به افراد نابینا خوانده می شود ، پس آن را رعایت کنیم
حجم تصویر – طول و عرض :
شما میتوانید برای عکس خود طول و عرض مناسب و مدنظر خود را در کد خود قرار دهید
نکته : این انداه ها باید در ابعاد PX تنظیم شوند
<img src=”html.png” alt=”آموزش HTML” width=”128″ height=”128″>
یک نکته مهم : به نظر شما مشخص کردن طول و عرض بصورت inline یا کد خطی داخل تگ <img> بهتر است یا از طریق فایل CSS ؟؟؟
هر دوی این روش های در HTML5 مورد قبول هستند ، اما ما به شما از طریق فایل استایل یا همان CSS را توصیه میکنیم ، چون مانع از تغییر اندازه در برگ های دیگر
می شود
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>
</body>
</html>
استفاده از تصاویر از پوشه دیگر :
برای دسترسی راحت تر به تصویری که در پوشه دیگر در همان وبسایت است ، دیگر احتیاجی به http:// نیست ، شما میتوانید با قرار دادن یک / در ابتدای آدرس به فایل خود دسترسی پیدا کنید
به این شکل :
<img src=”/images/one.png” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
استفاده از تصاویر از وبسایت دیگر :
در این روش باید از http:// در ابتدای ادرس استفاده کنید
به این شکل :
<img src=”http://www.w3schools…ools_green.jpg”alt=”W3Schools.com”>
استفاده از تصاویر متحرک :
در این روش نیر مانند مثال های قبلی باید عمل کنیم
به این شکل :
<img src=”programming.gif” alt=”Computer Man” style=”width:48px;height:48px;”>
استفاده از یک به عنوان لینک :
برای استفاده از یک تصویر به عنوان لینک به این شکل عمل کنید :
<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
</a>
هدایت تصویر :
برای هدایت تصاویر یا حالت شناور دادن به تصاویر ، میتوانید از ویژگی float استفاده کنید
به این شکل :
<p>
<img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
The image will float to the right of the text.
</p>
<p>
<img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
The image will float to the left of the text.
</p>
اتمام
