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

How.com.vn العربية: PDF downloadتنزيل المقالHow.com.vn العربية: PDF downloadتنزيل المقال

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

طريقة 1
طريقة 1 من 2:

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

How.com.vn العربية: PDF downloadتنزيل المقال
  1. How.com.vn العربية: Step 1 افتح أو أنشئ مستند إتش تي إم إل جديد.
    يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
    • افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
    • افتح القائمة ملف.
    • انقر على خيار فتح.
    • حدد ملف إتش تي إم إل.
    • انقر على زر فتح.
  2. How.com.vn العربية: Step 2 حدد النقطة التي ترغب بإدراج الخط عندها.
    توجه نحو الأسفل حتى تصل إلى السطر الذي ترغب بإدراج الخط الفاصل فوقه ثم انقر على أقصى الجهة اليسرى من السطر لوضع مؤشر الكتابة قبل بداية السطر مباشرة.
  3. How.com.vn العربية: Step 3 أنشئ مساحة فارغة.
    اضغط على زر الإدخال Enter لنقل النص الذي ترغب بإدراج الخط فوقه نحو الأسفل ثم حرّك مؤشر الكتابة نحو الأعلى إلى المسافة الفارغة.
  4. Step 4 أضِف وسم "<hr>".
    اكتب <hr> في المسافة الموجودة قبل بدء السطر. وسم <hr> مسؤول عن إنشاء خط أفقي بعرض الصفحة بالكامل.
  5. Step 5 حرّك السطر الموجود أمام وسم "hr" إلى سطر جديد.
    اضغط على زر الإدخال Enter لتحقيق ذلك، ويفترض أن يكون وسم <hr> في سطر منفصل بعد هذا الإجراء.
  6. How.com.vn العربية: Step 6 أضِف خصائص للخط الأفقي (اختياري).
    يمكنك إضافة خصائص للخط الأفقي مثل الطول والعرض واللون والمحاذاة عن طريق استخدام الرموز التالية بعد وسم "hr" في قوس الرمز، علمًا بإمكانية إضافة أكثر من خاصية في القوس عن طريق الفصل بينها بمسافة.[٢]
    • اكتب <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. How.com.vn العربية: Step 7 احفظ ملف إتش تي إم إل.
    يمكنك حفظ الملف النصي كملف إتش تي إم إل عن طريق تغيير الامتداد (.txt, .docx) إلى ".html". اتبع الخطوات التالية لحفظ مستند إتش تي إم إل:
    • افتح القائمة ملف.
    • انقر على خيار حفظ باسم.
    • اكتب اسم الملف في حقل "اسم الملف".
    • اكتب .html في نهاية اسم الملف.
    • انقر على خيار حفظ .
  8. How.com.vn العربية: Step 8 اختبر ملف إتش تي إم إل.
    يمكنك اختبار ملف إتش تي إم إل عن طريق النقر على الملف بزر الفأرة الأيمن واختيار فتح بواسطة ثم تحديد متصفح إنترنت. يفترض أن يظهر في الصفحة خط متصل في مكان وضع وسم "hr"، ويفترض أن يكون رمز إتش تي إم إل بالشكل التالي:[٣]
    <!DOCTYPE html><html><body><h1>ترويسة</h1><hr size="6" width="50%" align="left" color="green"><p1>فقرة نصية مفصولة عن الترويسة بخط.</p1></body></html>
طريقة 2
طريقة 2 من 2:

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

How.com.vn العربية: PDF downloadتنزيل المقال
  1. How.com.vn العربية: Step 1 افتح أو أنشئ مستند إتش تي إم إل جديد.
    يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
    • افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
    • افتح القائمة ملف.
    • انقر على خيار فتح.
    • حدد ملف إتش تي إم إل.
    • انقر على زر فتح.
  2. How.com.vn العربية: Step 2 أضِف ترويسة لمستند إتش تي إم إل.
    استخدم الخطوات التالية لإضافة ترويسة إن لم يكن المستند يحتوي على ترويسة بالفعل، علمًا بأن الترويسة تأتي بعد وسم "<html>" وقبل وسم "<body>".
    • اكتب <head> أعلى المستند.
    • اضغط على زر الإدخال Enter مرتين لإضافة سطرين جديدين.
    • اكتب </head> لإغلاق الترويسة.
  3. Step 3 اكتب <style type="text/css"> في الترويسة.
    يوضع وسم النمط بين وسميّ الترويسة ويؤدي إلى إنشاء مساحة تمكنك من إدراج رمز سي إس إس لتنسيق مستند إتش تي إم إل.
    • يمكنك أيضًا استخدام مستند أنماط تسلسلية خارجي. ابحث عن مقال يوضح كيفية إضافة ملف أنماط تسلسلية (سي إس إس) إلى صفحة إتش تي إم إل لتتعرف على مزيد من المعلومات حول استخدام ملف سي إس إس خارجي مع ملف إتش تي إم إل.
  4. How.com.vn العربية: Step 4 اكتب  hr {.
    هذا هو وسم سي إس إس المسؤول عن تنسيق الخط الأفقي، ويمكنك إضافة هذا الوسم إلى الترويسة أو في ملف سي إس إس خارجي.
  5. Step 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: ##; لتحديد لون الحد (اختياري). غيّر ## إلى اسم اللون أو إلى رمز (#) متبوعًا بالرمز الستة عشري للون.
  6. How.com.vn العربية: Step 6 اكتب } بعد إعدادات النمط.
    يؤدي ذلك إلى إغلاق إعدادات النمط لوسم <hr>.
  7. How.com.vn العربية: Step 7 اكتب <hr> في...
    اكتب <hr> في أي مكان بداخل جسم مستند إتش تي إم إل لإضافة خط أفقي في المستند. ستطبق إعدادات نمط سي إس إس عند استخدام الوسم <hr> في مستند إتش تي إم إل. [٤] يفترض أن يظهر رمز الصفحة على النحو التالي:
    <!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>

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

How.com.vn العربية: فريق عمل ويكي هاو
شارك في التأليف::
كاتب في فريق ويكي هاو
ساهم فريق عمل ويكي هاو في إعداد المقال. يعمل فريقنا المُدرب من المحررين والباحثين على التحقق من دقة المعلومات وقابليتها للتطبيق بالنسبة للقراء.

يعمل فريق ويكي هاو على مراقبة كتابات فريق التحرير لضمان أن كل المقالات تُلبي معايير الجودة الخاصة بالموقع. تم عرض هذا المقال ١٤٬٠٥٦ مرة/مرات.
تم عرض هذه الصفحة ١٤٬٠٥٦ مرة.

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