Notesespace élève
Cours
Documents et résumés de cours disponibles
Cours HTML pour débutants - 1AS Nouveau
Publié le 15 Avril 2026
مقدمة قصيرة عن تاريخ HTML
HTML هو اختصار لـ HyperText Markup Language، وقد ظهر في بداية التسعينات على يد Tim Berners-Lee من أجل تنظيم محتوى صفحات الويب وعرضه داخل المتصفح.
ما هو HTML؟
HTML هي لغة ترميز تُستعمل لإنشاء صفحات الويب، وهي تعتمد على وسوم تسمى Tags لتنظيم النصوص والعناوين والصور والروابط والجداول.
كل صفحة HTML تكون عادة ملفًا نصيًا بسيطًا بامتداد .html.
بنية صفحة HTML بسيطة
<html>
<head>
<meta charset="UTF-8">
<title>عنوان الصفحة</title>
</head>
<body>
محتوى الصفحة يكتب هنا
</body>
</html>
- <head> يحتوي على معلومات عن الصفحة مثل العنوان والترميز.
- <meta charset="UTF-8"> يسمح بكتابة العربية بشكل صحيح داخل الصفحة.
- <title> هو عنوان الصفحة الذي يظهر في أعلى المتصفح.
- <body> يحتوي على كل ما يظهر للمستخدم داخل الصفحة.
الوسوم الأساسية
العناوين
<h1>عنوان رئيسي</h1> <h2>عنوان فرعي</h2>
الفقرة
<p>هذه فقرة بسيطة.</p>
تنسيق النص
<p>هذه جملة <b>عريضة</b> و<em>مائلة</em> و<u>مسطّرة</u>.</p>
الروابط والصور
الرابط
<a href="https://www.google.com">اذهب إلى Google</a>
الصورة
<img src="photo.jpg" alt="صورة شخصية">
الجداول
<table border="1"> <tr><th>المادة</th><th>العلامة</th></tr> <tr><td>رياضيات</td><td>14</td></tr> <tr><td>فيزياء</td><td>12</td></tr> </table>
مثال كامل
<head>
<meta charset="UTF-8">
<title>أول صفحة HTML</title>
</head>
<body>
<h1>مرحبا بك في أول صفحة HTML</h1>
<p>هذه هي <b>أول</b> صفحة أكتبها باستعمال <em>HTML</em>.</p>
<p><a href="https://www.google.com">بحث على Google</a></p>
<img src="school.jpg" alt="صورة المدرسة">
</body>
تمارين مع الحلول
التمرين 1
أنشئ صفحة تحتوي على عنوان رئيسي، فقرة منسقة، رابطًا إلى Google، وصورة.
الحل
<head>
<meta charset="UTF-8">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>صفحتي الأولى</h1>
<p>هذه هي <b>صفحتي</b> الأولى في <em>HTML</em> و<u>تعلم البرمجة</u>.</p>
<p><a href="https://www.google.com">بحث على Google</a></p>
<img src="photo.jpg" alt="صورة شخصية">
</body>
التمرين 2
أنشئ جدولًا يحتوي على عمودين: المادة والعلامة.
الحل
<table border="1">
<tr><th>المادة</th><th>العلامة</th></tr>
<tr><td>رياضيات</td><td>14</td></tr>
<tr><td>فيزياء</td><td>12</td></tr>
</table>
التمرين 3
أنشئ صفحة باسم الطالب تحتوي على اسمه، سنته الدراسية، وجدولًا صغيرًا.
الحل
<head>
<meta charset="UTF-8">
<title>صفحة أحمد</title>
</head>
<body>
<h1>أحمد</h1>
<h2>السنة الدراسية</h2>
<p>أدرس في السنة الأولى ثانوي.</p>
<table border="1">
<tr><th>المادة</th><th>الملاحظة</th></tr>
<tr><td>HTML</td><td>جيدة</td></tr>
</table>
</body>
الوسوم
Publié le 3 avril 2026
وسوم HTML ووظائفها
فيما يلي أهم وسوم HTML مع تعريفها ووظيفتها:
| الوسم | الوظيفة / التعريف |
|---|---|
| <html> | يمثل الجذر الرئيسي للصفحة ويحتوي على جميع عناصر HTML. |
| <head> | يحتوي على معلومات عن الصفحة مثل العنوان والترميز والروابط الخارجية. |
| <title> | يحدد عنوان الصفحة الذي يظهر في شريط المتصفح. |
| <meta> | يستخدم لتحديد معلومات إضافية مثل الترميز والوصف. |
| <body> | يحتوي على جميع العناصر التي تظهر للمستخدم داخل الصفحة. |
| <h1> إلى <h6> | تستخدم لإنشاء العناوين من الأكبر إلى الأصغر. |
| <p> | يستخدم لكتابة فقرة نصية. |
| <br> | ينشئ سطرًا جديدًا داخل النص. |
| <hr> | ينشئ خطًا أفقيًا للفصل بين المحتويات. |
| <b> | يجعل النص عريضًا (غامقًا). |
| <strong> | يظهر النص مهمًا وغالبًا يكون غامقًا. |
| <i> | يجعل النص مائلًا. |
| <em> | يستخدم للتأكيد على النص ويظهر غالبًا مائلًا. |
| <u> | يضع خطًا تحت النص. |
| <a> | يستخدم لإنشاء رابط إلى صفحة أخرى أو موقع آخر. |
| <img> | يستخدم لإدراج صورة داخل الصفحة. |
| <ul> | ينشئ قائمة غير مرتبة (بنقاط). |
| <ol> | ينشئ قائمة مرتبة (بالأرقام). |
| <li> | يمثل عنصرًا داخل القائمة. |
| <table> | ينشئ جدولًا. |
| <tr> | يمثل صفًا داخل الجدول. |
| <th> | يمثل خلية عنوان داخل الجدول. |
| <td> | يمثل خلية بيانات داخل الجدول. |
| <form> | يستخدم لإنشاء نموذج لإرسال البيانات. |
| <input> | ينشئ حقل إدخال مثل النص أو كلمة المرور. |
| <button> | ينشئ زرًا يمكن الضغط عليه. |
| <div> | عنصر عام يستخدم لتقسيم الصفحة وتنظيمها. |
| <span> | عنصر صغير يستخدم لتنسيق جزء من النص. |
Examens
Sujets des compositions — cliquez sur une image pour agrandir
Composition 1er trimestre
Informatique — 1AS
Composition 2ème trimestre
Informatique — 1AS
Composition 3ème trimestre
Informatique — 1AS
Corrections
Corrigés des compositions — cliquez sur une image pour agrandir
Correction 1er trimestre
Informatique — 1AS
Correction 2ème trimestre
Informatique — 1AS
Correction 3ème trimestre
Informatique — 1AS
