بسم الله الرحمن الرحيم
السلام عليكم
الدرس الثالث في تعليم ال Html
بطاقات البيانات المهمة في الـ html هي بطاقات البيانات التي تعرض العناوين و الفقرات و النزول إلى السطر.
أفضل وسيلة لتعلم الـ html هي تطبيق هذه الأمثلة على محرر النص notepad.
العناوين
العناوين تعرض ببطاقات البيانات <h1> إلى <h6>. إذا <h1> تعرض العنوان الكبير ثم <h2> للعنوان الأصغر منه قليلا ، إلى أن نصل إلى <h6> و هي الأصغر.
كود:
<h1>هذا هو العنوان الأول</h1>
<h2>هذا هو العنوان الثاني</h2>
<h3>هذا هو العنوان الثالث</h3>
<h4>هذا هو العنوان الرابع</h4>
<h5>هذا هو العنوان الخامس</h5>
<h6>هذا هو العنوان السادس</h6>
المتصفح لن يظهر بطاقة البيانات في الصفحة سيظهر العنوان فقط أوتوماتيكيا.
الفقرات
الفقرات تعرض ببطاقة البيانات <p>.
كود:
<p>هذه فقرة</p>
<p>هذه فقرة أخرى</p>
المتصفح لن يظهر بطاقة البيانات في الصفحة سيظهر العنوان فقط أوتوماتيكي
لا تنسى بطاقة بيانات النهاية
يجب أن تلاحظ بأن الفقرات يمكن أن تكتب بدون بطاقة البيانات <p/>.
كود:
<p>هذه فقرة
<p>هذه فقرة أخرى
المثال أعلاه يمكن أن يعمل في متصفحات عديدة ، لكن ليس تماما . النسخة المستقبلية للـ html لن تسمح لك بترك بطاقات بيانات النهاية.
أغلق كل عناصر الـ html ببطاقة بيانات النهاية لأن هذه هي الطريقة المستقبلية لكتابة الـ html . و أيضا فهي تجعل الرموز سهلة و مفهومة (قراءة و تصفحا) عندما تجعل عنصر الـ html يبدأ و ينتهي.
النزول إلى السطر
بطاقة البيانات <br> تستعمل عندما تريد أن تنزل إلى سطر أخر ، لكن ليس لتبدأ فقرة جديدة.
بطاقة البيانات <br> تأمر المتصفح بتخطي السطر في أي مكان تريده.
كود:
<p>هذه فقرة فيها السطر الأول<br>ثم تنزل إلى السطر الثاني</p>
نتيجة هذا الملف
كود:
هذه فقرة فيها السطر الأول
ثم تنزل إلى السطر الثاني
لاحظ أن <br> تنقل النص إلى سطر آخر.
بطاقة البيانات <br> بطاقة فارغة ، لا تملك بطاقة بيانات النهاية<br/> ، إن غلقت هذه البطاقة لن تجد أي تغيير.
<br> أو </br>
مرارا و تكرارا ترى بطاقة البيانات <br> تكتب بهذا الشكل : </br>
هذا لأن بطاقة البيانات <br> لا تغلق ، و هذا يكسر أحد قوانين الـ html المستقبلية(xml و xhtml). قانونيا كل بطاقات البيانات تغلق.
كتابتها هكذا </br> هي الطريقة المستقبلية لغلقها . هذه العملية مقبولة في الإمتداد xml و الإمتداد html.
الخط العمودي
بطاقة البيانات <hr> تستعمل لإضافة خط عمودي في الصفحة و هي لا تملك بطاقة بيانات النهاية ، شأنها شأن <br>.
كود:
<p>هذه فقرة</p>
<hr>
<p>هذه فقرة</p>
نتسجة هذا الملف
كود HTML:
<p>هذه فقرة</p>
كود HTML:
[SIZE=3]<hr>[/SIZE]
[SIZE=3]<p>هذه فقرة</p> [/SIZE]
[SIZE=3][/SIZE]
التعليقات في الـ html
بطاقة بيانات التعليقات تستعمل لإضافة تعليق في النص الأصلي ، التعليق لن يظهر في صفحة الموقع ، يمكنك أن تستعمل التعليق لتشرح و تلاحظ نصك الأصلي ، الذي سيساعدك عندما تعو للتغيير فيه أي في ملف الـ html.
كود:
<!-- لقد توقفت هنا في ملفي إذن سأبدأ من هنا الأن -->
لاحظ بأنك تحتاج إلى علامة تعجب في بطاقة البيانات و إلا سيظهر التعليق في صفحة موقعك.
تلخيص عناصر الـ html الأولية
كل عنصر html عنده إسم (br,p,h1,body.......إلخ).
بطاقة بيانات البداية هي الإسم و تأتي محاطة بزوايا بطاقات البيانات : <h1> إسمها هو h1.
بطاقة بيانات النهاية فيها الزوايا و الإسم و رمز سلاش (/slash).
محتوى العنصر يوضع بين بطاقة بيانات البداية و بطاقة بيانات النهاية.
بعض عناصر الـ html لا يوجد فيها محتوى.
بعض عناصر الـ html لا تملك بطاقة بيانات النهاية.
نصائح مفيدة
عندما تكتب نص html ، لن تعرف كيف سيظهر في المتصفح ، بعض الناس لديهم شاشة كمبيوتر كبيرة ، بعضهم لديهم شاشة كمبيوتر صغيرة . النص سيتغير من ناحية الرؤية كل مرة تتغير فيها الشاشة ، لا تحاول أبدا أن تضيف مناطق أو مساحات فارغة بين الكلمة و الأخرى. الـ html سيضع لك فراغا واحدا بين الكلمات إذا لا تحاول أن تضيف إليها الفراغات.
إستعمال بطاقة البيانات <p> لعمل خط فارغ عادة سيئة ، إستخدم <br> بدلا من ذلك.
(لكن لا تستعمل <br> لعمل قائمة ، إنتظر حتى تصل إلى درس القوائم و تتعلم كيف تستخدمها).
بالتوفيق
