التعامل مع الصور والوصلات التشعبية في HTML

الدرس الرابع: التعامل مع الصور والوصلات التشعبية

نبذه مختصره عن الصور

علم الصور من العلوم المهمه في عالمنا اليوم وقد نشأ علم مختص بهذا الشأن يسمي علم معالجه الصور Image  processing)) ويشمل معالجه صور الفضاء وصور الأجرام وحتي الصور الطبيه متمثله في صور الأشعه حيث عن طريق هذا العلم إستطاع المعرفه بوجود مرض من عدمه قبل تمكنه وقبل ان يشعر به المريض وقبل ان يدركه الطبيب الخاص به.

وفي عالم الكمبيوتر والإنترنت يوجد عشرات الآلاف من الصور ومن هذه الأنواع  ( jpg , jpeg ,  bmp, wmf)  ويعتبر أشهرهم هما  jpg  , gif

Jpeg,Jpg

وهو إختصارلGroup Experts photographic Joint وهذا الإمتداد منتشر بكثره في الإنترنت ,وميزه هذا التنسيق تتمثل في إمكانيه ضغط الصور بنسب مختلفه عند تخزينها وبالتالي الحصول علي صور صغيره الحجم نسبيا , لكن كلما صغر حجم الملف قلت جودته

Gif

إختصار لـ Format Interchange Graphical , ويكثر إستخدامه في صفحات الإنترنت لإحتوائه علي الكثير من الصور المتحركه Animated gifs

التعامل مع الصور

لا يخلو موقع – أيا كان - من الصور ويعتبر معرفه التعامل مع الصور وكيفيه التحكم بها شيئا هام, وينحصر التعامل مع الصور ف ي كيفيه إدراجها وطريقه التحكم بمقاسها , وطريقه ومكان وضعها في الصفحه

>img src= " "  width= " "height= " "align= " " <

تلك هي الصيغه العامه لطريقه إدراج صوره

 عمل تهيئه أن المطلوب إدراج صوره                           Img: image

مصدر الصوره                                                       Src: source

للتحكم في عرض الصوره عن طريق إدخال مقاسها بين علامتي التنصيص          Width:

للتحكم في إرتفاع الصوره عن طريق إدخال مقاسها بين علامتي التنصيص            Height:

 للتحكم في محاذاه الصوره إذا كان يمينا أو يسارا أو في المنتصف                       Align:

أولا :- مصدر الصوره هو عباره عن مضعها بالنسبه للصفحه المراد وضعها فيها, فمثلا إذا كانت هناك صوره بإسم photo. Jpg وهذه الصوره موجوده علي القرص c فيكون مصدره كالآتي C:/photo.jpg

وتكتب كالآتي :-                                        <" img src =" c:/photo. jpg>

أما إذا كانت الصوره (نفس الصوره) موجوده داخل مجلد Folder)) يحمل إسم new والمجلد هذا موجود أيضا علي القرص C فيكون مصدره كالآتي        

C:/new/photo.jpg

HTML22_03

وتكتب كالأتي :-

<img.src = '' C:/new/photo.jpg''>

 

وبالنسبه لهذا المثال          

<img src = "C:/new/old/photo.jpg">

فيكون معناه ان بداخل القرص C مجلد إسمه new بداخله مجلد آخر  إسمه old يحتوي علي الصوره المراد وضعها photo.jpg

HTML23_03

وتعتبر تلك الطريقه طريقه شاقه وغير عمليه خصوصا إذا كان موقعك تريد رفعه علي الإنترنت ليأخذ مكانه  بين المواقع, لذا فهناك طريقه أخري لكن لابد من فهم الطريقه السابقه أولا بطريقه عمليه أكثر وهي تحديد مكان الصوره بالنسبه للصفحه , إليك مثال :-

HTML23_07

أنت الآن قد أنشأت صفحه وتريد إدراج الصوره بها وهذه الصفحه في مجلد new  وإسمها page3.html والصوره إسمها photo.jpg , وبفرض أيضا ان المجلد new  بداخل القرص C , والصفحه page3.html تحتوي علي الكود التالي:-

 > HTML<

>Head<   > Title< p hoto  >/ Title<    

>/Head<

>Body<

>p> paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph

>img   src = "C:/new/poto.jpg" width= "100" height ="100"alin= "left"<

>/p<

>/Body<

>/HTML<

إستبدل سطر إضافه الصوره بالآتي:-

>img src= "photo.jpg" width= "100" height="100" align= "left"<

هنا ولأن الصفحه والصوره في مكان واحد فليس من الداعي كتابه المسار بالكامل , أما إذا كانت الصره بداخل مجلد آخر old مثلا فيكون المسار كالآتي:-

>img src="old/photo.jpg" width=" 100" height= "100" align= "left"<

HTML24_03

هذا إذا كان المجلد old داخل المجلد new , لكن ما إذا كان المجلد old خارج المجلد new (بمعني آخر بجانبه)وايضا المجلد old يحتوي علي نفس الصوره.

HTML24_06

في البدايه إذا كانت الصوره بجانب المجلد new فيكون المسار كالآتي:-

>img src="../photo.jpg" width="100"height="100"aign="left"<

حيث رمز النقطتان (وليس صفرين)إلي أنهما خارج المجلد new,أما إذا كانت في المجلد old هنا يكون المسار التالي

>img sr="…/old/pho to.jpg" width="      100" height= "100" align="lift"<

يبين انه خرج من المجلد الذي يحتوي علي الصوره new) ) ودخل مجلد آخر بجانبه  old))

لاحظ: وظيفه align وإستعمل معها top , left , middle ,right  ,center  ,bottom وتابع الفرق بين كل منهم.

HTML25_03

جدير بالذكر ذكر التابع alt وهو يقوم بوضع نص بديل لحين تحميل الصوره ف المواقع البطيئه

>img src="../old/photo.jpg" width="100" height="100" align="left" alt= "the text"<

حتي تستطيع أن تري فائده alt علي جهازك نفذ الكود لكن أحذف الصفحه من موضعها حتي لا يجدها المتصفح وتري النص البديل مكانها.

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

الشاشة الإفتتاحية لإكسل

صورة
الشاشة الإفتتاحية لإكسل : المكونات الرئيسية لنافذة برنامج الأكسل § الأعمدة : كل عمود يرمز له بحرف من (IV-A) = 256 عمود وتشتمل الشاشة الواحدة علي (^) عمود ما لم تتغير مساحة الأعمدة من حجم النافذة . § السطور ( الصفوف ) تأخذ أرقاما متسلسلة من ( 1 – 55366( § الخلية تطلق علي نقطة تقاطع العمود مع السطر علي صفحة البيانات ولكل خلية عنوان مميز يتكون من إسم العمود ورقم السطر المتقاطعين (A1) . عدد الخلايا < 4 مليون خلية = ( 256 X 65536 ) § الخلية النشطة هي الخلية التي يحيط بها برواز يسمي ( مؤشر الخلية ) ويظهر عنوانها دائما في شريط المعادلة وهي الخلية التي تستقبل المخلات من لوحة المفاتيح . ويمكن إتساع الخلية من شريط الافقي وذلك بتحريك عن طريق الماوس باستمرار الضغط عليه وتركه حسب المساحة المطلوبة . § شريط العنوان يشتمل علي إسم المستند (BOOK1) ( اسم البرنامج + اسم المستند + أزرار التحكم ) § شريط أدوات التنسيق قضيب يشتمل علي أدوات تستخدم لتنفيذ عمليات توفر وقتك ويمكن من خلاله اختيار نوع الخط وحجمها – تنسيق فقرة الكتابة – الضبط الكلي لفقرة الكتابة – تغيير لون الخ
قراءة المزيد

أوامر الجافا سكريبت JavaScript

صورة
أوامر الجافا سكريبت :- الجافا سكريبت لغة تعتمد علي الكائنات البرمجية , وهو الشئ الذي يمنحها قوة في الإستخدام , لكن أين نكتب أوامر الجافا سكريبت :- 1- في منطقة الرأس ( Head) الخاصة بكود HTMl 2- في منطقة الجسم ( Body) الخاصة بكود HTML ولا قيود علي مبرمج الجافا أن يضع أوامر الجافا سكريبت في منطقة الرأس أو الجسم , لكن راعي أن أوامر الإخراج – وهي الأوامر التي من اختصاصها أن تظهر ناتج الكود البرمجي علي المتصفح – لابد وأن تكتب في منطقة الجسم (Body) أو في المكان الذي تريده أن يظهر فيه ناتج السكريبت , أما عند كتابة أمر الإخراج في منطقة الرأس (Head) فإنه يعمل علي كتابة ناتج هذا الأمر قبل البدء في أي أوامر تختص بمنطقة الجسم ( Body) . هناك ميزة أخري في الجافا سكريبت وهو أنه يمكنك كتابة كود الجافا سكريبت في ملف خارجي (كما هو الحال في CSS ) , ويكون امتداد ذلك الملف (* .Js) ,   وتكون صيغةالربط بينصفحتك وملف الجافا كالآتي :- > Script Language = " javascript" src = " موقع الملف علي الشبكة أو علي الجهاز "> > /Script> ملاحظات علي كتابة الأوامر في ا
قراءة المزيد

مسائل علي الترانزستورات MOSFET

صورة
مسائل مسألة 1 ترانزستور MOSFET من النوع المقلل (depletion) له المعطيات التالية : IDSS = 10mA; VGS,of = -4V أوجد قيم I D R DS , g m , عندما تكون V G = -2V و V G = +2V . أفرض أن الترانزستور يعمل في المنطقة الفعالة . الحل :   مسألة (2) : ترانزستور MOSFET من النوع المعزز له البارامترات التالية : V GS,th = +2v; وعند V GS يساوي (+4V) كان ID = 12mA أوجد R DS , gm, k بفرض أن الترانزستور يعمل في المنطقة الفعالة . الحل : من أجل حساب k استخدم معادلة تيار المصرف في المنطقة الفعالة : I D = k (V GS – V GS,th )2 ومن هذه المعادلة تحصل علي : ومن أجل إيجاد g m , استخدم العلاقة التالية : وعندها يمكن حساب المقاومة R DS من العلاقة : R DS = (1/gm) = 83Ω مسألة (3) : في دارة الشكل يوجد ترانزستور MOSFET قنال (n) من النوع المعزز له V GS,off = -4V , I DSS = 10mA . المقاومة R D = 1kΩ وجهد التغذية المستمر V DD = +20V . أوجد الربح (V out / V in ) . يمكن باستخدام قوانين كيرشوف وأوم الحصول علي المعادلات التالية : V DD = V DS + I DRD V DD = V D
قراءة المزيد