تعلم واحترف لغة HTML في درس واحد
لغة HTML (Hypertext Markup Language) هي أساس بناء صفحات الويب وتعدّ من أولى الخطوات في تعلم تطوير المواقع.
اليوم أصدقائي و في هذا الدرس، سنغطي الأساسيات اللازمة لكتابة أول صفحة ويب باستخدام HTML.
الفهرس:
- 1. ما هي HTML؟
- 2. البنية الأساسية لصفحة HTML
- 3. الوسوم الأساسية في HTML
- 4. الوسوم الهيكلية
- 5. إضافة النصوص والعناوين
- 6. الروابط والصور
- 7. الجداول والقوائم
- 8. النماذج (Forms)
- 9. التعليقات والخصائص الأخرى
1. ما هي HTML؟
HTML هي لغة ترميزية تُستخدم لبناء الهيكل الأساسي للصفحات الإلكترونية.
حاليا لا تعتبر HTML لغة برمجة، حيث لا تتضمن منطقًا برمجيًا، بل هي مجرد لغة تستخدم لتحديد العناصر المختلفة في الصفحة مثل العناوين، النصوص، الصور، والروابط.
2. البنية الأساسية لصفحة HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أول صفحة HTML</title>
</head>
<body>
<!-- هنا يبدأ محتوى الصفحة -->
</body>
</html>
3. الوسوم الأساسية في HTML
تتكون HTML من مجموعة وسوم (Tags) تميز أجزاء الصفحة. الوسم الأساسي يحتوي غالبًا على وسم بداية ووسم نهاية مثل <tagname>...</tagname>.
4. الوسوم الهيكلية
بعض الوسوم المهمة التي تساعد في تنظيم الصفحة هي:
<header>: يستخدم لوضع رأس الصفحة (مثل الشعار أو القائمة العلوية).<nav>: يُستخدم لتحديد جزء التنقل في الصفحة (القائمة).<main>: يحتوي على المحتوى الرئيسي للصفحة.<footer>: يُستخدم لوضع ذيل الصفحة (مثل حقوق الملكية أو الروابط الإضافية).
<header>
<h1>مرحبا بك في موقعي</h1>
</header>
<nav>
<a href="#about">عن الموقع</a>
<a href="#contact">اتصل بنا</a>
</nav>
<main>
<p>هذا هو المحتوى الرئيسي للصفحة.</p>
</main>
<footer>
<p>© 2023 جميع الحقوق محفوظة</p>
</footer>
5. إضافة النصوص والعناوين
لإضافة النصوص والعناوين، نستخدم وسوم مثل:
<h1>إلى<h6>: تستخدم لتحديد العناوين.<p>: وسم للفقرة.<strong>و<em>: لإبراز النص (غامق أو مائل).
<h1>عنوان رئيسي</h1>
<p>هذا نص داخل فقرة <strong>غامق</strong> و <em>مائل</em>.</p>
6. الروابط والصور
لإضافة الروابط والصور، نستخدم وسمي <a> و <img>:
<a href="https://example.com">زيارة موقعنا</a>
<img src="image.jpg" alt="صورة جميلة">
7. الجداول والقوائم
يمكن إنشاء الجداول والقوائم باستخدام HTML كالتالي:
الجداول:
<table>
<tr>
<th>الاسم</th>
<th>الوظيفة</th>
</tr>
<tr>
<td>أحمد</td>
<td>مهندس</td>
</tr>
</table>
القوائم:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
</ul>
8. النماذج (Forms)
النماذج تسمح بجمع البيانات من المستخدمين باستخدام وسم <form>.
<form action="/submit" method="post">
<label for="name">الاسم:</label>
<input type="text" id="name" name="name">
<input type="submit" value="إرسال">
</form>
9. التعليقات والخصائص الأخرى
التعليقات مفيدة في توضيح الكود وتُكتب على النحو التالي:
<!-- هذا تعليق ولن يظهر في المتصفح -->
يمكن أيضًا إضافة خصائص (Attributes) للوسوم مثل id وclass لتخصيص العناصر وتنسيقها باستخدام CSS لاحقًا.
خاتمة
الآن بعد أن تعرفت على أساسيات HTML، يمكنك البدء في بناء صفحاتك الخاصة.
HTML لغة بسيطة وسهلة التعلم، وتُمكّنك من إنشاء هيكل متكامل لصفحات الويب.
