بسم الله الرحمن الرحيم
هذه سلسلة من المواضيع التي سيتم نشرها في مجموعة من المنتديات التطويرية منقولة عن
مدرسة الويب العربي التي تترجم دروس الموقع العالمي
w3Schools .
------------------------------------
- اسم الدرس: الأوسمة الأساسية
- وصف الدرس: درس يشرح الأوسمة الأساسية للغة HTML كما يقدم الكثير من الأمثلة.
- القسم: HTML
------------------------------------
إن الأوسمة الأكثر أهمية في HTML هي الأوسمة التي تعرِّف العناوين, الفقرات و نهاية الأسطر.
أفضل طريقة لتعلم HTML هي بالأمثلة. قمنا بإنشاء محرر HTML جميل جداً من أجلك. مع هذا المحرر, يمكن تحرير نص HTML الأصلي, ثم تقوم بعد ذلك بالضغط على زر عرض النتيجة لتظهر لك نتيجة الشيفرة التي قمت بإدخالها.
جرِّبها بنفسك - أمثلة
أبسط مثال لمستند HTML
هذا أبسط مثال لمستند HTML, بالحد الأدنى من أوسمة HTML. يظهر في هذا المثال كيف تجعل النص داخل عنصر جسم الصفحة.
الفقرات البسيطة
يظهر في هذا المثال كيف تجعل النص داخل الفقرات.
(يوجد أمثلة أكثر أسفل هذه الصفحة)
العناوين
العناوين تم تعريفها بالوسم <h1> إلى <h6> فقط. <h1> يقوم بتعريف العناوين الأكبر. <h6> يقوم بتعريف العناوين الأصغر.
كود:
<h1>هذا عنوان رئيسي</h1>
<h2>هذا عنوان رئيسي</h2>
<h3>هذا عنوان رئيسي</h3>
<h4>هذا عنوان رئيسي</h4>
<h5>هذا عنوان رئيسي</h5>
<h6>هذا عنوان رئيسي</h6>
تضيف HTML بشكل آلي سطر فارغ قبل و بعد العنوان.
الفقرات
الفقرات تم تعريفها بالوسم <p>.
كود:
<p>هذه فقرة</p>
<p>هذه فقرة أخرى</p>
تضيف HTML بشكل آلي سطر فارغ قبل و بعد الفقرة.
نهاية السطر
الوسم <br> يُستخدم عن الرغبة في إنهاء السطر الحالي و بدء سطر جديد, لكن لا تبدأ فقرة جديدة باستخدام هذا الوسم. الوسم <br> يُجبر المتصفح على إنهاء السطر حيثما تضعه.
كود:
<p>هذه <br> فق<br>رة بإنهاء السطر</p>
وسم <br> وسم فردي لا يحتاج للإغلاق.
تعليقات في HTML
وسم التعليق يستخدم لإضافة تعليق في نص HTML الأصلي. التعليقات يتم إهمالها من قبل المتصفح. يمكن أن تستخدم التعليقات لشرح الرموز التي قمت بكتابتها, سوف تساعدك عند تعديل الرموز في وقت لاحق.
علامة التعجب بعد القوس الافتتاحي فقط, ولا تكتب قبل قوس الإغلاق.
الملاحظات الأساسية - نصائح مفيدة
عند كتابتك لنص HTML, أنت لا يمكن أن تكون متأكد من طريقة عرض النص في المتصفحات الأخرى. بعض الناس يستخدمون دقة شاشة كبيرة, البعض الآخر يستخدون دقة شاشة صغيرة. النص سيعاد تهيئته كلما قام المستخدم بتغير حجم نافذة المتصفح. عند تهئية النص في المحرر أبداً لا تستخدم الأسطر و الفراغات في النص.
HTML ستقوم بقطع الفراغات من النص الذي قمت بكتابته. تعتبر HTML أي عدد من الفراغات فراغ واحد. بعض المعلومات الإضافية: في HTML السطر الجديد يعتبر فراغ واحد.
استخدام الفقرات <p> لإدخال أسطر فارغة عادة سيئة. استخدم وسم <br> بدلاً من ذلك. (لكن لا تستخدم وسم <br> لإضافة القوائم. انتظر حتى تتعلم عن قوائم HTML.)
ربما لاحظت بأن الفقرات يمكن أن تكتب بدون وسم الإغلاق </p>. لا تتكل على هذا. في نسخة HTML القادمة لا يسمح بتجاوز إغلاق الوسوم.
تضيف HTML بشكل آلي سطر فارغ قبل و بعد بعض العناصر, مثل قبل و بعد الفقرات, و قبل و بعد العناوين.
نستخدم خط أفقي (وسم <hr>) لفصل الأقسام في بحوثنا.
أمثلة أكثر
فقرات أكثر
يعرض هذا المثال بعضاً من السلوك الأصلي لعناصر الفقرات.
الأسطر
يعرض هذا المثال استخدام الأسطر في مستندات HTML.
مشاكل القصائد
يعرض هذا المثال بعض مشاكل تهيئة النص في HTML.
العناوين
يعرض هذا المثال الأوسمة التي تعرض العناوين في مستندات HTML.
توسيط العناوين
هذا المثال يعرض طريقة تغير محذاة العناوين إلى المنتصف.
الخطوط الأفقية
يعرض هذا المثال كيفية ادخل الخطوط الأفقية.
التعليقات المخفية
يعرض هذا المثال كيفية ادخال تعليقات مخفية في نص HTML الأصلي.
لون الخلفية
يعرض هذا المثال كيفية إضافة لون خلفية إلى صفحة HTML.
وسوم HTML الأساسية
الوسم
|| الوصف
<html>
|| تعريف صفحة HTML
<body>
|| تعريف جسم الصفحة
<h1> إلى <h6>
|| تعريف العنوان الرئيسي 1 إلى العنوان الرئيسي 6
<p>
|| تعريف الفقرات
<br>
|| إنهاء السطر الحالي و بدأ سطر جديد
<hr>
|| تعريف الخط الأفقي
<!-->
|| تعريف التعليقات
المصدر الإنجليزي : W3Schools
تم الترجمة بواسطة:
مدرسة الويب العربي
ملاحظة:
يختلف تنسيق الدرس في هذا الموضوع عن تسيق الدرس في الموقع وذلك لعدم القدرة على استخدام الجداول.
روابط تهمك:
مدرسة الويب العربي
مدرسة الويب العربي |HTML| الأوسمة الأساسية
النمط المتتابع
