چرا سکان آکادمی؟
تصاویر در 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
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-2
کامنت گذاری (Comment) و خطوط افقی (Horizontal Rule) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-3
پاراگراف ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/15
2-4
تگ های فرمت دهی در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/09/22
2-5
پروژه وبلاگ: درباره من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/02
2-6
عناصر HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/02
2-7
ویژگی‌ها (Attributes) در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/06
2-8
تصاویر در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/09
2-9
آزمون (لطفا وارد وبسایت شوید)
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/13
2-10
لیست ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/20
2-11
پروژه وبلاگ : مهارت‌های من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/27
2-12
جدول‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/27
2-13
لینک‌ها در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/10/30
2-14
پروژه وبلاگ : برنامه‌ی من
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/05
2-15
عناصر Inline و Block در HTML
تیم تولید محتوای سکان آکادمی
تیم تولید محتوای سکان آکادمی
1400/11/05
دوره در حال تکمیل است ... rocket