🔗 درس سوم: لینکها و تصاویر
🎯 هدف این درس: آشنایی با لینکها و نحوه اضافه کردن تصاویر به صفحات وب
سلام دوست عزیز! 👋
توی دو درس قبل، یاد گرفتی چطور متنها رو توی صفحه مرتب کنی و بهشون شکل بدی. اما یه صفحه وب بدون لینک و تصویر مثل یه کتاب بدون صفحهبندی میمونه!
توی این درس، با هم یاد میگیریم:
- ✅ لینکها و انواع آن (داخلی، خارجی)
- ✅ باز شدن لینک در پنجره جدید
- ✅ اضافه کردن تصاویر به صفحه
- ✅ تمرین: صفحه معرفی با تصویر و لینک
🔗 بخش ۱: تگ لینک (a)
برای ایجاد لینک در HTML از تگ <a> استفاده میکنیم. این تگ با ویژگی href مشخص میکنه که لینک به کجا اشاره میکنه.
ساختار کلی:
ساختار لینک
HTML
v5
<a href="آدرس مقصد">
متن لینک
</a>
مثال: لینک به یک وبسایت
لینک به وبسایت
HTML
v5
<p>
برای دیدن دورههای آموزشی بیشتر به
<a href="https://rajestary.com">
رجستری آکادمی
</a>
مراجعه کنید.
</p>
🔗 بخش ۲: انواع لینک
📊 انواع لینک در HTML
| نوع | توضیح | مثال |
|---|---|---|
| لینک خارجی | به یک وبسایت دیگر | href="https://google.com" |
| لینک داخلی | به صفحه دیگری در همان سایت | href="/about.html" |
| لینک به بخشی از صفحه | پرش به قسمتی از همان صفحه | href="#section1" |
| لینک ایمیل | باز کردن برنامه ایمیل | href="mailto:info@site.com" |
مثال: لینکهای مختلف
انواع لینک
HTML
v5
<h2>انواع لینک</h2>
<p>
<strong>لینک خارجی:</strong>
<a href="https://google.com">رفتن به گوگل</a>
</p>
<p>
<strong>لینک داخلی:</strong>
<a href="/about.html">درباره ما</a>
</p>
<p>
<strong>لینک ایمیل:</strong>
<a href="mailto:info@rajestary.com">ارسال ایمیل</a>
</p>
🔓 بخش ۳: باز شدن لینک در پنجره جدید
با استفاده از ویژگی target="_blank" میتونیم لینک رو در یک پنجره یا تب جدید باز کنیم.
لینک در پنجره جدید
HTML
v5
<p>
<a href="https://rajestary.com"
target="_blank">
رجستری آکادمی (باز شدن در تب جدید)
</a>
</p>
برای لینکهای خارجی، همیشه از target="_blank" استفاده کنید تا کاربر صفحه شما رو نبازد.
🖼️ بخش ۴: اضافه کردن تصاویر
برای نمایش تصاویر در HTML از تگ <img> استفاده میکنیم. این تگ برخلاف خیلی از تگها، تگ بستهکننده ندارد.
ساختار کلی:
ساختار تصویر
HTML
v5
<img src="آدرس تصویر"
alt="توضیح تصویر">
ویژگیهای مهم تگ <img>:
src: آدرس تصویر (اجباری)alt: توضیح جایگزین برای تصویر (اجباری – برای دسترسیپذیری و سئو)width: عرض تصویر به پیکسلheight: ارتفاع تصویر به پیکسل
مثال: اضافه کردن تصویر
نمایش تصویر
HTML
v5
<img src="logo.png"
alt="لوگوی رجستری آکادمی"
width="200"
height="100">
💡 نکته مهم:
ویژگی alt برای سئو و دسترسیپذیری خیلی مهمه. اگر تصویر لود نشه، این متن به کاربر نشون داده میشه.
📝 بخش ۵: پروژه عملی – صفحه معرفی
حالا با استفاده از لینکها و تصاویر، یه صفحه معرفی برای خودت میسازی.
📝 پروژه: صفحه معرفی با تصویر و لینک
یک صفحه معرفی برای خودتان بسازید که شامل موارد زیر باشد:
- یک تصویر (آواتار یا عکس پروفایل)
- یک پاراگراف معرفی
- لینک به شبکههای اجتماعی
- لینک به یک وبسایت مورد علاقه
🔍 راهحل پروژه:
صفحه معرفی
HTML
v5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>صفحه معرفی من</title>
</head>
<body>
<h1>👋 سلام! من [اسم شما] هستم</h1>
<img src="profile.jpg"
alt="عکس پروفایل"
width="150"
height="150">
<h2>درباره من</h2>
<p>
من عاشق یادگیری و آموزش هستم.
توی <strong>رجستری آکادمی</strong>
دورههای برنامهنویسی رو یاد میگیرم.
</p>
<h2>ارتباط با من</h2>
<p>
<a href="https://instagram.com/username"
target="_blank">
📸 اینستاگرام
</a>
<a href="https://github.com/username"
target="_blank">
💻 گیتهاب
</a>
<a href="mailto:myemail@example.com">
📧 ایمیل
</a>
</p>
<p>
<strong>وبسایت مورد علاقه من:</strong>
<a href="https://rajestary.com"
target="_blank">
رجستری آکادمی
</a>
</p>
</body>
</html>
📝 تمرینهای عملی
🎯 تمرین شماره ۱: صفحه گالری
یک صفحه HTML بسازید که شامل ۳ تصویر با توضیحات باشد و هر تصویر به یک لینک خارجی متصل شود.
🎯 تمرین شماره ۲: لینکهای داخلی
یک صفحه HTML با ۳ بخش مختلف بسازید و از لینکهای داخلی برای پرش بین بخشها استفاده کنید.
🧩 جمعبندی درس
تبریک میگم! 🎉 توی این درس یاد گرفتی:
- ✅ ایجاد لینک با تگ
<a> - ✅ انواع لینک (خارجی، داخلی، ایمیل و…)
- ✅ باز کردن لینک در پنجره جدید با
target="_blank" - ✅ اضافه کردن تصاویر با تگ
<img> - ✅ ویژگیهای مهم تصاویر (src, alt, width, height)
در درس بعدی، با لیستها و جداول آشنا میشیم و میتونیم اطلاعات رو به صورت منظمتر در صفحات نمایش بدیم.
