يمكنك استخدام الروابط الموجهة (Anchor Links) للانتقال مباشرةً إلى جزء معين في صفحة الويب المحددة. تقوم بذلك باستخدام السمة id في العنصر الذي تريد الانتقال إليه، وتستخدم علامة الرقم # متبوعة بـ id في الرابط.
إليك مثالًا بسيطًا يوضح الطريقة:
### HTML
html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على الروابط الموجهة</title>
</head>
<body>
<!-- رابط للانتقال إلى الجزء المحدد -->
<a href="#section1">اذهب إلى القسم الأول</a>
<a href="#section2">اذهب إلى القسم الثاني</a>
<a href="#section3">اذهب إلى القسم الثالث</a>
<!-- محتويات الصفحة -->
<div style="height: 500px;"></div> <!-- هذا يمثل محتوىً كبيرًا للفصل بين الأقسام -->
<h2 id="section1">القسم الأول</h2>
<p>هذا هو نص القسم الأول.</p>
<div style="height: 500px;"></div>
<h2 id="section2">القسم الثاني</h2>
<p>هذا هو نص القسم الثاني.</p>
<div style="height: 500px;"></div>
<h2 id="section3">القسم الثالث</h2>
<p>هذا هو نص القسم الثالث.</p>
</body>
</html>
### الشرح:
1. الروابط الموجهة (Anchor Links):
- <a href="#section1">اذهب إلى القسم الأول</a>: هذا الرابط سينقل المستخدم إلى العنصر الذي يحمل id="section1".
- #section1 يشير إلى الـ id الخاص بالعنصر الذي سيقوم المتصفح بالتمرير إليه.
2. تحديد الأجزاء في الصفحة:
- <h2 id="section1">القسم الأول</h2>: هذا العنصر يحمل الـ id="section1"، مما يعني أن أي رابط يحتوي على #section1 سيؤدي إلى التمرير إلى هذا المكان في الصفحة.
### نقاط إضافية:
- تأكد من أن قيم id فريدة لكل عنصر في الصفحة حتى لا يحدث التباس.
- يمكنك استخدام هذه التقنية لكل أي عنصر في الصفحة، سواء كان عنوانًا، فقرة، صورة، إلخ.
إليك مثالًا بسيطًا يوضح الطريقة:
### HTML
html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على الروابط الموجهة</title>
</head>
<body>
<!-- رابط للانتقال إلى الجزء المحدد -->
<a href="#section1">اذهب إلى القسم الأول</a>
<a href="#section2">اذهب إلى القسم الثاني</a>
<a href="#section3">اذهب إلى القسم الثالث</a>
<!-- محتويات الصفحة -->
<div style="height: 500px;"></div> <!-- هذا يمثل محتوىً كبيرًا للفصل بين الأقسام -->
<h2 id="section1">القسم الأول</h2>
<p>هذا هو نص القسم الأول.</p>
<div style="height: 500px;"></div>
<h2 id="section2">القسم الثاني</h2>
<p>هذا هو نص القسم الثاني.</p>
<div style="height: 500px;"></div>
<h2 id="section3">القسم الثالث</h2>
<p>هذا هو نص القسم الثالث.</p>
</body>
</html>
### الشرح:
1. الروابط الموجهة (Anchor Links):
- <a href="#section1">اذهب إلى القسم الأول</a>: هذا الرابط سينقل المستخدم إلى العنصر الذي يحمل id="section1".
- #section1 يشير إلى الـ id الخاص بالعنصر الذي سيقوم المتصفح بالتمرير إليه.
2. تحديد الأجزاء في الصفحة:
- <h2 id="section1">القسم الأول</h2>: هذا العنصر يحمل الـ id="section1"، مما يعني أن أي رابط يحتوي على #section1 سيؤدي إلى التمرير إلى هذا المكان في الصفحة.
### نقاط إضافية:
- تأكد من أن قيم id فريدة لكل عنصر في الصفحة حتى لا يحدث التباس.
- يمكنك استخدام هذه التقنية لكل أي عنصر في الصفحة، سواء كان عنوانًا، فقرة، صورة، إلخ.
👍1