إنشاء أول صفحة ويب

الصّفحة الأولى

آخر تحيين: 04-01-2015

الوُسوم الإستئناس بلغة HTML5


بما أن الدروس موجهة للمبتدئين ، فلنبدأ إذاً من " أمّ البدايات " . و نرى أقصر شيفرة HTML5 التي تمكننا من إظهار صفحتنا على متصفِّح الويب


<!DOCTYPE html>
   <title>أول صفحة على موقعي</title>
   <p>مرحى يا عالم ، هذه أول صفحة ويب أنجزُها</p>
مشاهدة النتيجة

لمشاهدة منتوج هذه الشيفرة على متصفّح الويب ، أدعوكم لفتح برنام تحرير النصوص (++Notepad أو غيره) ثم افتحوا صفحة جديدة كما تبين الصورة أسفله .


  1. فتح صفحة جديدة
  2. اختيار الترميز ( encoder en utf8 )
  3. اختيار لغة HTML
  4. انسخوا شيفرة HTML5 السابقة و ألصقوها في الصفحة المفتوحة
  5. لتسجيل الصفحة . أ نقر على : Fichier . ثم ، Enregistrer-sous
    ستفتح لديك نلفذة جديدة ، كالتالي :


  6. - أكتب إسم الصفحة (إختر الإسم الذي تريد دون ترك أي فراغ إذا كان الإسم مركّبا . أنا إخترت إسم page1).
    - تأكد من الإمتداد أسفل الإسم . يجب أن يكون كالتالي (Hyper Text Markup Langage file*.html;*.htm)
    - ثم انقر . Enregistrer. و احفظ صفحتك في المكان الذي يحلو لك . المهم أن تتذكر أين و ضعتها
    - افتح الملف حيث حفظت الصفحة ، ستجد أيقونة شبيهة بواحدة أسفله حسب المتصفح الذي تستخدمه .



- لمشاهدة صفحتك : انقر مرتين على الأيقونة
- لإجراء تعديلات ، حذف أو إضافات للصفحة . ضع مؤشِّر الفأرة على الأيقونة ، ثم انقر يمين الفأرة : ثم اختر :++Edit with Notpad " أو ،++Ouvrir avec Notpad

إذا مرّ كل شيء على ما يرام ، ستظهر لكم الصفحة تحتوي على :
ـ عنوان : "أول صفحة على موقعي"
ـ و على محتوى : "مرحى يا عالم ، هذه أول صفحة ويب أنجزُها"

هنيئا ، لقد تمكّنتم من إنشاء أول صفحة ويب

سأضع أمام أعينكم الشيفرة السابقة التي أنشأنا بواسطتها صفحتنا


<!DOCTYPE html>
   <title>أول صفحة على موقعي</title>
   <p>مرحى يا عالم ، هذه أول صفحة ويب أنجزُها</p>

لا تعيروا اهتماما كبيرا لمحتوى الشيفرة حاليا . سنرى كل شيء بتفصيل في أوانه ، لكن هذا لا يعفيني من شرح مكوناتها

- في السطر الأول من الشيفرة لدينا ما يسمّى ب DOCTYPE <!DOCTYPE html> : هو عبارة عن تصريح يخبر المتصفّحين بأن الملف الذي بين أيدينا هو ملف HTML
- ثم يليه عنوان صفحتنا و الذي يجب كتابته بين <title>...</title> . بهذه الطريقة نساعد محرّكي البحث ك(google) مثلا ، لإيجاد صفحتنا بكل سهولة
- ثم يأتي محتوى الصفحة

هذه الشيفرة كافية تماما لإنشاء صفحة الويب ، لكن يمكننا فعل أحسن من هذا التنظيم . لهذا سنقسّمها إلى جزئين لفصل التفاصيل التي تتعلق برأس الصفحة كالعنوان مثلا عن محتوى الصفحة :

  1. - الرّأس : head (باللغة الإنجليزية) يتضمن العنوان و معلومات أخرى ستتعرفون عليها لاحقا
  2. - الجسد : body فيه نكتب كل ما يتعلق بمحتوى صفحتنا

سنحصل على هذه الشّيفرة


<!DOCTYPE html>
<html>
  <head>
      <title> أول صفحة على موقعي </title>
  </head>

  <body>
      <p> مرحى يا عالم ، هذه أول صفحة ويب أنجزُها </p>
  </body>
</html>
مشاهدة النتيجة

كل هاته الأجزاء من شيفرتنا <html></html> ,<head></head>,<title></title>,<body></body>, <p></p> تسمّى وُسوم (tags)
بقيت معلومة مهمة أخيرة ، نضيفها إلى الشيفرة السابقة لتصبح صفحتنا تحترم معايير لغة HTML و هي charset="utf-8" و نضيفها للوسم الأحادي <meta>
charset : تدلّ الحاسوب على طريقة ترميز النّص ، توجد طرق عديدة للترّميز منها : Windows-1252(يسمى أيضا Ainsi) و ISO 8859-1 و ASCII و utf-8 ... إلخ ، لن ندخل في التفاصيل ، القيمة التي تهمّنا هي utf-8 لأنها طريقة ترميز موحّدة و تمكّننا من إظهار الخط العربي و الفرنسي و الصيني ... بشكل صحيح .

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title> أول صفحة على موقعي </title>
  </head>
  <body>
     <p> مرحى يا عالم ، هذه أول صفحة ويب أنجزُها </p>
  </body>
</html>
مشاهدة النتيجة

لغة HTML هي لغة الوسوم . لقد رأينا بعضها في هذه الشيفرة ، و كل ما سنفعله خلال هذه الرّحلة هو التعرّف على المزيد من الوسوم