آشنایی با تصاویر در HTML

طراحی سایت

..آشنایی با تصاویر در HTML..
طراحی سایت

آشنایی با تصاویر در HTML

تصویر چیست؟‌ المان‌های بصری و تصاویر چه اهمیتی در زیبایی یک وب سایت دارند؟‌ از چه تگ‌ها و خاصیت‌هایی برای تصاویر می‌توانیم استفاده کنیم؟ آیا می‌توانیم بر روی قسمتی از تصویر عملیاتی را اجرا کنیم؟ در این مقاله می‌خواهیم به صورت کامل با تگ‌های مربوط به تصاویر بپردازیم.

سرفصل‌های پست

آشنایی با تصویر در HTML

اینفوگرافیک

نمونه بالا یک تصویر است.

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

برای افزودن تصویر به یک سند HTML می‌توانید از تگ‌های مختلفی استفاده کنید که در این مقاله به آن‌ها می‌پردازیم، اما قبل از اینکه به این تگ‌ها بپردازیم به چند نکته در تصاویر می‌پردازیم که بهتر است با آنها آشنا باشید.

حجم تصویر

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

برای بهینه سازی حجم تصاویر در صفحات راهکار‌های خاصی وجود دارد که نمونه‌هایی از این راهکار‌ها را در میزفا بررسی کرده‌ایم که می‌توانید آن‌ها را بررسی کنید.

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

استفاده کمتر از تصویر در صفحات مدرن امروزی

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

بنابراین با توجه به پیشرفت روز افزون این سبک و طراحی‌های مسطح پیشنهاد می‌کنم که در رابطه با صفحات وب مدرن امروزی بیشتر تحقیق کنید تا تصاویر زیبایی را خلق کنید.

بارگذاری تصویر در صفحه وب

برای بارگذاری تصویر در صفحه وب شما می‌توانید از تگ‌های تعریف شده مربوط مانند <img> و <picture> استفاده کنید و همچنین می‌توانید از کلاس‌ها و ویژگی‌های CSS برای بارگذاری استفاده کنید.

در این مقاله ما به صورت خلاصه با تمامی این روش‌ها آشنا می‌شویم تا شما پس از بررسی این راه ها بهترین آن را انتخاب و مورد استفاده قرار دهید.

۱ – استفاده از تگ <img>

تگ img یکی از کلیدی‌ترین و رایج‌ترین تگ‌ها و راه‌های افزودن یک تصویر در صفحات وب است. با این تگ می‌توانید به راحتی با وارد کردن آدرس تصویر در کد HTML خودتان تصویر مورد نظرتان را نمایش دهید.

در نمونه کد زیر با جایگزینی آدرس تصویر خود به جای http://example.com/img.jpg می‌توانید تصویر خود را در صفحه وب نمایش دهید.

<!DOCTYPE html> <html> <body> <img src="http://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://mizfa.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://mizfa.com/blog/wp-content/uploads/2019/04/picture.jpg" alt="Sun"> <area shape="circle" coords="90,58,3" href="https://mizfa.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:

بخش مورد نظر در تصویر برای image map
بخش مورد نظر در تصویر برای image map

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

نتیجه گیری:

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

همچنین می‌توانید توضیحات عمومی تصاویر در HTML را در وب سایت W3Schools مطالعه کنید.

اگر انتقاد و پیشنهادی در رابطه با بخش تصاویر در HTML دارید، خیلی خوشحال میشیم که در بخش نظرات آن‌ها را با ما در میان بگذارید.

امتیاز به مطلب

44
20 تیر 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

5550
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

573
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

480
04 دی 1397