الخميس، 27 مارس 2014

ارتياطات داخل صفخة HTML




الارتباطات داخل الصفحة :
كثير من صفحات الويب قد تكون صغير أو صفحات طويلة بحيث لا تستطيع استعرضها إلي باستخدام شريط التمرير وقد يبلغ طول الصفحة عدة شاشات متعاقبة فتصل إلي عشرة شاشات أو كثر.
يتم تقسيم الصفحة إلي موضوعات فرعية كل موضوع له عنوان .  بالتأكيد نجد في بداية الصفحة قائمة بالعناوين التي نتناولها الصفحة .  ويتم استخدام الارتباط داخل الصفحة كحل أمثل حيث يمكن لزائر الصفحة النقر فوق العنوان لينتقل إلي الموضوع الذي يريده مباشرة .
نقوم بعمل مثل هذه الصفحة الطويلة سوف تكون في مقدمة الصفحة ArchiveSystem ثم جعل كل بند من القائمة نقطة ارتباط بحيث إذا نقرت فوق البند ننتقل مباشرة إلي موقع البند في الصفحة .   سوف نجد شرحا للبند وفي أخر الشرح نقطة ارتباط إذا نقرت عليها نعود إلي بداية الصفحة Back To Top لكي نعمل ذلك نتبع الخطوات .
1-   إنشاء ملف باسم Archive .HTML باستخدام Notepad .
2-   كتابة الأوامر التالية لعمل عنوان للصفحة وعنوان للقائمة دون ارتباطات :
<HTML>
<HEAD>
<TITLE> Archive System </TITLE>
</HEAD>
<BODY>
        <H1> Archive System </H1>
    <UL>
<H3> Archive System نظام الأرشيف الآلي  </H3>
          <LI> Scan Documents
          <LI> Retriev  Documents
          <LI> Print Documents  <BR>
        <H3> Please select the desired topic from the list </H3>
     </UL>
</BODY>
</HTML>
3-   نحفظ هذا الملف ثم نعرضه باستخدام المستعرض .
4- سنقوم بإضافة الفقرة الخاصة بالبند الأول .  نتبع الخطوات التالية ،   بعد كتابة </UL> نكتب الآتي :
<BR> <BR>
<BR> <BR>
           <H3> Scan Documents المسح الضوء للمستندات  </H3>
يتم المسح الضوئي للمستندات من خلال برنامج الأرشيف الآلي وباستخدام الماسح الضوئي ، حيث يتم مسح المستند كصورة بصرف النظر عن الكتابة والصور التي يحتويها المستند
<BR> <BR>
<BR> <BR>
           <H3> Retrieve Documents البحث عن المستندات </H3>
تتم عملية استعادة المستندات باستخدام المعلومات السابق إدخالها أثناء إجراء عملية المسح الضوئي للمستندات ،
<BR> <BR>
<BR> <BR>
            <H3> Print  Documents طباعة المستندات  </H3>
<BR> <BR>
<BR> <BR>
أصبحت الصفحة جاهزة تماما ، ولكن تنقصها الارتباطات بين كل بند والفقرة التابعة للبند :
1-   إضافة ارتباط للبند Scan Documents بحيث إذا نقرت فوقه ينقلك المستعرض إلي موقع البند في نفس الصفحة .
2-   إضافة ارتباط في نهاية كل فقرة تنقلك إلي بداية الصفحة TOP .
3-   إضافة ارتباط ينقلك إلي الصفحة السابقة Products .
4-   إضافة ارتباط ينقلك إلي الصفحة الرئيسية Home Page .

إضافة ارتباطات البنود
ارتباط للبنود باستخدام الرمز # للدلالة علي اسم موقع داخل الصفحة ليكون الأمر :
<A href = #Scan> <LI> Scan Documents </A>
يجب تحديد موقع الفقرة المرتبطة بالبند الأول بإضافة الأمر <A name= Scan> قبل عنوان الفقرة لتصبح :
<A name = Scan> <H3> Scan Documents  <H3</A>
وتكون البنود هكذا :
<UL>
        <H3> Archive System has the folleing : </H3>
<A name = # Scan> <LI> Scan Documents </A>
<A name = # Retrieve> <LI> Retrieve Documents </A>
<A name = # Print> <LI> Print Documents </A>
        <H3> Please select the desired topic from the list </H3>
</UL>
قمنا بتعريف ارتباط البنود الآن سوف نربط البند بالفقرة ، وقمنا بتسمية الفقرات بالآتي :
# Scan  /  # Retrieve  /  #Print
سوف نضيف الارتباطات إلي الفقرات :
الفقرة الأولي:    <A name=Scan><H3>Scan Documents</H3></A>
الفقرة الثانية:<A name=Retrieve><H3>Retrieve Documents</H3></A>
الفقرة الثالثة:     <A name=Print><H3> Print Documents</H3></A>
وعندما ننقر فوق البند سننتقل إلي الفقرة بسبب هذا الارتباط .
ارتباط في نهاية الفقرة ينقلك إلي أول الصفحة
يجب إضافة رمز لبداية الصفحة لتكون هكذا :
<A name= Top> <H3> Archive System نظام الأرشيف الآلي  </H3></A>
في نهاية كل فقرة نقوم بإضافة الرمز التالي :
<A name=#Top> Bock To Top عودة إلي بداية الصفحة </A>

ارتباط في بداية الصفحة ينقلك إلي الصفحة السابقة Products
ننشئ ارتباطا في بداية الصفحة بعد القائمة مباشرة ينقلنا إلي الصفحة الفرعية Products ولكي نفعل نقوم بإضافة هذا الرمز بعد آخر جملة .
<A HREF=Products.HTML>BacK to Previous page عودة للصفحة السابقة</A>



ارتباط في بداية الصفحة ينقلك للصفحة الرئيسية index.HTML
نعود للصفحة الرئيسية Home Page نقوم بإضافة هذا الرمز بعد الجملة السابقة :
<A HRAF= ../index.HTML> Home Page عودة إلي الصفحة </A>

ليست هناك تعليقات:

إرسال تعليق