آموزش ایجاد تصویر و لینک در HTML: نحوه استفاده از تگ‌های img و a

تصاویر و لینک‌ها دو عنصر کلیدی برای طراحی صفحات وب هستند. تصاویر به محتوا جذابیت بصری می‌بخشند و لینک‌ها کاربران را به صفحات دیگر هدایت می‌کنند. در این مقاله، نحوه استفاده از تگ‌های < img > و < a > را به همراه نکات بهینه‌سازی و رعایت استانداردهای گوگل بررسی می‌کنیم.

< img >: نمایش تصاویر در HTML

تگ < img > برای نمایش تصاویر در صفحات وب استفاده می‌شود. این تگ تنها شامل ویژگی‌ها (Attributes) است و نیازی به بسته شدن ندارد.

ساختار پایه تگ < img >

< img src="آدرس_تصویر" alt="توضیح تصویر" >

ویژگی‌های مهم تگ < img >

src:

آدرس تصویر را مشخص می‌کند. می‌توانید از آدرس‌های نسبی یا مطلق استفاده کنید.

< img src="images/example.jpg" alt="نمونه تصویر" >

alt:

توضیح متنی برای تصویر. این ویژگی بسیار مهم است زیرا:

• در صورت عدم بارگذاری تصویر، متن جایگزین نمایش داده می‌شود.

• گوگل از آن برای درک محتوای تصویر استفاده می‌کند.

< img src="images/example.jpg" alt="تصویر یک منظره طبیعی" >

width و height:

ابعاد تصویر را تعیین می‌کنند. بهتر است از این ویژگی‌ها همراه با CSS استفاده کنید.

< img src="images/example.jpg" alt="تصویر نمونه" width="300" height="200" >

loading:

مشخص می‌کند که تصاویر چگونه بارگذاری شوند:

• lazy: تصویر فقط زمانی بارگذاری می‌شود که کاربر به آن برسد. این ویژگی سرعت بارگذاری صفحات را افزایش می‌دهد.

< img src="images/example.jpg" alt="تصویر نمونه" loading="lazy" >

تگ < a >: ایجاد لینک در HTML

تگ < a > برای ایجاد لینک‌هایی به صفحات دیگر، ایمیل‌ها، یا حتی بخش‌هایی از همان صفحه استفاده می‌شود.

ساختار پایه تگ < a >

< a href="آدرس_لینک" > متن لینک < /a >

ویژگی‌های مهم تگ < a >

href:

آدرس لینک را مشخص می‌کند. می‌توانید از آدرس‌های نسبی یا مطلق استفاده کنید.

< a href="https://example.com" > بازدید از سایت < / a >

target:

مشخص می‌کند لینک در کجا باز شود:

• _self (پیش‌فرض): لینک در همان پنجره باز می‌شود.

• _blank: لینک در یک زبانه جدید باز می‌شود.

< a href="https://example.com" target="_blank" > بازدید از سایت < / a >

rel:

رابطه بین صفحه فعلی و لینک را توضیح می‌دهد. برای لینک‌های خارجی، استفاده از rel="noopener noreferrer" توصیه می‌شود تا امنیت بهتری داشته باشید.

< a href="https://example.com" target="_blank" rel="noopener noreferrer" > بازدید از سایت < / a >

ایمیل لینک‌ها:

برای ایجاد لینک ایمیل از mailto: استفاده کنید.

< a href="mailto:info@example.com" > ارسال ایمیل < / a >

نمونه کد ترکیبی تگ‌های < img > و < a >

برای ایجاد تصویری که به یک لینک تبدیل شود، می‌توانید این دو تگ را ترکیب کنید:

< a href="https://example.com" target="_blank" >
    < img src="images/example.jpg" alt="تصویر لینک" width="300" >
< / a >

نکات کلیدی برای بهینه‌سازی تصاویر و لینک‌ها بر اساس استانداردهای گوگل

• بهینه‌سازی تصاویر:

  • از تصاویر با فرمت مناسب (مانند WebP یا JPEG) استفاده کنید.

  • حجم تصاویر را کاهش دهید تا سرعت بارگذاری صفحه افزایش یابد.

  • از ویژگی alt برای توصیف دقیق تصاویر استفاده کنید.

• بهینه‌سازی لینک‌ها:

  از متن‌های لینک (Anchor Text) معنادار استفاده کنید. متن لینک باید مرتبط با صفحه مقصد باشد.

  
  
  < a href="https://example.com/products" > مشاهده محصولات < / a >
  
  
  

   

  از لینک‌های شکسته یا بی‌هدف اجتناب کنید.

  لینک‌های داخلی را برای بهبود ساختار سایت و سئو به‌درستی مدیریت کنید.

نمونه کد کامل

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش تگ‌های img و a در HTML" >
    < meta name="keywords" content="HTML, تصاویر, لینک‌ها, آموزش HTML" >
    < meta name="author" content="نام شما" >
    < title > آموزش تگ‌های img و a در HTML < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        .image-link {
            display: inline-block;
            margin: 10px;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش تگ‌های img و a در HTML < / h1 >
    < / header >
    < main >
        < section >
            < h2 > تصاویر در HTML < / h2 >
            < img src="images/example.jpg" alt="تصویر نمونه" width="300" loading="lazy" >
            < p > این یک نمونه تصویر است که با استفاده از تگ < code > <img> < / code > اضافه شده است. < / p >
        < / section >
        < section >
            < h2 > لینک‌ها در HTML < / h2 >
            < a href="https://example.com" target="_blank" rel="noopener noreferrer" > بازدید از سایت ما < / a >
        < / section >
        < section >
            < h2 > تصاویر لینک‌دار < / h2 >
            < a href="https://example.com" target="_blank" class="image-link" >
                < img src="images/example.jpg" alt="تصویر لینک" width="300" >
            < / a >
            < p > روی تصویر بالا کلیک کنید تا به صفحه موردنظر منتقل شوید. < / p >
        < / section >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >

جمع‌بندی

تگ‌های < img > و < a > از مهم‌ترین ابزارها برای نمایش تصاویر و ایجاد لینک‌ها در HTML هستند. با رعایت اصول بهینه‌سازی تصاویر و لینک‌ها، می‌توانید صفحات وبی سریع‌تر، زیباتر و مناسب‌تر برای موتورهای جستجو طراحی کنید.