السلام عليكم ورحمة الله
اليوم سنتعرف على مزية أخرى من مزايا لغة HTML، إنها إدراج الصور في صفحة HTML أو صفحة الويب:
عليك أولاً أن تعلم أن عملية إدراج الصور لا تحدث بطريقة سحرية ، فقد تكون قد تعودت على إدراج الصور في صفحتك على الفايسبوك أو تويتر أو انستجرام 🙂 تلك الطرق مبرمجة سلفاً و لن تستطيع عمل نفس الشيئ إن أردت إنشاء موقع خاص بك 😯 . على أيٍّ ! لا ترتبك ! فالأمر أسهل مما تتصور . هنا ستتعلم كل شيئ عن إدراج الصور و عن أنواعها و تنسيقاتها المختلفة . فالصور تختلف باختلاف امتداداتها ، و لا يمكن أن نختار صور لصفحاتنا بشكل عشوائي. فهي في بعض الأحيان تكون ضخمة و حجمها يصعب تحميله ، مما يؤدي إلى بطء وقت تحميل صفحات الويب!.
وللحفاظ على سهولة قراءة صفحاتك وسرعة التنزيل ، يرجى اتباع النصائح التالية !
تنسيقات الصور المختلفة
هل تعرف تنسيقات الصور و أنواعها؟
على سبيل المثال ، يتيح لك برنامج الرسم و هو المتوفر على جميع إصدارات الويندوز ( أنظر الأيقونة جانياً) الاختيار بين عدة تنسيقات عند حفظ صورة .
و هذا الاختيار تجده أيضاً في برنامج الفوتوشوب المشهور، و هو الأفضل بالنسبة لي.
إعلم ان بعض التنسيقات أكثر تكيفًا من غيرها سواء كانت الصورة (صور، رسوم ، أو صور متحركة …).
و نحن هنا سننكب على معرفة التنسيقات التي يمكننا استخدامها على الويب ونختار أفضل ما يناسب صورتك المعروضة . لذلك كن مطمئناً ، و ركز معي، و سيتضح لك الخيار المناسب.
كل الصور على الإنترنت تشترك في أمر واحد، و هو استجابتها للضغط . وهذا يعني أن الكمبيوتر يقوم بحسابات بحيث تصبح الصورة أخف وزناً وبالتالي أسرع في التحميل.
نوع JPEG
تعتبر صور JPEG الأكثر تداولاً على الويب. و قد تم تصميم هذا التنسيق لتقليل وزن الصور ليصبح حجم الملف خفيفاً على الصفحات ، والتي قد تحتوي على أكثر من 16 مليون لون مختلف. الشكل التالي هو صورة محفوظة بصيغة JPEG.
JPEG = Joint Photographic Expert Group
يتم حفظ صور JPEG بالامتداد jpg. أو jpeg.
لاحظ أن صيغة JPEG تؤدي إلى تدهور جودة الصورة قليلاً ، بطريقة غير محسوسة بشكل عام. هذا ما يجعله فعالاً جدّاً في تقليل وزن الصور.
عندما يتعلق الأمر بالصورة ، لا يمكننا عادة اكتشاف فقدان الجودة. لكن، إذا لم تكن صورة ، فسوف تراها غير واضحة بدقة. في هذه الحالة ، من الأفضل استخدام تنسيق PNG.
نوع PNG
PNG هو الصيغة الأحدث من جميعالصيغ. وهذا التنسيق مناسب لمعظم الرسومات و الصور ، و تتميز PNG بميزتين مهمتين :
- يمكن أن تكون شفافة
- لا تغير من جودة الصورة.
PNG =Portable Network Graphics
تم اختراع PNG للتنافس مع تنسيق آخر ، GIF ، في وقت كان علينا دفع رسوم لاستخدام صور GIF. ومنذ ذلك الحين ، تطورت PNG وأصبحت أقوى تنسيق لتسجيل معظم الصور.
توجد PNG في نسختين ، وفقًا لعدد الألوان التي يجب أن تتضمنها الصورة:
- PNG 8 bits ب 256 لــون؛
- PNG 24 bits : ب 16 مليون لون .
الشكل التالي هو صورة بامتداد
PNG ، تمثل شعار jabism.com.
الصورة بصيغة GIF
تعتبر صيغة الصور GIF قديمة بعض الشيئ ، وتم استخدامها كثيرًا (ولا زالت تحتفظ بمكانها في الاستخدام على سبيل الاستئناس و العادة ).
اليوم ، أصبحت صور PNG بشكل عام أفضل بكثير من صور GIF وذلك لأنها تكون أفتح وشفافيتها أفضل. ينصح باستخدام PNG على نطاق واسع.
يقتصر تنسيق GIF على 256 لونًا (في حين أن PNG يمكن أن يصل إلى عدة ملايين من الألوان).
ورغم المدح الذي ناله PNG إلا أن GIF يحتفظ بميزة لا تملكها التنسيقات الأخرى و هي أن صور GIF يمكن أن تكون متحركة. ومن هنا أحرز على الصيحة في السنوات الأخيرة مع الرسوم المتحركة GIF التي أصبحت متداولة بشكل كبير على شبكة الإنترنت و حتى مواقع التواصل الاجتماعي .
هناك تنسيق ملائم لكل صورة
إذا قمنا بالتلخيص ، فإليك الشكل الذي يجب اعتماده وفقًا للصورة التي لديك:
- صورة: إستخدم JPEG.
- أي رسم به ألوان قليلة (أقل من 256): إستخدم PNG 8 bits أو GIF كما تريد.
- أي رسم بالعديد من الألوان: إستخدم PNG 24 bits.
- صورة متحركة: إستخدم صورة GIF متحركة.
أخطــاء يجب تجنبهـا
تنسيقات غير مرغوب فيها
التنسيقات الأخرى التي لم يتم ذكرها هنا ، مثل التنسيق BITMAP المعروفة بامتداد bmp.* أصبحت غير مرغوب فيها لأنها في الغالب لا يتم ضغطها ،فحجمها كبير جدًا. وهي لا تتكيف على الإطلاق مع الويب. يمكن وضعها على الموقع ولكن تحميلها سيكون بطيئاً جداً! 🐢🐢
اختر إسم صورتك بدقة
إذا كنت ترغب في تجنب المشكلات ، فاعمل على حفظ ملفاتك بأسماء تكون بأحرف صغيرة ، بدون مسافات أو تشكيل ، على سبيل المثال: picture.png أو my_picture.png.
يعني ، يمكنك استبدال المسافات بحرف الشرطة السفلية (“_“) كما فعلت في المثال.
إدراج الصـور
إذن ما هي العلامة الشهيرة التي ستسمح لنا بإدراج الصور في صفحة HTML ؟ إنها هاته <img />!
إنها علامة يتيمة كما ذكرنا سابقاً (مثل <br />). وهذا يعني أننا لسنا بحاجة إلى كتابته في جهتين مثل معظم العلامات الأخرى التي رأيناها حتى الآن. في الواقع ، لا نحتاج إلى تحديد جزء من النص ، فنحن نريد فقط إدراج صورة في مكان معين.
يجب أن تكون العلامة مصحوبة بخاصيتين إلزاميتين:
- src : يسمح بتحديد مكان الصورة التي نريد إدراجها، بحيث يمكنك إما وضع مسار مطلق على سبيل المثال: https://www.jabism.com/tulipe01.png ، أو وضع الصورة حسب المسارات التي ذكرناها في درس الروابط. لذا ، إذا كانت صورتك موجودة في مجلد فرعي images ، فستحتاج إلى كتابتها على الشكل التالي:
|
1 |
src="images/tulipe.png" |
- alt: تعني “نص بديل”. يجب أن تشير دائماً إلى نص بديل للصورة ، أي نص قصير يصف ما تحتويه الصورة. سيتم عرض هذا النص بدلا من الصورة في حالة عدم إمكانية تحميلها (و هذايحدث خصوصاً عندما يكون الاتصال بالشبكة بطيئاً 🐢)،وهذا يساعد محركات البحث في قسم الصور. بالنسبة لمثالنا ، سوف نضعها على سبيل المثال:
|
1 |
alt="la tulipe est une jolie fleur". |
لإدراج الصور في صفحة HTML يجب أن تكون الصور داخل فقرة ( <p> </p>). وهنا المثال:
|
1 2 3 4 5 6 7 8 |
<P> إليكم هاته الصورة التي تمثل غروب الشمس والتي التقطتها يوم الأحد الماضي من شاطئ العرائش: <br /> <img src="images/coucher_de_soleil.jpg" alt="coucher de soleil, plage de Larache"/> </ P> |
باختصار ، نقول أن إدراج الصور في صفحة HTML يُعدّ أمراً سهلاً للغاية إذا عرفنا كيف نـشير إلى مكان الصورة ، وهذا ما تعلمناه سابقاً في درس الروابط.
أكبر “صعوبة” (إذا صح التعبير) هو اختيار صيغة الصورة الصحيحة . هنا نستخدم صيغة JPEG للصورة.
"Site images / Image tout bête.jpg"
. يجب إزالة المسافات (أو استبدالها بالرمز “_“) ، وحذف الفواصل و المسافات ووضع كل الأسماء بأحرف صغيرة مثل:
"Images_du_site/image_toute_bete.jpg"
. إعلم أنه إذا لم تظهر صورتك على صفحة الويب، فمن المؤكد أن المسار غير صحيح! قم بتبسيط أسماء الملفات والمجلدات الخاصة بك قدر الإمكان ، وسيكون كل شيء على ما يرام.
إضافة تلميح
السّمة لعرض تلميح على الصورة هي نفسها للروابط كما رأينا في درس الروابط : فهي عنوان. و تبقى هذه السمة اختيارية ( على عكس alt ).
إليك ما يمكن فعله:
|
1 2 3 4 5 6 7 8 |
<P> إليكم هاته الصورة التي تمثل غروب الشمس والتي التقطتها يوم الأحد الماضي من شاطئ العرائش: <br /> <img src="images/coucher_de_soleil.jpg" alt="coucher de soleil, plage de Larache" title="Il était vraiment fascinant !"/> </ P> |
مرر الماوس فوق الصورة لرؤية التلميح .
صورة مصغرة قابلة للتكبير بواسطة النقر
إذا كانت صورتك كبيرة جداً ، فمن المستحسن عرض الصورة المصغرة على موقعك. ثم أضف رابطاً إلى هذه الصورة بحيث يمكن للزائرين النقر عليها لعرض الصورة بحجمها الأصلي .
الطريقة سهلة ! بعد تصغير الصورة و تسجيلها بإسم مخالف للاصلية مثلاً :
الصورة المصغرة : petit-coucher.jpg و الصورة الأصلية : coucher.jpg نضعهم في مجلد بإسم images. و في صفحة الويب التي نحن بصدد تحريرها ، ندرج الصورة المصغرة مع إضافة يؤدي إلى عرض الصورة الأصلية عند الضغط عليها ، و بالتالي لن نعاني من بطء تحميل صفحتنا.
هذا هو المثال، و سوف نكتب شفيرة الرابط التي توصلنا لهاته النتيجة.
المصغرة وصورتها الأصلية
هذا هو كود HTML الذي سأستخدمه للوصول إلى النتيجة المبينة فوق:
|
1 2 3 4 5 |
<P> لتتمكن من رؤية الصورة في حجمها الأصلي ، انقر علي الصويرة ! <br/> <a href="images/coucher.jpg"> <img src ="images/petit-coucher.jpg" alt="غروب الشمس" title="أنقر على الصورة للتكبير"/> </a> </P> |
الوثائـق
أثناء متابعتك لهذا الدرس، لا بد أنك مررت بعدة و ثائق التي هي عبارة عن عناصر وأشكال تقوم بإثراء محتوى النص و استكمال المعلومات و توضيحها على الصفحة ، و هي تختلف في نوعها:
- الصور
- رموز المصدر
باختصار ، كل ما يوضح النص و يفسره هو وثيقة توضيحية. و هنـا سنركز على الصور رغم أنها ليست وحدها تمثل الوثائق.
إنشاء وثيقـة
خذ على سبيل المثال هذه اللقطة المأخوذة من محاولة إنشاء أول صفحة على الويب ، كما هو موضح في الشكل التالي.
برنامج atom لتحرير نصوص البرمجة
في هذا السياق يمكننا ذكر علامة جديدة موجودة في HTML5 ، و هي <figure>. و يمكننا استخدامها كالتالي:
|
1 2 3 |
<figure> <img src = "images / figure-atom.png" alt = "محرر النصوص البرمجية atom" /> </figure> |
وغالبا ما يصاحب هذا الشكل وسيلة إيضاحية باستخدام علامة <figcaption> داخل علامة <figure> ، كما يلي:
|
1 2 3 4 |
<figure> <img src ="images/figure-atom.png" alt="atom محرر النصوص البرمجية"/> <figcaption> يستعمل لتحرير النصوص البرمجية مثل html و css </figcaption> </figure> |
كيفية فهم دور الوثائـق
خلال أحد الفقرات من هذا الدرس ، أخبرتكم أنه يجب وضع الصور بين العلامتين <p> </ p>و لكن هذا الأمر لم يعد صحيحاً مع استعمال العلامة <figure>.
إذا جعلت صورتك على شكل وثيقة فسوف تكون الصورة خارج علامة الفقرة.
|
1 2 3 4 5 |
<p> لم يسبق لي أن قدمت لك تعريفاً عن برنامج atom ولكنني عرفتك عن برنامج مشابه إسمه Notepad++ ! </P> <figure> <img src ="images/figure-atom.png" alt=" برنامج atom"/> </figure> <figcaption> برنامج atom لبرمجة المواقع </figcaption> |
صراحة لا ألاحظ أي فرق في كلا الحالتين 😯 فمتى إذن يكون علي أن أضع صورتي في فقرة ومتى يجب أن أضعها في الوثيقة ؟
إممم ! سؤال ثاقب! و الحقيقة أن الأمر يتوقف على ما تمثله الصورة بالنسبة للنص! كيــف ؟ 💡
- إذا لم تقدم الصورة أية معلومات توضيحية لإثراء النص و كانت مجرد صورة للتزيين نضع الصورة في فقرة <p> </p>
- إذا كانت تجلب المعلومات نضع الصورة في الشكل. <figure></figure>
العلامة <figure> لها دور دلالي في المقام الأول. هذا يعني أنه يخبر الكمبيوتر أن الصورة منطقية ومهمة لفهم النص. هذا يمكن أن يسمح لبرنامج لاسترداد جميع الأشكال من النص والإشارة إليها في جدول الوثائق ، على سبيل المثال.
و في الأخير ، كن على دراية بأن الوثيقة يمكن أن تتضمن العديد من الصور. إليك هنا حالة حيث يتم توضيحها:
|
1 2 3 4 5 6 |
<figure> <img src="images/atom.png" alt="logo de logiciel Atom"/> <img src="images/notepad++.png" alt="logo de logiciel Notepad++"/> <img src="images/youtube.png" alt = "logo de youtube"/> </figure> <figcaption> شعارات لبرامج و مواقع متداولة </figcaption> |
إختــصــار
-
يوجد العديد من صيغ و تنسيقات الصور المتناسبة مع الويب:
- JPEG: للصور
- PNG : لجميع الرسوم التوضيحية الأخرى.
- GIF: مماثل لـ PNG ، أكثر محدودية في عدد الألوان ولكن يتميز بتحريك الصور و الرسوم و الكتابة أيضاً.
- ندرج الصورة بالعلامة <img />. ويجب أن تتضمن على الأقل هاتين السمتين: src و alt .
- إذا كانت الصورة توضح النص (وليس الديكور فقط) ، فمن المستحسن وضعه داخل علامة <figure>. يتم استخدام العلامة <figcaption> لكتابة وسيلة إيضاح الصورة.
إلى هنا نكون قد أنهينا درس إدراج الصور في صفحة HTML ..و لنا لقاء بإذن الله
 |
