العناوين والنصوص في Html

العناوين والنصوص <h?>

شرح للوسوم الأساسية للعناوين والنصوص

العناوين من H1 إلى H6 الفقرات النصية السطر الجديد الخط الأفقي تنسيقات النص الإضافية أمثلة تطبيقية تمرين عملي

العناوين من H1 إلى H6: هرمية واضحة للمحتوى

في HTML، نستخدم وسوم العناوين من <h1> إلى <h6> لإنشاء عناوين ذات مستويات مختلفة. وسوم العناوين هذه ضرورية لتنظيم المحتوى وتعزيز تجربة المستخدم وتحسين محركات البحث (SEO).

مثال على العناوين بمستوياتها المختلفة:

<h1>هذا عنوان رئيسي كبير (المستوى الأول)</h1>
<h2>هذا عنوان فرعي (المستوى الثاني)</h2>
<h3>هذا عنوان أصغر (المستوى الثالث)</h3>
<h4>هذا عنوان (المستوى الرابع)</h4>
<h5>هذا عنوان (المستوى الخامس)</h5>
<h6>هذا عنوان صغير (المستوى السادس)</h6>

النصائح المهمة لاستخدام العناوين:

1. يجب استخدام <h1> مرة واحدة فقط في الصفحة كعنوان رئيسي
2. الحفاظ على تسلسل منطقي للعناوين (لا تنتقل من h1 إلى h3 مباشرة)
3. استخدام العناوين لتنظيم المحتوى وليس فقط لتغيير حجم النص
4. جعل العناوين وصيفة للمحتوى الذي يليها

مثال لتسلسل صحيح للعناوين:

<h1>عنوان المقال الرئيسي</h1>
<h2>القسم الأول من المقال</h2>
<h3>فرع داخل القسم الأول</h3>
<h2>القسم الثاني من المقال</h2>

الفقرة النصية: <p> - أساس المحتوى النصي

وسم <p> يُستخدم لإنشاء فقرات نصية في HTML. يقوم المتصفح تلقائيًا بإضافة مسافة (هامش) قبل وبعد كل فقرة.

مثال بسيط للفقرات النصية:

<p>هذه فقرة نصية عادية. يمكن أن تحتوي على أي amount من النصوص والكلمات.</p>
<p>هذه فقرة نصية أخرى. لاحظ المسافة التي يضيفها المتصفح تلقائيًا بين الفقرات.</p>

مثال متقدم مع العناوين والفقرات:

<h1>مقال عن تعلم HTML</h1>
<p>HTML هي لغة ترميز تستخدم لإنشاء صفحات الويب.</p>

<h2>مزايا تعلم HTML</h2>
<p>تعلم HTML يمنحك القدرة على إنشاء مواقع الويب الخاصة بك.</p>
<p>كما أنه يمثل الخطوة الأولى في رحلة تعلم تطوير الويب.</p>

<h2>الوسوم الأساسية في HTML</h2>
<p>هناك العديد من الوسوم في HTML، each with its own purpose.</p>

لاحظ كيف أن كل فقرة تبدأ بوسم <p> وتنتهي بوسم </p>. هذه هي الطريقة الصحيحة لإنشاء الفقرات النصية.

السطر الجديد: <br> - كسر الأسطر بدون فقرة جديدة

وسم <br> يُستخدم لإدراج فواصل أسطر داخل النص. وهو من الوسوم الفارغة (لا تحتاج إلى وسم إغلاق في HTML5).

الفرق بين <p> و <br>:

<p> يُنشئ فقرة جديدة مع مسافات قبلها وبعدها، بينما <br> ينتقل فقط إلى السطر التالي دون إضافة مسافات.

مثال على استخدام <br>:

<p>
  هذا السطر الأول.<br>
  هذا السطر الثاني بعد كسر السطر.<br><br>
  سطر فارغ بيني وبين السطر السابق.<br>
  وهذا آخر سطر.
</p>

مثال عملي لعنوان وعنوان فرعي:

<h3>معلومات الاتصال</h3>
<p>
  الاسم: أحمد محمد<br>
  البريد الإلكتروني: ahmed@example.com<br>
  الهاتف: 0123456789
</p>

ملاحظة: لا تستخدم <br> repeatedly لإنشاء مسافات كبيرة بين العناصر. استخدم CSS للتحكم في المسافات.

الخط الأفقي: <hr> - فاصل موضوعي

وسم <hr> يُستخدم لإدراج خط أفقي فاصل بين أقسام المحتوى. وهو أيضًا من الوسوم الفارغة.

مثال على استخدام <hr>:

<h2>القسم الأول</h2>
<p>هذا محتوى القسم الأول من الصفحة.</p>

<hr>

<h2>القسم الثاني</h2>
<p>هذا محتوى القسم الثاني من الصفحة.</p>

<hr>

<h2>القسم الثالث</h2>
<p>هذا محتوى القسم الثالث من الصفحة.</p>

مثال متقدم مع استخدامات مختلفة للخط الأفقي:

<article>
  <h1>عنوان المقال الرئيسي</h1>
  <p>مقدمة المقال.</p>
  
  <hr>
  
  <h2>الجزء الأول من المقال</h2>
  <p>محتوى الجزء الأول.</p>
  
  <hr>
  
  <h2>الجزء الثاني من المقال</h2>
  <p>محتوى الجزء الثاني.</p>
  
  <hr>
  
  <h2>خاتمة المقال</h2>
  <p>الخاتمة والاستنتاجات.</p>
</article>

يُستخدم <hr> لفصل between different thematic sections of content. وهو أكثر من مجرد خط decorational، فهو يحمل meaning semantique.

تنسيقات النص الإضافية: جعل النص غامقًا ومائلًا وغير ذلك

بالإضافة إلى العناوين والفقرات، تقدم HTML وسومًا خاصة لتنسيق النص:

وسوم التنسيق الأساسية:

<p>
  هذا نص <strong>مهم جدًا</strong>.<br>
  هذا نص <em>مائل</em>.<br>
  هذا <mark>نص مميز</mark>.<br>
  هذا <small>نص صغير</small>.<br>
  هذا <del>نص محذوف</del>.<br>
  هذا <ins>نص مضاف</ins>.<br>
  هذا <sub>نص منخفض</sub> وهذا <sup>نص مرتفع</sup>.
</p>

مثال تطبيقي على استخدام وسوم التنسيق:

<h3>وصفة كعك الشوكولاتة</h3>
<p>
  <strong>المقادير:</strong><br>
  - 2 كوب دقيق<br>
  - 1 <sup>1</sup>/<sub>2</sub> كوب سكر<br>
  - 3 بيضات<br>
  - <em>رشة ملح</em><br>
</p>
<p>
  <mark>ملاحظة:</mark> يجب تسخين الفرن مسبقًا إلى 180 <sup>o</sup>C.
</p>

هذه الوسوم تساعد في إضافة emphasis ودلالات إضافية للنص، مما يحسن accessibility وسهولة القراءة.

أمثلة تطبيقية: دمج كل ما تعلمناه معًا

الآن لنطبق كل ما تعلمناه في مثال متكامل يوضح كيفية استخدام العناوين والفقرات ووسوم التنسيق معًا.

مثال 1: صفحة ويب بسيطة عن كتاب

<h1>العادات السبع للناس الأكثر فعالية</h1>
<h2>بقلم ستيفن كوفي</h2>

<hr>

<h3>ملخص الكتاب</h3>
<p>
  هذا الكتاب يُعد من أشهر الكتب في مجال تطوير الذات والقيادة. 
  يقدم الكاتب <strong>سبع عادات</strong> يمكن أن transform حياة الأشخاص 
  وتجعلهم أكثر فعالية في حياتهم الشخصية والمهنية.
</p>

<h3>العادات الأساسية</h3>
<p>
  <strong>العادة الأولى: كن proactive</strong><br>
  التركيز على الدائرة التي يمكنك التأثير فيها بدلاً من الانشغال بما هو beyond سيطرتك.
</p>

<p>
  <strong>العادة الثانية: ابدأ والنهاية في ذهنك</strong><br>
  حدد أهدافك وvision لحياتك قبل أن تبدأ في العمل towards تحقيقها.
</p>

<hr>

<p><small>جميع الحقوق محفوظة للناشر الأصلي</small></p>

مثال 2: صفحة شخصية بسيطة

<h1>السيرة الذاتية</h1>
<h2>أحمد محمد</h2>

<hr>

<h3>معلومات شخصية</h3>
<p>
  البريد الإلكتروني: ahmed@example.com<br>
  الهاتف: 0123456789<br>
  العنوان: القاهرة، مصر
</p>

<h3>المؤهلات العلمية</h3>
<p>
  <strong>بكالوريوس في علوم الحاسب</strong><br>
  جامعة القاهرة - 2015-2019<br>
  التقدير: جيد جدًا
</p>

<h3>المهارات</h3>
<p>
  - HTML & CSS<br>
  - JavaScript<br>
  - React<br>
  - Node.js
</p>

<hr>

<p><em>آخر تحديث: يناير 2023</em></p>

تمرين عملي: أنشئ صفحتك الأولى بالعناوين والنصوص

الآن حان وقت التطبيق العملي. ستقوم بإنشاء صفحة ويب كاملة باستخدام كل ما تعلمته في هذا الدرس.

خطوات التمرين:

1. افتح محرر النصوص الخاص بك وأنشئ ملفًا جديدًا.
2. ابدأ ببنية HTML الأساسية (html, head, body).
3. inside الجزء body، أنشئ المحتوى التالي:

<h1>مدونتي الشخصية</h1>
<h2>مرحبًا بكم في مدونتي</h2>

<hr>

<h3>عن المدونة</h3>
<p>
  هذه المدونة شخصية أكتب فيها about مواضيع تهمني في مجالات التكنولوجيا، 
  البرمجة، وتطوير الذات. أشارك فيها تجاربي وآرائي وخبراتي.
</p>

<h3>أحدث المقالات</h3>

<h4>كيفية تعلم البرمجة من الصفر</h4>
<p>
  في هذا المقال، أشارك نصائح واستراتيجيات لأي شخص يريد بدء رحلة تعلم البرمجة 
  بدون خبرة مسبقة. سأحدثك عن المصادر والأدوات والخطوات التي يمكنك اتباعها.
</p>

<h4>أهمية إدارة الوقت للعاملين في المجال الرقمي</h4>
<p>
  إدارة الوقت من المهارات الأساسية لأي شخص يعمل في المجال الرقمي. 
  في هذا المقال، أستعرض بعض التقنيات والأدوات التي تساعد على تحسين إنتاجيتك.
</p>

<hr>

<p>
  <small>جميع الحقوق محفوظة © 2023</small>
</p>

4. احفظ الملف باسم blog.html.
5. افتح الملف في المتصفح وشاهد النتيجة.
6. قم بالتعديلات التي ترغب فيها وأضف محتوى من عندك.

تحدي إضافي (اختياري):

حاول إنشاء صفحة سيرة ذاتية كاملة لك، تتضمن:

• عنوان رئيسي باسمك
• sections للمعلومات الشخصية، التعليم، الخبرات، والمهارات
• استخدم جميع وسوم التنسيق التي تعلمتها
• أضف خطًا أفقيًا between الأقسام المختلفة

تهانينا! لقد أكملت الدرس الثاني بنجاح. الآن أصبحت تعرف كيفية إنشاء العناوين والفقرات وإضافة فواصل الأسطر والخطوط الأفقية في HTML. في الدروس القادمة، سنتعلم المزيد من الوسوم لإثراء صفحاتنا بمحتوى أكثر تنوعًا.

تعلم Html

أساسيات لغه Html وكيفيه كتابه الكود

أساسيات لغه Html

يعني إيه HTML وإزاي نكتب أول كود؟

HTML يعني إيه؟ إزاي أبدأ ملف جديد؟ إزاي أحفظ الملف؟ إزاي أفتحه في المتصفح؟ أول كود كامل أمثلة كتيرة صور تخيلية بالكود تمرين عملي

HTML يعني إيه؟ بالتفصيل يا معلم

بطريقة بسيطة: HTML هيا لغة بتستخدم علامات معينة عشان توصف محتوى صفحة الويب وتحدد هيكلها. زي ما المهندس بيعمل مخطط للبيت قبل ما يتبني، HTML هي المخطط بتاع الصفحة. والمتصفح هو العامل اللي بيبني الصفحة بناءاً على المخطط ده.

طيب، يعني الكود شكله إزاي؟ شكله بيبقى زي ده:

<p>أنا نص عادي جوه فقرة</p>

شايف العلامة <p> في الأول و </p> في الآخر؟ دي اسمها "وسم" أو "tag". الوسم ده معناها "فقرة" أو Paragraph. المتصفح هيعرض اللي جوه بينهم كنص عادي.

وطبعًا في HTML في كذا وسم مختلف لكل حاجة: عناوين، صور، روابط، قوائم، جداول، الخ. لكن النقطة المهمة ان كل وسم بيفتح <اسم الوسم> وبيقفل </اسم الوسم>، والمحتوى بيكون جوههم.

إزاي أبدأ ملف جديد؟ خطوة خطوة

عشان تكتب HTML محتاج أي برنامج يسمح لك تكتب نص. أبسط حاجة عندك: "المفكرة" (Notepad) اللي موجودة في كل كمبيوتر.

لو عايز برنامج احترافي أكتر ومريح، أنصحك تنزل Visual Studio Code (بيختصروه في VS Code). ده برنامج مجاني ومصمم خصيصًا للمبرمجين، وهيسهل حياتك كتير. لكن لو لسة مبتدئ ومش عايز تنزل حاجة جديدة، المفكرة هتعملك المطلوب.

خطوات بدء الملف من الأول:
1. اضغط كليك يمين على أي مكان على الديسكتوب او في الفولدر اللي انت عايزه
2. اختار "New" ثم "Text Document" (مستند نصي)
3. هتلاقي ملف اسمو "New Text Document" او حاجة شبه كده
4. سمي الملف بأي اسم انت عايزه (مثلاً: "أول صفحة")
5. اضغط Enter عشان توافق على الاسم
6. افتح الملف دبل كليك، وهيفتح في المفكرة
7. هتلاقي صفحة بيضا. هنا هتكتب الكود.

ومتقلقش، الكود ده مجرد كلام عادي، مش هيبوظ الكمبيوتر لو غلطت. ومفيش حاجة اسمها "كود خطير" في HTML، فأنت اكتب براحتك من غير خوف.

إزاي أحفظ الملف؟ وخطورة النسيان!

لما تخلص كتابة الكود، لازم تحفظ الملف بامتداد .html. يعني: اسم الملف متبوع بـ .html.

ليه؟ عشان تعرف المتصفح ان ده ملف HTML مش مجرد ملف نصي عادي.

مثال: myfirstpage.html او اول-صفحة.html

لو نسيت تكتب .html، او كتبت extension تاني، المتصفح مش هيفهم ان ده ملف HTML وهيعتبره ملف نص عادي ومش هيعرضه كصفحة ويب. فخلي بالك من النقطة دي!

طريقة الحفظ:
1. في المفكرة، اضغط على File ثم Save As
2. في النافذة اللي هتفتح، اكتب اسم الملف والامتداد .html
3. تحت اسم الملف، تأكد ان نوع الحفظ هو "All Files" مش "Text Documents"
4. اضغط على Save

إزاي أفتح الملف في المتصفح؟ وجربه على طول!

بعد ما حفظت الملف بالامتداد الصحيح، روح على المكان اللي حفظت فيه الملف (على الديسكتوب مثلاً). هتلاقي أيقونة الملف شكلها اختلفت بقت على شكل المتصفح اللي عندك.

اضغط دبل كليك عليه، وهيفتح تلقائيًا في متصفح الإنترنت اللي عندك. فجأة هتشوف اللي كتبته بيظهر كصفحة ويب حقيقية!

لو عايز تغير في الكود، روح غير في الملف في المفكرة وحفظه تاني، بعد كده روح على المتصفح واضغط F5 عشان يحدث الصفحة ويظهرلك التغييرات.

أول كود كامل - دي اساسيات الاساسيات

يلا نكتب أول صفحة كاملة. انسخ الكود ده جوه المفكرة:

<!DOCTYPE html>
<html>
  <head>
    <title>أول صفحة HTML</title>
  </head>
  <body>
    أهلاً بيك! أنا لسه كاتب أول كود HTML في حياتي
  </body>
</html>

خلينا نفكك الكود ده عشان تفهم كل حاجة:

<!DOCTYPE html>: دي مش وسم، دي جملة تعريفية بتقول للمتصفح ان ده ملف HTML.
<html>: ده الوسم الأساسي اللي بيحط كل حاجة في الصفحة، كل الوسوم التانية بتكون جواه.
<head>: الجزء ده بيتحط فيه معلومات عن الصفحة مش محتوى الصفحة نفسها.
<title>: بيحدد عنوان الصفحة اللي بيظهر في tab المتصفح.
<body>: ده اهم جزء، جوه بيكون كل المحتوى اللي انت عايزه يظهر في الصفحة.

احفظ الملف باسم first.html، وافتحه من المتصفح. هتلاقي العنوان فوق في التاب مكتوب "أول صفحة HTML"، وجوه الصفحة مكتوب "أهلاً بيك! أنا لسه كاتب أول كود HTML في حياتي".

أمثلة كتيرة عشان تتأكد إنك فاهم

خلينا نديك أكتر من تجربة عشان تتأكد إنك فاهم وتلعب بالكود براحتك:

مثال 1: تغيير النص

<body>
  اسمي أحمد ودي أول صفحة ليا
</body>

غير النص ده واكتب اسمك، وشوف النتيجة!

مثال 2: سطرين نص

<body>
  أول سطر
  سطر جديد
</body>

هتلاقي انهم ظهروا في سطر واحد! ليه؟ عشان HTML بتحتاج وسوم خاصة عشان تعمل سطر جديد، ومش بكرة Enter بس.

مثال 3: جملة مضحكة

<body>
  الكمبيوتر مش هيولع من الكود ده، متخافش :)
</body>

جرب تكتب أي حاجة، ومتقلقش مفيش حاجة حتحصل للكمبيوتر!

مثال 4: عنوان كبير

<body>
  <h1>ده عنوان كبير جدًا</h1>
  <p>ده نص عادي تحت العنوان</p>
</body>

شوف الفرق بين الوسم <h1> للعناوين الكبيرة والوسم <p> للفقرات العادية.

صور تخيلية بالكود عشان تتخيل شكل الصفحة

تعال نرسم صورة تخيلية بالكتابة، علشان تتخيل شكل الصفحة:

+-----------------------------------+
|  عنوان المتصفح: أول صفحة HTML     |  <-- ده الجزء اللي بيتحط في <title>
+-----------------------------------+
|                                   |
| أهلاً بيك! أنا لسه كاتب كود HTML |  <-- ده المحتوى اللي في <body>
|                                   |
+-----------------------------------+
          

شايف؟ الكود اللي كتبته بيظهر كده قدامك. يعني أي نص تحطه بين <body> و </body> هيبان في الصفحة.

ولو حطيت روابط او صور، هتظهر في المكان اللي انت حطيت فيه الكود بتاعها. فالفكرة بسيطة: انت بتكتب وسم والمتصفح بيحوله لعنصر في الصفحة.

تمرين عملي - جرب بنفسك!

دلوقتي دورك تجرب وتلعب بالكود عشان تتأكد انك فاهم:

1. افتح المفكرة، واعمل ملف جديد
2. اكتب الكود الأساسي اللي فهمناه (<html>, <head>, <body>)
3. في الـ <title> اكتب "صفحتي الأولى"
4. في الـ <body> اكتب:
- "أنا بحب أتعلم HTML" في سطر
- "دي محاولتي الأولى" في سطر تاني
5. احفظ الملف باسم try.html. 6. افتحه في المتصفح وشوف النتيجة.

متنساش تجرب تكتب حاجات مختلفة وتشوف النتيجة!

ولو حابب تفتكر النقاط المهمة:
- HTML هيا لغة توصيف وليس برمجة
- كل وسم بيفتح <اسم> وبيقفل </اسم>
- المحتوى بيتحط بين الوسم الفاتح والوسم القافل
- لازم تحفظ الملف بامتداد .html
- المتصفح هو اللي بيحول الكود لصفحة ويب

تعلم Html