ما هي الروابط؟
الروابط هي جزء من موقع على شبكة الانترنت (تم إنشاؤه عادة باستخدام HTML، ولكن ليس دائما) والتي تشير إلى موارد أخرى، غيرها من وثائق HTML ، ملفات نصية ، ملفات PDF وغيرها وهناك روابط والتي ينبغي اتباعها تلقائيا من قبل المتصفح ، التي تم إنشاؤها باستخدام عناصر الارتباط
(لقد واجهت بالفعل بعض هذه المواد في وقت سابق، كانت تستخدم لاستيراد ملفات CSS في وثيقة HTML) ثم هناك الروابط التي يتم اختياري للمستخدم للتنشيط. وتسمى هذه المراسي، ويمكنك إضافتها إلى المستند باستخدام عنصر.
[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>A link to the YDN</h1>
<p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>
[/html]
سيتمكن الزوار من تفعيل هذا الرابط (إما عن طريق النقر عليها بالماوس، أو تفعيله مع لوحة المفاتيح أو صوت في بعض الحالات) مغادرة الموقع الحالي والانتقال إلى YDN. هناك المزيد من التغييرات يحدث لتربط نفسها، وسنرى في وقت لاحق عنهم عندما نتحدث عن التصميم الارتباط.
اللينك أو المرساه يكون له خصائص أو صفات متعدده :
HREF – المورد الذي يشير إليه (إما ملف خارجي أو هوية المرساة).
id – هو وصله لشئ معين في الصفحه وليس عباره عن لينك او شئ من هذا القبيل.
title – اللقب الاضافي من المعلومات حول الموارد الخارجية.
تابع معي هذا المثال سوف تتعلم كيفيه عمل روابط دخليه داخل الموقع نفسه وليست لينكات لمواقع علي الت ولكن في نفس الصفحه او لينك الي صفحه أخري داخل الموقع نفسه :
[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Different Link examples</h1>
<h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Section One</a></li>
<li><a href="#sec2">Section Two</a></li>
<li><a href="#sec3">Section Three</a></li>
<li><a href="#sec4">Section Four</a></li>
<li><a href="#sec5">Section Five</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Section #1</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec2">Section #2</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec3">Section #3</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec4">Section #4</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec5">Section #5</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
</div>
<h2>Some other link examples</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
</ul>
</body>
</html>
[/html]
ولعمل مزيد من المعلومات من الممكن عمل رابط تندرج تحته تفاصيل أو معلومات اكثر عن قائمه مثلا او شء من هذااقبيل انظر معي هذا المثال :
[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Adding extra information with a title attribute</h1>
<ul>
<li>Find more information on the <a title="The Yahoo Developer Network is the main hub for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI) and the Design Patterns repository" href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
</ul>
</body>
</html>
[/html]
أما لعمل رابط معين بين موقعك وبين عنوان أي موقع أخر علي شبكه الأنترنت يمكنك عمل رابط بالطريقه التاليه :
[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Linking non-HTML resources</h1>
<ul>
<li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>
[/html]
