في هذا الدرس ستتعلم كيف تقوم بإنشاء رابط بين صفحتين.
ما الذي أحتاجه لإنشاء رابط؟
لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة
وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:
مثال 1:
<a href="http://wsprofessional.blogspot.com/">محترفي الحماية</a>
|
سيظهر في المتصفح بهذا الشكل:
العنصر a
هو اختصار
"anchor" والخاصية href
هي اختصار
"hypertext reference"،
وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.
في المثال أعلاه الخاصية
href تحوي القيمة "http://wsprofessional.blogspot.com/"، وهي العنوان الكامل
لموقع
محترفي الحماية ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "محترفي الحماية" فهي النص الذي سيظهر في المتصفح على شكل
رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإغلاق </a>
ماذا عن الروابط بين الصفحات في موقعي؟
إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع
كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما من نحن و سياسة الخصوصية وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة
اسم الملف في الرابط، فمثلاً رابط صفحة
سياسة الخصوصية يشير إلى من نحن سيظهر بهذا الشكل:
مثال 2:
<a
href=" http://wsprofessional.blogspot.com/p/professional-information-security_10.html
">من نحن </a>
|
سيظهر على هذا الشكل
لكن عند الضغط على من نحن سيوجهك لرابط
الذي يوجد به سياسة الخصوصية
إذا كانت الصفحة من نحن وضعت في مجلد فرعي ولنسمه "سياسة الخصوصية" فالرابط سيظهر بهذا الشكل:
مثال 3:
<a
href=" http://wsprofessional.blogspot.com/p/blog-page_10.html ">سياسة الخصوصية </a>
|
سيظهر على هذا الشكل :
لكن عند الضغط على سياسة الخصوصية سيوجهك لرابط الذي يوجد به من نحن.
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا
وجدت هذا النظام معقداً.
ماذا عن الروابط الداخلية في نفس الصفحة؟
بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول
بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي
خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له،
مثال:
<h1
id="heading1">heading 1</h1>
|
بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في
خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id
للعنصر الذي تريد الربط له، مثال:
<a
href="#heading1">Link to heading 1</a>
|
كل هذا سيتضح مع هذا المثال:
مثال 4 :
<html>
<head>
</head>
<body>
<p><a
href="#heading1">Link to heading 1</a></p>
<h1
id="heading1">heading 1</h1>
<p>Text
text text text</p>
<p><a
href="#heading2">Link to heading 2</a></p>
<h1
id="heading2">heading 2</h1>
<p>Text
text text text</p>
</body>
</html>
|
سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين):
Heading 1
Text text text text
Heading 2
Text text
text text
ملاحظة:
قيمة الخاصية
id يجب أن تبدأ بحرف
وليس برقم.
مثال اخر بعد التعديل عليه :
مثال اخر بعد التعديل عليه :
<html>
<head>
</head>
<body>
<p><a
href="#heading1">لينكس</a></p>
<h1
id="heading1">لينكس</h1>
<p>قسم خاص بأنظمة لينكس</p>
<p><a
href="#heading2">ويندوز</a></p>
<h1
id="heading2">ويندوز</h1>
<p>قسم خاص بأنظمة الويندوز</p>
</body>
</html>
|
لينكس
قسم خاص بنظام لينكس
ويندوز
قسم خاص بنظام الويندوز
في الدرس المقبل انشاء الله سنتعرف على المزيد من الروابط التشعبية
وكيفية وضع اقسام وربطها بروابط متسلسلة.
0 التعليقات :
إرسال تعليق