الحمل
» » » الدرس الرابع: الروابط

الروابط



السلام عليكم و رحمة الله تعالى و بركاته 
درس اليوم في دورة html حول الروابط و هذا الدرس يستدعي قليلا من التركيز في حال ما اذا كنت تود تصميم موقع احترافي

أولا : العنصر الذي نحتاجه
العنصر الذي نحتاجه في انشاء الروابط و احد 
و هو كالاتي :


<a href="http://http://bawabat-al3ilm.blogspot.com//">هنا تضع الكلمة المنسوبة الى الرابط</a>

سيظهر في المتصفح بهاذا الشكل

هنا تضع الكلمة المنسوبة الى الرابط

ما هو العنصر "a"
العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.

 حتى تنشئ روابط بين صفحاتك :
مثلا رابط بين : صفحتين من مشروعك "index.htm" و "page2" و اللذان قمت بحفظهما في نفس المجلد لأنه شرط أساسي في استعمال هذه الخاصية ...
لدينا ال "index.htm" هي الصفحة الرئيسية و التي نتواجد بها 
 



<a href="page2.htm">اضغط هنا للانتقال الى الصفحة 2</a>








لاحظ هذه العبارة و قارنها مع الاتية :

لدينا الصفحة في ملف اخر تحت اسم مثلا : my website












<a href="mywebsite/page2.htm">اضغط هنا لتنتقل الى الصفحة 2</a>











قاعدة أساسية :

عندما نريد أن نربط صفحة ب صفحة أخرى و لا يكونان بنفس الملف 

نقوم بوضع مسار الصفحة قبل الاسم الذي و ضعناه لها 

مثال 




<a href="اسم الملف/مسارالملف">اضغط هنا لتنتقل الى الصفحة 2</a>






ويمكن الربط بين اجزاء الصفحة و ذالك بالستعمال التعريفات 


مثلا : نضع 


<h1 id=headtop">أعلى الصفحة</h1>





ولان يمكننا انشاء رابط لهذا العنصر و ذالك باستعمال قيمة ال id 




<a href="#heading1">Link to heading 1</a>






هنا نحتاج الى التطبيق :


اذا كنت طبقت الدرس الثاني :


طبق عليه ما رأيناه و ان تعسر الامر فقم بنسخ الكود أسفله و قارنه مع نتيجتك و صححها


 











<html>

<head>
<title>موقعي الأول</title>
</head>

<body>

<p><a  href=" #heading1">link to heading1</a></p>
<p><a href=" #heading2">link to heading2</a></p>

<h1 id="heading1">heading1</h1>
<h1 id="heading2">heading2</h1>

</body>

</html>






للاشار فقط يمكنك و ضع مكان الرابط أو الصفحة أي موقع تريد 

مثال 

للتواصل بالرسائل نضع 




<a href="mailto:here e-mail">Send an e-mail </a>






و الى  هنا ينتهي الشرح ان واجهتك


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


عن مدونة بوابة العلم ... استفادة بلا حدود
































3:21 م













,











































0
التعليقات


Blogger 0
Facebook 




















إرسال تعليق


من حق الكل وضع تعليقات دون التعريف بأنفسهم لأني على يقين بأخلاقكم الحسنة 




































        

      







الاشتراك في:
تعليقات الرسالة (Atom)















 


































مدونة بوابة العلم  © 2014. جميع الحقوق محفوظة.  نقل بدون تصريح ممنوع اتصل بنا

Top