الموقع العربي الاول للعبة Silkroad Online - [HTML/CSS] تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس السادس ) .

http://im61.gulfup.com/GBda5Q.png
الدرس السادس فى لغة الـ HTML ...
http://im55.gulfup.com/QxQsXY.gif
أهلا وسهلا بكم اعضاء و زوار منتدى Silkroad4arab ,,
سوف نتحدث فى درس اليوم عن الوصلات التشعبية .. ( الروابط , اللينكات , Links ) ,,
http://im55.gulfup.com/QxQsXY.gif
مقدمة :-
دعنى اطرح عليك سؤالاً فى البداية !!
أولا كيف وصلت إلى هذا الشرح أو هذا الموضوع ؟
الإجابة بكل تأكيد ستكون ,,>
عن طريق الإنترنت ...
ولكن هذا ليس المقصود .. !
فالمقصود من السؤال هو كيف توصلت إلى هنا ..
بكل بساطة فالإجابة هى ,,
عن طريق الضغط على عدة روابط للانتقال الى هنا فعلى سبيل المثال ..
Google
»
Silkroad4arab
»
قسم شروحات لغات البرمجة و التطوير
»
تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس السادس ) .
*-.-**-.-**-.-**-.-**-.-**-.-*
هذا هو المقصود فى درس اليوم الروابط او الانتقالات عبر الانترنت وتسمى هذه الانتقالات بالوصلات التشعبية ..
http://im55.gulfup.com/QxQsXY.gif
هناك عدة خيارات للوصلات التشعبية , منها أن تكون الوصلة لموقع آخر أو أن تكون لصفحة أخرى داخل الموقع نفسه ومنها أن تكون لمكان آخر في نفس الصفحة ( إلى أعلى أو أسفل على سبيل المثال ) أو أن تكون وصلة لعنوان بريد إلكتروني E-mail وفي جميع الحالات فإن المبدأ واحد لكن تختلف بعض التفاصيل .
وسوف نناقش كل شئ على حدى فى هذا الدرس باذن الله تعالى .
http://im55.gulfup.com/QxQsXY.gif
دعونا نتعرف على الوسم المستخدم فى الوصلات التشعبية ,,
فهو الوسم <A>___</A> وهو اختصاراً لكلمة Anchor وهذا الوسم له بداية ونهاية كما سبق ذكره ..
ولكن هذا الوسم وحده لا يكفى لاضافة الروابط او الوصلات التشعبية فيجب ان نضيف له بعض الخصائص وسنتعرف عليها واحدة فالاخرى وسنبدا بالخاصية HREF ,,
الحالة الاولى ....
*-.-**-.-**-.-**-.-*
و التي نحدد من خلالها الموقع الذي نريد الذهاب اليه , ويجب أن يكتب عنوان الموقع كاملاً بهذا الشكل ..

كود بلغة HTML:

<A HREF="http://www.silkroad4arab.com/vb"></A>

ولكن ينقص هذا الكود شيئا واحداُ وهو العبارة التى سوف تظهر فوق هذا الرابط لكى يشير الى انه سوف ينقلك الى مكان ما تريده ..
دعونا نرى هذا المثال للتوضيح اكثر ,,

كود بلغة HTML:

<A HREF="http://www.silkroad4arab.com/vb">Silkroad4arab</A>

ليكون الشكل النهائى لصفحتنا هكذا ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum <A HREF="http://www.silkroad4arab.com/vb">Silkroad4arab</A> </BODY> </HTML>

النتيجة ,,
http://im53.gulfup.com/2ME1e5.png
http://im55.gulfup.com/QxQsXY.gif
هل هذا كل شئ ؟
بالطبع لا ,,
انظر الى هذا المثال ,,>>

كود بلغة HTML:

Go To <A HREF="http://www.silkroad4arab.com/vb">Silkroad4arab</A> :)

ليصبح الكود كاملا والكمال لله عز وجل ,,

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum Go To <A HREF="http://www.silkroad4arab.com/vb">Silkroad4arab</A> :) </BODY> </HTML>

النتيجة ,,
http://im85.gulfup.com/CWlhzD.png
http://im55.gulfup.com/QxQsXY.gif
كما يمكنك اضافة صورة كوصلة تشعبية كما سبق ذكره فى تعلم HTML دورة احتراف لغة الـ HTML من الالف الى الياء ( الدرس الخامس ) . ,,
ولكن لن اكتفى بالدرس السابق سأقوم ايضا بذكرها ثانية للتاكيد .
دعونا نرى مثالاً على ذلك ...
الصورة المستخدمة فى الشرح هى ,,
http://im88.gulfup.com/3lsApt.png

كود بلغة HTML:

<A HREF="http://www.silkroad4arab.com/vb"><IMG SRC="logo.png" BORDER="0"></A>

النتيجة ,,
http://im74.gulfup.com/z7RZ5X.png
فقط قمت بتغيير لون الصفحة لان الصورة تحتوى على كلمات باللون الابيض ولكن يمكنك استخدام اى صورة تريدها فقط انا اقوم باستخدام الصورة الخاصة بمنتدانا ^^ :whistling: ,,
اذا قمت بالضغط على الصورة سيتم تحويلك تلقائيا الى المنتدى بإذن الله ..
كما يمكنك التحكم فى حجم الصورة وللقيام بكل هذا يمكنك العودة الى الدرس الخامس ..
http://im55.gulfup.com/QxQsXY.gif
الحالة الثانية ....
*-.-**-.-**-.-**-.-*
وهي أن تشير الوصلة التشعبية إلى وصلة موجودة في نفس الموقع وهنا سنقوم بعمل صفحة جديدة تستند الى الصفحة التى نقوم بالتعديل عليها فى كل مرة والتى كنا قد اطلقنا عليها الاسم 1st.html كما ذكرنا فى الدرس الاول ..
ولنقوم بتسميتها 2nd.html ويكون محتواها باى شكل تريد وليكن مثل محتوى الصفحة الاولى , ولكن هذا للتوضيح فقط ليس الا .
وسيكون كود الانتقال بهذا الشكل ,,

كود بلغة HTML:

<A HREF="2nd.html">2nd Page</A>

لم نقم بكتابة العنوان بالكامل لان الصفحة بداخل الموقع الذى نحن فيه ..
فسيتم فتح الصفحة فى نفس النافذة التى نحن فيها وليست نافذة جديدة New Tab ..
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وهذه صور للتوضيح >>
هذه الصورة تمثل الحالة الأولى والتى تحتوى على وصلة تشعبية لموقع خارجى .
http://im80.gulfup.com/u1KCKr.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
اما هذه فهى تمثل الحالة الثانية والتى تحتوى على وصلة تشعبية لصفحة ما بداخل الموقع .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
http://im59.gulfup.com/EJb0ke.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
http://im59.gulfup.com/GsySHn.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
ويبقى تنبيه اخير بالنسبة اذا كان الملف الذى نريده بداخل موقعنا موجود بمجلد آخر داخل الموقع وليس المجلد الحالى فستحتاج للعودة الى الدرس السابق ..
وهى تماما كما قمنا الشرح على الصور ,,
http://im55.gulfup.com/QxQsXY.gif
الحالة الثالثة وتنطبق على الصفحات ذات المحتوى الكبير وتمكنك هذه الحالة من الانتقال إلى أعلى الصفحة أو آخرها
ولكن بشرط تحديد بداية ونهاية الصفحة ..
وهنا ياتى وقت استخدام الخاصية NAME والتى تقوم بتعريف مكان ما بداخل الصفحة باسم ما ,,
لا تستوعب !!
دعنا نرى مثالاً ,,>>

كود بلغة HTML:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> <A NAME="startguide">HTML</A> Guide By 3ashek El7ozn & Silkroad4arab Forum <A HREF="1st.html#startguide">Start Guide</A> <A HREF="1st.html#endguide">END Guide</A> <A HREF="2nd.html">2nd Page</A> <A NAME="endguide">HTML Guide</A> By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML>

النتيجة ,,
http://im45.gulfup.com/nhXJsl.png
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وهنا ساقوم بالايضاح بشكل اكثر
وهو اننا قمنا بتحديد كلمة ما من داخل نص الصفحة لدينا بانه بداية صفحتنا حيث انه مهما كانت كمية ذكاء الحاسوب فهو لن يستطيع اطلافا بان يقوم بمعرفة ما اذا هو بادية الصفحة او نهايتها وحده بدون تحديد !!
فقد قمنا باستخدام , الخاصية NAME مع الوسم <A> فى بداية النص وقمنا بتسمية البداية باسم ما وليكن كما بالشرح وهو startguide ليكون الكود بهذا الشكل فى الكلمة المراد تحديدها كبداية لصفحتنا ,,

كود بلغة HTML:

<A NAME="startguide">HTML</A> Guide By 3ashek El7ozn & Silkroad4arab Forum

وقمنا ايضا بتحديد نهاية النص بنفس الطريقة واطلقنا عليه اسم endguide بهذا الشكل ,,

كود بلغة HTML:

<A NAME="endguide">HTML Guide</A> By 3ashek El7ozn & Silkroad4arab Forum

لكى تصبح النتيجة كما سبق ان رأيت فى الصورة ,,
ويتبقى طريقة عمل الوصلة التشعبية للبداية والنهاية وتكون بهذه الطريقة عن طريق استخدام الرمز ( # ) كما يلى ,,

كود بلغة HTML:

<A HREF="1st.html#startguide">Start Guide</A>

كود بلغة HTML:

<A HREF="1st.html#endguide">END Guide</A>

http://im55.gulfup.com/QxQsXY.gif
ويتبقى خاصية اخرى تستخدم مع الوسم <A> وهى MAILTO ووظيفتها هى ادراج وصلة تشعبية لعنوان بريد الكترونى .
وتكون بهذا الشكل ,,>>

كود بلغة HTML:

<A HREF="MAILTO:[email protected]">Mail To 3ashek El7ozn</A>

عادة ما يتم المراسلة عبر الـ Outlook كرسائل .. وليست محادثة أونلاين .
فقد لاحظنا أننا استخدمنا كلمات مفتاحية ميزت طبيعة هذا العنوان , وأعطت المتصفح فكرة عن طبيعة التعامل مع هذا العنوان وطريقة الاتصال به .
فعندما كتبنا عنوان Email استخدمنا كلمة MAILTO قبل هذا العنوان , وبالتالي قمنا باعلام المتصفح بفتح برنامج البريد الإلكتروني الافتراضي وتجهيزه لإرسال رسالة إلى العنوان المدرج , بعكس التوصيل إلى عنوان خارجي سواء كان لموقع ويب خارجى او صفحة داخلية فكلمة HTTP والتي تدل على نوع البروتوكول المستخدم في الاتصال بهذا الموقع , وهو بروتوكول نقل النصوص المتشعبة Hyper Text Transfer Protocol .
http://im55.gulfup.com/QxQsXY.gif
والى هنا اكون قد انتهيت من درس الوصلات التشعبية,,
http://im55.gulfup.com/QxQsXY.gif
وفى النهاية
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان .
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
وعند النقل يرجى ذكر المصدر
دمتم بود
*-.-**-.-**-.-**-.-**-.-**-.-**-.-
http://im54.gulfup.com/Zz30Un.png