تنزيل المقالتنزيل المقال
X
تتعرف في هذا المقال على كيفية إنشاء خط أفقي في لغة إتش تي إم إل، علمًا بإمكانية استخدام الخط الأفقي لفصل المحتوى على موقعك الإلكتروني. رمز إنشاء الخط بسيط للغاية، ويمكنك إضافة رمز الخط المضمن إلى نمطك في لغة إتش تي إم إل 4.01 في حين ستحتاج إلى استخدام رموز سي إس إس لتنسيق الخط في لغة إتش تي إم إل 5.[١]
الخطوات
- افتح أو أنشئ مستند إتش تي إم إل جديد. يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
- افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
- افتح القائمة ملف.
- انقر على خيار فتح.
- حدد ملف إتش تي إم إل.
- انقر على زر فتح.
- حدد النقطة التي ترغب بإدراج الخط عندها. توجه نحو الأسفل حتى تصل إلى السطر الذي ترغب بإدراج الخط الفاصل فوقه ثم انقر على أقصى الجهة اليسرى من السطر لوضع مؤشر الكتابة قبل بداية السطر مباشرة.
- أنشئ مساحة فارغة. اضغط على زر الإدخال ↵ Enter لنقل النص الذي ترغب بإدراج الخط فوقه نحو الأسفل ثم حرّك مؤشر الكتابة نحو الأعلى إلى المسافة الفارغة.
- أضِف وسم "<hr>". اكتب <hr> في المسافة الموجودة قبل بدء السطر. وسم <hr> مسؤول عن إنشاء خط أفقي بعرض الصفحة بالكامل.
- حرّك السطر الموجود أمام وسم "hr" إلى سطر جديد. اضغط على زر الإدخال ↵ Enter لتحقيق ذلك، ويفترض أن يكون وسم <hr> في سطر منفصل بعد هذا الإجراء.
- أضِف خصائص للخط الأفقي (اختياري). يمكنك إضافة خصائص للخط الأفقي مثل الطول والعرض واللون والمحاذاة عن طريق استخدام الرموز التالية بعد وسم "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"> مثلًا).
- احفظ ملف إتش تي إم إل. يمكنك حفظ الملف النصي كملف إتش تي إم إل عن طريق تغيير الامتداد (.txt, .docx) إلى ".html". اتبع الخطوات التالية لحفظ مستند إتش تي إم إل:
- افتح القائمة ملف.
- انقر على خيار حفظ باسم.
- اكتب اسم الملف في حقل "اسم الملف".
- اكتب .html في نهاية اسم الملف.
- انقر على خيار حفظ .
- اختبر ملف إتش تي إم إل. يمكنك اختبار ملف إتش تي إم إل عن طريق النقر على الملف بزر الفأرة الأيمن واختيار فتح بواسطة ثم تحديد متصفح إنترنت. يفترض أن يظهر في الصفحة خط متصل في مكان وضع وسم "hr"، ويفترض أن يكون رمز إتش تي إم إل بالشكل التالي:[٣]
<!DOCTYPE html><html><body><h1>ترويسة</h1><hr size="6" width="50%" align="left" color="green"><p1>فقرة نصية مفصولة عن الترويسة بخط.</p1></body></html>
- افتح أو أنشئ مستند إتش تي إم إل جديد. يمكن تحرير مستندات إتش تي إم إل باستخدام محرّر نصوص مثل برنامج المفكرة أو باستخدام محرّر رموز برمجية مثل أدوبي دريم ويفر. اتبع الخطوات التالية لفتح مستند إتش تي إم إل في محرّر نصوص من اختيارك:
- افتح برنامج المفكرة أو محرّر نصوص أو رموز برمجية من اختيارك.
- افتح القائمة ملف.
- انقر على خيار فتح.
- حدد ملف إتش تي إم إل.
- انقر على زر فتح.
- أضِف ترويسة لمستند إتش تي إم إل. استخدم الخطوات التالية لإضافة ترويسة إن لم يكن المستند يحتوي على ترويسة بالفعل، علمًا بأن الترويسة تأتي بعد وسم "<html>" وقبل وسم "<body>".
- اكتب <head> أعلى المستند.
- اضغط على زر الإدخال ↵ Enter مرتين لإضافة سطرين جديدين.
- اكتب </head> لإغلاق الترويسة.
- اكتب <style type="text/css"> في الترويسة. يوضع وسم النمط بين وسميّ الترويسة ويؤدي إلى إنشاء مساحة تمكنك من إدراج رمز سي إس إس لتنسيق مستند إتش تي إم إل.
- يمكنك أيضًا استخدام مستند أنماط تسلسلية خارجي. ابحث عن مقال يوضح كيفية إضافة ملف أنماط تسلسلية (سي إس إس) إلى صفحة إتش تي إم إل لتتعرف على مزيد من المعلومات حول استخدام ملف سي إس إس خارجي مع ملف إتش تي إم إل.
- اكتب hr {. هذا هو وسم سي إس إس المسؤول عن تنسيق الخط الأفقي، ويمكنك إضافة هذا الوسم إلى الترويسة أو في ملف سي إس إس خارجي.
- أضِف رموز سي إس إس إلى وسم "<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>.
- اكتب <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>