دورة تعليمية للغة html

[afnan88]

السلام عليكم ورحمة الله وبركاته


اللهم علمنا ما ينفعنا و انفعنا بما علمتنا
اللهم لا علم لنا الا ما علمتنا

اخواتي اخواني اعضاء منتدى زيزوم يشرفني ويسعدني ان اقدم لكم دورم في تعليم لغة html وهي لغة لتصميم المواقع
وساقوم بشرح الدرس مع اعطاء التمارين وتطبيقها

ارجو الرد لمن يريد الانظمام لدورة لكي اقوم باعطاء تفسير عن الدورة ان شاء الله


اما عن اخواتي الكريمات فساقوم بتتبع معهم الدورة في غرفة درب الاخوات ان شاء الله

وذلك بامر الله يوم الاثنين الساعة 11 صباحا بتوقيت مكة المكرمة

وكذلك يوم الخميس على الساعة الوحدة ظهرا بتوقيت مكة المكرمة ويعاد يوم الجمعة الساعة 11 بتوقيت مكة المكرمة باذن الله


ويعاد بامر الله الدرس يوم الثلاثاء على الساعة الوحدة ظهرا بتوقيت مكة المكرمة

أسأل الله تعالى ان يوفقني في هذه الدورة

اتمنى من الله تعالى ان اكون عند حسن الظن

اسالكم الدعاء

[سائلة الغفران]

السلام عليكم ورحمة الله وبركاته....

جزيتِ خيرا أختي أفنان...

لا حرمكـِ الله الأجر وجعله في ميزان حسناتكـِ ....

ونفع بكـِ الإسلام والمسلمين......

أعانكم الله ووفقكم لكل مافيه خير وصلاح.....

ان شاء الله نعلن انضمامنا علّ الظروف تكون مناسبة لنا ....

ونحن تحت الخدمة والمساعدة ....

[afnan88]

جزاك الله كل خير اختي الكريمة على مرورك

لو شفتو ان الوقت غير مناسب لكم

نأجل ان شاء الله الدورة الى بعد رمضان

[القائد]

شـكــ وبارك الله فيك ـــرا لك ...

وانا ايضا اعلن انضمامي لكم

[الدعوه]

بارك الله فيك افنااااااان

كتب الله اجرك وزادك من فضله

[عبرات]

السلام عليكم ورحمة الله وبركاته


afnan 88



جــزاكم الله الفردوس الأعلى على الكورس الجميل

بإذن الله سأكـون معكم


بارك الله فيكم .





" ياأيها الذين آمنوا اذكروا الله ذكراً كثيراً . وسبحوه بكرةً وأصيلاً . هو الذي يصلي عليكم وملائكته

ليخرجكم من الظلمات إلى النور وكان بالمؤمنين رحيماً "

[afnan88]

السلام عليكم ورحمة الله وبركاته
اعتذر منكم اخواني اخواتي على التأخير وجزاكم الله كل خير على ردودكم

والله كانت عندي ظروف قوية لا يعلمها الا الله وكذلك مشغولة بامور اخرى وهذا ماجعلني اتاخر عليكم


هذا هو البرنامج الذي سأتبعه معاكم ان شاء الله في شرح هذه اللغة ويارب أوفق في ذلك وان اكون عند حسن ظنكم



- لغة html

-الوسوم الأساسية

- حفظ الملف

-الوسوم الخاصة

-الخصائص Attributes التي تضاف الى الوسم

- التعليقات والملاحظات

- تنسيق النص

- تفسير الأوان

-الإرتباطات التشعبية Links

-الإطارات

-الجداول

-القوائم

- النماذج

-الصور

[نجمة الدعوة]

http://img87.imageshack.us/img87/1440/mnwa10kt6.gif

[afnan88]

جزاكم الله كل خير على مروركم وخير الجزاء جنة النعيم

[afnan88]

لــــــــــــــغة HTML


مـــــــــــاهي لـغة HTML

إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper **** Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C . فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, **********, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.
تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين) :-


<TAG/> النص الذي يكتب بين الوسمين *******

******* وسم البداية يكون بين اقواس<>
<TAG/> وسم النهاية يكون بين الاقواس مع امتيازه باشارة / </>



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



وهذه هي لغة الهتمل كل رمز بها يقوم بعمل خاص به ، فهذا رمز للتلوين وهذا رمز آخر لوضع خط تحت العبارة ، ورمز يقوم بإضافة موسيقى وهكذا...




هل تحتاج لغة الهتمل إلى برنامج معين لكي اكتب فيه الرموز؟

لا تحتاج لغة الهتمل إلى برنامج معين بل كل ما تحتاجه هو في متناول اليد ، والذي هو عبارة عن محرر لكتابة النصوص مثل برنامج المفكرة notepad , Bloc-notes ومتصفح لكي تظهر عليه النتيجة وترى ثمار تعبك والمتصفحات كثيرة ولكن انصحك بانترنت اكسبلورر أو نتسكايب نفيجيتور.


بالفرنسي
démarrer ----> tous les programmes ----> accessoires ----> bloc-
-notes

بلانجليزي
start---> all programmes ----> Accessoires -----> notepad

بالعربي
قائمة ابدأ -----> البرامج -----> برامج الملحقة -----> المفكرة

[عبرات]

السلام عليكم ورحمة الله وبركاته



جـزاكم الله خيراً غاليتنا ع المجهوود الطيب



ننتظر البقية .. بارك الله فيكـم..







" ياأيها الذين آمنوا اذكروا الله ذكراً كثيراً . وسبحوه بكرةً وأصيلاً . هو الذي يصلي عليكم وملائكته

ليخرجكم من الظلمات إلى النور وكان بالمؤمنين رحيماً "



http://www.alsayad4smile.com/smile_files/80120dc1b7.gif

[afnan88]

الوسوم الاساسية

الوسوم الاساسية (1)

كما قلنا سابقا ان مفردات لغة HTML تتكون من شيفرات تسمى TAGS أي الوسوم وهي تستخدم
بشكل أزواج وتكتب بالصيغة التالية ( من اليسار الى اليمين ) :

< TAG/ > النص الذي يكتب بين الوسمين < TAG >


يبدأ ملف HTML دائما بالوسم < HTML > وينتهي بالوسم <HTML /> ويعتبر كتابة هذا الوسم من الأمور الأساسية والخطوة الأولى في كتابة أي ملف HTML .
ولا بد من التنويه بأن لغة HTML هي لغة غير حساسة بمعنى لا فرق بين كتابة الوسوم سواء بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase .
لذلك يمكن الكتابة بأي شكل منهما أو الكتابة بكليهما .
أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع
ومن الوسوم الأساسية والمهمة أيضا هو الوسم < BODY > والذي يتم كتابة نصوص صفحة الويب ضمنه ، بالإضافة الى إدراج الصور والجداول والنماذج وباقي محتويات الصفحة . وهو أيضا يحتاج الى وسم الإنهاء <BODY /> .
ولتطبيق هذه المعلومات عمليا ، يمكن الإطلاع على المثال التالي .


<html>



<head/>

<title> اكتب العنوان الذي تريده لصفحتك

<title/>

<head/>
<body>اكتب ماتريد ان يكون في صفحة ويب الخاصة بك <body/>

<html/>






الوسوم الاساسية (2)



يقوم الوسم <P> بإنهاء السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر لإضافي فارغ بين الفقرات ،وهو وسم مفرد لكنه يستخدم أيضا كوسم مزدوج < P> وينتهي بالوسم < P/> .
للتعرف على هذا الوسم الخاص بالفقرات يمكن الإطلاع على المثال التالي :

<html>

<head>





<title/>


<head/>



<body>

</p>اكتب فقرتك الاولى.<p>

<p/>اكتب فقرتك الثانية.<p>
<p/>اكتب فقرتك الثالثة.<p>


<body/>

<html/>

يستخدم الوسم < BR > من أجل تحديد نهاية السطر والبدء بسطر جديد ، ولا بد من التنويه الى أن هذا الوسم مفرد ، أي ليس له وسم نهاية .
ويمكن الإطلاع على المثال التالي :
<HTML>

<HEAD>


<TITLE>


اكتب عنوان الذي تريده لصفحتك

<‎/TITLE>
<‎/HEAD>
<BODY>











مرحبا<BR> بك في صفحتك الرائسية<BR>‎


اول صفحة<‎/BODY>
<‎/HTML>





ان شاء الله ساقدم تمارين لتوضيح

[وجدان]

جزاك الله خيرا اختي افنان

[الفجرالقريب]

السلام عليكم ورحمة الله وبركاته
ممتاز ولي عودة إن شاء الله

[الذاكرة لله]

بارك الله فيك وجزاك خيرا وكتب اجرك اختي الغالية على ماتقدمينه لنا وجعله في موازين حسناتك

[afnan88]

السلام عليكم ورحمة الله وبركاته

جزاكم الله كل خير على مروركم واتأسف كثيرا عن تأخري ولكن كنت اواجه مشكل في الجهاز الذي يجعلني اتاخر عليكم

الان نبدا درس حفظ الملف

كيف سنقوم بحفظ او تسجيل الملف الذي نشتغل عليه

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

ارجو ان تكون هذه صورة توضح لكم ماقلناه
http://alain1.net/files/jtkjxz2mj1dk0nzdigma.jpg
لاطلاع على كود صفحتك وتعديل عليها
هناك طريقتين
الطريقة الاولى
نضغظ كليك يمين على الصفحة التي عملنها يطلع معنا الشكل الذي في الاسفل
نختار ouvrir avec وبعدها Bloc-notes
http://alain1.net/files/xanowzjgxzyvtiy3ydaj.jpg

الطريقة التانية

تفتح الصفحة التي عملنها وبعدها نضغظ على كليك يمين للفارة على اي مكان فاضي وبعدها نختار إعمل right click فى أى مكان فاضى ، وبعدين هات " عرض المصدر " أو "View source" " كما يوضح الشكل التالي

http://alain1.net/files/zktymor2zneznzngn3ti.jpg

او ندهب الى فوق الصفحة ونختار عرض وبعدها المصدر
http://alain1.net/files/izi2mdazjhhytnu5d0nj.jpg
لبعض التوضيحات في الحفظ او تسجيل سألتني بعض الاخوات ماالفرق بين حفظ و حفظ باسم
يعني
enregistrer و Enregistrer sous
أو save و save as

اكيد كلاهما يقوم بعملية التسجيل
بالنسبة لي حفظ او enregistrer او save تسجل او تحفظ الملف في المكان الذي حددته وحينما اردت التعديل عليه تكتفي باختيار حفظ ويحفظ الملف في نفس المكان مع تعديل الذي عدلته في المكان نفسه.

اما حفظ بااسم او enregisrer sous او save as فهو يقوم بنفس عملية حفظ عند اول مرة ولكن عند التعديل يسمح لك ان تغير مكان الملف الى مكان اخر مع الحفظ بالملف السابق في نفس المكان

مثلا عندي ملف في سطح المكتب واريد تعديل عليه وحفظه في داخل مجلد اضغظ على حفظ بااسم

ان لم يكن الدرس واضحا ارجو التعليق لكي اوضح اكثر

اختكم أفنان

[الدعوه]

جزاكم الله خيرا ورزقكم العلم النافع والعمل به





البلاء يقرب بينك وبين الله ويعلمك الدعاء ويذهب عنك الكبر والعجب والفخر

[afnan88]

دعونا قبل ماننتقل الى الدرس التالي

نقوم بتمرين في ماقدمناه سابقا لكي اراى هل انتم فهمتم الدرس جيدا ام يوجد هناك التباسات قد يكون معنا متفوقين يفهمون في لغة html وقد يكون معنا مبتدئين لا يعرفون في هذه اللغة شيء

انا سااقوم باعطاء نتيجة وانتم تقلون لي ماهي الاكواد التي استخدمتها في هذا التمرين

ارجو المشاركة تمريد بسيط

http://alain1.net/files/2ziydonwni1ejmkz0gbm.jpg
لو ما اعطيتو حل لدرس لن اقدم الدرس الذي بعده <<< فقط امزح :grin:

ارجو لكم التوفيق كان الله في عونكم

[afnan88]

جزاك كل خير اخي الفاضل عن انتبهك وردك عن تمرين كنت انتظر بعض الاعضاء يردون عن التمرين وللاسف مافي حد غيرك

او بالغلط حطو الحل في صفحة اخرى :p

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

اخي الفرق بين <p> و <br> هو

لما نكتب الوسم <br> يعني نريد رجوع الى السطر التالي بدون ترك سطر اخر

مثلا
<html>
<head>
<title/> مرحبا <title>
<head/>
ارجو ان يكون شرحي واضحا<br> مرحبا بك في موقع زيزوم<body>
<body/>
<html/>

لاحظ النتيجة

مرحبا بك في موقع زيزوم
ارجو ان يكون شرحي واضحا

ولكن الوسم <p> يقوم بإنهاء السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر لإضافي فارغ بين الفقرات

مثال
<html>
<head>
<title/> مرحبا <title>
<head/>
ارجو ان يكون شرحي واضحا<p> مرحبا بك في موقع زيزوم<body>
<body/>
<html/>
لاحظ كيف ستكون النتيجة


مرحبا بك في موقع زيزوم

ارجو ان يكون شرحي واضحا


ننتقل الى التمرين السابق في عندك التباس بين <p> و <br>

لحظ التمرين جيدا في عندك خطأ بسيط
ساعطيك فرصة ان تعرف خطاءك

انظر الى التمرين هكذا اريد

مرحبا بكم في موقع زيزوم

يشرفني ويسعدني ان تكون هذه اول صفحة ويب معكم
شكرا لاهتمامكم

المشاركة لجميع الاعضاء لكي اوصل الدرس وان كنتم تريدون ان اوصل الدرس بدون تطبيق ليس هناك اي مشكلة عندي وجزاكم الله كل خير


اختكم افنان

[جوهرة]

شكلي جيت في الاخير

ولكن ارجو ان يكون لي حظ معكم

وجزاك الله الفردوس الاعلى غلاتي

ولا عدمناك

:

[الفجرالقريب]

بسم الله الرحمن الرحيم


السلام عليكم ورحمة الله وبركاته


يعطيك العافية أختنا الفاضله وبارك الله في جهودك, ونحن معك إن شاء الله فأستمري
وإلى الأمام0


ملاحظه /الصور لم تظهر عندي في الامثلة السابقة التي قمت بها ما أدري ما المشكلة وحتى الواجب ما طلع 0


فإنا كتبت واجب من عندي ولأول مرة أكتب بهذه اللغة

<html>
<head>
<title>السلام عليكم ورحمة الله وبركاتة</title>
<head/>
<body>بارك الله في جهود الجميع<br>شكراً لكم
<body/>
<html/>

النتيجه
السلام عليكم ورحمة الله وبركاتة
بارك الله في جهود الجميع
شكراً لكم




انتهى

الله يستر

[afnan88]

جزاكم الله على ردودكم

اختي جوهرة ماجيتي متاخرة بس حولي تتبعي معنا وجربي ماقدمته

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

وجزاك الله الفردوس الاعلى ياغاليتي

اخي الفجر القريب جزاك الله كل خير على ردك وكذلك على محاولتك لتحل الواجب اخي لقد قمت بتغير روابط الصور اتمنى ان تظهر لكم الان الصور

اخي ارجع الى الواجب وحله لان الواجب قصدي فيه ان اعرف هل فهمتم شرحي في ادوارالوسوم الاساسية وكذلك هل عرفتم الفرق بين الوسمين <br> و <p>

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