ألغاز إنتاج صفحات الويب: مسار ملفات الصور

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

1) نظرة عامة على ترميز الصور.

إذا كانت صفحة الويب تحتوي على نص فقط ولكن لا تحتوي على صور، فسوف تفقد الكثير من الحيوية. تعد الصور جانبًا مهمًا جدًا في إنتاج صفحات الويب. يوفر HTML Professional علامة <IMG> لإخراج الصور إلى صفحة الويب. تحتوي هذه العلامة على سمات SRC وALT وALIGN وBORDER وWIDTH وHEIGHT.

2) مقدمة في الصفات.

سمة SRC. بالنسبة للعلامة <IMG>، تعتبر سمة SRC الخاصة بها سمة ضرورية، أي أنه يجب تعيين قيمة SRC في علامة <IMG> وهي جزء لا غنى عنه من العلامة. في هذا الوقت، يجب كتابة IMG بالتنسيق التالي:

ما يلي هو جزء من الاقتباس:
<IMG SRC="قيمة المعلمة">

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

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

لا تضيف علامة <IMG> الصورة فعليًا إلى مستند HTML، ولكنها تخبر HTML: ما هو ملف الصورة هذا؟ أين؟ بحيث يمكن لـ HTML استدعاؤه من الموقع الأصلي لملف الصورة. وظيفة سمة SRC هي الإجابة على هذين السؤالين، لذلك يجب أن تحتوي قيمة المعلمة لسمة SRC على اسم الملف الكامل لملف الصورة، أي اسم الملف وامتداده، مثل logo.gif، الذي يجيب على سؤال عن ملف الصورة؛ يجب أن تحتوي قيمة المعلمة أيضًا على المسار إلى ملف الصورة حتى يعرف HTML مكان العثور على ملف الصورة. من بين قيم معلمات سمة SRC، غالبًا ما تكون كيفية كتابة مسار ملف الصورة مشكلة للمبتدئين.

يمكن أن يكون المسار إلى ملف الصورة مسارًا نسبيًا أو عنوان URL. يشير ما يسمى بالمسار النسبي إلى المسار الذي يتكون من الموضع النسبي للملف المراد ربطه أو تضمينه في مستند HTML الحالي وملف HTML الحالي. إذا كان ملف HTML وملف الصورة (بافتراض أن الاسم هو logo.gif) موجودان في نفس الدليل، فيمكنك كتابة الكود كـ <IMG SRC="logo.gif">؛ إذا تم وضع ملف الصورة في الدليل حيث يوجد ملف HTML الحالي في دليل فرعي (على افتراض أن الدليل الفرعي يحمل اسم الصور)، ويجب أن يكون الرمز <IMG SRC="images/logo.gif">؛ إذا تم وضع ملف الصورة في الدليل العلوي للدليل حيث يوجد HTML الحالي تم تحديد موقع الملف (بافتراض أن الدليل العلوي يسمى home )، يجب أن يكون المسار النسبي شبه عنوان URL، أي استخدم "../" لتمثيل موقع الويب الخاص بالمطور، متبوعًا بمسار ملف الصورة في موقع الويب الخاص بالمطور . على سبيل المثال، بافتراض أن المنزل هو دليل ضمن موقع الويب هذا، يجب أن يكون الرمز <IMG SRC="../home/logo.gif">. إذا كان المنزل دليلًا فرعيًا ضمن دليل الملك الموجود أسفل موقع الويب، فيجب أن يكون الرمز المكتوب هو <IMG SRC="../king/home/logo.gif">.

سمات أخرى. تعد سمات ALT وALIGN وBORDER وWIDTH وHEIGHT لعلامة <IMG> اختيارية. سمة ALIGN هي محاذاة الصورة، وقيم المعلمات هي اليسار والوسط واليمين؛ BORDER هي حدود الصورة، ومعلمتها أكبر من أو تساوي 0، والوحدة الافتراضية هي البكسل؛ سمات العرض والارتفاع هي عرض الصورة وارتفاعها، والوحدة الافتراضية لمعلماتها هي البكسل؛ وسمة ALT هي النص الذي يتم عرضه عندما يتحرك الماوس فوق الصورة، وأود أن أذكر الجميع أنه يجب عليك استخدام هذا السمة عند إنشاء صفحات الويب ما هو الغرض من القيام بذلك؟ يمكنه عرض نص سريع عندما لا يمكن عرض الصورة لسبب ما، مما يزيد من سهولة الاستخدام.