السلام عليكم ورحمة الله وبركاته
فى هذا الدرس ان شاء الله سوف نقوم بالتعرف على بعض الاوسمة التى تساعدنا فى تنسيق النصوص والعناوين فى لغة HTML
كيفية تنسيق العناوين فى لغة HTML
يتم تنسيق العناوين فى لغة HTML باستخدام وسم h1 او h اة رقم آخر من 1 الى 6 وكلما
مثال
كود:
<h1>بسم الله</h1>
<h2>بسم الله</h2>
<h3>بسم الله</h3>
<h4>بسم الله</h4>
<h5>بسم الله</h5>
<h6>بسم الله</h6>
والنتيجة بهذا الشكل
اكواد تنسيق النصوص فى لغة HTML
هذه الاكواد التى تستخدم فى تنسيق النصوص
كود:
<b>خط ثميك</b>
<br>
<strong>خط ثميك</strong>
<br>
<i>خط مائل</i>
<br>
<em>خط مائل</em>
<br>
<u>نص تحتة خط</u>
<br>
<sup>خط مرتفع</sup>عن السطر
<br>
<sub>خط منخفض</sub> عن السطر
<br>
<big>خط كبير</big>
<br>
<small>خط صغير</small>
<br>
<strike>نص مشطوب - نص يعترضه خط</strike>
<br>
<s>نص مشطوب - نص يعترضه خط</s>
<br>
<q>نص بين علامتى اقتباس</q>
بين كل وسم مكتوب العمل الذى يقوم به
وهذه النتيجة
خط ثميك
خط ثميك
خط مائل
خط مائل
نص تحتة خط
خط مرتفععن السطر
خط منخفض عن السطر
خط كبير
خط صغير
نص مشطوب – نص يعترضه خط
نص مشطوب – نص يعترضه خط
نص بين علامتى اقتباس
ونلاحظ هنا ان بعد كل وسم قمنا بكتابته كتبنا الوسم br
هذا الوسم يقوم بانهاء السطر الذى كنا نكتب عليه ويبدا الكلام من السطر التانى كما نرى .
ويوجد وسم blockquote للاقتباسات الطويلة
مثال
مثال على الاقتباس الطويل
كود:
<blockquote>
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
</blockquote>
والنتيجة
مثال على الاقتباس الطويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
ونلاحظ هنا انه تم اضافة مسافة قبل الكلام وآخره .
يوجد احرف تاخذ مساحة اكبر من احرف اخرى مثل حرف (أ) و حرف (ى) يمكن الحرف الثانى ياخذ مساحه اكثر من ضعف الاول مثال نكتب 20 حرف أ و 20 حرف ى
اااااااااااااااااااا
ىىىىىىىىىىىىىىىىىىىى
نلاحظ هنا الفرق كبير برغم ان عدد الحروف متشابه
اذا اردنا ان نقسم المسافات بين الاحرف لكى تساوى بعضها سنستخدم الوسم tt كالمثال التالى
كود:
<tt>
اااااااااااااااااااا
<br>
ىىىىىىىىىىىىىىىىىىىى
</tt>
وستكون النتيجة بالشكل التالى ان شاء الله
اااااااااااااااااااا
ىىىىىىىىىىىىىىىىىىىى
فى لغة HTML مسافة واحدة تساوى 100 مسافة او اكثر اى انك اذا قمت بعمل مسافة واحدة اى انك عندما تكون بتكتب كود HTML وتريد عمل اكثر من مسافة بين الكلمة والاخرى وقمت بعمل اكثر من مسافة عندما تقوم بحفظ العمل وفتح ملف الـ HTML سترى كل المسافات التى قمت بكتابتها سافة واحدة فقط
اذا كيف تقوم بعمل اكثر من مسافة فى لغة HTML يقوم بهذه الوظيفة هذا الكود
هذا الكود بمعدل مسافة واحدة اى انك اذا اردت عمل اكثر من مسافة بتكرر هذا الكود
كود:
<pre>
تكتب هنا ما شئت
< /pre>
هذا الكود معناه منسق مسبقا اى انك تستطيع ان تكتب وكانك تكتب فى تكست على الويندوز وكل ما قمت بكتابته سيظهر بنفس عدد المسافات والاسطر الذى قمت بكتابتها .
احيانا تكتب شىء وتغير رايك فى هذا الشيء بعد فتره يعنى مثلا
انا بحب اللون الاحمر لا الازرق
طيب نقدر نعمل حاجه زى كدا فى HTML
نقدر نعمل يعنى نفترض ان انت كنت كاتب فى الصفحة انا بحب اللون الاحمر وبعد كدا غيرت رايك وعاوز تشطب على الاحمر وتخليه ازرق هنستخدم الكود ده لعمل هذا
كود:
انا بحب اللون <del> الاحمر </del><ins>الازرق</ins>
وتكون النتيجة بهذا الشكل
انا بحب اللون الاحمر الازرق
راينا فى هذا المثال تم الشطب على الاحمر ووضع خط تحت الازرق
وفى المجمل هى تستخدم لاذالة نص قديم من الصفحة مع وضع جديد مع اظهار النصين
كيفية كتابة عنوان فى لغة HTML
يمكنك كتابة العناوين فى لغة HTML باستخدام الوسم address
وهذا مثال على ذلك
كود:
<address>
كتبة بواسطة مدونة اليكس<br />
<a href="mailto:us@example.org">البريد الالكترونى</a><br />
العنوان : 9 شارع مدونة اليكس <br />
الهاتف : +2 1234567
</address>
وتكون هذه النتيجة
كتبة بواسطة مدونة اليكس
البريد الالكترونى
العنوان : 9 شارع مدونة اليكس
الهاتف : +2 1234567
وبهذا نكون قد انتهينا من هذا الدرس بحمد الله وفى الدرس القادم ان شاء الله سوف نشرح كيف نقوم باضافة شرح على الكلام يظهر عند الوقوف على الكلمة وكيف نقوم باختيار نوع الخط واللون وحجم الخط الافتراضى لجميع الكلام الذى يكون بداخل الصفحة ولا يوجد بين اى وسم للتحكم فى الخط
يوجد بعض الامثلة لم تظهر يمكنك مراجعتها فى المصدر او تجربتها وسترى النتيجة
المصدر
درس تنسيق النصوص والعناوين فى لغة HTML – الدرس السابع