أخي أختي الزائر(ة) أنت غير مسجلـ(ة) يمكنك مشاهدة المواضيع لكن لا يمكنك المشاركة فيها ... ندعوكم للإنضمام إلينا بالضغط هنـا

إعلانات المنتدى

::موقع نور الهدى::

:: موقع الشيخ أبي سعيد  ::

:: التعليم نت ::

:: موقع الإكليل ::

:: منتدى الحماية الالكترونية الجزائري ::

:: منتدى موقع الاستضافة المحمية الجزائرية::

إعلانات داخلية



رسالة خاصة
facebook

آخر 10 مشاركات هل تريد معنوياتك مرتفعة دوماً؟ (الكاتـب : abou khaled - مشاركات : 2 - المشاهدات : 150 - الوقت: 11:35 PM - التاريخ: 01-14-2017)           »          قصة تشبية الدنيا بالماء : (الكاتـب : abou khaled - مشاركات : 1 - المشاهدات : 87 - الوقت: 12:14 AM - التاريخ: 01-14-2017)           »          شركة كشف تسربات المياه بالرياض بدون تكسير (الكاتـب : qualty - مشاركات : 1 - المشاهدات : 2 - الوقت: 02:11 AM - التاريخ: 01-12-2017)           »          النقد هدية .. فاعرف كيف تقدّمها (الكاتـب : abou khaled - مشاركات : 1 - المشاهدات : 191 - الوقت: 11:55 PM - التاريخ: 01-08-2017)           »          asal (الكاتـب : abou khaled - مشاركات : 1 - المشاهدات : 152 - الوقت: 11:09 PM - التاريخ: 01-05-2017)           »          هل أعلمه الأدب أم أتعلم منه قلة الأدب ? (الكاتـب : abou khaled - مشاركات : 1 - المشاهدات : 173 - الوقت: 11:40 PM - التاريخ: 01-04-2017)           »          توكيل كلفينيتور 0235699066 مركز صيانة كلفينيتور 01129347771 (الكاتـب : حيياة جديدة - مشاركات : 1 - المشاهدات : 706 - الوقت: 09:20 AM - التاريخ: 12-31-2016)           »          دور الرواحل في إحياء الأمة (الكاتـب : abou khaled - مشاركات : 1 - المشاهدات : 169 - الوقت: 12:30 AM - التاريخ: 12-31-2016)           »          أخالفك الرأي ولست ضدك (الكاتـب : abou khaled - مشاركات : 1 - المشاهدات : 187 - الوقت: 12:23 AM - التاريخ: 12-30-2016)           »          صور مشبات,مشبات,ديكور مشبات,ديكورات مشبات مشبات تشكيلات واشكال المشبات الحديثه (الكاتـب : ديكور بيتك - مشاركات : 3 - المشاهدات : 454 - الوقت: 03:42 PM - التاريخ: 12-27-2016)


العودة   منتديات الإكليل إبداع و تميز في التزام > تطوير مواقع الويب > دورة تصميم المواقع بتقنية html5-css3


هام :
تسجيل الأعضاء الجدد مغلق مؤقتا
حاليا لا يسمح بإضافة المواضيع بالنسبة للأعضاء
الإدارة

ღ ღ ღ ღ www.aliklil.com ღ ღ ღ ღ

Loading
الإهداءات


الدرس الخامس : إدراج الصورة والروابط

دورة تصميم المواقع بتقنية html5-css3


إضافة رد
 
Share أدوات الموضوع انواع عرض الموضوع
قديم 04-13-2012, 08:26 PM   #1

إنسان بسيط

اداري بسيط

الصورة الرمزية إنسان بسيط


الملف الشخصي







إنسان بسيط غير متواجد حالياً

افتراضي الدرس الخامس : إدراج الصورة والروابط

نقره لعرض الصورة في صفحة مستقلة

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

-----------------------------------------------

أهلا بالجميع ....
قبل بدأ الدرس أود الإشارة إلى سبب تأخر الدروس والذي يتمحور في نقطتين
الأولى : وهي الشغل لأن طبيعة عملي غير مستقرة لذا فإني أجد صعوبة في ترتيب الوقت
الثانية : وهي نقص التفاعل مع الدورة مما ينقص العزيمة ، ...
بالطبع لا ألقي اللوم عليكم لأن الأغلبية يدرس ويركز على دروسه ...
لذا سأستمر في طرح الدروس لكن تبقى الوتيرة مرتبطة بمدى تفاعلكم

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



1- عودة إلى خصائص الأوسمة
2- إدراج الصور وخصائصها
3- الروابط والصور


1- عودة إلى خصائص الأوسمة

لابأس بالتذكير حول خصائص الأوسمة نقره لعرض الصورة في صفحة مستقلة
قلنا في الدرس السابق أن الخصائص تكتب بالشكل التالي
كود بلغة HTML:
<"balliss proprieter="valeur>

بحيث
balliss هي الوسم proprieter اسم الخاصية valeur القيمة التي تضاف للخاصية وقد تكون عدد أو حرفية
حسب معنى الخاصية وفي كلتا الحالتين يجب كتابة القيمة بين علامتي التنصيص
" " أو ' ' لا يهم أيهما تختار في هذه المرحلة ...
يمكن الإستغناء عن علامة التنصيص إذا كانت القيمة عددية
مثل الخاصية size والتي تعني الحجم ولا يمكن لهذه الخاصية إلا أن تحمل قيمة عددية أي size=25


يمكن للمتصفح فهم هذه الكتابة لكن الكتابة الصحيحة تكون بهذا الشكل
"size="25
لأسباب ستتعرفون عليها حين تتعرفون على لغات أخرى لها علاقة بالـ html ...

2- إدراج الصور وخصائصها

بعتمد إدراج الصور على الوسم img وهو وسم فردي أي أنه

يكتب بالشكل التالي : <
/ img>
لإدراج صورة ما يجب أن نشير إلى مصدر الصورة بالخاصية src اختصار لـ source

كود بلغة HTML:
<img src="  " />

إذا كانت الصوة في نفس المجلد يكفي أن نشير إليها بكتابة اسمها
مثل
"src="image.jpg
إذا كانت الصورة داخل مجلد مثل images نشير إليها بالشكل التالي
"src="images/image.jpg
إذا كنت الصورة خارج المجلد الموجود فيه صفحتنا نشير إليها بهذا الشكل
"src="../image.jpg
بحيث نشير إلى الخروج من المجلد بالرمز
/..
ومنه إذا كانت الصورة على بعد مجلدين إلى الوراء نكتب
"src="../../image.jpg

مثال

نقره لعرض الصورة في صفحة مستقلة

يمكنكم نقل الصورة إلى مجلد أخر ومحاولة الطرق السابقة ...

3- الروابط والصور
ملاحظة :
إن طريقة الوصول إلى ملف ما مثل الصورة في الخاصية src
هي نفسها طريقة الوصول لصفحة أخرى في خاصية href
الخاصة باستدعاء الروابط .
إذا كانت الصفحة خارج نطاق موقعنا أي أنها موجودة على موقع خارجي ففي هذه الحالة سنستعمل البروتكول http للوصول إليها مثل
"href="http://www.aliklil.com
كذاك الامر بالنسبة للخاصية src إذا أردنا الوصول إلى صورة خارجية
"src="http://www.aliklil.com/image.jpg
طيب إذا أردنا إدراج صورة تحتوي على رابط

ندرج الكود بهذا الشكل

كود بلغة HTML:
<a href="fichier.html" ><img src="image.jpg" /></a>


مثال :
سنقوم بعمل صفحة تحوي على بنر إعلاني للدورة بحيث لما نضغط على الصورة
تنقلنا إلى قسم دورة الـ html

نقره لعرض الصورة في صفحة مستقلة


الكود كما في الصورة :
كود بلغة HTML:
<a href="http://www.aliklil.com/vb/forumdisplay.php?f=129" ><img src="html-css.gif" /></a>

يمكن تحسين الكود بإضافة بعض الخصائص مثل
target لفتح الرابط في نافذة جديدة و title لإضافة عنوان للصورة

النتيجة :


كود بلغة HTML:
<a href="http://www.aliklil.com/vb/forumdisplay.php?f=129"  target="_blank"><img src="html-css.gif" title="Banner pub"  /></a>
نقره لعرض الصورة في صفحة مستقلة

إنتهى ^_^
إلى هنا نكون قد انتهينا من دروس تقديم الـ html
ليمكنم المواصلة معنا في الدورة يجب أن تكونوا قد استوعبتم الدروس السابقة
بشكل جيد وأي استفسارات لا تترددو في طرحها...

---------------------------------

فب الدرس القادم إن شاء الله سندخل إلى عالم الـcss
وسنتعلم كيفية تصميم موقع جاهز للإستعمال

بالطبع لم ننتهي بعد من الـ html وسنعود إليها بعد شرح أساسيات ال css
لا أسئلة في هذا الدرس .... نقره لعرض الصورة في صفحة مستقلة
بالتوفيق






آخر مواضيعي 0 الدعاء للأخ جابر ' هزيم الرعد ' بالشفاء
0 تفعيل خدمة CloudFlare لتحسين أداء الموقع
0 تم تغيير اسم الاخت حميدة90 إلى همسة حنين
0 ساهم في تطوير المنتدى بتطوير مهراتك
0 هل يمكن عمل تغييرات مؤقة على المنتدى

:: \\ إعلانات // ::

::=\=:: مواضيع جديدة لم يتم الرد عليها.. نرجوا مشاركتك فيها ::=/=::




إلـه مـاذا فـقـد مـن وجـدك ؟!!!
ومـاذا وجـد مـن فـقـدك !!! ؟
**********
لـسـت بـالخـب ولا الخـب يـخـدعـني
-------------
و النفس تعلم أني لا أصدقها = و لست أرشد إلا حين أعصيها
و العين تعلم في عيني محدثها = من كان من حزبها أو من أعاديها

 

رد مع اقتباس
قديم 05-21-2012, 04:00 PM   #2

سحر الشرق

سحر الشرق

الصورة الرمزية سحر الشرق


الملف الشخصي







سحر الشرق غير متواجد حالياً

افتراضي

شرح مبسط ووافي
بارك الله فيك اخي
وجزاك خيرا ان شاء الله


آخر مواضيعي 0 الحل النهائي لزدحام المحطات
0 اعرف نبيك صلى الله عليه وسلم
0 حصيريا كيف تصبح عالما خبيرا في كل المجالات
0 نصائح وتوجهات لمن يريد التميز في الانجليزية

:: \\ إعلانات // ::

::=\=:: مواضيع جديدة لم يتم الرد عليها.. نرجوا مشاركتك فيها ::=/=::




استوقفكم لدقيقة فقط لن تغني عنكم الكثير
ولكن قد تغير ما بقلبك


اخووووكم سحر الشرق

 

رد مع اقتباس
إضافة رد

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع


الساعة الآن 04:08 PM.


إعلانات نصية
منتديات الإكليل إبداع وتميز في إلتزام , منتدى التربية والتعليم ; , قسم خاص بالباكالوريا ; , منتدى الحماية الإلكترونية الجزائري;

المنتدى الإسلامي; موقع الشيخ محمد علي فركوس; , موقع الشيخ أبي سعيد; , منار الجزائر;

Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd. , TranZ By Almuhajir
vEhdaa 1.1 by NLP ©2009

HTML | RSS | Javascript | Archive | SiteMap | External | RSS2 | ROR | RSS1 | XML | PHP | Tags