HTML (HyperText Markup Language) هي لغة توصيفية تستخدم لإنشاء صفحات الويب. تعتمد على مجموعة من العناصر والعلامات التي تحدد هيكل المحتوى على الصفحة. في هذه المقالة، سنتعرف على العناصر الأساسية في HTML وكيفية كتابة الأكواد في محرر النصوص.
محرر الأكواد
قبل البدء في كتابة الأكواد، تحتاج إلى محرر نصوص مخصص لتحرير الأكواد البرمجية.
هناك العديد من المحررات المتاحة مثل:
1. Visual Studio Code: محرر قوي يدعم العديد من اللغات ويحتوي على مميزات مثل الإكمال التلقائي والتصحيح.
2. Sublime Text: محرر خفيف وسريع وسهل الاستخدام.
3. Notepad++: محرر بسيط وخفيف، ويعتبر خيارًا جيدًا للمبتدئين.
يمكنك تحميل أي من هذه المحررات من مواقعها الرسمية وتثبيتها على جهازك.
كتابة أول كود HTML
بعد تثبيت محرر النصوص، سنبدأ بكتابة كود HTML بسيط. إليك كيفية البدء:
1. افتح محرر النصوص واختر ملف جديد
2. احفظ الملف بإسم index.html. تأكد من أن الامتداد هو “.html” وليس “.txt”.
الآن، سنقوم بكتابة أول كود HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First HTML Page</title> </head> <body> <h1>Hello, CodeCamb!</h1> <p>This is my first HTML page.</p> </body> </html>
شرح الكود
– <!DOCTYPE html>: يخبر المتصفح أن هذا الملف يستخدم HTML5.
– <html lang=”en”>: يحدد بداية مستند HTML ويحدد لغة الصفحة.
– <head>: يحتوي على معلومات غير مرئية مثل إعدادات اللغة وعنوان الصفحة.
– <meta charset=”UTF-8″>: يحدد مجموعة الأحرف المستخدمة في الصفحة.
– <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: يجعل الصفحة متوافقة مع الأجهزة المختلفة، مثل الهواتف المحمولة.
– <title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان.
– <body>: يحتوي على المحتوى المرئي للمستخدم.
– <h1>: يستخدم لعرض عنوان كبير.
– <p>: يستخدم لعرض فقرة نصية.
معاينة الصفحة
بعد كتابة الكود وحفظ الملف، يمكنك معاينة الصفحة في متصفح الويب الخاص بك:
1. افتح الملف المحفوظ (`index.html`) باستخدام متصفحك (مثل Google Chrome أو Firefox).
2. سترى صفحة تحتوي على عنوان كبير “Hello, World!” وفقرة نصية تحتها.
هذه كانت نظرة سريعة على العناصر الأساسية في HTML وكيفية كتابة أول كود لك. في المقالات القادمة، سنتعمق في المزيد من العناصر وكيفية استخدامها لبناء صفحات ويب متكاملة.
