كيفية توسيط النص في مستند إتش تي إم إل

From Wiki How, the most trusted how-to site on the internet

تتعلم في هذا المقال كيفية توسيط النص في موقع يستخدم لغة إتش تي إم إل باستخدام صفحات الأنماط التسلسلية (سي إس إس)، علمًا بأن توسيط النصوص في لغة "إتش تي إم إل" كانت تتم باستخدام وسم <center> سابقًا، ولكن هذا الوسم أصبح قديم الطراز الآن ولا يعمل على معظم متصفحات الإنترنت.^{[١]
X
مصدر بحثي}

طريقة 1

طريقة 1 من 2:

استخدام صفحات الأنماط التسلسلية

1
افتح الملف المحتوي على أنماط سي إس إس. يمكنك على الرغم من قدم وسم <center> الآن إنشاء عنصر جديد يقوم بتوسيط النص الموجود داخل حدوده عند إضافته إلى أي جزء من الصفحة. في حالة عدم وجود ملف منفصل لأنماط سي إس إس أن تصل للأنماط أعلى ملف إتش تي إم إل، بين وسمي "<style>" و "</style>".^{[٢]
X
مصدر بحثي}
- في حالة عدم وجود وسوم <style> و </style> بالفعل، أضفها أسفل وسم <body> الظاهر أعلى الملف على النحو التالي:
2
أنشئ فئة جديدة تقوم بتوسيط النص. يقوم وسم <div> بإعلام مستند إتش تي إم إل بمرجع لجزء محدد من النص لتتمكن من إنشاء فئة لهذا الوسم. اكتب التالي في المسافة الموجودة بين وسوم "style"، واحرص على الضغط على زر الإدخال ↵ Enter مرتين قبل السطر الأول:
3
أضِف خاصية text-align. اكتب text-align: center; في المسافة الموجودة بين القوسين المعقوفين في قسم div.a، لتكون الترويسة بالشكل التالي:
4
أضِف وسم div المناسب للوسم المُراد توسيطه. يمكنك تحقيق ذلك بإضافة وسم <div class="a"> فوق النص المُراد توسيطه، ثم إغلاق الوسم بالشكل </div> أسفل النص. يمكنك مثلًا توسيط ترويسة ونص الفقرة بعدها عن طريق كتابة الرموز التالية:
5
استخدم وسم div.a لتوسيط مناطق أخرى. يمكنك توسيط عناصر أخرى (مثل المحتوى بين وسوم، مثل <p></p> و <h2></h2>) عن طريق كتابة <div class="a"> قبل العنصر، وكتابة </div> بعده. يؤدي ذلك لتوسيط النص بنفس الصورة السابقة، بعدما تم تعريف قسم "div.a" كأمر التوسيط.

6

راجع المستند. يفترض أن يظهر المستند على نحو مشابه لما يلي مع اختلاف المحتوى:^{[٣]
X
مصدر بحثي}

<!DOCTYPE html>
<html>
<body>
<style>
div.a {
text-align: center;
}
</style>

<div class="a">
<h1>مرحبًا في موقع "اسم موقعك"</h1>
<p>يعرض موقعنا معلومات متنوعة حول مختلف المجالات.</p>
</div>

<div class="a">
<h2>نرحب بالتبرعات</h2>
<p>رجاءً</p>
</div>

</body>
</html>

طريقة 2

طريقة 2 من 2:

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

1
افتح مستند إتش تي إم إل. تصف هذه الطريقة كيفية استخدام وسم <center> في لغة إتش تي إم إل، علمًا بأن هذا الوسم لم يعد يستخدم الآن. يمكن أن يعمل الوسم في بعض متصفّحات الإنترنت بعد انتهاء دعمه في شهر ديسمر لعام 2018، ولكن لا ينصح بالاعتماد على هذا الوسم على المدى البعيد.
2
ابحث عن النص الذي ترغب بتوسيطه. توجه نحو الأسفل حتى تعثر على الترويسة أو الفقرة النصية أو أي نص آخر ترغب بتوسيطه.
3
أضِف وسم "center" على جانبي النص. يكتب وسم التوسيط بالشكل <center>text</center>، حيث تكون القيمة "text" هي النص الذي ترغب بتوسيطه. يمكن أن تخرج وسوم "center" من الوسوم الحالية إن كان نصك يحتوي على وسوم أخرى (مثل "<p></p>"، في حالة الفقرات النصية):

4

راجع مستند إتش تي إم إل. يفترض أن يظهر المستند بالشكل التالي:^{[٤]
X
مصدر بحثي}

<!DOCTYPE html>
<html>
<body>

<h1><center>مرحبًا بك في "اسم موقعك الإلكتروني"</center></h1>
<center>أهلًا وسهلًا!</center>
<p1>يعرض موقعنا معلومات متنوعة حول مختلف المجالات.</p1>

</body>
</html>