جاري التحميل...
جاري التحميل...
التنقل بين الصفحات وإضافة الصور
الروابط هي واحدة من أهم ميزات الويب. بدون الروابط، كل صفحة ويب ستكون معزولة عن الأخرى. علامة الارتباط هي العلامة التي تحوّل أي عنصر إلى رابط تفاعلي يمكنك النقر عليه للانتقال إلى صفحة أخرى أو موضع آخر في الصفحة نفسها.
اسم "الارتباط" يأتي من فكرة أن الرابط "يرسو" مكاناً محدداً على الإنترنت، مثل المرساة التي تحجز السفينة في مكان واحد.
💡 تشبيه:
تخيّل أنك تكتب رسالة وتريد أن تحدد كلمة "انقر هنا" لتحويلها إلى رابط ينقلك إلى صفحة أخرى. علامة <a> تفعل هذا بالضبط، لكن بدلاً من "انقر هنا"، تحدد وجهة الرابط باستخدام خاصية href.
الروابط تحل مشكلة أساسية على الويب: كيف ننتقل من صفحة إلى أخرى؟
بدون الروابط، الويب سيكون مجرد مجموعة صفحات معزولة. الروابط هي ما يخلق "الشبكة" في شبكة الإنترنت العالمية:
تربط بين صفحات مختلفة في نفس الموقع:
تفتح صفحات في مواقع أخرى:
تنقل إلى موضع محدد داخل الصفحة نفسها:
تفتح برنامج البريد الإلكتروني:
تنزيل ملفات مباشرة:
الصور تجعل صفحات الويب أكثر جاذبية. في HTML، نستخدم علامة <img> لإدراج الصور.
💡 نصيحة:
استخدم WebP إذا أمكن (أفضل ضغط)، وPNG للصور التي تحتاج شفافية، وJPG للصور الفوتوغرافية العادية.
خاصية alt مهمة جداً لعدة أسباب:
💡 أفضل الممارسات لنص alt:
اكتب وصفاً دقيقاً ومختصراً للصورة. تجنب عبارات مثل "صورة" أو "image". مثال: alt="قط أسود يلعب بكرة صوفية حمراء".
target="_blank" مع rel="noopener noreferrer".<a href="..."><img src="..." alt="..." />id للوجهةtarget="_blank"أي الخاصيات تُستخدم لتحديد وجهة الرابط؟
لماذا نستخدم نص alt في الصور؟
أنشئ صفحة HTML تحتوي على: 1. رابط رئيسي لصفحة أخرى، 2. رابط لقسم في الصفحة نفسها، 3. صورة بنص alt وصفي، 4. رابط صورة تنقل لصفحة أخرى، 5. رابط بريد إلكتروني.
الحل:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>معرضي الشخصي</title>
</head>
<body>
<header>
<a href="/">
<img src="logo.svg" alt="شعار معرضي" width="100" height="40" />
</a>
<nav>
<a href="#travel">رحلاتي</a>
<a href="#nature">الطبيعة</a>
<a href="#food">أكلاتي</a>
</nav>
</header>
<main>
<section id="travel">
<h2>رحلاتي</h2>
<figure>
<img src="travel.jpg" alt="صورة من رحلة استانبول" width="600" height="400" />
<figcaption>رحلة استانبول - صيف 2025</figcaption>
</figure>
</section>
<section id="nature">
<h2>الطبيعة</h2>
<figure>
<img src="nature.jpg" alt="غروب في الصحراء" width="600" height="400" />
<figcaption>غروب الصحراء - الربع الخالي</figcaption>
</figure>
</section>
<section id="food">
<h2>أكلاتي</h2>
<figure>
<img src="food.jpg" alt="طعام منزلي" width="600" height="400" />
<figcaption>وصفة منزلي - مندي الدجاج</figcaption>
</figure>
</section>
</main>
<footer>
<p>تواصل: <a href="mailto:me@example.com">أرسل بريد</a> | <a href="tel:+966501234567">اتصل</a></p>
</footer>
</body>
</html>أنشئ صفحة مدونة بسيطة تتضمن:
#<figure>💡 استخدم <code><figure></code> و<code><figcaption></code> مع كل صورة، ولا تنسَ <code>rel='noopener noreferrer'</code> مع الروابط الخارجية.
الروابط:
<a href="url"> - رابط أساسيtarget="_blank" - فتح في تبويب جديدrel="noopener noreferrer" - أمان مع _blankhref="#id" - رابط داخلي للصفحةhref="mailto:x@x.com" - رابط بريد إلكترونيhref="tel:+123456" - رابط اتصال هاتفيdownload - رابط تنزيل ملفالصور:
src - مصدر الصورة (إلزامي)alt - نص بديل (إلزامي)width / height - الأبعادloading="lazy" - التحميل البطيء<figure> - حاوية الصورة<figcaption> - تعليق الصورة<!-- الروابط -->
<a href="https://example.com">خارجي</a>
<a href="/about">داخلي</a>
<a href="#section">مرساة</a>
<a href="mailto:x@x.com">بريد</a>
<a href="file.pdf" download>تنزيل</a>
<a href="url" target="_blank"
rel="noopener noreferrer">تبويب جديد</a>
<!-- الصور -->
<img src="pic.jpg" alt="وصف"
width="400" height="300"
loading="lazy" />
<figure>
<img src="pic.jpg" alt="وصف" />
<figcaption>نص التعليق</figcaption>
</figure>