الكورس

Advertisements

HTML Structure | In Arabic


فى هذا الفصل هنتعرف على هيكل مستند HTML الأساسى! بعد ما أنشأنا مستند HTML فى الفصل السابق، حان الوقت لمعرفة وفهم هيكل هذا المستند.


 

هيكل صفحات الويب – HTML Structure

 

فكر معى في القصص والكتب التي تقرأها، ستجد لكل قصة أو كتاب اشياء مشتركة مثل:

  • عنوان رئيسي (Main head) وبعض العناوين الفرعية (Subheadings).
  • فقرات (Paragraphs).
  • صور (Images).
  • إقتباسات (Quotations).

هذا الهيكل يساعد القُراء على فهم القصة أو الكتاب. هذا الهيكل مُشابه جدًا لهيكل صفحة الويب على الانترنت لكن هناك بعض الإختلافات البسيطة التى سنتعرف عليها بالتفصيل فى هذه السلسة.

 


 

هيكل مستند HTML

 

مثال

مستند HTML بسيط:

HTML Structure

We use HTML language for built websites!

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <title>HTML Structure</title>

  </head>
  <body>

    <h1>HTML Structure</h1>
    <p>We use HTML language for built websites!</p>

  </body>
</html>

HTML Structure

We use HTML language for built websites!

 

يتكون أى مستند HTML بشكل أساسى من:

  1. إعلان الـ <DOCTYPE!>
  2. يليه عنصر <html>
  3. ثم يليه عنصر <head>
  4. ثم يليه عنصر <body>

 

وفيما يلى توضيح كامل لهيكل مستند HTML الأساسى:

 

1. إعلان الـ <DOCTYPE!>

 

<!-- This is declaration for "HTML5" -->
<!DOCTYPE html>

 

إعلان <DOCTYPE!> هو إرشاد لمتصفح الويب حول إصدار HTML الذي تمت كتابة الصفحة به. وهذا يضمن أن صفحة الويب يتم تحليلها بنفس الطريقة بواسطة متصفحات الويب المختلفة بشكل صحيح.

عادةً ما يكون إعلان <DOCTYPE!> هو أول شيء يتم تعريفه في مستند HTML (حتى قبل علامة الفتح <html>).

للمزيد من المعلومات حول الـ DOCTYPE وإصدراته، شاهد فصل: HTML DOCTYPES.

 


Advertisements

 

2. عنصر <html>

 

<html>
 <!-- Everything goes in is HTML code -->
</html>

 

العنصر <html> هو حاوية لجميع عناصر HTML ولكل ما يظهر في مستند HTML [باستثناء إعلان <DOCTYPE!>]. وكل شئ يٌكتب بداخلة يعتبر كود HTML.

 

يعرف عنصر <html> أحيانًا بإسم العنصر الجذر root للمستند.


 

3. عنصر <head>

 

<head>
 <!-- A metadata of document -->
</head>

 

يحدد العنصر <head> الجزء الرئيسي من المستند الذي يحتوي على معلومات حول المستند.

العنصر <head> هو حاوية للبيانات الوصفية، ويتم وضعه بعد فتحة وسم الـ <html> وقبل فتحة وسم الـ <body>.

جميع العناصر التي توضع بداخلة ليست المحتوى الذي سوف تعرضه لمشاهدي أو زوار صفحتك، بل هى بيانات وصفية لصفحتك فقط كما قولنا من قبل. بيانات وصفية مثل:

  • نوع ترميز الأحرف (Characters set).
  • العنوان الرئيسي للصفحة (Title).
  • وصف الصفحة الذى تريد ظهوره في نتائج البحث.
  • الكلمات الرئيسية لفهرسة صفحتك فى محرك البحث.
  • مالك الصفحة.
  • إضافة الإعلانات.
  • ملف style الخاص بـ CSS لتصميم محتوى الصفحة.
  • تضمين المكتبات والأٌطر لتحسين ودعم صفحتك، …إلخ.

 

داخل عنصر <head> فى المثال السابق إستخدمنا عنصر:

  1. <meta>: لتعيين مجموعة ترميز الأحرف التي يجب أن يستخدمها مستندك على UTF-8 والذي يتضمن معظم ترميز الأحرف من الغالبية العظمى من اللغات المكتوبة.
  2. <title>: لتحديد العنوان الأساسى لصفحتك، وهو العنوان الذي يظهر في علامة تبويب المتصفح التي يتم تحميل الصفحة فيها ، كما أنه يستخدم لوصف الصفحة عند وضعها فى المفضلة.

 

<meta charset="utf-8">
<title>HTML Structure</title>

Advertisements

 

4. عنصر <body>

 

<body>
<!-- Visible page content -->
</body>

 

يحدد العنصر <body> جسم أو المحتوى الرئيسي للمستند (محتوى الصفحة المرئي).

يحتوي العنصر <body> بداخلة على جميع محتويات مستند HTML الذي سيتم عرضه على الشاشة لزوار موقعك، مثل العناوين والفقرات والصور والروابط والجداول والقوائم ومقاطع الفيديو والصوت، ..إلخ.

داخل عنصر <body> فى المثال السابق إستخدمنا عنصر:

  1. <h1>: لإنشاء عنوان رئيسي.
  2. <p>: لإنشاء فقرة من النص.

 

<h1>HTML Structure</h1>
<p>We use HTML language for built websites!</p>

استخدم العنوان الرئيسي والعناوين الفرعية في أي ملف HTML؛ لأنه غالبا ما تعكس العناوين التسلسل الهرمي للمعلومات. فى فصل HTML Headings هتفهم أكثر أهمية العناوين.


 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Structure” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements