لینک‌ها و تصاویر

اتصال صفحات و نمایش تصاویر در HTML

دنیای متصل وب

لینک‌ها و تصاویر، روح وب هستند!

تصور کنید وب بدون لینک‌ها چه شکلی بود! مثل کتابخانه‌ای که هیچ کتابی به کتاب دیگری اشاره نکند. لینک‌ها همان چیزی هستند که وب را "وب" می‌کنند! 🕸️

تصاویر هم مثل پنجره‌هایی هستند که به دنیای بصری ما می‌گشایند. یک تصویر خوب می‌تواند هزار کلمه بگوید!

حقیقت جالب:

اولین لینک در تاریخ وب در سال ۱۹۹۰ توسط تیم برنرز لی ایجاد شد و به صفحه‌ای درباره پروژه WWW اشاره می‌کرد!

لینک‌ها (Links)

لینک‌ها مثل پل‌هایی هستند که صفحات مختلف را به هم وصل می‌کنند. با کلیک روی آن‌ها می‌توانید به مکان‌های مختلف سفر کنید! ✈️

لینک ساده

لینک به سایت دیگر

<a href="https://dicode.ir">برو به سایت دیکد</a>

<a href="https://google.com" target="_blank">
    گوگل (در تب جدید باز می‌شود)
</a>

<a href="mailto:info@dicode.ir">ایمیل بفرستید</a>

<a href="tel:+989123456789">تماس بگیرید</a>

نمایش در مرورگر:

برو به سایت دیکد

گوگل (در تب جدید باز می‌شود)

ایمیل بفرستید

تماس بگیرید

لینک داخلی (به صفحات همین سایت)

لینک‌های داخلی

<a href="./">صفحه اصلی</a>
<a href="lesson1/">درس اول</a>
<a href="lesson2/">درس دوم</a>

<!-- لینک به بخش خاصی از همین صفحه -->
<a href="#exercise">برو به تمرین</a>

نکته مهم:

target="_blank" باعث می‌شود لینک در تب جدید باز شود. برای تجربه کاربری بهتر از آن استفاده کنید!

تصاویر (Images)

تصاویر روح صفحات وب هستند! آن‌ها باعث می‌شوند محتوای ما زنده و جذاب شود. مثل عکس‌های آلبوم خاطرات! 📸

تصویر ساده

نمایش تصویر

<img src="/icons/fav.png" alt="لوگو دیکد">

<img src="images/sunset.jpg" 
     alt="غروب زیبا در کنار دریا" 
     width="300" 
     height="200">

<!-- تصویر با لینک -->
<a href="https://dicode.ir">
    <img src="/icons/fav.png" 
         alt="کلیک کنید تا به دیکد بروید">
</a>

نمایش در مرورگر:

تصویر ساده:

LOGO

تصویر با اندازه مشخص:

غروب زیبا

تصویر با لینک (قابل کلیک):

LOGO

تصاویر ریسپانسیو

تصاویر انعطاف‌پذیر

<!-- تصویر که با اندازه صفحه تطبیق پیدا می‌کند -->
<img src="landscape.jpg" 
     alt="منظره طبیعی" 
     style="max-width: 100%; height: auto;">

<!-- تصویر با کلاس CSS -->
<img src="portrait.jpg" 
     alt="پرتره" 
     class="responsive-image">

نکته طلایی:

همیشه alt برای تصاویرتان بنویسید! این کار هم برای افراد نابینا مفید است و هم برای SEO سایتتان.

ترکیب لینک و تصویر

حالا که هر دو را یاد گرفتیم، بیایید آن‌ها را با هم ترکیب کنیم! مثل ساختن یک گالری عکس قابل کلیک! 🖼️

گالری تصاویر

<h2>گالری عکس‌های سفر</h2>

<div class="photo-gallery">
    <a href="images/mountain-large.jpg" target="_blank">
        <img src="images/mountain-small.jpg" 
             alt="کوه‌های زیبا" 
             width="200" height="150">
        <p>کوه‌های شمال</p>
    </a>
    
    <a href="images/sea-large.jpg" target="_blank">
        <img src="images/sea-small.jpg" 
             alt="دریای آبی" 
             width="200" height="150">
        <p>ساحل خزر</p>
    </a>
    
    <a href="images/forest-large.jpg" target="_blank">
        <img src="images/forest-small.jpg" 
             alt="جنگل سبز" 
             width="200" height="150">
        <p>جنگل‌های شمال</p>
    </a>
</div>

<!-- دکمه بازگشت -->
<a href="./" class="back-button">
    <img src="/icons/arrow-right.png" alt="بازگشت" width="16" height="16">
    بازگشت به صفحه اصلی
</a>

نمایش در مرورگر:

گالری عکس‌های سفر

کوه

کوه‌های شمال

دریا

ساحل خزر

جنگل

جنگل‌های شمال

بازگشت به صفحه اصلی

تمرین عملی

حالا وقت ساختن یک صفحه معرفی شخصی است!

📝 تمرین:

یک صفحه معرفی شخصی بسازید که شامل موارد زیر باشد:

• عنوان اصلی: "معرفی من"
• تصویر پروفایل (می‌توانید از لوگو یا آیکون استفاده کنید)
• پاراگرافی درباره خودتان
• عنوان فرعی: "علاقه‌مندی‌های من"
• لیست علاقه‌مندی‌هایتان
• عنوان فرعی: "راه‌های ارتباط"
• لینک به ایمیل، تلفن و شبکه‌های اجتماعی
• لینک بازگشت به صفحه اصلی

جواب تمرین

این یکی از راه‌های حل این تمرین است:

profile.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>معرفی من</title>
</head>
<body>
    <h1>معرفی من</h1>
    
    <!-- تصویر پروفایل -->
    <img src="/icons/fav.png" 
         alt="تصویر پروفایل من" 
         width="150" height="150">
    
    <p>سلام! من <strong>علی احمدی</strong> هستم. یک برنامه‌نویس <em>علاقه‌مند</em> به تکنولوژی و یادگیری. عاشق کدنویسی و ساختن چیزهای <mark>جالب</mark> هستم!</p>
    
    <h2>علاقه‌مندی‌های من</h2>
    <ul>
        <li>برنامه‌نویسی وب</li>
        <li>طراحی UI/UX</li>
        <li>عکاسی</li>
        <li>مطالعه کتاب</li>
        <li>سفر</li>
    </ul>
    
    <h2>راه‌های ارتباط</h2>
    <p>می‌توانید از طریق راه‌های زیر با من در ارتباط باشید:</p>
    
    <ul>
        <li>
            <a href="mailto:ali@example.com">
                <img src="/icons/email.png" alt="ایمیل" width="16" height="16">
                ایمیل من
            </a>
        </li>
        <li>
            <a href="tel:+989123456789">
                <img src="/icons/phone.png" alt="تلفن" width="16" height="16">
                تماس تلفنی
            </a>
        </li>
        <li>
            <a href="https://github.com/ali" target="_blank">
                <img src="/icons/github.png" alt="گیت‌هاب" width="16" height="16">
                پروفایل گیت‌هاب
            </a>
        </li>
        <li>
            <a href="https://linkedin.com/in/ali" target="_blank">
                <img src="/icons/linkedin.png" alt="لینکدین" width="16" height="16">
                پروفایل لینکدین
            </a>
        </li>
    </ul>
    
    <hr>
    
    <!-- لینک بازگشت -->
    <p>
        <a href="./">
            <img src="/icons/home.png" alt="خانه" width="16" height="16">
            بازگشت به صفحه اصلی
        </a>
    </p>
    
    <p><small>آخرین بروزرسانی: اردیبهشت ۱۴۰۴</small></p>
</body>
</html>

نکته:

توجه کنید که برای لینک‌های خارجی از target="_blank" استفاده شده و برای هر تصویر alt مناسب نوشته شده است. همچنین آیکون‌های کوچک کنار متن‌ها تجربه کاربری بهتری ایجاد می‌کنند.

درس قبلی: متن و قالب‌بندی درس بعدی: جداول