X

أساسيات اتش.تي.إم.إل

١٩. مراجعة أساسيات اتش.تي.إم.إل

مراجعة

أساسيات اتش.تي.إل.إل HTML Basics

  • دور اتش.تي.إم.إل HTML : يمثل اتش.تي.إم.إل HTML المحتوى وبنية صفحة الويب.
  • عناصر اتش.تي.إم.إل HTML : العناصر Elements هي اللبنات الأساسية لمستند اتش.تي.إم.إل HTML . فهي تمثل العناوين headings والفقرات paragraphs والروابط links والصور images وغيرها. تتكون معظم عناصر اتش.تي.إم.إل HTML من وسم افتتاحي (<elementName>) ووسم إغلاق (<elementName/>).

هنا هو بناء الجملة الأساسي:

<elementName> المحتوى يذهب هنا </elementName>
  • العناصر الفارغة Void Elements: لا يمكن للعناصر الفارغة أن تحتوي على أي محتوى، بل تحتوي فقط على وسم بداية. من الأمثلة على ذلك عناصر img و meta.
<img>

<meta>

من الشائع رؤية بعض قواعد البيانات التي تتضمن شرطة مائلة للأمام (/) داخل عنصر الفراغ void element. كلا الشرطين مقبولان:

<img>

<img/>
  • السمات Attributes: السمة هي قيمة تُوضع داخل وسم فتح عنصر اتش.تي.إم.إل HTML . تُوفر السمات معلومات إضافية حول العنصر أو تُحدد كيفية عمله. إليك الصيغة الأساسية للسمة:
<element attribute = "value" ></element>

السمة المنطقية A boolean attribute هي سمة قد تكون موجودة أو غير موجودة في وسم اتش.تي.إم.إل HTML tag . إذا كانت موجودة، تكون قيمتها صحيحة true، وإلا تكون خاطئة false. من أمثلة السمات المنطقية: مُعطّل disabled، وقراءة فقط readonly، ومطلوب required.

  • التعليقات Comments: تُستخدم التعليقات في البرمجة لترك ملاحظات لك وللمطورين الآخرين في الكود code. إليك صيغة التعليق في اتش.تي.إم.إل HTML :
<!-- HTML comment هذا تعليق اتش.تي.إم.إل -->

عناصر اتش.تي.إم.إل HTML الشائعة

  • عناصر العناوين Heading Elements: يوجد ستة عناصر عناوين في اتش.تي.إم.إل HTML . تُستخدم عناصر العناوين من h1 إلى h6 للدلالة على أهمية المحتوى أسفلها. كلما قلّ العدد، زادت الأهمية، لذا فإن عناصر h2 أقل أهمية من عناصر h1.
<h1> العنصر الأكثر أهمية في العنوان </h1>
<h2> العنصر الثاني الأكثر أهمية </h2>
<h3> ثالث أهم عنصر عنوان </h3>
<h4> رابع أهم عنصر عنوان </h4>
<h5> خامس أهم عنصر عنوان </h5>
<h6> أقل عنصر عنوان أهمية </h6>
  • عناصر الفقرة Paragraph Elements: تُستخدم للفقرات في صفحات الويب.
<p> هذا هو عنصر الفقرة. </p>
  • عناصر img : يُستخدم عنصر img لإضافة الصور إلى صفحة الويب. وتُستخدم السمة src لتحديد موقع الصورة. بالنسبة لعناصر الصور، يُنصح بإضافة سمة alt. إليك مثال لعنصر img مع السمتين src و alt:


<img src="https://openarabtech.github.io/HTMLverse/assets/HTMLverseLogo.png" alt="شعار عالم اتش.تي.إم.إل">
  • عنصر body: يُستخدم هذا العنصر لتمثيل محتوى مستند اتش.تي.إم.إل HTML .
			
<body>
  <h1>تطبيق صور القطط</h1>
  <p>هذا عنصر فقرة.</p>
</body>
  • عناصر section: يُستخدم هذا العنصر لتقسيم المحتوى إلى أقسام أصغر.
			
<section>
  <h2>نبذة عني</h2>
  <p>مرحبًا، أنا شهاب، مطورة ويب.</p>
</section>
  • عناصر div: هذا العنصر هو عنصر اتش.تي.إم.إل عام a generic HTML لا يحمل أي معنى دلالي. يُستخدم كحاوية عامة a generic container لعناصر اتش.تي.إم.إل HTML أخرى.
			
<div>
  <h1>أنا عنوان</h1>
  <p>أنا فقرة</p>
</div>
  • عناصر المرساة (a): تُستخدم هذه العناصر لإضافة روابط إلى صفحة الويب. تُستخدم سمة href لتحديد مكان الرابط the link عند نقر المستخدم عليه.


<a href="https://openarabtech.github.io/HTMLverse/assets/HTMLverseLogo.png">شعار عالم اتش.تي.إم.إل</a>
  • عناصر القائمة غير المرتبة (ul) والمرتبة (ol): لإنشاء قائمة نقطية a bulleted list ، استخدم عنصر ul مع عنصر li واحد أو أكثر مُدمج داخله كما يلي:
			
<ul>
  <li>علاج البراغيث</li>
  <li>الرعد</li>
  <li>قطط أخرى</li>
</ul>

لإنشاء قائمة مرتبة an ordered list من العناصر يجب عليك استخدام العنصر ol:

			
<ol>
  <li>علاج البراغيث</li>
  <li>الرعد</li>
  <li>قطط أخرى</li>
</ol>
  • عنصر التوكيد (em): يستخدم للتركيز على جزء من النص.
			
<p>اللازانيا<em>تحب</em>القطط</p>
  • عنصر الأهمية القوية (strong): يُستخدم هذا العنصر لتسليط الضوء على النص، للإشارة إلى الشعور بالإلحاح والجدية.

<p>
  <strong>مهم:</strong>قبل المتابعة، تأكد من ارتداء نظارات السلامة الخاصة بك. 
</p>
  • عناصر figure و figcaption : يُستخدم عنصر figure لتجميع محتوى مثل الصور والرسوم البيانية. يُستخدم عنصر figcaption لتمثيل عنوان لهذا المحتوى داخل عنصر الشكل.

<figure>
	<img src="https://openarabtech.github.io/HTMLverse/basic/assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة">
	<figcaption>القطط الأخرى. <strong>تكره</strong> القطط</figcaption>
</figure>
  • العنصر الرئيسي main: يستخدم هذا العنصر لتمثيل المحتوى الرئيسي لصفحة الويب.
  • عنصر التذييل footer: يقع هذا العنصر أسفل مستند اتش.تي.إم.إل HTML ، ويحتوي عادةً على معلومات حقوق النشر copyright وروابط صفحات مهمة أخرى.

<footer>
	<p>
	لا حقوق التأليف والنشر<a href="https://openarabtech.github.io/HTMLverse/"> عالم اتش.تي.إم.إل</a>
	</p>  
</footer>

المعرفات والتجميع

  • المُعرِّفات IDs: المُعرِّفات عناصر فريدة لعناصر اتش.تي.إم.إل HTML elements . يجب استخدام أسماء المعرفات مرة واحدة فقط لكل مستند اتش.تي.إم.إل HTML document .

<h1 id="title">صفحة مراجعة الفيلم</h1>

لا يمكن أن تحتوي أسماء المعرفات ID names على مسافات. إذا كان اسم المعرف ID name يحتوي على عدة كلمات، يمكنك استخدام الشرطات dashes بينها كما يلي:


<div id="red-box"></div>
  • الفئات Classes: تُستخدم الفئات لتجميع group العناصر لأغراض التصميم styling والسلوك behavior .

<div class="box"></div>

بخلاف المعرفات IDs، يمكنك إعادة استخدام اسم الفئة نفسه same class name في مستند اتش.تي.إم.إل HTML document . يمكن أن تحتوي قيمة value الفئة class أيضًا على مسافات كما يلي:


<div class="box red-box"></div>

<div class="box blue-box"></div>

الأحرف الخاصة Special Characters والربط Linking

  • كيانات اتش.تي.إم.إل HTML entities : كيان اتش.تي.إم.إل An HTML entity ، أو مرجع الأحرف character reference، هو مجموعة من الأحرف تُستخدم لتمثيل حرف محجوز a reserved character في اتش.تي.إم.إل HTML. من الأمثلة على ذلك رمز العطف the ampersand symbol (&amp;) ورمز أصغر من the less than symbol (&lt;).

<p> &amp;img /&gt; هذا عنصر </p>
  • عنصر الرابط link: يُستخدم هذا العنصر للربط بموارد خارجية external resources مثل أوراق الأنماط stylesheets وأيقونات المواقع site icons .

    • فيما يلي البنية الأساسية لاستخدام عنصر الرابط link لملف CSS خارجي:


<link rel="stylesheet" href="./styles.css" />

تُستخدم سمة rel لتحديد العلاقة بين المورد المرتبط linked resource ومستند اتش.تي.إم.إل HTML document . وتُستخدم سمة href لتحديد موقع رابط URL للمورد الخارجي external resource.

  • عنصر النص البرمجي script: يُستخدم هذا العنصر لتضمين to embed الكود القابل للتنفيذ executable code .

<body>
	<script>
		alert(مرحبا في عالم اتش.تي.إم.إل);
	</script>
</body>

على الرغم من إمكانية كتابة جميع أكواد "جافا سكريبت" JavaScript code داخل وسوم النصوص البرمجية script tags، إلا أنه من الأفضل ربطها بملف "جافا سكريبت" خارجي external JavaScript file.

فيما يلي مثال على استخدام عنصر النص البرمجي script للربط بملف "جافا سكريبت" خارجي:


<script src="path-to-javascript-file.js"></script>

تُستخدم سمة src هنا لتحديد موقع ملف "جافا سكريبت" الخارجي.

القالب Boilerplate والترميز Encoding

  • قالب اتش.تي.إم.إل HTML boilerplate: هذا قالب يتضمن البنية الأساسية basic structure والعناصر الأساسية essential elements التي يحتاجها كل مستند اتش.تي.إم.إل HTML document .

<!DOCTYPE html>
<html lang="ar" dir="rtl">
	<head>
		<meta charset="utf-8" />
		<title>عالم اتش.تي.إم.إل</title>
		<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
		<!-- العناوين والفقرات والصور وما إلى ذلك تدخل هنا -->
	</body>
</html>
  • DOCTYPE: يُستخدم هذا لإخبار المتصفحات browsers بإصدار اتش.تي.إم.إل HTML version الذي تستخدمه.
  • عنصر html: يُمثل هذا العنصر العنصر الأعلى مستوى أو جذر root مستند اتش.تي.إم.إل HTML document . لتحديد لغة المستند، استخدم سمة lang. وان كنت تبني مشروعا بالعربيه أضف سمة dir وضع القيمة rtl، يعني من اليمين إلى اليسار Right To Left .
  • عنصر head: يحتوي قسم head على بيانات تعريفية meta data مهمة، وهي معلومات أساسية ضرورية للمتصفحات ومحركات البحث search engines .
  • عناصر meta: تُمثل هذه العناصر البيانات الوصفية metadata لموقعك. تتضمن هذه العناصر تفاصيل حول أمور مثل ترميز الأحرف character encoding، وكيفية معاينة روابط صفحتك على مواقع مثل تويتر، وغيرها.
  • عنصر title: يُستخدم هذا العنصر لضبط النص الذي يظهر في علامة تبويب browser tab أو نافذة المتصفح browser window .
  • ترميز الأحرف UTF-8: أو UCS 8 تنسيق تحويل Transform Format، هو ترميز أحرف موحد يُستخدم على نطاق واسع على الإنترنت. ترميز الأحرف Character encoding هو الطريقة التي تستخدمها أجهزة الكمبيوتر لتخزين store الأحرف كبيانات data . تُستخدم سمة charset داخل عنصر meta لتعيين ترميز الأحرف إلى UTF-8.

تحسين محركات البحث SEO والمشاركة الاجتماعية Social Sharing

  • تحسين محركات البحث SEO: هو عملية تهدف إلى تحسين صفحات الويب لزيادة ظهورها more visible وتحسين ترتيبها rank higher في محركات البحث search engines .
  • عنصر التعريف Meta (description): يستخدم لتقديم وصف قصير short description لصفحة الويب والتأثير impacting على تحسين محركات البحث SEO .

<meta
	name="description"
	content="اكتشف نصائح الخبراء وتقنياتهم في البستنة في المساحات الصغيرة، واختيار النباتات المناسبة، والحفاظ على حديقة مزدهرة."
/>
  • وسوم Open Graph: يُمكّنك بروتوكول open graph من التحكم في كيفية ظهور محتوى موقعك الإلكتروني عبر منصات التواصل الاجتماعي social media المختلفة، مثل فيسبوك Facebook ولينكدإن LinkedIn وغيرها الكثير.

من خلال ضبط خصائص open graph هذه، يمكنك جذب المستخدمين للنقر والتفاعل مع محتواك. يمكنك ضبط هذه الخصائص من خلال مجموعة من عناصر التعريف meta داخل قسم اتش.تي.إم.إل الرئيسي HTML head section .

  • الخاصية og:title: تُستخدم لتعيين عنوان المنشورات media posts التي تعرض that displays على مواقع التواصل الاجتماعي.

<meta content="HTMLverse.org" property="og:title" />
  • خاصية og:type: تُستخدم خاصية type لتمثيل نوع المحتوى the type of content المُشارك على منصات التواصل الاجتماعي. من أمثلة هذا المحتوى المقالات articles، ومواقع الويب websites، ومقاطع الفيديو videos، والموسيقى music .

<meta property="og:type" content="website" />
  • الخاصية og:image: تُستخدم لتعيين الصورة المعروضة في منشورات مواقع التواصل الاجتماعي.

<meta 
	content="https://openarabtech.github.io/HTMLverse/assets/HTMLverseCover.png" 
	property="og:image"
/>
  • الخاصية og:url: تُستخدم لتحديد عنوان URL الذي سينقر عليه المستخدمون لمنشورات مواقع التواصل الاجتماعي.

<meta property="og:url" content="https://openarabtech.github.io/HTMLverse/" />

عناصر الوسائط Media Elements وتحسينها Optimization

  • العناصر المُستبدلة Replaced elements: العنصر المُستبدل A replaced element هو عنصر يُحدَّد محتواه بواسطة مورد خارجي external resource وليس بواسطة CSS نفسه. مثال على ذلك عنصر iframe . "اي.فرام" iframe اختصار لـ inline frame "إطار مضمّن". وهو عنصر مضمّن يُستخدم لتضمين محتوى اتش.تي.إم.إل HTML content آخر مباشرةً داخل صفحة اتش.تي.إم.إل HTML page.

<iframe src="https://www.example.com" title="موقع المثال"></iframe>

يمكنك تضمين سمة allowfullscreen التي تسمح للمستخدم بعرض display الإطار المضمن the iframe في وضع ملء الشاشة full screen mode .


<iframe
	src="video-url"
	width="width-value"
	height="height-value"
	allowfullscreen
></iframe>

لتضمين فيديو داخل إطار مضمّن iframe، يمكنك نسخه مباشرةً من خدمات الفيديو الشهيرة مثل "يوتيوب" Youtube و"فيميو" Vimeo، أو تعريفه بنفسك باستخدام سمة src التي تشير إلى عنوان URL الخاص بالفيديو. إليك مثال على تضمين دورة تدريبية شهيرة من freeCodeCamp من "يوتيوب" YouTube:


<h1>iframe فيديو "يوتيوب" من "فري.كود.كامب" مُضمّن بعنصر </h1>

<iframe
	width="560"
	height="315"
	src="https://www.youtube.com/embed/PkZNo7MFNFg?si=-UBVIUNM3csdeiWF"
	title="مشغل فيديو يوتيوب"
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
	referrerpolicy="strict-origin-when-cross-origin"
	allowfullscreen
></iframe>

هناك عناصر بديلة replaced elements أخرى، مثل video وembed. وتتصرف بعض العناصر كعناصر بديلة replaced elements في ظروف محددة under specific circumstances . إليك مثال لعنصر إدخال input مع ضبط سمة type على image:


<input type="image" alt="يظهر النص الوصفي هنا" src="مثال-على-رابط-صورة">
  • تحسين الوسائط Optimizing media: هناك ثلاث أدوات يجب مراعاتها عند استخدام الوسائط media، مثل الصور images، على صفحات الويب: الحجم size، والتنسيق format، والضغط compression. تُستخدم خوارزمية ضغط A compression algorithm لتقليل حجم الملفات أو البيانات.
  • تنسيقات الصور Image formats: يُعدّ PNG وJPG من أكثر تنسيقات الملفات شيوعًا، لكنهما لم يعودا التنسيقين الأمثل لعرض الصور. ما لم تكن بحاجة إلى دعم المتصفحات القديمة، يُنصح باستخدام تنسيق أكثر تحسينًا، مثل WEBP أو AVIF.
  • تراخيص الصور Image licenses: الصور التي تقع ضمن نطاق الملكية العامة the public domain لا تخضع لحقوق الطبع والنشر no copyright، وهي مجانية الاستخدام دون أي قيود. تُعتبر الصور المرخصة خصيصًا بموجب رخصة المشاع الإبداعي 0 the Creative Commons 0 license ملكًا عامًا. قد تُنشر بعض الصور بموجب ترخيص مُتساهل a permissive license، مثل رخصة المشاع الإبداعي Creative Commons license، أو رخصة the BSD license التي يستخدمها موقع freeCodeCamp.
  • رسومات SVG: رسومات متجهية قابلة للتطوير Scalable Vector Graphics، تتتبع البيانات بناءً على مسارات paths ومعادلات equations لرسم النقاط points والخطوط lines والمنحنيات curves . هذا يعني أنه يمكن تغيير حجم الرسومات المتجهة، مثل رسومات SVG ، إلى أي حجم دون التأثير without impacting على الجودة the quality.

تكامل الوسائط المتعددة Multimedia Integration

  • عناصر audio و video: تتيح لك عناصر audio و video إضافة محتوى صوتي وفيديو إلى مستندات اتش.تي.إم.إل HTML documents . يدعم عنصر audio تنسيقات الصوت الشائعة popular audio formats مثل mp3 و wav و ogg ، بينما يدعم عنصر video تنسيقات mp4 و ogg و webm .

<audio src="CrystalizeThatInnerChild.mp3"></audio>

إذا كنت ترغب في رؤية مشغل الصوت the audio player في الصفحة، يمكنك إضافة عنصر audio باستخدام سمة controls:


<audio src="CrystalizeThatInnerChild.mp3" controls></audio>

تُمكّن سمة controls المستخدمين من إدارة تشغيل الصوت، بما في ذلك ضبط مستوى الصوت، وإيقاف التشغيل مؤقتًا أو استئنافه. سمة controls هي سمة منطقية a boolean attribute يُمكن إضافتها إلى أي عنصر لتمكين عناصر التحكم المدمجة في التشغيل. في حال حذفها، لن تظهر أي عناصر تحكم.

  • خاصية loop: خاصية loop هي خاصية منطقية تُعيد تشغيل الصوت باستمرار.

<audio 
	src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3" 
	loop
	controls
></audio>
  • السمة muted: عند وجودها في عنصر audio، ستبدأ السمة المنطقية muted تشغيل الصوت في حالة كتم in a muted state .

<audio 
	src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3" 
	loop
	controls
	muted
></audio>
  • عنصر source: فيما يتعلق بأنواع ملفات الصوت audio file types، تختلف المتصفحات في دعمها للأنواع المختلفة. لتحقيق ذلك، يمكنك استخدام عناصر source داخل عنصر audio، وسيختار المتصفح أول مصدر يفهمه.

    • فيما يلي مثال لاستخدام عناصر source متعددة لعنصر audio:


<audio controls>
	<source src="audio.ogg" type="audio/ogg" />
	<source src="audio.wav" type="audio/wav" />
	<source src="audio.mp3" type="audio/mpeg" />
</audio>

جميع السمات التي تعلمناها حتى الآن مدعومة أيضًا في عنصر video.

فيما يلي مثال لاستخدام عنصر video مع سمات loop و controls و muted:


<video 
	src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" 
	loop
	controls
	muted
></video>
  • سمة poster: لعرض صورة أثناء تنزيل الفيديو، يمكنك استخدام سمة poster. هذه السمة غير متاحة لعناصر audio، وهي خاصة بعنصر video.

<video 
	src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" 
	loop
	controls
	muted
	poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" 
	width="620" 
></video>

أنواع السمات المستهدفة Target attribute types

  • السمة target: تُخبر هذه السمة المتصفح بمكان فتح رابط URL لعنصر المرساة anchor . هناك أربع قيم محتملة مهمة لهذه السمة: self_، و blank_، و parent_، و top_. هناك قيمة خامسة تُسمى unfencedTop_، وهي مستخدمة حاليًا لواجهة برمجة تطبيقات FencedFrame API التجريبية. ربما لن تجد سببًا لاستخدامها بعد.
  • قيمة self_: هذه هي القيمة الافتراضية لخاصية target. يؤدي هذا إلى فتح الرابط في سياق التصفح الحالي. في معظم الحالات، تكون هذه هي علامة التبويب current tab أو النافذة الحالية current window.

<a href="https://openarabtech.github.io/HTMLverse/" target="_self">زيارة عالم اتش.تي.إم.إل</a>
  • قيمة blank_: تفتح الرابط في سياق تصفح جديد in a new browsing context. عادةً، يُفتح في علامة تبويب جديدة new tab. ولكن قد يُهيئ بعض المستخدمين متصفحاتهم لفتح نافذة جديدة new window instead.

<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة عالم اتش.تي.إم.إل</a>
  • قيمة parent_: تفتح هذه القيمة الرابط في الإطار الرئيسي للسياق الحالي in the parent of the current context . على سبيل المثال، إذا كان موقعك يحتوي على إطار مضمّن iframe، فسيتم فتح قيمة parent_ في هذا الإطار في نافذة/علامة تبويب موقعك your website's tab/window ، وليس في الإطار المضمّن not in the embedded frame.

<a href="https://openarabtech.github.io/HTMLverse/" target="_parent">زيارة عالم اتش.تي.إم.إل</a>
  • قيمة top_: تفتح هذه القيمة الرابط في أعلى سياق تصفح in the top-most browsing context - فكّر في "العنصر الرئيسي للعنصر الرئيسي" the parent of the parent. تشبه هذه القيمة قيمة parent_، ولكن الرابط سيُفتح دائمًا في نافذة/علامة تبويب المتصفح الكاملة open in the full browser tab/window، حتى مع الإطارات المضمنة المتداخلة even for nested embedded frames.

<a href="https://openarabtech.github.io/HTMLverse/" target="_top">زيارة عالم اتش.تي.إم.إل</a>

المسارات المطلقة مقابل المسارات النسبية Absolute vs. Relative Paths

  • تعريف Path: المسار A path هو سلسلة نصية a string تحدد موقع ملف أو مجلد في نظام الملفات file system. في تطوير الويب In web development، تتيح المسارات paths للمطورين ربط موارد مثل الصور images، وأوراق الأنماط stylesheets، والبرامج النصية scripts، وصفحات الويب الأخرى and other web pages.
  • بناء الجملة لـ Path: هناك ثلاثة بناء جملة رئيسية three key syntaxes يجب معرفتها. أولها الشرطة المائلة the slash، والتي يمكن أن تكون شرطة مائلة للخلف a backslash - (\) أو شرطة مائلة للأمام a forward slash - (/) حسب نظام التشغيل. ثانيها النقطة المفردةthe single dot - (.). وأخيرًا، لدينا النقطتان the double dot - (..). تُعرف الشرطة المائلة The slash باسم "فاصل المسار" path separator، وتُستخدم للإشارة إلى فاصل في النص بين أسماء المجلدات أو الملفات. تشير النقطة المفردة إلى الدليل الحالي current directory، وتشير النقطتان إلى الدليل الرئيسي the parent directory.

public/index.html
./favicon.ico
../src/index.css
  • المسار المطلق Absolute Path: المسار المطلق An absolute path هو رابط كامل a complete link لمورد. يبدأ من الدليل الجذر the root directory، ويتضمن جميع الأدلة الأخرى includes every other directory، وأخيرًا اسم الملف وامتداده the filename and extension. يشير "الدليل الجذر" The root directory إلى الدليل أو المجلد الأعلى مستوى في التسلسل الهرمي to the top-level directory or folder in a hierarchy. يتضمن المسار المطلق An absolute path أيضًا البروتوكول the protocol - والذي قد يكون http أو https، بالإضافة إلى اسم الملف file واسم النطاق the domain name إذا كان المورد موجودًا على الويب.

<a href="https://openarabtech.github.io/HTMLverse/favicon.png">
	عرض شعار عالم اتش.تي.إم.إل
</a>
  • المسار النسبي Relative Path: يُحدد المسار النسبي A relative path موقع الملف بالنسبة لمجلد الملف الحالي to the directory of the current file. لا يتضمن هذا المسار البروتوكول the protocol أو اسم النطاق the domain name، مما يجعله أقصر وأكثر مرونة more flexible للروابط الداخلية for internal links ضمن الموقع نفسه. إليك مثال على ربط صفحة about.html من صفحة contact.html، وكلاهما في المجلد نفسه:

<p>
	اقرأ المزيد على
	<a href="about.html">صفحة حول</a>
</p>

حالات الارتباط Link states

  • link:: هذه هي الحالة الافتراضية the default state. تُمثل هذه الحالة رابطًا a link لم يقم المستخدم بزيارته not visited أو النقر عليه not clicked أو التفاعل معه بعد not interacted with ye. يمكنك اعتبار هذه الحالة بمثابة الأنماط الأساسية the base styles لجميع الروابط all links في صفحتك. أما الحالات الأخرى فتُبنى عليها The other states build on top of it.
  • visited:: ينطبق هذا عندما يكون المستخدم قد زار الصفحة when a user has already visited the page المرتبطة بها. افتراضيًا By default، يُحوّل هذا الرابط إلى اللون الأرجواني، ولكن يمكنك استخدام CSS لتوفير مؤشر بصري مختلف to provide a different visual indication للمستخدم to the user.
  • hover:: تنطبق هذه الحالة This state applies عند تحريك المستخدم مؤشر الماوس فوق رابط when a user is hovering their cursor over a link . تُفيد هذه الحالة في زيادة الانتباه للرابط providing extra attention to a link، لضمان نية المستخدم النقر عليه to ensure a user actually intends to click it.
  • focus:: تنطبق هذه الحالة عندما نركز على الرابط This state applies when we focus on a link.
  • active:: تنطبق هذه الحالة على الروابط التي يُفعّلها المستخدم This state applies to links that are being activated by the user. عادةً ما يعني ذلك النقر على الرابط بزر الفأرة الرئيسي بالزر الأيسر This typically means clicking on the link with the primary mouse button by left clicking، في معظم الحالات in most cases .