X

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

٥. فهم قالب اتش.تي.إم.إل الأساسي

نظري

في هذه الدروس، ستتعلم عن قالب (Boilerplate) اتش.تي.إم.إل (HTML) الجاهز وهو نموذج معد مسبقًا لصفحات الويب (Web) الخاصة بك.

أ. ما هو دور عنصر الرابط (link) في لغة اتش.تي.أم.إل (HTML)، وكيف يمكن استخدامه للربط بملفات الأنماط (Stylesheets) الخارجية؟

دعونا نتعلم عن عنصر الرابط (link)، وكيفية استخدامه للربط بملفات الأنماط (stylesheets) الخارجية.

يُستخدم عنصر الرابط (link) لربط الموارد الخارجية مثل أوراق الأنماط (stylesheets) وأيقونات (icons) الموقع.

إليك الصياغة الأساسية لاستخدام عنصر الرابط (link) لملف (css) خارجي:

code 

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

تُستخدم السمة "ريل" (rel) لتحديد العلاقة بين المورد المرتبط ومستند اتش.تي.إم.إل (html). في هذه الحالة، نحتاج إلى تحديد أن المورد المرتبط هو ورقة أنماط (stylesheets).

يعتبر من أفضل الممارسات فصل ملفات اتش.تي.إم.إل (html) و "سي.اس.اس" (css) في ملفات مختلفة. سيستخدم المطورون عنصر الرابط "لينك" (link) لملف "سي.اس.اس" (css) الخارجي بدلاً من كتابة كل شيء داخل مستند اتش.تي.إم.إل (html).

تُستخدم خاصية "اتش.ريف" (href) لتحديد موقع عنوان (URL) للمورد الخارجي.

تشير النقطة (.) متبوعة بشرطة مائلة (/) في المثال إلى الكمبيوتر للنظر في المجلد الحالي، أو الدليل، عن ملف (styles.css).

يجب وضع عنصر الرابط (link) داخل عنصر الرأس (head) كما هو موضح في المثال التالي:

code 

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>أمثلة على عنصر الرابط</title>

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

</head>

غالبًا ما سترى عدة "عناصر رابط" (link elements) داخل "قاعدة كود" (codebase) احترافية تربط بأنماط (stylesheets) وأشكال (fonts) وأيقونات (icons) مختلفة. إليك مثالًا على استخدام عنصر الرابط (link) للربط "بخط خارجي" (external Font) من غوغل (Google) يُسمى "بلاي.وريت كوبا" (Playwright Cuba):

code 


<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link href="https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap" rel="stylesheet">

خطوط غوغل (google) هي مجموعة من "الخطوط المخصصة" (custom fonts) المجانية (free) و"المفتوحة المصدر" (open source) التي يمكنك استخدامها داخل أي مشروع. يمكنك اختيار الخطوط (fonts) التي ترغب في استخدامها وسيوفر لك غوغل (google) الكود اللازم لِـ اتش.تي.إم.إل (html) و"سي.اس.اس" (css). في هذا المثال، قيمة "بري.كونكت" (preconnect) لخاصية "ريل" (rel) تخبر المتصفح (browser) بإنشاء اتصال مبكر مع القيمة المحددة في خاصية "اتش.ريف" (href). يتم ذلك لتسريع أوقات تحميل (loading) هذه الموارد الخارجية.

استخدام شائع آخر لعنصر الرابط (link) هو الربط بالأيقونات (icons). إليك مثالاً على الربط (link) بأيقونة الموقع (favicon)

code 

<link rel="icon" href="favicon.ico" />

أيقونة الموقع المفضلة، والتي تُعرف اختصارًا "فافيكون" (favicon)، هي أيقونة (icon) صغيرة تُعرض عادةً في تبويب المتصفح (browser tab) بجانب عنوان الموقع. يستخدم الكثير من المواقع أيقونة "فافيكون" (favicon) لعرض رمز علامتهم التجارية (brand icon).

أسئلة :

ما هو دور عنصر الرابط (link) في اتش.تي.إم.إل (html)؟

١. يحدد نوع المحتوى للموارد المرتبطة. ❌

٢. يحدد رؤية المورد المرتبط على صفحة الويب. ❌

٣. يُعرف حجم الخط للمورد المرتبط عند عرضه. ❌

٤. يُستخدم للربط بالموارد الخارجية مثل أوراق الأنماط وأيقونات الموقع. ✅


ما هو دور الخاصية "ريل" (rel) داخل عنصر الرابط (link)؟

١. يُستخدم للإشارة إلى لغة المستند المرتبط. ❌

٢. يُستخدم لتحديد العلاقة بين المورد المرتبط ومستند اتش.تي.إم.إل (html). ✅

٣. يُستخدم لتحديد نوع الوسائط للمستند المرتبط. ❌

٤. يُستخدم لتحديد حجم المستند المرتبط. ❌


ما هو الفافيكون (favicon)؟

١. نوع من ملفات "جافاسكريبت" (javascript) يُستخدم لتعزيز وظائف الموقع. ❌

٢. نوع من الخطوط (fonts) يُستخدم لتنسيق النص على الموقع. ❌

٣. أيقونة صغيرة تعرض عادةً في تبويب المتصفح بجانب عنوان الموقع. ✅

٤. ميزة أمان تُستخدم لمنع هجمات البرمجة عبر المواقع (XSS). ❌

ب. ما هو "نموذج اتش.تي.إم.إل" (HTML Boilerplate) ولماذا هو مهم؟

دعونا نتعلم المزيد عن قالب اتش.تي.إم.إل (HTML boilerplate).

ما هو قالب اتش.تي.إم.إل (HTML boilerplate)؟ إنه أشبه بقالب جاهز لصفحات الويب (webpages). تخيّل أنه أساس أي منزل. يتضمن القالب الهيكل الأساسي والعناصر الأساسية التي يحتاجها كل مستند اتش.تي.إم.إل (html). فهو يوفر عليك الوقت ويساعد على ضمان إعداد صفحاتك بشكل صحيح.

إليك مثال:

code 

<!DOCTYPE html>

<html lang="ar">

	<head>
		<meta charset="UTF-8" />

		<meta 
			name="viewport" 
			content="width=device-width, initial-scale=1.0" />

		<title>عالم اتش.تي.إم.إل</title>

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

	<body>

	</body>

</html>

دعونا نحلل الأجزاء الرئيسية لهذا النموذج. أولًا، هناك إعلان "دوك.تايب" (DOCTYPE):

code 

<!DOCTYPE html>

يُخبر المتصفحات بإصدار اتش.تي.إم.إل (html) الذي تستخدمه. ثم يأتي "وسم اتش.تي.إم.إل" (html tag):

code 

<!DOCTYPE html>

<html lang="ar">

		<!-- جميع العناصر الأخرى تذهب إلى الداخل هنا -->		

</html>

يُغطي هذا العنصر جميع محتوياتك، ويُمكنه تحديد لغة صفحتك. داخل وسم اتش.تي.إم.إل (html tag)، ستجد قسمين رئيسيين: رأس الصفحة (head) ونصها (body) :

code 

<!DOCTYPE html>

<html lang="ar">

	<head>
		<!-- تظهر هنا البيانات الوصفية المهمة "متاداتا" (metadata) -->
	</head>

	<body>
		<!-- العناوين والفقرات والصور وما إلى ذلك تذهب إلى الداخل هنا -->
	</body>		

</html>

يحتوي القسم الرئيسي (head section) على معلومات مهمة خلف الكواليس:

code 

<head>
	<meta charset="UTF-8" />

	<meta 
		name="viewport" 
		content="width=device-width, initial-scale=1.0" />

	<title>عالم اتش.تي.إم.إل</title>

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

</head>

تحتوي بيانات موقعك الوصفية، الموجودة في عناصر التعريف (metadata)، على تفاصيل حول أمور مثل ترميز الأحرف (character encoding)، وكيفية معاينة رابط صفحتك على مواقع مثل منصة فيسبوك. يُحدد عنوان موقعك، الموجود في عنصر العنوان، النص الذي يظهر في علامة تبويب (browser tab) أو نافذة المتصفح (window). وأخيرًا، عادةً ما تربط أوراق الأنماط الخارجية (external stylesheets) لصفحتك في قسم الرأس (head section) باستخدام عناصر الارتباط (link elements).

قسم الجسم (body section) هو المكان الذي يوضع فيه كل المحتوى الخاص بك:

code 

<body>
	<h1>أنا عنوان رئيسي</h1>

	<p>مثال لنص الفقرة</p>
</body>

الآن، ما أهمية النموذج المعياري (boilerplate)؟ إنه يضمن هيكلة صفحاتك بشكل صحيح وعملها بكفاءة على مختلف المتصفحات (browsers). يساعدك استخدام النموذج المعياري (boilerplate) على تجنب الأخطاء الشائعة واتباع أفضل الممارسات. إنه نقطة انطلاق ممتازة لأي مشروع ويب (web). تذكر أنه يمكنك تخصيص نموذجك المعياري ليناسب احتياجاتك. مع اكتسابك الخبرة، يمكنك إضافة عناصر أو علامات تعريفية مفضلة لديك. مع استمرارك في تحسين نموذجك المعياري، ستجد أنه يوفر لك الوقت عند بدء مشاريع جديدة.

في المرة القادمة التي تبدأ فيها ملف اتش.تي.إم.إل (HTML file) جديدًا، فكّر في استخدام نموذج جاهز (boilerplate). سيمنحك هذا أساسًا متينًا للبناء عليه.

أسئلة :

أين تريد تعيين ترميز الأحرف (character encoding) لصفحتك؟

١. عنصر "ميتا" (meta) في الجسم (body). ❌

٢. عنصر الرأس (head) في الجسم (body). ❌

٣. عنصر "ميتا" (meta) في الرأس (head). ✅

٤. في "دوك.تايب" (DOCTYPE). ❌


أين تريد تعيين اللغة (lang) لصفحتك؟

١. في وسم اتش.تي.إم.إل (html) الافتتاحي. ✅

٢. عنصر "ميتا" (meta) في الجسم (body). ❌

٣. عنصر الرأس (head) في الجسم (body). ❌

٤. عنصر "ميتا" (meta) في الرأس (head). ❌


ما هو الغرض من القالب النمطي (boilerplate)؟

١. يوفر هيكلًا أساسيًا لمواقعك الإلكترونية.

٢. يضمن لك عدم إغفال أي عناصر أساسية.

٣. يسمح لك بالبدء بكتابة محتوى صفحتك بشكل أسرع.

٤. جميع ما سبق. ✅

ج. ما هو ترميز الأحرف "يو.تي.اف-٨" (UTF-8) ، ولماذا هو مطلوب؟

ما هو ترميز الأحرف "يو.تي.اف-٨" (UTF-8) ، ولماذا هو مطلوب؟

"يو.تي.اف-٨" (UTF-8)، أو "تنسيق تحويل يو.سي.اس ٨" (UCS Transformation Format 8)، هو ترميز أحرف موحد يُستخدم على نطاق واسع على الإنترنت. وترميز الأحرف (Character encoding) هو الطريقة التي تستخدمها أجهزة الكمبيوتر لتخزين الأحرف كبيانات (data). في جوهره، كل نص على صفحة ويب هو سلسلة من الأحرف المخزنة كبايت (bytes) واحد أو أكثر. في الحوسبة (computing)، البايت هو وحدة بيانات تتكون من ٨ بيت (8 bits)، أو أرقام ثنائية (binary digits). يدعم "يو.تي.اف-٨" (UTF-8) جميع أحرف "مجموعة أحرف يونيكود" (Unicode character set)، وهذا يشمل الأحرف والرموز من جميع أنظمة الكتابة واللغات والرموز التقنية.

فيما يلي مثال لاستخدام عنصر "ميتا" (meta) مع سمة "شارسات" (charset) لتعيين ترميز الأحرف إلى "يو.تي.اف-٨" (UTF-8):

code 

<meta charset="UTF-8" />

من خلال ضبط ترميز الأحرف إلى "يو.تي.اف-٨" (UTF-8)، سيتم ضمان عرض الحرف "e" المميز (é) بشكل صحيح على الصفحة.

فيما يلي مثال كود موسع لاستخدام ترميز الأحرف "يو.تي.اف-٨" (UTF-8):

code 

<!DOCTYPE html>

<html lang="ar">

	<head>

		<meta charset="UTF-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		
		<title>مثال ترميز الأحرف</title>

	</head>

	<body>

		<p>هذا مثال على ترميز الأحرف: café, naïve, résumé.</p>
	
		</body>

</html>

بالنسبة لكل مشروع جديد تقوم بإنشائه، يجب عليك تضمين عنصر "ميتا" (meta) هذا مع تعيين سمة "شارسيت" (charset) إلى "يو.تي.افء٨" (UTF-8).

أسئلة :

ما هي الخاصية المستخدمة لتعيين ترميز الأحرف "يو.تي.اف-٨" (UTF-8) لمستندات اتش.تي.إم.إل (HTML)؟

١. pattern ❌

٢. content ❌

٣. "شارسيت" (charset) ✅

٤. lang ❌


ما هو ترميز الأحرف (Character encoding)؟

١. طريقة تستخدمها أجهزة الكمبيوتر لتخزين الأحرف كبيانات (data). ✅

٢. طريقة لضغط (compress) ملفات النصوص. ❌

٣. يحدد الخط المستخدم لعرض (display) النص على الشاشة. ❌

٤. يشير إلى عملية تحويل (converting) اللغة المنطوقة إلى نص مكتوب ❌


كم عدد البيتات (bits) الموجودة داخل البايت (byte)؟

١. (1) ❌

٢. (33) ❌

٣. (7) ❌

٤. (8) ✅