الدرس: إنشاء موقع إلكتروني بلغة HTML
من الوحدة الرابعة: البرمجة بلغة ترميز النص التشعبي — مادة التقنية الرقمية 1 (السنة الأولى المشتركة)
<h1> وفقرة <p> ورابط <a>.<br>.تعتمد برمجة المواقع الإلكترونية على ثلاث تقنيات رئيسية تعمل معًا لبناء الموقع من حيث الشكل والمحتوى والتفاعل. ويمكن تشبيه الموقع الإلكتروني بالمنزل لفهم الأدوار بسهولة:
لغة HTML هي الهيكل العظمي للموقع، فهي تحدد الأقسام الأساسية مثل العناوين والفقرات والقوائم والصور. بدون HTML لا توجد صفحة أساسًا.
تشبيهها بالمنزل: HTML = تحديد عدد الغرف + أماكن الشبابيك + الصالة + دورات المياه + الجدران + الأساس.
<h1>عنوان الصفحة</h1>
<p>هذه فقرة تعريفية بالموقع.</p>لغة CSS تستخدم لتنسيق الموقع وتغيير مظهره مثل الألوان، حجم النصوص، خطوط الكتابة، تباعد العناصر، وتجميل الشكل الخارجي للصفحة.
تشبيهها بالمنزل: CSS = لون الجدران، تصميم الأثاث، تنسيق الغرف، توزيع الإضاءة، الستائر، الديكور.
h1{
color: #0a1946;
font-size: 32px;
}لغة JavaScript تضيف التفاعل للموقع مثل الأزرار التي تعمل، عرض الرسائل، تغيير المحتوى تلقائيًا، تسجيل النقرات، والتحكم بالصفحة أثناء الاستخدام.
تشبيهها بالمنزل: JavaScript = الأشخاص الذين يعيشون في المنزل، يتحركون ويستخدمون الأشياء ويقومون بالأعمال.
document.getElementById("btn").onclick = function(){
alert("مرحباً!");
}مثل المنزل تمامًا: لا يكفي وجود الجدران، ولا يكفي الأثاث وحده، ولا يكفي وجود أشخاص بدون منزل منظم… الثلاثة معًا = موقع متكامل.
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «برمجة المواقع الإلكترونية — العناصر الثلاثة الأساسية»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «برمجة المواقع الإلكترونية — العناصر الثلاثة الأساسية» هو:
HTML هي اختصار لـ: HyperText Markup Language لغة توصيف النصوص الفائقة وهي ليست لغة برمجة، بل لغة وصف وبناء وهيكلة المحتوى داخل صفحة الويب. معنى "لغة توصيف": تعني أن HTML لاتقوم بتنفيذ عمليات حسابية ولا منطقية، لكنها تصف وتحدد: ما هو عنوان الصفحة ما هي الفقرات ما هي الصور ما هي الروابط أين تبدأ وأين تنتهي كل قطعة محتوى تقسيم الصفحة إلى أقسام رئيسية وفرعية بعبارة ثانية: HTML هي اللغة التي تعطي شكل المحتوى وهيكل الصفحة بدون أي ألوان أو تصميم أو حركة. الذي يراه الزائر في المتصفح.
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «ماهو ال HTML فعلًا؟»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «ماهو ال HTML فعلًا؟» هو:
تتكوّن الوسوم في HTML من عدة أنواع أساسية، ويجب التمييز بينها عند إنشاء صفحة الويب. فيما يلي الأنواع الأكثر استخدامًا:
هو التاق الذي يبدأ العنصر، ويكتب داخل أقواس زاوية.
<p>قد يحتوي على سمات (Attributes) مثل:
<p class="info">
هو التاق الذي ينهي العنصر، ويكتب بنفس اسم التاق الافتتاحي ولكن يسبق بشرطة مائلة.
</p>بدون هذا التاق لن يعرف المتصفح أين ينتهي العنصر.
هو مجموعة الوسمين والمحتوى بينهما.
<p>هذا نص داخل فقرة</p>العنصر = Opening tag + Content + Closing tag
وهو النص أو العناصر التي تظهر داخل الوسم.
هذا نص داخل العنصركل ما بين <p> و </p> يُعتبر محتوى.
وسوم لا تحتوي على محتوى ولا تحتاج تاق إغلاق.
<br>
<img src="image.png">
<hr>تستخدم لإضافة عناصر مستقلة مثل الصور أو الأسطر الفاصلة.
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «أنواع الوسوم في HTML»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «أنواع الوسوم في HTML» هو:
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «أهم الوسوم الأساسية في صفحة HTML»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «أهم الوسوم الأساسية في صفحة HTML» هو:
يتكوّن هيكل الصفحة القياسي من عنصر الجذر <html> ويحتوي على:
الرأس <head> (معلومات عن الصفحة) والجسم
<body> (المحتوى الذي يظهر للمستخدم).
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>موقعي الأول</title>
</head>
<body>
محتوى الصفحة هنا…
</body>
</html><!DOCTYPE html> يعرّف نوع المستند (HTML5). <meta charset="utf-8"> مهم لدعم اللغة العربية بشكل صحيح.
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «بنية الصفحة الأساسية»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «بنية الصفحة الأساسية» هو:
ما الموضوع الرئيس في هذا الجزء؟
أي خيار يرتبط مباشرة بمحور «الوسوم الأساسية للمحتوى»؟
أي عبارة صحيحة وفق شرح هذا المحور؟
الهدف من دراسة «الوسوم الأساسية للمحتوى» هو:
تأكد من اختيار الترميز UTF-8 عند الحفظ حتى تظهر اللغة العربية بدون رموز غريبة.
<!DOCTYPE html> ثم عناصر <html> و <head> و <body>.h1–h6، الفقرات <p>، الروابط <a>، والمسافة الفارغة <br>.أكتب صفحة HTML بسيطة تحتوي على العناصر التالية:
<head> باستخدام <title> ويكون مكتوب فيه: التقنية الرقمية<h1> يحتوي على اسمك واسم الدرس.<h2> يشرح موضوعك المفضل في التقنية.<p> تتحدث فيها عن سبب اهتمامك بهذا الموضوع.<a> ينقلك إلى موقع أو فيديو يشرح هذا الموضوع.<ul> فيها 3 فوائد للموضوع.<ol> فيها 3 خطوات لتعلمه.