ما هي لغة HTML؟ دليل شامل للمبتدئين
1. ما هي لغة HTML؟
HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لإنشاء وتنظيم محتوى صفحات الويب.
ليست لغة برمجة: لا تُنفذ مهام معقدة، بل تُحدد هيكل الصفحة (العناوين، النصوص، الصور، الروابط).
اللبنة الأساسية للويب: كل مواقع الإنترنت تُبنى باستخدام HTML.
مثال بسيط:
<!DOCTYPE html> <html> <head> <title>عنوان الصفحة</title> </head> <body> <h1>مرحبًا بالعالم!</h1> <p>هذه فقرة نصية.</p> </body> </html>
2. الهيكل الأساسي لصفحة HTML
كل صفحة HTML تحتوي على:
<!DOCTYPE html>: يُعلن أن المستند من نوع HTML5.<html>: العنصر الجذر الذي ي包裹 كل المحتوى.<head>: يحتوي على معلومات غير مرئية للمستخدم (مثل العنوان، الروابط لملفات CSS/JS).<body>: يحتوي على المحتوى المرئي (نصوص، صور، جداول).
مثال مُفصَّل:
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>أول صفحة لي</title> </head> <body> <h1>مرحبًا!</h1> <p>أنا أتعلم HTML.</p> </body> </html>
3. أهم العلامات (Tags) في HTML
| العلامة | الوصف |
|---|---|
<h1> إلى <h6> | عناوين رئيسية وفرعية (من الأكبر إلى الأصغر). |
<p> | فقرة نصية. |
<a href="رابط"> | رابط نقر (Hyperlink). |
<img src="صورة.jpg"> | إدراج صورة. |
<ul> أو <ol> | قوائم غير مُرقَّمة أو مُرقَّمة. |
<li> | عنصر في القائمة. |
<div> | حاوية عامة لتجميع العناصر. |
مثال عملي:
<h2>ماذا أتعلم اليوم؟</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <a href="https://example.com">زيارة مثال</a> <img src="image.jpg" alt="وصف الصورة">
4. ما هي السمات (Attributes)؟
وظيفتها: إضافة معلومات إضافية للعناصر (مثال: تحديد رابط، حجم الصورة).
أشهر السمات:
href: يُحدد رابط النقر في<a>.src: يُحدد مصدر الصورة في<img>.alt: وصف نصي للصورة (مهم لـ SEO وإمكانية الوصول).classوid: لتنسيق العناصر عبر CSS.
مثال:
<a href="https://google.com" target="_blank">ابحث عبر جوجل</a> <img src="logo.png" alt="شعار الموقع" width="200">
5. HTML5 والعناصر الدلالية (Semantic Tags)
أضافت HTML5 علامات تُحدد معنى المحتوى لتحسين:
SEO: جوجل تفهم هيكل الصفحة بشكل أفضل.
إمكانية الوصول: تساعد ذوي الاحتياجات الخاصة على التنقل.
| العلامة | الوصف |
|---|---|
<header> | رأس الصفحة (يحتوي عادةً على الشعار والقائمة). |
<nav> | قائمة التنقل الرئيسية. |
<section> | قسم مستقل من المحتوى. |
<article> | محتوى مستقل (مثل مقالة، تدوينة). |
<footer> | تذييل الصفحة (معلومات الاتصال، حقوق النشر). |
مثال:
<header> <h1>مدونتي التقنية</h1> <nav> <a href="#home">الرئيسية</a> <a href="#articles">المقالات</a> </nav> </header> <section> <article> <h2>مقدمة في HTML</h2> <p>هذه مقالة عن أساسيات HTML.</p> </article> </section> <footer> <p>جميع الحقوق محفوظة © 2024</p> </footer>
6. كيف تعمل HTML مع CSS وJavaScript؟
HTML: الهيكل العظمي للصفحة (مثل الجدران في المنزل).
CSS: التصميم والتنسيق (مثل الدهان والديكور).
JavaScript: التفاعلية (مثل الأزرار التي تُضاء عند النقر).
مثال على الربط بينهم:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <!-- ملف CSS --> </head> <body> <button onclick="alert('مرحبًا!')">انقر هنا</button> <script src="script.js"></script> <!-- ملف JavaScript --> </body> </html>
7. خطوات البدء في تعلم HTML
تنصيب محرر نصوص: مثل VS Code.
حفظ الملف بامتداد
.html: مثلindex.html.التجربة العملية: اكتب الكود وشاهده في المتصفح.
الاستفادة من المصادر:
8. لماذا HTML مهمة؟
ضرورية لكل مطور ويب: سواء كنت مصممًا أو مبرمجًا.
سهلة التعلم: يمكنك إتقان الأساسيات في يوم واحد.
بوابة الدخول لعالم البرمجة: تُعتبر الخطوة الأولى لتعلم CSS وJavaScript.
ابدأ الآن!
<!DOCTYPE html> <html> <body> <h1>أول صفحة ويب لي</h1> <p>هذا نجاحي الأول!</p> </body> </html>
حفظ الملف وفتحه في المتصفح لترى النتيجة 🚀
ملاحظة أخيرة:
“لا تتعلم HTML فقط، طبِّقها! كل سطر تكتبه يُقربك من الاحتراف.”
