تعد الصور جزءًا مهمًا جدًا من صفحة الويب لأنها تعمل على تحسين مظهر صفحة الويب وتزيد من تفاعل العملاء. إن USP لمواقع الويب المتعددة هو كيفية تنظيم الصور المختلفة على صفحات الويب الخاصة بهم وإضافة النكهات إليها. في هذا مقالة الصور ، سوف نفهم كيفية تضمين الصور في صفحة ويب باستخدام HTML بالترتيب التالي:
كيف تضيف صورة في HTML
لتضمين صورة في صفحة ويب يمنحك HTML بطاقة شعار. هناك نقطة أخرى مهمة يجب تذكرها وهي
ليس لديه علامة إغلاق. scr لتحديد مسار الصورة ، والتي يمكن أن تكون عنوان url أو مسار صورة من النظام / الخادم. لنبدأ أولاً بالبنية الأساسية لتضمين الصورة في صفحة ويب باستخدام HTML.
بناء الجملة
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>عينة من الرموز
تضمين الصور بتنسيق HTML في صفحة الويب
على غرار العلامات الأخرى ، هناك العديد من السمات المرتبطة بـ بطاقة شعار. دعونا نلقي نظرة على كل واحد منهم واحدًا تلو الآخر ، ونفهم حاجتهم وكيفية استخدامها.
علامات صور HTML
- سمة بديل
السمة alt هي النص البديل للصورة. سبب تقديم سمة النص البديل هو أنه لأي سبب من الأسباب لا يمكن تحميل الصورة ، يجب أن يظهر نص بديل يعطي فكرة عن الصورة. قد تكون أسباب عدم تحميل الصورة هي بطء الاتصال بالإنترنت أو عدم وجود الصورة في المصدر المقدم ، وما إلى ذلك.
إذا كانت الصورة موجودة داخل نفس المجلد حيث يوجد ملف HTML ، فيمكنك تحديد اسم الملف مباشرة. خلاف ذلك ، لديك توفير المسار المطلق لملف الصورة.
يجب أن تصف قيمة سمة النص البديل الصورة.
مثال
تضمين الصور بتنسيق HTML في صفحة الويب
كيفية استخدام استبدال في جافا
- عرض وارتفاع الصورة
تُستخدم سمة النمط لتعيين ارتفاع الصورة وعرضها. في سمة النمط تحدد نمط CSS.
تضمين الصور بتنسيق HTML في صفحة الويب
بعض النقاط المهمة أثناء تضمين صورة في صفحة ويب باستخدام HTML هي:
- يتم تحديد سمات العرض والارتفاع بالبكسل.
- يمكنك أيضًا تحديد عرض الصورة وارتفاعها بالنسبة المئوية. سيأخذ في الاعتبار النسبة المئوية وفقًا لصفحة الويب بأكملها.
- إذا حددت أحدهما فقط ، فسيتم تعديل الآخر وفقًا لذلك.
- تضمين الصور باستخدام URL
يمنحك HTML أيضًا المرونة حيث يمكنك اختيار الصورة من خادم آخر فقط عن طريق تحديد عنوان URL. يمكنك استخدام خادم منفصل لاستضافة الصور ثم تضمين تلك الصور باستخدام URL.
تضمين الصور بتنسيق HTML في صفحة الويب
- الصورة كارتباط
يمكنك أيضًا استخدام الصورة كرابط حيث يمكن للمستخدم النقر فوق الصورة والوصول إلى صفحة ويب جديدة. للقيام بذلك ، عليك فقط وضع ملف يوم في بطاقة شعار.
وظيفة goto c ++
تضمين الصور بتنسيق HTML في صفحة الويب
- صورة عائمة
يمكنك أيضًا ضبط محاذاة الصورة باستخدام خاصية CSS float. يجب تحديد جميع خصائص CSS في سمة النمط.
صورة HTML
- خرائط الصور
هذه إحدى الميزات المهمة التي يوفرها HTML. تساعد العلامة في تحديد خريطة الصورة. يجب أن تتساءل عن ماهية خريطة الصورة. خريطة الصورة هي صورة ذات مناطق قابلة للنقر
صورة HTML
- الصورة الخلفية
يمكنك أيضًا إضافة صورة خلفية في صفحة ويب. عليك فقط استخدام خاصية CSS ، أي صورة الخلفية في علامة النمط وإضافتها إلى عنصر HTML.
صورة HTMLالصورة الخلفية
عنصر الجسم
بهذا نصل إلى نهاية مدونة صور HTML.الآن بعد تنفيذ المقتطفات أعلاه ، ستفهم كيفية إدراج الصورة في HTML. آمل أن تكون هذه المدونة مفيدة وذات قيمة مضافة لك.
تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'صور HTML' وسنعاود الاتصال بك.