درس تنسيق النصوص والعناوين فى لغة HTML – الدرس السابع

6 مايو 2010 بواسطة ابوريه
2 تعليقات »

السلام عليكم ورحمة الله وبركاته
فى هذا الدرس ان شاء الله سوف نقوم بالتعرف على بعض الاوسمة التى تساعدنا فى تنسيق النصوص والعناوين فى لغة HTML

كيفية تنسيق العناوين فى لغة HTML

يتم تنسيق العناوين فى لغة HTML باستخدام وسم h1 او h اة رقم آخر من 1 الى 6 وكلما
مثال

1
2
3
4
5
6
<h1>بسم الله</h1>
<h2>بسم الله</h2>
<h3>بسم الله</h3>
<h4>بسم الله</h4>
<h5>بسم الله</h5>
<h6>بسم الله</h6>

والنتيجة بهذا الشكل

اكواد تنسيق النصوص فى لغة HTML

هذه الاكواد التى تستخدم فى تنسيق النصوص

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 للاقتباسات الطويلة
مثال

1
2
3
4
5
6
مثال على الاقتباس الطويل
<blockquote>
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل 
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل 
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل 
</blockquote>

والنتيجة
مثال على الاقتباس الطويل

يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل

ونلاحظ هنا انه تم اضافة مسافة قبل الكلام وآخره .

يوجد احرف تاخذ مساحة اكبر من احرف اخرى مثل حرف (أ) و حرف (ى) يمكن الحرف الثانى ياخذ مساحه اكثر من ضعف الاول مثال نكتب 20 حرف أ و 20 حرف ى
اااااااااااااااااااا
ىىىىىىىىىىىىىىىىىىىى
نلاحظ هنا الفرق كبير برغم ان عدد الحروف متشابه
اذا اردنا ان نقسم المسافات بين الاحرف لكى تساوى بعضها سنستخدم الوسم tt كالمثال التالى

1
2
3
4
5
<tt>
اااااااااااااااااااا
<br>
ىىىىىىىىىىىىىىىىىىىى
</tt>

وستكون النتيجة بالشكل التالى ان شاء الله


اااااااااااااااااااا

ىىىىىىىىىىىىىىىىىىىى

فى لغة HTML مسافة واحدة تساوى 100 مسافة او اكثر اى انك اذا قمت بعمل مسافة واحدة اى انك عندما تكون بتكتب كود HTML وتريد عمل اكثر من مسافة بين الكلمة والاخرى وقمت بعمل اكثر من مسافة عندما تقوم بحفظ العمل وفتح ملف الـ HTML سترى كل المسافات التى قمت بكتابتها سافة واحدة فقط
اذا كيف تقوم بعمل اكثر من مسافة فى لغة HTML يقوم بهذه الوظيفة هذا الكود

1
&nbsp;

هذا الكود بمعدل مسافة واحدة اى انك اذا اردت عمل اكثر من مسافة بتكرر هذا الكود

1
2
3
<pre>
تكتب هنا ما شئت
< /pre>

هذا الكود معناه منسق مسبقا اى انك تستطيع ان تكتب وكانك تكتب فى تكست على الويندوز وكل ما قمت بكتابته سيظهر بنفس عدد المسافات والاسطر الذى قمت بكتابتها .

احيانا تكتب شىء وتغير رايك فى هذا الشيء بعد فتره يعنى مثلا
انا بحب اللون الاحمر لا الازرق
طيب نقدر نعمل حاجه زى كدا فى HTML
نقدر نعمل يعنى نفترض ان انت كنت كاتب فى الصفحة انا بحب اللون الاحمر وبعد كدا غيرت رايك وعاوز تشطب على الاحمر وتخليه ازرق هنستخدم الكود ده لعمل هذا

1
انا بحب اللون <del> الاحمر </del><ins>الازرق</ins>

وتكون النتيجة بهذا الشكل

انا بحب اللون الاحمر الازرق
راينا فى هذا المثال تم الشطب على الاحمر ووضع خط تحت الازرق
وفى المجمل هى تستخدم لاذالة نص قديم من الصفحة مع وضع جديد مع اظهار النصين

كيفية كتابة عنوان فى لغة HTML

يمكنك كتابة العناوين فى لغة HTML باستخدام الوسم address
وهذا مثال على ذلك

1
2
3
4
5
6
<address>
كتبة بواسطة مدونة اليكس<br />
<a href="mailto:us@example.org">البريد الالكترونى</a><br />
العنوان : 9 شارع مدونة اليكس <br />
الهاتف : +2 1234567
</address>

وتكون هذه النتيجة

كتبة بواسطة مدونة اليكس
البريد الالكترونى
العنوان : 9 شارع مدونة اليكس
الهاتف : +2 1234567

وبهذا نكون قد انتهينا من هذا الدرس بحمد الله وفى الدرس القادم ان شاء الله سوف نشرح كيف نقوم باضافة شرح على الكلام يظهر عند الوقوف على الكلمة وكيف نقوم باختيار نوع الخط واللون وحجم الخط الافتراضى لجميع الكلام الذى يكون بداخل الصفحة ولا يوجد بين اى وسم للتحكم فى الخط

كلمات البحث الواردة:

 

2 تعليقات على “درس تنسيق النصوص والعناوين فى لغة HTML – الدرس السابع”

  1. سعيد قال:

    شكراً

  2. مصطفى احمد عبد النبى قال:

    جزالك الله كل خير

أضف تعليقاً