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:

code 

<!DOCTYPE html>

<html lang="ar">

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

</html>

يُغطي هذا العنصر جميع محتوياتك، ويُمكنه تحديد لغة صفحتك. داخل وسم اتش.تي.إم.إل html، ستجد قسمين رئيسيين: رأس الصفحة 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) ✅