اولا العناوين في html

يتم تعريف العناوين مع علامات من <h1> الي <h6>

<h1> يحدد العنوان الأكثر أهمية. <h6> يحدد العنوان الأقل أهمية.

مثال


<h1>عنوان رقم 1</h1>
<h2>عنوان رقم 2</h2>
<h3>عنوان رقم 3</h3>
<h4>عنوان رقم 4</h4>
<h5>عنوان رقم 5</h5>
<h6>عنوان رقم 6</h6>

ملاحظة: تضيف المستعرضات تلقائيا بعض المساحة البيضاء (هامش) قبل العنوان وبعده.


نعم العناوين مهمة !

تستخدم محركات البحث العناوين لفهرسة محتوى صفحات الويب والتفرقة بينهم واضافتهم لمحرك البحث

اغلب المستخدمين يقصدون صفحتك من عنوانها. من المهم استخدام العناوين لإظهار بنية المستند.

<h1> يجب استخدامه العناوين للعناوين الرئيسية، متبوعة بالعناوين، <h2><h3> ثم أقل أهمية، وهكذا.

ملاحظة: نعم استخدم عناوين html للعناوين فقط

لا تستخدم العناوين لجعل النص BIG أو غامق.


عناوين أكبر او اثقل

يحتوي كل عنوان HTML حجم افتراضي. ومع ذلك، يمكنك تحديد حجم أي عنوان مع السمة style ، باستخدام الخاصية font-sizeوهذه الخاصية تتبع ل css التي سنتعلم المزيد عنها في كورس مستقل

يمكنك عمل النص بشكل اثقل للفت الانتباه او الاشارة لشئ او اي استعمال اخر داخل قطعه او باستخدام وسم <b> </b>

مثل

<!-- هذا نص تم تعميل حجمة يدويا بيمكنك تغيير الرقم بنفسك للحجم الذي تبحبه   -->
<h1 style="font-size:50px;">عنوان رقم 1</h1>
<!-- وهذا نص غير عدل لاحظ الفرق بينهما -->
<h1>عنوان رقم 2</h1>
<h1><b> عنوان رقم 3 </b></h1>

قواعد HTML الأفقية

تعرف العلامة فاصلا موضوعيا في صفحة HTML، ويتم عرضها غالبا كقاعدة أفقية.<hr>

<hr> يتم استخدام العنصر لفصل المحتوى (أو تعريف تغيير) في صفحة

مثل

<h1>هذا العنوان رقم 1</h1>
<p>هذه فقرة من النص</p>
<!-- يقوم باضافة خط افقي للفصل بين االمواضيع  -->
<hr>
<h2>هذا العنوان رقم 2</h2>
<p>هذه فقره اخري من النص</p>
<hr>


بعض المعلومات عن عناصر html

عنصر <head> ليس ك عناصر html الاخري حيث انه لا يظهر في الصفحة ولكن تاثيراته تفعل ذلك حيث انه مجرد حاويه لمعلومات الصفحة او المستند والتي قد تحمل عنوان الصفحة او ماهو تنسيق الصفحة او لغتها او ملفات الاستايل والجافا سكربت او الخطوط

العنصر هو حاوية لبيانات التعريف. بيانات تعريف HTML هي بيانات حول مستند HTML. لا يتم عرض بيانات التعريف.<head>

مثل

<!DOCTYPE html>
<html>

<head>
  <title>اول صفحة لي </title>
  <meta charset="UTF-8">
  
</head>

<body>
  <p>مرحبا <p>
 </body>
   </html>

ملاحظة: تعرف بيانات التعريف عادة عنوان المستند ومجموعة الأحرف والأنماط والارتباطات والبرامج النصية والمعلومات الوصفية الأخرى.


الفقرات والقطع في html

يعرف عنصر <p> فقرة او قطعة من النص

  <p> هذه قطعة من النص  <p>
  <p> هذه قطعة اخري من النص  <p>

الاحجام علي الشاشات المختلفة

في الواقع لا يمكن ان نتاكد من احجام النص علي كل الشاشات ولكن القطع بنفسها لا تدعم لاسطر المتعددةفي عنصر واحد

ستظهر جميع السطور متلاصقة ان قمت بفعل هذا

 <p> 
انت هو الافضل 
عمل رائع انت تبلي حسنا
لا تنسي تعلم المزيد معنا
<p>

هل تري ذلك ؟ تلاصق جميع الأسطر مع بعضهم البعض متجاهلا وجود سطر جديد ولكن يمكنك فعلها بعدة طرق اخري مثل

<p> 
انت هو الافضل <br>
عمل رائع انت تبلي حسنا <br>
لا تنسي تعلم المزيد معنا
<p>
  
<p> 
انت هو الافضل <br> عمل رائع انت تبلي حسنا <br> لا تنسي تعلم المزيد معنا
<p>

كما تري بالاعلي عند اضافة <br> يقوم بعمل سطر جديد

ملحوظة : لا تنسي علامة النهاية قد ينتج عن ذلك مشكلات اخري بعد ذلك

الوسم <pre>

يقوم بتعريف عنصر تم تنسيقة مسبقا اي انه يضع النص كما ستكتبه انت دون الحاجة الي تنسيق السطور الاضافية والكثير من الاشياء الاخري

pre هو يصف العنصر الذي تم تنسيقة مسبقا

 <pre> 
انت هو الافضل 
عمل رائع انت تبلي حسنا
لا تنسي تعلم المزيد معنا
تم وضع النص كما كتب بالضبط
<pre>

كما تري في المثال اعلاه تم تنسيق العنصر بدون علامات سطر جديد


كيفية عرض مصدر او كود HTML لأحد المواقع ؟

هل سبق لك أن رأيت صفحة ويب وتساءلت “مهلا! كيف فعلوا ذلك؟”

عرض شفرة المصدر HTML:

انقر بزر الماوس الأيمن في صفحة HTML وحدد “عرض مصدر الصفحة” (في Chrome) أو “عرض المصدر” أو ما شابه ذلك في المتصفحات الأخرى. سيؤدي ذلك إلى فتح إطار يحتوي على التعليمات البرمجية الخاصه ب HTML للصفحة.

فحص عنصر HTML:

انقر بزر الماوس الأيمن فوق عنصر (أو منطقة فارغة) ، واختر “فحص” أو “فحص العنصر” لمعرفة العناصر التي تتكون منها (سترى كل من HTML و CSS). يمكنك أيضا تحرير HTML أو CSS مؤقت في لوحة العناصر أو الأنماط التي تفتح او الضغط علي f12