درس ٣: الوسوم الأساسية (العناوين، الفقرات، الروابط، الصور، القوائم)

اليوم سنتعلم ٨٠٪ من الوسوم التي ستستخدمها في ٩٩٪ من صفحاتك!

تخيّل أنك تملك صندوق ليغو… الوسوم هي القطع التي تبني بها أي شيء تريده!

اليوم سنتعلم أهم ١٠ قطع ليغو في HTML (ستستخدمها كل يوم).

١. العناوين (h1 – h6) – أهم وسم في الصفحة!

h1 – العنوان الرئيسي

يُستخدم مرة واحدة فقط في الصفحة

h2 – عنوان قسم

h3 – عنوان فرعي

h4

h5

h6 – الأصغر

٢. الفقرات <p> وكسر السطر <br>

<p>هذه فقرة كاملة. المتصفح يضيف مسافة فوقها وتحتها تلقائيًا.</p>

<p>
  هذه فقرة أخرى<br>
  فيها كسر سطر<br>
  وكمان سطر ثالث
</p>

٣. الروابط <a> – قلب الإنترنت!

🔗

<a/> جوجل<"a href="https://google.com>

رابط خارجي

<a/> تواصل معي<"a href="contact.html>

رابط داخلي

<a/> واتساب<"a href="https://wa.me/966500000000>

رابط مباشر للتطبيقات

أضف دائمًا "target="_blank ليفتح في تبويب جديد!

٤. الصور <img> – اجعل صفحتك حيّة!

<!-- صورة محلية من جهازك -->
<img src="images/photo.jpg" alt="صورة شخصية" width="300">

<!-- صورة من الإنترنت -->
<img src="https://picsum.photos/600/400" alt="صورة عشوائية جميلة">

<!-- نصيحة ذهبية: دائمًا ضع نص بديل alt -->

٥. القوائم (مهمة جدًا في كل المواقع)

قائمة غير مرقمة (نقاط)

<ul>
  <li/>تفاح<li>
  <li/>موز<li>
  <li/>برتقال<li>
<ul/>

قائمة مرقمة

<ol>
  <li/>استيقظ<li>
  <li/>صلِّ الفجر<li>
  <li/>ابدأ يومك<li>
<ol/>

تمرين اليوم: نبني موقعك الشخصي من الصفر (١٠ دقايق فقط!)

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي الشخصي</title>
</head>
<body>
    <h1>مرحبًا، أنا [اسمك]</h1>
    <img src="https://picsum.photos/300/300" alt="صورتي الشخصية">

    <h2>نبذة عني</h2>
    <p>أنا طالب/مبرمج/مصمم… أحب البرمجة والتصميم.</p>

    <h2>مهاراتي</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript (قريبًا)</li>
    </ul>

    <h2>تواصلوا معي</h2>
    <p>
        <a href="https://instagram.com/" target="_blank">إنستغرام</a> |
        <a href="https://twitter.com/" target="_blank">تويتر</a>
    </p>
</body>
</html>

مهمتك الآن:

انسخ الكود كامل
غيّر كل شيء ليصبح عنك أنت
أضف صورة لك (أو اترك الرابط العشوائي)
احفظ الملف باسم index.html وافتحه…
مبروك! لديك موقع شخصي على الإنترنت الآن 🎉

خلاصة الدرس في ٦ كلمات فقط:

h1 – p – a – img – ul – ol

من حفظ هذه الوسوم = يستطيع بناء أي صفحة بسيطة في العالم!

الدرس القادم: Semantic HTML (الوسوم الدلالية الحديثة)

سنتعلم كيف نكتب كود "نظيف واحترافي" مثل المحترفين!

الدرس التالي ← → رجوع

الوسوم الأساسية التي ستستخدمها كل يوم