HTML الدرس الاول اساسيات
ما هي HTML؟
HTML (HyperText Markup Language) هي لغة الترميز الأساسية لإنشاء صفحات الويب. هي ليست لغة برمجة، لكنها تعطي هيكل ومحتوى الصفحة. كل ما تراه على أي موقع ويب من نصوص، صور، روابط، وتنظيم، مبني على HTML.
هيكل صفحة HTML الأساسي
شرح كل عنصر
1. !DOCTYPE html
هو تصريح نوع المستند. يساعد المتصفح على عرض الصفحة بطريقة صحيحة. دائماً يكون في أول سطر في صفحة HTML.2.html
العنصر الأب لكل عناصر الصفحة. السمة lang="ar" تعني أن لغة الصفحة هي العربية. السمة dir="rtl" تعني اتجاه النص من اليمين إلى اليسار.3.head
يحتوي معلومات الصفحة للمستعرض وليس للمستخدم. أهم العناصر فيه: meta charset="UTF-8">: تعيين الترميز ليدعم العربية واللغات الأخرى. title: عنوان الصفحة في تبويب المتصفح. روابط للملفات الخارجية مثل CSS أو الخطوط.4. body
هنا تكتب كل المحتوى المرئي للمستخدم. يمكن أن يحتوي عناوين، فقرات، صور، روابط، أزرار، وأكثرطبعا طريقة كتابة الكود موضحة بالصورة ويجب ان تحفظها
(Attributes)-(Tags)الدرس الثاني العناصر والسمات
ما هو العنصر (Tag)؟
العنصر هو جزء من الشفرة يبدأ بـ <اسم> وينتهي بـ<اسم/> (باستثناء العناصر الفارغة). هو وحدة بناء الصفحة.
ما هي السمات (Attributes)؟
السمات تضيف معلومات أو خصائص للعناصر، وتكتب داخل وسم البداية.
أهم العناصر والسمات في HTML
| العنصر| ]------------------------------------------------------------------------------------| الوظيفة|
| --------------------------------------------------------- | --------------------------------- |
| `<html>` | الجذر الأساسي للصفحة|
| `<head>` | يحتوي معلومات غير مرئية للمستخدم|
| `<body>` | يحتوي كل ما يظهر على الصفحة|
| `<h1>` إلى `h6>` | العناوين (من الأكبر إلى الأصغر)|
| `<p>` | فقرة نصية|
| `<a>` | رابط|
| `<img>` | صورة|
| `<br>` | سطر جديد|
| `<hr>` | خط أفقي|
| `<ul>`, `<ol>`, `<li>` | قوائم (مرتبة وغير مرتبة)|
| `<table>`, `<tr>`, `<td>`, `<th>` | جداول|
| `<form>`, `<input>`, `<textarea>` | نماذج|
| `<div>` | حاوية عامة لتنظيم المحتوى|
| `<span>` | حاوية صغيرة لتمييز جزء داخل السطر |
| `<header>`, `<footer>`, `<section>`, `<nav>`, `<article>`| عناصر دلالية (Semantic)|
| السمة|------------------------ الوظيفة|
|--------------------------------------------------- |
| `id` | معرّف فريد للعنصر |
| `class` | تصنيف يمكن استخدامه لأكثر من عنصر |
| `href` | تحديد وجهة الرابط |
| `src` | تحديد مصدر الصورة أو الملف |
| `alt` | نص بديل للصور |
| `title` | نص يظهر عند تمرير المؤشر على العنصر |
| `style` | تنسيقات مباشرة داخل العنصر |
| `target` | تحديد كيف يفتح الرابط (`_blank` يعني في تبويب جديد) |
| `type` | نوع الحقل في النماذج |
| `value` | القيمة الافتراضية في نموذج |
| `placeholder` | نص مساعد يظهر في حقل الإدخال |
مثال بسيط
الفرق بين العناصر الذاتية الإغلاق و غير الذاتية
ملاحظات:
لا تكتب </meta> أو </br>! هذا خطأ.
فقط اغلق ال <
قاعدة ذهبية:
كلما احتوى العنصر على محتوى مرئي أو نصي → فهو يحتاج إغلاق. أما إذا كانت مهمته فقط إضافة معلومات أو تنفيذ وظيفة سريعة → غالبًا يكون ذاتي الإغلاق.
يمكنك ايضا ان تبحث عن العناصر الغير ذاتية الاغلاق واحفظهمالدرس الثالث القوائم والجداول
لقوائم (Lists)
القوائم تُستخدم لعرض مجموعة من العناصر المرتبة أو غير المرتبة بشكل منظم. HTML توفر نوعين أساسيين من القوائم:1. قائمة غير مرتبة (Unordered List) ul
تُستخدم لعرض عناصر بدون ترتيب رقمي أو زمني.
يتم عرضها عادةً بنقاط (•) أو رموز.
أمثلة: قائمة مشتريات، خطوات غير مرتبة، خصائص منتج.
مثال بسيط
النتيجة
تبدأ بالعنصر <ul> = unordered list
بداخلها تضع عناصر <li> = list item
2. القائمة المرتبة <ol>
تبدأ بـ <ol> = ordered list
داخلها نفس الشيء، تستخدم <li> لكل عنصر
مثال بسيط
النتيجة
ملاحظة ذهبية: يوجد اتربيوت يسمى typeيمكنك منه اختيار الرمز الذي تريده للعناصر مثلا يبدا 123 او abc او اي اشي تريده من الارقام والحروف
الجداول
الجدول يُستخدم لعرض البيانات على شكل صفوف وأعمدة، مثل جداول المدرسة أو الإكسل.
مكونات الجدول الأساسية:
<table> ➤ العنصر الرئيسي الذي يحتوي على كل الجدول (مثل الإطار العام).
<tr> (Table Row) ➤ يمثل صفاً في الجدول. كل صف يوضع بداخله خلايا.
<td> (Table Data) ➤ يمثل خلية تحتوي على بيانات عادية (رقم، اسم، معلومة، إلخ).
<th> (Table Header) ➤ يمثل خلية عنوان (مثل "الاسم"، "العمر") وغالباً تكون في أول صف. ➤ يكون نصّها غامق ومركّز بشكل تلقائي.
tfootيكون في نهاية الجدول
مثال بسيط
النتيجة
(Forms)الدرس الرابع النماذج
ما هي النماذج؟
النماذج هي واجهات تتيح للمستخدمين إدخال البيانات والتفاعل مع الموقع، مثل تسجيل الدخول، التسجيل، إرسال استفسارات، أو ملء استبيانات.
عنصر النموذج <form>
هذا هو بداية النموذج، أي جزء خاص بجمع المعلومات من المستخدم. action="submit.php": يعني لما تضغط زر الإرسال، البيانات راح تُرسل إلى ملف أو صفحة اسمها submit.php (عادة هذه الصفحة تعالج البيانات). method="post": طريقة إرسال البيانات، هنا "post" تعني ترسل البيانات في الخلفية ولا تظهر في عنوان المتصفح.تسمية حقل الاسم <label>
تعطي اسم أو وصف للحقل التالي. خاصية for="name" ترتبط مع الـid الخاص بحقل الإدخال لكي تكون العلاقة واضحة، يعني لما تضغط على كلمة "الاسم"، يحدد لك خانة الإدخال.حقل إدخال الاسم <input>
type="text": هذا حقل إدخال نصي عادي.id="name": رقم خاص للحقل مرتبط مع التسمية.
name="name": اسم هذا الحقل الذي سيرسل مع البيانات إلى السيرفر.
placeholder="اكتب اسمك هنا": النص الظاهر داخل الحقل قبل الكتابة، يوجه المستخدم ماذا يكتب.
required: هذه الخاصية تعني أنه لا يمكن ترك هذا الحقل فارغ، لا يسمح بإرسال النموذج بدون تعبئة هذا الحقل
حقل إدخال البريد الإلكتروني <input>
type="email": هذا الحقل مخصص لكتابة بريد إلكتروني، والمتصفح سيتأكد إن المستخدم أدخل بريد إلكتروني صحيح الشكل. باقي الخصائص مثل الحقل الأول: id, name, placeholder, وrequired.تسمية حقل الرسالة <label>
تسمية لحقل الرسالة التي سيكتبها المستخدم. مرتبطة بحقل الإدخال عن طريق for="message".حقل النص الكبير للرسالة <textarea>
<textarea>: مربع نص كبير يمكن كتابة أكثر من سطر.id="message" و name="message": نفس وظيفة الـid والـname كما في الحقول السابقة.
placeholder="اكتب رسالتك هنا": النص التوضيحي داخل الصندوق.
rows="4": ارتفاع الصندوق (عدد الأسطر الظاهرة).
required: المستخدم لازم يكتب شيء هنا حتى يرسل النموذج.
زر الإرسال button>
يمكنك استخدام هذا العنصر خارج وظيفته الحالية وخارج فروم زر عند الضغط عليه، يرسل البيانات إلى الصفحة أو الملف المحدد في خاصية action للنموذج. type="submit": يعني هذا الزر مخصص لإرسال النموذج.<br>
لبدا سطر جديد تستخدم في اي مكان وهي عنصر اغلااق ذاتيعناصر النموذج (Form Elements):
<form> <label> <input> <textarea> <button>سمات النموذج (Attributes):
action — يحدد عنوان الخادم أو الملف الذي ستُرسل إليه البيانات
method — طريقة الإرسال (مثل "post" أو "get")
for — يربط عنصر <label> بحقل معين عبر معرفه (id)
type — نوع حقل الإدخال داخل <input> (مثل "text", "email", "submit")
id — معرف فريد لكل عنصر في النموذج
name — اسم الحقل الذي يستخدم لإرسال البيانات
placeholder — نص يظهر داخل الحقل كدليل للمستخدم
required — يجعل تعبئة الحقل إلزامية قبل الإرسال
rows — عدد الصفوف في <textarea> (ارتفاع مربع النص)
النتيجة
اضغط على الفيديو ليشتغل
(Semantic HTML)الدرس الخامس تقسيم الصفحة
ما هو الـ Semantic HTML؟
Semantic HTML يعني استخدام عناصر HTML التي تصف معنى المحتوى بوضوح. بدل ما تستخدم <div> في كل مكان، تستخدم عناصر توضح الوظيفة مثل:العنصرو المعنى والاستخدام
<header> رأس الصفحة أو القسم – غالبًا يحتوي على شعار أو عنوان أو روابط تنقل
<nav> قائمة التنقل – روابط تؤدي إلى أقسام أخرى داخل الموقع
<main> المحتوى الرئيسي في الصفحة – كل شيء يخص موضوع الصفحة
<section> قسم داخل الصفحة – مجموعة محتوى مترابط مع بعضه
<article> مقال مستقل – مثل منشور مدونة أو خبر
<aside> محتوى جانبي – مثل شريط جانبي أو ملاحظات فرعية
<footer> تذييل الصفحة – يحتوي على حقوق النشر أو روابط تكميلية
ليش نستخدم عناصر دلالية؟
تحسين SEO (محركات البحث تفهم هيكل الصفحة بسهولة)سهولة القراءة والصيانة للمبرمجين
تحسين الوصولية (Accessibility) للمستخدمين ذوي الاحتياجات الخاصة
تنظيم الصفحة بشكل منطقي وواضح
مثال بسيط (بدون كود الآن):
تخيل عندك صفحة فيها:
شعار في الأعلى قائمة روابط (رئيسية، تواصل، حول) مقالة فيها عنوان ونص شريط جانبي فيه روابط إضافية وفي الأسفل يوجد حقوق النشر بدل ما تكتب كل هذا باستخدام <div> فقط، تستعمل: <header> للشعار <nav> للروابط <article> للمقال <aside> للشريط الجانبي <footer> لتذييل الصفحة <main>لمحتوى الصفحة كامل <section>للاقسامالدرس السادس تضمين الوسائط
ما المقصود بتضمين الوسائط؟
هو إضافة ملفات فيديو، صوت، داخل صفحة الويب باستخدام عناصر HTML.أولًا: الصور <img>
العنصر: <img>السمات المهمة:
السمة الوظيفة
src مسار الصورة (رابط أو ملف داخل مجلدك)alt نص بديل يظهر إذا لم تُعرض الصورة
width/height لتحديد الأبعاد (يمكن أيضًا بالـCSS)
مثال
ثانيًا: الفيديو <video>
العنصر: <video>السمات المهمة:
السمة الوظيفة
src مسار الفيديوcontrols يظهر أدوات التحكم
autoplay تشغيل تلقائي (بدون تدخل المستخدم)
loop تكرار التشغيل تلقائيًا
muted يبدأ مكتومًا (ضروري مع autoplay)
width/height لتحديد الأبعاد
مثال
ثالثًا: الصوت <audio>
العنصر: <audio>السمات المهمة:
السمة الوظيفة
src مسار الصوتcontrols لعرض أدوات التشغيل
autoplay تشغيل تلقائي
loop تكرار تلقائي
muted يبدأ بدون صوت
مثال
ملاحظات للمبتدئين:
كل وسائط تحتاج مسار صحيح (داخل مشروعك أو رابط مباشر). دايمًا وفّر alt للصور وcontrols للفيديو/الصوت.بناء موقع كامل بنفسك!!
قائمة طعام بسيطة
صفحة تعرض:
عنوان "قائمة الطعام" عناصر مثل: بيتزا برغر عصير مع صور كل أكلة وأسعارهاصفحة تعريف شخصية (CV)
صفحة فيها:
صورة شخصية معلوماتك (اسم، العمر، الهوايات) و روابط لمواقعك أو حساباتك بـ جدول فيه مهاراتك مثلاً (HTML, CSS, Python) نموذج تواصل معكاو اي فكرة لديك!!