تگ img در HTML
در این مطلب از طراحی سایت با html و css می خواهیم درباره تگ img در HTML صحبت کنیم. تگ img جهت بارگذاری تصاویر در صفحات وب استفاده می شود. بنابراین لازم است که با ساختار و نحوه کدنویسی تگ img در HTML آشنا شوید و بدانید این عنصر در کجا کاربرد دارد. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این تگ پیدا کنید.
تگ img در HTML چیست؟
img از کلمه Image گرفته شده است. تگ img در HTML تگی است که با استفاده از آن می توان تصاویر و عکس ها را در یک صفحه وب قرار داد. بنابراین شما به راحتی با استفاده از این تگ می توانید عکس هایتان را داخل صفحه قرار دهید. تگ img در HTML دو صفت پرکاربرد دارد:
- صفت Src: برای مشخص کردن آدرس URL فایل تصویر / عکس
- صفت Alt: برای مشخص کردن یک توضیح کوتاه در مورد تصویر / عکس
کاربرد تگ img در HTML
تگ <img> فضایی برای نمایش تصویر ایجاد می کند. از لحاظ فنی تصاویر داخل سند HTML قرار داده نمی شوند، بلکه تصاویر به سند HTML لینک می شوند. برای لینک کردن یک تصویر، به آسانی می توان تگ <img> را در تگ <a> قرار داد.
مثال از تگ img در HTML
مثال شماره ۱ : قرار دادن عکس در صفحه با استفاده از تگ img در HTML
<body> <img src="images/cat.gif"> </body>
مثال شماره ۲ : نحوه استفاده از صفت alt در تگ img
<body> <img src="images/girls-1.jpg" alt="دختر سوار بر اسب"> </body>
مثال شماره ۳ : تنظیم اندازه عرض و ارتفاع عکس
<body> <img src="images/girls-1.jpg" width="300" height="194"> </body>
مثال شماره ۴ : عکس لینک دار (یعنی بشه روی عکس کلیک کرد)
<body> <a href="https://free-learn.ir"> <img src="images/logo-1.png"> </a> </body>
مثال شماره ۵ : نحوه ایجاد نقشه تصویری در HTML
<body> <img src="images/girls-1.jpg" usemap="#map"> <map name="map"> <area shape="rect" coords="231, 31, 287, 195" href="https://free-learn.ir/" alt="سره اسب" title="سره اسب"> </map> </body>
مثال شماره ۶ : بکارگیری انیمیشن برای تصاویر (HTML اجازه ی تصاویر gif را می دهد)
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
مثال شماره ۷ : بکارگیری خصوصیت float برای تصویر
(با استفاده از ویژگی float در css می توانید تصاویر مورد نظر را راست چین و یا چپ چین کنید)
<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>
مثال شماره ۸ : تنظیم تصویر به عنوان پس زمینه صفحه وب
برای اضافه کردن تصویر پس زمینه بر روی یک عنصر HTML، از ویژگی background-image در CSS استفاده کنید. برای افزودن یک تصویر پس زمینه در یک صفحه وب، باید ویژگی تصویر پس زمینه را در تگ body مشخص کنید.
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
کدام مرورگرها از تگ img در HTML پشتیبانی می کنند؟
جدول صفات تگ img در HTML
| نام صفت | مقدار | توضیح |
|---|---|---|
| alt | text | یک توضیح کوتاه درباره تصویر را مشخص میکند. (از نظر سئو خیلی مهم است) |
| crossorigin | anonymous use-credentials |
اجازه نمایش تصاویر در ظرف کَنویس (canvas) از طریق دسترسی متقابل سایت مبدا |
| height | pixels | مشخص کردن اندازه ارتفاع تصویر |
| ismap | ismap | برای ایجاد یک نقشه تصویری سمت سرور |
| longdesc | URL | مشخص کردن یک آدرس URL که حاوی اطلاعات بیشتری درباره تصویر می باشد |
| sizes | pixels | مشخص کردن اندازه تصویر در اندازه های مختلف صفحه نمایش |
| src | URL | مشخص کردن آدرس URL تصویر |
| srcset | URL | مشخص کردن آدرس URL فایل تصویر برای نمایش در اندازه های مختلف صفحه نمایش |
| usemap | #mapname | برای ایجاد / تعریف نقشه تصویری |
| width | pixels | مشخص کردن اندازه عرض تصویر |
صفت alt در تگ img
با استفاده از صفت alt می توانید یک متن که تصویر را توضیح دهد، برای تصویر بنویسید. این متن در مواقعی که کاربر به هر دلیلی نتواند تصویر را مشاهده کند (کند بودن اینترنت، غلط بودن آدرس تصویر و…) برای کاربر نمایش داده می شود. نوشتن صفت alt برای تمام تصاویر اجباری است. اگر این صفت را برای تصویری تنظیم نکنید، صفحه وب شما در اعتبارسنجی ها رتبه خوبی نمی گیرد.
<img src="logo.png" alt="Adminesite Logo">
تنظیم ابعاد تصویر (عرض و ارتفاع)
برای تنظیم ابعاد تصویر (عرض و ارتفاع) می توانید از صفت width (عرض) و صفت height (ارتفاع) استفاده کنید. صفت های width و height تنها مقادیر عددی به خود می گیرند. همچنین واحد این اعداد پیکسل (pixel) است. در مثال زیر خروجی تصویر در ابعاد 500*600 پیکسل نمایش داده می شود.
<img src="test.jpg" alt="test image" width="500" height="600">
قرار دادن عکس در وسط صفحه در html
برای اینکه عکس در وسط صفحه قرار گیرد می توانید از استایل زیر استفاده کنید.
- در ابتدا یک عکس را فراخوانی کنید و یک استایل دلخواه (مثلا center) برای آن در نظر بگیرید:
<img src=”pic.jpg” style=”center”>
- حالا داخل فایل css خود استایل زیر را برای آن بنویسید:
.center {
display: block;
width: 50%;
margin: auto;
}
به این صورت ۵۰ درصد از صفحه شما را اشغال می کند و margin: auto باعث می شود از چپ و راست به یک اندازه فاصله بگیرد و به همین سادگی عکس در وسط صفحه قرار می گیرد.
آدرس دهی به تصاویر درون یک پوشه
برای نظم بیشتر، می توان در کنار فایل html خود یک پوشه به نام images ایجاد کرده و تمام عکس های مورد استفاده در پروژهتان را درون این پوشه قرار دهید. برای آدرس دهی به عکس های درون این پوشه می توان به صورت زیر عمل کرد:
<img src="images/test.jpg" alt="test image">
در واقع با کاراکتر / می توان درون یک پوشه رفت و به محتویات آن دسترسی داشت.
آدرس دهی به تصاویر درون سرورهای دیگر
اگر می خواهید تصاویر درون وب سایت های دیگر را نمایش دهید، باید در صفت src آدرس تصویر را بصورت کامل وارد کنید. به مثال زیر دقت کنید:
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">
در مثال بالا شما از آدرس تصویر لوگو شرکت گوگل استفاده کردید.
تفاوت تگ img در HTML 4.01 و HTML5
خصیصه های زیر در HTML5 پشتیبانی نمی شود.
- align
- border
- hspace
- vspace
تفاوت تگ img بین HTML و XHTML
- تگ img در html تگ انتهایی ندارد.
- در XHTML تگ img باید به درستی بسته شود.
پشتیبانی تگ img در HTML از صفات و رویدادهای عمومی
تگ img در html هم از صفات عمومی (Global Attributes) و هم از رویدادهای عمومی (Event Attributes) در HTML پشتیبانی می کند.
دستورات CSS پیش فرض در تگ img
معمولا مرورگرها تگ img در html را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.
img {
display: inline-block;
}
مشکل عدم نمایش عکس در html
اگر در جایی با مشکلی جهت نمایش مواجه شدید بدانید که ممکن است خطایی در کدنویسی شما رخ داده است. برخی از خطاها برای فراخوانی تصویر به صورت زیر است:
- عکسی در پوشه شما وجود ندارد.
- نام تصویر را اشتباه نوشته اید.
- پسوند تصویر را وارد نکرده اید.
- هنگام فراخوانی پوشه ای که تصویر در آن قرار دارد اشتباهی رخ داده است.
- یا ممکن است خطای دیگری از این قبیل وجود داشته باشد. بنابراین کدها و پوشه ای که عکس در آن قرار دارد را باظرافت بیشتری فراخوانی کنید.
سخن پایانی
در این مطلب به طور کامل درباره تگ img در HTML، ساختار و نحوه بکارگیری آن در یک صفحه وب به همراه چندین مثال صحبت کرده ایم. با مطالعه این مطلب تسلط کافی بر روی مبحث تگ تصاویر خواهید داشت و می توانید عکس های سایت خود را به کمک این تگ بارگذاری نمایید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
دیدگاهتان را بنویسید