تصاویر در HTML

تصاویر در HTML

برای نمایش تصویر در HTML، از تگ <img> استفاده می‌شود. این عنصر، تگ پایانی نداشته و فقط تگ ابتدایی دارد:

<img src="image.jpg" />

تگ <img> دو ویژگی (attribute) اصلی دارد:

  • src : آدرس (URL) تصویر را مشخص می کند.
  • alt : یک متن جایگزین کوتاه مشخص می‌کند که تصویر را با کلمات توصیف می کند.

به عنوان مثال، اگر عکسی به نام "tree.jpg" در همان پوشه‌ی فایل HTML دارید، کد شما باید به شکل زیر باشد:

<html>
    <head>
        <title>first page</title>
    </head>
    <body> 
        <img src="tree.jpg" alt="tree" />
    </body>
</html>

 ⚠️ ویژگی src و alt برای تگ <img>، ضروری است.

تغییر اندازه تصویر

برای تعیین اندازه تصویر، از ویژگی‌های عرض (width) و ارتفاع (height) استفاده می شود.

مقدار این دو ویژگی را می توان بر حسب پیکسل (px) یا درصد مشخص کرد:

<html>
    <head>
        <title>first page</title>
    </head>
    <body> 
        <img src="images/tree.jpg" 
        height="150px" width="150px" alt="" />
        <br />
        <img src="images/tree.jpg" 
        height="50%" width="50%" alt="" />
    </body>
</html>

⚠️ بارگذاری تصاویر زمان‌بر است. استفاده از تصاویر بزرگ می‌تواند سرعت بارگذاری صفحه را کاهش دهد، بنابراین باید با احتیاط از آن‌ها استفاده شود.

border (خط مرزی) تصویر

به طور پیش فرض، یک تصویر هیچ حاشیه ای ندارد، اما می‌توان از ویژگی border در تگ تصویر برای ایجاد حاشیه در اطراف تصویر استفاده کرد:

<img src="images/tree.jpg"
 height="150px" width="150px"
 border="1px" alt="tree" /> 
2-1

عناوین (Headings) در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-2

کامنت گذاری (Comment) و خطوط افقی (Horizontal Rule) در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-3

پاراگراف ها در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-4

تگ های فرمت دهی در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-5

پروژه وبلاگ: درباره من

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-6

عناصر HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-7

ویژگی‌ها (Attributes) در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-8

تصاویر در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-9

آزمون اول فصل دوم دوره HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-10

لیست ها در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-11

پروژه وبلاگ : مهارت‌های من

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-12

جدول‌ها در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-13

لینک‌ها در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-14

پروژه وبلاگ : برنامه‌ی من

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-15

عناصر Inline و Block در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-16

فرم‌ها در HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-17

پروژه وبلاگ: فرم تماس

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
2-18

آزمون دوم فصل دو دوره HTML

تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
دوره در حال تکمیل است ... rocket