قلوب ساهرة
اهلا وسهلا
بكل ريئحة الفل و الياسمين الورد و الزهر
وبكل ما اجتمع المسك و الريحان و العود و العنبر
بعدد ما نبت الشجر و الورد و الزهر
بعدد ما طلع القمر
وبعدد ما نور البدر
اقول مرحبا بك في بيتك الثاني
ان شاء الله تستفيد منا ونستفيد منك
قلوب ساهرة
اهلا وسهلا
بكل ريئحة الفل و الياسمين الورد و الزهر
وبكل ما اجتمع المسك و الريحان و العود و العنبر
بعدد ما نبت الشجر و الورد و الزهر
بعدد ما طلع القمر
وبعدد ما نور البدر
اقول مرحبا بك في بيتك الثاني
ان شاء الله تستفيد منا ونستفيد منك
قلوب ساهرة
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

قلوب ساهرة

دردشة ،تعارف،فيديو ،هواتف ،العاب،عالم النت صور وعدت اقسام مميزة ورائعة تنتضر تصفحكم ومساهماتكم
 
الرئيسيةأحدث الصورالتسجيلدخول
ربما لاحض البعض من الاعضاء الكرام عمليات واسعة لتطوير وتحسين مختلف اقسام المنتدى وهذا بفتح اقسام وحذف اخرى ووضع روابط جديدة مثل قسم الفيديو وتحسين عدة اموراخرى بئضافة طونبولات ، حتى اعمق الاقسام تم التفكير فيها مثل الوجوه الضاحكة و رسائل الترحيب و اضهار التواجد و الاعضاء النشطين تم تفعيل كل هذا من اجلكم اخوتي ولأجل التمتع معنا وفي بيتكم ، واردنا ان نطفي طابع البساطة و العصرنة من اجل استعمال سهل و ممتع للجميع ، حتى قسم المشاركات تمت اجراء الكثير من التحسينات عليها ، وهذا بعد العملية الاخيرة لصبر الاراء راحتمك هدفنا
مواضيع مماثلة
المواضيع الأخيرة
» براونيز بالشوكولاته
دروس في لغةhtml Icon_minitimeالثلاثاء ديسمبر 15, 2015 8:44 am من طرف badri

» ملخص عن الفضائح العقارية لبعض المسؤولين الجزائريين
دروس في لغةhtml Icon_minitimeالخميس يونيو 18, 2015 2:11 am من طرف badri

» big farm
دروس في لغةhtml Icon_minitimeالثلاثاء يونيو 02, 2015 10:04 am من طرف badri

» أتحدى اي قائد عربي أن يقول هدا الكلام
دروس في لغةhtml Icon_minitimeالثلاثاء مايو 26, 2015 8:04 am من طرف badri

» سوء الخاتمة الموت اثناء ممارسة الفعل المخل بالحياء
دروس في لغةhtml Icon_minitimeالجمعة مايو 22, 2015 10:58 pm من طرف badri

» الاختلاط في الادارة
دروس في لغةhtml Icon_minitimeالجمعة مايو 22, 2015 10:57 pm من طرف badri

» 10 أسباب لتقدّم اليابان
دروس في لغةhtml Icon_minitimeالجمعة مايو 22, 2015 11:12 am من طرف badri

» موظفة بنك في السعودية تتصل بزبون فكانت المفاجأة كبيرة
دروس في لغةhtml Icon_minitimeالجمعة مايو 22, 2015 9:46 am من طرف badri

» خطاب الراحل هواري بومدين لسنة 2013
دروس في لغةhtml Icon_minitimeالإثنين أبريل 27, 2015 6:52 am من طرف badri

تسجيل صفحاتك المفضلة في مواقع خارجية
تسجيل صفحاتك المفضلة في مواقع خارجية reddit      

قم بحفض و مشاطرة الرابط قلوب ساهرة على موقع حفض الصفحات

قم بحفض و مشاطرة الرابط قلوب ساهرة على موقع حفض الصفحات
أفضل 10 أعضاء في هذا الأسبوع
لا يوجد مستخدم

 

 دروس في لغةhtml

اذهب الى الأسفل 
كاتب الموضوعرسالة
البروفسور

البروفسور


عدد المساهمات : 172
تاريخ التسجيل : 20/01/2011
العمر : 50

دروس في لغةhtml Empty
مُساهمةموضوع: دروس في لغةhtml   دروس في لغةhtml Icon_minitimeالإثنين يناير 24, 2011 7:19 am

درس كيفية اضافة – ادراج صورة فى صفحة html – التحكم فى الصور – الدرس الحادى عشر

السلام عليكم ورحمة الله وبركاته
فى هذا الدرس ان شاء الله سوف نتعلم كيف نضيف صورة فى صفحة HTML ونتعلم ايضا كيف نحدد المساحة التى تكون بها الصورة واتجاه الصورة وكيفية اضافة حدود للصورة
كيفية اضافة – ادراج صورة فى صفحة HTML

يمكننا ادراج صورة فى صفحة HTML باستخدام الوسم img وهو فى نفسه وسم البداية والاغلاق ا انها من الاوسمه التى لا تحتاج لاغلاها اى تكتب الوسم فى البدايه ولا تنهيه بنفس الوسم مع اضافة /


هنا استخدمنا الوسم img لاخبار المتصفح اننا سوف ندرج صورة
واستخدمنا العنصر src وهو اختصار لـ source لنخبر المتصفح برابط الصورة – عنوان الصورة
وستظهر بهذا الشكل

هنا قمنا باضافة رابط الصورة كامل ويمكننا ان نضيف رابط الصورة فقط اذا كانت الصورة على موقعنا او على جهازنا
فاذا كانت الصورة فى نفس الملف مع صفحة HTML سنكتب اسم الصورة فقط مثل


واذا كانت بداخل ملف بجانب صفحة HTML سنكتب اسم الملف ثم اسم الصورة مثل الروابط تماما كما شرحناها فى الدرس السابق ( يمكنك مراجعته )
كيفية اضافة وصف بديل للصورة فى لغة HTML

يمكنك اضافة وصف بديل للصورة باستخدام العنصر alt

اذا لم تظهر الصورة سترى النص البديل مكتوب على الصورة وايضا ستراه اذا وقفت بمؤشر الفأرة على الصورة
هذا هو الوصف البديل

وهذا الوصف مفيد جدا لارشفة الصور فى محركات البحث
كيفية اضافة عنوان للصورة فى لغة HTML

يمكنك اضافة عنوان للصورة باستخدام العنصر title
وهذا مثال على ذلك

نلاحظ ان استخدام title مثل alt تماما ولكن alt افضل لارشفة الصور فى محركات البحث بشكل افضل وايضا تظهر النص البديل اذا لم تحمل الصورة
كيفية التحكم فى عرض وارتفاع الصورة ( مساحة الصورة ) فى لغة HTML

يمكننا التحكم فى عرض وارتفاع الصورة باستخدام العناصر width للعرض و height للاراتفاع

هنا قمنا بضبط عرض الصورة 200 بيكسل والارتفاع مثلها وتكون النتيجة كالتالى

راينا الان كيف ظهرت الصورة بشكل اصغر وطبعا يمكنك تغيير الطول والعرض كما تشاء
ولكن هذا التغيير فى مساحة الصورة لا يقلل من حجمها ولا يسرع من تحميلها فى المتصفح فى كلتا الحالتين ستاخذ نفس الوقت فى التحميل ولكنك يمكنك ان تستخدم هذه الخاصية لضبط الصورة مع تصميمك ولكى لا تظهر الصور بشكل عشوائى وتجعل شكل التصميم ليس جيدا واذا لم تظهر الصورة سيكون محدد مكانها بنفس المساحة التى قمت بتحديدها
كيفية اضافة حدود للصورة فى لغة HTML

يمكننا اضافة حدود للصورة باستخدام العنصر border
مثال على ذلك

قمنا هنا باعطاء قيمة border 5 بيكسل اى ان حجم الحدود ستكون 5 بيكسل
كيفية الفصل بين الكلام والصورة بمسافة ( هوامش الصورة ) فى لغة HTML

نستخدم فى هذا العنصرين التاليين
VSPACE: لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.
HSPACE: لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.
وهذا مثال

قمنا هنا باعطاء القيمة لكل من vspace و hspace 50 بيكسل لكى تظهر المسافة بشكل واضح
كيفية تحديد محاذاة الصورة فى لغة HTML

يمكننا تحديد محاذاة الصورة الى اعلى او اسفل او يمين او يسار بواسطة الوسم align
مع اضافة القيم التالية له
left : محاذاة الصورة الى اليسار
right : محاذاة الصورة الى اليمين
middle : محاذاة الصورة فى المنتصف
top : محاذاة الصورة الى الاعلى
bottom : محاذاة الصورة الى الاسفل

فى كل هذه الامثله قمنا باستخدام كل عنصر على حدا
يمكنك استخدام اكثر من عنصر للتحكم فى الصور اى انك يمكنك ضبط الطول والعرض واضافة حدود للصورة وضبط محاذاة الصورة واضافة وصف تفصيلى كل هذا معا فى صورة واحده

وبهذا نكون قد انتهينا من هذا الدرس بحمد الله وفى الدرس القادم سوف نتعلم كيف نضيف رابط على الصورة وكيف يمكننا ان نضيف رابط لصورة على صورة اخرى وكيف نضيف عدة روابط على صورة واحده
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
دروس في لغةhtml
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
»  دروس في لغةhtml
» دروس في لغةhtml
» دروس في لغةhtml

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
قلوب ساهرة :: يوميات المنتدى :: ثقافة وادب-
انتقل الى: