نصائح مفيدة

صور HTML - ورقة الغش للمبتدئين

Pin
Send
Share
Send
Send


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

إدراج صورة (صورة) على الصفحة في HTML

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

في XHTML. كما ترون من المثال ، يتم إضافة شرطة مائلة (شرطة مائلة) في نهاية هذا الأخير.

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

هذه العلامة () ، على عكس الرابط ، على سبيل المثال ، لا تغلق وتتم كتابتها بالشكل الذي أشرت إليه أعلاه. السمة الموصى بها هي "بديل»:

الذي يظهر في الوقت الحالي الصورة لم يتم تحميلها بالكامل أو بها رابط مقطوع (غير موجود).

والآن من المنطقي التحدث عن جميع السمات التي تدعمها العلامة.

سرد سمات العلامات الموجودة في HTML

يتم تسجيل جميع سمات الصور بمسافة. ولكن في الواقع قائمتهم نفسها.

SRC - يحتوي على رابط للصورة ، يمكن أن يكون إما مطلقًا (رابط للملف الموجود في موقع آخر) أو قريب (رابط للملف الموجود على موقعك). تنسيقات صالحة: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG و base64 في. مثال للاستخدام مع عنوان الصورة المطلقة:

مثال للاستخدام مع عنوان الصورة النسبي:

بديل - يحتوي على نص - تلميح لصورة لا تظهر / مفقودة. مثال للاستخدام:

محاذاة - ضبط محاذاة الصورة بالنسبة للنص المجاور (إنشاء تدفق حول الصورة مع النص). قيم صالحة: أعلى, أسفل, وسط, اليسار و حق. مثال للاستخدام:

السمة غير مدعومة في HTML5.

الحدود - يضبط عرض الحدود (الإطار) حول الصورة. قيم صالحة: بكسل, % والكميات الأخرى. مثال للاستخدام:

السمة غير مدعومة في HTML5.

ارتفاع - يحدد ارتفاع الصورة. قيم صالحة: بكسل, % والكميات الأخرى. مثال للاستخدام:

عرض - يضبط عرض الصورة. قيم صالحة: بكسل, % والكميات الأخرى. مثال للاستخدام:

hspace - ضبط المسافة البادئة الأفقية (اليسرى واليمنى) للصورة. قيم صالحة: بكسل, % والكميات الأخرى. مثال للاستخدام:

السمة غير مدعومة في HTML5.

vspace - تعيين المسافة البادئة الرأسية (العلوية والسفلية) للصورة. قيم صالحة: بكسل, % والكميات الأخرى. مثال للاستخدام:

السمة غير مدعومة في HTML5.

longdesc - يحتوي على عنوان وصف الصورة الموسعة. قيم صالحة: ملف TXT. يمكن أن يكون العنوان ، مثل سمة src ، مطلقًا أو نسبيًا. مثال للاستخدام:

crossorigin - سمة تسمح لك بإدراج صورة من موقع آخر من خلال طلب عبر المجال (CORS). قيم صالحة: مجهول (طلب مجهول بدون بيانات اعتماد) و أوراق اعتماد الاستخدام (طلب مع نقل وثائق التفويض). مثال للاستخدام:

السمة مدعومة فقط في HTML5.

srcset - يحدد قائمة الملفات التي سيتم عرضها حسب عرض أو كثافة الشاشة. قيم صالحة: شمال غرب (حيث N هو عدد صحيح موجب) و KX (حيث K هو رقم عشري موجب). مثال للاستخدام:

السمة غير مدعومة على Android و Internet Explorer.

الأحجام - يحدد حجم الصور المحددة في سمة srcset. قيم صالحة: NEX, NREM, نواعم, Nvmin, NCH, NVH, Nvw, Nvmax, نين, NQ, NMM, مجلس الشعب, NCM, معاهدة حظر الانتشار النووي و Npxحيث N رقم موجب. مثال للاستخدام:

مبدأ المثال على النحو التالي: إذا كانت دقة الشاشة أقل من 600 بكسل ، فسنقوم بتعيين عرض الصورة على 300 بكسل ، والعكس بالعكس ، إذا كان أكثر من 600 بكسل ، فإننا نصلح عرض الصورة بمقدار 600 بكسل.

السمة ، مثل srcset ، غير مدعومة على متصفحي Android و Internet Explorer.

usemap - يربط صورة مع خريطة ، والتي تم تعيينها باستخدام العلامة. قيم صالحة: # NAME (حيث يكون الاسم هو قيمة سمة الاسم للخريطة) و #ID (حيث يمثل id قيمة سمة id للبطاقة). مثال للاستخدام:

لا يمكنك إنشاء رابط إذا تم لف البطاقة () في رابط () أو زر ().

ismap - يربط صورة مع منطقة معينة من بطاقة الخادم. عند النقر فوق هذه الصورة ، تتم قراءة إحداثيات النقر من الزاوية اليسرى العليا وترسل حسب الطلب إلى العنوان المحدد في الرابط. لكي تعمل السمة ، يجب لف الصورة في رابط (). مثال للاستخدام:

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

إذا رغبت في ذلك ، يمكن استبدال معظم السمات الشخصية بأنماط مناسبة.

كيفية جعل صورة (صورة) رابط في HTML؟

لجعل صورتك قابلة للنقر عن طريق إضافة وظيفة للانتقال إلى صفحة أخرى من موقع الويب الخاص بك (وليس فقط) ، قم بلفها في علامة :

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

لا يزال لديك أسئلة؟ لا تتردد في نشرها في التعليقات أدناه هذه المقالة.

كيفية تضمين الصورة في HTML؟

لإدراج صورة في صفحة HTML ، يتم استخدام علامة بسيطة واحدة:

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

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

يتم عرضها على موقع الصورة في وقت عدم إمكانية الوصول إليها أو تحميلها أو في وضع المستعرض "بدون صور". تتم إضافته باستخدام سمة alt للعلامة.

مثال على إضافة نص بديل إلى ملف صورة:

تغيير حجم صورة HTML

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

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

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

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

يمكن تحديد هذه المعلمات بالبكسل (حجم الصورة ثابت ولا يعتمد على دقة شاشة المستخدم) ، أو بنسبة مئوية (يعتمد حجم الصورة على دقة الشاشة).

يجب أن نتذكر أنه في الوقت الذي تغير فيه الحجم الأصلي للصورة ، يجب عليك الاحتفاظ بنسبها.

للقيام بذلك ، ما عليك سوى تحديد قيمة معلمة واحدة فقط (العرض أو الارتفاع) ، وسيتم احتساب قيمة المعلمة تلقائيًا.

تخطيط صورة HTML

كما هو الحال مع العديد من علامات HTML ،

رابط الصورة

في HTML ، لإنشاء رابط ، استخدم العلامة:

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

ويتم ذلك على النحو التالي:

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

كيف يمكنني جعل صورة خلفية في HTML؟

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

على سبيل المثال ، سنقوم بتعيين صورة النسيج هذه كصورة خلفية:

تم استنفاد هذه المعلومات حول العلامات والسمات المطلوبة لإدراج الصورة على صفحة HTML للموقع.

شاهد الفيديو: إخدع أصحابك أثناء لعب الورق (كانون الثاني 2021).

Pin
Send
Share
Send
Send