أمثلة HTML تطبيقية بالعربي — مكتبة أكواد جاهزة للتجربة والتعديل
أفضل طريقة لتثبيت ما تعلمته هي التجربة المباشرة. في هذه الصفحة ستجد مجموعة من الأمثلة التطبيقية الكاملة — من أبسط هيكل HTML إلى نماذج تفاعلية. اضغط على زر «جرّب الكود» لفتح المثال مباشرة في المحرر الذكي، حيث يمكنك تعديله ورؤية النتيجة فوراً.
1. الهيكل الأساسي للصفحة
أبسط صفحة HTML ممكنة.<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحباً بك في عالم الويب!</h1>
<p>هذه أول فقرة لي في لغة HTML.</p>
</body>
</html>2. تنسيق النصوص
استخدام وسوم التنسيق المختلفة.<h2>تنسيقات النصوص</h2>
<p>هذا نص <b>عريض (Bold)</b>.</p>
<p>هذا نص <i>مائل (Italic)</i>.</p>
<p>هذا نص <u>مسطر (Underline)</u>.</p>
<p>هذا نص <mark>مميز (Marked)</mark>.</p>
<p>H<sub>2</sub>O هو الرمز الكيميائي للماء.</p>3. الروابط والصور
كيفية إضافة روابط وصور للصفحة.<h2>الروابط والصور</h2>
<p>زيارة <a href="https://google.com" target="_blank">موقع جوجل</a>.</p>
<h3>صورة من الإنترنت:</h3>
<img src="/assets/images/mylogo.png" alt="صورة تجريبية" style="border-radius: 10px;" width="300">4. القوائم (Lists)
القوائم المرتبة وغير المرتبة.<h3>قائمة غير مرتبة (Unordered):</h3>
<ul>
<li>تفاح 🍎</li>
<li>موز 🍌</li>
<li>برتقال 🍊</li>
</ul>
<h3>قائمة مرتبة (Ordered):</h3>
<ol>
<li>الاستيقاظ مبكراً</li>
<li>تعلم البرمجة</li>
<li>النوم جيداً</li>
</ol>5. الجداول (Tables)
عرض البيانات في جدول منظم.<table border="1">
<thead>
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>المهنة</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>25</td>
<td>مهندس</td>
</tr>
<tr>
<td>سارة</td>
<td>28</td>
<td>مصممة</td>
</tr>
</tbody>
</table>6. النماذج (Forms)
نموذج تسجيل بسيط.<form onsubmit="return false;">
<div class="form-group">
<label>الاسم:</label>
<input type="text" placeholder="أدخل اسمك" required>
</div>
<div class="form-group">
<label>البريد الإلكتروني:</label>
<input type="email" placeholder="example@mail.com" required>
</div>
<button type="submit" onclick="alert('تم إرسال النموذج!')">تسجيل</button>
</form>