هل تريد إنشاء أول صفحة ويب لك لكن لا تعرف من أين تبدأ؟ لا تقلق، فـHTML هي لغة بسيطة تُستخدم؛ لبناء هيكل المواقع الإلكترونية، ويمكنك تعلُّم الأساسيات منها في دقائق معدودة فقط. في هذا الدليل، سنتعلم معًا: ما هو HTML باختصار شديد، كما سنتعلم كيفية كتابة أول كود HTML ببساطة، إلى جانب معرفة كيف تعرض صفحتك في المتصفح دون برامج معقّدة.

وللعلم، كل ما تحتاج إليه هو فقط محرر نصوص بسيط ومتصفح ويب؛ ليكون نقطة انطلاق لكل مبتدئ يرغب في فهم أساسيات تصميم المواقع وتطويرها.

ما هو HTML؟

كلمة HTML اختصار لعبارة (HyperText Markup Language)، وتُعد لغة تُستخدم لوضع الهيكل والمحتوى لأي موقع إلكتروني، وهي الركيزة الأساسية لإنشاء صفحات الويب وتحديد مكوناتها. ولا تُعد HTML لغة برمجة بالمعنى التقليدي مثل لغة Python كمثال؛ لأنها لا تحتوي منطق أو شروط أو حلقات تكرار، بل لغة ترميز تُستخدم؛ لتنظيم المحتوى داخل الصفحة، مثل: النصوص، العناوين، الصور، الروابط، الجداول، والنماذج.

تعمل لغة إتش تي إم إل عن طريق استخدام عناصر (Tags) محاطة بزوايا < >، وكل عنصر له وظيفة محددة، مثل عرض عنوان أو إدراج صورة أو إنشاء رابط. وبهذه العناصر، يُبنى الهيكل الأساسي لأي صفحة ويب على الإنترنت.

كيف يمكنني إنشاء صفحة ويب باستخدام HTML؟

إنشاء ملف HTML هو خطوة سهلة ولا تتطلب أي أدوات معقّدة، فكل ما تحتاج إليه هو فقط محرر نصوص بسيط مثل Notepad (في ويندوز) أو TextEdit (في macOS). ويمكنك أيضًا استخدام محررات أكثر احترافية، مثل Sublime Text أو Visual Studio Code وهو ما سنستخدمه في شرح الخطوات الآتية.

الخطوة الأولى: حمِّل برنامج Visual Studio Code وثبِّته لديك.

الخطوة الثانية: بعد فتح فيجوال ستوديو كود هي إنشاء مشروع جديد، وهذا يعني ببساطة تجميع كل ملفات العمل الخاصة بنا في مجلد واحد، ونسمي هذا المجلد بأي اسم نريده، مثلًا: Car Store، وسوف يكون مكان تخزين كل ملفات HTML التي سوف نعمل عليها لاحقًا.

لإنشاء هذا المجلد داخل البرنامج، نذهب إلى الشريط العلوي ونختار File، ثم من القائمة التي تظهر، نضغط على Add Folder to Workspace. وبعد ذلك، ستفتح نافذة جديدة، اختر منها مكان حفظ المجلد الذي أنشأناه منذ قليل، وبعدها نبحث عن اسمه ونضغط زر Add.

وبعد ذلك، سوف نجد أن اسم المجلد ظهر في القائمة الجانبية على يسار الشاشة داخل المحرر Visual Studio Code، وهذا يعني أنك تعمل الآن في مساحة العمل الخاصة بالمشروع الخاص بك.

الخطوة الثالثة: هي إنشاء أول ملف HTML. اضغط كليك يمين على اسم المجلد Car Store في القائمة الجانبية، واختر New File، ستظهر لك خانة لإدخال اسم الملف اكتب به: index.html، ثم اضغط Enter. وسيظهر الملف الجديد فورًا تحت اسم المجلد، وسيكون جاهزًا للعمل عليه والبدء في كتابة كود HTML وتجربته.

هذا الملف index.html سيكون هو الصفحة الأساسية للموقع، وسنكتب به جميع تعليمات HTML التي سنتعلمها ونطبّقها خطوة خطوة. ويُعد هذا هو أول لبنة في بناء موقعك الإلكتروني.

اكتب سطر صفحتك الأول مستخدمًا HTML

عند البدء في كتابة أول أكواد في صفحة HTML التي أنشأناها، من المهم أن نحافظ على ترتيب العناصر بطريقة صحيحة، والحفاظ على تنسيق الأكواد كذلك؛ للتسهيل من عملية التعديل والحفظ فيما بعد. كما ينبغي حفظ التغييرات أولًا بأول باستخدام (Ctrl + S)؛ حتى تستطيع حفظ جميع التعديلات في حالة حدوث أخطاء؛ لتتمكن من استرجاعها بسهولة.

وفي الخطوات التالية، طريقة كتابة أول كود في الصفحة.

نبدأ الكود من رأس الصفحة وهو (head)، وفيه نكتب معلومات مهمة لا تظهر للمستخدم، لكنها ضرورية للمتصفح، وهي:

• سطر DOCTYPE html: وهو يعطى المتصفح أمر بأنك تستخدم الـ HTML5.
• وسم html: وهو العنصر الرئيس الذي يحوي جميع محتويات الصفحة.
• وسم head: وهو قسم الرأس الذي يحتوي على معلومات مثل الترميز والعنوان.
• سطر meta charset: وهذا الكود يوضح للمتصفح أن الصفحة تستخدم ترميز UTF-8، وهو يدعم اللغة العربية ولغات أخرى، وهذا الكود مهم جدًا؛ حتى تظهر جميع الحروف صحيحة إن كنت تستخدم اللغة العربية.
• سطر title: وهذا هو العنوان الذي سيظهر في شريط المتصفح، وهنا سميناه Car Store.
• وسم head

بعد كتابة الـ head، نكمل مع جسم الصفحة وهو الـ (body)، وهو الجزء الذي يظهر للمستخدم.

• وسم body وهذا القسم يكتب به جميع المحتوى الذي يظهر للناس على الصفحة.

• سطر p: وهو وسم الفقرة، وكتبنا به This is Car Store كجملة بسيطة تظهر للتعريف في الصفحة.

• وسم body

• وسم html

والكود النهائي سيكون كالتالي:

الآن تستطيع تجربة التعديل في النصوص حسب ما تفضل، أو تضيف عناصر بسيطة أخرى مثل عنوان باستخدام h1، أو حتى صورة. ومع كل تعديل، سترى نتيجة عملك مباشرة في المتصفح، وهذا أمر ممتع ومشجّع جدًا لأي مبتدئ.

وأخيرًا، إذا تمكّنت من كتابة أول سطر HTML، فأنت على الطريق الصحيح! انضم الآن إلى دورة أساسيات HTML للمبتدئين مع أحمد نعيم على منصة تعلَّم، وابدأ رحلتك نحو تصميم موقعك الخاص بخطوات بسيطة.