X

اتش.تي.إم.إل الدلالية

٣. إنشاء قائمة بأهم متصفحات الويب

ورشة عمل

في هذه الورشة، ستُنشئ قائمةً بأهم متصفحات الويب web browsers. وقد تم تزويدك بنموذج "اتش.تي.إم.إل" The HTML boilerplate.

نموذج "اتش.تي.إم.إل" The HTML boilerplate.


<!DOCTYPE html>
<html lang="ar" dir="rtl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>قائمة المتصفحات والأوصاف</title>
    </head>

    <body>

	<!-- هنا تضع اكواد التطبيق -->

    </body>

</html>

الخطوة الأولى :

ابدأ بإضافة عنوان إلى صفحتك يتضمن قائمة متصفحات الويب الرئيسية باستخدام عنصر h1 داخل عنصر body.

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>

</body>

الخطوة الثانية :

كما تتذكرون من درس سابق، يتم استخدام قوائم الوصف description lists لتقديم المصطلحات terms والتعريفات definitions بتنسيق منظم وسهل القراءة.

وهنا مثال:


<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
	
	<dt>CSS</dt>
	<dd>Cascading Style Sheets</dd>
</dl>

أسفل عنصر h1، أنشئ عنصر dl. سيحتوي هذا العنصر على قائمة المتصفحات list of browsers.

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>
	
	<dl>

	</dl>

</body>

الخطوة الثالثة :

تتكون قوائم الوصف Description lists من قائمة مصطلحات terms وتفاصيل details. يمثل عنصر dt مصطلح الوصف the Description Term، بينما يمثل عنصر dd تفاصيل الوصف the Description Detail.

المتصفح الأول الذي ستضيفه إلى قائمة الوصف description list الخاصة بك سيكون لمتصفح "غوغل كروم" Google Chrome.

داخل عنصر dl الخاص بك، أضف عنصر dt يحتوي على النص Google Chrome.

أسفل عنصر dt، أضف عنصر dd بالنص التالي:

هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>
	
	<dl>
		<dt>Google Chrome</dt>
		<dd>.2008 وتم إصداره لأول مرة في عام Google هذا متصفح ويب مجاني تم تطويره بواسطة</dd>
	</dl>

</body>

الخطوة الرابعة :

الآن حان الوقت لإضافة المتصفح الثاني إلى القائمة the list.

أضف عنصر dt آخر أسفل مدخل Google Chrome يحتوي على النص Firefox.

أسفل عنصر dt، أضف عنصر dd بالنص التالي:

هذا متصفح ويب مجاني تم تطويره بواسطة شركة Mozilla Corporation وتم إنشاؤه لأول مرة في عام 2004.

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>
	
	<dl>
		<dt>Google Chrome</dt>
		<dd>.2008 وتم إصداره لأول مرة في عام Google هذا متصفح ويب مجاني تم تطويره بواسطة</dd>
		
		<dt>Firefox</dt>
		<dd>.2004 وتم إنشاؤه لأول مرة في عام Mozilla Corporation هذا متصفح ويب مجاني تم تطويره بواسطة شركة</dd>
	
	</dl>

</body>

الخطوة الخامسة :

المتصفح الثالث الذي ستضيفه إلى القائمة سيكون لمتصفح الويب Safari.

أضف عنصر dt آخر يحتوي على النص Safari.

أسفل عنصر dt، أضف عنصر dd بالنص التالي:

تم تطوير هذا المتصفح بواسطة Apple وهو المتصفح الافتراضي لأجهزة iPhone iPad Mac .

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>
	
	<dl>
		<dt>Google Chrome</dt>
		<dd>.2008 وتم إصداره لأول مرة في عام Google هذا متصفح ويب مجاني تم تطويره بواسطة</dd>
		
		<dt>Firefox</dt>
		<dd>.2004 وتم إنشاؤه لأول مرة في عام Mozilla Corporation هذا متصفح ويب مجاني تم تطويره بواسطة شركة</dd>
		
		<dt>Safari</dt>
		<dd>. iPhone iPad  Mac وهو المتصفح الافتراضي لأجهزة Apple تم تطوير هذا المتصفح بواسطة</dd>
	
	</dl>

</body>

الخطوة السادسة :

الآن حان الوقت لإضافة المتصفح الرابع إلى القائمة the list.

أضف عنصر dt آخر يحتوي على النص Brave.

أسفل عنصر dt، أضف عنصر dd بالنص التالي:

هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب Chromium.

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>
	
	<dl>
		<dt>Google Chrome</dt>
		<dd>.2008 وتم إصداره لأول مرة في عام Google هذا متصفح ويب مجاني تم تطويره بواسطة</dd>
		
		<dt>Firefox</dt>
		<dd>.2004 وتم إنشاؤه لأول مرة في عام Mozilla Corporation هذا متصفح ويب مجاني تم تطويره بواسطة شركة</dd>
		
		<dt>Safari</dt>
		<dd>. iPhone iPad  Mac وهو المتصفح الافتراضي لأجهزة Apple تم تطوير هذا المتصفح بواسطة</dd>
		
		<dt>Brave</dt>
		<dd>.Chromium هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب</dd>
	
	</dl>

</body>

الخطوة الأخيرة :

المتصفح الأخير الذي ستضيفه إلى القائمة the list سيكون لمتصفح Arc.

أضف عنصر dt آخر يحتوي على النص Arc.

أسفل عنصر dt، أضف عنصر dd بالنص التالي:

هذا متصفح ويب مجاني يعتمد على Chromium تم إصداره لأول مرة في عام 2023 بواسطة The Browser Company.

الكود :


<body>

	<h1>قائمة متصفحات الويب الرئيسية</h1>
	
	<dl>
		<dt>Google Chrome</dt>
		<dd>.2008 وتم إصداره لأول مرة في عام Google هذا متصفح ويب مجاني تم تطويره بواسطة</dd>
		
		<dt>Firefox</dt>
		<dd>.2004 وتم إنشاؤه لأول مرة في عام Mozilla Corporation هذا متصفح ويب مجاني تم تطويره بواسطة شركة</dd>
		
		<dt>Safari</dt>
		<dd>. iPhone iPad  Mac وهو المتصفح الافتراضي لأجهزة Apple تم تطوير هذا المتصفح بواسطة</dd>
		
		<dt>Brave</dt>
		<dd>.Chromium هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب</dd>
		
		<dt>Arc</dt>
		<dd>.The Browser Company  تم إصداره لأول مرة في عام 2023 بواسطة Chromium هذا متصفح ويب مجاني يعتمد على</dd>
	
	</dl>

</body>
مبروك على الانتهاء من هذه الورشة!