إدراج خط أفقي ولونه وعرضه
لندرج خط أفقي :
نستخدم وسم اسمه hr
نوع الوسم:
أحادي
<hr>
تطبيق :
سافتح المحرر , برنامج المفكرة مثلا , وأطبق عليه هذا الوسم , حيث سأضيف خطين افقيين اثنين.
لاحظ أن الخط الأفقي امتد إلى آخر الصفحة, تابع القراءة لتعرف كيف تقصر من طوله.
هل استطيع تغيير لون الخط , والتحكم في عرضة وطوله ؟ نعم
مواصفات hr:
1) نقدر نغير في اللون : (color) -- <فيه مستعرضات تقبل سِمة color
background color --< وأخرى تقبل سِمة background
وعليه يجب استخدامهما معا وإعطاؤهما نفس القيمة . رغم اننا سنرى استخدام color في وسوم أخرى , تعني لنص الكتابة الا ان color هنا هي و background-color تعني للخط الأفقي .
2) الارتفاع (height)
1,2,3
3) العرض (width) لتحدد العرض لا تنس كتابة النسبة المئوية.
30%
لكتابة صفات الخط كاللون , وطول الخط وعرضة ستحتاج إلى اسم سمه وهي
style=
ملاحظة:
للتعديل على أي تنسيق فإني استخدم كلمة style
وكالمعداد في حال وجود العديد من السمات داخل سمة نمط= فإننا يجب أن نحصرها بين علامتي تنصيص ونفصل بينها بفاصلة منقوطة.
دعونا نطبق هذا الوسم :
سأكتب عبارتين محصورتين داخل الوسم الثنائي <p> </p> الخاص بجعل كل نص في سطر وسأستخدم تحت كل منهما وسم الخط الافقي.
لندرج خط أفقي :
نستخدم وسم اسمه hr
نوع الوسم:
أحادي
<hr>
تطبيق :
سافتح المحرر , برنامج المفكرة مثلا , وأطبق عليه هذا الوسم , حيث سأضيف خطين افقيين اثنين.
لاحظ أن الخط الأفقي امتد إلى آخر الصفحة, تابع القراءة لتعرف كيف تقصر من طوله.
هل استطيع تغيير لون الخط , والتحكم في عرضة وطوله ؟ نعم
مواصفات hr:
1) نقدر نغير في اللون : (color) -- <فيه مستعرضات تقبل سِمة color
background color --< وأخرى تقبل سِمة background
وعليه يجب استخدامهما معا وإعطاؤهما نفس القيمة . رغم اننا سنرى استخدام color في وسوم أخرى , تعني لنص الكتابة الا ان color هنا هي و background-color تعني للخط الأفقي .
2) الارتفاع (height)
1,2,3
3) العرض (width) لتحدد العرض لا تنس كتابة النسبة المئوية.
30%
لكتابة صفات الخط كاللون , وطول الخط وعرضة ستحتاج إلى اسم سمه وهي
style=
ملاحظة:
للتعديل على أي تنسيق فإني استخدم كلمة style
وكالمعداد في حال وجود العديد من السمات داخل سمة نمط= فإننا يجب أن نحصرها بين علامتي تنصيص ونفصل بينها بفاصلة منقوطة.
دعونا نطبق هذا الوسم :
سأكتب عبارتين محصورتين داخل الوسم الثنائي <p> </p> الخاص بجعل كل نص في سطر وسأستخدم تحت كل منهما وسم الخط الافقي.
<!DOCTYPE HTML>
<html dir="rtl">
<head> <title> </title> <head>
<body>
<p> أول أبواب الفرج: لا إله الا الله, هي كلمة التقوى كما قال عمر رضي الله عنه, وهي كلمة الإخلاص</p>
<hr>
<p> قال ابن عُيينة: (ما أنعم الله على عبد من العباد نعمة أعظم من أن عرفهم:: لا إله الا الله)</p>
<hr>
</body>
</html>
<html dir="rtl">
<head> <title> </title> <head>
<body>
<p> أول أبواب الفرج: لا إله الا الله, هي كلمة التقوى كما قال عمر رضي الله عنه, وهي كلمة الإخلاص</p>
<hr>
<p> قال ابن عُيينة: (ما أنعم الله على عبد من العباد نعمة أعظم من أن عرفهم:: لا إله الا الله)</p>
<hr>
</body>
</html>
كيف أعطي الخط صفات أخرى كـ اللون , العرض , الطول ؟
سنستخدم سمة style داخل وسم الخط
ونستخدم داخلها السمات التالية :
color
background-color تعني الخلفية وقد تتسائل ما الغرض منها! في الحقيقة يفضل استخدامها مع السمه السابقة color لان بعص المتصفحات تقبلها ولا تقبل color ولضمان ظهور اللون استخدم السمتين معا بفس اللون المرغوب
height للارتفاع
width للعرض
طبقت السابق على الكود التالي , لكن في الحقيقة لم يظهر لي اللون الاحمر , مع أني اخترته كلون للخط ولا اعلم السبب !
<!DOCTYPE HTML>
<html dir="rtl">
<head> <title> </title> </head>
<body>
سبحان الله وبحمده, سبحان الله العظيم
<hr style="color: red; background-color: red; height: 10; width: 30%">
</body>
</html>
<html dir="rtl">
<head> <title> </title> </head>
<body>
سبحان الله وبحمده, سبحان الله العظيم
<hr style="color: red; background-color: red; height: 10; width: 30%">
</body>
</html>
ليست هناك تعليقات:
إرسال تعليق