کار با تصاویر در HTML قسمت اول
کار با تصاویر در HTML
آشنایی با تصاویر در HTML
تصویر چیست؟ المان‌های بصری و تصاویر چه اهمیتی در زیبایی یک وب سایت دارند؟ از چه تگ‌ها و خاصیت‌هایی برای تصاویر می‌توانیم استفاده کنیم؟ آیا می‌توانیم بر روی قسمتی از تصویر عملیاتی را اجرا کنیم؟ در این مقاله می‌خواهیم به صورت کامل با تگ‌های مربوط به تصاویر بپردازیم.
- 1 آشنایی با تصویر در HTML
- 1.1 حجم تصویر
- 1.2 استفاده کمتر از تصویر در صفحات مدرن امروزی
- 2 بارگذاری تصویر در صفحه وب
- 2.1 ۱ – استفاده از تگ <img>
- 2.2 ۲ – استفاده از تگ <picture>
- 2.3 ۳ – استفاده از ویژگی‌های CSS برای بارگذاری تصویر
- 3 مسیریابی تصاویر با تگ Map
آشنایی با تصویر در HTML
یکی از بخش‌های بصری هر وب سایت را تصاویر آن تشکیل می‌دهند. تصویر یکی از مهمترین بخش‌های زیبا سازی یک صفحه وب می‌باشند که از طریق آنها می‌توانید کاربران بسیاری را جذب صفحات وب سایت خود کنید.
برای افزودن تصویر به یک سند HTML می‌توانید از تگ‌های مختلفی استفاده کنید که در این مقاله به آنها می‌پردازیم، اما قبل از اینکه به این تگ‌ها بپردازیم به چند نکته در تصاویر می‌پردازیم که بهتر است با آنها آشنا باشید.
حجم تصویر
در صفحات وب، هرچقدر که حجم آبجکت‌هایی که شما در وب سایتان بارگذاری می‌کنید بهینه تر باشد، سرعت بارگذاری صفحه شما نیز افزایش میابد؛ با توجه به این موضوع، هرچه حجم تصاویری که شما آپلود می‌کنید بهینه و کم باشد سرعت بارگذاری وب سایتتان بیشتر است.
برای بهینه سازی حجم تصاویر در صفحات راهکار‌های خاصی وجود دارد که نمونه‌هایی از این راهکار‌ها را در فرازنتورک بررسی کرده‌ایم که می‌توانید آنها را بررسی کنید.
استفاده کمتر از تصویر در صفحات مدرن امروزی
برای بارگذاری تصویر در صفحه وب شما می‌توانید از تگ‌های تعریف شده مربوط مانند <img> و <picture> استفاده کنید و همچنین می‌توانید از کلاس‌ها و ویژگی‌های CSS برای بارگذاری استفاده کنید.
در این مقاله ما به صورت خلاصه با تمامی این روش‌ها آشنا می‌شویم تا شما پس از بررسی این راه ها بهترین آن را انتخاب و مورد استفاده قرار دهید.
۱ – استفاده از تگ <img>
تگ img یکی از کلیدی‌ترین و رایج‌ترین تگ‌ها و راه‌های افزودن یک تصویر در صفحات وب است. با این تگ می‌توانید به راحتی با وارد کردن آدرس تصویر در کد HTMLخودتان تصویر مورد نظرتان را نمایش دهید.
در نمونه کد زیر با جایگزینی آدرس تصویر خود به جای http://example.com/img.jpg می‌توانید تصویر خود را در صفحه وب نمایش دهید.
<!DOCTYPE html> <html> <body> <img src="https://example.com/img.jpg" alt="Example Image" width="42" height="42"> </body> </html>
همچنین اگر میخواهید در مورد تگ <img> اطلاعات بیشتری داشته باشید. می‌توانید مقاله مربوط به تگ img را در فرازنتورک بخوانید.
۲ – استفاده از تگ <picture>
از این تگ برای افزودن تصاویر با توجه به تغییرات اندازه رزولوشن صفحه وب استفاده می‌شود.
با استفاده از این تگ می‌توانید خیلی منعطف تصاویر را به صفحه وبتان اضافه کنید و یک صفحه وب واکنش گرا داشته باشید که تصاویر با بزرگ یا کوچک‌شدن صفحه تغییر می‌کنند.
<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
اگر میخواهید در رابطه با تگ Picture و خصوصیات این تگ بیشتر بخوانید، می‌توانید مقاله مربوط به تگ Picture در فرازنتورک را بررسی کنید.
۳ – استفاده از ویژگی‌های CSS برای بارگذاری تصویر
در طراحی مدرن جدید تا جای ممکن سعی می‌شود که استفاده از تگ‌های HTML را کاهش دهند و ازCSS برای استایل‌دهی منعطف‌تر استفاده کنند. به همین دلیل یکی از راه‌های استفاده از تصاویر در صفحات وب استفاده از ویژگی‌هایCSS می‌باشد.
در نمونه کد‌های زیر با استفاده از ویژگی background-image سی اس اس تصاویر را به صفحه وب اضافه کرده‌ایم.
نمونه کد افزودن تصویر به عنوان پس زمینه با استفاده از سی اس اس:
<body style="background-image:url('clouds.jpg');">
<h2>Background Image</h2>
</body>
نمونه کد قرارگیری تصویر در داخل صفحه با استفاده از سی اس اس:
<body>
<p style="background-image:url('clouds.jpg');">
...
</p>
</body>
در رابطه با این خاصیت که با استفاده از ویژگی‌هایCSS می‌باشد در آموزش‌های CSS فرازنتورک خواهیم خواند.
مسیریابی تصاویر با تگ Map
گاها پیش می‌آید که می‌خواهیم در تصاویری که بارگذاری می‌کنیم، قسمتی را مشخص کنیم که عملیات خاصی را انجام دهد.
برای انجام این کار می‌توانیم از تگ Map استفاده کنیم که می‌توانیم توسط این تگ قسمتی از تصویر را انتخاب کنیم که عملیات خاصی بر روی آن قسمت انجام شود.
نمونه کد مسیریابی تصاویر با تگ Map:
<img src="https://faraznetwork.com/blog/wp-content/uploads/2019/05/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"><area shape="rect" coords="0,0,82,126" href="https://faraznetwork.com/blog/wp-content/uploads/2019/04/picture.jpg" alt="Sun"> <area shape="circle" coords="90,58,3" href="https://faraznetwork.com/blog/wp-content/uploads/2017/05/%D9%86%D8%AA%DB%8C%D8%AC%D9%87-%DA%A9%D8%AF-%D8%AA%DA%AF-span.png" alt="Mercury"> <area shape="circle" coords="124,58,8" href="https://www.w3schools.com/images/venglobe.gif" alt="Venus"> </map> نمونه تصویر مسیریابی توسط تگ Map:
در مورد تگ Map، خصوصیات این تگ و ابزار‌های مسیریابی دقیق و سریع در مقاله‌ای کامل توضیح داده‌ایم که پیشنهاد میکنم حتما مقاله مسیریابی در تصاویر ما در فرازنتورک را بخوانید.
تگ img در HTML
تگ img در HTML چیست؟ چطور در یک صفحه وب تصاویر را بارگزاری کنیم؟ تصاویر وارد شده با تگ img در چه مواردی قابل استفاده است؟ در این مقاله از فرازنتورک که از سری آموزش html است با تگ img و خاصیت های مختلف آن آشنا می‌شویم.
1 تگ img در HTML
- 1.1 اضافه کردن تصویر به سند HTML با استفاده از تگ img
- 1.2 خاصیت‌های تگ <img>
- 1.3 تصاویر را در کجا قرار دهیم؟
- 1.4 لینک‌دادن به تصاویر در HTML:
تگ img در html
دلایل زیادی وجود دارد که ممکن است بخواهید یک عکس به صفحه وبسایتتان اضافه کنید مانند اضافه کردن لوگو، نمودار یا دیاگرام.
یک تصویر می تواند به جای هزاران کلمه صحبت کند، همانطور که یک عکس حرفه‌ای تفاوت یک وبسایت با ظاهر متوسط و یا وبسایت با هدف‌گیری مخاطب را تعیین می‌کند.
اگر در حال ساخت یک وبسایت از صفر هستید، بهتر است پوشه‌های تصاویر را جدا کنید. همانطور که وبسایت رشد می‌کند، جدا نگه‌داشتن تصاویر در فولدر‌های جداگانه به شما کمک می کند تا سازمان‌دهی بهتر برروی وبسایت خود اعمال کنید.
اضافه کردن تصویر به سند HTML با استفاده از تگ img
برای اضافه کردن یک تصویر در سندHTML با استفاده از تگ <img> می‌بایست مانند زیر عمل کنیم:
<img src="Image Address">
در بالا به جای Image Address می‌بایست آدرس تصویر را جایگزین کنید.
نکته: تگ <img> نیازی به تگ بستن ندارد. (بنابراین نیازی به تگ <img/> نداریم.)
نمونه‌ای از قرارگیری تصویر در سند HTML را در زیر برایتان قرار داده‌ایم:
<!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </body> </html>
تصویر خروجی :
خاصیت‌های تگ <img>
در جدول زیر خاصیت‌های تگ <img> را معرفی می‌کنیم.
| خاصیت ها | مقدار‌ها | توضیحات |
| خاصیت align | top
bottom middle left right |
این خاصیت معمولا برای تعیین نحوه رفتار سایر بخش های صفحه وب نسبت به موقعیت تصویر است. خاصیت align از html نسخه 5 به بالا حذف شده است که وبسایت‌های جدید باید از کد‌های css برای کنترل این خاصیت استفاده کنند. |
| خاصیت alt | متن | این خاصیت یک توضیح از تصویر ارائه می‌دهد که تصویر معین شده را توصیف می‌کند. |
| خاصیت border | pixels | این خاصیت در HTML5 پشتیبانی نمی شود.
پهنای حاشیه عکس را برحسب پیکسل تعیین می کند. |
| خاصیت crossorigin | anonymous
use-credentials |
به وبسایت‌های ثالث اجازه می‌دهد تا به صورت منشا متقابل به همراه canvas استفاده شوند. |
| خاصیت height | pixels | برای تعریف ارتفاع عکس استفاده می‌شود. |
| خاصیت hspace | pixels | این خاصیت برروی HTML5 پشتیبانی نمی شود.
فاصله خالی از چپ و راست تصویر را تعیین می کند. |
| خاصیت ismap | ismap | مشخص می کند تصویر مورد نظر یک تصویر از سمت سرور به صورت مپ است یا خیر |
| خاصیت longdesc | URL | لینک صفحه ای که در آن توضیحات کامل عکس وجود دارد یا مشخص می کند. |
| خاصیت sizes | اندازه تصویر را برای طرح بندی های متفاوت تعیین می کند. | |
| خاصیت src | URL | این خاصیت به مرورگر اعلام می‌کند که آدرس فایل تصویر در کجا قرار دارد. معمولا برای آدرس دهی به صفحات داخل وبسایت از آدرس‌دهی وابسته استفاده می‌شود. |
| خاصیت srcset | URL | لینک تصویر را برای استفاده در موقعیت های متفاوت تعیین می کند. |
| خاصیت title | متن | خاصیت عنوان برای افزودن اطلاعات بیشتر به تصویر استفاده می‌شود. اکثر مرورگر‌های وب متن این خاصیت را در یک tooltip قرار می‌دهند که با قرار گرفتن پوینتر موس بر روی تصویر به نمایش در می‌آید. |
| خاصیت usemap | #mapname | تصویر را به عنوان یک مپ از سمت کلاینت تعیین می کند. |
| خاصیت vspace | pixels | این خاصیت در نسخه HTML5 پشتیبانی نمی شود.
فاصله بالا و پایین تصویر را معین می کند. |
| خاصیت width | pixels | برای تعیین عرض عکس استفاده می‌شود. |
تصاویر را در کجا قرار دهیم؟
محل قرارگیری تگ تصویر در کد ها بر نحوه نمایش تصویر تاثیر دارد در اینجا به عنوان نمونه سه محل را در نظر می گیریم:
- قبل از پاراگراف: پاراگراف در خط جدید بعد از تصویر به نمایش در می‌آید.
- در شروع پاراگراف: پاراگراف دقیقا در همان خط بعد از تصویر نمایش داده می‌شود.
- در وسط پاراگراف: تصویر در بین پاراگراف قرار می‌گیرد.
در زیر ۳ نمونه بالا را به صورت کامل مشاهده می‌کنید. همچنین شما می‌توانید با استفاده از استایل‌دهی‌های css نمونه‌های بهتری را برای قرارگیری تصاویرتان ایجاد کنید.
لینک‌دادن به تصاویر در HTML:
برای اینکه تصویری که در سند H TML خود بارگذاری می‌کنیم را لینک‌دهی کنیم، می‌بایست ما بین تگ <img>از تگ <a> استفاده کنیم. برای درک بهتر نمونه زیر را یک‌بار در ویرایشگر کد خودتان آزمایش کنید. همچنین برای درک بهتر لینک‌دهی و لینک‌سازی مقالات ما در این خصوص را بخوانید.
<!DOCTYPE html> <html> <body> <a href="https://FARAZNETWORK.com"> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </a> </body> </html>
در این آموزش با نحوه قرار دادن تصاویر در سند اچ تی ام ال با استفاده از تگ <img> آشنا شدیم و خاصیت‌های آن را شناختیم.به صورت کلی با تصویر درHTML آشنا شدیم و پیشنهاد میکنم هرکدام از بخش‌های ارائه شده را که مقاله جامع‌تری در فرازنتورک دارند را بررسی کنید تا به صورت کامل با تصاویر درHTML آشنا شوید.
امیدوارم که این آموزش براتون مفید بوده باشد و از آن نهایت استفاده را برده باشید.
آموزش‌های دیگرHTML فرازنتورک را دنبال کنید و همچنین می‌توانید از طریق برچسب‌ها مقالات مربوط به تگ‌های مربوط به تصاویر را دنبال کنید.
مطالب مرتبط :
1- کار با لینک ها در HTML قسمت اول
2- کار با تصاویر در HTML قسمت دوم
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده: راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.