تعلم برمجة المواقع الاكترونية A-1
الدرس الأول: تعلم لغة HTML من الصفر - مقدمة شاملة مع إعداد الأدوات
تصميم المواقع
January 29, 2025
الدرس الأول: تعلم لغة HTML من الصفر - مقدمة شاملة مع إعداد الأدوات
مرحبًا بك في أول درس من سلسلة تعلم لغة HTML من الصفر حتى الاحتراف! إذا كنت مبتدئًا تمامًا في مجال تطوير الويب، فهذا الدرس هو نقطة البداية المثالية لك. سنأخذك خطوة بخطوة لفهم أساسيات لغة HTML، أهميتها، وكيفية استخدامها لإنشاء صفحات ويب بسيطة. بالإضافة إلى ذلك، سنتعلم كيفية إعداد الأدوات اللازمة مثل برنامج Visual Studio Code (VS Code) لكتابة الأكواد بسهولة واحترافية.
ما هي لغة HTML؟
لغة HTML هي اختصار لـ HyperText Markup Language، وهي اللغة الأساسية المستخدمة لإنشاء صفحات الويب.
- HTML ليست لغة برمجة، بل هي لغة وصفية تُستخدم لتحديد هيكل ومحتوى صفحات الويب مثل النصوص، الصور، الروابط، والجداول.
- تُعتبر HTML الأساس الذي تُبنى عليه جميع مواقع الإنترنت، حيث تعمل على وصف العناصر الموجودة في الصفحة وكيفية عرضها.
أهمية HTML
- إنشاء صفحات ويب: HTML هي اللبنة الأولى لأي موقع ويب.
- سهولة التعلم: HTML لغة بسيطة وسهلة الفهم، مما يجعلها نقطة انطلاق مثالية للمبتدئين.
- التوافق مع التقنيات الأخرى: تُستخدم HTML مع لغات أخرى مثل CSS لتنسيق الصفحات، وJavaScript لإضافة التفاعلية.
كيف تعمل HTML؟
تعمل HTML باستخدام الوسوم (Tags)، وهي تعليمات تُكتب داخل أقواس زاوية < >.
كل وسم له وظيفة محددة، مثل عرض النصوص كعناوين أو فقرات، أو إدراج الصور والروابط.
مثال بسيط على وسم HTML:
<h1>مرحبًا بك في تعلم HTML!</h1>
هذا الكود يعرض النص "مرحبًا بك في تعلم HTML!" كعنوان رئيسي.
إعداد الأدوات اللازمة
1. تحميل وتثبيت برنامج Visual Studio Code
برنامج Visual Studio Code (VS Code) هو محرر نصوص قوي ومجاني يُستخدم على نطاق واسع لكتابة الأكواد البرمجية.
تحميل البرنامج:
- قم بزيارة الموقع الرسمي لـ Visual Studio Code.
- اختر النسخة المناسبة لنظام التشغيل الخاص بك (Windows، macOS، أو Linux).
تثبيت البرنامج:
- بعد تحميل الملف، قم بفتحه واتبع خطوات التثبيت.
- أثناء التثبيت، تأكد من تحديد خيار "Add to PATH" لتسهيل استخدام البرنامج.
فتح البرنامج:
- بعد التثبيت، افتح البرنامج وستظهر لك واجهة المستخدم البسيطة.
2. إنشاء ملف HTML باستخدام VS Code
بعد تثبيت البرنامج، اتبع الخطوات التالية لإنشاء أول ملف HTML:
-
إنشاء مجلد المشروع:
- قم بإنشاء مجلد جديد على جهازك لتخزين ملفات المشروع، مثل HTML_Project.
-
فتح المجلد في VS Code:
- افتح برنامج VS Code، ثم اختر File > Open Folder وحدد المجلد الذي أنشأته.
-
إنشاء ملف HTML:
- انقر بزر الماوس الأيمن داخل المجلد في الشريط الجانبي لـ VS Code، ثم اختر New File.
- قم بتسمية الملف بـ index.html.
-
كتابة الكود:
- افتح الملف واكتب الكود التالي:
حفظ الملف:
-
- اضغط على Ctrl + S (أو Command + S على macOS) لحفظ الملف.
3. عرض الملف في المتصفح
- انقر بزر الماوس الأيمن على الملف index.html داخل VS Code، ثم اختر Open with Default Browser (إذا كنت قد أضفت إضافة Live Server).
- أو ببساطة افتح الملف يدويًا عن طريق النقر عليه مرتين في مستكشف الملفات.
شرح الكود
<!DOCTYPE html>: يُخبر المتصفح بأننا نستخدم HTML5، وهو أحدث إصدار من HTML.<html>: الوسم الرئيسي الذي يحتوي على جميع محتويات الصفحة.<head>: يحتوي على معلومات غير مرئية للمستخدم، مثل عنوان الصفحة.<title>: يُحدد عنوان الصفحة الذي يظهر في شريط المتصفح.<body>: يحتوي على المحتوى المرئي للمستخدم، مثل النصوص والصور.
وسوم HTML الأساسية
1. العناوين (Headings)
تُستخدم الوسوم <h1> إلى <h6> لإنشاء عناوين بترتيب تنازلي من حيث الحجم والأهمية:
<h1>هذا عنوان رئيسي</h1><h2>هذا عنوان فرعي</h2><h3>هذا عنوان أقل أهمية</h3>
2. الفقرات (Paragraphs)
تُستخدم الوسم <p> لإنشاء فقرة نصية:
<p>هذه فقرة نصية تحتوي على معلومات.</p>
3. الروابط (Links)
تُستخدم الوسم <a> لإنشاء روابط تشعبية:
<a href="https://www.google.com">اذهب إلى جوجل</a>
4. الصور (Images)
تُستخدم الوسم <img> لإضافة الصور:
<img src="image.jpg" alt="وصف الصورة">
5. القوائم (Lists)
قائمة مرتبة:
<ol> <li>العنصر الأول</li> <li>العنصر الثاني</li></ol>
قائمة غير مرتبة:
<ul> <li>العنصر الأول</li> <li>العنصر الثاني</li></ul>
تمرين عملي
حاول إنشاء صفحة HTML تحتوي على العناصر التالية:
✅ عنوان رئيسي باستخدام <h1>.
✅ فقرة تحتوي على وصف قصير عن نفسك.
✅ رابط لموقعك المفضل.
✅ صورة من اختيارك.
✅ قائمة مرتبة تحتوي على 3 أهداف تريد تحقيقها.
ما التالي؟
في الدرس القادم، سنتعرف على المزيد من الوسوم المتقدمة في HTML، مثل الجداول والنماذج، وسنتعلم كيفية تنسيق الصفحات باستخدام CSS. استعد لتطبيق عملي ممتع ومثير!
📌 نصيحة: استمر في التجربة والتطبيق العملي. HTML لغة ممتعة وسهلة، وستتعلمها بسرعة إذا مارست بانتظام. 🚀
التعليقات
لا يوجد اي تعليقات
يرجى تسجيل الدخول لترك تعليق
