ما هو الوسم الخاص بإدراج صورة في لغة html ؟
عرض الصور في الصفحات أمر مهم جداً حيث يجذب نظر المستخدم بشكل كبير و في حال كان الموقع يقدم شروحات مكتوبة فالصور ستكون إضافة ممتازة ضمن الشروحات خاصةً إن كان الهدف منها إعلام المستخدم كيف يقوم بإجراء عملية ما كحل مشكلة في حاسوبه أو تنصيب برنامج خطوة خطوة.
ويمكن للمستخدمين اضافة وعرض الصور في صفحات الويب باستخدام لغة الـ HTML ، ويمكن تحديد كيفية عرض الصور في ملفات الـ HTML من خلال الوسم <img> .
الوسم <img> بهذا الشكل ” فارغ ” ، ذلك يعني أن محتوى الخاصية فقط و نهاية الوسم . و لعرض الصورة داخل صفحتك يجب عليك إستخدام سمة المصدر ” src attribute ” حيث أن src هي إختصار لـ “source” .
و القيمة التي تعطى لخاصية الـ src هي عبارة عن مسار ” URL ” الصورة التي تريد عرضها في صفحة الويب .
و الصيغة العامة لكود عرض الصور تأخذ الشكل التالي :
|
<img src=”/ss/tibanet/url”> |
و الغرض من URL هو تحديد أين موقع تخزين الصورة … على سبيل المثال الصورة ” tiba,gif ” الموجودة في المجلد ” images ” على موقع ” www.tibanet.org ” يكون الـ URL لها هو:
http://www.tibanet.org/images/tiba.gif
المتصفح يقوم بعرض الصورة في المكان الموجود به وسم الصورة في ملف HTML ، فإذا قمت بوضع وسم الصورة بين فقرتين ، فإن المتصفح يعرض الفقرة الأولي ثم الصورة ثم الفقرة الثانية … و بالمثل إذا قمت بوضع الصورة داخل خلية جدول سوف يقوم المتصفح بعرض الصورة وفقاً لمكان الخلية في الجدول .
السمة Alt
تستخدم الخاصية alt لتحديد النص البديل “alternate text” للصورة . و تكون الصيغة العامة للكود كما يلي :
|
<img src=”/ss/tibanet/tiba.gif” alt=”طيبة نت”> |
الخاصية alt تخبر القارئ بالمعنى المراد من الصورة في حالة عجز المتصفح عن تحميل الصورة . حيث أن المتصفح سوف يعرض النص البديل عوضاً عن الصورة ، بالطبع تلك ميزة جيدة لتضمين خاصية alt لكل صورة في الصفحة ، و ذلك لتحسين عرض صفحتك و جعلها مفيدة للاشخاص التي تمتلك أو تقوم بإعداد المتصفحات لعرض الكتابة فقط .
وسوم الصور
|
Tag |
Description |
|
<img> |
تحديد صورة. |
|
<map> |
تحديد خريطة صورة. |
|
<area> |
تحديد منطقة داخل خريطة صورة. |
كيفية إدراج الصور باستخدام لغة اتش تي ام ال
إضافة صور إلى موقعك الإلكتروني أو ملفك الشخصي على شبكات التواصل الاجتماعي طريقة رائعة لتجديد صفحتك والرمز البرمجي لإضافة الصور بسيط للغاية وعادة ما يكون أحد أوائل الدروس التي يتعلمها دارس لغة اتش تي ام ال.
-
ارفع صورتك. هناك العديد من خدمات استضافة الصور المجانية مثل ألبومات بيكاسا وامج جور وفليكر وفوتوباكت. اقرأ الشروط بحرص حيث إن بعض الخدمات تقلل جودة الصور أو تحذف الصورة إن استعرضها الكثير من الأشخاص (حيث إن ذلك يؤدي إلى استهلاك معدّل نقل البيانات لدى المُضيف).
- تسمح لك بعض خدمات استضافة المدونات برفع الصور باستخدام أدوات إدارة المدونة.
- إن كنت قد دفعت لقاء استضافة ويب، ارفع الصورة إلى موقعك الموقع الإلكتروني باستخدام خدمة اف تي بي. يُنصح بإنشاء مجلد صور للحفاظ على تنظيم ملفاتك.
- إن كنت ترغب باستخدام الصورة على موقع إلكتروني آخر، اطلب إذن صاحب الصورة. إن سمح لك صاحب الصورة، نزّل الصورة ثم ارفعها إلى موقع استضافة صور.
-
افتح ملف اتش تي ام ال. افتح مستند اتش تي ام ال لصفحة الويب التي ستُعرض فيها الصورة.
- يمكنك الكتابة في المنشور مباشرة إن كنت تحاول إدراج صورة في منتدى حيث تستخدم العديد من المنتديات نظام إدراج خاص غير لغة اتش تي ام ال. اطلب مساعدة مرتادي المنتدى الآخرين إن لم تنجح الطريقة.
3. ابدأ بالوسم img. ابحث عن الجزء الذي ترغب بإدراج الصورة فيه ضمن جسم صفحة اتش تي ام ال ثم اكتب الوسم <img> فيه. هذا الوسم وسم فارغ مما يعني أنه لا يحتاج إلى وسم اختتامي وسيكون كل شيء تحتاجه لعرض الصورة بين القوسين المثلثين.
- إن حملت الصورة إلى دليل صور في موقعك الإلكتروني، يمكنك الوصول إليها من خلال الرابط /images/اسم الملف ويمكن أن يكون دليل الصور بداخل مجلد آخر إن لم ينجح ذلك ويمكنك تجربة الدليل الرئيسي.
5. ضع رابط الصورة في خاصية src. لعلك تعرف بالفعل أن خواص اتش تي ام ال توضع بداخل الوسوم لتعديلها والخاصية src اختصار لكلمة “مصدر” وهي تُعلم المتصفّح بمكان البحث لإيجاد الصورة. اكتب src=” ” والصق رابط الصورة بين علامتي التنصيص.
- إن لم تكن الصورة مهمة لمحتوى الصفحة، ضمّن الخاصية alt دون نص (alt=””).