كيفية إدراج خط في لغة إتش تي إم إل

تتعرف في هذا المقال على كيفية إنشاء خط أفقي في لغة إتش تي إم إل، علمًا بإمكانية استخدام الخط الأفقي لفصل المحتوى على موقعك الإلكتروني. رمز إنشاء الخط بسيط للغاية، ويمكنك إضافة رمز الخط المضمن إلى نمطك في لغة إتش تي إم إل 4.01 في حين ستحتاج إلى استخدام رموز سي إس إس لتنسيق الخط في لغة إتش تي إم إل 5.^{[١]Xمصدر بحثي}

طريقة 1

طريقة 1 من 2:

استخدام إتش تي إم إل 4.01

تنزيل المقال

1
افتح أو أنشئ مستند إتش تي إم إل جديد. يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
- افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
- افتح القائمة ملف.
- انقر على خيار فتح.
- حدد ملف إتش تي إم إل.
- انقر على زر فتح.
توجه نحو الأسفل حتى تصل إلى السطر الذي ترغب بإدراج الخط الفاصل فوقه ثم انقر على أقصى الجهة اليسرى من السطر لوضع مؤشر الكتابة قبل بداية السطر مباشرة.
اضغط على زر الإدخال ↵ Enter لنقل النص الذي ترغب بإدراج الخط فوقه نحو الأسفل ثم حرّك مؤشر الكتابة نحو الأعلى إلى المسافة الفارغة.
اكتب <hr> في المسافة الموجودة قبل بدء السطر. وسم <hr> مسؤول عن إنشاء خط أفقي بعرض الصفحة بالكامل.
اضغط على زر الإدخال ↵ Enter لتحقيق ذلك، ويفترض أن يكون وسم <hr> في سطر منفصل بعد هذا الإجراء.
6
أضِف خصائص للخط الأفقي (اختياري). يمكنك إضافة خصائص للخط الأفقي مثل الطول والعرض واللون والمحاذاة عن طريق استخدام الرموز التالية بعد وسم "hr" في قوس الرمز، علمًا بإمكانية إضافة أكثر من خاصية في القوس عن طريق الفصل بينها بمسافة.^{[٢]Xمصدر بحثي}
- اكتب <hr size="#"> لتغيير سمك الخط. غيّر # إلى قيمة السمك (size="10" مثلًا).
- اكتب <hr width="#"> لتغيير عرض الخط. غيّر # إلى قيمة العرض بوحدة البكسل أو إلى نسبة من عرض الصفحة (مثلًا، width="200" أو width="75%").
- اكتب <hr color="#"> لتغيير لون الخط. غيّر # إلى اسم الخط أو إلى كود قيمة ستة عشرية (color="red" أو color="#FF0000" مثلًا).
- اكتب <hr align="#"> لمحاذاة الخط. غيّر # إلى القيمة "right" أو "left" أو "center" (يمين أو يسار أو منتصف على التوالي) (<hr width="50%" align="center"> مثلًا).
7
احفظ ملف إتش تي إم إل. يمكنك حفظ الملف النصي كملف إتش تي إم إل عن طريق تغيير الامتداد (.txt, .docx) إلى ".html". اتبع الخطوات التالية لحفظ مستند إتش تي إم إل:
- افتح القائمة ملف.
- انقر على خيار حفظ باسم.
- اكتب اسم الملف في حقل "اسم الملف".
- اكتب .html في نهاية اسم الملف.
- انقر على خيار حفظ .
8
اختبر ملف إتش تي إم إل. يمكنك اختبار ملف إتش تي إم إل عن طريق النقر على الملف بزر الفأرة الأيمن واختيار فتح بواسطة ثم تحديد متصفح إنترنت. يفترض أن يظهر في الصفحة خط متصل في مكان وضع وسم "hr"، ويفترض أن يكون رمز إتش تي إم إل بالشكل التالي:^{[٣]Xمصدر بحثي}
```
<!DOCTYPE html><html><body><h1>ترويسة</h1><hr size="6" width="50%" align="left" color="green"><p1>فقرة نصية مفصولة عن الترويسة بخط.</p1></body></html>
```

طريقة 2

طريقة 2 من 2:

استخدام سي إس إس في لغة إتش تي إم إل 5

تنزيل المقال

1
افتح أو أنشئ مستند إتش تي إم إل جديد. يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
- افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
- افتح القائمة ملف.
- انقر على خيار فتح.
- حدد ملف إتش تي إم إل.
- انقر على زر فتح.
2
أضِف ترويسة لمستند إتش تي إم إل. استخدم الخطوات التالية لإضافة ترويسة إن لم يكن المستند يحتوي على ترويسة بالفعل، علمًا بأن الترويسة تأتي بعد وسم "<html>" وقبل وسم "<body>".
- اكتب <head> أعلى المستند.
- اضغط على زر الإدخال ↵ Enter مرتين لإضافة سطرين جديدين.
- اكتب </head> لإغلاق الترويسة.
3
اكتب <style type="text/css"> في الترويسة. يوضع وسم النمط بين وسميّ الترويسة ويؤدي إلى إنشاء مساحة تمكنك من إدراج رمز سي إس إس لتنسيق مستند إتش تي إم إل.
- يمكنك أيضًا استخدام مستند أنماط تسلسلية خارجي. ابحث عن مقال يوضح كيفية إضافة ملف أنماط تسلسلية (سي إس إس) إلى صفحة إتش تي إم إل لتتعرف على مزيد من المعلومات حول استخدام ملف سي إس إس خارجي مع ملف إتش تي إم إل.
هذا هو وسم سي إس إس المسؤول عن تنسيق الخط الأفقي، ويمكنك إضافة هذا الوسم إلى الترويسة أو في ملف سي إس إس خارجي.
5
أضِف رموز سي إس إس إلى وسم "<hr>". تكتب هذه الرموز بعد وسم "hr {"، وتوجد عدة طرق لتنسيق خط أفقي إليك بعض أمثلتها:
- اكتب width: ##px; لضبط عرض الخط. غيّر ## إلى قيمة العرض بوحدة البكسل أو استخدم نسبة مئوية (%) عوضًا عن استخدام وحدة البكسل.
- اكتب height: ##px; لضبط سمك الخط. غيّر ## إلى قيمة السمك بوحدة البكسل
- اكتب background-color: ##; لتحديد لون الخط. غيّر ## إلى اسم اللون أو إلى رمز (#) متبوعًا بالرمز الستة عشري للون.
- اكتب margin-right: ##px; لتحديد الهامش من الجهة اليمنى بوحدة البكسل. غير ## إلى عدد وحدات بكسل أو إلى تلقائي "auto" واكتب "auto" لمحاذاة الخط نحو اليسار أو المنتصف.
- اكتب margin-left: ##px; لتحديد الهامش من الجهة اليسرى بوحدة البكسل. غير ## إلى عدد وحدات بكسل أو إلى تلقائي "auto" واكتب "auto" لمحاذاة الخط نحو اليمين أو المنتصف.
- اكتب margin-top: ##px; لتحديد هامش الخط العلوي. غيّر ## إلى عدد وحدات بكسل للهامش.
- اكتب margin-bottom: ##px; لتحديد هامش الخط السفلي. غيّر ## إلى عدد وحدات بكسل للهامش.
- اكتب border-width: ##px; لإنشاء حد حول الخط (اختياري). غيّر ## إلى عدد وحدات بكسل الممثلة لسمك الحد.
- اكتب border-color: ##; لتحديد لون الحد (اختياري). غيّر ## إلى اسم اللون أو إلى رمز (#) متبوعًا بالرمز الستة عشري للون.
يؤدي ذلك إلى إغلاق إعدادات النمط لوسم <hr>.
7
اكتب <hr> في أي مكان بداخل جسم مستند إتش تي إم إل لإضافة خط أفقي في المستند. ستطبق إعدادات نمط سي إس إس عند استخدام الوسم <hr> في مستند إتش تي إم إل. ^{[٤]Xمصدر بحثي} يفترض أن يظهر رمز الصفحة على النحو التالي:
```
<!DOCTYPE html><html><head><style type="text/css">hr {width: 50%;height: 20px;background-color: red;margin-right: auto;margin-left: auto;margin-top: 5px;margin-bottom: 5px;border-width: 2px;border-color: green;}</style></head><body><h1>ترويسة</h1><hr><p1>فقرة نصية مفصولة بخط أفقي</p1></body></html>
```