في هذا الدرس، سنتعرف على **الهيكل الأساسي لأي صفحة HTML**، وسنقوم بشرح كل سطر من سطور الكود خطوة بخطوة، حتى تفهم ما يحدث داخل الصفحة بالضبط.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحبًا بالعالم!</h1>
<p>هذه أول صفحة HTML لي.</p>
</body>
</html>هذا السطر يُخبر المتصفح بأن هذه الصفحة مكتوبة بلغة HTML5. وهو أمر ضروري جدًا حتى يتم عرض الصفحة بشكل صحيح وحديث.
هو الوسم الذي يحتوي كل مكونات الصفحة.
- lang="ar" تعني أن لغة المحتوى هي العربية.
- dir="rtl" تعني أن اتجاه النص من اليمين إلى اليسار، وهذا يناسب اللغة العربية.
الجزء "الخفّي" من الصفحة. لا يُعرض على الشاشة، لكنه يحتوي على معلومات هامة مثل:
<meta charset="UTF-8"> هذا يخبر المتصفح باستخدام ترميز UTF-8 الذي يدعم جميع الحروف (بما في ذلك العربية).<title>صفحتي الأولى</title> هو ما يظهر في تبويب المتصفح.هذا الجزء يحتوي على المحتوى المرئي داخل الصفحة مثل النصوص، الصور، العناوين... إلخ.
هذا عنوان رئيسي. الوسم <h1> يستخدم لكتابة عنوان كبير ومميز في الصفحة.
هذا وسم الفقرة. <p> يُستخدم لكتابة أي نصوص أو جُمل داخل الصفحة.
إغلاق الوسم الرئيسي للصفحة بعد الانتهاء من كل شيء.
<h1> و <p> تُستخدم لعرض محتوى الصفحة.<head> يحتوي على معلومات مهمة للمتصفح، وليس للمستخدم.📘 الآن بعد أن فهمت الهيكل، أنت جاهز للدرس التالي حيث سنتعلم أهم العناصر المستخدمة لكتابة المحتوى الحقيقي في الصفحات.
تستخدم الوسوم من <h1> إلى <h6> لإنشاء عناوين ذات مستويات مختلفة.
<h1> هو العنوان الرئيسي، و<h6> هو الأقل أهمية.
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>🔍 الشرح:
<h1>: يستخدم لكتابة العنوان الأهم في الصفحة.<h2>: عنوان فرعي مهم يتبع العنوان الرئيسي.<h3> إلى <h6>: تُستخدم لتنظيم وترتيب العناوين حسب الأهمية.تستخدم الوسم <p> لكتابة الفقرات النصية.
<p>هذه فقرة نصية مكتوبة بلغة HTML.</p>🔍 الشرح: الفقرات تُستخدم لكتابة نصوص طويلة أو شرح أو معلومات داخل الصفحة.
لإنشاء رابط يمكنك النقر عليه، نستخدم الوسم <a> مع الخاصية href.
<a href="https://www.example.com">اذهب إلى Example</a>🔍 الشرح:
<a>: الوسم الذي ينشئ الرابط.href: خاصية تحدد عنوان الموقع الذي سينتقل له الزائر عند الضغط على الرابط.لإدراج صورة في الصفحة، نستخدم الوسم <img> مع خاصيتين:
src: لتحديد مسار الصورة.alt: لوصف الصورة (مهم لمحركات البحث والمستخدمين الذين لا يمكنهم رؤية الصور).<img src="photo.jpg" alt="صورة توضيحية">🔍 الشرح: الصورة لا تحتاج لوسم إغلاق. تأكد من أن اسم الصورة مكتوب بشكل صحيح وموجود في نفس المجلد أو تحدد المسار الكامل لها.
تُستخدم لعرض عناصر متسلسلة أو خطوات مرتبة مثل الوصفات أو التعليمات.
<ol>
<li>افتح المتصفح</li>
<li>اكتب اسم الموقع</li>
<li>اضغط Enter</li>
</ol>🔍 الشرح:
<ol>: اختصار لـ "Ordered List"، لإنشاء قائمة مرقّمة تلقائيًا.<li>: اختصار لـ "List Item"، كل عنصر داخل القائمة يُكتب داخل هذا الوسم.تُستخدم عندما لا يكون هناك ترتيب معين، مثل قائمة مشتريات.
<ul>
<li>تفاحة</li>
<li>موز</li>
<li>برتقال</li>
</ul>🔍 الشرح:
<ul>: اختصار لـ "Unordered List"، لإنشاء قائمة بنقاط دون ترتيب رقمي.<li>: يمثل عنصرًا داخل القائمة.يمكنك أيضًا وضع قائمة داخل قائمة أخرى (مثل تصنيفات رئيسية وفرعية).
<ul>
<li>فواكه
<ul>
<li>تفاح</li>
<li>موز</li>
</ul>
</li>
<li>خضار</li>
</ul>🔍 الشرح:
<ul> أو <ol> داخل <li> لإنشاء قوائم فرعية.الروابط تُستخدم للانتقال من صفحة إلى أخرى أو من جزء في الصفحة إلى جزء آخر.
<a href="https://example.com">اذهب إلى الموقع</a><a>...</a>: هذا هو وسم الرابط.href="...": تحدد العنوان الذي ينتقل إليه الرابط. يمكن أن يكون رابطًا خارجيًا أو داخليًا.لعرض صورة في صفحة HTML، نستخدم وسم <img>:
<img src="image.jpg" alt="وصف للصورة"><img>: وسم الصورة.src="...": تحدد مسار الصورة (رابط أو اسم الملف).alt="...": نص بديل يظهر إذا لم تُعرض الصورة ويُستخدم لأغراض الوصول وتحسين محركات البحث.لعرض فيديو داخل الصفحة:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
المتصفح لا يدعم عرض الفيديو.
</video><video>: وسم عرض الفيديو، مع خصائص مثل width وheight لتحديد الحجم.controls: تضيف أزرار التحكم في الفيديو (تشغيل، إيقاف، صوت...).<source>: تحدد مصدر الفيديو ونوعه.<source> يُعرض فقط إذا لم يتمكن المتصفح من تشغيل الفيديو.نستخدم الجداول لعرض البيانات بشكل منظم:
<table border="1">
<tr>
<th>العنوان</th><th>القيمة</th>
</tr>
<tr>
<td>نص</td><td>123</td>
</tr>
</table><table>: بداية الجدول.border="1": تضيف حدودًا للخلايا.<tr>: صف في الجدول.<th>: خلية رأسية (عناوين الأعمدة).<td>: خلية بيانات.النماذج تسمح للمستخدمين بإرسال البيانات:
<form action="/submit" method="get">
<label>الاسم:
<input type="text" name="name">
</label>
<button type="submit">إرسال</button>
</form><form>: بداية النموذج.action: تحدد أين ترسل البيانات.method: تحدد طريقة الإرسال (GET أو POST).<input>: حقل لإدخال البيانات.<button>: زر الإرسال.HTML5 قدمت عناصر جديدة تساعد في تنظيم المحتوى بشكل أفضل:
<header>رأس الصفحة</header>
<nav>روابط التنقل</nav>
<main>المحتوى الرئيسي</main>
<section>قسم معين</section>
<article>مقالة مستقلة</article>
<aside>محتوى جانبي</aside>
<footer>تذييل الصفحة</footer><header>: الجزء العلوي من الصفحة (مثل الشعار والقائمة).<nav>: قائمة التنقل.<main>: يحتوي على المحتوى الأساسي.<section>: قسم منطقي في الصفحة.<article>: محتوى مستقل مثل تدوينة أو خبر.<aside>: محتوى جانبي مكمل.<footer>: تذييل الصفحة، يحتوي على معلومات مثل حقوق النشر.أنت الآن جاهز للانتقال إلى المرحلة التالية من رحلتك في تعلم تطوير الويب.
ابدأ الآن في تعلم CSS لتنسيق الصفحات وجعلها أكثر جاذبية واحترافية.
ابدأ تعلم CSS الآن