تعلم لغة html: بنية صفحة ويب Web Page Structure وأدوات التصميم
في هذا الدرس الأول من دورة أو كورس تصميم المواقع، سنتعرف على صفحة ويب وبنيتها مع العناصر المكونة لهذه البنية.
تستعمل مجموعة من العناصر لوصف بنية صفحة ويب:
لنقم بنظرة تفحصية للعناصر المكونة للمثال الذي أعطيناه اعلاه:
هناك مجموعة من العناصر التي تكون هذه الصفحة ولديها وسم الفتح ووسم الإغلاق لكل منها.
الوسوم تلعب دور الحاويات التي تعطي معلومات حول ما يوجد بداخلها بين وسمي الفتح والإغلاق.
والعناصر المكونة لهذه الصفحة هي:
يبدأ برمز أصغر من من اليسار يليه الحرف (هنا p يدل على فقرة Paragraph) ثم يليه رمز الإنهاء وهو رمز أكبر من.
يبدأ برمز أصغر من يليه سلاش ثم الحرف ثم رمز أكبر من.
ما يميز وسم الفتح ووسم الغلق هو السلاش الذي يضاف للأخير. إذن لا تنسوا اضافة وسم الغلق بسلاش دائما في نهاية كل وسم html.
تقدم الخصائص معلومات إضافية حول العناصر. وتتكون من عنصرين:
الإسم Name
القيمة Value
مثال:
اضفنا خاصية اللغة العربية للفقرة p وهي اللغة. الخاصية إسمها lang وقيمتها Ar-ar
يمكنكم معرفة كود تصميم موقع جوجل بنفس الطريقة:
الدرس بالفيديو
العناصر 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>
<head>
<title></title>
</head>
<body>
</body>
</html>
إنشاء صفحة ويب html وتجربتها
إنشاء صفحة ويب يمر عبر الخظوات التالية:
- فتح أداة تعديل النصوص، في حالتي أنا استعمل برنامج نوتباد++ Notepa
- كتابة نص html
- حفظ بصيغة html
- فتح الملف مع متصفح لمشاهدته
كيف تعرف اللغة المستعملة في بناء أية صفحة ويب
بفتح الصفحة التي أنشأناها، يكفي النقر على يمين فأرة الحاسوب ثم إظهار الكوديمكنكم معرفة كود تصميم موقع جوجل بنفس الطريقة:
الكود
درس رائع جدا استمرو
ردحذفشكرا على تشجيعك
حذف