HTML

First HTML Document
أول مستند HTML

سنتعلم في هذا الدرس خطوات إنشاء صفحة ويب بالتفصيل على أنظمة التشغيل المختلفة [ Windows - Mac- Linux ]، ثم سنتعلم هيكلة صفحة HTML وسنتطرق إلى العناصر الأساسية لأي صفحة ويب.

التاريخ

29 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

5447

المواضيع

12
الشروحات chevron_left First HTML Document chevron_left HTML

Create first HTML document
إنشاء أول ملف HTML

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> HTML DOCTYPE element
عنصر DOCTYPE في لغة HTML

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

أين يكتب عنصر DOCTYPE؟

  • يكتب عنصر DOCTYPE دائمًا بداخل صفحات HTML في المقدمة أي أنه يسبق جميع العناصر، وهو من نوع العنصر الفارغ "empty element".


وظيفة عنصر DOCTYPE:

  • منح المتصفح معلومات حول إصدار وطريقة عرض عناصر HTML عند عرض مستند HTML على المتصفحات.
  • يساعد المتصفحات لعرض مستند HTML بطريقة صحيحة.


استخدام DOCTYPE بطريقة صحيحة:

  • موقع الويب يتكون من عدّة صفحات، كل صفحة يجب أن تبدأ بعنصر <DOCTYPE!>.
  • يجب أن يسبق كلمة DOCTYPE علامة التعجب !.
  • عنصر <DOCTYPE!> يمكن أن يُكتب بحروف كبيرة <DOCTYPE!> أو حروف صغيرة <doctype!> كلاهما صحيح، ولكن يُفضل أن يُكتب بهذا الشكل <DOCTYPE!>.
  • يجب على مطوري مواقع الويب تحديد إصدار HTML للمتصفحات وذلك عن طريق إضافة خاصية html والتي تضاف داخل عنصر <DOCTYPE!>.
  • الشكل النهائي بعد إضافة خاصية html وعلامة التعجب هو <DOCTYPE html!>.


معلومات حول عنصر DOCTYPE:

  • يحدد عنصر <DOCTYPE!> إصدار لغة HTML، ويساعد المتصفحات في عرض الصفحة بطريقة صحيحة.
  • عند كتابة html attribute داخل عنصر <DOCTYPE!> فإننا بذلك نخبر المتصفح أن الإصدار المستخدم هو آخر إصدار من لغة HTML وهو الإصدار الخامس HTML5.
  • تحتوي الإصدارات المختلفة من HTML على طريقة كتابة وملامح مختلفة، لذلك يحتاج المتصفح إلى معرفة إصدار HTML الذي تمت كتابة صفحة الويب به حتى يتمكن من تفسير الشفرة أو الكود بشكل صحيح.
DOCTYPE

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

<!DOCTYPE>
DOCTYPE!

لا تنسَ إضافة علامة التعجب قبل كلمة DOCTYPE بداخل علامة <DOCTYPE!>.

<!DOCTYPE>
html attribute

إضافة خاصية html attribute بداخل عنصر <DOCTYPE!> لمساعدة المتصفح في تحديد إصدار لغة HTML، والذي هو HTML5.

<!DOCTYPE html>

</> HTML root elements
العناصر الأساسية في لغة HTML

عنصر html هو أكبر عنصر في صفحة HTML، وهو العنصر الذي يحتوي جميع العناصر بداخله.
يُسمى عنصر html  بعنصر root أو العنصر الأب (عنصر المستوى الأول) لأنه لا يتفرع عن أي عنصر آخر داخل مستند HTML.
يجب أن تكون جميع العناصر الأخرى مُتفرعة عن هذا العنصر باستثناء عنصر DOCTYPE.

أين يكتب عنصر html ؟
  • يكتب دائمًا بداخل صفحة الويب وهو الذي يحتوي على جميع العناصر بداخله عدا عنصر DOCTYPE، ويتفرع منه عنصران فقط هما head و body.

وظيفة عنصر html

  • يستخدم لاحتواء جميع عناصر صفحة الويب ولا يمكن أن يتكرر داخل صفحة الويب وهو عنصر مُتداخل "nested element".

استخدام html بطريقة صحيحة:

لكي يتم عرض صفحة HTML دون حدوث مشاكل؛ يجب أن يتم مراعاة الملاحظات التالية:

  • لا يسبق عنصر html إلا عنصر واحد فقط، وهو DOCTYPE.
  • لا يلي عنصر html أي عنصر آخر.
  • لكل صفحة ويب عنصر html واحد فقط فيجب ألا يتكرر عنصر html داخل مستند HTML.
HTML root element

طريقة كتابة عنصر html وعنصر <DOCTYPE!> (العنصر الوحيد) الذي يسبقه.

<!DOCTYPE html>
<html>

</html>

</> HTML head element
عنصر head في لغة HTML

يُعتبر عنصر head مجموعة من الـ document metadata elements أي أنه يشمل العناصر التي تحتوي على معلومات أو إعدادات صفحة HTML، حيث يحتوي عنصر head على معلومات يُمكن قراءتها من المتصفحات أو محركات البحث.


أين يُكتب عنصر head

يُكتب دائمًا داخل عنصر html، وهو العنصر الأول داخل html.

عنصر head هو من نوع العناصر المُتداخلة "nested elements"، ولا يمكن أن يتكرر داخل صفحة HTML.


وظيفة عنصر head

  • يحتوي عنصر head بداخله على عنصر title الذي يُضيف عنوان لصفحة HTML على المتصفح.
  • يُضيف عنصر head بيانات يتم قراءتها آليًا (بيانات وصفية) حول المستند أو صفحة الويب، مثل عنوان الصفحة أو وصف الصفحة أو صورة معبرة عنها.
  • يُضيف عنصر head بيانات يتم قراءتها بواسطة محركات البحث "search engines"؛ لكي يتم تحسين ترتيب موقعك عبر محركات البحث.
  • يُضيف بيانات يتم قراءتها بواسطة أي تطبيق آلي للتعرف على المعلومات الموجودة على الصفحة.


استخدام head بطريقة صحيحة

لكي تستخدم عنصر head بطريقة صحيحة في صفحة الويب يجب مراعاة الأمور التالية:

  • يجب ألا يتكرر عنصر head في صفحة HTML.
  • يجب أن يكون عنصر head من نوع العناصر المُتداخلة "nested elements".
  • يجب ألا يسبق عنصر head أي عنصر آخر داخل عنصر html.
  • يجب أن يكون عنصر head قبل عنصر body.
  • يجب أن يحتوي عنصر head بداخله على عنصر title.
Head element structure

يُكتب عنصر head بهذا الشكل:

<head>
    ... Content Here
</head>
Head element

مثال لعنصر head element داخل صفحة HTML وهو عنصر مُتداخل "nested element" أي أنه يحتوي على عناصر داخلية، مثل: title element.

<!DOCTYPE html>
<html>
    <head>
       
    </head>
</html>
ملاحظة
  • يحتوي head بشكل أساسي على معلومات لمعالجة الصفحة آليًا، مثل: قراءة معلومات عن الصفحة من خلال محركات البحث.
  • لا يحصل مستخدمي صفحة الويب على معلومات من خلال head elements، لكن يظهر لهم عنوان الصفحة فقط "title"، والذي يظهر على متصفح الويب.
  • يحصل المستخدمين من عنصر head على بعض المعلومات، مثل: المؤلفين المُدرجين ومراجع الصفحة فقط.

</> HTML title element
عنصر title في لغة HTML

يُحدد عنصر title عنوان مستند HTML الذي يظهر في شريط عنوان المتصفح أو علامة تبويب الصفحة "tab".

يجب أن يحتوي عنصر title على نص فقط، حيث يتم تجاهل علامات HTML "< >" داخل العنصر ولكن تظهر العلامات الأخرى مثل $ و# إلخ ...


أين يكتب عنصر title ؟

  • يكتب عنصر title دائمًا داخل عنصر head، وهو عنصر مُتداخل "nested element".


وظيفة عنصر title

  • يستخدم لوضع عنوان لصفحة الويب على المتصفح، وذلك لكي يساعد المستخدمين في التعرف على أسماء صفحات الويب المفتوحة حاليًا على المتصفح.
  • يساعد محركات البحث في قراءة عناوين ومحتوى صفحة الويب، مما يجعل ترتيب موقعك في مقدمة الصفحات.


استخدام عنصر title بطريقة صحيحة

  • يجب أن يصف عنصر العنوان "title" اسم الصفحة، فمثلًا الصفحة الرئيسية "Home Page".
  • يُفضل استخدام علامة dash "-" أو علامة "|" إذا كان هناك صفحات فرعية أو يحتوي العنصر على أكثر من كلمة، مثال: [ CloseTag | Home Page ].
  • يجب أن يحتوي العنوان على اسم موقع أو تطبيق الويب، مثال [ CloseTag | Home Page ].
  • تجنب وضع قائمة من الكلمات مثل أسماء الدورات، ولكن قم بكتابة اسم الدورة أو اسم الدرس فقط، على سبيل المثال: [ CloseTag | Courses | HTML ].
  • يجب عليك اختيار اسم مختلف وغير مكرر  لكل صفحة من صفحات موقع الويب.
title element

مثال على طريقة كتابة عنصر title element.

<title> Closetag | Home Page </title>
title element syntax

طريقة كتابة عنصر title يحتوي بداخله نصوص فقط.

<!DOCTYPE html>
<html>
    <head>
        <title> Closetag | Home Page </title>
    </head>
</html>
ملاحظة
  • يجب عليك أن تكتب العنوان "title" مختلف إذا كان لموقع الويب أكثر من لغة، فمثلًا: يكون العنوان باللغة العربية عندما تعرض صفحة ويب عربية. ويكون العنوان باللغة الإنجليزية عندما يتم عرض الصفحة باللغة الإنجليزية.
  • يجب عليك أن تكتب العنوان "title" بلغة عرض صفحة الويب أي أنه إذا كان لموقع الويب أكثر من لغة، فمثلًا: يكون العنوان باللغة العربية عندما تعرض صفحة ويب عربية. ويكون العنوان باللغة الإنجليزية عندما يتم عرض الصفحة باللغة الإنجليزية.

</> HTML body element
عنصر body في لغة HTML

عنصر body هو حاوية تشمل جميع العناصر المرئية التي تظهر أمام زوار صفحة الويب، مثل: العناوين، والفقرات النصية، والصور، والجداول، والقوائم، وأي عناصر مرئية أخرى.


أين يُكتب عنصر body؟

  • يكتب دائمًا داخل عنصر html بعد عنصر head، وهو عنصر مُتداخل "nested element".


وظيفة عنصر body:

  • يُستخدم لاحتواء جميع العناصر المرئية للمستخدمين أو زوار صفحة الويب، مثل: الصور، والعناوين، والفقرات النصية.
  • يساعد محركات البحث في قراءة عناوين ومحتوى صفحة الويب، مما يؤدي إلى تحسين ترتيب موقعك في محركات البحث.


استخدام عنصر body بطريقة صحيحة:

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

  • يُكتب عنصر body دائمًا داخل عنصر <html>، ويأتي أسفل عنصر head.
  • يجب أن يأتي عنصر <head> قبل عنصر <body>.
  • عنصر body من نوع العناصر المُتداخلة "nested elements".
  • لا يمكن تكرار عنصر <body> داخل نفس صفحة الويب، أي أنه يوجد عنصر body واحد فقط داخل صفحة الويب.
  • عنصر <body> هو آخر عنصر بداخل عنصر <html> ولا يوجد أسفله أي عناصر أخرى.
HTML body element

عنصر body يأتي دائمًا داخل عنصر html وأسفل عنصر head.

<!DOCTYPE html>
<html>
    <head>
        <title> Closetag | Home Page </title>
    </head>
    <body>

    </body>
</html>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات