كيفية انشاء مواقع بلغة html خطوه بخطوة – للمبتدئين من الصفر الى الاحتراف – الدرس ( السادس )
السلام علكم ورحمة الله وبركاته وصل الله على سيدنا محمد واله وصحبه اجمعين , اما بعد اهلاً و سهلاً بكم في مدونة منوعات , في قسم تعليم الذي يحتوي على الكثير من شرحات التعليمية .
مرحباً بكم في دورة انشاء وتصميم مواقع بلغة html , والأن سوف نبدأ بدرس جديد من هذه من هذه الدورة الممتعة وهوه الدرس ( السادس ) نبدأ على بركة الله .
الدرس السادس : الروابط
في هذا الدرس سوف نتحدث عن كيف نقوم بأنشاء رابط بين صفحتين :
لانشاء رابط بين صفحتين سوف نستخدم ما نستخدمة عندة كتابة عنصر html , هو عنصر بسيط مع خاصية واحدة لكي نتمكن من انشاء رابط لكل شيء , وكيف يكون شكلة مثال لموقع html.net .
مثال :
<a href="http://www.html.net/">Here is a link
to HTML.net</a>>
سوف يظهر في المتصفح على النحو الاتي :
Here is a link to HTML.net
العنصر a هو اختصار كلمة anchor والخاصية href هي اختصار لكلمة hypertext reference , هذا العنصر و الخاصية هي المسؤلة عن تحديد الى اين سوف يذهب الرابط , غالباً ما يكون عنوان ويب او اسم ملف .
في المثال اعلاه الخاصية href تحتوي على القيمة http:// www.html.net " هو العنوان الكامل لموقع html ويسمى عنوان URL , ويجب اضافة بداية العنوان http:// اما الجملة html .net here is a link to هو الرابط الذي يظهر على المتصفح , لكي تستطيع نشر موقع في جميع مواقع تواصل الاجتماعي وغيرها . ثم قم بغلق الوسم .
اذا اردت انشاء رابط لصفتحتين في الوقت نفسة , فليس من الضروري وضع كامل عنوان الرابط للصفحة , فمثلاً اذا قمت بأنشاء صفحتين لتكون page1.htm و page2.htm وقمت بحفضهما في نفس الملف فيمكننا ان نربط من صحة الى اخرى بكتابة اسم الملف في الرابط , فمثلاً رابط من صفحة page1.htm يشير الى page2.htm سوف يظهر على النحو الاتي:
<a href="page2.htm">Click here to go to page2
</a>
لو وضعنا رابطًاُ معاكس من الصفحة الثانية في الملف الفرعي الى الصفحة الاولى سوف يكون على النحو الاتي :
<a href="../page1.htm">A link to page 1</a>
نأتي الى تفصيل الرابط اعلاه لنعرف ماهي هذه الاوسمة , (../) هذه العلامة تشير الى مجلد واحد في مستوى اعلى من الملف , الذي يحتوي الرابط بنفس النظام يمكن الاشارة الى مستويين او اكثر من المجلد فيكون (../../).
الروابط الداخلية في نفس الصفحة :
بامكاننا تن ننشأ روابط داخلية ضمن الصفحة , على سبيل المثال يمكننا انشاء جدول بلمحتويات في اعلى الصفحة , ويحتوي هذا الجدول على روابط تشير الى كل فصل من الصفحة , كل ما سوف نحتاجه هي خاصية تسمى id او identification و علامة # .
لوضع شارة للعنصر الذي تريده ووضع الرابط له عليك استخدام خاصية id كما في المثال الاتي :
<h1 id="heading1">heading 1</h1>
الان بامكانك ان تنشأ رابط لهذا العنصر بأستخدام علامة # في خاصية الرابط , علامة # يجب ان تتبع بقيمة id للعنصر الذي تريد له الرابط .
مثال :
<a href="#heading1">Link to heading 1</a>
كل هذا سوف يتضح في هذا المثال :
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link to heading
1</a></p>
<p><a href="#heading2">Link to heading
2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
سٌظهر بهذا الشكل فًي المتصفح )جرب أن تضغط على الرابطٌين:
Link to heading 1
Link to heading 2
Heading 1
Text text text text
Heading 2
Text text text text
ملاحضه: يجب ان تبدأ قيمة id بحرف وليس برقم .
بأمكاننا ايضاً ان نضع اي رابط مثلاً عناوين البريد الالكتروني وغيرها من الروابط , وعند وضعة , سوف تكون الطريقة مشابهه الى وضع الرابط بصفحة اخرى على النحو الاتي:
<a href="mailto:nobody@html.net">Send an e-mail
to nobody at HTML.net</a>
سوف يظهر بهذا الشكل :
Send an e-mail to nobody at HTML.net
الاختلاف الوحيد بين رابط عنوان لبريد الاكتروني و رابط الملف او المجلد هو كتابة كلمة mailto: متبوعاً بعنوان البريد الالكتروني . عندما نضغط على احد الروابط سوف يعمل برنامج البريد الاكتروني ويعرض رسالة فارغة تحوي عنوان البريد الاكتروني الذي وضعناه في الرابط , جرب الطريقة الان , واذا واجهت مشكلة عد الى الدرس .
لانشاء رابط عليك استخدام الخاصية href الى ذالك بأمكانك وضع خاصية فهفمث للرابط :
<a href="http://www.html.net/" title="Visit>
HTML.net and learn HTML">HTML.net</a>
سوف يظهر على النحو الاتي :
HTML.net
خاصية title تستخدم لوضع شرح للرابط , اذا وضعة الؤشر على الرابط دون ان تضغط عليه سوف ترى النص الذي كتبته في هذه الخاصة .
حاول ان تختبر نفسك .
شكراً لحسن المتابعةنلقاكم في درس جديد , وصل الله على محمد و اله وصحبه اجمعين , والسلام عليكم ورحمة الله وبركاته.
 السلام علكم ورحمة الله وبركاته…){kind=link}
تعليقات
إرسال تعليق