آموزش و مقالات

0
مقالات آموزشی - HTML

آموزش گام به گام HTML - عکس ها در HTML

دوشنبه, 29 آذر,1395
آموزش گام به گام HTML - عکس ها در HTML
 

عکس ها در HTML


عکس ها یکی از مهمترین قسمت ها و پرکاربرد ترین قسمت های html میباشد.در این قسمت به شما خواهیم گفت که چگونه از عکس ها بوسیله html استفاده کنید.

 

درج کردن عکس


شما میتوانید هر عکسی را که خواستید به وسیله تگ <img> به سایتتان اضافه کنید

<img src="Image URL" ... attributes-list/>


تگ <img> یک تگ خالی است و ویژگی های داخلی خود را دارد پس به همین علت تگ بسته ندارد.مثال

<!DOCTYPE html>
<html>
<head>
<title>استفاده از عکس ر صفحات وب</title>
</head>
<body>
<p>یک عکس ساده</p>
<img src="https://www.miralavi.com/Portals/miralavi/EasyDNNNews/1207/600600p2143EDNmain1207Untitled-2.jpg" alt="Test Image" />
</body>
</html>

 

 
میتوان از فرمت های PNG,JPEG,GIF در html استفاده کرد.مطمئن شوید که ویژگی src را به طور صحیح وارد کرده اید.
Alt یک ویژگی اجباری است و درصورت لود نشدن عکس نوشته داخل alt نمایش داده میشود.
 
تنظیم طول و عرض عکس

شما میتوانید به وسیله width و height عرض و طول عکسهایتان (یا برحسب درصد یا بر حسب پیکسل) را مشخص کنید

مثال
<!DOCTYPE html>
<html>
<head>
<title>height و width تنظیم عکس با</title>
</head>
<body>
<p>height و width تنظیم عکس با</p>
<img src="https://www.miralavi.com/Portals/miralavi/EasyDNNNews/1207/600600p2143EDNmain1207Untitled-2.jpg" alt="Test Image" width="150" height="100"/>
</body>
</html>

 

 
تنظییم border برای عکس ها

به صورت پیشفرض عکس ها دارای خاصیت border هستند ، شما میتوانید بر حسب پیکسل به عکس خاصیت border را اضافه کنید.مقدار 0 یعنی عکس بدون border باشد
مثال
<!DOCTYPE html>
<html>
<head>
<title>در عکس border قرار دادن  </title>
</head>
<body>
<p>در عکس border قرار دادن </p>
<img src="https://www.miralavi.com/Portals/miralavi/EasyDNNNews/1207/600600p2143EDNmain1207Untitled-2.jpg" alt="Test Image" border="3"/>
</body>
</html>

 

 
تراز بندی عکس ها

به صورت پیشفرض عکس ها در سمت چپ صفحه قرار میگیرند اما شما میتوانید به وسیله ویژگی align عکس ها را در سمت راست یا وسط قرار دهید.
مثال
<!DOCTYPE html>
<html>
<head>
<title>تراز بندی کردن عکس</title>
</head>
<body>
<p>تراز بندی کردن عکس</p>
<img src="https://www.miralavi.com/Portals/miralavi/EasyDNNNews/1207/600600p2143EDNmain1207Untitled-2.jpg" alt="Test Image" border="3" align="right"/>
</body>
</html>

 

 

Print
35 رتبه بندی این مطلب:
5.0

محمد فرخیانمحمد فرخیان

سایر نوشته ها توسط محمد فرخیان

نوشتن یک نظر

نام:
ایمیل:
نظر:
افزودن نظر

نام شما
ایمیل شما
عنوان
پیام خود را وارد کنید ...
x