🌐 درس سوم: لینکها و تصاویر در HTML
🎯 هدف این درس: یادگیری ساخت لینکهای حرفهای، ایجاد لینکهای داخلی و خارجی، باز کردن لینک در تب جدید و نمایش تصاویر در صفحات وب
مهمان عزیز! 👋
در درسهای قبلی با ساختار HTML و تگهای متنی آشنا شدی. حالا وقت آن رسیده که صفحههای وب خودت را از حالت یک صفحه ساده و ثابت خارج کنی.
تقریباً هر وبسایتی که روزانه استفاده میکنی، از لینکها و تصاویر تشکیل شده است.
لینکها به کاربر اجازه میدهند از یک صفحه به صفحه دیگر حرکت کند و تصاویر هم نقش مهمی در انتقال اطلاعات و جذابتر شدن محتوای صفحه دارند.
💡 نکته مهمان:
در HTML برای ایجاد لینک معمولاً از تگ <a> و برای نمایش تصویر از تگ <img> استفاده میکنیم.
🔗 بخش ۱: ساخت لینک در HTML
مهمان جان، برای ساخت لینک در HTML از تگ <a> استفاده میکنیم.
این تگ یکی از مهمترین تگهای HTML است و تقریباً در تمام وبسایتها دیده میشود.
آدرس مقصد لینک با ویژگی href مشخص میشود.
متنی که کاربر روی آن کلیک میکند نیز بین تگ باز و بسته <a> قرار میگیرد.
ساختار یک لینک ساده:
لینک ساده
HTML
HTML5
<a href="https://rajestary.com">وبسایت رجستری</a>
در این مثال، href مقصد لینک را مشخص میکند و عبارت «وبسایت رجستری» همان متنی است که کاربر روی آن کلیک خواهد کرد.
🌍 بخش ۲: لینک خارجی
لینک خارجی زمانی استفاده میشود که بخواهیم کاربر را به یک وبسایت یا دامنه دیگر منتقل کنیم.
برای مثال میتوانیم کاربر را به سایت PHP، مستندات HTML یا هر وبسایت دیگری هدایت کنیم.
لینک خارجی
HTML
HTML5
<a href="https://www.php.net">مستندات رسمی PHP</a>
📂 بخش ۳: لینک داخلی
لینک داخلی برای جابهجایی بین صفحات یا بخشهای مختلف یک وبسایت استفاده میشود.
برای مثال، صفحه اصلی میتواند به صفحه آموزشها، تماس با ما یا درباره ما لینک داشته باشد.
در لینک داخلی معمولاً نیازی به نوشتن آدرس کامل دامنه نداریم و میتوانیم از مسیر صفحه استفاده کنیم.
لینک داخلی
HTML
HTML5
<a href="/courses/">مشاهده دورهها</a>
<a href="/contact/">تماس با ما</a>
💡 نکته کلیدی مهمان:
اگر لینک مربوط به همان وبسایت باشد، میتوان از مسیر نسبی مانند /courses/ استفاده کرد.
این روش باعث میشود ساختار لینکها سادهتر و قابل مدیریتتر باشد.
🆕 بخش ۴: باز کردن لینک در تب جدید
گاهی لازم است لینک در یک تب جدید مرورگر باز شود تا کاربر صفحه فعلی را از دست ندهد.
برای این کار میتوانیم از ویژگی target="_blank" استفاده کنیم.
باز کردن در تب جدید
HTML
HTML5
<a href="https://rajestary.com" target="_blank" rel="noopener">
باز کردن وبسایت رجستری
</a>
استفاده از rel="noopener" در لینکهایی که با target="_blank" باز میشوند، یک عادت مناسب برای افزایش امنیت و جداسازی صفحه مقصد از صفحه فعلی است.
🖼️ بخش ۵: نمایش تصویر در HTML
برای نمایش تصویر در HTML از تگ <img> استفاده میکنیم.
برخلاف بسیاری از تگهای HTML، تگ <img> به تگ بسته جداگانه نیاز ندارد.
مسیر تصویر با ویژگی src مشخص میشود.
ویژگی alt نیز یک توضیح متنی برای تصویر فراهم میکند.
ساختار ساده تصویر:
نمایش تصویر
HTML
HTML5
<img src="images/computer.jpg" alt="کامپیوتر برای برنامهنویسی">
⚠️ نکته مهم مهمان:
ویژگی alt را حذف نکن. این متن زمانی که تصویر بارگذاری نشود، برای موتورهای جستجو و ابزارهای کمکی اهمیت دارد و به درک محتوای تصویر کمک میکند.
📁 بخش ۶: مسیر تصاویر
یکی از خطاهای رایج در ابتدای یادگیری HTML، اشتباه وارد کردن مسیر فایل تصویر است.
مسیر باید نسبت به محل فایل HTML یا به صورت یک آدرس کامل اینترنتی مشخص شود.
مسیر تصاویر
HTML
HTML5
<!-- تصویر در همان پوشه فایل HTML -->
<img src="photo.jpg" alt="تصویر نمونه">
<!-- تصویر داخل پوشه images -->
<img src="images/photo.jpg" alt="تصویر نمونه">
<!-- تصویر از یک آدرس اینترنتی -->
<img src="https://example.com/photo.jpg" alt="تصویر نمونه">
📏 بخش ۷: تعیین اندازه تصویر
HTML به ما اجازه میدهد با ویژگیهای width و height ابعاد تصویر را مشخص کنیم.
با این حال، در پروژههای واقعی بهتر است کنترل ظاهر و اندازه عناصر را به CSS بسپاریم.
اندازه تصویر
HTML
HTML5
<img
src="images/academy.jpg"
alt="رجستری آکادمی"
width="600"
height="400"
>
🖼️ بخش ۸: قرار دادن تصویر داخل لینک
یکی از کاربردهای جالب HTML این است که میتوانیم تصویر را داخل یک لینک قرار دهیم.
در این حالت، کاربر با کلیک روی تصویر به مقصد مشخصشده منتقل میشود.
تصویر لینکشده
HTML
HTML5
<a href="https://rajestary.com">
<img src="images/logo.png" alt="لوگوی رجستری">
</a>
🧪 پروژه عملی: ساخت کارت معرفی
📝 پروژه: کارت معرفی شخصی
در این پروژه یک صفحه ساده ایجاد میکنیم که شامل تصویر، نام، توضیح کوتاه و یک لینک باشد.
هدف این است که مفاهیم این درس را در کنار هم استفاده کنی.
🔍 راهحل پروژه:
کارت معرفی
HTML
HTML5
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>کارت معرفی من</title>
</head>
<body>
<h1>مهمان رجستری</h1>
<img
src="images/profile.jpg"
alt="تصویر پروفایل"
width="200"
height="200"
>
<p>
توسعهدهنده وب و علاقهمند به یادگیری فناوریهای جدید.
</p>
<p>
<a
href="https://rajestary.com"
target="_blank"
rel="noopener"
>
مشاهده وبسایت
</a>
</p>
</body>
</html>
📝 تمرینهای عملی
🎯 تمرین شماره ۱: ساخت لینک
یک لینک به وبسایت مورد علاقه خود ایجاد کن و کاری کن که با کلیک روی آن، صفحه در تب جدید باز شود.
🎯 تمرین شماره ۲: نمایش تصویر
یک تصویر داخل پروژه قرار بده و با استفاده از تگ <img> آن را در صفحه نمایش بده.
برای تصویر یک متن مناسب در ویژگی alt قرار بده.
🎯 تمرین شماره ۳: ترکیب لینک و تصویر
یک تصویر را داخل تگ لینک قرار بده تا کاربر با کلیک روی تصویر به یک صفحه دیگر منتقل شود.
🧩 نکات کلیدی درس
- ✅ برای ساخت لینک از تگ
<a>استفاده میکنیم. - ✅ مقصد لینک با ویژگی
hrefمشخص میشود. - ✅ برای باز کردن لینک در تب جدید از
target="_blank"استفاده میکنیم. - ✅ استفاده از
rel="noopener"در لینکهای تب جدید یک روش مناسب امنیتی است. - ✅ برای نمایش تصویر از تگ
<img>استفاده میکنیم. - ✅ مسیر تصویر با ویژگی
srcمشخص میشود. - ✅ ویژگی
altباید توضیح مناسبی از تصویر ارائه دهد. - ✅ میتوان یک تصویر را داخل لینک قرار داد.
- ✅ مسیر فایلها باید با ساختار پوشههای پروژه هماهنگ باشد.
حالا دیگر میتوانی صفحههایی بسازی که فقط متن نباشند؛ میتوانی کاربران را بین صفحات مختلف جابهجا کنی و تصاویر را هم به محتوایت اضافه کنی.
در درس بعدی سراغ لیستها و جداول در HTML میرویم.
