كيفية ضبط عرض وطول صورة باستخدام لغة إتش تي إم إل

تنزيل المقال
شارك في التأليف: فريق عمل ويكي هاو

تنزيل المقال

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

الخطوات

تنزيل المقال
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    يحتوي نظامي التشغيل ويندوز وماكنتوش على محرّرات نصوص افتراضية مضمنة مثل المفكرة وتيكست إيديت، ويمكنك استخدام هذه البرامج الافتراضية لإنشاء وتحرير رموز إتش تي إم إل. يمكنك فتح مستند إتش تي إم إل من داخل البرنامج عن طريق النقر على خيار فتح من القائمة ملف أو النقر بزر الفأرة الأيمن على الملف في متصفح الملفات واختيار فتح بواسطة… .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    <img src="imagefile.jpg" alt="Image" height="42" width="42">
    • يمثل src مسار ملف الصورة.
    • يمثل alt وسم الصورة.
    • لاحظ أن الأرقام المكتوبة بوحدة البكسل.
    • يمكنك أيضًا استخدام وسم الشكل style . سيكون الكود المكتوب على النحو التالي مثلًا: <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;"> حيث يعمل وسم style على ضمان بقاء الصورة بنفس الحجم وتجاوز كل أوامر التعامل مع الصور الأخرى. [١]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    يمكنك مثلًا الحصول على صورة بنصف حجم الصورة الأصلية عن طريق إدخال القيمة 21 في خاصيتي الطول height والعرض width .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    يمكنك تكرار الخطوات السابقة إن لم يعجبك حجم الصورة النهائي. [٢]

أفكار مفيدة

  • حدد خصائص الطول والعرض للصور دائمًا حيث يتم حفظ المساحة المطلوبة للصورة في الصفحة أثناء تحميل الصفحة عند تحديد الخاصيتين في حين يؤدي عدم تحديدهما إلى عدم معرفة المتصفح حجم الصورة وعدم تمكنه من حفظ المساحة المناسبة لها مما سيؤدي إلى تغيّر مخطط الصفحة أثناء عملية التحميل (أثناء تحميل الصور).
  • يؤدي تصغير صورة كبيرة باستخدام خاصيتي الطول والعرض إلى إجبار المستخدم على تنزيل الصورة الكبيرة (حتى وإن كانت الصورة تظهر صغيرة في الصفحة)؛ ويمكنك تجنب ذلك عن طريق إعادة تحجيم الصورة باستخدام برنامج خارجي قبل استخدامها.

مقالات ذات صلة في ويكي هاو

كيفية
البحث والعثور على شخص بطريقة سهلة عن طريق الصورة
كيفية
الحصول على كلمة مرور فيسبوك الخاصة بأحدهم
كيفية
الحصول على صديقة في لعبة جي تي آي 5
كيفية
اختيار عنوان ممتاز للبريد الإلكتروني
كيفية
معرفة من شارك منشوراتك على الفيسبوك
كيفية
معرفة من قام بحظرك على الفيسبوك
كيفية
معرفة عنوان أي شخص
كيفية
اختيار اسم مميز ليوتيوب
كيفية
اختراق موقع إلكتروني باستخدام رموز اتش تي ام ال بسيطة
كيفية
تطوير نفسك لتصبح هاكر
كيفية
استرداد حساب ياهو
كيفية
معرفة عنوان البريد الإلكتروني الخاص بشخص ما

المصادر

  1. ↑ https://www.w3schools.com/html/html_images.asp
  2. ↑ https://www.w3schools.com/tags/att_img_width.asp

المزيد حول هذا المقال

بلغات أخرى
تم عرض هذه الصفحة ٨٬٠١٢ مرة.

هل ساعدك هذا المقال؟