وسوم HTML وعناصرها
تعلّم ماهية الوسوم والعناصر وكيفية عملها.
وسوم HTML وعناصرها درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
وسوم وعناصر HTML
مرحبًا بكم في الدرس التالي! سنتعلم اليوم عن وسوم HTML وعناصرها. وهذه هي اللبنات الأساسية لكل صفحة ويب ستنشئونها.
ما هي وسوم HTML؟
وسوم HTML هي كلمات مفتاحية خاصة محاطة بأقواس زاوية <>. وهي تخبر المتصفح بما يجب فعله بالمحتوى الموجود داخلها.
مثال على وسم:<h1>
تأتي الوسوم عادةً في أزواج: وسم افتتاحي ووسم ختامي.
مثال:
<h1>Hello</h1>ما هي عناصر HTML؟
عنصر HTML هو مزيج من وسم افتتاحي ومحتوى ووسم ختامي.
على سبيل المثال:
<h1>Welcome to My Page</h1>أنواع الوسوم
هناك نوعان رئيسيان من الوسوم:
- الوسوم المزدوجة: تحتوي على وسم افتتاحي ووسم ختامي. مثال:
<p>Paragraph</p> - الوسوم ذاتية الإغلاق: لا تحتاج إلى وسم ختامي. مثال:
<img />
الوسوم شائعة الاستخدام
إليكم بعض وسوم HTML الأساسية التي ستستخدمونها كثيرًا:
<h1> to <h6>: العناوين، من الأكبر إلى الأصغر<p>: فقرة<a>: رابط<img>: صورة<br>: فاصل أسطر
لنرَ مثالًا:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />السمات في الوسوم
توفر السمات معلومات إضافية حول العنصر. وتوضع داخل الوسم الافتتاحي.
مثال:
<a href="https://example.com"
target="_blank">Visit Example</a>
تداخل الوسوم
يمكنكم وضع وسم داخل وسم آخر. ويُسمى ذلك التداخل.
مثال:
<p>This is a <strong>bold</strong> word.</p>
ترتيب إغلاق الوسوم المتداخلة
تذكّروا: أغلقوا دائمًا الوسم الداخلي قبل إغلاق الوسم الخارجي.
مثال: جمع الأجزاء معًا
إليكم مثالًا يجمع كل ما تعلمناه:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>عمل رائع!
تهانينا! لقد تعلمتم عن وسوم HTML وعناصرها وسماتها وتداخلها. وهذه هي اللبنات الأساسية لكل صفحة ويب ستنشئونها. في الدرس التالي، سنكتب أول صفحة HTML لكم بمحتوى حقيقي!
الأسئلة الشائعة
هل درس «وسوم HTML وعناصرها» مجاني؟
نعم — نص درس «وسوم HTML وعناصرها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «وسوم HTML وعناصرها»؟
تعلّم ماهية الوسوم والعناصر وكيفية عملها. تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «وسوم HTML وعناصرها»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما هي HTML؟
- بنية HTML: اللبنات الأساسية
- وسوم HTML وعناصرها
- إعداد أول صفحة HTML لك