المواضيع الاكثر مشاهده
12:59 م | Posted by
Eng Sara |
تعلم و احترف HTML فى 14 يوم
اليوم الخامس
الصور و الرسومات
اليوم السابق الفقرات و القوائم تحدثنا عن الفقرات و القوائم اما اليوم سنتحدث عن الصور و ما يتعلق بالتعامل معها .
اقتصر حديثنا السابق عن الصور على استخدامها كخلفية للصفحة و كان ذلك فى الدرس الثانى اما ادراج الصور داخل الصفحة فهو امر مختلف تماما
مستعد ....... لنبدأ
لادراج صورة يستخدم الوسم IMG و تستخدم معه الخاصيةSRC لتحديد اسم وموقع الصورة المطلوبة
الصورة التالية اسمها pic و لادراجها نكتب الاتى
اليوم السابق الفقرات و القوائم تحدثنا عن الفقرات و القوائم اما اليوم سنتحدث عن الصور و ما يتعلق بالتعامل معها .
اقتصر حديثنا السابق عن الصور على استخدامها كخلفية للصفحة و كان ذلك فى الدرس الثانى اما ادراج الصور داخل الصفحة فهو امر مختلف تماما
مستعد ....... لنبدأ
لادراج صورة يستخدم الوسم IMG و تستخدم معه الخاصيةSRC لتحديد اسم وموقع الصورة المطلوبة
الصورة التالية اسمها pic و لادراجها نكتب الاتى
<IMG SRC="pic.jpg">
هذه الصيغة تفترض ان الصورة موجودة فى نفس المجلد الموجود به ملف HTML , وقمت باستدعاء الصورة من خلاله
و لكن ماذا اذا كانت الصورة موجودة فى مجلد اخر عندها تكون الصيغة مختلفة وهناك حالتين :
الاولى :ان تكون الصورة موجودة فى مجلد متفرع من المجلد الذى يوجد به ملف html بالشكل التالى :
و لكن ماذا اذا كانت الصورة موجودة فى مجلد اخر عندها تكون الصيغة مختلفة وهناك حالتين :
الاولى :ان تكون الصورة موجودة فى مجلد متفرع من المجلد الذى يوجد به ملف html بالشكل التالى :
و عندها نقوم بكتابة اسم المجلد متبوعا بعلامة / ثم اسم الصورة
الحالة الثانية : ان يكون ملف HTML موجود فى مجلد ما و تكون الصورة موجودة فى مجلد اخر بنفس المستوى اى انهما مجلدين متجاوريين و ليسا متفرعين احدهما من الاخر .
وفى هذه الحالة نكتب نقطتين لتوجيه المتصفح للخروج من المجلد الحالى ثم الدخول الى المجلد images حيث توجد الصورة .
الحالة الثانية : ان يكون ملف HTML موجود فى مجلد ما و تكون الصورة موجودة فى مجلد اخر بنفس المستوى اى انهما مجلدين متجاوريين و ليسا متفرعين احدهما من الاخر .
و الن الخصائص التى تتحكم فى ابعاد الصورة و هى 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
Labels:
هندسة الاتصالات
الاشتراك في:
تعليقات الرسالة (Atom)
0 comments:
إرسال تعليق
ضع تعليقك أو أستفسارك