الادوات المطلوبة
للتوسع في مفهوم المحاذاة في HTML ، نحتاج إلى ذكر بعض الأدوات الضرورية المطلوبة لتشغيل كود HTML. أحدهما محرر نصوص ، والثاني متصفح. قد يكون محرر نصوص مفكرة أو سامية أو notepad ++ أو أي أداة أخرى قد تساعد. في هذا الدليل ، استخدمنا notepad ، وهو تطبيق افتراضي في Windows ، و Google Chrome كمتصفح.
تنسيق HTML
لفهم المحاذاة ، نحتاج أولاً إلى امتلاك بعض الدراية بأساسيات HTML. لقد قدمنا لقطة شاشة لعينة التعليمات البرمجية.
< لغة البرمجة >
< رئيس >...</ رئيس >
< هيئة >….</ هيئة >
</ لغة البرمجة >
يتكون HTML من جزأين رئيسيين. واحد هو الرأس والآخر هو الجسد. جميع العلامات مكتوبة بين قوسين زاوي. يتعامل الجزء الرئيسي مع تسمية صفحة html باستخدام علامة العنوان. وأيضًا ، استخدم بيان النمط داخل الرأس. من ناحية أخرى ، يتعامل الجسم مع جميع العلامات الأخرى للنصوص أو الصور أو مقاطع الفيديو ، وما إلى ذلك ، وبعبارة أخرى ، كل ما تريد إضافته إلى صفحة html الخاصة بك مكتوب في جزء الجسم من html.
هناك شيء واحد أحتاج إلى تسليط الضوء عليه هنا وهو فتح العلامة وإغلاقها. يجب إغلاق كل علامة تتم كتابتها. على سبيل المثال ، يحتوي Html على علامة البداية وعلامة النهاية هي. لذلك لوحظ أن علامة النهاية بها شرطة مائلة متبوعة باسم العلامة. وبالمثل ، تتبع جميع العلامات الأخرى أيضًا نفس النهج. ثم يتم حفظ كل محرر نصوص بامتداد html. على سبيل المثال ، استخدمنا ملفًا باسم example.html. ثم سترى أن رمز المفكرة قد تغير إلى أيقونة المتصفح.
حيث أن المحاذاة هي محتوى التصميم. النمط في لغة تأشير النص الفائق يتكون من ثلاثة أنواع. أسلوب مضمّن ، تصميم داخلي وخارجي. مضمنة تعني في العلامة. داخلي مكتوب داخل الرأس. في الوقت نفسه ، تتم كتابة النمط الخارجي في ملف CSS منفصل.
التصميم الداخلي للنص
مثال 1
حان الوقت الآن لمناقشة مثال هنا. خذ بعين الاعتبار الصورة المعروضة أعلاه. في ملف المفكرة هذا ، كتبنا نصًا بسيطًا. عندما نقوم بتشغيله كمتصفح ، فإنه سيعرض المخرجات الواردة أدناه في المتصفح.
إذا أردنا عرض هذا النص في الوسط ، فسنقوم بتغيير العلامة.
هذه العلامة هي علامة مضمنة. سنكتب هذه العلامة عندما نقدم علامة فقرة في نص html. بعد النص ، أغلق علامة الفقرة. احفظ ثم افتح الملف في المستعرض.
تتم محاذاة الفقرة في الوسط ، كما يتم عرضها في المستعرض. يتم استخدام العلامة المستخدمة في هذا المثال لأي محاذاة ، أي لليسار واليمين والوسط. ولكن إذا كنت تريد محاذاة النص في المركز فقط ، فسيتم استخدام علامة محددة لهذا الغرض.
< المركز > …… ..</ المركز >يتم استخدام علامة المركز قبل النص وبعده. سيعرض هذا أيضًا نفس النتيجة مثل المثال السابق.
مثال 2
هذا مثال على محاذاة العنوان بدلاً من فقرة في نص html. صيغة محاذاة العنوان هي نفسها. يمكن القيام بذلك من خلال كل من العلامة أو عن طريق التصميم المضمن أو إضافة علامة المحاذاة داخل علامة العنوان.
يتم عرض الإخراج في المتصفح. قامت علامة العنوان بتحويل النص العادي إلى عنوان ، وقد قامت العلامة بمحاذاة النص في المنتصف.
مثال 3
قم بمحاذاة النص في المركز
ضع في اعتبارك مثالاً حيث توجد فقرة معروضة في المستعرض. نحن بحاجة إلى محاذاة هذا في المركز.
سنفتح هذا الملف في المفكرة ثم نقوم بمحاذاته في المركز باستخدام الوسم.
< ص نمط =نص-محاذاة: المركز ؛>بعد إضافة هذه العلامة في علامة الفقرة ، يرجى حفظ الملف وتشغيله على المتصفح. سترى أن الفقرة تم توسيطها الآن بمحاذاة. انظر الصورة أدناه.
قم بمحاذاة النص إلى اليمين
إن إمالة النص إلى اليمين يشبه وضعه في منتصف الصفحة. يتم استبدال الكلمة المركزية فقط في علامة الفقرة.
< ص نمط =نص-محاذاة: صحيح ؛> ……… ..</ ص >يمكن رؤية التغييرات من خلال الصورة الملحقة أدناه.
حفظ وتحديث صفحة الويب في المتصفح. يتم الآن نقل النص إلى الجانب الأيمن من الصفحة.
التصميم الداخلي للنص
مثال 1
كما هو موضح أعلاه ، فإن css الداخلية (ورقة الأنماط المتتالية) أو التصميم الداخلي هو نوع من css تم تعريفه في الجزء الرئيسي من html للصفحة. إنه يعمل بشكل مشابه للعلامات الداخلية.
ضع في اعتبارك الصفحة الموضحة أعلاه ؛ يحتوي على العناوين والفقرات فيه. لدينا مطلب لرؤية النص في المركز. تتطلب المحاذاة المضمنة الكتابة اليدوية للعلامات داخل كل فقرة. ولكن يمكن تطبيق النمط الداخلي تلقائيًا على كل فقرة من النص عن طريق ذكر p في بيان النمط. ثم ليست هناك حاجة لكتابة أي علامة داخل علامة الفقرة. لاحظ الآن الرمز ، وهو يعمل.
< نمط >ص{نص-محاذاة: المركز}
</ نمط >
تتم كتابة هذه العلامة داخل علامة النمط في جزء الرأس. الآن قم بتشغيل الكود في المتصفح.
عند تنفيذ الصفحة في المتصفح ، سترى أن جميع الفقرات محاذية في وسط الصفحة. يتم تطبيق هذه العلامة على كل فقرة موجودة في النص.
مثال 2
في هذا المثال ، تمامًا مثل الفقرة ، سنقوم بمحاذاة جميع العناوين في النص إلى الجانب الأيمن. لهذا الغرض ، سنذكر العناوين في بيان النمط داخل الرأس.
H2 ، h3{
نص-محاذاة: حق
}
الآن بعد حفظ الملف ، قم بتشغيل ملف المفكرة في المتصفح. سترى أن العناوين تتم محاذاتها على الجانب الأيمن من صفحة HTML.
مثال 3
في التصميم الداخلي ، قد يكون هناك موقف تحتاج فيه إلى محاذاة نص بعض الفقرات فقط في النص بينما تظل فقرات أخرى كما هي. ومن ثم ، فإننا نستخدم مفهوم الطبقة. نقدم الفصل باستخدام طريقة النقطة داخل علامة النمط. من الضروري إضافة اسم الفصل داخل علامة الفقرة التي تريد محاذاتها.
< نمط >.المركز{
نص-محاذاة: المركز}
</ نمط >
صف دراسي =المركز> ……</ ص >
لقد أضفنا الفصل في الفقرات الثلاث الأولى. الآن قم بتشغيل الكود. يمكنك أن ترى في الإخراج أن الفقرات الثلاث الأولى تتم محاذاتها في الوسط ، بينما لا تتم محاذاة الفقرات الأخرى.
استنتاج
أوضح هذا المقال أنه يمكن إجراء المحاذاة بطرق مختلفة من خلال العلامات المضمنة والداخلية.