تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: إدراج الصور


الصفحة السابقة

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

للحفاظ على صفحاتك قابلة للقراءة وسريعة التنزيل ، يرجى اتباع النصائح التي ساقدمها لك!

تنسيقات الصور المختلفة


هل تعرف ما هو تنسيق الصورة؟

عندما يكون لديك صورة، يكون لديك خيار حفظها في العديد من "التنسيقات" المختلفة. سيكون وزن الصورة (بالكيلوبايت أو حتى ميغابايت) أعلى أو أقل حسب التنسيق الذي تم اختياره وستتغير جودة الصورة.

على سبيل المثال ، يقدم لك برنامج paint (على الرغم من أنه بعيد عن الأفضل) إمكانية الاختيار من بين العديد من التنسيقات عند حفظ صورة (الشكل التالي).

html image

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

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

JPEG

تتوفر صور JOINT PHOTOGRAPHIC EXPERT GROUP (JPEG) على نطاق واسع على الويب. تم تصميم هذا التنسيق لتقليل وزن الصور (أي حجم الملف المرتبط) ، والذي قد يحتوي على أكثر من 16 مليون لون مختلف. الشكل التالي هو صورة محفوظة بتنسيق JPEG.

html image

يتم حفظ صور JPEG مع اللاحقة .jpgأو .jpeg.

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

PNG

PNG (Portable Network Graphics)

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

تم اختراع PNG للتنافس مع تنسيق آخر ، وهو GIF ، في وقت كان يتعين فيه دفع الإتاوات لاستخدام GIF. منذ ذلك الحين ، تطورت PNG وأصبحت أقوى تنسيق لتسجيل معظم الصور.

يوجد PNG في نسختين ، وفقًا لعدد الألوان التي يجب أن تتضمن الصورة:

  • (bit)PNG 8: 256 لونًا ؛
  • PNG 24(bit): 16 مليون لون بقدر صورة JPEG).

الشكل التالي هو صورة بتنسيق PNG من 24 بت

html image

في الواقع ، إذا كان يمكن بتنسيق PNG 24 بت عرض العديد من الألوان كصورة بتنسيق JPEG ، بالإضافة إلى أنه يمكن جعله شفافًا دون تغيير جودة الصورة ... ما فائدة JPEG؟

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

GIF

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

يقتصر تنسيق GIF على 256 لونًا بينما يمكن أن يصل حجم PNG إلى عدة ملايين من الألوان.

ومع ذلك ، يحتفظ GIF بميزة معينة لا تتمتع بها PNG: يمكن أن تكون متحركة. ومن هنا وقع انفجار GIF المتحرك في السنوات الأخيرة على الويب

html image

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

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

  • صورة : استخدام JPEG.
  • أي رسم بألوان قليلة (أقل من 256): استخدم PNG من 8 بت أو ربما بتنسيق GIF.
  • أي رسم بألوان كثيرة : استخدم PNG 24 بت.
  • صورة متحركة : استخدم صورة GIF متحركة.

الأخطاء التي عليك تجنبها

عدم استعمال التنسيقات الاخرى

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

اختر اسم صورتك

إذا كنت ترغب في تجنب المشاكل، عليك حفظ الملفات مع أسماء بالأحرف اللاتينية (لا تستعمل الاحرف العربية)، بدون مسافات ، على سبيل المثال my_image.png.

يمكنك استبدال المسافات بحرف سفلي ("_") كما فعلنا هنا.

وضع الصور في صفحة الويب


لنعود الآن إلى كود HTML لاكتشاف كيفية وضع الصور في صفحات الويب الخاصة بنا!

إدخال صورة

ما هي العلامة الشهيرة التي تسمح لنا بإدراج صورة؟ انها

<img />

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

يجب أن تكون العلامة مصحوبة بسمتين إجباريتين:

  • src : تشير إلى مكان الصورة التي تريد ت إدراجها. يمكنك إما وضع مسار مطلق (على سبيل المثال :) http://www.site.com/fleur.png، أو وضع المسار نسبي (ما نقوم به في أغلب الأحيان). لذلك ، إذا كانت صورتك في مجلد فرعي images، فستحتاج إلى كتابة: src="images/flower.png"
  • alt : هذا يعني "النص البديل". يجب أن تشير دائمًا إلى نص بديل للصورة ، بمعنى نص قصير يصف ما تحتويه الصورة. سيتم عرض هذا النص بدلاً من الصورة إذا لم يتم تنزيلها (وهذا يحدث) ، أو في متصفحات الأشخاص المعوقين (المكفوفين) الذين للأسف لا يمكنهم "رؤية" الصورة. كما أنه يساعد الروبوتات محرك البحث للبحث عن الصور. للزهرة ، نضع على سبيل المثال: alt="flower".

يجب أن تكون الصور داخل فقرة (

). فيما يلي مثال لإدراج الصور:


<p>
    هذه صورة اخذتها خلال رحلتي الاخيرةbr />
    <img src="images/Mountain.jpg" alt="mountain photo " />
</p>

باختصار ، يعد إدراج الصور أمرًا سهلاً للغاية إذا كان الشخص يعرف كيفية الإشارة إلى أين توجد الصورة ، مثلما تعلمنا ذلك مع انشاء الروابط أكبر "صعوبة" (إذا استطعنا أن نسميها صعوبة) هي اختيار تنسيق الصورة الصحيح مثلا هذه صورة لذلك فمن البديهي استعمال التنسيق JPEG

أكرر: تجنب الفراغات و الاحرف العربية في أسماء الملفات والمجلدات اعلم أنه إذا لم تظهر صورتك ، فمن المؤكد أن المسار غير صحيح! قم بتبسيط أسماء الملفات والمجلدات قدر الإمكان ، وسيكون كل شيء على ما يرام.

إضافة منطاد المساعدة (TOOLTIP)

السمة المخصصة لعرض منطاد المساعدة للصور هي نفسها للروابط: هي title. هذه السمة اختيارية (على عكس alt).

إليك ما يمكن القيام به:


<p>
    هذه صورة اخذتها خلال رحلتي الاخيرةbr />
    <img src="images/Mountain.jpg" alt="mountain photo " title="جبال الالب جميلة جدا"/>
</p>

حرك مؤشر الماوس فوق الصورة باستخدام الماوس لرؤية منطاد المساعدة

html image

الصورة المصغرة للنقر

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

تسمح لك العديد من المواقع بتغيير حجم الصور ، مثل ResizeImage.net على سبيل المثال. سيكون لدي نسختين من صورتي ، كما في الشكل التالي: الصورة المصغرة والصورة الأصلية.

html image

أنا وضعت كل منهما في مجلد يسمى على سبيل المثال img. أقوم بعرض الإصدار montagne_mini.jpgعلى صفحتي montagne.jpg وارتبط بالصورة المكبرة عند النقر فوق الصورة المصغرة.

إليك كود HTML التي سأستخدمها في هذا:


<p>
  اذا كنت ترغب في رؤية الصورة في حجمها الأصلي؟ اضغط عليها!<br />
<a href="img/mountain.jpg">
<img src="img/mountain_mini.jpg" alt="Photo mountain" title="اضغط لتكبر الصورة" />
</a>
</p>

html image

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

الاشكال (FIGURE)


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

  • الصور،
  • أكواد
  • إلخ

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

صنع الشكل

خذ على سبيل المثال لقطة شاشة الفصل الأول ، الموضحة في الشكل التالي.

html image

برنامج في HTML5 ، لدينا علامة

. إليك كيف يمكننا استخدامه:


<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
</figure>

وغالبًا ما يكون الشكل مصحوبًا بتعليق. لإضافة تعليق ، استخدم العلامة

<figcaption>داخل العلامة <figure>، مثل هذا:


<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
    <figcaption> Bloc-Note برنامج</figcaption>
</figure>

فهم دور الشخصيات

في وقت سابق من هذا الفصل ، أخبرتك أنه يجب وضع الصور في فقرات (توضع داخل علامة

) هذا ليس صحيحا تماما.

إذا جعلت صورتك في شكل، فقد تكون الصورة موجودة خارج فقرة.

وغالبًا ما يكون الشكل مصحوبًا بتعليق. لإضافة تعليق ، استخدم العلامة

<figcaption>داخل العلامة <figure>، مثل هذا:


<p>هل تعرفون bloc note ؟ نستطيع به ان نكتب صفحة ويبp>
<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
    <figcaption> Bloc-Notes</figcaption>
</figure>

أنا لا أرى حقا التغيير. متى يجب أن أضع صورتي في فقرة ومتى يجب أن أضعها في صورة؟

سؤال جيد ! كل هذا يتوقف على ما تجلبه الصورة للنص:

  • إذا لم تقدم أي معلومات (إنها مجرد رسم توضيحي للتزيين): ضع الصورة في فقرة.
  • إذا كان يجلب المعلومات: ضع الصورة في الشكل.

العلامة

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

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


<figure>
    <img src="images/internetexplorer.png" alt="Logo Internet Explorer" />
    <img src="images/firefox.png" alt="Logo Mozilla Firefox" />
    <img src="images/chrome.png" alt="Logo Google Chrome" />
    <figcaption>Logos of browsers</figcaption>
</figure>

الخلاصة


  • هناك العديد من تنسيقات الصور التي تم تكييفها مع الويب:
    • JPEG: للصور.
    • PNG: لجميع الرسوم التوضيحية الأخرى ؛
    • GIF: على غرار PNG ، أكثر محدودية في عدد الألوان ولكن يمكن تحريكها.
  • إدراج صورة مع العلامة <img />. يجب أن تتضمن على الأقل هاتين السمتين: src (اسم الصورة) و alt (وصف مختصر للصورة )
  • إذا كانت الصورة توضح النص (ولم تكن مزخرفة فقط) ، فمن المستحسن وضعها داخل علامة <figure>. يتم استخدام العلامة <figcaption> لكتابة تعليق على الصورة.