دليل المعهد | طريقة الدراسة| التأصيل العلمي| فريق العمل

العودة   معهد آفاق التيسير للتعليم عن بعد > الأقسام العامة > المنتديات > المنتدى التقني > دورة أسس (html)

موضوع مغلق
 
أدوات الموضوع إبحث في الموضوع انواع عرض الموضوع
  #1  
قديم 6 ذو الحجة 1433هـ/21-10-2012م, 07:41 AM
سامية السلفية سامية السلفية غير متواجد حالياً
برنامج الإعداد العلمي - المتابعة الذاتية
 
تاريخ التسجيل: Apr 2011
المشاركات: 2,007
Lightbulb (5) الدرس الخامس: الصور

بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله

الدرس الخامس
في هذا الدرس سنتعرف إن شاء الله على الصور والرسومات وما يتعلق بالتعامل معها، بالإضافة إلى التعريف بأنواع الملفات الرسومية الدارجة في الإنترنت.
تحدثنا في درس سابق إضافة خلفيات للصفحات، أما إدراج الصور ضمن الصفحات نفسها فهو أمر آخر.

نبدأ مستعينين بالله
الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو </ img> وهو وسم مفرد. (ولا يختص بمتصفح معين بل هو عام لجميع المتصفحات)
لكن هذا لا يكفي لإدراج صورة؛ لأنه يجب أن نحدد الصورة التي نريدها. لذلك نضيف له خاصية src لتحديد موقع واسم الصورة.
مثال:
كود بلغة HTML:
 <img src="image.jpg" />


هذه الصيغة يفترض أن الصورة وملف صفحة html التي نعمل عليها متواجدان في نفس المكان أو في نفس المجلد.

قد يقال ماذا لو كانت الصورة في مكان أو مجلد آخر ؟
حالتان:
أن تكون الصورة في مجلد آخر
أن تكون الصورة على الإنترنت.

1- فإذا كانت لصورة موجودة في مجلد آخر :
نقوم في هذه الحالة بكتابة عنوان الصورة. وهناك طريقتين لذلك:

أولا: أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به ملف html ، أي أن مجلد الصور يجاور ملف html الشكل التالي:

نقرتين لعرض الصورة في صفحة مستقلة

ثانيا: ملف html موجوداً في مجلد ما وتكون الصورة موجودة في مجلد آخر بنفس المستوى. أي أنهما مجلد الصور يجاور مجلد ملف html وليس متفرع عنه.

نقرتين لعرض الصورة في صفحة مستقلة

وفي هذه الحالة نكتب .. نقطتين، تعني: انتقل للمجلد الأكبر (الذي يحوي مجلد الصورimges ومجلد ملف صفحة الويب htmlfiles) لتوجيه المتصفح للخروج من المجلد الحالي (حيث يوجد ملف html) ومن ثم الدخول إلى المجلد images .

مثال:
ملف اسمه afaq.html في مجلد web
وملف صورة في مجلد webPictures
والمجلدين :
web و webPictures

في مجلد أكبر ، يعني أنهما في نفس المستوى.
عند استخدام صورة من المجلد webPictures في الملف afaq.html نكتب التالي:

كود بلغة HTML:
<img src=../webPictures/img.gif />

ملاحظة:
عند حفظ صفحة html من موقع ما على النت ، نلاحظ أن الصور وبقية محتويات الصفحة (ملفات جافا سكريب وغيرها) يتم حفظها في مجلد واحد


2- أما إذا كانت الصورة على أحد مواقع الانترنت. في هذه الحالة نقوم بكتابة عنوان ملف الصورة على ذلك الموقع.
مثال:
كود بلغة HTML:
<img src="http://www.rofof.com/img/6relth25.jpg"/>


تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

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

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

إن الأبعاد الأساسية لهذه الصورة هي 363×300 بيكسل pixel ، وكما نلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك يمكن التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟ بإضافة الخصائص height, width متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين.

كود بلغة HTML:
<img src="http://www.afaqattaiseer.com/vb/uploaded/2620_11344349027.gif"  height="163" width="100" />
الخاصية التالية : هي alt
فيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ :
- عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح.
- وفي الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.

كود بلغة HTML:
<img src="http://www.afaqattaiseer.com/vb/uploaded/2620_11344349027.gif"   alt="green tree"/>

ولإدراج صورة ضمن فقرة نستخدم الخاصية align؛ لتحديد موقع النص بالنسبة الصورة، وتأخذ القيم:
bottom, top,
middle, left, right

نقرتين لعرض الصورة في صفحة مستقلة

الحالة الإفتراضية: عندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة الحافة السفلى bottom لها. وتمثلها القيمة التالية

كود بلغة HTML:
<img src="btm.jpg" align="bottom" />

top وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها.
كود بلغة HTML:
<img src="btm.jpg" align="top" />

middle أما عند تحديد هذه القيمة فإن السطر الأول من النص يقع بمحاذاة منتصف الصورة. كذلك فإن باقي النص يمتد أسفلها.

نقرتين لعرض الصورة في صفحة مستقلة

كود بلغة HTML:
 <img src="btm.jpg" align="middle" />

left هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.

كود بلغة HTML:
 <img src="btm.jpg" align="left" />

right أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.

كود بلغة HTML:
<img src="btm.jpg" align="right" />

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

مثال:


نقرتين لعرض الصورة في صفحة مستقلة


كود بلغة HTML:
<img src="books.jpg" align="right" vspace="20" hspace="20" />

النتيجة:
تم إدارج الصورة السابقة مع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (لنقارن بين هذا الإطار والإطار السابق، ولاحظ المسافة بين الصورة والنص المرافق لها)

الخاصية border
ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. والقيمة الإفتراضية له للإطار هي 0 أي لا يوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:


نقرتين لعرض الصورة في صفحة مستقلة


كود بلغة HTML:
 <img src="books.jpg" border="5" />


تنبيه هام:
اختيار الصور:

"قَالَ مُسْلِمٌ: قَرَأْتُ عَلَى نَصْرِ بْنِ عَلِيٍّ الْجَهْضَمِيِّ، عَنْ عَبْدِ الْأَعْلَى بْنِ عَبْدِ الْأَعْلَى، حَدَّثَنَا يَحْيَى بْنُ أَبِي إِسْحَاقَ، عَنْ سَعِيدِ بْنِ أَبِي الْحَسَنِ، قَالَ: جَاءَ رَجُلٌ إِلَى ابْنِ عَبَّاسٍ، فَقَالَ: إِنِّي رَجُلٌ أُصَوِّرُ هَذِهِ الصُّوَرَ، فَأَفْتِنِي فِيهَا، فَقَالَ لَهُ: ادْنُ مِنِّي، فَدَنَا مِنْهُ، ثُمَّ قَالَ: ادْنُ مِنِّي، فَدَنَا حَتَّى وَضَعَ يَدَهُ عَلَى رَأْسِهِ، قَالَ: أُنَبِّئُكَ بِمَا سَمِعْتُ مِنْ رَسُولِ اللهِ صَلَّى اللهُ عَلَيْهِ وَسَلَّمَ، سَمِعْتُ رَسُولَ اللهِ صَلَّى اللهُ عَلَيْهِ وَسَلَّمَ يَقُولُ: «كُلُّ مُصَوِّرٍ فِي النَّارِ، يَجْعَلُ لَهُ، بِكُلِّ صُورَةٍ صَوَّرَهَا، نَفْسًا فَتُعَذِّبُهُ فِي جَهَنَّمَ» وقَالَ: «إِنْ كُنْتَ لَا بُدَّ فَاعِلًا، فَاصْنَعِ الشَّجَرَ وَمَا لَا نَفْسَ لَهُ»، فَأَقَرَّ بِهِ نَصْرُ بْنُ عَلِيٍّ"
هناك موسوعات كثيرة لصور نباتات وأزهار وجبال وحشرات وغيرها، يمكن البحث عنها باستخدام محركات البحث.

* هنال العديد من أنواع الملفات الرسومية ، تختلف من حيث الدقة وعدد الألوان والحجم التخزيني، لكننا سنتحدث عن 3 أنواع منها:

أولاً: jpg, jpeg
إختصار لِ joint photographic experts group.
يدعم صوراً بعيار 24 بت (أي 1.6 مليون لون).
يتميز بإمكانية ضغط الصور بنسب مختلفة عند التخزين(بالكيلوبايتات وليس أبعاد الصورة) فتكون النتيجة صور صغيرة الحجم نسبياً.
لكن كلما إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح.
الحركة : لا ، الشفافية : لا

ثانيًا: gif
إختصار لِ graphical interchange format.
8 بت وأقصى عدد للألوان هو 265 لون.
أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق jpg.
ينفرد بالقدرة على تخزين صور بخلفيات شفافة transparent images وصور متحركة animated gifs
الحركة : نعم ، الشفافية : نعم

ثالثا: png

اختصار لـ portable network graphics
24 بت وأقصى عدد للألوان هو 48 لون.
الحركة : نعم ، الشفافية : نعم

الخلاصة:

jpg= صور حقيقية ذات عدد كبير من الألوان، وذات أبعاد كبيرة
png /gif= صور قليلة الألوان وصغيرة الأبعاد مثل الأزرار

هذه الأنواع من مجموعة bitmapped image أو رسوميات الرستر والمجموعة الأخرى vector image ومنها psو tif
والفرق بين المجموعتين يتضح عند تكبير حجم الصورة:


نقرتين لعرض الصورة في صفحة مستقلة

وحدة البيكسل pixel :
وهي اختصار لِ picture element. إذا كانت شاشتك بإستبانة/دقة 640×480 فهذا يعني أنها مقسمة (نظرياً) إلى شبكة من 640 عمود و480 سطر، وكل خلية من هذه الشبكة تمثل بيكسل وبالطبع كلما زادت الإستبانة resolution كلما صغر حجم وحدة البيكسل.

رموز خاصة:


تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها


الواجب التطبيقي (7):
- إدراج صورة إلى صفحة ويب باستخدام الوسم <img>
- مع استخدام الخاصية alt
- مراعاة موضع النص من الصورة ، وذلك باستخدام الخاصية align و vspace وhspace.

وفقكم الله وزادكم الله علما نافعا


الحمدلله
اللهم صل وسلم على نبيك ورسولك محمد وعلى آله وصحبه ومن تبعهم بإحسان إلى يوم الدين.

موضوع مغلق

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
5, الدرس

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع


الساعة الآن 07:55 PM


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir