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

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

طريقة 1

طريقة 1 من 2:

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

تنزيل المقال

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
افتح أو أنشئ مستند إتش تي إم إل جديد. يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
- افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
- افتح القائمة ملف .
- انقر على خيار فتح .
- حدد ملف إتش تي إم إل.
- انقر على زر فتح .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

توجه نحو الأسفل حتى تصل إلى السطر الذي ترغب بإدراج الخط الفاصل فوقه ثم انقر على أقصى الجهة اليسرى من السطر لوضع مؤشر الكتابة قبل بداية السطر مباشرة.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

اضغط على زر الإدخال ↵ Enter لنقل النص الذي ترغب بإدراج الخط فوقه نحو الأسفل ثم حرّك مؤشر الكتابة نحو الأعلى إلى المسافة الفارغة.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

اكتب <hr> في المسافة الموجودة قبل بدء السطر. وسم <hr> مسؤول عن إنشاء خط أفقي بعرض الصفحة بالكامل.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

اضغط على زر الإدخال ↵ Enter لتحقيق ذلك، ويفترض أن يكون وسم <hr> في سطر منفصل بعد هذا الإجراء.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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"> مثلًا).
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
احفظ ملف إتش تي إم إل. يمكنك حفظ الملف النصي كملف إتش تي إم إل عن طريق تغيير الامتداد (.txt, .docx) إلى ".html". اتبع الخطوات التالية لحفظ مستند إتش تي إم إل:
- افتح القائمة ملف .
- انقر على خيار حفظ باسم .
- اكتب اسم الملف في حقل "اسم الملف".
- اكتب .html في نهاية اسم الملف.
- انقر على خيار حفظ .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

تنزيل المقال

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
افتح أو أنشئ مستند إتش تي إم إل جديد. يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
- افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
- افتح القائمة ملف .
- انقر على خيار فتح .
- حدد ملف إتش تي إم إل.
- انقر على زر فتح .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
أضِف ترويسة لمستند إتش تي إم إل. استخدم الخطوات التالية لإضافة ترويسة إن لم يكن المستند يحتوي على ترويسة بالفعل، علمًا بأن الترويسة تأتي بعد وسم "<html>" وقبل وسم "<body>".
- اكتب <head> أعلى المستند.
- اضغط على زر الإدخال ↵ Enter مرتين لإضافة سطرين جديدين.
- اكتب </head> لإغلاق الترويسة.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
اكتب <style type="text/css"> في الترويسة. يوضع وسم النمط بين وسميّ الترويسة ويؤدي إلى إنشاء مساحة تمكنك من إدراج رمز سي إس إس لتنسيق مستند إتش تي إم إل.
- يمكنك أيضًا استخدام مستند أنماط تسلسلية خارجي. ابحث عن مقال يوضح كيفية إضافة ملف أنماط تسلسلية (سي إس إس) إلى صفحة إتش تي إم إل لتتعرف على مزيد من المعلومات حول استخدام ملف سي إس إس خارجي مع ملف إتش تي إم إل.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

هذا هو وسم سي إس إس المسؤول عن تنسيق الخط الأفقي، ويمكنك إضافة هذا الوسم إلى الترويسة أو في ملف سي إس إس خارجي.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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: ##; لتحديد لون الحد (اختياري). غيّر ## إلى اسم اللون أو إلى رمز (#) متبوعًا بالرمز الستة عشري للون.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

يؤدي ذلك إلى إغلاق إعدادات النمط لوسم <hr>.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

[١]

[٢]

[٣]

[٤]

تسجيل الدخول

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

الخطوات

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

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

مقالات ذات صلة في ويكي هاو

المصادر

المزيد حول هذا المقال

هل ساعدك هذا المقال؟

مقالات ويكي هاو ذات صلة

تابعنا

مشاركة

Explore Categories