تنظیم تصاویر با HTML
تصاویر (Image) در HTML
همانطور که میدانید علاوه بر متن، وجود تصاویر از اهمیت بالایی در صفحات وب به حساب می آید.
بطور مثال در نظربگیرید که محتوای یک سایتی تنها دارای متن ساده میباشد و از تصویری در آن استفاده نشده است این محتوا زیاد برای بیننده
جذاب نبوده و از یکنواختی برخوردار میباشد.
وجود تصاویر در یک وب سایت نگاه بیننده را به خود جذب کرده و از جلوه ویژه ای برخوردار میباشد به همین دلیل HTML تگ img را درنظر گرفته
است، تگ نمایش تصاویر یا img امکان نمایش تصویر در صفحات وب (سایت ها، وبلاگ ها و…) را امکان پذیر می کند.
آنچه در این آموزش خواهید آموخت:
برای تعریف تصویر از عنصر <img> در HTML استفاده کنید
از ویژگی HTML src برای تعیین URL تصویر استفاده کنید
درصورت عدم نمایش تصویر، از ویژگی HTML alt برای تعریف متن جایگزین برای تصویر استفاده کنید
برای تعیین اندازه تصویر از ویژگیهای(width و height) عرض و ارتفاع HTML یا ویژگیهای عرض و ارتفاع CSS استفاده کنید.
از ویژگی CSS float استفاده کنید تا تصویر به سمت چپ یا راست جابجا شود.
آشنایی با فرمت های تصاویر و استفاده از آنها در HTML
نحوه قرار گرفتن تصویر در صفحه وب
کاربرد تگ img در HTML
تگ img در HTML برای قرار دادن تصویر در یک صفحه وب استفاده می شود.
تصاویر از لحاظ فنی در یک صفحه وب قرار نمی گیرند. تصاویر به صفحات وب پیوند داده می شوند. تگ <img> یک فضای نگهداری برای تصویر ارجاع شده ایجاد می کند.
تگ <img> دارای دو ویژگی مورد نیاز است:
- src – مسیر ورود به تصویر را مشخص می کند(عبارت src در واقع مخفف source یا مسیر (path) منبع تصویر است)
- alt – یک متن جایگزین برای تصویر مشخص می کند
شکل کلی استفاده از این تگ در html به شکل زیر است:
|
1 |
<img src="url" alt="متن جایگزین"> |
تگ img از تگ های خالی در HTML است ، فقط شامل ویژگی ها است یعنی تگ پایانی برای بستن ندارد.
ویژگی src در HTML
ویژگی URL ،srcمورد نیاز برای مسیر تصویر را مشخص می کند.
توجه: هنگامی که یک صفحه وب بارگیری می شود ، مرورگر است که در آن لحظه تصویر را از سرور وب دریافت می کند و آن را در صفحه قرار می دهد. بنابراین ، مطمئن شوید که تصویر در همان نقطه نسبت به صفحه وب باقی می ماند ، در غیر این صورت بازدیدکنندگان شما نماد پیوند شکسته را دریافت می کنند. اگر مرورگر نتواند تصویر را پیدا کند ، نماد پیوند شکسته و متن alt نشان داده می شود.
مثال:
|
1 |
<img src="img_chania.jpg" alt="گل ها در چین"> |
ویژگی alt در HTML
درصورتی که کاربر به دلایلی از قبیل کندی اتصال،خطایی در ویژگی src و …نتواند تصویر را در مرورگر مشاهده کند ، صفت alt یک متن جایگزین برای تصویر ارائه می دهد و جایگزین قاب خالی محل درج تصویر خواهد شد تا کاربر در صورت عدم مشاهده تصویر از محتوای آن اطلاع پیدا کند.
گوگل تاکیید زیادی به استفاده از صفت alt در تگ img دارد و اشاره کرده که حتما از این ویژگی در داخل عکس هایتان استفاده شود.
ویژگی alt باید تصویر را توصیف کند:
مثال
|
1 |
<img src="img_girl.jpg" alt="دختری در ژاکت"> |
اگر مرورگری نتواند تصویری را پیدا کند ، متن نوشته شده در ویژگی alt را نمایش می دهد:
برای آشنایی بیشتر با ویژگی های img،alt،src میتوانید مطلب زیر را مطالعه کنید:
صفت Width و Height در تگ img
تنظیم اندازه تصویر با استفاده از ویژگی style:
از دو صفت width و height که به معنای عرض و ارتفاع میباشد برای تعیین عرض و ارتفاع تصویر در تگ img به همراه ویژگی style استفاده میشود.
در اینجا ما از ویژگی style برای تعیین عرض و ارتفاع یک تصویر استفاده می کنیم:
مثال:
|
1 |
<img src="img_girl.jpg" alt="دختری در ژاکت" style="width:500px;height:600px;"> |
تنظیم اندازه تصویر با استفاده از ویژگی Width و Height:
برای اینکه ارتفاع و عرض تصویر را در صفحات وب تعریف کنیم از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده می کنیم.
|
1 |
<img src="img_girl.jpg" alt="دختری در ژاکت" width="500" height="600"> |
ویژگی های width و height بطور پیش فرض اندازه عرض و ارتفاع تصویر را بر حسب پیکسل یا Px تعریف می کنند.
تنظیم تصویر با استفاده از کدام ویژگی بهتر است؟Width و Height, یا Style؟
ویژگی های Width و Height و style همه در HTML معتبر هستند.
با این حال ، ما پیشنهاد می کنیم از ویژگی style استفاده کنید. ویژگی style از تغییر سایز تصاویر برگه های style جلوگیری می کند:
مثال:
اولین تصویر از ویژگی width (تنظیم شده روی 128 پیکسل) استفاده می کند ، اما style موجود در قسمت head آن را نادیده می گیرد و عرض را 100٪ تنظیم می کند.
این سبک عرض همه تصاویر را 100% تنظیم می کند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> </body> </html> |
تصویر دوم از ویژگی style برای تنظیم عرض بر روی 128 پیکسل استفاده می کند ، این مورد در بخش head نادیده گرفته نخواهد شد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html> |
بارگذاری تصاویر از پوشه های دیگر وب سایت
اگر تصاویر خود را در زیر پوشه دارید ، باید نام پوشه را در ویژگی src وارد کنید:
|
1 |
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> |
بارگذاری تصاویر از یک سرور/وب سایت دیگر
برخی از وب سایت ها به تصویری در سرور دیگر اشاره می کنند.یعنی شما میتوانید به یک تصویر از هر آدرس سایتی در دنیا
دسترسی پیدا کنید.
برای اشاره به یک تصویر در سرور دیگر ، باید یک URL مطلق (کامل) در ویژگی src مشخص کنید:
|
1 |
<img src="https://upweb.ir/host.jpg" alt="upweb.ir"> |
تصاویر متحرک در HTML
اچ تی ام ال قابلیت نمایش تصاویر متحرک gif را نیز دارد.
مثال
|
1 |
<img src="programming.gif" alt="مرد برنامه نویس" style="width:48px;height:48px;"> |
استفاده از تصویر به عنوان لینک
برای استفاده از تصویر به عنوان پیوند ، برچسب <img> را داخل برچسب <a> قرار دهید:
مثال
|
1 2 |
<p>تصویر زیر یک پیوند است. لطفا روی آن کلیک کنید.</p> <a href="https://upweb.ir"><img src="https://upweb.ir/host.jpg"></a> |
تصویر زیر یک پیوند است. لطفا روی آن کلیک کنید.
برای آشنایی بیشتر با لینک دادن و کاربردهای آن در HTML به آموزش زیر مراجعه کنید:
جابه جا کردن تصویر(تصویر شناور)
از ویژگی CSS float استفاده کنید تا تصویر به سمت راست یا چپ یک متن شناور شود:
|
1 |
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> |
|
1 |
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> |
فرمت های رایج تصویر
در اینجا رایج ترین انواع فایل های تصویری که در همه مرورگرها (Chrome، Edge، Firefox، Safari، Opera) پشتیبانی می شوند آورده شده است:
| اختصار | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |