آموزش Html؛ آموزش کار با تصاویر در HTML
در جلسه هشتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با تصاویر در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه معرفی و نحوه استفاده از عکس و جاگذاری تصویر رو بصورت کامل آموزش خواهیم داد. با ما همراه باشید…
آموزش کار با تصاویر در HTML
قطعا در تمامی وب سایت ها با تصاویر متعددی مواجه می شوید. تصاویر، برای گویاتر کردن محتوا یا زیباسازی صفحات استفاده می‌شود. هیچ شکی نیست که حضور عکس در هر صفحه از سایت می‌تواند طرح و ظاهر یک صفحه وب را بهبود ببخشیده و مخاطب را بیشتر مجذوب خود کند. اگر بخواهید در یک صفحه وب یک عکس جایگذاری کنید، باید با استفاده از کد HTML تصویر را در طراحی سایت قرار بدهید. در ادامه سه تصویر مختلف و کدهای مربوط به هر کدام را به ترتیب از چپ به راست مشاهده می‌کنید:
<img src="pulpitrock.jpg" alt="منظره کوهستان">
<img src="img_girl.jpg" alt="دختر ژاکت پوش">
<img src="img_chania.jpg" alt="تصویر گل">
پیشنمایش منظره کوهستان پیشنمایش دختر ژاکت پوش پیشنمایش تصویر گل
نحوه قرارگیری (Syntax) عکس در HTML
تصاویر در HTML با تگ <img> تعریف می‌شوند که یک تگ خالی و تنها حاوی ویژگی است. همانطور که در درس اول سری آموزش HTML هم به آن اشاره کردیم، تگ‌های خالی دارای تگ پایانی نیستند. ویژگی src در واقع URL (آدرس اینترنتی) تصویر را مشخص می‌کند:
<img src="url">
خصوصیت alt در اچ تی ام ال
خصوصیت alt یک متن جایگزین برای تصویر ایجاد می‌کند تا اگر کاربر بنا به هر علتی (سرعت پایین اینترنت، خطا در ویژگی src یا استفاده از صفحه‌خوان توسط کاربر) نتواند عکس را مشاهده کند، این متن نمایش داده شود. مقدار خصوصیت alt باید تصویر را توصیف کند:
<img src="img_chania.jpg" alt="تصویر گل">پیشنمایش
اگر مرورگر نتواند به هر دلیلی، تصور را پیدا کند مقدار ویژگی alt را نمایش خواهد داد.توجه داشته باشید که ویژگی alt ضروری است. یک صفحه وب بدون دارا بودن این ویژگی، اعتبار نخواهد داشت. توجه داشته باشید که مقدار alt می‌تواند بسته به انتخاب شما به زبان انگلیسی، فارسی یا هر زبان دیگری نوشته شود.
اندازه تصویر در HTML
می‌توانید از ویژگی style برای مشخص کردن عرض و طول یک تصویر استفاده کنید
<img src="img_girl.jpg" alt="دختر ژاکت پوش" style="width:500px;height:600px;">
در روش دیگر می‌توانید از ویژگی‌های width و height استفاده کنید:
<img src="img_girl.jpg" alt="دختر ژاکت پوش" width="500" height="600">
ویژگی‌های width و height همیشه طول و عرض تصویر را با واحد پیکسل تعریف می‌کنند. توجه داشته باشید همیشه طول و عرض تصویر را مشخص کنید در غیر این صورت، صفحه سایت طراحی شده، در زمان بارگزاری تصویر لرزش خواهد داشت.
استفاده از ویژگی های Width و Height یا ویژگی Style
تمام ویژگی‌های width، height و style در HTML5 معتبر هستند. البته ما استفاده از ویژگی style را توصیه می‌کنیم. با این کار از تغییر اندازه تصاویر توسط شیوه‌نامه‌ها (style sheet) جلوگیری می‌شود:
<!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
پیشنمایش
تصاویر موجود در یک پوشه دیگر در Html
اگر پوشه عکس مشخص نشده باشد مرورگر انتظار دارد تصویر را در همان پوشه صفحه وب پیدا کند. البته معمولا تصاویر را در یک پوشه فرعی ذخیره می‌کنند. در صورت استفاده از این روش حتما باید نام پوشه را در ویژگی src بگنجانید:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">پیشنمایش
تصاویر موجود در یک سرور دیگر در Html
برخی از سایت‌ها تصاویر خود را روی سرور تصاویر ذخیره می‌کنند. در واقع، شما می‌توانید از هر آدرس url در جهان به این تصاویر دسترسی داشته باشید:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">پیشنمایش
لینک دادن به تصاویر در اچ تی ام ال
برای استفاده از تصویر به عنوان لینک باید تگ <img> را در تگ <a> قرار دهید
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>پیشنمایش
در کد بالا border:0 به این علت اضافه شده تا از نمایش کادر اطراف تصویر توسط مرورگر اینترنت اکسپلورر ۹ و نسخه‌های قبلی جلوگیری شود.
شناور کردن تصاویر در اچ تی ام ال
می‌توانید از خصوصیت 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>پیشنمایش
Image Maps در اچ تی ام ال
از تگ <map> برای تعریف یک نقشه- تصویر (image-map) استفاده کنید. یک نقشه-تصویر در واقع تصویری است که نقاطی از آن قابل کلیک شدن باشد. با استفاده از کدی که در ادامه می‌آید در تصویر زیر اشیاء کامپیوتر، گوشی موبایل و فنجان قهوه قابل کلیک شدن خواهند بود:
<img src="workplace.jpg" alt="محل کار" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="رایانه" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="تلفن" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="قهوه" href="coffee.htm"> </map>
پیشنمایش
خصوصیت نام تگ <map> با خصوصیت usemap مربوط به تگ <img> همراه شده و یک رابطه بین تصویر و نقشه ایجاد می‌کند. تگ <map> حاوی تعداد تگ‌های <area> بوده که نواحی قابل کلیک در نقشه- تصویر را مشخص می‌کند.
تصویر پشت زمینه در اچ تی ام ال
برای افزودن تصویر پشت زمینه به یک عنصر HTML، از خصوصیت background-image در CSS استفاده کنید. در مثال زیر نشان داده شده است که برای افزودن تصویر پشت زمینه به یک صفحه وب، باید ویژگی background-image را در عنصر BODY مشخص کنید:
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
در مثال زیر نشان می‌دهد که برای افزودن تصویر پشت زمینه به یک پاراگراف، باید ویژگی background-image را برای عنصر P مشخص کنید:
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
پیشنمایش
عنصر <picture> در اچ تی ام ال
نسخه HTML5 عنصر <picture> را برای افزودن انعطاف‌پذیری بیشتر در زمان تعریف منابع تصویر اضافه کرده است. عنصر <picture> حاوی یک تعداد از عناصر <source> است که هر یک به یک منبع متفاوت ارجاع داده می‌شوند. با این روش مرورگر می‌تواند تصویری را انتخاب کند که به بهترین شکل با view یا دستگاه فعلی منطبق است. هر عنصر <source> دارای خصوصیاتی (attribute) است که نشان می‌دهد چه زمان تصویر در بهترین حالت تناسب قرار دارد. مرورگر از اولین عنصر <source> که دارای مقادیر منطبق است استفاده کرده و بقیه عناصر <source> دیگر را نادیده می‌گیرد.
در مثال زیر اگر پنجره مرورگر حداقل ۶۵۰ پیکسل باشد یک تصویر و اگر کمتر از ۶۵۰ و بیشتر از ۴۶۵ پیکسل بود تصویر دیگری نمایش داده می‌شود:
<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="گل" style="width:auto;"> </picture>پیشنمایش
توجه داشته باشید که همیشه یک عنصر <img> به عنوان آخرین عنصر فرزند <picture> تعریف کنید. عنصر <img> توسط مرورگرهایی به کار برده می‌شود که از عنصر <picture> پشتیبانی نمی‌کنند یا تگ‌های <source> انطباق ندارند.
صفحه خوان های HTML
صفحه خوان یک برنامه نرم‌افزاری است که کدهای HTML را می‌خواند، متن را تبدیل کرده و به کاربر امکان گوش دادن به محتوا را می‌دهد. صفحه‌خوان‌ها معمولا برای افراد نابینا، کم بینا یا دارای ناتوانی در یادگیری بسیار مفید است. تصاویر در HTML یکی از مهم‌ترین مباحث این زبان نشانه گذاری بوده و به زیبایی و قابل فهم کردن محتوای وب سایت شما کمک شایانی می‌کنند. امروزه نقش تصاویر در محتوای تولیدی بر هیچ وبمستری پوشیده نیست. بنابراین در طراحی وب سایت خود حتما به این بخش توجه ویژه‌ای داشته باشید. یادتان باشد یک طراحی سایت حرفه ای که به ایجاد ظاهری زیبا بیانجامد، یکی از وجوه تمایز شما با رقبا است. می‌توانید با مطالعه کامل دوره آموزش HTML مقدماتی در لیداوب، اصلی‌ترین گام در راه آموزش طراحی سایت را برداشته و پس از آن با مطالعه مفاهیم دیگر، به یک طراح سایت حرفه‌ای تبدیل شوید.
منبع: W3Schools
لیست جلسات قبل آموزش Html
- آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
- آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش Html؛ آموزش کار با پاراگراف و استایل در Html
- آموزش Html؛ آموزش کار با قالب بندی متن در Html
- آموزش Html؛ آموزش کار با کامنت در HTML
- آموزش Html؛ آموزش کار با کامنت در HTML
- آموزش Html؛ آموزش کار با رنگ ها در HTML
The post آموزش Html؛ آموزش کار با تصاویر در HTML appeared first on آموزش برنامه نویسی.
