رائد ابو فيصل
04-03-2010, 10:15 AM
بسم الله الرحمن الرحيم
5-الروابط والصور links and images(دورهxhtml)
الروابط Links اظن جميعنا يعرف معناها
الخاصية الأساسية فى عنصر a (العنصر الخاص بالروابط) هى خاصية الـ href
والتى يوضع بها المسار الذى يوجه اليه الرابط
وتكتب الروابط بالشكل التالى كامثال
كود:
<a href="http://www.dd4bb.com">الدعم العربى</a>
الكود اعلاه عندما تضعه بالمتصفح سيعرض لك كلمة الدعم العربى
وعندما تضغط عليها سيتم تحويلك الى الرابط http ://www.dd4bb.com
لكن المثال اعلاه هو ابسط مثال للروابط.
العنصر a يمكن ان نضع به خاصية target ونجعل قيمتها هى _blank
هذا سيجعل الرابط يفتح بنافذة جديدة بدلا من الإنتقال من النافذة الحالية.
كما يمكننا ايضا ان نضع به الخاصية title ونضع بها نص به وصف قصير عن الرابط
وسيظهر هذا النص عند وقوف المؤشر فوق الرابط دون الضغط عليه.
لكن الروابط لها استخدامات اخرى.
يمكننا ان نجعل الروابط يشير لمكان ما بالصفحة
لنأخذ المثال التالى مثلا
(جربه بنفسك لتفهم ما المقصود)
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="Ar" lang="Ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>صفحة تجريبية</title>
</head>
<body>
الذهاب الى <a href="#id1">الجزء 1</a> من الصفحة.
<br />
الو الذهاب الى <a href="#id2">الجزء 2</a> من الصفحة.
<br /><br /><br /><br /><br /><br /><br />
جزء فى منصف الصفحة
<br /><br /><br /><br /><br />
<h1 id="id1">الجزء 1</h1>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
جزء اخر بالصفحة
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a name="id2"></a>
<h1>الجزء 2</h1>
</body>
</html>
وهناك ايضا خاصيتين يمكننا اضافتهم للروابط
وهما tabindex و accesskey
الـ tabindex نضع قيمته رقم.
مثلا لدينا 5 روابط بالصفحة.
ونريد الزائر عندما يضغط على زر tab يصل للروابط الأول.
وعندما يضغط على الزر tab مرة اخرى يصل للرابط الثانى, وهكذا.
يمكننا هذا عن طريق وضع ارقام مسلسلة للروابط فى خاصية الـ tabindex
كامثال
كود:
<a href="example1.com" tabindex="1"></a>
<a href="example2.com" tabindex="2"></a>
<a href="example3.com" tabindex="3"></a>
وهكذا
اما الـ accesskey فنضع قيمته احد احرف لوحة المفتيح (الإنجليزية)
لنفرض اننا جعلنا الـ accesskey له الحرف w لأحد الروابط
عندما يضغط الزائر على هذا الزر + زر CTRL او ALT (على حسب نظام التشغيل لدى الزائر) سيتم وضع المؤشر فورا فوق هذا الرابط.
هذا بالنسبة للروابط.
بالنسبة للصور نحن نستخدم العنصر img لوضع الصور بصفحاتنا.
ويكون الأمر بالشكل التالى
كود:
<img src="http://path/to/an/image.gif" alt="وصف الصورة" />
حيث قيمة الخاصية src هو مكان ملف الصورة بالموقع (او حتى رابط خارجى)
وقيمة الخاصية alt هى وصف بسيط عن الصورة (وهو اجبارى لإنشاء صفحات خالية من الأخطاء) وايضا امر جيد لأن محركات البحث تتعرف على محتوى الصورة عن طريق وصفها الموجود بخاصية الـ alt
كما انه يمكنك ان تجعل الصورة تشير الى رابط ما بإستخدام الوسمين a و img سويا بالشكل التالى
كود:
<a href="http://example.com" target="_blank"><img src="http://path/to/image.gif" alt="example.com log" /></a>
لكن هناك شئ صغير ربما تلاحظه هو ان بعض المتصفحات عندما ترى ان صورة ما تشير الى رابط, تضع حولها اطار صغير. لحذف هذا الأطار يجب وضع الخاصية border لعنصر img واعطائه القيمة 0 فيصبح الكود بالشكل التالى
كود:
<a href="http://example.com" target="_blank"><img src="http://path/to/image.gif" alt="example.com log" border="0" /></a>
(ويمكن تنفيذ الأمر نفسه بالـ CSS ايضا)
ارتفاع وعرض الصورة (ابعاد الصورة)
عنصر الـ img يمكنك من وضع خاصيتين اخرتين له, وهما height و width
وتحدد بهم ابعاد الصورة اذا كنت لا تحبذ عرضها بأبعادها الحقيقية.
انتهى درس اليوم واتمنى انه يكون بسيط لكم.
ولا تنسى ان تقرأ ايضا موضوع الروابط والـ backgrounds فى الـ css
كل التمنيات بالتوفيق بإذن الله.
دورة XHTML
اقرأ ايضا..
•الدرس السابق عناصر النصوص text elements (http://www.abc4web.net/vb/showthread.php?t=7116)
•الدرس التالى القوائم Lists in html
من الدعم العربي التطويري
5-الروابط والصور links and images(دورهxhtml)
الروابط Links اظن جميعنا يعرف معناها
الخاصية الأساسية فى عنصر a (العنصر الخاص بالروابط) هى خاصية الـ href
والتى يوضع بها المسار الذى يوجه اليه الرابط
وتكتب الروابط بالشكل التالى كامثال
كود:
<a href="http://www.dd4bb.com">الدعم العربى</a>
الكود اعلاه عندما تضعه بالمتصفح سيعرض لك كلمة الدعم العربى
وعندما تضغط عليها سيتم تحويلك الى الرابط http ://www.dd4bb.com
لكن المثال اعلاه هو ابسط مثال للروابط.
العنصر a يمكن ان نضع به خاصية target ونجعل قيمتها هى _blank
هذا سيجعل الرابط يفتح بنافذة جديدة بدلا من الإنتقال من النافذة الحالية.
كما يمكننا ايضا ان نضع به الخاصية title ونضع بها نص به وصف قصير عن الرابط
وسيظهر هذا النص عند وقوف المؤشر فوق الرابط دون الضغط عليه.
لكن الروابط لها استخدامات اخرى.
يمكننا ان نجعل الروابط يشير لمكان ما بالصفحة
لنأخذ المثال التالى مثلا
(جربه بنفسك لتفهم ما المقصود)
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="Ar" lang="Ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>صفحة تجريبية</title>
</head>
<body>
الذهاب الى <a href="#id1">الجزء 1</a> من الصفحة.
<br />
الو الذهاب الى <a href="#id2">الجزء 2</a> من الصفحة.
<br /><br /><br /><br /><br /><br /><br />
جزء فى منصف الصفحة
<br /><br /><br /><br /><br />
<h1 id="id1">الجزء 1</h1>
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
جزء اخر بالصفحة
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a name="id2"></a>
<h1>الجزء 2</h1>
</body>
</html>
وهناك ايضا خاصيتين يمكننا اضافتهم للروابط
وهما tabindex و accesskey
الـ tabindex نضع قيمته رقم.
مثلا لدينا 5 روابط بالصفحة.
ونريد الزائر عندما يضغط على زر tab يصل للروابط الأول.
وعندما يضغط على الزر tab مرة اخرى يصل للرابط الثانى, وهكذا.
يمكننا هذا عن طريق وضع ارقام مسلسلة للروابط فى خاصية الـ tabindex
كامثال
كود:
<a href="example1.com" tabindex="1"></a>
<a href="example2.com" tabindex="2"></a>
<a href="example3.com" tabindex="3"></a>
وهكذا
اما الـ accesskey فنضع قيمته احد احرف لوحة المفتيح (الإنجليزية)
لنفرض اننا جعلنا الـ accesskey له الحرف w لأحد الروابط
عندما يضغط الزائر على هذا الزر + زر CTRL او ALT (على حسب نظام التشغيل لدى الزائر) سيتم وضع المؤشر فورا فوق هذا الرابط.
هذا بالنسبة للروابط.
بالنسبة للصور نحن نستخدم العنصر img لوضع الصور بصفحاتنا.
ويكون الأمر بالشكل التالى
كود:
<img src="http://path/to/an/image.gif" alt="وصف الصورة" />
حيث قيمة الخاصية src هو مكان ملف الصورة بالموقع (او حتى رابط خارجى)
وقيمة الخاصية alt هى وصف بسيط عن الصورة (وهو اجبارى لإنشاء صفحات خالية من الأخطاء) وايضا امر جيد لأن محركات البحث تتعرف على محتوى الصورة عن طريق وصفها الموجود بخاصية الـ alt
كما انه يمكنك ان تجعل الصورة تشير الى رابط ما بإستخدام الوسمين a و img سويا بالشكل التالى
كود:
<a href="http://example.com" target="_blank"><img src="http://path/to/image.gif" alt="example.com log" /></a>
لكن هناك شئ صغير ربما تلاحظه هو ان بعض المتصفحات عندما ترى ان صورة ما تشير الى رابط, تضع حولها اطار صغير. لحذف هذا الأطار يجب وضع الخاصية border لعنصر img واعطائه القيمة 0 فيصبح الكود بالشكل التالى
كود:
<a href="http://example.com" target="_blank"><img src="http://path/to/image.gif" alt="example.com log" border="0" /></a>
(ويمكن تنفيذ الأمر نفسه بالـ CSS ايضا)
ارتفاع وعرض الصورة (ابعاد الصورة)
عنصر الـ img يمكنك من وضع خاصيتين اخرتين له, وهما height و width
وتحدد بهم ابعاد الصورة اذا كنت لا تحبذ عرضها بأبعادها الحقيقية.
انتهى درس اليوم واتمنى انه يكون بسيط لكم.
ولا تنسى ان تقرأ ايضا موضوع الروابط والـ backgrounds فى الـ css
كل التمنيات بالتوفيق بإذن الله.
دورة XHTML
اقرأ ايضا..
•الدرس السابق عناصر النصوص text elements (http://www.abc4web.net/vb/showthread.php?t=7116)
•الدرس التالى القوائم Lists in html
من الدعم العربي التطويري