First HTML Document
أول مستند HTML
سنتعلم في هذا الدرس خطوات إنشاء صفحة ويب بالتفصيل على أنظمة التشغيل المختلفة [ Windows - Mac- Linux ]، ثم سنتعلم هيكلة صفحة HTML وسنتطرق إلى العناصر الأساسية لأي صفحة ويب.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Create first HTML document
إنشاء أول ملف HTML
</>
HTML DOCTYPE element
عنصر 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 بعنصر root أو العنصر الأب (عنصر المستوى الأول) لأنه لا يتفرع عن أي عنصر آخر داخل مستند 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>
أساسيات HTML
أساسي
مستند HTML
مستند
بناء الجملة لمستند HTML
محرر
المفكرة الموجودة داخل كل نظام تشغيل
علامات
متصفح الإنترنت
عنصر
الجذر أو الأصل
متداخلة
سمات HTML
عنصر جذر HTML
عنصر عنوان المستند
عنصر جسم المستند
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنتDocument Type
نوع المستند
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
