الدرس السادس - اللينكات

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع

 

 

أهلاً وسهلاً بك إلى الدرس السادس من دروس HTML
 
كيف وصلت إلى هذه الصفحة؟! ربما تعتبر هذا سؤالاً سخيفاً، وأن الإجابة عليه هي من البديهيات ... وهذا صحيح! من المؤكد أنك قمت بالإنتقال إلى هنا من خلال إحدى صفحات هذا الموقع، أو من خلال أحد محركات البحث، أو من خلال أحد المواقع التي قمت بزيارتها مؤخراً ... وفي كل الأحوال قمت بالنقر على لينك ما.

Links... أو اللينكات هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه اللينكات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها. تنقر على وصلة ما فتنقلك إلى صفحة أخرى في نفس الموقع... وتنقر على وصلة أخرى لتنقلك كلياً إلى أحد المواقع في الجانب الآخر من العالم... وصلة تجعلك تحمّل ملفاً وأخرى تجعلك تشغّل مقطعا موسيقياً وثالثة تعرض لك صورة...
حسناً، من المؤكد أنك استنتجت الآن من هذه المقدمة أنك بصدد تعلم كيفية إدراج اللينكات في صفحاتك... لقد صدق استنتاجك لذلك هيا إلى العمل...

هناك عدة خيارات للوصلات التشعبية، منها أن تكون الوصلة لموقع آخر، أو أن تكون لصفحة أخرى داخل الموقع نفسه، ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى أو أسفل على سبيل المثال) أو أن تكون وصلة لعنوان بريد إلكتروني E-mail وفي جميع الحالات فإن المبدأ واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة على حدة وبالتفصيل.

نستخدم التاجات

<A> ... <‎/A>

كتاجات أساسية لإدراج اللينكات، وهي اختصار لكلمة Anchor. وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية

HREF

التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً.

الحالة الأولى: إدراج لينك يشير إلى موقع خارجي.
لنقم بإدراج لينك إلى أحد المواقع العربية الرائدة والرائعة، وهو موقع العلامة الدكتور يوسف القرضاوي. وعنوانه http://www.qaradawi.net في هذه الحالة يتم كتابة الشيفرة بالشكل التالي:

<A HREF="http://www.qaradawi.net"> <‎/A>

لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر عليها لتشغيل الوصلة، وهذه يجب أن توضع بين التاجين <A> ... <‎/A>. أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة نريدها، لكي ينقر عليها الزائر فتنقله إلى العنوان المطلوب. ما رأيك بعبارة: Go To SAKHR والتي تصبح الشيفرة معها بالشكل التالي:

<A HREF="http://www.qaradawi.net">موقع الدكتور يوسف القرضاوي<‎/A>

وتظهر الوصلة كما يلي:

موقع الدكتور يوسف القرضاوي

لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة القرضاوي دوت نت هي فقط العنوان لهذه الوصلة.

‎Go To <A HREF="http://www.qaradawi.net">القرضاوي دوت نت<‎/A>‎

إذهب إلي القرضاوي دوت نت

بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما تشاهد في الكثير من المواقع- وكل ما عليك فعله في هذه الحالة هو كتابة التاج الخاص بإدراج الصورة بين التاجين <A> ... <‎/A> بالشكل التالي:

<A HREF="http://www.qaradawi.net"><IMG SRC="qaradawi.jpg">‎<‎/A>

والذي يؤدي إلى ظهور الصورة التالية كلينك لموقع صخر

وبشكل عام فإن أي شيء يوضع بين التاجين <A> ... <‎/A> سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع المشار إليه في اللينك، سواءً كان هذا الشيء نصاً أو صورة أو كلاهما معاً.

والآن هل تلاحظ الإطار الظاهر حول الصورة؟ وهل تذكر متى قمنا بالحديث عن هذا النوع من الإطارات؟ نعم، في الدرس السابق. عند إدراج صورة كلينك يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. وبالطبع نستطيع إزالته بكتابة الخاصية BORDER="0"‎ ضمن تاج الصورة.

<A HREF="http://www.qaradawi.net"><IMG SRC="qaradawi.jpg" BORDER="0"><‎/A>

أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية.

<A HREF="http://www.qaradawi.net"><IMG SRC="qaradawi.jpg" BORDER="6"><‎/A>

---

ننتقل الآن إلى الحالة الثانية، وهي أن تشير اللينك إلى ملف موجود في نفس الموقع (أي ملف محلي) سواءً كان ملف HTML أو صورة أو غير ذلك. وفي هذه الحالة فإن ما يكتب مع الخاصية HREF هو اسم هذا الملف المطلوب الوصول إليه.
 
لنقم بإنشاء لينك يقودنا إلى الصفحة الرئيسية لهذا الموقع وبالمناسبة فإن الملف الذي يحتويها اسمه index.html ، والشيفرة الخاصة بذلك هي:

<A HREF="index.html">Main Page<‎/A>

Main Page

وأذكرك بأنك تستطيع إدراج صورة هنا أيضاً كعنوان لللينك وذلك بنفس التفاصيل التي شرحتها في الحالة السابقة.

هيا ندرج صورة مصغرة كعنوان لللينك للصورة الأصلية.

<A HREF="aqsa.jpg"><IMG SRC="aqsa-s.jpg" BORDER="0"><‎/A>

في هذا المثال قمت بتحديد الصورة المصغرة المسماه aqsa-s.jpg كلينك يصلنا إلى الصورة الأصلية المسماه aqsa.jpg

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

---

الحالة الثالثة هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة، إلى أولها مثلاً أو إلى آخرها أو أي مكان آخر نريده... طبعاً مهما بلغت درجة الذكاء والألمعية التي يتصف بها الكمبيوتر ومتصفح الإنترنت، فهما لا يستطيعان معرفة ما يدور بفكرك وبالتالي لا يستطيعان معرفة المكان الموجود في نفس الصفحة والذي تريد نقل زائرك إليه من خلال اللينك. لذلك يجب أن تقوم أنت بتحديده.   والمبدأ هنا هو أن تقوم بتعريف أو تسمية هذا المكان بإسم معين سوف تقوم لاحقا باستخدامه في اللينك. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية للتاج <A> وهي NAME لنقم معاً بإدراج لينك داخل هذه الصفحة تقوم بنقل الزائر من مكان وجود هذه الوصلة إلى الفقرة الثالثة من هذه الصفحة والتي بدأنا فيها الحديث عن اللينكات Links   أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل التاجات <A> ... <‎/A> <A>LINKS<‎/A> والآن حان الوقت لاستخدام الخاصية NAME فالخطوة الثانية هي تعريف هذه الكلمة بأي اسم نريده (المهم أن نبقى متذكرين له). سوف أقوم بإعطاء الاسم attrib1 <A NAME="attrib1">LINKS<‎/A>

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

الخطوة الثالثة هي إدراج اللينك لهذه الفقرة.
ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي هذا الملف الذي نعمل به) واسمه html-006.html لأنه سيشكل المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي:

<A HREF="html-006.html#attrib1">3rd Paragraph<‎/A>

‎3rd Paragraph

لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب الذي يتضمنها من خلال إشارة #

---

أما الحالة الأخيرة والتي نقوم فيها بإدراج لينك لعنوان بريد إلكتروني، يؤدي النقر عليها إلى إطلاق برنامج البريد الإلكتروني للزائر بشكل تلقائي. فالإختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة :MAILTO بعد خاصية HREF لكي تدل على أن العنوان الذي يلي هو عنوان EMAIL وليس أي عنوان آخر

<A HREF="MAILTO:mohamed@rushdy.net"> Email Me <‎/A>

Email Me

---

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

المقصود أنك قد تلاحظ في هذا الدرس بعض اللينكات فتحت في صفحة جديد والبعض الآخر فتح في نفس الصفحة

وهنا يكون دور خاصية أخري من خواص تاج
  <A> ... <‎/A>
TARGET وهي خاصية تسمي

_self إذا كنا نريد أن نفتح اللينك في نفس الصفحة فسنعطي هذه الخاصية القيمة
_blank وإذا كنا نريد أن نفتح اللينك في صفحة جديدة فسنعطي هذه الخاصية القيمة

وإن لم نحدد هذه الخاصيه فسيقوم المتصفح بجعل اللينك يفتح في نفس الصفحة تلقائياً

والتي تصبح الشيفرة معها بالشكل التالي في حالة نفس الصفحة:

<A HREF="http://www.qaradawi.net" TARGET="_self">موقع الدكتور يوسف القرضاوي<‎/A>

وتظهر الوصلة كما يلي:

موقع الدكتور يوسف القرضاوي

وفي حالة صفحة جديدة:

<A HREF="http://www.qaradawi.net" TARGET="_blank">موقع الدكتور يوسف القرضاوي<‎/A>

وتظهر الوصلة كما يلي:

موقع الدكتور يوسف القرضاوي

---

معلومة إضافية للإفادة :

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

ومن هذه البرامج علي سبيل المثال لا الحصر

Visual Studio
Dreamweaver

فستكون له عون كبير في تنفيذ وتطبيق كل ما نشرح HTML أنصح المهتم أن يبدأ بالبحث عن هذه البرامج وبدأ المحاولة في تعلمها بالتوازي مع تعلم

 

وفي ظل الظروف العصيبة اللتي نمر بها في مصر أوصيكم ونفسي بالدعاء لأهل مصر أن يقيهم الله من مكر كل ماكر
وأن يهيأ لمصر وأهل مصر أمر رشد يعز فيه أهل طاعته ويذل فيه أهل معصيته وأن يأمر فيه بالمعروف وينهي فيه عن المنكر ويؤمن فيه بالله
وأن من أراد مصر وأهل مصر بخير أن يوفقه إلي كل خير ومن أراد مصر وأهل مصر بسوء أن يجعل كيده في نحره وأن يجعل تدبيره تدميره
وأن ينصر الثورة وأن يألف بين قلوب الثوار وأن لا يجعل الفتنة في صفوفهم
وأن يبارك في نواب الشعب وأن يجعلهم علي الحق وعلي الصراط المستقيم وأن يكونوا سبباً في نصر الثورة وإسقاط فلول الفساد والإفساد
اللهم آمين
وجزاكم الله خيراً

 Tweet  

 

 

أخي الكريم أرجوك لا تتردد في التواصل معي إذا كان هناك أي أسئلة
سواء عن طريق البريد الإلكتروني
mohamed@rushdy.net

أو بزيارة صفحتي علي الفيس بوك .. ولا تنساني من الليك
rushdy.net on facebook

 

الأساسيات - الألوان - الخطوط - الفقرات والقوائم - الصور والرسومات - اللينكات - الجداول1 - الجداول2 - الإطارات1 - الإطارات2 - الإطارات3 - الإطارات4 - تاجات متنوعة - الخرائط الصورية - النماذج1 - النماذج2 - التاجات الخاصة - الويب واللغة العربية - الميتا تاج - المراجع