دوره تعلم html الدرس الخامس((5))
الروابط
في هذا الدرس نتعلم كيف نقوم بانشاء رابط بين صفحتين
العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما
مثال عليه
Here is a link to enjaztech.com
انظر الصور توضح المثال التالي
 | هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 756x538 . |
| هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 994x638 . |
الخاصية href تحوي القيمة "http://www.enjaztech.com"، وهي العنوان الكامل لموقع إنجاز.com ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to إنجاز.com" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق
ذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:
Click here to go to page 2
إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل
Click here to go to page 2
| هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1024x679 . |
لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا
A link to page 1
| هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1024x679 . |
بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط ل
heading 1
بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:
Link to heading 1
heading 1
Text text text text
heading 2
Text text text text
انظر الصور
| هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1024x679 . |
بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى
Send an e-mail to nobody at enjaztech.com
| هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1024x679 . |
لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط
HTML.net
| هذه الصورة تم تصغيرها . إضغط على هذا الشريط لرؤية الصورة بحجمها الطبيعي . أبعاد الصورة الأصلية 1024x679 . |
الي درس جديد في html
مع فتي دمياط الاول
http://bit.ly/bshwds
ليست هناك تعليقات:
إرسال تعليق