في عالم تطوير الويب، يعد التصور الجيد لجميع الكائنات المرتبة على الصفحة أمرًا ضروريًا، كما هو الحال مع الصور في هذه الحالة. لا تعمل الصور كمجرد زخرفة لموقع الويب المذكور فحسب، ولكنها تنقل أيضًا معلومات رائعة وتكوينًا جيدًا لموقع الويب بحيث تصل الرسالة التي تريد إرسالها بشكل صحيح إلى المستخدم أمرًا ضروريًا. هذا هو ما يلتزم به مصممو الويب، ويجب أن يكون لديهم مفاهيم كافية للتكوين حتى يتم تحقيق ذلك. في هذه الحالة، لن نكرس أنفسنا لتصميم الموقع من الصفر، لكننا سنفعل ذلك سوف نتعلم كيفية توسيط صور هذه المواقع باستخدام HTML، وهو أمر ضروري، منذ ذلك الحين تتكون جميع صفحات الويب تقريبًا من لغة HTML.
سنشرح خلال هذه المقالة التقنيات والعمليات المختلفة التي يمكن استخدامها مع هذه اللغة. سوف نستكشف الأدوات المختلفة المتاحة للمطورين لضمان تحقيق أهداف تصميم الويب. من الأساليب الأساسية التي تستخدم السمات إلى التقنيات المستندة إلى CSS.
بالإضافة إلى ذلك، سوف نفهم كيف تتناسب هذه التقنيات مع السياق الأوسع لتصميم الويب. إذا كنت تستخدم لغة العلامة التجارية لفترة من الوقت، فسوف تعلم أنه للوصول إلى هدف ما، هناك العديد من الطرق لتحقيقه، بعضها أكثر مثالية وتطورًا من البعض الآخر، ولكنها جميعها صالحة، وبالتالي سنعلمك طرقًا مختلفة لتوسيط الصور في HTML.
ومع ذلك، سواء كنت تتحدث عن اللغات الترميزية لفترة من الوقت وتريد تحسين بعض التقنيات، أو إذا كنت لا تزال في مرحلة البدء وترغب في تعلم مفاهيم معينة للغة HTML، فأنت على حق مكان. تابع القراءة لمعرفة كيفية توسيط الصور في HTML. لنبدأ!
ما هو HTML؟
قبل الدخول في الأمر، من المهم أن نكون على دراية بما نقوم به، وما هي اللغة التي سنستخدمها، في هذه الحالة، HTML.
HTML، أو لغة ترميز النص التشعبي، هي اللغة القياسية المستخدمة لإنشاء صفحات الويب وتطبيقات الويب.. إنها لغة تحدد البنية الأساسية ومحتوى صفحة الويب. يوفر HTML، الذي تم تطويره بواسطة Tim Berners-Lee في عام 1991، مجموعة من العلامات والسمات التي تسمح لمطوري الويب بتحديد أنواع مختلفة من المحتوى على الصفحة، مثل النصوص والصور والروابط والنماذج والوسائط المتعددة.
تتكون صفحات الويب التي تم إنشاؤها باستخدام HTML من عناصر هيكلية، مثل العناوين والفقرات والقوائم والجداول.، مرتبة حسب علامات محددة تشير إلى كيفية عرض المحتوى في متصفح الويب. يمكن أن يحتوي كل عنصر على نص أو روابط أو حتى عناصر متداخلة أخرى. يسمح HTML أيضًا بدمج لغات أخرى، مثل CSS (أوراق الأنماط المتتالية) للتصميم المرئي والعرض التقديمي، وJavaScript للتفاعل الديناميكي من جانب العميل.
أدى تطور HTML إلى عدة إصدارات؛ أحدث إصدار هو HTML5، الذي قدم ميزات جديدة مثل العناصر الدلالية (مثل , و )، واجهات برمجة التطبيقات للوسائط المتعددة والرسومات، بالإضافة إلى تحسين الدعم للأجهزة المحمولة، مما يمنحها إمكانية وصول وقابلية أكبر للتوسع. باختصار، HTML هي اللغة الأساسية التي تعمل بمثابة "الهيكل العظمي" لجميع صفحات الويب، مما يوفر البنية الأساسية التي يُبنى عليها محتوى مواقع الويب المذكورة.
طرق توسيط الصور في HTML
والآن بعد أن فهمنا ما هو HTML وما هو الغرض منه، سنشرح كيفية تحقيق الهدف الرئيسي من هذه المقالة. نعرض لك هنا بعض الطرق لتوسيط الصور في HTML
الأنماط المضمنة (خاصية مضمنة ومحاذاة النص) عن طريق التفاف الصورة في وقم بتطبيق style = "text-align: center;"، فأنت تستخدم CSS المضمّن لتحديد نمط معين لتلك الحاوية. محاذاة النص: مركز؛ خاصية يقوم بمحاذاة الصورة أفقيًا في وسط الصورة بغض النظر عن حجمه أو محتواه.
الأنماط المضمنة (المضمنة والهامش والخصائص التلقائية) عند تطبيق النمط =»الهامش: 0 تلقائي؛ محاذاة النص: المركز؛» إلى ، فأنت تستخدم خاصيتين لـ CSS. الهامش: 0 النفس؛ يضبط هامشًا صفريًا في الأعلى والأسفل وهامشًا تلقائيًا على الجانبين، مع توسيط أفقيًا . محاذاة النص: مركز؛ يضمن أن أي محتوى داخل يتم توسيطها أيضًا أفقيًا.
الأنماط في CSS الخارجية (خصائص الهامش والتلقائي) عند تحديد فئة CSS مثل .center-image { هامش: 0 تلقائي؛ محاذاة النص: مركز؛ }، يمكنك تطبيق هذا النمط على أي مع فئة .center-image. هامش الملكية: 0 تلقائي؛ لا يزال يتم توسيطه أفقيًا، بينما محاذاة النص: مركز؛ يضمن أن المحتوى داخل يتمركز أيضًا.
Flexbox (التمركز الأفقي والرأسي) عند استخدام العرض: flex؛ ضبط المحتوى: مركز؛ محاذاة العناصر: مركز؛ في الحاوية (على سبيل المثال، أ )، فأنت تقوم بتطبيق تقنية Flexbox. العرض: فليكس؛ يؤدي هذا إلى تحويل الحاوية إلى حاوية مرنة، بينما justify-content: center; ومحاذاة العناصر: المركز؛ فهي تقوم بتوسيط الصورة أفقيًا وعموديًا على التوالي، بغض النظر عن حجمها.
الشبكة (التمركز الأفقي والرأسي) عند تطبيق العرض: الشبكة؛ عناصر المكان: المركز؛ في الحاوية، أنت تستخدم تقنية CSS Grid. العرض: الشبكة؛ يضبط الحاوية كحاوية شبكية، وعناصر المكان: center؛ يقوم بتوسيط أي محتوى داخل الشبكة أفقيًا وعموديًا.
ما هي اللغات الترميزية؟
كما ذكرنا أعلاه ، HTML هي لغة ترميزية، ولكن ربما لا يبدو هذا التعريف مألوفًا لأكثر من شخص واحد، لذلك لا يضر معرفة المزيد عنه.ومعها يمكنك التعرف على المزيد حول بيئة HTML.
اللغات الترميزية هي أنظمة ترميز تستخدم العلامات لتنظيم النص وتنسيقه في المستندات الإلكترونية.. هذه اللغات مثل HTML و XML إنها أساسية في إنشاء صفحات الويب وتنظيم البيانات. تحدد العلامات عناصر مثل العناوين والفقرات والروابط، مما يسمح لأجهزة الكمبيوتر ومتصفحات الويب بتفسير المحتوى وعرضه بشكل صحيح.
تعد اللغات الترميزية ضرورية للعرض المنظم للمعلومات في البيئات الرقمية، مما يوفر إطارًا قياسيًا للتواصل والتصميم في عصر الإنترنت. وقد قلت ذلك، إذا كنت تريد معرفة المزيد عن لغة HTML، فنحن ندعوك للوصول إلى هذا نوبة، والذي نشرح فيه المزيد من المفاهيم المتعلقة بـ HTML، وفي هذه الحالة كيفية وضع صورة خلفية. إذا كنت تريد التعرف على لغة ترميزية أخرى، فنحن ندعوك لقراءة هذه اللغة الأخرى نوبة، حيث نشرح ما هو XML.
