أساسيات HTML - عرض الصور

• قد 7, 2024

بمجرد نشر نص موقع الويب الخاص بك وتنسيقه حسب رغبتك ، فقد حان الوقت لإضفاء الحيوية على الصفحة ببضع صور. لا يمكن للصور فقط إضافة اللون والحياة إلى صفحاتك ، بل يمكنك أيضًا استخدامها لإنشاء تأثيرات نصية قد يكون من الصعب أو المستحيل القيام بها مع النص العادي والتنسيق. على سبيل المثال ، ستقتصر اختيارات الخطوط الخاصة بك عادةً على العدد الصغير من الخطوط التي يمكنك التأكد من تثبيتها على أجهزة كمبيوتر الزائرين ، لأنه إذا لم يكن لديهم الخط مثبتًا فلن يتمكنوا من رؤيته على موقعك! في أي وقت تنشر فيه نصًا بخطًا غير متاح ، فإن أجهزة الكمبيوتر الخاصة بالزائرين ستجعله في أي خط متاح هو الأقرب في الأسلوب ، والذي يمكن أن يفسد غالبًا تصميم موقع الويب الخاص بك.

من ناحية أخرى ، إذا كنت تستخدم برنامجًا لتحرير الصور لالتقاط النص بخطًا رائعًا ونشره كملف GIF أو JPEG على موقعك ، فسيشاهده أي زائر بالطريقة التي تريدها بالضبط - نظرًا لأنه أصبح الآن صورة للنص بدلاً من النص نفسه. يمكن أن يحررك هذا من استخدام الخطوط الخيالية في رؤوسك وتجميعها بطرق غير عادية.

العلامة الأساسية المستخدمة لعرض الصور هي كما يلي:



الرمز أعلاه سوف يعمل بشكل مثالي في HTML. إذا كنت تستخدم XHTML أو تريد التأكد من أن موقعك جاهز لـ XHTML ، فيجب عليك إضافة شرطة مائلة لإغلاق العلامة ، حيث أنه في XHTML لا يمكنك استخدام العلامات المفتوحة:



"Src" هو اختصار للمصدر ، وسوف تستخدمه لتحديد مسار الملف لصورتك - بمعنى آخر ، لإخبار متصفحك بمكان العثور على الصورة على موقعك. إذا احتفظت بصورك في نفس المجلد مثل صفحات الويب الخاصة بك ، فلن تحتاج إلى إدراج المجلد في النص "src" - يمكنك فقط كتابة اسم ملف الصورة.

بمجرد تحديد مصدر الصورة الخاص بك ، يمكنك تحسين هذا الإطار الأساسي مع العديد من السمات الاختيارية للحصول على أقصى استفادة من صورك. إحدى السمات التي يجب أن تستخدمها دائمًا هي السمة "alt". يتيح لك ذلك تحديد النص الذي يجب أن يعرضه المتصفح إذا كان غير قادر على عرض صورتك لسبب ما. يتم إعداد النص "alt" على النحو التالي:



مجموعة مفيدة أخرى من السمات هي علامات "العرض" و "الارتفاع". هذه تتيح لك عرض الصور بحجم مختلف عن حجم الصورة الفعلي. يمكنك استخدامها لتعديل صورتك بحيث تناسبها تمامًا في التصميم العام لصفحتك. ومع ذلك ، من الأفضل عمومًا تغيير حجم الصورة الفعلي باستخدام برامج تحرير الصور ثم نشر الصورة على الإنترنت لسببين. أولاً ، سوف يمنحك برنامج تحرير الصور دائمًا نتائج أفضل من تغيير الحجم يدويًا. ثانيًا ، لا يؤدي تغيير علامتي "العرض" و "الارتفاع" إلى تغيير حجم ملف الصورة الفعلي ، لذلك إذا كان لديك صورة هائلة تعرضها كصورة مصغرة ، فستستغرق الصورة وقتًا طويلاً للتحميل وستتم مضغها بنفس القدر الكثير من النطاق الترددي كما لو كنت قد عرضته بالحجم الكامل.

عند تحديد حجم الصورة ، يمكنك سرد الارتفاع أو العرض أو كليهما. يتم تحديد الأحجام بواسطة بكسل كما ترون أدناه:



يمكنك أيضًا "محاذاة" صورك لتعمل معها بسلاسة مع تدفق النص. إذا اخترت المحاذاة اليسرى ، سيبدأ النص على يمين الصورة. إذا اخترت المحاذاة الصحيحة ، فستظهر الصورة على الجانب الأيمن من الصفحة ، وسيظهر النص إلى الجانب الأيسر من الصورة ثم ينتقل إلى سطر جديد.

يتم ضبط محاذاة الصورة على النحو التالي:



يمكنك أيضًا ضبط المحاذاة على "أعلى" أو "أسفل" أو "وسط" لجعل خط الصورة أعلى أو أسفل السطر النصي. إذا لم تحدد المحاذاة ، فستتحول الصورة افتراضيًا إلى "أسفل".

كملاحظة جانبية ، يمكنك تضمين سمات صورتك (src ، محاذاة ، بديل ، إلخ) في أي ترتيب داخل علامات الصورة. تفضيلي الشخصي هو سرد السمة "src" أولاً ، نظرًا لأن هذه هي السمة الأساسية ويجب تضمينها في كل علامة صور ، ولكن يمكنك استخدام أي تسلسل يبدو أكثر طبيعية بالنسبة لك.

تعليمات الفيديو: شرح كيفية أضافة الصور والتحكم بها بلغة HTML (ح13) (قد 2024).