دورة تعلم لغة HTML
بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الخلق والمرسلين
اما بعد.
تعلم لغةHTML
هذة الدورة مكونة من أكثر من درس
الدرس الثامن
الدرس التاسع
أضغط على رقم الدرس للأنتقال الية
تعليم لغةHTML
الدرس الثامن
ما الذي أحتاجه لإنشاء رابط؟
لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:
مثال 1:
كود بلغة HTML:
<a href="http://m3lomadelivery.blogspot.com//">Here is a link to معلومة دليفرى</a>
سيظهر في المتصفح بهذا الشكل:
Here is a link to معلومة دليفرى
مثال 1:
كود بلغة HTML:
<a href="http://m3lomadelivery.blogspot.com//">Here is a link to معلومة دليفرى</a>
سيظهر في المتصفح بهذا الشكل:
Here is a link to معلومة دليفرى
العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.
في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.
في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.
ماذا عن الروابط بين الصفحات في موقعي؟
إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:
مثال 2:
كود بلغة HTML:
<a href="page2.htm">Click here to go to page 2</a>
إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:
مثال 3:
كود بلغة HTML:
<a href="subfolder/page2.htm">Click here to go to page 2</a>
لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:
مثال 4:
كود بلغة HTML:
<a href="../page1.htm">A link to page 1</a>
"../../".
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.
مثال 2:
كود بلغة HTML:
<a href="page2.htm">Click here to go to page 2</a>
إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:
مثال 3:
كود بلغة HTML:
<a href="subfolder/page2.htm">Click here to go to page 2</a>
لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:
مثال 4:
كود بلغة HTML:
<a href="../page1.htm">A link to page 1</a>
"../../".
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.
ماذا عن الروابط الداخلية في نفس الصفحة؟
بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:
كود بلغة HTML:
<h1 id="heading1">heading 1</h1>
بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:
كود بلغة HTML:
<a href="#heading1">Link to heading 1</a>
كل هذا سيتضح مع هذا المثال:
مثال 5:
كود بلغة HTML:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين
بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:
كود بلغة HTML:
<h1 id="heading1">heading 1</h1>
بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:
كود بلغة HTML:
<a href="#heading1">Link to heading 1</a>
كل هذا سيتضح مع هذا المثال:
مثال 5:
كود بلغة HTML:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين
):
Link to heading 1
Link to heading 2
Heading 1
Text text text text
Heading 2
Text text text text
ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.
Link to heading 1
Link to heading 2
Heading 1
Text text text text
Heading 2
Text text text text
ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.
هل يمكن أن أضع رابطاً لأي شيء آخر؟
بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:
مثال 6:
كود بلغة HTML:
<a href="mailto:info@m3lomadelivery">Send an e-mail to info at m3lomadelivery</a>
سيظهر بهذا الشكل في متصفحك
مثال 6:
كود بلغة HTML:
<a href="mailto:info@m3lomadelivery">Send an e-mail to info at m3lomadelivery</a>
سيظهر بهذا الشكل في متصفحك
Send an e-mail to info at m3lomadelivery
الاختلافالوحيد بين الرابط لبريد إلكتروني ورابط لملف هو كتابة mailto: متبوعاًبعنوان البريد، عندما يضغط أحدهم على الرابط سيعمل برنامج البريدالإلكتروني ويعرض رسالة جديدة فارغة تحوي عنوان البريد الإلكتروني الذي وضعته في الرابط، سيحدث هذا في حال وجد برنامج بريد إلكتروني مثبت على الحاسوب، جرب ذلك الآن!
هل هناك خصائص أخرى يجب علي أن أعرفها؟
لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:
مثال 7:
<a href="http://m3lomadelivery.blogspot.com//" title="Visit m3lomadelivery and learn more">m3lomadelivery</a>
سيظهر بهذا الشكل في المتصفح:
m3lomadelivery
خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.
مثال 7:
<a href="http://m3lomadelivery.blogspot.com//" title="Visit m3lomadelivery and learn more">m3lomadelivery</a>
سيظهر بهذا الشكل في المتصفح:
m3lomadelivery
خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.
.................................................................
0 التعليقات:
إرسال تعليق