منتـــــــــــــدي اولاد راشـــــــــــــــــــــــد
عزيزي الزائر منتدي اولاد راشد في حاجة الي اعضاء نشطاء اذا كنت غير مسجل فتفضل بالتسجيل والدخول واذا كنت عضوا فاستخدم اسم العضو و كلمة المرور الخاصين بك وشكرا ادارة المنتدي

منتـــــــــــــدي اولاد راشـــــــــــــــــــــــد

حمــــــــدي وازيــــــــــــــــــد ** ** زبــــــــــــــــــد وزيـــــــــــــــــــــــود
 
الرئيسيةالرئيسية  التسجيلالتسجيل  دخولدخول  
منتدي اولاد راشد يحي الاعضاء الكرام ويتيح فرص الاشراف علي المنتدي بالتصويت مع مراعاة عدد المساهمات والمشاركات وقوة المواضيع من حيث الفكرة والمبدأ في فترة زمنية محددة تنطلق فترة نشر الاعلان الي وقت سيقرره المنتدي وبالتوفيق انشاء الله لاعضائنا الكرام
اعضاؤنا الكرام ابدا لا تتحرج في دعوة اصدقائك علي الفيس بوك للانضمام الي منتداكم العامر بكم فالهدف هو الاشهار و لا تتردد في دعوة اقربائك واصدقائك ايضا لان اهداف المنتدي الربط الثقافي بين فئات اولاد راشد المختلفة والعريضة ووفقكم الله
منتدي اولاد راشد يبث خالص الامنيات لطلاب الشهادة السودانية ولاسرهم مع التمنيات لهم بدوام التقدم ولاسرة اولاد راشد خاصة
رمضان : شهر التوبة والغفران " فمن شهد منكم الشهر فليصمه" رمضان كريم مقدما اكثر من الدعاء والاستغفار والصلاة علي النبي الكريم صلي الله عليه وسلم
مؤتمر اولاد راشد السنوي مؤتمر الجمعيات الخيرية والشبابية وملتقي اولاد راشد الجامع تحت شعار رباط " تنمية " واصلاح

شاطر | 
 

 لغة الهتميل الجذء السابع

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
واسو
المدير
المدير
avatar

الجنس : ذكر الجدي
راشدي وافتخر : 88
نقاط : 1
السمعة : 3
تاريخ التسجيل : 26/07/2009
العمر : 39

مُساهمةموضوع: لغة الهتميل الجذء السابع   الأحد 02 أغسطس 2009, 05:53

الــصــور
يمكنك في لغة HTML عرض الصور في الصفحات والتحكم في خواصها، قبل كل شيء
يجب أن تكون الصورة جاهرة للنشر على الويب، فيجب أن لا تكون ذا حجم ضخم
لأن ذلك سيؤدي إلى بطء شديد في التحميل، ويجب الحذر جيدا عند التعامل مع
الصور، لأنها تستهلك حجما كبيرا وتسبب بطءا شديدا في تحميل الصفحات، لذلك
يفضل التقليل من الصور قدر الإمكان في صفحات HTML.
لكي تستطيع عرض الصور في المستند يجب أن تكون الصورة من النوع jpg أو gif
(أنظر تجهيز الصور للنشر على الويب).
العناوين HTML
تستخدم العناوين في HTML في الكثير من الأمور، أهمها الوصلات التشعيبية
والصور، ويجب أن تعرف كيفية استخدام هذه العناوين جيدا.
هنالك نوعان من العناوين، نسبية ومطلقة، العناوين النسبية تكون بالنسبة
للعنوان الحالي، فلو كنت مثلا في صفحة http://www.microsoft.com/ie/default.asp
وقمت بعمل وصلة خاصية href لها تساوي download.html سيعرف المتصفح أن
العنوان الذي يجب الذهاب إليه هو http://www.microsoft.com/ie/download.html،
ولو كانت href تساوي download/english.html فسيتجه المتصفح إلى
http://www.microsoft.com/ie/download/english.html، أي أن المتصفح يضيف
السطر الموجود في href إلى الدليل الحالي، ويختلف الملف عن الدليل بأن
الدليل يحتوي على الشرطة الخلفية ( / ) في آخره، في كل دليل يوجد دليل
خاص، هذا الدليل الخاص يؤدي بك إلى الدليل الأب للدليل الحالي وهو الرمز
( .. ) وفي المثال السابق لو كانت href تحتوي على ../windwos.html فإن
المتصفح سيتجه إلى العنوان http://www.microsoft.com/windwos.html أي أنه
سيخرج من الدليل ie/ إلى الدليل الجذري / ، أما العناوين المطلقة فتتميز
بأنها مسبوقة باسم البروتوكول ،مثلا العنوان http://www.ayna.com/ يعتبر
عنوانا مطلقا، وليس له علاقة بالعنوان الحالي.
إدراج الصور
يتم إدراج الصور في صفحة HTML عن طريق الوسم IMG، وهو وسم مفرد ( لا
يجتاج إلى وسم إغلاق)، وهذا الوسم يحتاج إلى خاصية مهمة لكي يعمل بشكل
سليم هي src والتي نضع بها عنوان الصورة المطلوبة.
<img
src="/images/sample.gif">


توجد أيضا الخاصية width لتحديد عرض الصورة وheight لتحديد ارتفاعها،
يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها حسب المطلوب،
وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص، فيحجر
المتصفح للصورة حجما صغيرا إلى أن يحصل عليها فيجعلها بالحجم الطبيعي،
ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان
لذلك فإن الصورة الصغيرة تزيح النصوص قليلا والكبيرة تزيحها بمقدار أكبر،
فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إن يحصل المتصفح على
الصورة وإذا لم يجدها لأي سبب من الأسباب سيظل يحجر لها حجما صغيرا فقط
وبالتالي تصبح الصفحة مشوهة، لذلك ينصح دائما باستخدام خصائص الحجم في
وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي.


<img src="/images/sample.gif"


width=73 height=68><br><br>
<img
src="/images/sample.gif"


width=200 height=100>


توجد أيضا الخاصية align وهي خاصية مهمة جدا في الصور، وتنبع أهميتها من
كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة للنصوص المحيطة
بها، حيث أن الصور في HTML تعتبر جزءا من النص المحيط بها تتحرك معه،
وترتبط به، تأخذ align العديد من القيم فيما يلي سرد لها مع الشرح
والأمثلة ..
• bottom, baseline, absbottom : وهي تعرض الصورة بحيث تكون على السطر
مثل أي كلمة أخرى .
<img src="/images/sample.gif"
align="bottom">


• left : وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة
بالسطر.
<img src="/images/sample.gif"
align="left">


• middle, absmiddle : وهي تعرض الصورة في منتصف السطر.
<img src="/images/sample.gif"
align="middle">


• right : وهي تعرض الصورة على يمين الفقرة ولا يكون للصورة علاقة
بالسطر.
<img src="/images/sample.gif"
align="right">


• top, texttop : وهي تعرض أسفل السطر فيكون السطر أعلاها.
<img src="/images/sample.gif"
align="right">


توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية border ونحدد بها عرض
الإطار بالبكسل، والقيمة 0 تعني دون إطار، إذا لم تحدد قيمة للخاصية
border في وسم الصورة، فإن الصور ستظهر بدون إطار في الحالة العادية ومع
إطار إذا كانت الصورة عبارة عن وصلة، لذلك يعمد الناس إلى وضع border="0"
في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة، ويجدر
بالذكر أن لون الإطار في الوصلة الجديدة هو نفس لون النصوص في الوصلة
الجديدة وكذلك بالنسبة للقديمة.
<a
href="http://www.microsoft.com/">
<img src="/
images/sample.gif"></a><br>
<a
href="http://www.microsoft.com/">
<img src="/images/
sample.gif" border="0"></a><br>
<img src="/images/
sample.gif" border="3">


يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص
المحيطة عن طريق الخاصية hspace.
توجد أيضا خاصية alt للصور، وهي تستخدم لوصف الصورة، بحيث أن النص الذي
تضعه في الخاصية alt سيعرض بدلا من الصورة حتى إتماما تحميلها، وكذلك إذا
لم يجد المتصفح الصورة، وهذه النصوص أيضا تظهر في مربع التلميح ToolTip
عند التأشير بالفأرة على الصورة.
خرائط الصور
في بعض الأحيان تجد أن هنالك صورة عليها أكثر من بقعة ساخنة Hot Spots
بوصلات مختلفة، هذه الصور يتم تقسيمها إلى مناطق مثل الخريطة، وما يلي هو
كيفية عمل ذلك.
تتكون الخريطة الصورية من جزئين، الخريطة والصورة، حيث نقوم بتصميم
الخريطة وإعطائها إسما، ثم نكتب هذا الإسم في خاصية usemap للصورة.
في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة


فإذا إردنا تقسيم الصورة السابقة فسيكون التقسيم (الخريطة) كالتالي


أي بحيث يشير كل حزء من الأجزاء الثلاثة إلى أحد أقسام الموقع الإفتراضي،
مهمتنا الآن هي رسم الخريطة السابقة وتحديد البقع الساخنة والوصلات
عليها، ويتم ذلك باستخدام الوسم map، ونحدد إسم الخريطة بالخاصية name،
ونقوم بوضع الأشكال بين وسمي الفتح والإغلاق للوسم map، والأشكال تكون في
صورة وسوم area مفردة، نقوم بتحديد الشكل عن طريق الخاصية shape، ثم نقوم
بتحديد الوصلة بالخاصية href ونحدد إحداثيات الشكل بالخاصية coords،
ويختلفكل شكل عن الآخر بطريقة كتابة إحداثياته، والأشكال ثلاثة هي :
• circle : وهو شكل الدائرة، وتكون إحداثياته عبارة عن الإحداثي السيني
للمركز ثم الإحداثي الصادي للمركز ثم نصف القطر (x, y, radius).
• rect : وهو شكل المستطيل، وتكون إحداثياته عبارة عن الإحداثي السيني
للركن أعلى اليسار ثم الإحداثي الصادي له ثم الإحداثي السيني للركن
المقابل أدنى اليمين ثم الإحداثي الصادي له (x1, y1, x2, y2).
• poly : وهو شكل المضلع، ويمكنك باستخدامه رسم الأشكال المكونة من عدة
قطع مستقيمة، وتكون إحداثياته عبارة عن الإحداثي السيني ثم الصادي للنقطة
الأولى ثم الثانية وهكذا حسب ما تشاء من النقط (x1, y1, x2, y2, .. xn,
yn).
ويجب أن تعرف أيضا أن نقطة أعلى اليسار هي نقطة الصفر، وكلما تنزل إلى
الأسفل تزداد قيمة الإحداثي الصادي وكلما اتجهت إلى اليسار تزداد قيمة
الإحداثي السيني.
لمعرفة الإحداثيات المطلوبة نستخدم أي برنامج للرسم مثل Adobe Photoshop
أو Paint Shop Pro .
في مثالنا السابق تم حساب الإحداثيات وكانت النتيحة كالتالي :
<img src="/images/sample2.gif"
usemap="#mymap">
<map
name="mymap">
<area shape="rect"
href="http://www.jokes.com/"


coords="6,10,67,44">
<area shape="circle"
href="http://www.story.com/"


coords="121,93,27">
<area shape="poly"
href="http://www.download.com/"


coords="37,90,73,105,59,129,15,129,4,105">


</map>


ستلاحظ الآن أن الصورة مقسمة إلى عدة مناطق ساخنة كل منها يشير إلى وصلة
مختلفة، عند النقر على أحدها يظهر حوله إطار أسود، يمكنك إزاله هذا
الإطار والتحكم بسماكته بالخاصية border في الوسم shape، تستطيع أيضا أن
تحدد alt مختلف لكل قسم من الصورة باستخدام الخاصية alt في الوسم shape.
<img src="/images/sample2.gif"
usemap="#mymap" border="0">


<map name="mymap">
<area shape="rect"
href="http://www.jokes.com/"


coords="6,10,67,44"


border="0" alt="Be Happy">
<area shape="circle"
href="http://www.story.com/"


coords="121,93,27"


border="0" alt="Enjoy!">
<area shape="poly"
href="http://www.download.com/"


coords="37,90,73,105,59,129,15,129,4,105"


border="0" alt="Best Downloads">


</map>


تنظيم الـمـحتوى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://aolad-rashed.ahlamontada.com
 
لغة الهتميل الجذء السابع
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتـــــــــــــدي اولاد راشـــــــــــــــــــــــد :: منتدي البرامج :: ركن الصيانة-
انتقل الى: