002-01141087755 info@CodesRoots.com
تصميم مواقع وتطبيقات الموبايل والجوال-


HTML - روابط نصية

اى صفحة على شبكة الإنترنت يمكن أن تحتوي على العديد من الروابط
التي تنقلك مباشرة إلى الصفحات الأخرى أوحتى أجزاء محددة من صفحة معينة.
ومن المعروف أن هذه الروابط معروفه بأسم الارتباطات التشعبية.

 

الأرتباطات التشعبية تسمح للزوار للتنقل بين مواقع الويب من خلال النقر على الكلمات والعبارات والصور.
وهكذا يمكنك إنشاء ارتباطات تشعبية باستخدام النص أو الصور المتوفرة على صفحة ويب.

 

ربط المستندات

يتم تحديد الارتباط باستخدام علامة <HTML <a

وتسمى هذه العلامة العلامة المرساة
وأي شيء بين فتح العلامة <a> وإغلاق العلامة </a> 
يصبح جزءا من الرابط ويمكن للمستخدم نقر ذلك الجزء للوصول إلى المستند المرتبط.
تبعه جملة بسيطة لاستخدام العلامة <a> :

<a href="Document URL" ... attributes-list>Link Text</a>

 

مثال

دعونا نحاول متابعه المثال التالي الذي يربط http://www.tutorialspoint.com في صفحتك:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>
</body>
</html>

هذا وسوف تنتج النتيجة التالية، حيث يمكنك النقر على الرابط الذي تم إنشاؤه Tutorials Point 
 للوصول إلى الصفحة الرئيسية من Tutorials Point.

 

 

السمة المستهدفة

وقد استخدمنا السمة المستهدفة في مثالنا السابق
. يتم استخدام هذه السمة لتحديد الموقع حيث يتم فتح المستند المرتبط.
فيما يلي الخيارات الممكنة:

الاختيار الوصف
 - فارغ   يتم فتح المستند المرتبط في إطار أو علامة تبويب جديدة .
- الذاتية  يتم فتح المستند المرتبط في الإطار نفسه.
- الأصل  يفتح المستند المرتبط في الإطار الأصلى.
- الأفضل  يفتح المستند المرتبط في كامل الجسم من النافذة.
 - الاطار المستهدف  يتم فتح المستند المرتبط في إطار هدف مسماة.

مثال :

جرب المثال التالي لفهم الفرق الأساسي في عدد قليل من الخيارات نظرا للسمة المستهدفة :

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

هذا سينتج النتيجة التالية ،
حيث يمكنك النقر على وصلات مختلفة لفهم الفرق بين الخيارات المختلفة نظرا للسمة المستهدفة.

 

استخدام المسار الأساسي

عند ربط مستندات HTML المتعلقة بنفس الموقع،
لا يطلب منه أن يعطي عنوان URL الكامل لكل رابط.
يمكنك التخلص من ذلك إذا كنت تستخدم علامة <base> في رأس المستند HTML الخاصة بك.
وتستخدم هذه العلامة لإعطاء مسار اساسى لجميع الروابط .
لذلك المتصفح الخاص بك سوف يتسلسل نظرا للمسار النسبي إلى هذا المسار الأساسى
وسيجعل URL الكامل.

مثال :

المثال التالى يجعل استخدام العلامة <base>  لتحديد عنوان URL الأساسي
وبعد ذلك يمكننا استخدام مسار نسبي لجميع الروابط
بدلا من إعطاء عنوان URL الكامل لكل رابط .

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

هذا وسوف تنتج التالية نتيجة، حيث يمكنك النقر على الرابط الذي تم إنشاؤه HTML Tutorial  للوصول إلى HTML Tutorial .

 

ربط قسم للصفحة

يمكنك إنشاء ارتباط إلى مقطع معين من صفحة ويب معينة باستخدام السمة الاسم.
هذه عملية من خطوتين:


أولا إنشاء ارتباط إلى المكان الذي تريد أن تصل إليه داخل صفحة الويب
وتسميته باستخدام العلامة <a...> , كالتالى :

<h1>HTML Text Links <a name="top"></a></h1>

ثانيا هي إنشاء ارتباط تشعبي إلى ربط المستند ثم المكان الذي تريد أن تصل إليه:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

 

إعداد رابط الألوان

يمكنك تعيين الألوان من الروابط الخاصة بك أو روابط نشطة او روابط تمت زيارتها
باستخدام سمات الرابط، الرابط نشط أو رابط تم الانتقال إليه من العلامة <body> .

مثال : 

احفظ يلي في test.htm وافتحه في أي متصفح ويب
لنرى كيف تعمل سمات الرابط، الرابط نشط والرابط الذى تم الانتقال إليه 

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>

هذا وسوف تنتج النتيجة التالية.
انظر فقط لون الارتباط قبل النقر على ذلك،
و تحقق من لونه عند تفعيلها، وعندما تم تمت زيارة الارتباط.

 

روابط التحميل

يمكنك إنشاء الروابط النصية لجعل PDF ، أو DOC أو  ZIP لملفات التحميل الخاصه بك .
هذا هو بسيط جدا، وتحتاج فقط لإعطاء URL الكامل لملف للتحميل على النحو التالي:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="http://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>

هذا وسوف ينتج الرابط التالي وسيتم استخدامها لتحميل الملف.

 

تحميل ملف مربع الحوار

في بعض الأحيان هو المطلوب أن كنت تريد أن تعطي خيار حيث سيقوم المستخدم بالنقر فوق ارتباط،
وسوف يطفو على السطح مربع "File Download" للمستخدم بدلا من عرض المحتوى الفعلي
. هذا أمر سهل جدا ويمكن تحقيق ذلك باستخدام رأس HTTP في استجابة HTTP الخاص بك.

على سبيل المثال، إذا كنت تريد جعل "FileName " ملفا للتحميل من رابط معين ثم سوف يكون بناء الجملة الخاص على النحو التالي :

#!/usr/bin/perl

# Addtional HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
   print("$buffer");


اعلانات
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا

002-01141087755

متاح واتس اب - فايبر - لاين
شركة تصميم مواقع وتطبيقات موبايل

info@CodesRoots.com