تنزيل المقال
تنزيل المقال
تتعلم في هذا المقال كيفية توسيط النص في موقع يستخدم لغة إتش تي إم إل باستخدام صفحات الأنماط التسلسلية (سي إس إس)، علمًا بأن توسيط النصوص في لغة "إتش تي إم إل" كانت تتم باستخدام وسم <center> سابقًا، ولكن هذا الوسم أصبح قديم الطراز الآن ولا يعمل على معظم متصفحات الإنترنت. [١] X مصدر بحثي
الخطوات
-
افتح الملف المحتوي على أنماط سي إس إس. يمكنك على الرغم من قدم وسم <center> الآن إنشاء عنصر جديد يقوم بتوسيط النص الموجود داخل حدوده عند إضافته إلى أي جزء من الصفحة. في حالة عدم وجود ملف منفصل لأنماط سي إس إس أن تصل للأنماط أعلى ملف إتش تي إم إل، بين وسمي "<style>" و "</style>". [٢] X مصدر بحثي
- في حالة عدم وجود وسوم <style> و </style> بالفعل، أضفها أسفل وسم <body> الظاهر أعلى الملف على النحو التالي:
<!DOCTYPE html> < html > < body > < style > </ style >
-
أنشئ فئة جديدة تقوم بتوسيط النص. يقوم وسم <div> بإعلام مستند إتش تي إم إل بمرجع لجزء محدد من النص لتتمكن من إنشاء فئة لهذا الوسم. اكتب التالي في المسافة الموجودة بين وسوم "style"، واحرص على الضغط على زر الإدخال ↵ Enter مرتين قبل السطر الأول:
div . a { }
-
أضِف خاصية text-align . اكتب text-align: center; في المسافة الموجودة بين القوسين المعقوفين في قسم div.a ، لتكون الترويسة بالشكل التالي:
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style >
-
أضِف وسم div المناسب للوسم المُراد توسيطه. يمكنك تحقيق ذلك بإضافة وسم <div class="a"> فوق النص المُراد توسيطه، ثم إغلاق الوسم بالشكل </div> أسفل النص. يمكنك مثلًا توسيط ترويسة ونص الفقرة بعدها عن طريق كتابة الرموز التالية:
< div class = "a" > < h1 > مرحب ً ا في "اسم موقعك الإلكتروني" </ h1 > < p > يتوفر على هذا الموقع معلومات متنوعة من مختلف المجالات .</ p > </ div >
-
استخدم وسم div.a لتوسيط مناطق أخرى. يمكنك توسيط عناصر أخرى (مثل المحتوى بين وسوم، مثل <p></p> و <h2></h2> ) عن طريق كتابة <div class="a"> قبل العنصر، وكتابة </div> بعده. يؤدي ذلك لتوسيط النص بنفس الصورة السابقة، بعدما تم تعريف قسم "div.a" كأمر التوسيط.
< style > div . a { text-align : center ; } </ style > < div class = "a" > < h2 > نرحب بالتبرعات </ h2 > < p > رجاء ً </ p > </ div >
-
راجع المستند. يفترض أن يظهر المستند على نحو مشابه لما يلي مع اختلاف المحتوى: [٣] 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 >
-
1افتح مستند إتش تي إم إل. تصف هذه الطريقة كيفية استخدام وسم <center> في لغة إتش تي إم إل، علمًا بأن هذا الوسم لم يعد يستخدم الآن. يمكن أن يعمل الوسم في بعض متصفّحات الإنترنت بعد انتهاء دعمه في شهر ديسمر لعام 2018، ولكن لا ينصح بالاعتماد على هذا الوسم على المدى البعيد.
-
ابحث عن النص الذي ترغب بتوسيطه. توجه نحو الأسفل حتى تعثر على الترويسة أو الفقرة النصية أو أي نص آخر ترغب بتوسيطه.
-
أضِف وسم "center" على جانبي النص. يكتب وسم التوسيط بالشكل <center>text</center> ، حيث تكون القيمة "text" هي النص الذي ترغب بتوسيطه. يمكن أن تخرج وسوم "center" من الوسوم الحالية إن كان نصك يحتوي على وسوم أخرى (مثل "<p></p>"، في حالة الفقرات النصية):
< center >< h1 > مرحبًا بك في موقعي الإلكتروني </ h1 ></ center > < center > أهلًا وسهلًا! </ center >
-
راجع مستند إتش تي إم إل. يفترض أن يظهر المستند بالشكل التالي: [٤] X مصدر بحثي
<!DOCTYPE html> < html > < body > < h1 >< center > مرحبًا بك في "اسم موقعك الإلكتروني" </ center ></ h1 > < center > أهلًا وسهلًا! </ center > < p1 > يعرض موقعنا معلومات متنوعة حول مختلف المجالات. </ p1 > </ body > </ html >
