يعني إيه HTML؟ وإزاي تعمل أول صفحة ويب بنفسك للمبتدئين
لو بتفكر تبدأ تتعلم برمجة أو تدخل مجال تطوير الويب، فأول حاجة هتقابلك هي HTML.
يمكن تكون سمعت الاسم قبل كده، لكن لسه مش عارف هي إيه بالظبط أو ليه كل المواقع على الإنترنت بتعتمد عليها.
في المقال ده هنتعرف على HTML بطريقة بسيطة جدًا، وهتتعلم إزاي تنشئ أول صفحة ويب بنفسك خطوة بخطوة.
يعني إيه HTML؟
HTML اختصار لـ:
HyperText Markup Language
ودي اللغة المسؤولة عن بناء هيكل أي صفحة ويب على الإنترنت.
بمعنى أبسط، HTML هي اللي بتحدد أماكن العناصر داخل الصفحة زي:
العناوين
الفقرات
الصور
الروابط
الأزرار
القوائم
يعني لو الموقع الإلكتروني عبارة عن بيت، فـ HTML هي الأساس والحوائط اللي البيت متبني عليها.
هل HTML لغة برمجة؟
الإجابة لا.
HTML مش لغة برمجة زي JavaScript أو Python.
هي لغة توصيف (Markup Language)، وظيفتها إنها تنظم محتوى الصفحة وتقول للمتصفح كل عنصر مكانه فين وشكله الأساسي عامل إزاي.
ليه لازم تتعلم HTML؟
لأنها أول خطوة في رحلة تطوير الويب.
أي مطور Frontend أو Full Stack لازم يكون فاهم HTML كويس جدًا قبل ما يبدأ يتعلم CSS أو JavaScript.
ومن أهم مميزاتها:
سهلة التعلم.
بسيطة للمبتدئين.
أساس أي موقع ويب.
مطلوبة في كل مجالات تطوير الويب.
الأدوات اللي هتحتاجها
عشان تبدأ مش محتاج غير حاجتين:
1. محرر أكواد
وأشهر محرر حاليًا هو:
Visual Studio Code (VS Code)
2. متصفح
زي:
Google Chrome
Microsoft Edge
Firefox
إزاي تعمل أول صفحة ويب؟
افتح VS Code.
بعد كده اعمل ملف جديد باسم:
index.html
واكتب الكود التالي:
<!DOCTYPE html>
<html>
<head>
<title>أول صفحة ويب</title>
</head>
<body>
<h1>أهلًا بيك في عالم تطوير الويب</h1>
<p>
دي أول صفحة HTML بعملها بنفسي.
</p>
</body>
</html>
احفظ الملف.
بعد كده افتحه بالمتصفح.
مبروك 🎉
كده أنت أنشأت أول صفحة ويب في حياتك.
شرح الكود
السطر الأول
<!DOCTYPE html>
وده بيقول للمتصفح إن الصفحة مكتوبة باستخدام HTML5.
عنصر HTML
<html>
</html>
وده العنصر الرئيسي اللي بيحتوي الصفحة كلها.
عنصر Head
<head>
</head>
بيحتوي على معلومات الصفحة اللي مش بتظهر للمستخدم مباشرة.
عنصر Title
<title>أول صفحة ويب</title>
العنوان اللي بيظهر فوق في تبويب المتصفح.
عنصر Body
<body>
</body>
وده المكان اللي بنحط فيه كل المحتوى اللي هيشوفه الزائر.
أشهر الوسوم في HTML
العناوين
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
الفقرات
<p>دي فقرة عادية.</p>
الروابط
<a href="https://google.com">
زيارة جوجل
</a>
الصور
<img src="image.jpg" alt="صورة">
القوائم
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
</ul>
مشروع عملي صغير
جرب تعمل صفحة تعريف بنفسك.
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الشخصية</title>
</head>
<body>
<h1>ربيع شعبان</h1>
<p>
Frontend Developer متخصص في React.js و Next.js.
</p>
</body>
</html>
أخطاء شائعة للمبتدئين
1. نسيان إغلاق الوسوم
مثال خطأ:
<p>مرحبًا
الصحيح:
<p>مرحبًا</p>
2. حفظ الملف بامتداد خاطئ
لازم يكون:
index.html
وليس:
index.txt
3. كتابة اسم الصورة أو مسارها بشكل خاطئ
وده من أكثر الأخطاء اللي بتخلي الصور متظهرش.
ماذا بعد HTML؟
بعد ما تتقن HTML هتبدأ تتعلم CSS.
وهي اللغة المسؤولة عن:
الألوان
الخطوط
المسافات
التصميم
التجاوب مع الموبايل
يعني HTML بتبني الهيكل، وCSS بتخليه شكله جميل.
الخلاصة
HTML هي أول خطوة حقيقية لأي شخص عايز يدخل عالم تطوير الويب.
كل المواقع اللي بتشوفها يوميًا مبنية باستخدام HTML، وعشان كده لازم تتعلمها بشكل صحيح قبل ما تنتقل لأي تقنية تانية.
ابدأ بالتطبيق العملي، واكتب أكواد بنفسك، ومتكتفيش بالمشاهدة فقط.
في المقال القادم هنتعلم CSS وهنبدأ نحول صفحاتنا البسيطة لتصميمات احترافية.
الأسئلة الشائعة
هل HTML لغة برمجة؟
لا، HTML لغة توصيف تستخدم لبناء هيكل صفحات الويب.
هل أقدر أعمل موقع كامل باستخدام HTML فقط؟
تقدر تعمل صفحات بسيطة، لكن المواقع الحديثة تحتاج CSS وJavaScript.
أحتاج قد إيه عشان أتعلم HTML؟
ممكن تتعلم الأساسيات خلال أيام قليلة مع التطبيق المستمر.
أتعلم إيه بعد HTML؟
بعد HTML يفضل تعلم CSS ثم JavaScript لاستكمال مسار تطوير الويب.
التعليقات