المحتوى

• خطوات
• طريقة 1 من 2: العمل في HTML 4.01
• طريقة 2 من 2: العمل في CSS / HTML5

ستوضح لك هذه المقالة كيفية إضافة خط أفقي في HTML. يمكن استخدام الخط الأفقي لفصل المحتوى على الموقع. رمز إنشاء الخط بسيط للغاية. ومع ذلك ، في HTML 4.01 ، من الممكن تغيير تصميم خط باستخدام أوامر داخلية. في HTML5 ، سيتعين عليك استخدام CSS لتصميم الخط.

خطوات

طريقة 1 من 2: العمل في HTML 4.01

1. 1 افتح مستند HTML موجود أو أنشئ مستند HTML جديدًا. يمكن تحرير مستندات HTML باستخدام محرر نصوص مثل Notepad أو محرر تعليمات برمجية متخصص مثل Adobe Dreamweaver. اتبع هذه الخطوات لفتح مستند HTML في البرنامج الذي تختاره:
   • افتح المفكرة أو محرر نص / رمز آخر.
   • افتح القائمة ملف.
   • انقر فوق يفتح.
   • حدد ملف HTML.
   • انقر فوق يفتح
2. 2 حدد الموقع حيث تريد إدراج الخط. قم بالتمرير لأسفل حتى تجد السطر الذي يجب أن يظهر السطر فوقه ، ثم حرك المؤشر مباشرةً إلى بداية هذا السطر بالنقر فوق أقصى يسار هذا السطر.
3. 3 أضف سطرًا فارغًا. انقر نقرًا مزدوجًا ↵ أدخللتحريك النص الذي تريد إدراج سطر قبله ، ثم ضع المؤشر على سطر فارغ.
4. 4 أضف علامة hr>. يدخل hr> إلى المساحة الفارغة في بداية السطر. بطاقة شعار hr> يسمح لك برسم خط أفقي عبر الصفحة بأكملها.
5. 5 حرك المؤشر بعد علامة "hr" إلى سطر جديد بالضغط ↵ أدخل. الآن العلامة hr> يجب أن يكون على سطر منفصل.
6. 6 أضف سمات إلى الخط الأفقي (اختياري). أضف سمات مثل الطول والسمك واللون والمحاذاة. قم بتضمينهم بأقواس معقوفة مباشرة بعد "ساعة". لإضافة سمات متعددة ، افصل بينها بمسافة.
   • يدخل hr size = "#">لتغيير سمك الخط. استبدل "#" بقيمة سماكة رقمية (على سبيل المثال ، الحجم = "10").
   • يدخل hr width = "#">لتغيير عرض الخط. استبدل "#" بعدد البكسل أو نسبة من عرض الصفحة (على سبيل المثال ، العرض = "200" أو العرض = "75٪").
   • يدخل hr color = "#">لتغيير لون الخط. استبدل "#" باسم اللون أو رمزه السداسي عشري (على سبيل المثال ، color = "red" أو color = "# FF0000").
   • يدخل hr align = "#">لمحاذاة الخط. استبدل "#" بـ "يمين" (يمين) أو "يسار" (يسار) أو "وسط" (على سبيل المثال ، hr width = "50٪" align = "center">).
7. 7 احفظ ملف HTML. لحفظ ملف نصي كمستند HTML ، يجب تغيير امتداد الملف (.txt ، .docx) إلى ".html". اتبع هذه الخطوات لحفظ مستند HTML الخاص بك:
   • افتح القائمة ملف.
   • انقر فوق حفظ باسم.
   • أدخل اسمًا للملف في حقل اسم الملف.
   • يضيف .لغة البرمجة بعد اسم الملف.
   • انقر فوق يحفظ.
8. 8 تحقق من مستند HTML الخاص بك. للتحقق من ملف HTML ، انقر بزر الماوس الأيمن فوقه واختر فتح باستخدام. ثم حدد متصفح الويب الخاص بك. يجب أن يظهر خط متصل حيث قمت بإدراج علامة "hr". سيبدو كود HTML بهذا الشكل:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50٪" align = "left" color = "green"> p1> يجب فصل هذا السطر عن العنوان بسطر . / P1> / body> / html>

طريقة 2 من 2: العمل في CSS / HTML5

1. 1 افتح مستند HTML موجود أو أنشئ مستند HTML جديدًا. يمكن تحرير مستندات HTML باستخدام محرر نصوص مثل Notepad أو محرر تعليمات برمجية متخصص مثل Adobe Dreamweaver. اتبع هذه الخطوات لفتح مستند HTML في البرنامج الذي تختاره:
   • افتح المفكرة أو محرر نص / رمز آخر.
   • افتح القائمة ملف.
   • انقر فوق يفتح.
   • حدد ملف HTML.
   • انقر فوق يفتح
2. 2 أضف عنوانًا إلى مستند HTML الخاص بك. إذا لم يكن لمستند HTML عنوان بالفعل ، فاتبع هذه الخطوات لإضافة عنوان. يجب أن يأتي العنوان بعد علامة html> وقبل علامة body>.
   • يدخل رئيس> في الجزء العلوي من المستند.
   • انقر نقرًا مزدوجًا ↵ أدخللإضافة سطرين جديدين.
   • يدخل / رئيس>لإغلاق العنوان.
3. 3 يدخل نوع النمط = "text / css"> داخل الرأس. يتم وضع علامة النمط بين علامتي العنوان لإنشاء مكان يمكنك فيه استخدام CSS لتعديل تصميم HTML.
   • بدلاً من ذلك ، يمكنك استخدام ورقة أنماط خارجية. اقرأ المقال "كيفية إدراج ملف CSS في HTML»لمعرفة كيفية ربط ملف CSS خارجي بملف HTML.
4. 4 يدخل ساعة {. هذه علامة CSS لتصميم الخط الأفقي. قم بإضافته بعد علامة "style" في رأسك أو ملف CSS خارجي.
5. 5 أضف أنماط CSS للعلامة hr>. يجب أن تأتي بعد علامة "hr {". يمكن تصميم الخط الأفقي بعدة طرق. فيما يلي عدد قليل منهم.
   • يدخل العرض: ## بكسل ؛لضبط عرض الخط. استبدل "##" بعرض الخط بالبكسل. بدلاً من وحدات البكسل (بكسل) ، يمكنك استخدام النسبة المئوية (٪).
   • يدخل الارتفاع: ## بكسل ؛لضبط وزن الخط. استبدل "##" بعرض الخط بالبكسل.
   • يدخل لون الخلفية: ##؛لتحديد لون الخط. استبدل "##" باسم لون أو علامة تجزئة (#) متبوعة برمز لون سداسي عشري.
   • يدخل الهامش الأيمن: ## بكسل ؛لتحديد عدد البكسل من الحافة اليمنى. استبدل "##" بعدد رقمي من البكسل أو الرمز "تلقائي". أدخل "تلقائي" لمحاذاة الخط إلى اليسار أو الوسط.
   • يدخل الهامش الأيسر: ## بكسل ؛لتحديد عدد البكسل من الحافة اليسرى. استبدل "##" بعدد رقمي من البكسل أو الرمز "تلقائي". أدخل "تلقائي" لمحاذاة الخط إلى اليمين أو الوسط.
   • يدخل أعلى الهامش: ## بكسل ؛ لتحديد المساحة المتروكة العلوية للخط. استبدل "##" برقم يتوافق مع المساحة المتروكة بالبكسل.
   • يدخل الهامش السفلي: ## بكسل ؛لتحديد المساحة المتروكة السفلية للخط. استبدل "##" برقم يتوافق مع المساحة المتروكة بالبكسل.
   • يدخل عرض الحدود: ## بكسل ؛لرسم مربع حول الخط (اختياري). استبدل "##" برقم يتوافق مع عرض الحد بالبكسل.
   • يدخل لون الحدود: ## ؛لتحديد لون الحدود (اختياري). استبدل "##" باسم لون أو علامة تجزئة (#) متبوعة برمز لون سداسي عشري.
6. 6 يدخل } بعد سمات النمط لإكمال تصميم العلامة hr>.
7. 7 يدخل hr> في أي مكان في نص مستند HTML لإضافة خط أفقي. سيتم تطبيق إعدادات نمط CSS في كل مرة تستخدم فيها علامة hr> في مستند HTML الخاص بك. يجب أن تبدو التعليمات البرمجية الخاصة بك كما يلي:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50٪؛ الارتفاع: 20 بكسل ؛ لون الخلفية: أحمر ؛ الهامش الأيمن: تلقائي ؛ الهامش الأيسر: تلقائي ؛ أعلى الهامش: 5 بكسل ؛ الهامش السفلي: 5 بكسل ؛ عرض الحدود: 2 بكسل ؛ لون الحدود: أخضر ؛ } / style> / head> body> h1> Heading / h1> hr> p1> يجب فصل هذا السطر عن العنوان بخط أفقي / p1> / body> / html>