الرئيسية › الدروس › صفحات الويب: HTML

دروس هذا الفصل

1. هيكل الصفحة
2. النصّ والقوائم والروابط والصور
3. الجداول والاستمارات

الدرس 11.1 : هيكل الصفحة

8 دقيقة

صفحة الويب تتكتب بـ HTML (HyperText Markup Language). موش لغة برمجة: هي لغة balises تصف المحتوى. الـ navigateur يقرا الـ balises ويرسم الصفحة.

الـ balises

الـ balise تتكتب بين < و >. أغلبهم يجيو زوز زوز: balise ouvrante <p> وbalise fermante </p>. بينهم المحتوى: <p>Bonjour</p>.

الهيكل

• <html> تحيّط الصفحة كلها.
• <head> فيها معلومات على الصفحة، منها <title>: العنوان اللي يظهر في الـ onglet.
• <body> فيها كل اللي يتشاف: عناوين <h1> لـ <h6>، فقرات <p>…

انتبه : الـ balises لازم تكون متداخلة صحيح: آخر وحدة تتحلّ هي أوّل وحدة تتسكّر. <p><strong>Texte</p></strong> غالط.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
  </head>
  <body>
    <h1>Un titre</h1>
    <p>Un paragraphe.</p>
  </body>
</html>

مثال

بدّل النصّ في الخانة اللي على اليسار: الصفحة اللي على اليمين تتبدّل وحدها.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bienvenue à Carthage</h1>
    <h2>Un sous-titre</h2>
    <p>Voici ma première page web.</p>
    <p>Chaque paragraphe commence sur une nouvelle ligne.</p>
  </body>
</html>

الدرس 11.2 : النصّ والقوائم والروابط والصور

9 دقيقة

الـ HTML عندو balises لتقريبا كل شيء تشوفو في صفحة.

• التأكيد: <strong> (غليظ)، <em> (مائل). <br> تنزّل لسطر جديد (ما عندهاش balise fermante).
• القوائم: <ul> (بنقاط) ولا <ol> (مرقّمة)، مع <li> لكل عنصر.
• رابط: <a href="adresse">texte</a>. الـ attribut href يعطي الوجهة.
• صورة: <img src="logo.png" alt="Logo">. src يعطي الملف، و alt النصّ البديل.

نصيحة : الـ attribut يتكتب في الـ balise ouvrante بالشكل nom="valeur". balise تنجم تكون عندها برشا.

مثال

زيد عنصر رابع للقائمة، وبعد بدّل عنوان الرابط.

<h2>Mes villes préférées</h2>
<ul>
  <li>Tunis</li>
  <li>Sfax</li>
  <li>Bizerte</li>
</ul>
<p>Plus d'infos sur <a href="https://fr.wikipedia.org/wiki/Tunisie">la Tunisie</a>.</p>
<p>Un texte en <strong>gras</strong> et en <em>italique</em>.<br>Une nouvelle ligne.</p>

الدرس 11.3 : الجداول والاستمارات

9 دقيقة

جدول

الجدول يتبني سطر بسطر: <table> تحيّط الكل، <tr> (table row) سطر، <th> خانة عنوان (غليظة) و <td> (table data) خانة عادية.

استمارة

الـ <form> تخلّي المستعمل يدخل معلومات. الـ balise <input> تصنع خانة: الـ attribut type يختار النوع (text، password، number، submit…). و <label> يعطي اسم للخانة.

نصيحة : خانة type="password" تخبّي الحروف اللي تتكتب (تظهر كنقاط).

مثال

زيد سطر ثالث للجدول بتلميذ جديد.

<table border="1">
  <tr><th>Nom</th><th>Note</th></tr>
  <tr><td>Amira</td><td>16</td></tr>
  <tr><td>Sami</td><td>14</td></tr>
</table>
<form>
  <p><label>Prénom : <input type="text" name="prenom"></label></p>
  <p><label>Mot de passe : <input type="password" name="mdp"></label></p>
  <input type="submit" value="Envoyer">
</form>

تدرّب مجانًا

كل درس فيه 3 تمارين مجانية مع تلميحات باش تطبّق الفصل هذا مع هنّيبوت.

← الفصل اللي قبل : الدوال والإجراءات · الفصل اللي بعد : التنسيق: CSS →

كل الفصول · شوف فروض 2 تكنولوجيا المصلّحة

الدروس كتبناها لـ Mission Carthage على أساس البرنامج الرسمي. الأستاذ متاعك يبقى المرجع.