.png){kind=small}
الوصف لمحركات البحث: تعلم أساسيات عناصر HTML (الـElements) بطريقة مبسطة وبالعامية المصرية، عشان تبدأ رحلتك في تصميم المواقع بثقة. المقال مناسب للمبتدئين وبيغطي كل حاجة من أول الـTags لحد الفرق بين الـBlock والـInline.
👋 مقدمة: إيه هي HTML أصلاً؟
HTML أو HyperText Markup Language هي اللغة الأساسية اللي بنستخدمها عشان نبني هيكل أي صفحة ويب. يعني نقدر نقول عليها "عظام" الموقع اللي بنركب عليه بعد كده الستايل (CSS) والديناميكية (JavaScript).
طيب إيه هي الـ Elements بقى؟
العناصر أو الـ Elements هي مكونات الصفحة نفسها، زي العناوين، الفقرات، الصور، الروابط، القوائم... إلخ.
🧱 مكونات العنصر في HTML
كل عنصر في HTML بيتكتب بالطريقة دي:
<اسم_العنصر>المحتوى</اسم_العنصر>مثال بسيط:
<p>أنا فقرة في HTML</p>💡 معلومة مهمة: في عناصر بتتقفل لوحدها زي <img> أو <br> ودي بنسميها Self-closing tags.
📚 أنواع عناصر HTML الأساسية
1. عناصر النصوص (Text Elements)
| العنصر | الوظيفة | مثال |
|---|---|---|
<h1> - <h6> | عناوين | <h1>عنوان رئيسي</h1> |
<p> | فقرة | <p>نص عادي</p> |
<br> | سطر جديد | <br> |
<strong> | نص غامق | <strong>مهم</strong> |
<em> | نص مائل | <em>تنبيه</em> |
2. عناصر الروابط والصور (Links & Media)
| العنصر | الوظيفة | مثال |
|---|---|---|
<a> | رابط | <a href="https://google.com">جوجل</a> |
<img> | صورة | <img src="image.jpg" alt="وصف"> |
<video> | فيديو | <video controls src="video.mp4"></video> |
<audio> | صوت | <audio controls src="sound.mp3"></audio> |
3. عناصر القوائم (Lists)
| العنصر | الوظيفة | مثال |
|---|---|---|
<ul> | قائمة غير مرتبة | <ul><li>بند</li></ul> |
<ol> | قائمة مرتبة | <ol><li>بند</li></ol> |
<li> | عنصر قائمة | جزء من اللي فوق |
4. عناصر الـForms (النماذج)
| العنصر | الوظيفة | مثال |
|---|---|---|
<form> | نموذج | <form action=""></form> |
<input> | حقل إدخال | <input type="text"> |
<textarea> | نص طويل | <textarea></textarea> |
<button> | زر | <button>اضغط</button> |
<label> | عنوان حقل | <label>اسمك:</label> |
5. عناصر الهيكل العام (Structure Elements)
| العنصر | الوظيفة | مثال |
|---|---|---|
<div> | حاوية عامة | <div>محتوى</div> |
<span> | نص داخل سطر | <span>نص</span> |
<header> | رأس الصفحة | <header>عنوان الموقع</header> |
<footer> | تذييل | <footer>© الحقوق محفوظة</footer> |
<main> | المحتوى الأساسي | <main>مقال</main> |
<nav> | روابط تنقل | <nav>قائمة</nav> |
🔄 الفرق بين Block و Inline Elements
| Block Elements | Inline Elements |
|---|---|
| بياخد السطر كله زي: <div>, <p> | بياخد على قد المحتوى زي: <span>, <a> |
⚠️ حاجات لازم تبقى فاهمها
- HTML مش لغة برمجة، هي لغة وصفية.
- لازم تفتح وتقفل كل عنصر صح.
- كل صفحة HTML بتبدأ بـ
<html>و جواها<head>و<body>. - التعليقات بتتكتب كده:
<!-- ده تعليق -->
📌 مصادر تتعلم منها أكتر
- MDN Web Docs - HTML
- W3Schools - HTML
- كورسات يوتيوب زي Elzero Web School
💬 خاتمة: البداية الحقيقية
لو قدرت تستوعب العناصر دي وفهمت الفرق بين أنواعها، إنت قطعت أول خطوة قوية في طريقك كمطور مواقع. كل شغل الـHTML هو ترتيب وتنظيم البيانات قدام المستخدم.
فاكر لما تبص على صفحة ويب وتقول "واو!"؟
دلوقتي إنت اللي هتخلي الناس تقول "واو!" على شغلك 😎
✨ خدها مني كلمة: إنت قدّها!
بص يا صاحبي، بداية أي طريق دايمًا بتكون بأبسط حاجة… والنهارده إنت عملت خطوة جامدة لما فهمت عناصر HTML. متقلقش لو في حاجات لسه مش واضحة، كل حاجة بتيجي بالتمرين والممارسة.
خلي عندك شغف، وحافظ على الاستمرارية، وصدقني هتوصل للي نفسك فيه حتى لو الطريق طويل.
إوعى تقارن نفسك بحد، كل واحد ليه سرعته… أهم حاجة إنك ما توقفش.
<head>، والميتا تاجز، وازاي تكتب صفحة احترافية من أول سطر لآخر سطر.
تابعنا علشان كل يوم تتعلم معلومة جديدة وتبني مستقبلك بإيدك ❤️
قولنا رأيك... كل كلمة منك بتفرق!