التخطي إلى المحتوى
شرح دورة الـ HTML للمبتدئين – الدرس العاشر
فى هذا الدرس نتعلم كيفية ادراج الصور فى لغه 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، على أن نرى باقي الخصائص في دروسنا القادمة إن شاء الله. أتمنى أن أكون قد أفدت إخواني الكرام و لو بشيء قليل.

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares