دعونا نتعلم كيف نرفع صورة
سأبحث في قوقل عن صورة واحفظها على سطح المكتب
وسأكتب معها عبارة لتظهر على صفحة الويب عندما افتح ملف المفكرة.
نفتح البرنامج الذي سنحرر عليه , مثلا : المفكرة
نكتب الوسم الاساسي
لوضع الصورة نستخدم وسم img وهو اختصار لكلمة image والتي تعني (صورة)
نوع الوسم : أحادي , أي ليس له وسم إغلاق.
لنجلب الصورة من المكان الذي حفظناها عليه يجب أن نستخدم سمة src وهي اختصار لكمة source والتي تعني ( مصدر )
طريقة الاستخدام :
نستخدمه داخل وسم الجسم
يجب أن ننسخ اسم الصورة بالضبط ونضعه داخل وسم الصورة . مثلا:
سأكتب مع الصورة عبارة باستخدام وسم h الخاص بكتابة العناوين .
هذا هو الكود :
ثم سأذهب إليه واضغط كلك يمين وفتح باستخدام ( اختر أي متصفح) مثلا سافتحه بالفايرفوكس
هذا هو الملف الذي طبقت عليه : photoA.html
النتيجة :
طيب ! كيف أجعل النص والصورة بجوار بعضهما وتكون الصورة إلى جهة اليمين ؟
باستخدام سمة نمط=" : "
سأبحث في قوقل عن صورة واحفظها على سطح المكتب
وسأكتب معها عبارة لتظهر على صفحة الويب عندما افتح ملف المفكرة.
نفتح البرنامج الذي سنحرر عليه , مثلا : المفكرة
نكتب الوسم الاساسي
لوضع الصورة نستخدم وسم img وهو اختصار لكلمة image والتي تعني (صورة)
نوع الوسم : أحادي , أي ليس له وسم إغلاق.
لنجلب الصورة من المكان الذي حفظناها عليه يجب أن نستخدم سمة src وهي اختصار لكمة source والتي تعني ( مصدر )
طريقة الاستخدام :
نستخدمه داخل وسم الجسم
يجب أن ننسخ اسم الصورة بالضبط ونضعه داخل وسم الصورة . مثلا:
<img src="nature.jpg">
سأكتب مع الصورة عبارة باستخدام وسم h الخاص بكتابة العناوين .
هذا هو الكود :
<!DOCTYPE HTML>
<html dir="rtl">
<head> <title> </title> <head>
<body>
<img src="nature.jpg">
<h2> كل الأشياء ترحل ولا تعــــود إلا الدعاء يرحل بالرجاء ويعـود بالعطاء </h2>
</body>
</html>
ساحفظ ملف المفكرة باسم photoA.html<html dir="rtl">
<head> <title> </title> <head>
<body>
<img src="nature.jpg">
<h2> كل الأشياء ترحل ولا تعــــود إلا الدعاء يرحل بالرجاء ويعـود بالعطاء </h2>
</body>
</html>
ثم سأذهب إليه واضغط كلك يمين وفتح باستخدام ( اختر أي متصفح) مثلا سافتحه بالفايرفوكس
هذا هو الملف الذي طبقت عليه : photoA.html
النتيجة :
طيب ! كيف أجعل النص والصورة بجوار بعضهما وتكون الصورة إلى جهة اليمين ؟
باستخدام سمة نمط=" : "
style="float: right"
طبعا نضيف السمة داخل وسم الصورة هكذا.
<img src="nature.jpg" style="float: right">
النتيجة :
ليست هناك تعليقات:
إرسال تعليق