راه های جلوگیری از هک مودم ADSL
December 19, 2015
میزبانی 100 هزار وبسایت در ایران
December 20, 2015
در جلسه ی نهم از سری آموزش های مدیاسافت به بررسی تصاویر در HTML می پردازیم. با ما همراه باشید.
تصاویر در HTML
در HTML تصاویر با تگ <img> تعریف می شوند. <img> یک تگ خالی است که باید به آن صفت یا صفت هایی اضافه شود تا عملیات درج تصویر در مرورگر اعمال شود. <img> تگ پایانی ندارد.
نحوه ی تعریف تگ فوق به شکل زیر است.
<img src=”url” alt=”some_text“>
صفت src آدرس عکس را مشخص می کند.
صفت alt در تگ <img>
با استفاده از صفت alt یک متن، هنگامی مرورگر نتواند تصویر را پیدا کند ، به جای تصویر نمایان می شود.
مثال
<!DOCTYPE html>
<html>
<body>
<img src=”Mediasoft.jpg” alt=”Mediasoft Logo” style=”width:125px;height:125px”>
</body>
</html>
خروجی
سایز تصویر در HTML
شما می توانید با استفاده از صفت style عرض و ارتفاع یک تصویر را مشخص کنید.
مقادیر عرض و ارتفاع پیکسل (px) می باشد.
همچنین می توانید از صفت width برای عرض و از صفت height برای ارتفاع استفاده کنید. مقادیر این صفت ها نیز برحسب پیکسل می باشد ولی لازم نیست که (px) را بنویسیم.
پیشنهاد ما به شما این است که از صفت style استفاده کنید.
مثال
<!DOCTYPE html>
<html>
<body>
<img src=”Mediasoft.jpg” alt=”Mediasoft Logo” style=”width:300px;height:52px;”>
<img src=”Mediasoft.jpg” alt=”Mediasoft Logo” width=”600″ height=”104″>
</body>
</html>
خروجی
استفاده از یک فلدر دیگر برای تصویر
در مثال هایی که زده شد تمامی تصاویر در کنار فایل صفحه ی وب قرار دارد. حا اگر بخواهیم تصاویر را با استفاده از فلدر دسته بندی کنیم به شکل زیر عمل می کنیم :
مثال
<!DOCTYPE html>
<html>
<body>
<img src=”./images/Mediasoft.jpg” alt=”Mediasoft Logo” style=”width:300px;height:52px;”>
</body>
</html>
خروجی
همانطور که مشاهده می کنید در کنار فایل Mediasoft.htm یک فلدر به نام Images ایجاد کردیم و تصویر Mediasoft.jpg را داخل آن قرار دادیم . سپس مرورگر به آدرس مراجعه می کند و تصویر را به نمایش می گذارد. دقت کنید که در این حالت آدرس با یک نقطه (.) شروع می شود.
نکته :همچنین می توانید آدرس یک عکس در اینترنت را در قسمت src وارد کنید .
خاصیت float در صفت style در تگ <img>
با استفاده از خاصیت float می توان یک تصویر را در سمت چپ یا راست یک متن قرار داد.
مثال
<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src=”Mediasoft.jpg” alt=”Mediasoft Logo” style=”float:right;width:300px;height:52px;”>
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<br><br><br>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src=”Mediasoft.jpg” alt=”Mediasoft Logo” style=”float:left;width:300px;height:52px;”>
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
</body>
</html>
خروجی
همانطور که مشاهده می کنید خاصیت float مقادیر left و right را می تواند بگیرد.
پایان جلسه نهم
