أتش تي أم أل هي لغة الترميز الرئيسية المستخدمة لإنشاء صفحات الويب. يسمح لك بوضع عناصر مختلفة على الصفحة ، بما في ذلك النصوص والصور ومقاطع الفيديو. عندما نضيف صورة إلى صفحة ويب ، من المهم التأكد من محاذاتها بشكل صحيح لخلق توازن وتصميم جذاب.
أحد المتطلبات الشائعة للصور على صفحة الويب هو مواءمتها في المركز. في هذه المقالة ، سوف ننظر في عدة طرق لتحقيق هذا الهدف باستخدام شفرة هتمل والأساليب. سيتم النظر في كل من الأساليب البسيطة والتقنيات الأكثر تقدما. إذا كنت تريد معرفة كيفية توسيط صورة في أتش تي أم أل ، فاستمر في القراءة.
يجب أن نتذكر أن محاذاة الصورة في المركز يمكن تكييفها مع المواقف والتفضيلات المختلفة للمصمم. اعتمادا على المشروع المحدد ، يمكنك اختيار الطريقة الأنسب. ضع في اعتبارك أن كل طريقة قد يكون لها خصائصها وقيودها الخاصة ، لذا جرب واختر الطريقة التي تناسبك.
- لماذا محاذاة الصورة في المركز
- العلامات والسمات
- علامة إمغ وخصائصها
- علامة ديف وخصائصها
- طرق المحاذاة
- المحاذاة باستخدام كس
- المحاذاة باستخدام كود هتمل
- باستخدام الجداول
- سؤال وجواب
- كيف يمكنني توسيط صورة على صفحة ويب?
- كيف يمكنني استخدام كس لمحاذاة صورة إلى وسط الصفحة?
- كيف يمكنني محاذاة صورة إلى وسط الصفحة باستخدام أبعاد واضحة والهوامش?
- هل من الممكن محاذاة الصورة إلى وسط الصفحة أفقيا فقط?
لماذا محاذاة الصورة في المركز
غالبا ما تحتوي صفحات الويب على صور ، وهي عناصر مهمة للتصميم والمحتوى. محاذاة الصور في المركز يعطي الصفحات نظرة أكثر جمالا وتوازنا. يمكن أن يساعد أيضا في تحسين إدراك المحتوى وجعله أكثر جاذبية للزوار.
يتيح لك توسيط الصور أيضا إنشاء تخطيط صفحة كثيف واحترافي. هذا مفيد بشكل خاص عندما يكون هناك العديد من الصور على الصفحة أو عندما تكون الصورة عنصرا أساسيا في المحتوى. تعمل المحاذاة الصحيحة للصورة في المركز على تحسين التجربة المرئية للمستخدمين وتجعل تفاعلهم مع المحتوى أكثر ملاءمة.
بالإضافة إلى ذلك ، تؤثر محاذاة الصورة في المركز على راحة قراءة النص على الصفحة. يؤدي وضع الصورة في منتصف الصفحة إلى إنشاء مساحة حولها وتسهيل قراءة النص. هذا مهم بشكل خاص عند استخدام الصورة مع النص وتعبيره.
أخيرا ، يساعد توسيط الصورة في التأكيد على أهمية الصورة وجاذبيتها. هذا يسمح لك لجعله التركيز الرئيسي للصفحة وجذب انتباه المستخدمين. تصبح الصورة المحاذاة بشكل جميل في المركز مركز الاهتمام ويمكن أن تزيد من التأثير العاطفي على الجمهور.
العلامات والسمات
هناك العديد من العلامات والسمات المختلفة في هتمل التي تسمح للمطورين لإنشاء مجموعة متنوعة من صفحات الويب. تتضمن بعض العلامات والسمات الأكثر فائدة والأكثر استخداما ما يلي:
- العلامة
- يتم استخدام العلامة لتمييز النص بخط قوي (عادة ما يكون غامقا).
- يتم استخدام العلامة لتمييز النص بخط مائل أو بطريقة أخرى.
- يتم استخدام السمة سرك لتحديد المسار إلى الصورة في العنصر.
- العلامة
- العلامة
- الوسم
من المهم أن تتذكر أن الاستخدام الصحيح للعلامات والسمات هو المفتاح لإنشاء محتوى جيد التنظيم ويمكن الوصول إليه.
علامة إمغ وخصائصها
علامة إمغ هي واحدة من العلامات الرئيسية في هتمل ويستخدم لإدراج الصور في صفحة ويب. يحتوي على السمات التالية:
- سرك-يحدد المسار إلى الصورة على الخادم. على سبيل المثال:
- البديل-يحدد النص البديل الذي سيتم عرضه إذا تعذر تحميل الصورة. على سبيل المثال:
- العرض-يحدد عرض الصورة بالبكسل أو النسب المئوية. على سبيل المثال:
- الارتفاع-يحدد ارتفاع الصورة بالبكسل أو النسب المئوية. على سبيل المثال:
- العنوان-يحدد تلميحا منبثقا عندما يحوم المؤشر فوق الصورة. على سبيل المثال:
- محاذاة-يحدد المحاذاة الأفقية للصورة. خيارات القيمة: "اليسار" — المحاذاة اليسرى ، "اليمين" — المحاذاة اليمنى ، "المركز" — المحاذاة المركزية. على سبيل المثال:
- الحدود-يحدد عرض الحدود حول الصورة بالبكسل. على سبيل المثال:
- خريطة الاستخدام-تحدد اسم خريطة الصورة ، والتي يمكنك من خلالها تعيين روابط لمناطق معينة من الصورة. على سبيل المثال:
علامة ديف وخصائصها
علامة ديف هي واحدة من عناصر كتلة الرئيسية في هتمل ويستخدم على نطاق واسع لتجميع ومحاذاة المحتوى.
تحتوي علامة ديف على العديد من السمات التي تسمح لك بتخصيص سلوكها:
- المعرف هو المعرف الفريد للعنصر المستخدم للروابط أو التصميم من خلال كس;
- فئة-يحدد فئة واحدة أو أكثر يمكن استخدامها لتصميم عنصر;
- نمط-يسمح لك بتعيين أنماط مضمنة لعنصر;
- العنوان-يحدد تلميح أداة للعنصر.
مثال على استخدام علامة ديف:
في هذا المثال ، نقوم بإنشاء كتلة مع المعرف الفريد "حاوية" ، الفئة" المحتوى الرئيسي " وتعيين عرض الكتلة إلى 500 بكسل.
يمكن أيضا استخدام علامة ديف داخل عناصر أخرى لتجميع محتوى الصفحة وتنظيمه. على سبيل المثال ، لإنشاء عمودين على الصفحة:
العمود 1
العمود 2
- محاذاة النص: المركز;
- // يحول الصورة إلى عنصر كتلة
| في هذا المثال ، نقوم بإنشاء كتلتين مع فئة" العمود " ، والتي سيتم استخدامها لعرض المحتوى في عمودين. | العلامة ديف هو أداة قوية جدا ومرنة في هتمل ويستخدم على نطاق واسع في تطوير الموقع لإنشاء تخطيطات مختلفة ومحتوى الهيكل. | طرق المحاذاة | هناك عدة طرق لتوسيط صورة على صفحة ويب. وهنا بعض منهم: |
| باستخدام العلامة | : إنشاء حاوية باستخدام العلامة | وتطبيق أنماط لمحاذاة إلى المركز. على سبيل المثال: | شعبة { |
| // المحاذاة الأفقية للمحتوى في المركز | } | آي إم جي { | عرض: كتلة; |
| } | باستخدام خاصية كس "الهامش": قم بتعيين جميع جوانب حقل" الهامش "للصورة" تلقائي". سيؤدي ذلك إلى محاذاة الصورة في المنتصف أفقيا وعموديا. على سبيل المثال: | آي إم جي { | الهامش: تلقائي; | // يحدد القيمة التلقائية لحقل "الهامش" لجميع الجوانب | } | باستخدام خصائص كس" عرض " ، " موقف "و" يسار/يمين/أعلى/أسفل": تعيين قيم الصورة إلى" عرض: كتلة "و"موقف: المطلق". ثم استخدم خصائص" اليسار "أو" اليمين "و" أعلى "أو" أسفل " لوضع الصورة بدقة في وسط الصفحة. على سبيل المثال: | آي إم جي { |
عرض: كتلة;
موضع: مطلق;
اليسار: 50%;
- أعلى: 50%;
- تحويل: ترجمة (-50٪ ، -50٪);
- // يغير الصورة بنسبة 50 ٪ بالنسبة إلى الزاوية العلوية اليسرى
}
يمكنك استخدام أي من هذه الطرق لتوسيط الصورة على صفحة الويب الخاصة بك ، اعتمادا على تفضيلاتك ومتطلبات التصميم.
المحاذاة باستخدام كس
يمكنك استخدام كس لمحاذاة الصورة في المركز. للقيام بذلك ، يمكننا استخدام العديد من الخصائص والقيم.
- يحدد عرض كتلة للصورة;
- الهامش-اليسار: تلقائي ؛ والهامش-اليمين: تلقائي ؛ - محاذاة الصورة تلقائيا أفقيا;
- هنا قمنا بتطبيق الأنماط على العنصر المحدد. العرض: خاصية كتلة يسمح لك لعرض صورة ككتلة. الهامش-اليسار: تلقائي ؛ والهامش-اليمين: تلقائي ؛ تقوم الخصائص تلقائيا بمحاذاة الصورة أفقيا. ومحاذاة النص: مركز ؛ خاصية محاذاة محتويات العنصر إلى المركز.
- وبالتالي ، باستخدام كس ، يمكننا بسهولة محاذاة الصورة إلى المركز على صفحة الويب.
| محاذاة النص: مركز ؛ - محاذاة محتويات العنصر إلى المركز. | نموذج التعليمات البرمجية: |
| المحاذاة باستخدام كود هتمل | هناك عدة طرق لمحاذاة الصورة في المركز باستخدام شفرة هتمل. يمكن أن تكون مفيدة عندما تحتاج إلى توسيط صورة بسرعة وببساطة على صفحة ويب. |
استخدم العلامة
مع الطبقة. داخل هذه الكتلة ، أدخل العلامة التي تمثل الصورة التي تريد توسيطها. نموذج التعليمات البرمجية:
استخدم سمة محاذاة="مركز" في العلامة. مثال على الكود:
استخدام أنماط كس داخل العلامة
إلى مركز الصورة. نموذج التعليمات البرمجية:
يمكنك اختيار أي من هذه الطرق بناء على المتطلبات المحددة لمشروعك. من المهم أن تتذكر أن بعض الطرق قد تكون قديمة أو غير مدعومة في بعض المتصفحات ، لذلك يوصى باستخدام الأساليب الحديثة القائمة على كس.
باستخدام الجداول
إذا كنت بحاجة إلى توسيط الصورة في هتمل ، فقد يكون أحد الخيارات هو استخدام الجداول. في الجدول ، يمكنك وضع صورة في خلية ومحاذاتها في المركز باستخدام السمات المناسبة.
أولا ، إنشاء جدول مع صف واحد وخلية واحدة: