تعلم واحترف HTML فى 14 يوم (اليوم الخامس)

تعلم و احترف 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