دورة HTML - الدرس الثاني (العناصر -HTML Elements - )
مرحبا بكم في الدرس الثالث من دورة تعلم لغة البرمجة HTML ان شاء الله تكونوا قد استفدتم من الدروس الماضية
ونأكد على التطبيق انطلاقا من هذا الدرس حتى تترسخ المعلومات التي تأخذونها ...
طيب ماهو HTML Element أو عنصر HTML ؟
عنصر HTML هو كل شيء انطلاقا من بداية الوسم الى نهايته
| وسم البداية | محتوى العنصر | وسم النهاية |
| <p> | هنا فقرة | </p> |
| <a href="default.htm"> | هنا رابط | </a> |
| <br/> | هذا الوسم يترك سطر بمثابة ENTER على الحاسب |
خصائص HTML Elements :
- كل عنصر HTML يبدأ بوسم بداية و ينتهي بوسم اغلاق
- بعض العناصر لا يوجد بها محتوى
- معظم العناصر لها ميزات خاصة
- بامكان عنصر HTML أن يضم عنصر آخر داخله
مثال بسيط :
| <!DOCTYPE html> <html> <head><title> هنا اسم الموقع </title><head> <body> <p>هنا فقرة.</p> </body></html> |
شرح المثال :
- العنصر <p> : <p>هنا فقرة.</p>
- العنصر <title> : <title> هنا اسم الموقع </title>
- العنصر <head> : و هو عنصر يحوي عنصر <title> داخله دائما
- العنصر <body> :
<body><p>هنا فقرة.</p></body>وهنا نرى أن العنصر <body> يضم عنصر آخر داخله و هو العنصر <p>
لاتنسى وسم الغلق :
بعض عناصر الHTML ممكن أن تعرض بشكل صحيح اذا نسينا وسم الاغلاق كمثال :
| <p> هنا الفقرة الأولى<p> هنا فقرة ثانية |
هذا المثال يعرض بشكل صحيح في معظم المتصفحات حتى لو نسينا وسم الاغلاق </p> لكن ذلك لايعمل مع كل العناصر
ففي كثير من الاحيان لا تظهر الصفحة بالشكل المطلوب اذا نسينا هذا النوع من الوسوم
بعض عناصر HTML :
HTML عناوين |
<h1>عنوان حجم كبير</h1>
<h2>عنوان حجم متوسط </h2> <h3>عنوان حجم صغير</h3> |
HTML فقرات |
<p>فقرة الأولى</p>
<p>فقرة أخرى</p> |
HTML روابط |
<a href="https://www.dzlearning.com">رابط موقع تعلم </a>
|
HTML صور |
<img src="هنا رابط الصورة" width="104" height="142">
|
طيب عن طريق هذه العناصر سنصمم صفحة ويب بسيطة اليكم هذا الكود :
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>موقع تعلم</title> </head><body> <h1> موقع تعلم </h1> <img src="https://dzlearning.com/ar/wp-content/uploads/2013/08/3.png" /> </br><p> موقع تعلم المصدر الأول للتعلم </p><a href="www.dzlearning.com" > رابط الموقع</a></body> </html> |
ملاحظة :
الكود meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> الخاص بالميتاتاغ الذي أضفناه
في عنصر <head> هو كود من أجل قراءة المتصفح للغة العربية و سيتم شرحه بالتفصيل في الدروس القادمة باذن الله
ماعليكم سوى اضافته الان في هذا الدرس و ستفهمون عمله ان شاء الله في درس خاص ..
انتهى هذا الدرس نتمنى يكون سهل و بسيط للجميع ..
لاتنسونا من صالح دعائكم ..
تعليقات
إرسال تعليق