بالبداية خلينا نسأل السؤال التالي : من وين تبدأ طريقك في تطوير الويب؟
أهلاً فيك 👋
أنا محمد من قناة Mohammed Code | محمد كود، وفي هالمقال رح أمشي معك خطوة بخطوة عشان تبدأ أول خطوة حقيقية في عالم Front-End Development عن طريق تعلم HTML.
لو حاب تتعلم البرمجة، أو حابب تحديداً مجال (Front-End)، فأول لغة تعرفها هي لغة HTML.
ولغة HTML مش لغة برمجة بالمعنى التقليدي، ولكنها أساس أي موقع تشوفه على الإنترنت.
لو بدك تتعلم هاي اللفة بالفيديو، تقدر تشوف شرحها على قناتي في يوتيوب، وفي هذا المقال رح تلاقي الكود المكتوب والتفاصيل اللي تساعدك تطبق عملياً على جهازك
أولا: ما هي HTML؟
HTML اختصار لـ: HyperText Markup Language
وزي ما قلنا إنها تعبرلغة توصيف، مش لغة برمجة.
- HyperText: تعني نص يتم فيه وضع روابط وتنقل بين صفحات.
- Markup Language: يعني لغة تَعلِيم أو توصيف، نستخدم فيها Tags عشان نحدد عناصر الصفحة (عناوين، صور، فقرات، أزرار…).
والمتصفحات (Browser) مثل Chrome أو Edge يقرأ ملف الـ HTML، ويفهمها من خلال الـ Tags كيف بيتم عرض الصفحة للمستخدم.
ثانيا: هل HTML لغة برمجة؟
HTML ليست لغة برمجة، لأنها:
فيها منطق البرمجة
- if
- else
- loops
لكن دورها الأساسي هو:
إخبار المتصفح ما هو هذا العنصر
(عنوان – فقرة – صورة – رابط…)
أما التفاعل والمنطق، فهذا يأتي لاحقًا باستخدام JavaScript.
ثالثاً: كيف يتعامل المتصفح مع HTML؟
لما تفتح موقع، بيحدث التالي:
- المتصفح يطلب ملف الـ HTML من السيرفر.
- يتم قراءة الـ Tags سطر سطر.
- يتم بناء شيء اسمه DOM (Document Object Model).
- يعرض لك الصفحة بشكل بصري (اللي أنت تشوفه في الشاشة).
الـ DOM تقدر تعتبره نسخة “مُنظَّمة” من صفحتك، فيها كل العناصر، وتتعامل معها لاحقاً باستخدام CSS و JavaScript.
رابعاً: ماذا تحتاج لتبدأ عملياً؟
عشان تكتب أول سطر HTML في حياتك، تحتاج فقط:
- محرر نصوص (Text Editor): أنصحك تستخدم VS Code لأنه
– مجاني
– قوي
– مناسب جداً للمبتدئين والمحترفين. - متصفح (Browser): مثل
– Google Chrome
– Microsoft Edge
هذا كل شيء، ما في أي شيء معقد في البداية.
أول ملف HTML لك – Hello World
خلينا بالبداية ننشأ ملف جديد على جهازك باسم
index.htmlهذا الملف هيكون أول صفحة الويب لك.
الهيكل الأساسي لصفحة HTML
والصفحة عادة يكون لها هيكل أساسي (structure) ثابت في كل المواقع، يتكون من التاقات:
- html
- head
- body
فكرة الهيكل كالتالي (رح نشرحه بالتفصيل في المقال القادم في السلسلة):
- تاق html هو سطر تعريف يقول للمتصفح إن هاي الصفحة HTML5، وهو الجذر (root) لكل الصفحة. يتم وضه كل شيء بداخلها.
- تاق head وفيه بيتم وضع معلومات عن الصفحة (محتوى ما بظهر للمستخدم مباشرة في المتصفح) مثل:
– عنوان الصفحة (title) اللي يظهر في التبويب
– ترميز اللغة
– روابط ملفات CSS و JavaScript لاحقاً - تاق body بيتم وضع كامل المحتوى اللي المستخدم هيشوفه على المتصفح:
– عناوين
– نصوص
– صور
– أزرار
– روابط
– إلخ…
طبعا أنا نزلت فيديو بهذا المقال على قناتي، رح تلاقي تطبيق عملي لكتابة أول ملف HTML وطريقة فتحه في المتصفح خطوة بخطوة، وتقدر ترجع لهذا المقال عشان تشوف الشرح الكتابي وترجع له وقت ما تحتاج.
خريطة طريقك بعد HTML
HTML هي الخطوة الأولى في طريق Front-End Developer.
الترتيب المنطقي هو:
- HTML – هيكل المحتوى (Structure).
- CSS – شكل وتصميم الموقع (Design & Styling).
- JavaScript – التفاعل والحركة والـ Logic (Interactivity & Logic).
بعد ما تتقن الأساسيات، تقدر تنتقل لأطر عمل (Frameworks) مثل React، وتبدأ تبني مشاريع حقيقية.
ماذا ستتعلم في السلسلة هذه؟
- فهم الهيكل الأساسي لبناء صفحة HTML.
- الـ Tags المهمة اللي هتحتاجها كبداية.
- كيف تنظم صفحتك بطريقة صحيحة.
- كيف تجهز نفسك لـ CSS و JavaScript.
في المقال الثاني من السلسلة، رح ندخل بشكل أعمق في “هيكل صفحة HTML” ونتكلم بالتفصيل عن التاقات:
- html
- head
- body
وكيف تكتب أول صفحة HTML حقيقية لك بطريقة صحيحة.
لا تنسَ:
- تابع قناة Mohammed Code | محمد كود عشان تشوف التطبيق العملي بالفيديو.
- احفظ هذا المقال وارجع له لما تحتاج تراجع الأساسيات.
- شارك المقال مع أي شخص حاب يبدأ يتعلم تطوير الويب من الصفر.