HTML ( الدرس التاسع ) : HTML Images

[ريفــــــــــــــــان]

. . .







HTML Images

http://www.w3schools.com/html/html_images.asp

memories - ريفان





يندر أن نجد صفحة . . بدون صور . .

بل لا تكاد تكتمل الصفحات . . إلا بالصور . .

إذن لدينا ثلاث وسوم تخص الصور . . نتعرف عليها تباعاً . .



_____________





HTML <img> tag

http://www.w3schools.com/tags/tag_img.asp

يستخدم لتعريف الصورة . .


الخصائص المطلوبة .


الخاصية alt

وقيمتها نص

أي تعليق أو وصف قصير للصورة

نكتبه كي يظهر عند الوقوف على الصورة بالماوس . .

وكذلك يظهر اذا لم تظهر الصورة

ويفضـل استخدامهـا لأن بعض محركات البحث

تستخدمهـا في عمليـة أرشفة الصور

وللمعلوميـة ..

الخاصيـة alt لا يتعامل معها متصفح الفايرفوكس
كما تتعامل معها المتصفحات الأخرى
فعند إيقاف مؤشر الماوس على الصور
وأنت تستخدم متصفح الفايرفوكس لا يظهر الوصف الذي كتبته
ولكن اذا لم تظهر الصورة فإن الوصف الذي كتبته
سوف يظهر مكان الصورة كما في المتصفحات الأخـرى
لذلك يمكنك استخدام الخاصيـة title لإظهار الوصف
عند وضع مؤشر الماوس باستخدام متصفح الفايرفوكس
ولا مانع من استخدام الخاصيتين معاً






الخاصية src

لتحديد رابط الصورة . .


مثال للخاصيتين . . السابقتين ..

<img src="http://forum.ma3ali.net/images/editor/insertimage.gif" alt="إدارج صورة" />

__________



الخواص الاختيارية . .


خاصية align

للمحاذاة

وقيمها . .

top
bottom
middle
left
right

وهي مستنكرة تستخدم لغة الـ CSS بدلاً منها . .





خاصية border

وتأخذ قيم بالبكسل pixels

لوضع حدود حول الصورة . .

وهي مستنكرة تستخدم لغة الـ CSS بدلاً منها . .





خاصية height

قيم بالبكسل او بالنسبة المئوية

لتحديد ارتفاع الصورة




خاصية width

قيم بالبكسل او بالنسبة المئوية

لتحديد عرض الصورة

يفضـل استخدامهـا لتحديد مقاس الصورة
بذات اذا كانت الصورة داخلـه في تصميم الصفحـة

لأن الصورة ان لم تظهر سوف يظهر مربع صغير جداً عليـه علامـة خطأ
وسوف يتعدم تصميم الصفحـة

أما لو تم وضع مقاس الصورة ولم تظهر فسوف يظهر مربع بكبر الصورة وبه علامـة خطأ
بذلك لا ينعدم تصميم الصفحـة






خاصية hspace

تأخذ قيم بالبكسل

لتحديد المسافة الأفقية الفاصلة

بين النص والحافتين اليمنى واليسرى للصورة

أي لتحديد المسافة الفاصلة بين الصورة

وبين النص الذي يجاورها

وهي مستنكرة تستخدم لغة الـ CSS بدلاً منها . .






خاصية vspace

تأخذ قيم بالبكسل

لتحديد المسافة العمودية الفاصلة

بين النص والحافتين العليا والسفلى للصورة

أي لتحديد المسافة الفاصلة بين الصورة

وبين النص الأعلى والأسفل منها

وهي مستنكرة تستخدم لغة الـ CSS بدلاً منها . .






خاصية longdesc

قيمتها رابط

رابط لصفحة تحتوي وصف مطول للصورة



خاصية usemap

قيمتها رابط

إذا أردنا وضع صورة لخريطة مثلاً ..

نريد البحر يؤدي إلى رابط معين . . واليابسة تؤدي إلى رابط آخر

أي نفس الصورة . . تحتوي أكثر من رابط . .

بحيث تكون مقسمة كل قسم يؤدي إلى رابط معين . .

هذه الطريقة نسميها بخرائط الصور . .

والخاصية usemap تستخدم لإستدعاء كود خريطة الصور ..

أي قيمتها هو اسم خريطة الصور لكن مسبوق بالعلامة #

بهذا الشكل . .

<img src="planets.gif" usemap="#planetmap"/>

أي أن اسم خريطة الصور هو planetmap مسبوق بعلامة #

أما عن مفهوم خريطة الصور . . فسيأتي ايضاحه لا حقاً بإذن الله

وخاصية usemap تستخدم في الطريقة الحديثة

لعمل خرائط الصور . . وهي طريقة client-side





خاصية ismap

قيمتها رابط

تؤدي نفس وظيفة الخاصية usemap

وهي استدعاء أو جلب كود خريطة الصور

لكنها تستخدم في الطريقة القديمة

طريقة server-side







أمثلة عامة على الوسم <img> وخواصه . .


مثال يشرح طريقـة ادراج صورة مع تبيين كيفيـة استخدام الخواص
src و alt وwidth و height


http://www.w3schools.com/tags/tryit....=tryhtml_image


مثال يشرح طريقـة ادراج صورة مع تبيين كيفيـة استخدام الخواص
src و alt وwidth و height


http://www.w3schools.com/tags/tryit...._image_diffloc


مثال يوضح كيفية ظهور الصورة مع استخدام خاصيـة align


http://www.w3schools.com/tags/tryit....ml_image_align

مثال يوضح كيفية ظهور الصورة مع استخدام خاصيـة align

http://www.w3schools.com/tags/tryit....ml_image_float

مثال لتوضيح الخاصيتين
width و height

http://www.w3schools.com/tags/tryit....l_image_adjust


مثال لكيفيـة جعـل الصورة كرابط
مـع ملاحظـة وضع قيمة خاصيـة border بـ 0 لعدم ظهور الاطار الأزرق حول الصورة


http://www.w3schools.com/tags/tryit....tml_image_link

مثـال للخرائط الصوريـة

http://www.w3schools.com/tags/tryit....ryhtml_areamap






_______________







لوكان لدينا صورة

تحتوي على منظر للفضاء الخارجي

و للشمس و لكوكب المريخ.

مثل الصورة التالية \

http://www.w3schools.com/html/planets.gif


وأردنـا عمل ارتبـاط خاص لصورة الشمس

وإرتباط أخر لصورة المريخ

بحيث عندمـا يقوم زائر الصفحـة بالضغط على الشمس

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

وعندمـا يضغط على المريـخ ينقل بشكل مباشر الى صفحـة بها معلومات عن المريخ

هـذه الطريقـة لا يمكن عملـهـا إلا باستخدام الوسم التالي


وسـم <map> يعني الخريطـه ..


صفحتــه

http://www.w3schools.com/tags/tag_map.asp




هذا الوسم يعطي اسم خاص للخريطة فقط .

.-.-.-.-.-.- الخواص المطلوبة .-.-.-.-.-.-


( 1 ) id

قيمتــــــــــــه\

اسم ..unique_name

أي اسم .. ( اسم فريد )


وظيفتــــــــــه \

اسم فريد خاص بالخريطة <map> لتمييزها عن غيرها من الخرائط

مثــــــــــــال \

<map id ="planetmap" name="planetmap">

هنا نحتاج إلى وسم جديد

</map>

.-.-.-.-.-.- الخواص الإختيارية .-.-.-.-.-.-

( 1 ) name

قيمتــــــــــــه\

اسم ..unique_name

أي اسم .. ( اسم فريد )


وظيفتــــــــــه \

اسم فريد خاص بالخريطة <map> لتمييزها عن غيرها من الخرائط

.-.-.-.-.-.- الخواص القياسية .-.-.-.-.-.-

dir

سبق شرحهــــــــــــــــا في درس سابــق





ملاحظـة ...

يفضـل استخدام الخاصيتين id و name سوياً

لكي تعمل الصورة الخرائطيـه على كل المتصفحـات بالشكل المطلوب ( مهم )

ويتم وضع نفس الاسم في الخاصيتين





___________




.............الأن بعد أن حددنا اسم للخريطة سوف نحتاج إلى وسم آخر وهو الوسم ..........
.........................HTML <area> tag....................

http://www.w3schools.com/tags/tag_area.asp



يحدد المناطق دخل الوسم <map>

.-.-.-.-.-.- الخواص المطلوبة .-.-.-.-.-.-

( 1 ) alt

قيمتــــه \

نص - text

وظيفتــــــــــه \

وصف مختصر للمنطقة المحددة ...


.-.-.-.-.-.- الخواص الإختيارية .-.-.-.-.-.-



(1 ) shape

قيمـــــــــــــــــــه \


rect أو rectangle

لتحديد منطقة على شكل مستطيل

circ أو circle

لتحديد منطقة على شكل دائرة

poly أو polygon

لتحديد منطقة على شكل مضلع أو عديد الأضلع



وظيفتــــــــــــــه \

يحدد شكل المنطقة المحددة



( 2 ) coords

قيمتهــــــــــــــــا

إذا كان
shape="rect"
فإن 
coords="أسفل , يمين , أعلى , يسار"

إذا كان
shape="circ"
فإن 
coords=" نصف القطر,الإحداث الصادي للمركز ,الإحداث السيني للمركز"

إذا كان
shape="poly"
فإن 
coords=" x1,y1,x2,y2,..,xn,yn "

وظيفتهــــــــــا\

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


( 3 ) href

قيمتــــــــــــــــه \

URL أي عنوان انترنت


وظيفتــــــــــه \

تحديد عنوان الصفحة التي سوف ينتقل إليها عند النقر على المنطقة المحددة .





( 4 ) nohref

قيمــــــــــــه \

true
يعني صح

أو

false
يعني خطأ


وظيفتـــــــــــــه \

إذا أردنا أن تكون هناك منطقة غير فعالة

و لا تؤدي إلى أي صفحة أخرى عند الضغط عليها

فنستخدم الخاصية nohref


ملاحظـة / لا يجب استخدامهــا







( 5 ) target

قيمـــــــــه \


_blank
_parent
_self
_top


وظيفتــــــــــــــه \

يحدد طريقة فتح الصفحة

سبق شرحة في درس الروابط




.-.-.-.-.-.- الخواص القياسية .-.-.-.-.-.-


dir

سبق شرحهــــــــــــــــا في درس سابــق



.......................................



مثال

<map id ="planetmap"     name="planetmap">
      <area   shape ="rect"    coords ="0,0,82,126"
      href ="sun.htm"   target ="_blank"     alt="Sun" />
</map>

كيف نستخدم الخريطة السابق لتعمل على الصورة .???

داخل وسم الصور ة سوف نحتاج إلى الخاصية

usemap ونضع اسم الخريطة مسبوقًا بالرمز #

مثال \

<img src ="planets.gif" width="145" height="126"
alt="Planets"  usemap ="#planetmap" />

<map id ="planetmap"  name="planetmap">

    <area shape ="rect" coords ="0,0,82,126"
    href ="sun.htm" target ="_blank"   alt="Sun" />

</map>

المثال كامل على المحرر



http://www.w3schools.com/html/tryit....ryhtml_areamap





::: مشاركات الأعضاء التي تفيد في فهم خريطة الصور :::


http://forum.ma3ali.net/showpost.php...9&postcount=28


http://forum.ma3ali.net/showpost.php...1&postcount=26


http://forum.ma3ali.net/showpost.php...9&postcount=31


http://forum.ma3ali.net/showpost.php...6&postcount=37


الجدير بالذكر ان هناك . .

هناك برامج . . تعمل كود خريطة الصور

فقط تقوم بتحميل الصورة المطلوبة،

ثم ترسم الأشكال التي تريدها عليها

كما لو كنت تستخدم برنامج الرسام،

ومن ثم تكتب عناوين الوصلات التشعبية

المطلوبة لكل من هذه الأشكال. وهكذا ببساطة

يقوم البرنامج بإيجاد الإحداثيات الخاصة بكل

شكل وإنشاء شيفرة الخريطة المطلوبة!!

أي أنك خلال دقائق معدودة تستطيع إنشاء أعقد الخرائط الصورية..









.

[ريفــــــــــــــــان]

. . .






HTML Backgrounds

http://www.w3schools.com/html/html_backgrounds.asp

LaLLaKy - عبد المجيد - ريفان



ما رأيكم بعمل خلفيات . . للصفحات

مثل . .

http://www.w3schools.com/html/tryit....html_back_good


الخلفية يمكن أن تكون لون أو صورة . .

فلنجرب عمل خلفية (لون فقط ) بواسطة الخاصية Bgcolor

للوسم <body>

تأخذ ثلاث أشكال من القيم . .

بمعنى آخر يمكن أن نعبر عن اللون الذي نريد

بثلاثة أشكال . .

إما بالرقم السداسي عشر للون ( أو مايطلق عليه بالستة عشري )

<body bgcolor="#000000">

أو بواسطة قيمة الـ RGB

<body bgcolor="rgb(0,0,0)">

أو بواسطة اسم اللون color name

<body bgcolor="black">

وكل قيم اللون هذه لا نحفظها

إنما تساعدنا البرامج والجداول في معرفة أرقام الألوان




__________



والآن فلنجرب عمل خلفية ( صورة )

باستخدام الخاصية Background

للوسم <body>

وقيمتها عبارة عن رابط الصورة المطلوبة

مثال :

<body background="http://www.w3schools.com/clouds.gif">

ملاحظة إذا كانت الصورة أصغر من الصفحة . .

ستكون مكررة حتى تملأ الصفحة كاملة




""" بعض النصائح في استخدام الصور في الخلفية """


يفضل أن تكون مناسبة للون النص عليها . .

ومناسبة للصور الأخرى الموجودة على الصفحة . .

أن تكون خفيفة الحجم كي لا تؤخر فتح الصفحة

مراعاة أن يكون تكرارها مناسباً في الخلفية . .


لا مــانـع من استخدام خاصيـة الخلفيـة مع خاصيـة اللون للخلفـيـة

المتصـفح سوف ياخذ خاصيـة الخلفيـة (الصورة ) ويترك خاصيـة اللون

ولكن في حالة عدم ظهور الصورة فيظهر اللون مكانـه

وكذلك اذا كان الزائر للصفحـة مانع ظهور الصور في متصفحـه

فسوف يظهر له اللون



_________



أمثلة

http://www.w3schools.com/html/tryit....yhtml_back_img

مثال على خلفية غير مناسبة

http://www.w3schools.com/html/tryit....ml_back_imgbad






___________



HTML Colors

http://www.w3schools.com/html/html_colors.asp

الألوان في الـ HTML




ذكرنا سابقاً أن اللون يمكن تمثيله

عن طريق أشكال ثلاثة



الـشـكل الأول :

كتابة اسم اللون ..

وهـي ليست لكل الألوان وانما لعدد معين من الألوان

مثل: اللون الاحمر red

<body text="red">

لـمـعـرفـة جميـع الألوان التي لها أسماء وماهـي أسمائهـا

أدخــل على هـذا الرابــط

http://www.w3schools.com/html/html_colornames.asp

وفي الرابط السابق لو ضغطنا على اسم اي لون

تظهر لنا صفحة تحتوي على نصوص بجميع الألوان

حتى يمكن ان نختار أي لون للنص يناسب خلفيتنا . .




الشكـل الثانـي:

rgb(x,x,x)

وهي إختصار لأسماء الألوان الأساسية باللغة الإنجليزية

وهي الأحمر ( Red )

والأخضر ( Green )

والأزرق ( Blue )

مكان الـ x يكتب قيمة اللون

مثلا :

<body bgcolor=rgb(32,0,0)  >

ولمعرفة هذه القيم :





الشكـل الثالـث :

#xxxxxx

مكـان الـ x نكتب رقم اللون بالنظام السداسي عشر

ولمعرفة هذا الرقم :




إليكم هذه الصفحة تحوي تدرجات لونية

http://www.w3schools.com/html/html_colorsfull.asp


-*-*-*-*-*-*-*-*-*-

في النهاية . . نذكر ان:


وسم <bgcolor> للون الخلفية

ووسم <background> لصورة الخلفية وخصائص النصوص

داخل الوسم <body> ،،

كلها مستنكرة في آخر إصدار من HTML

( الذي هو HTML 4 و XHTML ) ،،

رابطة الشبكة العالمية ( W3C )

قد حذفت هذه الخصائص من توصياتها ،،

ويجب استخدام لغة CSS

بدلاً منها ،،

-*-*-*-*-*-*-*-*-*-




.

[عبدالمجيد]

السلام عليكم ،،

شكراً على الشرح يا أستاذة ،،

دروس جميلة وواضحة ،،

ليتك لم تضعي اسمي فهو لا يستحق ،،

الدروس مفهومة ،،

إلا فيما يتعلق بالخرائط ،،

هذا تطبيقي للدرسين معاً ،،

واعذروني على التطبيق لأنه يفشل ،،

ما عرفت أبدع بهالدرسين <<< كأنك أبدعت باللي قبل ،،

هذا الكود :

كود PHP:

<html dir="rtl">

<head>
<title>درس الصور ( 10 )</title>
</head>

<body bgcolor="#B8CDFE">
&nbsp; <b>أفضل صورة بالعالم :)&nbsp;/</b>
<br />
<br />
<a href="http://forum.ma3ali.net">
<img src="http://forum.ma3ali.net/images/smilies/seko.gif" longdesc="http://forum .ma3ali.net" />
</a>
</body>

</html> 


الصفحة مباشرة من هنا ،،

تمنياتي للجميع بالتوفيق ،،

[ريفــــــــــــــــان]

. . .

بارك الله فيكم . . تطبيق سليم . .

. . .

[ريفــــــــــــــــان]

. . .

تطبيقي . .

عبارة عن خريطة . .

http://reevaan.googlepages.com/reevan1.html

. .

[memories]

جزاكم الله خيرا

تطبيق الدرس

[ريفــــــــــــــــان]

. . .

ما شاء الله ميموريز . .

إبداع . . وفقكِ الله . . لما يحبه ويرضاه . .

. . .

[نِسْرِينْ]

السلام عليكم

حيا هلا بفريقنا

أعتذر عن انقطاعي الفترة الماضية بسبب الظروف

لي عودة بإذن الله لقراءة الدرس

بارك الله فيييييييييكم

[شادل]

جزاكم الله خير ..

سؤال :

( 2 ) coords

كيف أعرف قيمة إحداثيات المنطقة التي أريدها بالبكسل ؟

[ريفــــــــــــــــان]

. . .

يمكنك الاستعانة ببرامج الصور مثل . . الفوتوشوب . .

بإظهار المساطر . . والشبكة . .

. . .

[twinkle]

جزاكم الله خيرا


تطبيقي

<html>

<head>
  <title></title>
</head>

<body bgcolor="#FDFDE2">
<table width="100%" align="center">
<tr>
<td  colspan="3" align="center"><h2>بسم الله الرحمن الرحيم</h2></td>
</tr>
<!---------------------------------------------------->
<tr>
<td bgcolor="#E6E699" width="50%"></td>
<!---------------------------------------------------->
<td align="center">
<img src="http://forum.ma3ali.net/images-new2/index_25.gif" alt="شبكةالمعالي ترجب بكم" usemap="#ma3ali"/>

<map id="ma3ali" name="ma3ali">
<area shape="rect" coords="11,50,110,110" href="http://forum.ma3ali.net/index.php" target="_blank" alt="إلى منتديات المعالي"/>
<area shape="circle" coords="16,125,10" href="http://forum.ma3ali.net/forumdisplay.php?f=11" target="_blank" alt="إلى ركن الحاسب الالي"/>
<area shape="circle" coords="60,125,10" href="http://forum.ma3ali.net/forumdisplay.php?f=433" target="_blank" alt="إلى فريق التعلم الذاتي"/>
<area shape="circle" coords="105,125,10" href="http://forum.ma3ali.net/showthread.php?t=353910" target="_blank" alt="إلى درس اليوم"/>
</map>
</td>
<!---------------------------------------------------->
<td bgcolor="#E6E699" width="50%"></td>
</tr>
<!---------------------------------------------------->
<tr>
<td  colspan="3" align="center"><h2>حياكم الله في موقع شبكة المعالي الإسلامية</h2>
انقر على منتصف الصورة للذهاب إلى منتديات شبكة المعالي الإسلامية
<p>انقر على الدائرة اليمنى للذهاب إلى درس اليوم</p>
<p>انقر على الدائرة الوسطى للذهاب إلى فريق التعلم الذاتي</p>
<p>انقر على الدائرة اليسرى للذهاب إلى ركن الحاسب الآلي</p>
</td>
</tr>
</table>
</body>

</html>

[محمد جبلي]

المشاركة الأصلية كتبت بواسطة twinkle جزاكم الله خيرا

ماشاء الله تبارك الله

والله أنا أنبهرت

تطبيق جدا رائع

صراحـة أنا ما اعرف اسوي الحركـة دي

لازم اتعلمها اليوم باذن الله

[محمد جبلي]

. .•°•. · Color Schemer Studio v1.15 . .•°•. .

بـرنـامج رائـع بمعنى الكلـمـة

يفيد في تنسيق ألوان الموقـع

روعــــــــه جداً وكامل باذن الله

هذا موقع البرنامج

http://www.colorschemer.com

هذا رابط التحميل

http://www.colorschemer.com/colorschemerstudio.exe

وهذا السريــل


Order Number: TEAM-CRD
Serial Number: CSS36503-75078270

لمعلومات عن البرنامج

http://www.colorschemer.com/studio_info.php

................................

[aroma]

رائع .,,

لي عودة بالتطبيق إن شاء الله,,

[محمد جبلي]

أكتشفت ان الخرائط الصوريـه

كالتي في تطبيق الاخت ريفان و ميمورز و تونكل

لاتعمـل على الفايرفوكس نهائياً

هل عندكم نفس الشي

لو مايشتغل على الفايرفوكس

فتعتبر طريقة فاشلة لتقسيم الصور

[ريفــــــــــــــــان]

. . .

twinkle

تطبيق رائع . . ودقيق ماشاء الله . .

. . .

الخرائط تعمل على الاكسبلورر . .

أما الفايرفوكس . . فلم أجرب

. . .

[twinkle]

المشاركة الأصلية كتبت بواسطة LaLLaKy أكتشفت ان الخرائط الصوريـه كالتي في تطبيق الاخت ريفان و ميمورز و تونكل لاتعمـل على الفايرفوكس نهائياً هل عندكم نفس الشي لو مايشتغل على الفايرفوكس فتعتبر طريقة فاشلة لتقسيم الصور

غريبة!!!!!

استعرضت الكود الذي كتبته على متصفح الفايرفوكس... وعملت فيها الخرائط الصورية.... واستطعت فتح الروابط الموجودة على الصورة!!!!


أي أن الخرائط الصورية عملت عندي على الفايرفوكس


أتمنى ممن يستطيع التجربة أن يعطينا نتائج تجربته

[twinkle]

المشاركة الأصلية كتبت بواسطة LaLLaKy . .•°•. · Color Schemer Studio v1.15 . .•°•. . بـرنـامج رائـع بمعنى الكلـمـة يفيد في تنسيق ألوان الموقـع روعــــــــه جداً وكامل باذن الله هذا موقع البرنامج http://www.colorschemer.com هذا رابط التحميل http://www.colorschemer.com/colorschemerstudio.exe وهذا السريــل Order Number: Z898EEGA Key:CSS34930 - 30699593 لمعلومات عن البرنامج http://www.colorschemer.com/studio_info.php ................................

جزاكم الله خيرا


جاري التحميل

[محمد جبلي]

تونكل .. عند رفع الصفحة على الانترنت لا تعمــل على الفايرفوكس

جربي تدخلي صفحة ريفان ولا ميموريز

أنا عندي ما اشتغلت

تطلع كأنها صورة عاديــة

!!

وهذي صفحتك رفعتها ع النت

http://mr.makkawi.googlepages.com/twnkle.htm

جربي أدخلي عليـهـا

صفحتك وصفحة ريفان لا تظهر الصورة نهائيا في الفايرفوكس

أما صفحة ميمورز تظهر لكن كصورة فقط

!!

[محمد جبلي]

---------------

تطبيق الاخت ريفــان أشتغل أخيراً تمام على الفايرفوكس !!!

أظن والعالم الله عندي الفايرفوكس ( تعبان)

لأنـه بعض الاحيان مايطلعلي الاكواد اللي في الشرح
ومرات يجيني مربع اسود وسط الصفحة

لكن مع هذا تطبيق ميمورز مو شغال معايا على الفايرفوكس

ياليت احد يتأكد