تعلم لغة html: بنية صفحة ويب Web Page Structure وأدوات التصميم

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

الدرس بالفيديو

العناصر Elements المكونة لبنية صفحة ويب html web page


تستعمل  مجموعة من العناصر لوصف بنية صفحة ويب:


لنقم بنظرة تفحصية للعناصر المكونة للمثال الذي أعطيناه اعلاه:

هناك مجموعة من العناصر التي تكون هذه الصفحة ولديها وسم الفتح ووسم الإغلاق لكل منها.

الوسوم تلعب دور الحاويات التي تعطي معلومات حول ما يوجد  بداخلها بين وسمي الفتح والإغلاق.

والعناصر المكونة لهذه الصفحة هي:

  • وسم الفتح  <html>  يدل على أن اي شيء بينه وبين وسم الغلق  </html> هو كود html
  • <body> كل ما يوجد بينها وبين وسم الإغلاق  </body> يعتبر من محتوى الصفحة والذي يجب إظهاره في نافذة المتصفح
  • الكلمات بين  <h1> و  </h1> هي عنوان رئيسي
  • بين <h2> و </h2> يعتبر عنوان ثانوي
  • فقرة نصية تظهر بين <p2> و </p2>
  • وسم الإغلاق </body>   يدل على نهاية ما يجب اظهاره على المتصفح
  • وسم الإغلاق   </html>  يدل على نهاية كود html


شرح مفصل لعناصر وسم html tag

وسم الفتح Opening Tag


يبدأ برمز أصغر من من اليسار يليه الحرف (هنا p  يدل على فقرة Paragraph) ثم يليه رمز الإنهاء وهو رمز أكبر من.

وسم الغلق Closing Tag


يبدأ برمز أصغر من يليه سلاش ثم الحرف ثم رمز أكبر من.

ما يميز وسم الفتح ووسم الغلق هو السلاش الذي يضاف للأخير. إذن لا تنسوا اضافة وسم الغلق بسلاش دائما في نهاية كل وسم html.


الخصائص Attributes  تخبرنا بالمزيد من المعلومات حول العناصر

تقدم الخصائص معلومات إضافية حول العناصر. وتتكون من عنصرين:
الإسم Name
القيمة Value

مثال:


اضفنا خاصية اللغة العربية للفقرة p  وهي اللغة. الخاصية إسمها  lang وقيمتها Ar-ar

أهم الوسوم المستعملة في صفحة html

Body

يتم وضع جميع العناصر التي يظهرها المتصفح مثل الصور، النصوص...

Title

عنوان صفحة الويب والذي يظهر في الشريط الأفقي للمتصفح

Head

يحتوي على مجموعة من الروابط والمعلومات الخاصة بالصفحة مثل اللغة (عربية، انجليزية).


كود لمثال صفحة ويب وعناصرها:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

إنشاء صفحة ويب html وتجربتها

إنشاء صفحة ويب يمر عبر الخظوات التالية:

  1. فتح أداة تعديل النصوص، في حالتي أنا استعمل برنامج نوتباد++  Notepa
  2. كتابة نص html
  3. حفظ بصيغة html
  4. فتح الملف مع متصفح لمشاهدته

كيف تعرف اللغة المستعملة في بناء أية صفحة ويب

بفتح الصفحة التي أنشأناها، يكفي النقر على يمين فأرة الحاسوب ثم إظهار الكود

يمكنكم معرفة كود تصميم موقع جوجل بنفس الطريقة:

الكود