صمم موقعك الإلكتروني سريعاً إدراج الصور - الدرس الرابع

يوليو 22, 2020

إدراج الصور

في الدرس السابق تعلمنا خصائص وسم الخطوط font وقد طرحنا عليكم سؤال عن كيفية تصميم شعار موقع Google واليكم الشيفرة الخاصة بذلك:

لاحظ هنا انا بين كل وسم font والأخر هناك أسطر في الشيفرة لكن عند تشغيل الملف على متصفح الإنترنت لا تترجم هذا الأسطر لشيء وذلك لأن المتصفح يفهم الأوامر بناءاً على الشيفره المتكونة من أوسمة وخصائصها وكذلك الرموز و وسم السطر الجديد هي <p> و <br> كما أسلفنا في الدرس السابق لكن كيف لنا أن نخلق مسافه بين الكلمات التي نريد إضهارها على المتصفح مثال لو اردنا ان نبني صفحة تحتوي النص التالي:

مهما حاولنا أن نضع مسافة داخل الشيفرة عن طريق لوحة المفاتيح لن تسطيع أن نُفهم متصفح الإنترنت ذلك والحل؟

الرمز ;nbsp& هذا الرمز يعني خلق مسافه واحده بين الكلمات أو الإشارات وما إلى ذلك لاحظ الشيفرة:

لاحظ هنا أننا اوجدنا 6 مسافات بين "المسافة هنا" و "هذا جيد"

هل هناك رموز أو ايموجن أخرى في لغة HTML ؟

الجواب نعم وهذه أهمها:

1- ;nbsp& للمسافة

2- ;gt& إشارة الأكبر>

3- ;lt& إشارة الأصغر<

4- ;copy& إشارة حقوق الطبع والنشر©

5- ;#128512& وجة مبتسم 😀

6- ;#128525& قم بتجريها لتعرف

لاحظ أن أغلب الرموز تبدأ بإشارة & وتنتهي بالفاصلة المنقوطه تتبع ذلك عند كتابتلك للشيفرة، لكن يمكننا أن نجعل لغة HTML نفهم المسافات والاسطر من خلال لوحة المفاتيح وذلك عن طريق وضع النصوص بين بداية ونهاية الوسم <pre> لاحظ الصورة:

إدراج الصور

هنالك وسم لكي ندرج صورة في موقعنا وهو <img> وهو وسم بداية فقط

ولهذا الوسم عدة خصائص هي:

1- خاصية src وهذه الخاصية تحدد الصورة التي نريد أن نرفعها على الموقع ويمكنك أن ترفع صورة في نفس المجلد من خلال وضع إسم الصورة كقيمه داخل هذا الخاصة متبوعه بالأمتداد للصورة أما اذا كانت الصورة في مجلد أخر فعلينا أن نسبق الصورة بالموقع او العنوان الكامل لها من المجلد الأخر كما شرحنا هذا في الدرس الثاني خاصية background وهي من خصائص الجسم.

2- خاصية عرض الصورة width ويمكننا أن نستخدم قيم مئوية مثل 25% من الصفحة وبالتالي يصبح عرض الصورة بعرض ربع الصفحة وكذلك يمكننا أن نستخدم نظام البكسل مثل 200px وهنا يمكننا أن نضيف إشارة px بعد الرقم ويمكننا أن لا نضيفها لأنها تلقائية

3- خاصية طول الصورة height وتأخذ نفس أنواع القيم في عرض الصورة بنظام المئوي ونظام البكسل

4- خاصية align وهي خاصية تحدد محاذاة أي نص بجانب الصورة وتأخذ القيم (top, middle, buttom) أي النص المجاور للصورة على الطرف الأعلى لها او المتوسط او الأسفل

5- خاصية alt وهي خاصية لإظهار نص يحتوي وصف لهذه الصورة عندما يقوم المستخدم بوضع المؤشر على الصورة.

تتبع الشيفرات لتفهم اكثر اّلية عمل الخصائص.

هنا قمت بتحديد إسم وإمتداد الصورة City.JPG ولأنها على نفس المجلد لم أحتاج إلى العنوان الكامل لها كما وقمت بتحديد العرض لها 200 بكسل والطول 100 بكسل ولم أحتاج إشارة px لأن نظام البكسل هو النظام التلقائي هنا.

ماذا لو إحتجت أن أضع نص بجانبها لاحظ: