X

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

١٧. إنشاء صفحة تجميع فيديو

مختبر

الهدف: استيفاء قصص المستخدم أدناه والحصول على جميع الاختبارات اللازمة لإكمال المختبر

قصص المستخدم :

١. يجب أن يكون لديك عنصر رئيسي main باعتباره الطفل child الوحيد لعنصر الجسم body.

٢. يجب أن يكون لديك عنصر h1 بموضوع topic صفحتك.

٣. يجب أن تُقدّم introducing فقرة paragraph موضوع صفحتك أسفل عنصر h1.

٤. يجب أن يكون لديك ثلاثة أقسام section أسفل فقرتك الأولى.

٥. يجب أن يحتوي كل قسم section على عنصر h2، وفقرة p، وعنصر iframe، بهذا الترتيب.

٦. يجب أن تحتوي عناصر iframe الثلاثة على سمة src مُعيّنة لفيديو صالح valid video.

٧. يجب أن يحتوي كل عنصر iframe على سمة عنوان title لوصف المحتوى المُضمّن embedded content، وسمة ارتفاع height وسمة عرض width لضبط حجم العنصر على الحجم المناسب proper size.

الحل :

code 


<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

  <meta charset="UTF-8" />
  <title>صفحة تجميع فيديو</title>
  <meta name="description" content="إنشاء صفحة تجميع فيديو"/>

</head>

<body>
	<main>
  		<h1>صفحة تجميع فيديو</h1>
		<p>إنشاء صفحة تجميع فيديو</p>

		<section>
			<h2>الفيديو الأول</h2>
			<p>وصف الفيديو الأول</p>

			<iframe
				title="video1"
				width="300" 
				height="250"
				src="https://www.youtube.com/embed/I0_951_MPE0"
				allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
				referrerpolicy="strict-origin-when-cross-origin"
				allowfullscreen
			>	
			</iframe>
		</section>

		<section>
			<h2>الفيديو الثاني</h2>
			<p>وصف الفيديو الثاني</p>

			<iframe
				title="video2"
				width="300" 
				height="250"
				src="https://www.youtube.com/embed/dQhMwK4W-DI"
				allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
				referrerpolicy="strict-origin-when-cross-origin"
				allowfullscreen
			>
			</iframe>
		</section>

		<section>
			<h2>الفيديو الثالث</h2>
			<p>وصف الفيديو الثالث</p>

			<iframe
				title="video3"
				width="300" 
				height="250"
				src="https://www.youtube.com/embed/YX17u97k1TU"
				allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
				referrerpolicy="strict-origin-when-cross-origin"
				allowfullscreen
			>	
			</iframe>
		</section>
	</main>
</body>
</html>

معاينة :