لو فهمت مجموعة صغيرة من الوسوم الأساسية في HTML، تقدر تبني صفحة ويب كاملة وبسيطة من اليوم الأول.
في هذا المقال رح نركّز على أهم الوسوم اللي تحتاجها دائمًا: من h1 إلى a، مع أمثلة عملية جاهزة للتطبيق.
لو حاب تشوف الشرح بالفيديو مع تطبيق عملي، تقدر تتابع درس مقدمة HTML على قناتي في يوتيوب
أولاً: وسوم العناوين – من h1 إلى h6
وسوم العناوين تُستخدم لتنظيم المحتوى، وتساعد:
الزائر على فهم الصفحة
محركات البحث (Google) على فهم بنية المحتوى
ترتيب العناوين:
h1: العنوان الرئيسي للصفحة (غالبًا مرة واحدة فقط)
h2: عناوين الأقسام الرئيسية
h3 – h6: عناوين فرعية داخل الأقسام
مثال عملي
<h1>دليل تعلم HTML للمبتدئين</h1>
<h2>ما هي لغة HTML؟</h2>
<h3>لماذا نحتاج HTML؟</h3>
<h4>أهم الوسوم في HTML</h4>ملاحظات مهمة
- لا تكرر
h1كثيرًا في نفس الصفحة - التزم بالتسلسل:
h1→h2→h3 - لا تقفز مباشرة من
h1إلىh4
ثانياً: وسم الفقرة p
أي نص عادي في صفحة HTML يُكتب غالبًا داخل وسم p.
مثال:
<p>لغة HTML هي اللبنة الأساسية لأي صفحة ويب.</p>
<p>في هذا الدرس سنتعرف على أهم الوسوم التي تحتاجها لبناء أول صفحة لك.</p>معلومة:
كل فكرة أو فقرة جديدة = وسم p جديد.
لا تحاول تضع كل النص في فقرة واحدة.
ثالثاً: وسم الرابط a
ومن أهم الخصائص المرتبطة بهذا الوسم خاصية href، والتي تُستخدم لتحديد عنوان الرابط.
على سبيل المثال، يمكن إنشاء رابط عادي باستخدام الكود التالي:
<a href="https://example.com">زر الموقع</a>بالإضافة إلى ذلك، يمكن جعل الرابط يفتح في تبويب جديد من خلال استخدام الخاصية target=”_blank”، كما في المثال التالي:
<a href="https://example.com" target="_blank">
افتح الموقع في تبويب جديد
</a>من ناحية أخرى، إذا كان الرابط داخل نفس الموقع، فيمكن استخدام مسار الصفحة مباشرة:
<a href="about.html">صفحة من نحن</a>وأخيرًا، يدعم وسم <a> إنشاء روابط للبريد الإلكتروني باستخدام mailto، مما يسمح بالتواصل السريع مع الزوار:
<a href="mailto:info@example.com">راسلنا عبر البريد</a>بالإضافة الي الخصائص المهمّة التالية:
- target=”_blank”: والتى تسمح بفتح الرابط في تبويب جديد (استخدمه عند الحاجة فقط)
رابعاً: مثال صفحة بسيطة تجمع h1و pو a
خلّينا نركّب كل اللي تعلمناه في صفحة واحدة
انسخ الكود وجربه في ملف index.html:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>أول صفحة HTML</title>
</head>
<body>
<h1>مرحبًا بك في أول صفحة HTML</h1>
<p>
هذه صفحة تجريبية باستخدام أهم الوسوم الأساسية في HTML
مثل العناوين والفقرات والروابط.
</p>
<h2>ماذا ستتعلم؟</h2>
<p>
ستتعلم كيفية كتابة عناوين من h1 إلى h3،
وكيف تضيف فقرة نصية،
وكيف تنشئ رابطًا لموقع آخر.
</p>
<h2>تجربة رابط</h2>
<p>
يمكنك زيارة قناتي على يوتيوب من خلال هذا الرابط:
<a href="https://youtube.com" target="_blank">
اضغط هنا للانتقال إلى يوتيوب
</a>
</p>
</body>
</html>شو بعد هاي الوسوم؟
بعد ما تتقن:
h1 – h6
p
a
تقدر تنتقل إلى وسوم مهمة أخرى مثل:
img
ul و ol
divو span