متابعة لسلسلة دروس دورة تعلم HTML
شرحنا في الدرس السابق "الدرس الثالث" بعض الاكواد الهامه والتي لا نستغني عنها في كتابة اي صفحه بلغة HTML
وسنقوم في هذا الدرس باذن الله استكمال لبعض الوسوم الهامه والاساسية في لغة HTML وشرح تاثيرها واستخداماتها
الدرس الرابع
" متابعة لشرح الاكواد والوسوم الهامه في لغة HTML "
من الاكواد التي يمكن ان نستخدمها ايضا
الوسم big والوسم small
<big>هنا يكتب النص المراد تكبيره</big>
هذا الوسم يقوم بجعل الخط كبير جدا
هذا الوسم يقوم بجعل الخط كبير جدا
ويقوم بوظيفة عكسية الوسم small
<small>هنا يكتب النص المراد تصغيره</small>
وهذا الوسم يقوم بجعل الخط صغير جدا
وهذا الوسم يقوم بجعل الخط صغير جدا
هناك اكواد اخري هامه يمكن ان نستخدمها
وسم sub ووسم sup
<sup>النص المراد رفعه لاعلي قليلا</sup>
<sub>النص المراد انزاله لاسفل قليلا</sub>
<sub>النص المراد انزاله لاسفل قليلا</sub>
مثال
15<sup>2</sup>
Hyper Text <sub> Markup </sub> Language
Hyper Text <sub> Markup </sub> Language
النتيجة
استخداماته
يمكن ان يستخدم مثلا عند تصميم موقع يحتوي علي معادلات رياضيه فاننا سنحتاج لهذا الكود لعمل ( الأس ) وهكذا
ويمكن ايضا ان نستخدمه ان اردنا لفت الانتباه لكلمه معينه في سطر ما فاننا نقوم بوضع هذا الكود بين هذه الكلمه لكي يرفعها قليلا عن باقي السطر او انزالها قليلا عن باقي السطر
دعونا ننتقل بكم الان الي وسم اخر هام جدا ويستخدم كتيرا في صفحة HTML
وهو وسم <P>
وهذا الوسم هو وسم زوجي اي له وسم بدايه ووسم نهايه
وطبعا وسم النهايه يختلف عن وسم البدايه بوجود علامة /
شكل الكود
هذا الوسم اختصار لكلمه paragraph
اعتقد انها بذلك وضحت لك فكرتها!!
استخدامك لهذا الوسم يعني انك ستكتب قطعه او فقره بداخله
لذا نجد ان الخصائص التي تاتي معها هي كالتالي
- خاصية لعمل محاذاه للقطعه بان نحدد ان كنا نريدها علي يمين الصفحه او يسارها او منتصفها
- خاصية اخري لتحديد اتجاه الكتابه .. اما من اليمين الي اليسار او من اليسار الي اليمين
ماذا لو اردنا مثلا تطبيق لون معين او حجم معين للنص الموجود بداخل القطعه!!
ماذا نفعل في هذه الحاله ونحن نعلم ان الوسم <p> لا ياتي معه خاصيه الحجم او خاصيه اللون
نقوم بالاتي
بان نكتب بداخل وسم <p> الوسم <font> ثم تطبيق خصائص اللون والحجم مع وسم <font>
هنا نكون قد تغلبنا علي المشكله
واليكم مثال عملي علي هذه الحاله
وبهذه النظريه يمكنك ان تقوم بتطبيق العديد من الحالات الاخري حسب احتياجاتك ومتطلباتك
اتمني ان تكون وضحت الفكره
ملحوظه هامه
توضيح لوظيفة الوسم <p>
يعتقد البعض ان هذا الوسم هو يستخدم لعمل سطر جديد وهذا خطأ تماما
فالوسم المسئول عن النزول لسطر جديد هو الوسم الفردي <br> وهذا الوسم قد شرحناه سابقا
اما الوسم الذي نحن بصدده الان <p>text paragraph</p>
هو وسم زوجي يستخدم لتحديد فقره معينه لتطبيق عليه خاصيه معينه
ولكن بطبيعه الحال بما انه يعبر عن فقره محدده فهو يقوم تلقائيا بجعل هذه الفقره في سطر جديد في الصفحه
ومن هنا ياتي الغلط في فهم وظيفته الحقيقيه
اتمني ان اكون قد اوضحت الفكره
بهذا نكون قد انتهينا من هذا الدرس
وباذن الله سنكمل معا الدرس القادم "الدرس الخامس" لنتحدث عن وسوم اخري هامه جدا فتابعوها ،،
وهو وسم <P>
وهذا الوسم هو وسم زوجي اي له وسم بدايه ووسم نهايه
وطبعا وسم النهايه يختلف عن وسم البدايه بوجود علامة /
شكل الكود
<p>هنا يكتب النص</p>
هذا الوسم اختصار لكلمه paragraph
اعتقد انها بذلك وضحت لك فكرتها!!
استخدامك لهذا الوسم يعني انك ستكتب قطعه او فقره بداخله
لذا نجد ان الخصائص التي تاتي معها هي كالتالي
- خاصية لعمل محاذاه للقطعه بان نحدد ان كنا نريدها علي يمين الصفحه او يسارها او منتصفها
align="center" او align="left" او align="right"
- خاصية اخري لتحديد اتجاه الكتابه .. اما من اليمين الي اليسار او من اليسار الي اليمين
dir="rtl" او dir="ltr"
الشكل العام لها سيكون كالتالي
<p align="القيمه" dir="ألقيمه">
هنا نكتب القطعه
</p>
<p align="القيمه" dir="ألقيمه">
هنا نكتب القطعه
</p>
ماذا لو اردنا مثلا تطبيق لون معين او حجم معين للنص الموجود بداخل القطعه!!
ماذا نفعل في هذه الحاله ونحن نعلم ان الوسم <p> لا ياتي معه خاصيه الحجم او خاصيه اللون
نقوم بالاتي
بان نكتب بداخل وسم <p> الوسم <font> ثم تطبيق خصائص اللون والحجم مع وسم <font>
هنا نكون قد تغلبنا علي المشكله
<p align="المحاذاة" dir="اتجاه الكتابة">
<font color="اللون" face="نوع الخط" size="حجم الخط">
هنا نكتب القطعه او النص المراد التاثير عليه
</font>
</p>
<font color="اللون" face="نوع الخط" size="حجم الخط">
هنا نكتب القطعه او النص المراد التاثير عليه
</font>
</p>
واليكم مثال عملي علي هذه الحاله
وبهذه النظريه يمكنك ان تقوم بتطبيق العديد من الحالات الاخري حسب احتياجاتك ومتطلباتك
اتمني ان تكون وضحت الفكره
ملحوظه هامه
توضيح لوظيفة الوسم <p>
يعتقد البعض ان هذا الوسم هو يستخدم لعمل سطر جديد وهذا خطأ تماما
فالوسم المسئول عن النزول لسطر جديد هو الوسم الفردي <br> وهذا الوسم قد شرحناه سابقا
اما الوسم الذي نحن بصدده الان <p>text paragraph</p>
هو وسم زوجي يستخدم لتحديد فقره معينه لتطبيق عليه خاصيه معينه
ولكن بطبيعه الحال بما انه يعبر عن فقره محدده فهو يقوم تلقائيا بجعل هذه الفقره في سطر جديد في الصفحه
ومن هنا ياتي الغلط في فهم وظيفته الحقيقيه
اتمني ان اكون قد اوضحت الفكره
بهذا نكون قد انتهينا من هذا الدرس
وباذن الله سنكمل معا الدرس القادم "الدرس الخامس" لنتحدث عن وسوم اخري هامه جدا فتابعوها ،،
