بسم الله الرحمن الرحيم
وصلنا الآن الى الجزء الرابع من شرح مبادئ تصميم صفحات الإنترنت بإستخدام html و css
وحتى هذه النقطه تعلمنا :
- كيف ننشئ صفحه انترنت من الصفر ونخبر المتصفح انه سوف يتعامل مع صفحه من النوع html
- نظام التاجات والوسوم فى html
- كيف نضع نصوص وعناوين فى الصفحه
ادراج صوره فى صفحه الإنترنت
اولا: تحديد مكان الصوره
يجب تحديد مكان الصوره المراد وضعها فى الصفحه فقد تكون الصوره موجوده على موقع انترنت آخر غير الموقع الذى نقوم بتصميمه وفى هذه الحاله يجب ان نقوم بمعرفه رابط الصوره مثلا : شعار جوجل على الرابط التالى : http://www.google.com/logos/2012/abu-simbel-12-hp.jpg
او ان تكون الصوره على نفس الموقع الذى نقوم بتصميمه وفى هذه الحاله يجب ان تكون الصوره موجوده فى نفس فولدر الصفحه التى نقوم بتصميمها أو فى فولدر فرعى من الفولدر الرئيسى .. مثال فى الشرح رقم 1 قمنا بتجهيز فولدر خاص بالصور التى سنستخدمها وهو images وكان بداخل الفولدر المستخدم لوضع ملفات الـ html بداخله وهو WWW
واذا كنا سنتستخدم الصور الموجوده على نفس الموقع فتحديد مسار الصوره يتم كالتالى :
لنفترض مثلا ان الصوره التى تريد وضعها على صفحتك تسمى photo.png وهى موجوده بداخل فولدر images الذى هو بدوره موجود بداخل www والذى يحتوى على صفحات الإنترنت التى نصممها
فيكون مسار الصوره الذى يتم استخدامه هو " images/photo.png "
ثانيا : كتابه كود الصوره فى الصفحه
التاج المستخدم هو <img> وهو يختلف عن الوسوم الأخرى حيث ليس له بدايه ونهايه ولكن يكون هو نفسه البدايه والنهايه بوضع الشرطه المائله / فى نهايته
وابسط مثال له كالتالى :
<img src="لينك او مسار الصوره " />
حيث يستخدم img> لنخبر المتصفح اننا سوف نقوم بوضع صوره فى الصفحه والجزء التالى من الكود src هى اختصار لكلمه source وتعنى المصدر وتستخدم لتحديد مكان الصوره بين علامتى تنصيص "" - سواء من موقع خارجى او من داخل نفس الموقع .
ففى حاله كانت الصوره من موقع آخر مثال شعار جوجل الذى ذكرناه فى الأعلى يتم وضع رابط الصوره بين علامتى التنصيص "" بعد src :
<img src=" http://www.google.com/logos/2012/abu-simbel-12-hp.jpg " />
وفى حاله كانت الصوره من نفس الموقع الذى نصممه نضع المسار الخاص بالصوره :
<img src="images/photo.png" />
وبمجرد وضع الكود السابق فى كود الصفحه - بالطبع بين علامتى جسم الصفحه <body> </body> - تظهر الصوره فى صفحه الإنترنت بعد الحفظ والمشاهده فى المتصفح .
الأشكال المختلفه لإستخدام كود الصور :
اولا: استخدام نص بديل فى حاله عدم ظهور الصوره
فى حاله لم تظهر الصوره لاى سبب من الأسباب مثل بطئ سرعه الإنترنت أو غيره من الأسباب .. يفضل تحديد نص يظهر بدل الصوره ويتم ذلك عن طريق استخدام الرمز التالى : alt
ويكون الكود كالتالى :
<img src="مسار او رابط الصوره" alt="النص البديل الذى يظهر بدل الصوره " />
ثانيا: تحديد طول وعرض الصوره
قد تكون الصوره اكبر او اصغر من اللازم فتحتاج الى اعاده تحديد عرض وطول الصوره لكى تظهر بشكل مناسب فى الصفحه وبالتالى نستخدم الرمزين الآتيين :
width لتحديد العرض و height لتحديد الإرتفاع
ويكون الكود كالتالى :
<img src="الصوره" alt="النص البديل" width="305" height="218" />
فى هذا الكود اعتبرنا ان عرض الصوره المرغوب width هو 305 وطول أو ارتفاع الصوره height هو 218
ادراج لينك أو رابط فى صفحه الإنترنت
لكى نقوم بوضع رابط فى الصفحه نقوم اولا بتحديد لينك او رابط الصفحه التى سينتقل اليها الزائرعند الضغط على الرابط ثم ثانيا نستخدم الوسم التالى <a> وتوضع بيانات الرابط بداخل وسم البدايه نفسه وذلك بإستخدام الرمز herf ثم نكتب نص الرابط وبعد الإنتهاء نقوم بإضافه نهايه الوسم <a/> كالتالى :
<a href="url"> نص الرابط </a>
حيث يكون اللينك مكان الرمز url
مثال نريد ان نقوم بعمل رابط او لينك الى مدونه عالم سمسم فى الصفحه وعندما يضغط الزائر عليها ينتقل الى المدونه مثل هذا : ( مدونه عالم سمسم )
الكود المطلوب لعمل مثل هذا الرابط :
<a href="http://3alm-semsem.blogspot.com"> مدونه عالم سمسم </a>
وعند وضع الكود السابق بين وسمى جسم الصفحه <body> </body> نكون قد ادرجنا رابط فى صفحتنا
الأشكال المختلفه لإستخدام كود الرابط :
أولا: تحديد طريقه فتح الرابط
فى بعض الأحيان قد نريد ان نجعل الرابط او اللينك يفتح فى صفحه جديده فى المتصفح وليس نفس الصفحه
وطريقه ذلك تكون عن طريق الرمز :target="_blank" حيث كلمه target تعنى بالإنجليزيه " الهدف " :
<a href="url" target="_blank"> نص الرابط </a>
وهكذا يفتح الرابط المحدد مكان "url" فى صفحه جديده سواء كان الرابط نص او صوره
ثانيا: جعل الرابط صوره وليس نص
يمكن جعل الرابط صوره عندما يتم الضغط عليها ينتقل الزائر الى الصفحه او الموقع الهدف . مثل هذه :
كيف نقوم بذلك ؟
نحن بالفعل نعلم انه لكى يتم ادراج صوره نستخدم كود مثل هذا :
<img src="images/photo.png" />
ونعلم ايضا انه لكى يتم ادراج رابط نستخدم كود مثل هذا : <a href="url"> نص الرابط </a>
ولكى نجعل صوره ما عباره عن رابط نجمع بين الكود الأول والثانى بأن نضع الكود الخاص بالصوره بدلا من نص الرابط كالتالى :
<a href="google.com"> <img src="images/photo.png" /> </a>
وهكذا نكون قد جعلنا الصوره photo.png عباره عن رابط يؤدى الضغط عليها الى الإنتقال الى الرابط المحدد فى الكود وهو هنا موقع جوجل .
فى نهايه هذا الشرح الذى ارجو ان اكون وفقت فيه اعرض عليك تمرينا بسيطا :
حاول ترجمه او تفسير الكود التالى وتوقع كيف سيكون شكله فى المتصفح :
<a href="www.mujaz.net" target="_blank"> <img src="http://www.mujaz.net/new.png" alt="موجز نت" width="300" height="310" /> </a>
اذا احتجت للنقاش حول الكود السابق او انه لم يظهر فى المتصفح كما توقعت اكتب تعليقك وسوف نتناقش فيه سويا ..
وأيضا انتظر تعليقاتكم لأى اقتراح بخصوص الشرح او مدونه عالم سمسم ...
نلتقى بإذن الله فى الشرح القادم وكيفيه انشاء جداول داخل الصفحات
والسلام عليكم ورحمه الله وبركاته
ليست هناك تعليقات:
إرسال تعليق