امتحان HTML 4: الرسوميات، الوسائط المتقدمة، و APIs (20 تمرين)
امتحان HTML 4: مستوى الخبير
يتكون هذا الامتحان من 20 تمرين شامل يركز على التقنيات المتقدمة.
التمارين 1-10: الأساسي |
التمارين 11-15: المتوسط |
التمارين 16-20: المتقدم
تمرين 1
رسوميات المتجهات (SVG Circle)
استخدم SVG لرسم دائرة:
- نصف قطرها 40، مركزها (50,50).
- لونها أحمر.
الحل
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
تمرين 2
الصور المتجاوبة (Picture)
استخدم picture للصور المتجاوبة:
- صورة صغيرة للشاشات أقل من 600px.
- صورة كبيرة للشاشات الأكبر.
الحل
<picture>
<source media="(max-width: 600px)" srcset="img_small.jpg">
<img src="img_large.jpg" alt="صورة متجاوبة">
</picture>
تمرين 3
التحقق المتقدم (Pattern)
أنشئ حقل يقبل 10 أرقام فقط:
الحل
<input type="text" pattern="[0-9]{10}" title="10 أرقام" required>
تمرين 4
الاقتراح التلقائي (Datalist)
أنشئ حقل مع اقتراحات:
الحل
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
تمرين 5
شريط التقدم (Progress)
اعرض تقدم 70%:
الحل
<progress value="70" max="100">70%</progress>
تمرين 6
المقياس (Meter)
اعرض مساحة تخزين 60/100:
الحل
<meter value="60" min="0" max="100">60%</meter>
تمرين 7
الفيديو مع الترجمة
أضف ترجمة للفيديو:
الحل
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="العربية">
</video>
تمرين 8
خرائط الصور (Image Maps)
أنشئ خريطة صورة:
الحل
<img src="workplace.jpg" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="computer.htm">
</map>
تمرين 9
القالب (Template)
استخدم template لمحتوى مخفي:
الحل
<template id="myTemplate">
<h2>محتوى سري</h2>
<p>لا يظهر عند التحميل</p>
</template>
تمرين 10
لوحة الرسم (Canvas)
عرّف canvas بأبعاد 200x100:
الحل
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>
تمرين 11
SVG Rectangle
متوسط
ارسم مستطيل SVG بأبعاد 100x50:
الحل
<svg>
<rect width="100" height="50" fill="blue" />
</svg>
تمرين 12
Dialog Element
متوسط
أنشئ dialog مع زر إغلاق:
الحل
<dialog id="myDialog">
<p>محتوى النافذة</p>
<button onclick="document.getElementById('myDialog').close()">إغلاق</button>
</dialog>
تمرين 13
Time Element
متوسط
استخدم time مع datetime:
الحل
<time datetime="2024-01-01">1 يناير 2024</time>
تمرين 14
Mark Element
متوسط
استخدم mark لتمييز نص:
الحل
<p>هذا <mark>نص مميز</mark> في الفقرة</p>
تمرين 15
Srcset للصور
متوسط
استخدم srcset لصور متعددة الدقة:
الحل
<img src="image.jpg"
srcset="image-1x.jpg 1x, image-2x.jpg 2x"
alt="صورة متجاوبة">
تمرين 16
Canvas Drawing
متقدم
ارسم مستطيل على Canvas باستخدام JavaScript:
الحل
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
</script>
تمرين 17
SVG Path
متقدم
ارسم خط SVG باستخدام path:
الحل
<svg>
<path d="M10 10 L100 100" stroke="black" stroke-width="2" />
</svg>
تمرين 18
Web Storage API
متقدم
استخدم localStorage لحفظ بيانات:
الحل
<script>
// حفظ
localStorage.setItem('name', 'أحمد');
// استرجاع
var name = localStorage.getItem('name');
</script>
تمرين 19
Geolocation API
متقدم
احصل على الموقع الجغرافي:
الحل
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});
}
</script>
تمرين 20
مشروع: صفحة تفاعلية متكاملة
متقدم
أنشئ صفحة تحتوي على:
- فيديو مع ترجمة.
- Canvas لرسم بسيط.
- Progress bar.
- Dialog للإشعارات.
الحل
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subs.vtt" kind="subtitles" srclang="ar">
</video>
<canvas id="canvas" width="200" height="100"></canvas>
<progress value="50" max="100"></progress>
<dialog id="notification">
<p>إشعار مهم!</p>
<button onclick="this.parentElement.close()">إغلاق</button>
</dialog>
</body>
</html>