تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إنشاء روابط


الصفحة السابقة

في الفصل السابق ، تعلمت كيفية إنشاء صفحة HTML بسيطة. حسنًا ، لم تكن جميلة حقًا ، لكنها كانت صفحة HTML حقيقية على أي حال.

كما تعلمون ، يتكون موقع الويب من عدة صفحات. كيف أذهب من صفحة إلى أخرى؟ مع الروابط هنا! في هذا الفصل ، سوف نتعلم كيفية إنشاء روابط بين صفحاتنا.

أعتقد أن كل واحد منكم يعرف ما هو الرابط: إنه نص يمكنك النقر عليه للانتقال إلى صفحة أخرى. يمكنك الارتباط من صفحة a.htmlإلى صفحة b.html، ولكن يمكنك أيضًا الارتباط بموقع آخر (على سبيل المثال ، http://www.google.com). في كلتا الحالتين ، سوف نرى أن العملية هي نفسها.

رابط لموقع آخر


من السهل التعرف على الروابط الموجودة على الصفحة: يتم كتابتها بطريقة مختلفة (بشكل افتراضي ، باللون الأزرق و يكون تحتها سطر) ويظهر مؤشر على شكل يد عند الإشارة إليها

أقترح محاولة كتابة كود الرابط الذي يؤدي إلى" Google" ، كما في الشكل التالي.

html link

لكي ننشأ رابطا نستعمل علامة بسيطة جدا هي:

<a>. ومع ذلك ، يجب عليك إضافة سمة href، ، للإشارة إلى الصفحة التي يجب أن يؤدي الرابط.

على سبيل المثال ، الكود أدناه عبارة عن رابط لـ Google ، ويقع في https://www.google.com


    <a href="https://www.google.com">Google</a>

سنضع هذا الرابط في فقرة. فيما يلي كيفية إعادة كتلبة كود مثال الشكل السابق:


<p>
اذا اردت ان تتعلم البرمجة ما عليك الا ان تتبع جميع الخطوات معنا
<br> و اذا احتجت معلومات اضافية تستطيع زيارة 
<a href="https://www.google.com">Google</a>
    و البحث 
</p>

افتراضيًا ، يظهر الرابط باللون الأزرق المسطر. إذا قمت بالفعل بفتح الصفحة ، فسيظهر الرابط باللون الأرجواني. سوف نرى كيفية تغيير هذا المظهر عندما ندرس CSS.

إذا كنت ترغب في الارتباط بموقع آخر ، ما عليك سوى نسخ عنوانه ) هذا العنوان نسميه او نطلق عليه ( URL

إذا كنت تريد ان تصل إلى موقع له عنوان غريب قليلاً يوجد في عنوانه & ،

مثل http://www.site.com/?data=15&name=sam: ، فستحتاج إلى استبدال كل "&" بـ

";amp&"

لتصبح مثل هذا:

http://www.site.com/?data=15&amp;name=sam.

لن ترى الفرق ، ولكن من الضروري أن يكون لديك صفحة ويب مدمجة بشكل صحيح في HTML5.

الروابط التي رأيناها للتو تسمى الروابط المطلقة لأننا نشير إلى العنوان الكامل. سنرى الآن أنه يمكننا كتابة الروابط بطريقة مختلفة قليلاً ، والتي ستكون مفيدة في إنشاء روابط بين صفحات موقعنا.

رابط إلى صفحة أخرى من نفس الموقع (موقعك)


لقد تعلمنا للتو كيفية إنشاء روابط إلى المواقع الاخرى. لكنني متأكد من رغبتك في إنشاء روابط بين صفحات مختلفة من موقعك ، أليس كذلك؟

نعم ، بالضبط ، كيف أقوم بإنشاء رابط إلى صفحة أخرى من موقعي؟ لا أعرف عنوانه http://…، لقد بدأت للتو في إنشاء موقعي! ليس لدي عنوان

في الواقع ، في الوقت الحالي ، تقوم بإنشاء موقعك على جهاز الكمبيوتر الخاص بك. أنت الشخص الوحيد الذي يمكنه رؤيته ولا يزال ليس لديه "عنوان ويب" يبدأ http://مثل معظم المواقع. لحسن الحظ ، هذا لن يمنعنا من العمل.

صفحتين في نفس المجلد

للبدء ، سننشئ ملفين يتوافق مع صفحتين مختلفتين من HTML. بما أنني مصدر إلهام كبير ، أقترح اعطاءهم الأسماء page1.html و page2.html سيكون لدينا هذين الملفين على قرصنا في نفس المجلد (الشكل التالي.

html link

عدة ملفات HTML في مجلد واحد

كيفية إنشاء رابط من الصفحة 1 إلى الصفحة 2 ، دون وجود عنوان في http://؟ في الواقع ، يكون الأمر سهلاً: إذا كان الملفان موجودان في نفس المجلد ، فما عليك سوى كتابة اسم الملف الذي نريد إحضاره كهدف للرابط. على سبيل المثال:

<a href="page2.html">.و هذا يسمى ارتباط نسبي .

إليك الكود الذي سنستخدمه في ملفاتنا page1.htmlو page2.html.

PAGE1.HTML

<p>مرحبا هل تريد ان تزور  <a href="page2.html">الصفحة 2 </a> ?</p>

PAGE2.HTML

ستعرض الصفحة 2 (الصفحة المقصودة) رسالة للإشارة إلى أننا وصلنا إلى الصفحة 2:


    <h1>مرحبا بك في الصفحة 2 </h1>

صفحتان في مجلدات مختلفة

تصبح الأمور صعبة بعض الشيء إذا كانت الصفحات في مجلدات مختلفة. من الناحية المثالية ، يجب ألا تكون متباعدة جدًا (في مجلد فرعي على سبيل المثال).

تخيل وجوده page2.htmlفي مجلد فرعي مسمى content، كما في الشكل التالي.

html link

يوجد ملف page2.html داخل مجلد content

في هذه الحالة ، يجب كتابة الرابط مثل هذا:


<a href="content/page2.html">

إذا كان هناك العديد من المجلدات الفرعية ، فسنكتب هذا:


<a href="content/otherfolders/page2.html">

وإذا كان الملف غير موجود في مجلد فرعي ولكن في مجلد "أصل" ، كيف يمكننا القيام بذلك؟

إذا تم وضع الملف الذي سنزوره بالرابط الذي نريد انشاءه في مجلد "أعلى" في الشجرة ، فاكتب نقطتين مثل هذا:


<a href="../page2.html">

الخلاصة في الصورة
html link

رابط في نفس الصفحة (رابط مرساة)


هذه النوعية من الروابط يمكنك وضعها في صفحات HTML الخاصة بك اذا كانت طويلة جدا. في الواقع ، قد يكون من المفيد إنشاء رابط يؤدي إلى أسفل الصفحة نفسها حتى يتمكن الزائر من القفز مباشرة إلى الجزء الذي يثير اهتمامه.

لإنشاء مرساة ، ببساطة يجب إضافة السمة idإلى علامة معينة لتكون بمثابة مرجع. يمكن وضعها في أية علامة ، عنوانًا على سبيل المثال. استخدم السمة idلمنح المرساة اسمًا. هذا سيخدمنا بعد ذلك لربط هذه العلامة مثلا :


<h2 id="my_ancher">Title</h2>

بعد ذلك ، قم فقط بإنشاء رابط كالمعتاد ، ولكن هذه المرة hrefستحتوي السمة على علامة (#) متبوعة باسم المرساة. على سبيل المثال:


    <a href="#my_ancher">اذهب الى المرساة</a>

عادةً ، إذا نقرت على الرابط ، فسوف ينقلك هذا الأمر إلى أسفل الصفحة نفسها (شريطة أن يكون للصفحة نص كافٍ لتحريك أشرطة التمرير تلقائيًا).

فيما يلي مثال لصفحة بها الكثير من النص واستخدام نقاط ربط (أضع أي شيء في النص المراد ملؤه):


    <h1>My page</h1>
    <p>
        انتقل مباشرة إلى الجزء الذي يتعامل معه:<br />
        <a href="#cuisine"> الطبخ </a><br />
        <a href="#rollers"> البكرات </a><br />
        <a href="#arc"> الرماية </a><br />
    </p>
    <h2 id="cuisine"> الطبخ </h2>
    <p>... (نص طويل) ...</p>
    <h2 id="rollers"> البكرات </h2>
    <p>... (نص طويل) ...</p>
    <h2 id="arc"> الرماية </h2>
    <p>... (نص طويل) ...</p>


إذا لم يحدث شيء عند النقر فوق الارتباطات ، فلا يوجد نص كافٍ. في هذه الحالة ، يمكنك إما إضافة بعض النقط في الصفحة بحيث يكون هناك نص (لا يزال) أكثر ، أو تقليل حجم نافذة المستعرض لإظهار أشرطة التمرير على الجانب.

يتم استخدام السمة idلإعطاء اسم "فريد" لعلامة معينة، لاستخدامها كمرساة وصدقوني ، لم تنته من سماع هذه السمة. هنا ، يتم استخدامه للربط مع مرساة ، ولكن في CSS ، سيكون من المفيد للغاية "تحديد" علامة دقيقة ، سترى. ومع ذلك ، تجنب إنشاء معرفات ذات مسافات أو أحرف خاصة ، ما عليك سوى استخدام الحروف والأرقام قدر الإمكان حتى يتم التعرف على القيمة بواسطة جميع المتصفحات.

ربط مرساة على صفحة أخرى

حتى هنا أحذرك ، سنفعل megamix!

تتمثل الفكرة في إنشاء رابط يفتح صفحة أخرى ويؤدي مباشرةً إلى مرساة في أسفل هذه الصفحة. في الممارسة العملية ، يكون الأمر بسيطًا جدًا: فقط اكتب اسم الصفحة ، متبوعًا بعلامة ( #) ، متبوعة باسم المرساة.

مثلا

<a href="anchers.html#rollers">

سوف يأخذك إلى الصفحة anchers.html، مباشرة في المرساة يسمى rollers.

فيما يلي صفحة تحتوي على ثلاثة ارتباطات ، يؤدي كل منها إلى أحد نقاط الارتساء في الصفحة في المثال السابق:


 <h1>the Megamix</h1>
<p>
    لذهاب إلى مكان ما في صفحة أخرى:<br />
    <a href="anchers.html#cuisine">الطبخ</a><br />
    <a href="anchers.html#rollers"> البكرات </a><br />
    <a href="anchers.html#arc"> الرماية </a><br />
</p>


حالات عملية لاستخدام الروابط


سأحاول أن أريك هنا بعض الحالات العملية لاستخدام الروابط. على سبيل المثال ، هل تعلم أنه من السهل جدًا إنشاء روابط تقوم بتنزيل أحد الملفات؟ من الذي ينشئ بريدًا إلكترونيًا جديدًا؟ من يفتح نافذة جديدة؟

لا؟ حسنًا ، دعنا نرى كل هذا هنا.

رابط يعرض معلومات عند وضع زر الفارة فوقه

المعلومات التي ستعرض توضع في ما يسمى منطاد المساعدة (tooltip)

يمكنك استخدام السمة title التي تعرض معلومات عند الإشارة إلى الرابط. هذه السمة اختيارية.

سيكون لديك نتيجة تشبه الشكل التالي.

html link

يمكن أن يكون منطاد المساعدة مفيدًا لإبلاغ الزائر حتى قبل النقر على الرابط.

إليك كيفية إعادة إنتاج هذه النتيجة:


            معنا
<br> و اذا احتجت معلومات اضافية تستطيع زيارة 
<a href="http://google.com" title="هذا الرابط يفتح محرك البحث google">
Google</a> و البحث 



رابط يفتح نافذة جديدة

من الممكن "فرض" فتح رابط في نافذة جديدة. لذلك ، سنضيف "target="_blank إلى العلامة :


<a href="" title="هذا الرابط يفتح محرك البحث google" target="_blank">
    Google
</a>


حسب تكوين المستعرض ، سيتم عرض الصفحة في نافذة أو علامة تبويب جديدة. لا يمكنك الاختيار بين فتح نافذة أو علامة تبويب جديدة.

لاحظ أنه من المستحسن عدم إساءة استخدام هذه التقنية لأنها تعطل التنقل. يمكن للزائر نفسه أن يقرر ما إذا كان يريد فتح الرابط في نافذة جديدة. يستطيع النقر على الرابط مع الضغط على Maj لفتحه في نافذة جديدة أو مع Ctrl لفتحه في علامة تبويب جديدة.

رابط لإرسال بريد إلكتروني

إذا كنت تريد أن يرسل لك الزوار رسالة بريد إلكتروني ، فيمكنك استخدام روابط الكتابة mailto . لا شيء يتغير على مستوى العلامة ، تحتاج فقط إلى تغيير قيمة السمة href مثل هذا:


<p><a href="mailto:yourname@server.com">ارسل لي بريدا الكترونيا !</a></p>

لذلك فقط ابدأ الرابط عن طريق mailto:وكتابة عنوان البريد الإلكتروني حيث يمكننا الاتصال بك. إذا قمت بالنقر فوق الارتباط ، يتم فتح رسالة فارغة جديدة ، جاهزة للإرسال إلى عنوان البريد الإلكتروني الخاص بك.

رابط لتحميل الملف

يتساءل الكثير منكم عما يحدث عند تنزيل ملف ... في الواقع ، يجب عليك المتابعة كما لو كنت تقوم بالربط بصفحة ويب ، ولكن هذه المرة تشير إلى اسم الملف المراد تنزيله.

على سبيل المثال ، افترض أنك تريد التنزيل myfile.zip . ما عليك سوى وضع هذا الملف في نفس المجلد مثل صفحة الويب الخاصة بك (أو المجلد الفرعي) وربط هذا الملف:


<p><a href="myfile.zip">تنزيل الملف</a></p>

هذا كل شيئ ! المتصفح ، يرى أنه ليس صفحة ويب لعرضه ، سيبدأ إجراء التنزيل عند النقر على الرابط.

الخلاصة