انت مشغل الـ AdBlock !!
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
الوسوم الأساسية للغة HTML
كما قلنا من قبل ان لغة html وظيفتها هي وصف المحتوى للمُتصفح وذكرنا مثال المقال الذي يتكون من :
- عنوان المقال الذي يجب ان نستخدم له هذا العنصر <h1> </h1>
- محتوى المقال الذي يجب ان نستخدم له هذا العنصر <p> </p>
ولكن إذا ارانا ان نضيف صورة الى الموقع او فيديو او مقطع صوتي او عمل مكونات اخرى للموقع مثل header, footer, sidebar الذي ذكرناهم في هذا الدرس . فما هو الوسم المناسب لكل عنصر؟!
وهذه الوسوم الأساسية للغة html وفى الشرح القادم سنشرح باقي وسوم لغة html
الوسوم الأساسية للغة html
⚠ ولكن قبل الشرح يجب معرفة هذه المعلومة جيداً
(2) الفيديو الخاص ب الوسوم الأساسية للغة HTML
html !DOCTYPE
<!DOCTYPE html>
- هذا هو اول سطر في اكواد لغة html ويكون دائما هو اول سطر قبل جميع الاكواد
- هذا ليس وسم html وانما هو معلومة للمتصفح عندما يقوم بقراءة الاكواد لكي يَعلم ان الاكواد التالية هي اكواد خاصة بلغة html
- هذا ليس case sensitive (تعبير ذكرناه في هذا الدرس ) ويعنى انه يمكننا كتابتها كالتالي ولن يحدث خطأ :
- < DOCTYPE html! >
- < DocType html! >
- < Doctype html! >
- < doctype html! >
HTML <html> tag
<html> </html>
- هذا العنصر يحتوي على جميع عناصر html ماعدا طبعا <!DOCTYPE html> ولكن يأتى بعده مباشرة وهو أيضا يُخبر المتصفح ان هذه الاكواد هي اكواد لغة html
HTML head tag
<head> </head>
وهذا العنصر يكون بداخلة مجموعة من العناصر التي تحتوي على معلومات خاصة بالصفحة ولكن لا تظهر بشكل مباشر للمُستخدم العادي؛ أمثله على هذه العناصر:
- <title> </title> سيتم شرحها في الأسفل
- <style> </style> ويتم وضع اكواد لغة CSS بداخل هذا العنصر
- < base > سيتم شرحه في هذا الدرس ونلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
- < link > سيتم شرحه في هذا الدرس ونلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
- < meta > سيتم شرحه في هذا الدرس ونلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
- <script> </script> ويتم وضع اكواد لغة JavaScript بداخل هذا العنصر
HTML title tag
<title> </title>
- هذا العنصر يكون داخل عنصر ال <head> </head>
- جميع صفحات الويب تحتوي على هذا العنصر لأنه هو الذي يحدد عنوان الصفحة
- والمحتوى بداخله هو الذي يظهر في شريط أدوات المتصفح (browser toolbar) كما هو موضح بالصورة:
- وأيضا المحتوى الذي بداخله هو الذي يظهر في نتائج مُحركات البحث
HTML body tag
<body> </body>
- وبداخل هذا العنصر نضع العناصر التي تصف المحتوى للمتصفح مثل عنوان المقال ومحتوى المقال والصور والفيديوهات
- والمُحتوى بداخل هذا العنصر هو الذي يظهر للمستخدم العادي الذي يتصفح الموقع
HTML h1:h6 tags
<h1> </h1>
- هذا العنصر الذي يصف عنوان الصفحة داخل الموقع الذي يراه زائر الموقع
- وانا كان لدينا أكثر من عنوان داخل الصفحة ف اننا نستخدم الاتي حسب أهمية العنوان:
- <h1> </h1> بداخل هذا العنصر نضع اهم عنوان في الصفحة
- <h2> </h2>
- <h3> </h3>
- <h4> </h4>
- <h5> </h5>
- <h6> </h6> بداخل هذا العنصر نضع العنوان الأقل اهميه في الصفحة
HTML p tag
<p> </p>
- حرف ال p وهو اختصار ل paragraph وترجمتها هي مقال قصير (فقرة) وبالتالي هذا العنصر يكون بداخله مقال قصير.
HTML br tag
<br />
- br اختصار ل break وترجمتها فاصل وتُستخدم لعمل فواصل بين الجُمل
- مثال على ذلك عندما تقوم بكتابة مقال ف إنك تقوم بكتابة اول جملة ثم تريد ان تكون الجملة التأليه من السطر القادم ف إنك تستخدم هذا الوسم بين الجملتين
- ويمكن أيضا ان تُكتب <br > او </ br >
- وكما تلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
HTML hr tag
<hr />
- hr اختصار ل horizontal rule ويُستخدم للفصل بين فقرتين مثلاً؛ بخط أفقي.
- ويمكن أيضا ان تُكتب <hr > او </ hr >
- وكما تلاحظ ان هذا الوسم ليس لديه نهاية وسم (end tag)
HTML <!-- ... --> tag
<!-- ... -->
- المحتوى بداخل هذا العنصر يكون شرح للكود داخل الملف ولكن لا يظهر لزائر الصفحة فقط يظهر للمبرمج الذي يقوم بكتابة اكواد الموقع
- ويستخدم عندما يكتب المبرمج بعض الاكواد المعقدة او لعمل شرح للأكواد لكي يسهل على المبرمج الذي سيقوم بالتعديل او تحديث الموقع في المستقبل
المُلخص
هذا المثال يحتوى على جميع الوسوم التى تم ذكرها فى هذا الشرح
<!DOCTYPE html>
<html>
<head>
<title>Courses 4 Arab</title>
</head>
<body>
<!-- المقدمة -->
<h1>أهم لغات برمجة المواقع</h1>
<p>
يوجد العديد من لغات برمجة المواقع ولكن اهمهم
<br /> html لغة
<br /> css لغة
</p>
<hr />
<!-- المقال الاول -->
<h2>html لغة</h2>
<p>.... هى ليست لغة برمجة وهى اختصار ل</p>
<hr />
<!-- المقال الثانى -->
<h2>css لغة</h2>
<p>وهى ليست لغة برمجة ولكن هى المسؤلة عن شكل العنصر</p>
</body>
</html> وهذه هى النتيجة النهائية التى سوف تَظهر ل زائر الموقع
