HTML اختصار لـ HyperText Markup Language، وهي لغة الترميز الأساسية لتصميم صفحات الويب. HTML هي البنية التي تُستخدم لهيكلة محتوى صفحات الإنترنت، سواء كان نصًا، صورًا، روابط، جداول، أو أي نوع آخر من المحتوى. هي اللغة الأولى التي يجب تعلمها لأي شخص يريد العمل في تطوير الويب.
مكونات HTML
HTML يتكون من الوسوم (Tags) التي تُستخدم لتحديد كيفية عرض المحتوى داخل الصفحة. كل وسم يُستخدم لتنظيم جزء معين من الصفحة، سواء كان نصوصًا أو صورًا أو روابط أو جداول.
أهم الوسوم في HTML
1. الوسوم الأساسية
الوسوم الأساسية في HTML تُستخدم لبناء هيكل الصفحة:
<!DOCTYPE html> <!-- يحدد نوع المستند-->
<html> <!-- بداية المستند -->
<head> <!-- يحتوي على معلومات وصفية عن الصفحة مثل العنوان -->
<meta charset="UTF-8">
<title>عنوان الصفحة</title>
</head>
<body> <!-- المحتوى الرئيسي للصفحة -->
<h1>مرحبًا بك في تعلم HTML!</h1>
<p>هذه هي فقرة نصية</p>
</body>
</html>
<!DOCTYPE html>: يُستخدم للإشارة إلى نوع المستند الذي يُحدد أنه مستند HTML5.<html>: يحدد بداية الصفحة ويحتوي على كامل المحتوى.<head>: يحتوي على معلومات وصفية مثل العنوان، والأكواد الميتا.<body>: يحتوي على المحتوى المرئي الذي يظهر للمستخدم على الصفحة.
2. الوسوم لتنسيق النصوص
<h1>إلى<h6>: تُستخدم لتحديد العناوين في الصفحة.<h1>هو أعلى مستوى من العناوين و<h6>هو الأدنى. مثال:<h1>عنوان رئيسي</h1> <h2>عنوان فرعي</h2><p>: يستخدم لكتابة الفقرات النصية. مثال:<p>هذه فقرة نصية تحتوي على بعض المعلومات.</p><b>و<i>: تُستخدم لجعل النص عريضًا أو مائلًا. مثال:<b>نص عريض</b> <i>نص مائل</i><strong>و<em>: تُستخدم لتمييز النص.<strong>يعني أن النص مهم (يُعرض عريضًا)، و<em>يعني أن النص مائل لأهمية خاصة. مثال:<strong>نص قوي</strong> <em>نص مائل</em>
3. الوسوم للروابط والصور
<a>: يُستخدم لإنشاء روابط بين الصفحات. مثال:<a href="https://www.example.com">اضغط هنا للانتقال إلى Example</a><img>: يُستخدم لإضافة صور إلى الصفحة. يجب تحديد السمةsrcلتحديد مصدر الصورة. مثال:<img src="image.jpg" alt="وصف الصورة" width="500" height="300">
4. الوسوم للقوائم
<ul>: لإنشاء قائمة غير مرتبة (نقاط).<ol>: لإنشاء قائمة مرتبة (ترقيم).<li>: لإنشاء عنصر في القائمة. مثال:<ul> <li>البيت</li> <li>السيارة</li> </ul> <ol> <li>الخطوة الأولى</li> <li>الخطوة الثانية</li> </ol>
5. الوسوم للجداول
<table>: لإنشاء جدول.<tr>: لإنشاء صف داخل الجدول.<th>: لإنشاء رأس للعمود.<td>: لإنشاء خلية بيانات في الجدول. مثال:<table> <tr> <th>الاسم</th> <th>العمر</th> </tr> <tr> <td>أحمد</td> <td>25</td> </tr> <tr> <td>سارة</td> <td>30</td> </tr> </table>
6. الوسوم للنماذج (Forms)
HTML يوفر لك الوسوم لإنشاء نماذج إدخال البيانات، مثل النصوص، الاختيارات، الأزرار، إلخ.
<form>: يُستخدم لإنشاء نموذج.<input>: لإنشاء حقول الإدخال.<label>: لإنشاء تسمية للحقول.<button>: لإنشاء زر داخل النموذج. مثال:<form action="/submit"> <label for="name">الاسم:</label> <input type="text" id="name" name="name"> <br> <label for="email">البريد الإلكتروني:</label> <input type="email" id="email" name="email"> <br> <button type="submit">إرسال</button> </form>
7. الوسوم للتقسيم والتنظيم
<div>: يُستخدم لإنشاء تقسيمات داخل الصفحة.<span>: يُستخدم لتحديد أجزاء صغيرة من النص أو العناصر داخل السطر نفسه. مثال:<div class="container"> <p>هذا هو النص داخل ال div.</p> </div> <span>نص صغير داخل السطر.</span>
مفاهيم متقدمة في HTML
- التعليقات: يمكنك إضافة تعليقات في HTML باستخدام
<!-- -->، وهذه لا تظهر في المتصفح. مثال:<!-- هذا تعليق ولن يظهر في المتصفح --> - الروابط الداخلية: يمكنك إنشاء روابط تؤدي إلى أجزاء معينة داخل نفس الصفحة باستخدام
id. مثال:<a href="#section2">اذهب إلى القسم 2</a> <div id="section2"> <h2>القسم 2</h2> </div>
الخاتمة
HTML هي الأساس الذي يُبنى عليه أي موقع ويب. من خلال تعلم HTML، يمكنك بناء هيكل صفحات الإنترنت الخاصة بك بسهولة، سواء كانت تحتوي على نصوص، صور، روابط، أو حتى جداول ونماذج. تعلم HTML يعد الخطوة الأولى في رحلتك لتعلم تطوير الويب، ومن هنا تبدأ لبناء مواقع وتطبيقات ويب معقدة.
اترك تعليقاً