تعليم HTML | الدرس التاسع  | الصور

في عالم الكمبيوتر والإنترنت يوجد العديد والعديد من إمتدادات الصور ولعلّ أشهرها (jpg - gif -JPEG , TIFF أو CCDRaw)

ويعتبر jpg من اشهر الامتدادات وهو اختصار لـ Joint Photographic Experts Group ويتميز هذا الامتداد بأنه  يضغط الصور بنسب مختلفة عند تخزينها وبالتالي فتحصل علي صور بحجم صغيـر.
 

Gif إختصارا لكلمة Graphical Interchange Format ويكثُر إستخدامه في صفحات الإنترنت لإحتوائه علي الكثير من الصور المتحركة Animated Gifs .

                                     ==========================================

يمكنك ادراج اصور فى صفحه الـ html عن طريق الوسم img  إختصار لكلمة (IMAGE )وهو وسم مفرد أى (لا يحتاج لوسم اغلاق) ولكن هذا لايكفى لإدراج صور حيث ان هذا الوسم  يحتاج الى خاصيه مهمه  لكى يعمل بشكل سليم ألا وهى src .

وكود إدراج الصورة

<"img src="images.gif>

تلك هي الصيغة العامة لإدراج صورة ما....ويفسر الكود كالتالى:-

(عمل تهيئه لإدراج الصورة)Img:Image

                        (مصدر الصورة اى الأسم المحفوظه به الصورة على جهازك الخاص)Src:Source

(اى بعنى ان الصورة اسمهاimages وامتدادها images.gif (gif

 الخواص الأساسيه للصورة:-

عندما نقوم بإدراج صورة ضمن فقرة فتظهر  حسب ترتيب وجودها  في الفقرة  كأي كلمة أو عبارة عاديه. فمن الخصائص التى بمكننا استخدامها ALIGN لتحديد محاذاة الصورة مع النص المرافق لها أو لتحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم:(BOTTOM- TOP- MIDDLE- LEFT- RIGHT )  وتكتب فى الكود كالتالى
 

IMG SRC="image.jpg" ALIGN="TOP">‎>

<"IMG SRC="image.jpg" ALIGN="BOTTOM>

<"IMG SRC="image.jpg" ALIGN="MIDDLE>

IMG SRC="image.jpg" ALIGN="RIGHT">‎>

IMG SRC="image.jpg" ALIGN="LEFT">‎>

 ونستطيع ايضا استخدام خاصيه اخرى مع الصور والرسوم ألا وهى BORDER اى اضافه اطار للصورة المراد عرضها على صفحه الويب الخاصه بك  وسبق ان تطرقنا اليها فى الدرس الثامن وتكتب كالتالى :-

   <"IMG SRC="image.jpg" align="top" BORDER="5>

 خاصية alt  تستخدم لتعطي وصفاً بديلاً للصورة، إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة وتطتب كالتالى 


<" صورة مدرجه بلغهimg src="images/HTML.jpg" alt="HTML>

ولإدراج أي صورة ينبغي معرفة مصدرها أي مكان الصورة في جهازك
مثلا 
إذا كانت محفوظة في ملف اسمه minds وبإسم Pic1.jpg فيكون مصدرها minds/Pic1.jpg
وتُكتب كالآتي بين علامتي التنصيص

<img src="minds/Pic1.jpg">

وإذا كانت مثلا موجودة بداخل مجلد بإسم Images وهذا المجلد في  D فيكون مصدرها كالآتي

D:/Images/Pic1.jpg 

وتُكتب كالآتي بين علامتي التنصيص

<img src="D:/Images/Pic1.jpg"> 

ولكن من الافضل  عند عمل صفحه ويب خاصه بك ولكت تتلاشي كل  هذة  المتاعب اتبع الاتى

 (أنت الآن قد أنشأت صفحة مثلا بإسم minds.html وتريد إدراج صورة .. والصفحة موجودة في مجلد New بداخل القرص D وكذلك الصورة وإسم الصورة min2.jpg)

فهنا تكون كتابه الاكواد بطريقه سريعه لان محتويات موقعك فى مجلد واحد أى مجلد واحد فيكت الكود كالتالى

<img src="D:/new/min2.jpg"> 

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

تعليم HTML | الدرس الحادي عشر | الوصلات التشعبية

الوصلات التشعبية links

التي تمثل حلقات الوصل بين الملايين من مواقع الانترنت أو الشبكة العنكبوتية , في هذا الدرس إن شاء الله سنتعلم كيفية إدراج الوصلات التشعبية   من  الممكن ان تكون الوصله المراد ادراجها فى صفحتك :-

• منها أن تكون الوصلة لموقع آخر

• ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى الصفحه على سبيل المثل)

• أو أن تكون وصلة لعنوان بريد إلكتروني e-mail 

• أو أن تكون لصفحة أخرى داخل الموقع نفسه.

الوسم الأساسي(tag) لإدراج الوصلات التشعبية هو:- <a> ... </a> وهى أختصار لكلمة anchor وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية HREF وهى التى من خلالها  نحددالموقع الذى نريد الدلالة عليه و يجب ان يكتب عنوان الموقع كامل ,و هي إختصار لكلمة Hypertext REFerence .

 وهذة هى الصيغه الاساسيه لادراج الوصله التشعبية 

<a/>الصفحه الريئسيه<"a  href ="SYRIAN GENIUS PAGE.html>

    #      فى حالة أن  تكون الوصله لموقع اخر فيكون هذا الوسم    

" يدرج حينما تكون الصفحه المراد وصلها بصفحتك صفحه اخرى" تحمل اسم SYRIAN GENIUS , فتظهر لك فى التطبيق كالتالى:-

SYRIAN GENIUS

    #    كيف يمكن ادراج وصلة تشعبية لمكان آخر في نفس الصفحة ؟    

فمن اجل ذلك يجب تسمية و تعريف هذا المكان بأسم معين لنستخدمة فى كتابة الوصلة و هنا نستخدم الخاصية name

مثال:- وليكن المكان المراد الانتقال اليه فى اعلى الصفحه فيكتب الكود كالتالى:

<"a name="top>

<center>

<a/>اضغط لأسفل<" a href="#top>

<center/>

    #    لتكن الوصلة المراد ادراجها فى صفحتك لعنوان بريدالألكترونى e-mail  

تكتب بنفس الكود السابق الخاص الوصلات ا لتشعبية . وهو <a href> </a> .. ولكن مع إضافة خاصية الإيميل وهي mailto . بعد الكود مباشرة .. وسيكون بهذا الشكل . 

<a href ="MAILTO: SYRGENIUS@Gmail.com"> contact us < /a>

    الوصلة التشعبيه  فى صفحه اخرى لنفس الموقع الخاص بك     #    

(سواء كانت (سواء كانت صورة او نص ،فمن الممكن ان تكون هذة الوصله تربط الصفحه الحاليه  بالصفحه الرئيسية للموقع 

فيكون الكود  SYRIAN GENIUSمثال وليكن ان الصفحة الرئيسية لموقعك الالكترونى هى

<a href="SYRIAN GENIUS.html">Main Page< /a>   

   

           !    اذا كنت تريد ادراج صورة لعمل الربط بها لصفحه اخرى فهنا يكون الكود المراد كتابته  

<a href ="http://www. google.com"><IMG SRC="logo.gif" BORDER="0"></a>

    عند ادراج الصورة المراد اظهرها يمكنك عمل التنسيقات عليها كما وضحنا بالدرس العاشر فيما سبق
     فقط للعلم
     لإنتقال إلى موقع ويب نكتب كلمة http :
 وهو بروتوكول مستخدم في الاتصال بهذا الموقع(بروتوكول نقل  النصوص المتشعبة hypertext transfer protocol )

•         وعند كتابة عنوان email نستخدم كلمة mailto قبل العنوان. 
•         وهناك بروتوكول خاص لنقل الملفات يدعى ftp (file transfer protocol)‎. 

                                                                         سيكون هذا نهاية درسنا ا ليوم ..