بحبك يا سمر 🧡

شرح 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 !!

يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢