الفصل الخامس:الوصلات

الفصل الخامس:الوصلات

(الوصله الأولي | وصله للبريد | وصله لملف)

الوصله الأولي

السؤال الاّن هو كيف وصلت الي هذه الصفحه ؟ نعم انه رابط قممت بالضغط عليه فوصلت هنا ولكن الم تسأل نفسك كيف يتم عمل ذلك الرابط؟ سنتعلم ذلك معا..

سنستخدم الوسم<a>لبداية الوسم ولكن يجب غلقه هكذا</a>

وهذا الوسم اختصار لكلمة Anchor ولكن هذا الوسم لن يعمل وحيدا بل سيحتاج الي خصائص اخري اولها هي href وذلك لتحديد الموقع المراد فتحه وهي اختصار REFerence Hypertext

دعنا نتعرف علي الصيغه الاساسيه للوسم وهي<a href="first.html">Page</a>

افترض انك انشأت صفحه وسميتهاfirstوامتدادهاhtmlوهي موجود بنفس المكان الموجود به الصفحه التي سنعمل عليها أي سنضع بها الرابط.اما كلمةpageفهذه هي الكلمه التي ستظهر للضغط عليها فعندما نضغط علي pageسيقوم المتصفح بفتح الصفحهfirst

وصله للبريد

نري كثيرا في المواقع وصله عندما نضغط عليها تمكنا من ارسال رسالة بريد الكتروني الاّن سنتعرف علي ذلك وكيف يتم عملها..

أستخدمنا في الوصله العاديه التي ستفتح موقع الوسم<a href=""></a>

وصلة البريد الالكتروني لن تختلف عن ذلك فقط بعض الاضافات البسيطه.نفذ الكود التالي..

<a href=mailto:hamed803@yahoo.com>Send Email</a>

هل تستطيع تفسير الوسم السابق؟؟؟

لنري:mailtoتخبر المتصفح بأن ما سيتم ادراجه هو بريد الكتروني وهوhamed803@yahoo.comوسيظهر مكان البريد كلمةsend email عند الضغط عليها سنقوم بأرسال رساله الي البريد المذكور سابقا...

وصله لملف

الكثير منا يبحث عن البرامج او غيرها ويقوم بتحميلها فقط بالضغط علي كلمه او وصله لكن لماذا لم تفكر كيف يتم ذلك؟؟

لابد وان تعرف امتداد الملف حتي تقوم بعمل وصله لتحميله الان قم بأنشاء ملف مضغوط واعطه الاسمhtmlوالامتداد يكون للملفات المضغوطهrarاوzipافترضنا انه الامتداد الاول وقمت بوضع الملف المضغوط مع الصفحه التي تعمل عليها الان ثم قم بتنفيذ الكود التالي

<a href="html.rar">Download</a>

ستظهر لك كلمة downloadعند الضغط عليها سيقوم المتصفح بتحميل الملفhtml.rarوهكذا يتم عمل الوصلات..

مثال شامل علي الوصلات انشأ فولدر واعطه الاسم newثم انشأ صفحه ويب واعطها الأسمwebثم ضع معهم ملف صوتي واعطه الاسمsoundسيكون الامتدادللملف الصوتيmp3او أي امتداد اخر لن نختلف ولكن يجب ان تكون علي معرفه به ضع كل هذا داخل الفولدرnewثم انشأ فولدر اخر واعطه اسم file ثم ضع فولدر newبداخله ثم انشأ الصفحه التي سيكون بها الوصلات وستكون داخل فولدرfileونفذ الكود التالي

لاحظ اني بدأت استخدمnotepad++حيث انه يقوم بتميز الاوسمه بالون مختلف ...

في المثال قمت بأضافة وصله لفتح جوجل ووصله اخري لأرسال بريد الكتروني ولكن إذا اردت ان اقوم بفتح جوجل في صفحه جديده او تابه جديده غير الحاله ماذا افعل ؟؟؟

انظر الي هذا الكود وانت تعرف بنفسك

<a target="_blank" href="http://www.google.com.eg">google </a>

قمنا بأضافة الخاصيهtargetلنخبر المتصفح بالحدث_blankاي فتح في صفحه جديده قم يتغير _blankالي احد القيم التاليه

_self  وتعني نفس الاطار

_top  وتعني صفحه كامله

_parent    وتعني الاطار الأصل

قم بالتجربه بنفسك لكي تتعلم اكثر ولا تنسي....

الان اصبحت تعرف شيئا ليس بقليل في تصميم صفحات الويب ولكن مازال هناك الكثير واهمها ادراج الصور وهذا ما سنتعرف عليه في الفصل القادم إن شاء الله...