تعلم HTML للمبتدئين (الجزء الاول)
تعلم HTML للمبتدئين (الجزء الأول): ما هي لغة HTML وأهم وسومها
أصبح الإنترنت جزءًا أساسيًا من حياتنا اليومية، فكل يوم نتصفح عشرات المواقع سواء لقراءة الأخبار أو مشاهدة الفيديوهات أو حتى التعلم والعمل. لكن هل تساءلت يومًا كيف يتم إنشاء هذه المواقع؟
الإجابة تبدأ غالبًا بلغة واحدة أساسية وهي HTML.
تعتبر HTML أول خطوة لكل شخص يريد دخول عالم تصميم وتطوير المواقع، وهي اللغة التي يتم من خلالها إنشاء هيكل صفحات الويب وتنظيم المحتوى داخلها.
ما هي لغة HTML؟
لغة HTML هي اختصار لعبارة Hyper Text Markup Language، وهي ليست لغة برمجة بالمعنى التقليدي، بل هي لغة ترميز تستخدم لإنشاء صفحات الويب وتنظيم محتواها.
بمعنى بسيط، HTML تخبر المتصفح كيف يعرض العناصر المختلفة داخل الصفحة مثل:
- العناوين
- الفقرات
- الصور
- الروابط
- الجداول
عندما تفتح أي موقع على الإنترنت، يقوم المتصفح بقراءة كود HTML وتحويله إلى الصفحة التي تراها أمامك.
كيف تعمل HTML؟
تعتمد HTML على ما يسمى الوسوم (Tags).
الوسوم هي أوامر تُكتب بين علامتي أصغر وأكبر، وتخبر المتصفح بكيفية عرض المحتوى.
مثال بسيط:
<h1>مرحبا بك في موقعي</h1>
<p>هذه أول صفحة ويب أقوم بإنشائها.</p>
في المثال السابق:
الوسم <h1> يستخدم لكتابة العناوين
الوسم <p> يستخدم لكتابة الفقرات
كل صفحة ويب تتكون من مجموعة من هذه الوسوم التي تعمل معًا لتشكيل الصفحة.
أهم وسوم HTML التي يجب أن يعرفها كل مبتدئ
إذا كنت تبدأ في تعلم HTML، فهناك مجموعة من الوسوم الأساسية التي ستستخدمها في معظم الصفحات.
1. وسم html
هذا الوسم هو الجذر الأساسي لأي صفحة ويب، وكل الأكواد يتم وضعها داخله.
مثال:
<html>
</html>
2. وسم head
يحتوي هذا الجزء على معلومات عن الصفحة مثل العنوان وبعض الإعدادات التي لا تظهر للمستخدم مباشرة.
مثال:
<head>
<title>موقعي الأول</title>
</head>
3. وسم title
يستخدم لتحديد عنوان الصفحة الذي يظهر في أعلى المتصفح.
مثال:
<title>موقعي الاول</title>
4. وسم body
هذا هو الجزء الذي يحتوي على كل المحتوى الذي يظهر للمستخدم داخل الصفحة.
مثال:
<body>
<p>موقعي الاول </p>
</body>
5. وسم العناوين
HTML توفر عدة مستويات من العناوين تبدأ من <h1> حتى <h6>
مثال:
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h6>اصغر عنوان</h6>
6. وسم الفقرة
يستخدم لكتابة النصوص والفقرات داخل الصفحة.
مثال:
<p>هذه فقرة داخل صفحة الويب.</p>
7. وسم الرابط
يستخدم لإنشاء رابط ينقل المستخدم إلى صفحة أخرى.
مثال:
<a href="https://example.com">اضغط هنا</a>
8. وسم الصورة
يستخدم لإضافة صورة داخل الصفحة.
مثال:
<img src="image.jpg">
9. وسم الفيديو
يستخدم وسم <video> لإضافة فيديو داخل صفحة الويب بدون الحاجة إلى مواقع خارجية.
مثال:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
كلمة controls تعني إظهار أزرار التحكم مثل التشغيل والإيقاف ومستوى الصوت.
10. وسم الصوت
يستخدم وسم <audio> لإضافة ملف صوتي داخل الصفحة.
مثال:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
وهذا يسمح للمستخدم بتشغيل الصوت مباشرة من الصفحة.
11. وسم القائمة
يمكن استخدام HTML لإنشاء قوائم مرتبة أو غير مرتبة.
قائمة غير مرتبة:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
قائمة مرتبة:
<ol>
<li>تعلم HTML</li>
<li>تعلم CSS</li>
<li>تعلم JavaScript</li>
</ol>
12. وسم الجدول
يستخدم لإنشاء جداول داخل صفحة الويب.
مثال:
<table>
<tr>
<th>اللغة</th>
<th>الاستخدام</th>
</tr>
<tr>
<td>HTML</td>
<td>إنشاء صفحات الويب</td>
</tr>
</table>
13. وسم الإدخال (input)
يستخدم وسم <input> لإنشاء حقول إدخال للمستخدم مثل كتابة الاسم أو البريد الإلكتروني او كلمة المرور او العمر او تاريخ الميلاد او ادراج ملفات .
مثال:
<input type="text" placeholder="اكتب اسمك">
وهذا يستخدم كثيرًا في صفحات التسجيل وتسجيل الدخول.
لماذا يجب أن تتعلم HTML؟
هناك العديد من الأسباب التي تجعل تعلم HTML فكرة ممتازة لأي شخص مهتم بالتكنولوجيا أو العمل على الإنترنت.
أولًا، تعتبر HTML أساس تصميم المواقع، فلا يمكن إنشاء موقع بدونها.
ثانيًا، تعلمها سهل مقارنة بلغات البرمجة الأخرى.
ثالثًا، يمكن تعلم أساسياتها خلال وقت قصير جدًا.
كما أن تعلم HTML قد يكون بداية طريقك للعمل في مجالات مثل تصميم المواقع أو تطوير الويب.
خلاصة
لغة HTML هي الأساس الذي تُبنى عليه جميع مواقع الإنترنت. فهي اللغة المسؤولة عن إنشاء هيكل الصفحة وتنظيم المحتوى داخلها باستخدام الوسوم المختلفة.
إذا كنت تريد دخول عالم تصميم المواقع، فإن تعلم HTML هو الخطوة الأولى التي يجب أن تبدأ بها.
📘 وفي السلسلة القادمة سنتعرف على كيفية إنشاء أول صفحة ويب باستخدام HTML خطوة بخطوة، مع أمثلة بسيطة يمكن لأي مبتدئ تطبيقها بسهولة.
📘 إذا كنت تريد تعلم HTML بشكل أسهل، قمت بإعداد كتاب PDF يشرح أساسيات اللغة خطوة بخطوة للمبتدئين.
إذا كنت مهتم بالحصول على الكتاب يمكنك التواصل معي عبر واتساب على الرقم: 01015221391
