دورة تعلم < html> || الدرس الثالث||

[الأخ ياسين]

السلام عليكم و رحمة إن شاء الله هذا ثاني درس لنا في الدورة

المواضيع السابقة

--------------------------------------------------
دورة تعلم < html> || الدرس الأول||
------------------------------------------------
دورة تعلم < html> || الدرس الثاني||
---------------------------------------------------
دورة تعلم < html> || الدرس الثاني|| (تابع)
---------------------------------------------------

نبدأ على بركته عز وجل

---------------------------------------------------------------------------------------------------------------------------------------------------------
نتابع مع الأكود الكتابية أنواعها و مهامها

أولا نفتح المحررر كما العادة

ثم نضع الأوسمة كما في المرة السابقة

إضغط هنا لرؤية الصورة بحجمها الطبيعي.

------------------------------------------------------------
قد رأينا في بعض الصفحات مقالات بها صور و روابط فاليوم سنتعلم كيفية إدراج صورة في مقال بواسطة الوسم

<img src="رابط الصورة" alt="وصف و جيز للصورة" />

------------------------------------------------------------
بحيث نضع رابط الصورة وهو واضح
أما الوصف فيظهرلما مرور الماوس فوق الصورة

هكذا :::



و المعاينة تظهر هكذا :::





لكن أنا أحتاج الصورة أصغر قليلا كيف يمكن تعديل أبعادها برمجيا ؟؟؟
و نتابع مع بعض::

نعدل في الوسم السابقـــ





يصبح لدينا الكود التالي::

[<img src="رابط الصورة التي تريدها في صفحتك" width="طول الصورة" height="عرض الصورة" alt="وصف أو عنوان" />

مثال::

على نفس الصورة السابقة فقط عدلنا الأبعاد



لنرى النتيجة:::



قد تعبت انا الان سنكمل غدا إن شاء الله

[الأخ ياسين]

أتمنى أن ينال الدرس إعجابكم....

[الأخ ياسين]

المشاركة الأصلية كتبت بواسطة bensfiayassin

أتمنى أن ينال الدرس إعجابكم....

لا أعتقد أن الموضوع قد نال إعجابك

[the_leader]

فعلا الدرس جميل
بارك الله فيك أخ ياسين

[the_leader]

لكن حبذا لو وضعت عنوان للدرس بحانب رابطه
دورة تعلم < html> || الدرس الثالث|| [ادراج صورة في الصفحة]

[the_leader]

أكواد css لتنسيق الصور في صفحة HTML
اسهل طريقة للتحكم في ا"هياكل أو بناءات او.." الـHTML هي طريقة الـ CSS
لتنسيق الصور في الصفحة لدينا هذا الأوامر
الحجم :بالبكسل(px) أو "سطر (em) أو نسبة مئوية(%)
---------- العرض: width
----------- الارتفاع: height
الهامش: هو الفراغ بين أطراف العنصر (الصورة) وما بجانبه من عناصر
margin: 1 2 3 4
يمكننا التحكم في الهامش على كل الجوانب بهذا الكود بالكتابة في مكان الارقام
---------- 1 : الهامش العلوي (بين الطرف العلوي للصورة وما يعلوها
---------- 2 : الهامش الأيمن (بين الطرف الأيمن للصورة وما بجانبها الأيمن
---------- 1 : الهامش السفلي (بين الطرف السفلي للصورة وما تحتها
---------- 1 : الهامش الأيسر (بين الطرف الأيسر للصورة وما بجانبها الأيسر
إذن تعديل أبعاد الصورة السابقة نكتب الكود الآتي

<style>
img {
width : 500px;
height: 300px;
margin: 0 0 0 0;
}

</style>

[الأخ ياسين]

المشاركة الأصلية كتبت بواسطة the_leader

أكواد css لتنسيق الصور في صفحة HTML
اسهل طريقة للتحكم في ا"هياكل أو بناءات او.." الـHTML هي طريقة الـ CSS
لتنسيق الصور في الصفحة لدينا هذا الأوامر
الحجم :بالبكسل(px) أو "سطر (em) أو نسبة مئوية(%)
---------- العرض: width
----------- الارتفاع: height
الهامش: هو الفراغ بين أطراف العنصر (الصورة) وما بجانبه من عناصر
margin: 1 2 3 4
يمكننا التحكم في الهامش على كل الجوانب بهذا الكود بالكتابة في مكان الارقام
---------- 1 : الهامش العلوي (بين الطرف العلوي للصورة وما يعلوها
---------- 2 : الهامش الأيمن (بين الطرف الأيمن للصورة وما بجانبها الأيمن
---------- 1 : الهامش السفلي (بين الطرف السفلي للصورة وما تحتها
---------- 1 : الهامش الأيسر (بين الطرف الأيسر للصورة وما بجانبها الأيسر
إذن تعديل أبعاد الصورة السابقة نكتب الكود الآتي

<style>
img {
width : 500px;
height: 300px;
margin: 0 0 0 0;
}

</style>

بارك الله فيك أخي

في الالوقت الحالي أنا لا أجيد انماط CSS رغم مدى المؤثرات الجمالية التي تضيفها لأني مازلت أتعلم الPhp && Html