ابحث فى المدونة

أحدث المواضيع

تعلم و احترف HTML فى 14 يوم

اليوم الخامس 
الصور و الرسومات

اليوم السابق الفقرات و القوائم تحدثنا عن الفقرات و القوائم اما اليوم سنتحدث عن الصور و ما يتعلق بالتعامل معها .
اقتصر حديثنا السابق عن الصور على استخدامها كخلفية للصفحة و كان ذلك فى الدرس الثانى اما ادراج الصور داخل الصفحة فهو امر مختلف تماما  

 مستعد ....... لنبدأ
لادراج صورة يستخدم الوسم IMG و تستخدم معه الخاصيةSRC لتحديد اسم وموقع الصورة المطلوبة
الصورة التالية اسمها pic و لادراجها نكتب الاتى
<IMG  SRC="pic.jpg">

 هذه الصيغة تفترض ان الصورة موجودة فى نفس المجلد الموجود به ملف HTML , وقمت باستدعاء الصورة من خلاله
و لكن ماذا اذا كانت الصورة موجودة فى مجلد اخر عندها تكون الصيغة مختلفة وهناك حالتين :
 الاولى :ان تكون الصورة موجودة فى مجلد متفرع من المجلد الذى يوجد به ملف html بالشكل التالى :
 

و عندها نقوم بكتابة اسم المجلد متبوعا بعلامة / ثم اسم الصورة 

الحالة الثانية : ان يكون ملف HTML  موجود فى مجلد ما و تكون الصورة موجودة فى مجلد اخر بنفس المستوى اى انهما مجلدين متجاوريين و ليسا متفرعين احدهما من الاخر .
وفى هذه الحالة نكتب نقطتين لتوجيه المتصفح للخروج من المجلد الحالى ثم الدخول الى المجلد images حيث توجد الصورة .
و الن الخصائص التى تتحكم فى ابعاد الصورة و هى WIDTH , HEIGHTمتبوعة بارقام تمثل العرض و الارتفاع المطلوبين 
<img src="pic.jpg" width="150" height="70">
       <img src="pic.jpg" width="100" height="80">
جرب بنفسك و شوف الاختلاف .
الخاصية التالية التى تستخدم مع IMG هى ALT وهى تستخدم كبديل عن اظهار الصور حيث يكتب نصا بديلا فى حالة عدم ظهور الصورة .
<IMG SRC="PIC.JPG " ALT="there is picture here"> 
عندما نقوم بادراج صورة ضمن فقرة فان موقع ظهورها يكون حسب ترتيبها فى الفقرة و لكن ما شكل النص الذى يليها و لهذا نستخدم الخاصية ALIGN لتحديد محاذاة الصور مع النص الذى يليها و تأخذ القيم : RIGHT , LEFT , TOP , BOTTOM , MIDDLE  
 و الان بعد ان قمنا بتحديد محاذاة الصور نحتاج الى تحديد المسافة الفاصلة بينها و بين النص الذى يجاورها و نستخدم لذلك الخصائص الاتية :
VSPACE :لتحديد المسافة العمودية الفاصلة بين النص و الحافتين العليا والسفلى للصورة
HSPACE:  لتحديد المسافة الافقية الفاصلة بين النص و الحافتين اليمنى و اليسرى للصورة .
مثال :
<IMG SRC="PIC.JPG" ALIGN="RIGHT"  VSPACE="20" HSPACE="20">
  الخاصية الاخيرة التى تستخدم مع IMG هى BORDER و وظيفتها اضافة اطار حول الصور و التحكم بسمكه و القيمة الافتراضية له هى 0 اى لا يوجد اطار حول الصورة .
مثلا لاضافة اطار سمكه 5 بيكسل نكتب الاتى:
<IMG src="pic.jpg" border="5">
 وبذلك نكون قد انتهينا من الصور و غدا نتحدث عن موضوع غاية فى الاهمية و هو الوصلات التشعبية links  

0 comments:

data: commentLabel/
Related Posts Plugin for WordPress, Blogger...