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

أ. ما هي أنواع سمات "الهدف" Target المختلفة، وكيف تعمل؟

ربما لاحظتَ سمة "الهدف" target في عناصر المرساة anchor أو الروابط links. تُرشد هذه السمة المهمة المتصفح إلى مكان فتح عنوان URL لعنصر المرساة anchor.

انقر على الرابط وسيتم توجيهك إلى الصفحة الرئيسية لـ HTMLverse في علامة تبويب جديدة بالمتصفح new browser tab .

الكود :

code 

<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة HTMLverse</a>
	

معاينة :

هناك أربع قيم values محتملة مهمة لهذه الخاصية. يُرجى ملاحظة أن كل قيمة تسبقها شرطة سفلية underscore.

القيمة الأولى هي self_، وهي القيمة الافتراضية. يؤدي هذا إلى فتح الرابط link في سياق التصفح الحالي. في معظم الحالات، يكون هذا هو علامة التبويب أو النافذة الحالية the current tab or window .

القيمة الثانية هي blank_، والتي تفتح الرابط link في سياق تصفح جديد. عادةً، يُفتح هذا في علامة تبويب جديدة. ولكن قد يُهيئ بعض المستخدمين متصفحاتهم لفتح نافذة جديدة new window instead.

القيمة الثالثة هي parent_، والتي تفتح الرابط link في الإطار الرئيسي للسياق الحالي. على سبيل المثال، إذا كان موقعك يحتوي على إطار iframe، فستُفتح قيمة parent_ في هذا الإطار iframe في علامة tab/window موقعك، وليس في الإطار المُضمّن embedded frame.

القيمة الرابعة هي top_، والتي تفتح الرابط link في أعلى سياق تصفح top-most browsing context فكّر في "العنصر الرئيسي للعنصر الرئيسي" the parent of the parent. هذا مشابه parent_، لكن الرابط link سيفتح دائمًا في tab/window تبويب المتصفح الكاملة، حتى مع الإطارات المضمنة المتداخلة nested embedded frames.

هناك قيمة خامسة، تُسمى unfencedTop_، تُستخدم حاليًا لواجهة برمجة تطبيقات FencedFrame API التجريبية. في وقت هذا الدرس، ربما لن تجد سببًا لاستخدامها بعد.

يُعد اختيار القيمة "المستهدفة" target المناسبة للتحكم control في وصول المستخدمين إلى موقعك الإلكتروني أمرًا بالغ الأهمية عند إنشاء موقع ويب.

ب. ما الفرق بين المسارات المطلقة Absolute paths والنسبية Relative paths ؟

المسار A path هو سلسلة نصية string تحدد موقع ملف أو مجلد في نظام الملفات file system . في تطوير الويب، تتيح المسارات paths للمطورين ربط موارد مثل الصور، وأوراق الأنماط stylesheets، والبرامج النصية scripts، وصفحات الويب الأخرى. هناك مسارات مطلقة Absolute ونسبية Relative، وكلاهما أساسي essential لتحديد مواقع الملفات داخل نظام الملفات. دعونا نلقي نظرة على المسارين لتحديد أيهما نستخدم ومتى.

المسار المطلق An absolute path هو رابط كامل لمورد resource. يبدأ من الدليل الجذر root directory، ويتضمن جميع الأدلة الأخرى other directory، وأخيرًا اسم الملف filename وامتداده extension. يشير "الدليل الجذر" root directory إلى الدليل الأعلى the top-level directory أو المجلد الأعلى مستوى في التسلسل الهرمي hierarchy.

يتضمن المسار المطلق absolute path أيضًا البروتوكول protocol - والذي قد يكون http أو https و الملف file واسم النطاق domain name إذا كان المورد موجودًا على الويب web.

إليك مثال على مسار مطلق absolute path يرتبط بشعار HTMLverse:

code 

<a href="https://openarabtech.github.io/HTMLverse/favicon.png">HTMLverse شعار</a>
			

في هذا المثال، البروتوكول هو https، واسم النطاق هو arabiverse.github.io، واسم الملف هو favicon.png.

الآن، ماذا لو كان المورد resource الذي تريد ربطه باستخدام مسار مطلق absolute path موجودًا على جهازك المحلي local machine ؟

إليك كيفية ربط ملف about.html بمسار مطلق absolute path:

code 

<p>
  اقرأ المزيد عن
  <a href="/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html">
  صفحة "حول"
  </a>
</p>
			

يبدو الأمر هكذا لأننا ندخل إلى مجلد باسم "المستخدمون" Users، ثم إلى مجلد باسم "المستخدم" user، ثم إلى مجلد باسم "سطح المكتب" Desktop، ثم إلى مجلد باسم "اف.سي.سي" fCC، ثم إلى مجلد باسم "رمز البرنامج النصي" script-code، ثم إلى مجلد باسم "المسارات المطلقة مقابل النسبية" absolute-vs-relative-paths، ثم إلى مجلد باسم "الصفحات" pages، لنحصل أخيرًا على ملف about.html.

هكذا يبدو عنوان URL المطلق في شريط عناوين المتصفح browser address bar:

file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html
			

يتضمن عنوان URL البروتوكول //:file. كما يتضمن المسار، الذي يبدو كالتالي: /Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/، ويمثل سلسلة المجلدات المؤدية إلى الملف. وأخيرًا، يتضمن أيضًا ملف about.html، وهو اسم الملف filename وامتداده extension.

الآن، لنلقِ نظرة على المسار النسبي Relative path. يُحدد المسار النسبي Relative path موقع الملف بالنسبة لمجلد الملف الحالي. لا يتضمن البروتوكول protocol أو اسم النطاق domain name، مما يجعله أقصر shorter وأكثر مرونة more flexible للروابط الداخلية internal links ضمن الموقع نفسه.

إليك مثال على ربط صفحة about.html بصفحة contact.html، وكلاهما في نفس المجلد:

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

تخيّل أنك في صفحة contact.html، ولأن صفحة about.html موجودة في نفس المكان، ستحصل ببساطة على اسم الملف filename. هذا مثال على استخدام مسار ملف نسبي relative file path.

إذًا، أيهما يجب استخدامه ومتى: مسار مطلق Absolute path أم مسار نسبي Relative path؟ إليك القواعد The rules التي يجب اتباعها:

• استخدم المسارات المطلقة Absolute paths عند الربط بمورد مُستضاف resource hosted على موقع ويب خارجي external website.
• استخدم المسارات المطلقة Absolute paths عندما تحتاج إلى أن يعمل رابط الصفحة أو المورد بشكل متسق consistently بغض النظر عن موقع المستند document location داخل الموقع.
• استخدم المسارات النسبية Relative paths عند ربط الموارد resources داخل الموقع الإلكتروني نفسه.
• استخدم المسارات النسبية Relative paths للحفاظ على شيفرتك your code أكثر تنظيمًا cleaner وسهولة في الصيانة easier to maintain أثناء التطوير during development.
• استخدم المسارات النسبية Relative paths أثناء الاختبار المحلي during local testing لضمان عمل الروابط دون اتصال بالإنترنت.

ج. ما الفرق بين الخطوط المائلة Slashes، والنقطة المفردة Single Dot، والنقطة المزدوجة Double Dot في بناء جملة المسار Path Syntax ؟

ربما سبق لك أن رأيت روابط مثل public/logo.png/، أو script.js/.، أو styles.css/... ولكن ماذا تعني هذه الأنواع الخاصة special types من الروابط؟ تُسمى مسارات الملفات file paths . هناك ثلاثة قواعد أساسية يجب معرفتها. أولها الشرطة المائلة The slash ، والتي يمكن أن تكون شرطة مائلة للخلف Backslash (\) أو شرطة مائلة للأمام Forward slash (/) حسب نظام التشغيل. ثانيها النقطة المفردة The single dot (.). وأخيرًا، لدينا النقطتان The double dot (..).

تُعرف الشرطة المائلة The slash باسم "فاصل المسار" path separator. تُستخدم للإشارة إلى فاصل في النص بين أسماء المجلدات أو الملفات. بهذه الطريقة، يعرف جهاز الكمبيوتر أن /naomis-files يُشير إلى مجلد directory يحمل الاسم نفسه، بينما يُشير /naomis/files إلى مجلد ملفات في مجلد naomis.

تشير نقطة واحدة A single dot إلى المجلد الحالي the current directory، ونقطتان Two dots إلى المجلد الرئيسي the parent directory. عادةً ما تُستخدم نقطة واحدة لضمان تمييز المسار كمسار نسبي relative path. تذكر أنك تعلمت في درس سابق عن المسارات النسبية Relative paths مقابل versus المسارات المطلقة Absolute paths.

مع ذلك، يُعد استخدام النقطتين Double dots أكثر شيوعًا common للوصول إلى الملفات خارج outside مجلد العمل الحالي the current working directory.

على سبيل المثال، بالنظر إلى شجرة الملفات file tree التالية:

my-app/
├─ public/
│  ├─ favicon.ico
│  ├─ index.html
├─ src/
│  ├─ index.css
│  ├─ index.js
			

إذا كان ملف public/index.html يتطلب تحميل ملف favicon.ico، فاستخدم مسارًا نسبيًا relative path بنقطة واحدة a single dot للوصول إلى المجلد الحالي the current directory: favicon.ico/.. أما إذا كان ملف public/index.html يتطلب تحميل ملف index.css، فاستخدم مسارًا نسبيًا relative path بنقطتين double dots للانتقال إلى مجلد my-app الرئيسي أولًا، ثم إلى مجلد src، وأخيرًا إلى ملفك: src/index.css/...

د. ما هي حالات الارتباط Link States المختلفة، وأهميتها؟

ربما لاحظتَ أن رابطًا a link على صفحة ويب web page أصبح بنفسجيًا بعد النقر عليه. هذا لأن حالة الرابط the state of the link قد تغيرت has changed، مما أدى إلى تطبيق تصميم مختلف. هناك خمس حالات مختلفة يمكن أن يظهر فيها الرابط a link.

الحالة الافتراضية The default state الأولى هي link:. تُمثل هذه الحالة رابطًا a link لم يقم المستخدم بزيارته أو النقر عليه أو التفاعل معه بعد. يمكنك اعتبار هذه الحالة بمثابة الأنماط الأساسية the base styles لجميع الروابط في صفحتك، بينما تُبنى الحالات الأخرى عليها.

ألقِ نظرة على الرابط the link في نافذة المعاينة. يجب أن يكون لونه أزرقًا افتراضيًا، وهو يمثل الحالة الافتراضية. عند النقر عليه، سيتحول إلى اللون الأرجواني.

الكود :

code 

<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة HTMLverse</a>
	

معاينة :

الحالة الثانية هي visited:، وتُطبّق عندما يكون المستخدم قد زار الصفحة المرتبطة بها. افتراضيًا، يُحوّل هذا الرابط the link إلى اللون الأرجواني، ولكن يمكنك استخدام CSS لتقديم مؤشر بصري visual indication مختلف للمستخدم. هذا مفيد لإعلام المستخدم بأنه قد قرأ جزءًا portion من مستنداتك، أو أن الموقع موثوق به لأنه استخدمه سابقًا.

انقر Click على الرابط the link في نافذة المعاينة، وسترى أن لون الرابط الذي زرته يتغير إلى اللون البني.

ملاحظة: تم توفير بعض أكواد CSS لهذا المثال التفاعلي لتتمكن من رؤية التغييرات في أنماط الروابط the link styles. لا تقلق بشأن محاولة فهم أكواد CSS، فستتعلم معناها في الوحدات المستقبلية.

الكود :

اتش.تي.إم.إل (HTML):

code 

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

<body>
	<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة HTMLverse</a>
</body>
		

سي.اس.اس CSS :

code 

a:visited {
  color: brown;
}
		

معاينة :

الحالة الثالثة هي hover:. تُطبّق هذه الحالة عند تحريك hovering المستخدم مؤشر الماوس cursor فوق رابط. تُساعد هذه الحالة على زيادة الانتباه للرابط، لضمان نية المستخدم النقر عليه.

جرّب تمرير hovering مؤشر الماوس mouse فوق الرابط. ستلاحظ تغير اللون إلى الأحمر.

الكود :

اتش.تي.إم.إل (HTML):

code 

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

<body>
	<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة HTMLverse</a>
</body>
		

سي.اس.اس CSS :

code 

a:hover {
  color: red;
}
		

معاينة :

ثم لدينا focus:. تنطبق هذه الحالة عند التركيز focus على رابط.

انقر على أي جزء من المساحة البيضاء whitespace في نافذة المعاينة، ثم اضغط على مفتاح tab بلوحة المفاتيح keyboard. سيتغير لون الرابط إلى الأخضر.

الكود :

اتش.تي.إم.إل (HTML):

code 

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

<body>
	<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة HTMLverse</a>
</body>
		

سي.اس.اس CSS :

code 

a:focus {
  color: green;
}
		

معاينة :

وأخيرًا، لدينا active:. تنطبق هذه الحالة على الروابط التي يُفعّلها المستخدم. عادةً ما يعني هذا النقر على الرابط بزر الفأرة الرئيسي بالزر الأيسر، في معظم الحالات. تُفيد هذه الحالة في إعلام المستخدم بأن العنصر الذي نقر عليه تفاعلي interactive.

انقر Click على الرابط. سترى الرابط يتحول إلى اللون الأسود. يحدث هذا بسرعة، لذا قد تحتاج إلى النقر عليه عدة مرات لرؤية تغير اللون.

الكود :

اتش.تي.إم.إل (HTML):

code 

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

<body>
	<a href="https://openarabtech.github.io/HTMLverse/" target="_blank">زيارة HTMLverse</a>
</body>
		

سي.اس.اس CSS :

code 

a:active {
  color: black;
}
		

معاينة :

عندما تستخدم هذه الحالات States لتصميم to style الروابط links الخاصة بك، هناك ترتيب محدد يجب عليك كتابة CSS به: الرابط link، الزيارة visited، التمرير hover، التركيز focus، ثم النشاط active.

يجب أن تعرف الآن كيفية إضفاء لمسة شخصية personal flair على روابط صفحتك، مع توفير المعلومات المهمة التي يحتاجها المستخدم حول حالة about the state كل رابط of each link.