الروابط والصور
نربط صفحات الموقع ببعضها، ونضيف الصور بالطريقة الصحيحة. ⏱ نحو 25 دقيقة.
- تكتب روابط إلى مواقع خارجية وإلى صفحات موقعك.
- تستخدم المسار النسبي للصفحات والصور.
- تكتب روابط داخل الصفحة وروابط البريد والهاتف.
- تضيف صورًا بوصف
altمناسب وتختار نوع الملف.
١الرابط: كلمة تنقلك
الويب «شبكة» لأن صفحاته مرتبطة ببعضها بـالروابط. نكتب الرابط بالوسم <a>، ونضع العنوان الذي ينتقل إليه في السمة href:
<p>ابحث في <a href="https://www.google.com">محرك البحث</a> عن أي شيء.</p><p><a href="https://www.tvtc.gov.sa" target="_blank">موقع المؤسسة</a> يفتح في تبويب جديد.</p>
اضغط الرابطين في المعاينة: سيظهر تحتها إلى أين كان سينقلك. السمة target="_blank" تفتح الرابط في تبويب جديد، ونستخدمها غالبًا للمواقع الخارجية.
٢الروابط بين صفحات موقعك
موقعك مجلد فيه عدة ملفات. للانتقال إلى صفحة في المجلد نفسه نكتب اسم الملف فقط، وهذا يسمى المسار النسبي:
📁 my-site
├── 📄 index.html
├── 📄 about.html
├── 📄 menu.html
└── 📁 images
├── 🖼 logo.svg
└── 🖼 coffee.svg<a href="index.html">الرئيسية</a><a href="about.html">من نحن</a><a href="menu.html">القائمة</a><img src="images/logo.svg" alt="شعار بُنّ">
الصورة في مجلد اسمه images، فنكتب اسم المجلد ثم / ثم اسم الملف: images/logo.svg.
٣روابط من نوع آخر
<p><a href="#contact">انتقل إلى التواصل ↓</a></p><p style="height:120px">محتوى طويل…</p><h2 id="contact">التواصل</h2><p><a href="mailto:info@bunn.sa">أرسل بريدًا</a></p><p><a href="tel:0500000000">اتصل بنا</a></p>
| الرابط | يذهب إلى |
|---|---|
href="#contact" | العنصر الذي له id="contact" في الصفحة نفسها. |
href="mailto:…" | برنامج البريد برسالة جديدة لهذا العنوان. |
href="tel:…" | الاتصال بالرقم (مفيد جدًّا في الجوال). |
٤الصور
نضيف الصورة بالوسم <img>، وهو وسم مفرد بلا إغلاق. له سمتان أساسيتان:
<img src="images/coffee.svg" alt="كوب قهوة ساخن" width="240"><p>قهوتنا تُحمَّص كل صباح.</p><img src="images/missing.jpg" alt="صورة المحل من الخارج" width="240">
| السمة | وظيفتها |
|---|---|
src | مكان ملف الصورة (المصدر). |
alt | وصف نصي للصورة: يظهر إذا لم تُحمَّل (كما في الصورة الثانية)، وتقرؤه قارئات الشاشة لفاقدي البصر، وتفهم منه محركات البحث. |
width و height | العرض والارتفاع بالبكسل. يكفي واحد منهما ليبقى الشكل متناسبًا. |
٥أنواع ملفات الصور
| النوع | متى نستخدمه؟ |
|---|---|
| JPG | الصور الفوتوغرافية. |
| PNG | الصور التي تحتاج خلفية شفافة. |
| SVG | الشعارات والأيقونات والرسوم: لا تفقد وضوحها مهما كبّرتها. |
| WebP | صيغة حديثة بحجم أصغر، فتفتح الصفحة أسرع. |
٦الصورة رابطًا، والصورة مع تعليق
<a href="index.html"><img src="images/logo.svg" alt="بُنّ: الصفحة الرئيسية" width="70"></a> <figure> <img src="images/dessert.svg" alt="كعكة بالكرز" width="200"> <figcaption>حلى اليوم: كعكة الكرز</figcaption></figure>
ضع <img> داخل <a> فتصبح الصورة رابطًا، مثل الشعار الذي يرجعك إلى الرئيسية. والوسم <figure> يجمع الصورة مع تعليقها <figcaption>.
توقّع وتحقّق
أي سمة تحدد إلى أين ينقلك الرابط؟
href = Hypertext REFerence.ما فائدة alt في الصورة؟
الصورة cat.jpg داخل مجلد images. ما المسار الصحيح؟
رابط ينتقل إلى عنصر في الصفحة نفسها له id="faq":
الخلاصة
- الرابط:
<a href=العنوان>النص</a>، وtarget="_blank"لتبويب جديد. - المسار النسبي:
about.htmlأوimages/logo.svg. - #
idللانتقال داخل الصفحة، وmailto: للبريد، وtel: للهاتف. <img>وسم مفرد سماتهsrcوaltوwidth، وaltوصف حقيقي للصورة.
تحدٍّ برمجي: صفحة مقهى «بُنّ»
متوسطاكتب الصفحة الرئيسية لمقهى «بُنّ»: الشعار رابطًا إلى الرئيسية، وروابط تنقل، وصورة لمنتج، ورابط تواصل بالبريد. الصور جاهزة في مجلد images: logo.svg و coffee.svg و dessert.svg.
- الشعار
images/logo.svgداخل رابط إلى index.html. - رابط إلى صفحة menu.html.
- رابط خارجي إلى خرائط Google يفتح في تبويب جديد.
- صورة منتج (coffee.svg أو dessert.svg) بعرض 250.
- لكل صورة alt فيه وصف حقيقي.
- رابط بريد mailto.
👀 اعرض شكل الناتج المطلوب
- الشعار logo.svg داخل رابط إلى index.html.
- رابط إلى menu.html.
- رابط خارجي
(https)يفتح في تبويب جديد. - صورة منتج بعرض 250.
- كل الصور لها alt من كلمتين على الأقل.
- رابط بريد mailto.
💡 تلميح 1
a href="index.html"> و </a>.💡 تلميح 2
target="_blank"حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<a href="index.html"> <img src="images/logo.svg" alt="شعار مقهى بُنّ" width="60"></a><h1>مقهى بُنّ</h1><p> <a href="menu.html">القائمة</a> | <a href="https://maps.google.com" target="_blank">موقعنا على الخريطة</a></p><img src="images/coffee.svg" alt="كوب قهوة مختصة ساخن" width="250"><p>راسلنا: <a href="mailto:info@bunn.sa">info@bunn.sa</a></p>