من الوحدة الرابعة: البرمجة بلغة ترميز النص التشعبي — مادة التقنية الرقمية 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 من عدة أنواع أساسية، ويجب التمييز بينها عند إنشاء صفحة الويب. فيما يلي الأنواع الأكثر استخدامًا:
هو التاق الذي يبدأ العنصر، ويكتب داخل أقواس زاوية.
<p>قد يحتوي على سمات (Attributes) مثل:
<p class="info">
هو التاق الذي ينهي العنصر، ويكتب بنفس اسم التاق الافتتاحي ولكن يسبق بشرطة مائلة.
</p>بدون هذا التاق لن يعرف المتصفح أين ينتهي العنصر.
هو مجموعة الوسمين والمحتوى بينهما.
<p>هذا نص داخل فقرة</p>العنصر = Opening tag + Content + Closing tag
وهو النص أو العناصر التي تظهر داخل الوسم.
هذا نص داخل العنصركل ما بين <p> و </p> يُعتبر محتوى.
وسوم لا تحتوي على محتوى ولا تحتاج تاق إغلاق.
<br>
<img src="image.png">
<hr>تستخدم لإضافة عناصر مستقلة مثل الصور أو الأسطر الفاصلة.
يتكوّن هيكل الصفحة القياسي من عنصر الجذر <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"> مهم لدعم اللغة العربية بشكل صحيح.
<body>:
<h1> مثل: أهلاً بكم في موقعي.<p> تشرح فكرة موقعك.<a> لموقع تعجبك زيارته.تأكد من اختيار الترميز UTF-8 عند الحفظ حتى تظهر اللغة العربية بدون رموز غريبة.
أجب عن الأسئلة التالية ثم اضغط إرسال. يظهر النموذج مباشرة لدى المعلم.
<!DOCTYPE html> ثم عناصر <html> و <head> و <body>.h1–h6، الفقرات <p>، الروابط <a>، والمسافة الفارغة <br>.أكتب صفحة HTML بسيطة تحتوي على العناصر التالية:
<head> باستخدام <title> ويكون مكتوب فيه: التقنية الرقمية<h1> يحتوي على اسمك واسم الدرس.<h2> يشرح موضوعك المفضل في التقنية.<p> تتحدث فيها عن سبب اهتمامك بهذا الموضوع.<a> ينقلك إلى موقع أو فيديو يشرح هذا الموضوع.<ul> فيها 3 فوائد للموضوع.<ol> فيها 3 خطوات لتعلمه.