جوال سوالف سوفت
من الموقع: Crunchpad, عندما يتحول المستخدم الى منتج فإن القصة تكون حتما مثيرة !!

 

العودة   سوالف سوفت > سوالف برمجة المواقع وتطويرها > الويب والويب 2.0 والتجارة الالكترونية
المدوّنات البحث مشاركات اليوم اجعل كافة المشاركات مقروءة

رد
 
LinkBack أدوات الموضوع
عبدالعزيز الزرعوني
تاريخ التسجيل: Feb 2004-
#1 (permalink)  
الصور في HTML (لابد من alt)


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

أساسيات إدراج صورة باختصار
لإدراج صورة في الصفحة، نستخدم وسم <img /> ونضع له الخاصية src التي تعني (source) وهي تحدد مسار الصورة المراد وضعها، ليكون الشكل النهائي له:
كود:
<img src="http://www.almashroo.com/مسار الصورة" />
هكذا نكون أنشأنا صورة يمكننا استخدامها كما نريد.

ملاحظة: الفرق بين HTML و XHTML في الصور هو أن وسم الصورة في HTML يكون هكذا:
كود:
<img src="http://www.almashroo.com/مسار الصورة">
وأما في XHTML فنقوم بإغلاقه قبل علامة نهاية الوسم، فيكون:
كود:
<img src="http://www.almashroo.com/مسار الصورة" />


لابدّ من تحديد alt

كثير من مطوري المواقع يستهينون بوضع خاصية alt في وسم الصورة، أو يضعونها فارغة هكذا:
كود:
<img src="http://www.almashroo.com/مسار الصورة" alt="" />
هكذا لن نستفيد من هذه الخاصية.

الخاصية alt تعني (alternative) أو (البديل)، ونضعها هكذا:
كود:
<img src="http://www.almashroo.com/مسار الصورة" alt="المسجد الحرام بمكة المكرمة" />
ولنعرف وظيفتها، فلنفرض أن الصورة تعطّلت او اختفت من الانترنت لأي سبب من الأسباب، عندها لن تظهر الصورة أمام الزائر، وهنا يأتي دور البديل alt الذي سيظهر بدلاً من الصورة، وفي مثالنا هنا سيظهر النص "المسجد الحرام بمكة المكرمة" .

هل هي مهمة فعلاً؟
نعم، فالسبب الأول هو أنها ستكون بديلاً للصورة، وإليك سببين آخرين:
  1. المتصفحات النصية: هناك متصفحات لا تدعم الصور وتظهر النصوص فقط مثل متصفح Lynx وغيره، وهذه المتصفحات يستخدمها كثير من أصحاب الهواتف عند تصفحهم للويب، وأيضاً من لديهم سرعات إنترنت بطيئة جداً أو لمن لا يحبون الصور (يوجد فعلاً هذا النوع من الناس)، هؤلاء جميعاً سيمرّون على الصورة ولن يعلموا بوجودها وإن علموا لن يعرفوا ما هي هذه الصورة، فالبديل alt سيوضّح لهم الصورة ومحتواها.

  2. المكفوفون: يستخدم الكفيف متصفحات نصية (مثل Lynx الذي ذكرته)، حيث يقرأ لهم البرنامج كل محتويات الصفحة من نصوص، ولن يعلم بوجود صورة إذا لم تقم بتحديد alt لها!

إذاً نرى أنها مهمة فعلاً لـ3 الأسباب التي ذكرتها وغيرها ربما.

أما بخصوص صور الاستايلات في المنتديات مثلاً من أجزاء الهيدر والإطارات، فهذه يجب أن تكون أصلاً على هيئة css في خلفيات ولا توضع كصور كما يفعل أغلب المصممون (هنا شرح للأخ ca2oom لطريقة تصميم استايل بالـcss)، ولكن إن كان ولابدّ من وضعها كصور في هيدر الاستايل وبقية الأجزاء، فضع alt واجعل محتواه فارغاً هكذا:
كود:
<img src="http://www.almashroo.com/مسار الصورة" alt="" />


استخدم title للـ tool tips

في متصفح Internet Explorer، إذا وضعت alt للصورة ثم مررت المؤشر عليها سيظهر لك tool tip (المستطيل الأصفر) محتوياً على ما كتبته في الـalt، ولكنه لا يحدث في متصفح Firefox، ويظن البعض أن هذا خطأ Firefox والصواب هو عكس ذلك.
خاصية البديل alt هي لإظهار نص بديل للصورة المعطلة، وأما الخاصية المسؤولة عن إظهار الـtool tip (المستطيل الأصفر) فهي خاصية title، فإذا أردت أن يظهر الـtool tip في جميع المتصفحات فاستخدم خاصية title :
كود:
<img src="http://www.almashroo.com/مسار الصورة" alt="المسجد الحرام بمكة المكرمة" title="المسجد الحرام بمكة المكرمة" />
هكذا ستتأكد بأن جميع المتصفحات ستعرض الوصف في المستطيل الأصفر عند إمرار المؤشر على الصورة، ولا تقم بحذف alt فوجودها مهم لما ذكرناه سابقاً وtitle ليست بديلاً عنه.

ماذا إذا أردت وضع alt وعدم إظهار الـtool tip
هذا مما سألني عنه بعض المطورون، حيث أنهم لا يريدون من Internet Explorer أن يظهر المستطيل الأصفر على الصورة، مع أنهم يريدون فعلاً وضع alt لها. الحل بسيط، وهو أن تضع الـalt كما تريد ثم تضع title فارغ هكذا:
كود:
<img src="http://www.almashroo.com/مسار الصورة" alt="المسجد الحرام بمكة المكرمة" title="" />


هل يستحق الأمر كل هذا الحديث؟

مهمتي هي تصحيح المفاهيم وتوضيح ما لبس على البعض، لذلك أفردت الـalt بمقال كامل، ذلك لأنه يوجد حتى الآن من لا يعرف ما هي فائدة alt أصلاً ولا يدرك أهميته، ولا يفرق بينه وبين title، فأردت البيان والتوضيح بتفصيل حتى تصل المعلومة بإذن الله وترسخ في العقل.

في المقال القادم سأتحدث عن الـwidth والـheight والمصغرات وlongdesc، وفي الذي يليه سأتحدث في أمور متقدمة أكثر وأنهي بها موضوعنا.


الكاتب: المبدع العربي
المصدر: المشروع - مجتمع مطوري المواقع






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

^_^

مدونة المبدع العربي
المبدع العربي غير متواجد حالياً   قديم 12-12-2007, 11:13 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Jun 2005-
#2 (permalink)  

السلام عليكم

مبدع اسم على مُسمى
جزاك الله كل خير ووفقك

استمر على بركة الله وتوفيقه






PrinceOfPersia غير متواجد حالياً   قديم 12-12-2007, 11:22 PM
رد مع اقتباس
عضو سوبر نشيط
تاريخ التسجيل: May 2007-
#3 (permalink)  

تعجبني طريقتك في إختيار محور الموضوع ،، حيث تقوم بإختيار أشياء دقيقة و مهمة في نفس الوقت ، شكراً لك .






dev11 غير متواجد حالياً   قديم 12-12-2007, 11:55 PM
رد مع اقتباس
عضو فعال
تاريخ التسجيل: Feb 2004-
#4 (permalink)  
السلام عليكم

رائع يا مبدعنا ، معلومات دسمة و البعض منها كنت اجهلُه ..

مشكور قلبي ، و الحمدلله على السلامة زمان ما لقيناك ..

تحياتي
الشجّار






__________________
------- « وما توفيقي إلا بالله »
الشجّار للبرامــــــج | راسلنــــي
Alshajjar غير متواجد حالياً   قديم 13-12-2007, 12:27 AM
رد مع اقتباس
مشرف خدمات البيع والشراء والإعلانات التجارية
تاريخ التسجيل: Apr 2002-
#5 (permalink)  

جميل جدا

أتمني كذلك وضع درس للنصوص في html

تسلم الأيادي ومتابع لك






__________________
......................
ابوناصر

My NicName : RED_LINE
محمد الهاجري غير متواجد حالياً   قديم 13-12-2007, 01:53 PM
رد مع اقتباس
عبدالعزيز الزرعوني
تاريخ التسجيل: Feb 2004-
#6 (permalink)  

PrinceOfPersia..
وعليكم السلام
بارك الله فيك

asaamas
..
هدفي هو تغيير الأخطاء وتوضيح ما هو غير واضح، فلا تستعجب ذلك وانتظر المزيد قريباً

Alshajjar..
الحمدلله أن كلامي حقق لك فائدة، وانتظر المزيد قريباً..
وأنا موجود بإذن الله في المشروع ومدونتي (تجدهما في التوقيع)..
والمسنجر حتى أنا لم أرك فيه.. أرجوا أن تراسلني على بريدي:
mobde3 [ at ] gmail.com
لأرسل لك المسنجر الخاص، اشتقت للحديث معك فعلاً






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

^_^

مدونة المبدع العربي
المبدع العربي غير متواجد حالياً   قديم 25-12-2007, 09:53 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: May 2007-
#7 (permalink)  

بارك الله فيك اخوي المبدع العربي
تووضيح سليم وواضح وهذا ما نريد انسترجعه دائماً وهي بعض الجزئيات التي يغفل عنها الكثير وتكون ذات اهميها رائعة .. اكثر ما لفت انتباهي هي الاسباب الثلاث التي ذكرتها لاستخدام alt وهي الاهتمام بكافة الامور وان تكن نظره المصمم اكثر شمولية ..

ننتظر جديدكـ وكل الدعوات لك بالتوفيق ..

ابونايف






__________________
-----------
|||||||||||||||||||||
المجموعة العربية للاستضافة والتصميم
www.hos6.com
منتدى المحبه
مجتمع حواري
www.almhba.com
abo naif غير متواجد حالياً   قديم 26-12-2007, 01:16 AM
رد مع اقتباس
رد


 

أدوات الموضوع

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

كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
مركز تحميل الملفات + الصور بتطويرات جديدة وحل للمشاكل [عمل مشترك] Egyptechno الويب والويب 2.0 والتجارة الالكترونية 317 09-11-2007 08:18 PM
سكريبت مركزي 4 للتحميل الملفات و الصور 4arab.net التجارة في الأشياء الأخرى 15 19-07-2006 09:23 PM
مركز تحميل الصور , الاقوى - الافضل - الاجمل - الاسهل - الحلم الذي تتمناه بموقعك Arabws.com الويب والويب 2.0 والتجارة الالكترونية 9 12-07-2005 12:31 AM
مركز تحميل الصور , الاقوى - الافضل - الاجمل - الاسهل - الحلم الذي تتمناه بموقعك Arabws.com التجارة في الأشياء الأخرى 24 19-05-2005 07:14 PM
يد الله مع الجماعة: تعريب مصطلحات الويب isader.com الويب والويب 2.0 والتجارة الالكترونية 10 17-02-2005 09:04 AM


الساعة الآن: 12:28 AM بتوقيت المملكة العربية السعودية