تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

شرح HTML links tags

شرح الوسوم الخاصة بالروابط html links tags والتي تُمكننا من عمل الروابط داخل الموقع سواء روابط خارجية لمواقع أخرى او روابط داخلية للتنقل بين نفس الموقع.

1

html a tag

<a href=""> </a>

a اختصار ل Anchor و المعنى الحرفي (مرساه السفينة).
يُستخدم هذا العنصر لعمل الروابط للتنقل بين الصفحات؛ سواء لصفحات داخل الموقع او روابط خارجية لمواقع اخرى.
وله attribute مهم جدا خاص به هو :

  • href: وتكون قيمته عبارة عن الرابط الذى سوف تذهب اليه؛ وعند الضغط على هذا اللينك ف انه يفتح في نفس الصفحة.

مثال على ذلك:

 
<a href="https://courses4arab.com/" >
  courses 4 arab
</a> 

1.1 ولكن إذا أردنا فتح اللينك في نافذه أخرى فإننا :

1- نضيف attribute يُسمى target وتكون قيمته"blank_" لكى يفتح اللينك فى صفحة اخرى.
2- نضيف attribute اخر يُسمى rel وتكون قيمته"noopener noreferrer" لتجنب مشكلة خاصة بالأمان (security) شرح المشكلة بالتفصيل

مثال على ذلك:

 
<a href="https://courses4arab.com/" target="_blank" rel="noopener noreferrer">
  courses 4 arab
</a> 
1.2

كيفية استخدام الصورة كرابط ؟

اولا يجب مراجعة درس الصور
وهى عن طريق وضع عنصر ال <img> داخل عنصر ال <a>

مثال على ذلك:

 
<a href="https://courses4arab.com/">
  <img src="logo.png" alt="courses 4 Arab" >
</a> 
1.3

كيفية انشاء لينك يسمح بإرسال ايميل ؟

وذلك عن طريق اضافة mailto: قبل الايميل داخل قيمة ال href

مثال على ذلك:

 
<a href="mailto:someone@example.com">
  ارسال ايميل
</a> 
1.4

كيفية انشاء لينك يسمح بالاتصال ؟

وذلك عن طريق اضافة tel: قبل رقم الهاتف داخل قيمة ال href

مثال على ذلك:

 
<a href="tel:+2010123456789">
  اتصال
</a> 
1.5

كيفية الانتقال لقسم اخر فى نفس الموقع ؟

وذلك عن طريق :

  1. اضافة attribute يُسمى id للقسم الذى سوف تذهب اليه .
  2. وضع قيمة ال id داخل ال href مسبوقة ب #

مثال على ذلك:

 
<a href="#eee">
  الذهاب للاسفل
</a>
 
<p id="eee">
  محتويات البراجراف
</p> 
2

html nav tag

<nav> </nav>

Nav هي اختصار ل navigation ومعناها التنقل.
نستخدم هذا العنصر إذا كان لدينا مجموعة من الروابط. فتكون هذه الروابط بداخل هذا العنصر.
مثال على ذلك:

 
<nav>
  <a href="https://courses4arab.com/">Home Page</a>
  <a href="https://courses4arab.com/learn-programming/before-learning-programming">Learn Html</a>
  <a href="https://courses4arab.com#future">Future Courses</a>
</nav> 
3

html link tag

<link >

هذا العنصر دائما يكون داخل ال head في اعلى الصفحة او داخل ال body
هذا العنصر ليس له نهاية وسم (closing tag) و يُمكن ان يُكتب <link /> او <link>
يُستخدم لربط ملف html بملف يحتوي على اكواد لغة CSS
وله اثنان attributes أساسيين في هذه الحالة:

  • href : وتكون قيمته عباره عن مسار واسم ملف لغة CSS
  • rel : وتكون قيمته عبارة عن stylesheet

مثال على ذلك:


 
<!DOCTYPE html>
<html lang="en">
 
<head>
  <title>link tag</title>
  <link rel="stylesheet" href="example.css">
</head>
 
<body> </body>
 
</html> 

المصادر

w3.org

  1. w3.org a tag
  2. w3.org nav tag
  3. w3.org link tag

w3schools.com

  1. w3schools.com a tag
  2. w3schools.com nav tag
  3. w3schools.com link tag
😡
انت مشغل الـ AdBlock !!

خلى بالك يامعلم ✋ انا هكر جامد جداً وعرفت انك مشغل ال AdBlock ف ياريت تقفله بدل ما اولع فى ام الجهاز بتاعك ده 😡 😡