تتضمن السمات الاختيارية لعلامة img ما يلي: علامات HTML لإدراج الصور والصور في HTML

علامة آي إم جيمصممة لعرض الصور على صفحة ويب في شكل رسومي تنسيق GIFأو جى بي إي جي أو PNG. تحتوي هذه العلامة على معلمة واحدة مطلوبة، src، والتي تحدد عنوان ملف الصورة. إذا لزم الأمر، يمكن ربط الرسم بملف آخر عن طريق وضع علامة IMG في الحاوية A. وفي الوقت نفسه، يتم عرض حد حول الصورة، والذي يمكن إزالته عن طريق إضافة المعلمة border=0 إلى علامة IMG.

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

بناء الجملة

علامة الإغلاق
غير مطلوب.

خيارات
محاذاة - يحدد كيفية محاذاة الصورة على طول الحافة وكيفية التفاف النص حولها.
بديل - نص بديل للصورة.
الحدود - سمك الإطار المحيط بالصورة.
الارتفاع - ارتفاع الصورة.
hspace - المسافة الأفقية من الصورة إلى المحتوى المحيط بها.
ismap - يخبر المتصفح أن الصورة عبارة عن خريطة صور من جانب الخادم.
lowsrc - المسار إلى الملف الرسومي منخفض الدقة للعرض الأولي.
src - المسار إلى الملف الرسومي.
vspace - المسافة العمودية من الصورة إلى المحتوى المحيط بها.
العرض - عرض الصورة.
usemap - رابط إلى علامة MAP التي تحتوي على إحداثيات لخريطة صورة العميل.

مثال 1: استخدام علامة IMG

لوريم إيبسوم دولور يجلس أميت...

وصف معلمات علامة IMG

محاذاة المعلمة

وصف
بالنسبة للصور، يمكنك تحديد موضعها بالنسبة للنص أو الصور الأخرى على صفحة الويب. يتم تحديد طريقة محاذاة الصور بواسطة معلمة المحاذاة لعلامة IMG.

بناء الجملة

الحجج
يسرد الجدول 1 القيم المحتملة لمعلمة المحاذاة ونتيجة استخدامها.

الخيارات الأكثر شيوعًا هي اليسار واليمين، مما يؤدي إلى إنشاء التفاف النص حول الصورة. لمنع النص من الملاءمة بإحكام مع الصورة، يوصى بإضافة معلمات hspace وvspace في علامة IMG، والتي تحدد المسافة إلى النص بالبكسل.

على الرغم من أن جميع قيم المعلمة align مدعومة من قبل المتصفحات، إلا أن الوسائط absbottom و absmiddle و baseline و texttop غير موصوفة في مواصفات HTML 4.

القيمة الافتراضية
قاع

مثال 2: محاذاة صورة

لوريم إيبسوم دولور سيت أميت، consectetuer adipiscing إيليت...

معلمة البديل

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

تعرض المتصفحات أيضًا نصًا بديلاً كتلميح أداة عند تحريك الماوس فوق الصورة.

بناء الجملة

الحجج
أي سلسلة نصية مناسبة. يجب أن تكون محاطة بعلامات اقتباس مزدوجة أو مفردة.

القيمة الافتراضية
لا.

مثال 3: إضافة نص بديل

alt="العودة إلى الصفحة الرئيسية" !}>

معلمة الحدود

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

بناء الجملة

الحجج

القيمة الافتراضية
0

مثال 3. إطار حول الصورة

إطار أخضر بسمك 2 بكسل

معلمة الارتفاع والعرض

وصف
لتغيير حجم صورة باستخدام HTML، يتم توفير معلمات العرض والارتفاع. يمكنك استخدام القيم بالبكسل أو النسب المئوية. إذا تم تعيين إدخال النسبة المئوية، فسيتم حساب أبعاد الصورة بالنسبة للعنصر الأصلي - الحاوية التي توجد بها علامة IMG. إذا لم تكن هناك حاوية أصل، فإن نافذة المتصفح تعمل بنفس الطريقة. بمعنى آخر، العرض = 100% يعني أن الصورة سيتم تمديدها عبر عرض صفحة الويب بالكامل. تؤدي إضافة معلمة عرض أو ارتفاع واحدة فقط إلى الحفاظ على نسب الصورة ونسبة العرض إلى الارتفاع. ينتظر المتصفح حتى يتم تحميل الصورة بالكامل لتحديد ارتفاعها وعرضها الأصليين.

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

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

بناء الجملة

الحجج
أي عدد صحيح موجب بالبكسل أو النسبة المئوية.

القيمة الافتراضية
العرض أو الارتفاع الأصلي للصورة.

مثال 4: أبعاد الصورة

معلمة HSPACE وVSPACE

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

بناء الجملة

الحجج
أي عدد صحيح موجب بالبكسل.

القيمة الافتراضية
0

مثال 5. المسافات البادئة من الصورة

معلمة ISMAP

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

يتم إرسال البيانات إلى الخادم على النحو التالي. تحتاج إلى وضع علامة IMG في الحاوية A، حيث تحتاج إلى تحديد عنوان برنامج CGI كقيمة المعلمة href. يقوم البرنامج بتحليل إحداثيات النقر بالماوس المستلمة، والتي يتم حسابها من الزاوية اليسرى العليا من الصورة، ويعيد صفحة الويب المطلوبة.

بناء الجملة

الحجج
لا.

القيمة الافتراضية
بشكل افتراضي، يتم تعطيل هذا الخيار.

مثال 6. الرسم كخريطة صورة

إذا قام المستخدم بتعيين إحداثيات الماوس على الصورة على 100، 50، فبعد النقر على الرابط سيتم فتح الملف على http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. يتم نقل الأرقام الأخيرة إلى برنامج CGI باستخدام طريقة GET وتفسيرها على الخادم.

معلمة لووسرك

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

بناء الجملة

الحجج

القيمة الافتراضية
لا.

مثال 7. الطريق إلى رسم منخفض الجودة

معلمة SRC

وصف
عنوان ملف رسوميوالتي سيتم عرضها على صفحة الويب. الملفات الأكثر شيوعًا هي بتنسيق GIF وJPEG.

بناء الجملة

الحجج
القيمة هي المسار الكامل أو النسبي للملف.

القيمة الافتراضية
لا.

مثال 8. المسار إلى الملف الرسومي

وصف

علامة مصمم لعرض الصور بتنسيق رسومي GIF أو JPEG أو PNG على صفحة الويب. يتم تحديد عنوان ملف الصورة عبر السمة src. إذا لزم الأمر، يمكن جعل الرسم رابطًا لملف آخر عن طريق وضع العلامة في حاوية . .

باستخدام سمة تعرفها بالفعل محاذاةيمكنك التحكم في محاذاة الصور بالنسبة للعناصر الأخرى في صفحة html. عند السمة محاذاةهناك عدة معاني لكننا أكثرها في اللحظةأنا مهتم بأمرين:

• غادر- تقع الصورة على الحافة اليسرى من الصفحة، ويتدفق النص حول الصورة على اليمين؛


• يمين- تقع الصورة على الحافة اليمنى من الصفحة، ويتدفق النص والعناصر الأخرى حول الصورة على اليسار.

على سبيل المثال، كود HTML

سيظهر المتصفح بهذا الشكل

وهذا كود HTML:

سوف تبدو مثل هذا:

لإيقاف التفاف النص حول الصورة، يمكنك استخدام العلامة ر(مألوف لنا من القسم السابق عنه). عند العلامة رهناك سمة واضح، والتي يمكن أن تأخذ ثلاث قيم:

• غادر- إيقاف التفاف النص حول الصور المحاذية لليسار؛


• يمين- إيقاف التفاف النص حول الصور المحاذاة إلى اليمين؛


• الجميع- إيقاف التفاف النص حول الصور المحاذية لليسار واليمين.

أدخل صورة:

الوصف والاستخدام

علامة يقوم بإدراج صورة في مستند HTML.

لاحظ أنه لا يتم إدراج الصور تقنيًا في الصفحة. في الواقع، ترتبط الصور بصفحات HTML. علامة يقوم بإنشاء حاوية للصورة.

عند العلامة سمتان مطلوبتان: src و alt.

الفرق بين HTML وXHTML

في علامة HTML ليس لديه علامة إغلاق.

في علامة XHTML يجب أن تكون مغلقة بشكل صحيح.

تم إهمال سمات "align" و"border" و"hspace" و"vspace" لعنصر img وغير مدعومة في XHTML 1.0 Strict.

نصيحة:يتم استخدام السمة alt كنص بديل في حالة عدم وجود صورة، بدلاً من استخدامها كنص تمرير الماوس. لعرض النص عند التمرير فوق صورة، استخدم سمة العنوان. مثله: .

الصفات المطلوبة

السمات الاختيارية

السمات القياسية

سمات الحدث

في الوقت الحاضر، لا يمكن لأي موقع تقريبًا الاستغناء عن استخدام الصور في صفحات HTML، لأنه كما تقول الحكمة الشائعة: "من الأفضل أن ترى مرة واحدة بدلاً من أن تسمع مائة مرة". بعد قراءة هذا المقال ستتعرف على كيفية استخدام علامة IMG التي تستخدم لإضافة الصور إلى صفحات الموقع. سننظر في أمثلة لـ HTML 5، ولكنها ستعمل أيضًا مع الإصدارات السابقة من لغة ترميز النص التشعبي.

كيفية إدراج صورة في صفحة HTML

لإدراج صورة في صفحة، استخدم علامة IMG HTML. بالنسبة للصورة، يجب تحديد سمتين على الأقل: src (المسار إلى الملف الذي يحتوي على الصورة) وalt (نص بديل يراه المستخدم إذا لم يتم تحميل الصورة). يمكن أن تكون السمة alt فارغة، لكن يجب أن تكون موجودة. يمكنك أيضًا تعيين سمة العنوان، ثم عند التمرير فوق الصورة، سيتم عرض النص المحدد في هذه السمة.

إذا كان الملف الذي يحتوي على الصورة موجودًا في نفس المجلد مثل الصفحة التي تم تحميله عليها، فحينئذٍ سمة سركيمكنك فقط تحديد اسم الملف، على سبيل المثال:

إذا كانت الصفحة موجودة في http://www..html وكانت الصورة http://www..jpg، فسيتم تحديد المسار إلى الصورة كما يلي:

إذا كانت الصفحة موجودة في المجلد http://www..site/logo.jpg، فسيكون المسار كما يلي:

إذا كانت الصورة موجودة في المجلد http://www.site/images/، فبغض النظر عن المجلد الذي توجد به الصفحة الموجودة على نفس الموقع الذي تم إدراج الصورة فيه، يمكن تحديد المسار إلى الملف على النحو التالي:

أو يمكنك تحديد المسار الكامل لملف الصورة إذا كان موجودًا في موقع آخر:

عرض وارتفاع الصورة

في الإصدارات السابقة من HTML، تم تعيين الارتفاع والعرض باستخدام سمات العرض والارتفاع، ولكن الآن يتم تعيين كل ما يؤثر على عرض الصورة باستخدام باستخدام CSSفي سمة النمط. في أغلب الأحيان، يتم تحديد العرض والارتفاع بالبكسل:

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

كما يمكن تحديد العرض والارتفاع كنسبة مئوية من عرض أو ارتفاع نافذة المتصفح أو أي عنصر كتلة تقع ضمنه الصورة:

التفاف الصورة في النص والمسافة البادئة

بشكل افتراضي، يتم عرض النص أسفل الصورة. لكي يلتف النص حول الصورة، يتم استخدام خاصية float CSS، والتي تحل محل سمة المحاذاة. إذا أردنا أن تكون الصورة على يسار النص، وأن ينساب النص حولها إلى اليمين والأسفل، فقم بتعيين القيمة على اليسار لـ خصائص CSSتعويم، وإذا كانت الصورة على اليمين، فيتم الإشارة إلى القيمة الصحيحة:

يمكنك أيضًا تعيين مسافات بادئة في أعلى الصورة ويمينها وأسفلها ويسارها:

ويمكن ذكر الشيء نفسه في صيغة مختصرة:

وبدلاً من ذلك، يمكنك تعيين الهوامش الرأسية والأفقية باستخدام قيمتين لخاصية الهامش بدلاً من سمات vspace وhspace القديمة. لنفترض أننا نحتاج إلى هامش قدره 10 بكسل في الأعلى والأسفل، و8 بكسل في اليسار واليمين:

كيفية جعل الصورة رابط للصفحة

أو يمكننا ضبط لون إطار الصورة ونوعه وسمكه:

تنسيقات الصور للويب

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

نسخ المقال محظور.