(html) من البداية حتى الإحتراف تأليف اسامة الموسى

osamaalmousa

مقدمة

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

بداية أرحب بكم وأتمنى أن يكون هذا الكتاب مفيد لكم في مسيرتكم الحياتية،‏ في هذا الكتاب

سوف أشرح لغة HTML من الجزئيات األساسية إلى المواضيع المتفرعة،‏ وسيكون هناك

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

1


الدرس )1( اساسيات لغة HTML اللغة المستخدمة في انشاء المواقع

عند انشاء اي موقع يجب كتابته بلغة برمجية اسمها html فمثالً‏ عندما تريد اظهار جملة معينة على صفحة

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

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

,

بعد فتحها سنبدأ كتابة اساسيات

درسنا وهي هذه االكواد :







اوالً‏ عندما تشاهد هذه الرموز يمكن ان يطرأ على بالك لماذا هذه الكلمات محتواه بين هذان القوسان < >

السبب هو ان األكواد في لغة html تكتب بين هذان القوسان و األكواد في المثال السابق يجب على كل

صفحة ويب ان تحتوي في البداية على هذه األكواد.‏

وإذا شاهدت االكواد االثنين



هذان الوسمان ايضاً‏ األول هو وسم بداية والثاني هو نهاية الوسم وهو محتوى بين الوسمين االساسيين الذين

في الفقرة السابقة

ويكتب داخلهما ما يعرف الصفحة كالعنوان وبعض االستخدامات االخرى سنأتي شرحها فيما بعد ان شاء هللا.‏

نأتي الى الوسمين



2


هذان الوسمان األول هو وسم بداية والثاني ايضاً‏ نهاية الوسم و يكتب بينهما األشياء التي ستعرض في داخل

صفحة الويب مثالً‏ نكتب مرحباً‏ فستظهر هذه العبارة على صفحة الويب الخاص بالمشروع عند حفظه

بعد كل ذلك نحفظ ما كتبنها عن طريق الضغط على ملف

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

في مكان اسم الملف نكتب اسم المشروع فمثالً‏ نكتب مشروع وبعدها نكتب نقطة

).(

ثم بعد ذلك نكتب html

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

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

3


الدرس )2( : اضافة عنوان لصفحة الويب

في الدرس السابق كان عنوان الدرس هو

اساسيات

لغة html

فسيكون موضوعنا اليوم هو

كيفية وضع عنوان لصفحة الويب من خالل لغةhtml

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

في البداية وكالعادة بعد كتابة األكواد اإللزامية ألنشاء اي موقع الويب والتي هي

نكتب ما بين الوسمين /head> ه>‏ نا هو ما بين الوسمين







هذان الوسمان

ليكون المراد على الشكل التالي









4


بعد ذلك نكتب بين الوسمين عنوان الموقع و ليكون مثالً‏ مشروع




مشروع






يمكن كتابة الوسمين وما بينهما على الشكل التالي



م>‏ شروع‏ /title>





األن نحفظ المشروع كما المشروع السابق في الدرس ‏)اساسيات

المواقع(‏

وتكون النتيجة على النحو التالي

لغة html

اللغة المستخدمة في انشاء

5


) التعامل مع النصوص ‏(الجزء األول : الدرس )3 )

مرحباً‏ بكم في درس جديد مع دروس تعلم لغة

html

و الذي سيكون كيفية التعامل مع النصوص،‏ أي تنسيق

الكالم الظاهر على صفحة الويب

نبدأ على بركة هللا،‏ سنفتح أوالً‏ المفكرة من الحاسوب بعد فتحها نكتب االكواد االساسية كما شرحنا في

الدروس السابقة من

دروس تعلمhtml

ولتكن هذه هي االكواد







اآلن سيكون عملنا ما داخل الوسمين /body> و>‏


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

لنأخذ اول وسم من وسوم تنسيق النصوص والذي هو سماكة الخط

فمثالً‏ عند كتابة نص معين ونريده ان يكون خطه عريض نكتب النص ما بين الوسمين

وكلما رفعنا في الرقم كلما قل ثخن الخط م ثال



وهكذا إلى الرقم ستة

6


نكتب مثال على الشكل التالي

الوسم الثاني ما هو إال تغيير لون النص ويتكون الوسم من اجزاء

ه>‏ نا يكتب النص





< /h1>

ن>‏ ص للشرح h1>




red

مكان كلمة red يكتب اسم اللون باللغة اإلنجليزية او الكود الخاص به الذي يقرأه الحاسوب فمثالً‏ انا قد كتبت

أي اللون األحمر والكود يكون على الشكل التالي

#FF0000

هذا هو كود اللون األحمر واي كود ألي لون يبدأ ب

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

#

وسيظهر صفحات تشرح هذا الشيء

و بعده ستة ارقام معينة

color code عبارة google

األن عندما نكتب اكثر من جملة في

html ستظهر الجمل على سطر واحد ولتفادي هذه

المشكلة نكتب بعد كل جملة

ليكون الشرح على الشكل التالي

7


الدرس )4( : التعامل مع النصوص ‏)الجزء الثاني )

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

سنذكر بإذن هللا بعض الوسوم في هذا الجانب

نبدأ مع الوسم الخاص في تغيير نوع الخط وصيغته على الشكل التالي





text

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



9


الدرس )5( : التعامل مع النصوص ‏)الجزء الثالث(‏

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

الوسم األول هو

>b<

هذا الوسم يقوم بجعل الخط عريض كهذا المثال

لتطبيق العمل السابق نكتب النص بين الوسمين


مثال تطبيقي





text



الوسم الثاني هو

نأتي للوسم الثالث

>u<

لوضع خط تحت النص

لعمل هذا الشيء نضع النص بين الو سمين

>u< > /u<

>i<

يقوم هذا الوسم بجعل الخط مائل هكذا

للتوضيح

لعمل هذا الشيء ايضاً‏ نكتب النص بين الوسمين

text

text كلمة :

هي مثال للشرح وليست كود برمجي

نأتي اآلن إلى اخر كود في هذا الدرس الذي هو

10


هو يجعل النص في منتصف الصفحة ولجعل النص المقصود في منتصف الصفحة نكتب النص بين هذين

الوسمين

text

11


الدرس )6( : تطبيق اكثر من وسم على نص معين

اليوم سوف نشرح امر مهم في لغة

html

الذي يعطيك امكانيات أكثر لتحرير النصوص

فمثالً‏ عندما نريد لنص ان يكون له لون معين وحجم معين و نوع خط معين فنحتاج كتابة اكثر من وسم على

هذا النص

مثال على هذا الموضوع





text



المثال السابق كلمة

text

نأتي اآلن إلى كيفية اضافة اكثر من وسم،‏ كما الحظنا مكتوب قبل

لجعل الخط عريض

هي الكلمة المراد تطبيق الدرس عليها

text

مجموعة وسوم والتي هي

>b<

>u< ,

>font color=red<

لوضع خط تحت النص

لتغيير لون الخط مثل حالتي وضعت اللون األحمر red

اما بعد كلمة

text


>u<

يوجد

التي هي نهاية الوسم و هكذا على التوالي

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

فمثالً‏ الوسم في المثال السابق هو بعد الوسم فنهايته بعد كلمة يكون بعد نهاية الوسم

text

>b<


12


: تغيير خلفية صفحة الويب

الدرس )7(

موضعنا اليوم هو كيفية تغيير خلفية الموقع كوضع صورة او جعلها على لون معين

أوالً‏ نأتي إلى تلوين خلفية صفحة الموقع

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

>body< > /body<

فالوسم

body هو المسؤول عن هيكل صفحة الويب ولتغيير خلفية الصفحة نكتب الكود المسؤول عن هذا

مكان كلمة

الشيء في الوسم >body< على الشكل التالي


مثال تطبيقي







blue

نضع اسم لون او كود لون ‏)كود اللون كيف نحضره شرحته في درس سابق من دروس

) html

بعدما شرحنا عن تغيير لون الصفحة نأتي لشرح كيفية وضع صورة كخلفية صفحة الويب،‏ الكود المسؤول

عن األمر ايضاً‏ يوضع داخل الوسم

الكود على هذا الشكل

>body<


13


مكان الرمز # نضع رابط الصورة المراد وضعها كخلفية

ورابط الصورة نجلبها كمثل الموضح في الصورة التالية

اي نضغط بالزر األيمن من الفأرة على الصورة في الصورة السابقة ونختار الخيار نسخ االرتباط او يمكن

ان يكون رابط الصورة في المكان الذي نكتب فيه في العادة رابط موقع معين في المتصفح مثالً‏

www.osamaalmousa.me

وهذا الرابط يكون احياناً‏ عند فتح صورة في المتصفح

14


الدرس )8( : أضافة صورة إلى صفحة الويب

في درس اليوم سنتداول

موضع مهم في مجال تطوير المواقع فأنه شيء مفيد واساسي في صفحات الويب

نأتي اآلن ونبدأ في شرح درسنا و الذي هو كيفية اضافة صورة على صفحة الويب

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

الرابط كيف نحضره شرحته في الدرس السابق

body

>body< > /body<

(

الوسم يكون على الصورة التالية

> /" ه نا يوضع رابط الصورة src="


الدرس )9( : بعض الوسوم التي تضع في ال - head الجزء االول -

سأعرفكم على بعض الوسوم التي تكون بين الوسمين


إن هذين الوسمين كما بينت سابقاً‏ يقع داخلهما الوسوم المسؤولة عن خصائص الموقع مثل العنوان الذي يظهر

في رأس المتصفح عند فتح الموقع والوصف الذي يظهر أسفل اسم الموقع في نتائج البحث عند البحث عنه

في محرك البحث والتحكم في لغة صفحة الموقع ايضاً‏ يضع بن هذي الوسمين والكثير.‏

مثالً‏ عند فتح محرك البحث جوجل و إذا اردنا كتابة اسم موقع وبحثنا عنه فتظهر نتيجة البحث في الغالب بأن

يوجد وصف للموقع تحت اسمه هكذا

و هذه الخاصية تكون مسؤول عنها وسم

meta

والذي تكون صيغته على شكل التالي


هذا الوسم يفضل ان يكون من أوائل الوسوم في ال head

مثال على شرحنا اليوم




> " هذه صفحة تجريبية"=‏content


الدرس )10( : بعض الوسوم التي تضع في ال - head الجزء الثاني -

html لغة ال

هي لغة انشاء المواقع و لكن يوجد لغة مساندة لها والتي هي لغة

css

التي تقوم بالتحكم في

تصميم هذه الصفحة فمثال

البناء عندما يبنى يكون في البداية بدون نوافذ وال ابواب و من دون دهان ومثل

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

html

css و اما لغة

الطالء الذي يدهن في البناء او وضع النوافذ و األبواب

هي الشكل الذي يعطى لصفحة الويب مثل

في البداية يجب ان نعرف ان لغة

HTML

لغة ينزل لها تحديثات وهذه التحديثات تكون في اضافة على اللغة

من اكواد جديدة وتحسينات و الغاء وسوم و اضافة وسوم جديدة و اخر تحديث سمي ب HTML 5 اآلن

نحن يهمنا ان نضيف في بداية كتابة وسوم لغة

HTML


ان نكتب

فتصبح صفحة النت مكتوبة على الشكل التالي

نأتي اآلن إلى األكواد المسؤولة عن مظهر الصفحة او اكواد لغة








CSS

>style/style<

وهذين الوسمين يضعان في ال , head هذا الموضع عن اكواد لغة

ألنه طويل و يلزم دروس خاصة به

css

,

قد تكتب احيانا بين الوسمين

ال يمكنني طرحه في هذا الموضوع

اآلن ما يهمنا ان في المكان head قد يوضع هذا الوسم و أيضاً‏ قد

يوضع الوسم

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

css

link

خارجي فنعم قد يأتي اكواد لغة

css

في ملف خارجي مرافق لملف صفحة ال

الحالة يكون على الشكل التالي

في هذه link الوسم , html

18


‏script< > /script<

بين الوسمين السابقين يكتب اكواد لغة

يكتب على هذا الشكل

نأتي األن إلى الوسم االخير الذي هو

javascript

>title/title<

هذان الوسمين شرحتهم في درس خاص بهما وهو الدرس الثاني

19


الدرس )11( : شرح ال paragraph

css

-1

>p<

ان الوسم و الذي يسمى paragraph من خواصه ان يأخذ حيز على عرض الموقع و يطبق عليه كثير

من التأثير من لغة كالخلفية و العرض و الطول و اإلطار و

الكثير لكن هذه األشياء كما قلنا تلزمها دروس في حالها هنا ما يهمنا ان نشرح خصائص ال paragraph

الرئيسية

>p< الوسم

يجب انت تنهيه بوسم نهاية كالشكل التالي

>p< > /p<

-2

التأثير تكتب داخل الوسم >p< على الشكل التالي

> p style="background-color:re d; "/p<

التأثير الخاصة بلغة

css

تكتب كما الصيغة في الشكل السابق ان يكون:‏

style="background-color:red;"

style

تعبر عن التأثيرات بعدها تكتب اشارة

= و

بعدها نكتب اثنتين من هذه االشارة " و التي يمكن

"

shift مع الزر الموجودة فيها عالمة وعادةً‏ ما تكون فوق الزر shift كتابتها عن طريق الضغط على زر

background- اآلن بعدما كتبنا اثنتين من األشارة " نكتب دخلهما التأثيرات كما في المثالة السابق كتبت ,

و تكتب بعدها نقطتين فوق paragraph تعني الخلفية الملونة لل background-color فإن color:red

اي احمر و بعد ذلك نكتب فاصلة منقوطة

red بعضهما و بعد ذلك كنت قد كتبت اسم اللون والذي هو

;

shift و الزر القريب من الزر shift التي نكتبها بعد نهاية كل تأثير والتي نظهرها بالضغط على زر

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

;

css للتذكير هذا الكالم يخص لغة

‎3‎‏-الكتابة داخل ال paragraph اي بين الوسمين

ه>‏ نا نكتب النص المراد كتبه


4- ال paragraph عند الكتابة فيه كتابات لو وضعنا مسافات كثير فلن يأخذ غير مسافة واحدة وعند

الضغط على الزر

enter

الخاص بأخذ سطر جديد فالكالم لو كان على عدة اسطر سيكون على سطر واحد

عند حفظ المشروع و فتح العمل على متصفح الويب إال اذا وضعنا بين كل جملة و جملة الوسم

كل جملة في سطر جديد

>br<

-5 ال paragraph

يكتب في ال

body

>body< >/body<

مثال على شرحنا اليوم:‏

او بين الوسمين

لجعل






text text 2



الصورة التالية لنتيجة العمل الخاص بنا

21


و(‏

الدرس )12( : ما هي التعليقات في لغة html

التعليقات مفيدة كثيراً‏ في انشاء المواقع و حتى عند كثير من لغات برمجة فالمبرمج المحترف قد ترى في

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

في نقطة معينة من ملفه البرمجي

فعند العودة و قراءة ما برمجه يكون قد وضع تعليق يرشده لما فعله في البرمجة عند مكان معين و هذا

التعليق عند تنفيذ ملفات البرمجة ال يكون له عالقة في نتائج البرمجة

اي مثالً‏ في التعليقات في لغة

html

عند كتابتها ال تظهر في الصفحة النتيجة لبرمجة

التعليق في صفحة الويب

html

اي ال يظهر

ألسهل الموضوع عليكم وألن الموضوع سهل جداً‏ سأدخل في مثال تطبيقي

التعليقات قد كتبتها في المنطقتين ال head و ال









body


و التعليقات صيغتها على النحو التالي

اي نكتب أوالً‏ هذين األشارتين

><

و ثم نكتب داخلهما اشارة تعجب

)!(

و بعدها اثنتين من الشخطتين

--(

بعدها نكتب التعليق الذي نريد ثم بعد ذلك أثنتين ايضاً‏ من الشخطتين

)--(

هذه هي الصيغة لكتابة التعليق والتعليقات ال يظهرها المتصفح في صفحة الويب عند تصفح الموقع فيعني

يمكن كتابة اي وسوم تحت او فوق او بجانب التعليقات فالتعليقات في

وضعت html

22


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

مثال للشرح



‏‏

م>‏ شروع عمل /title>





23


الدرس )13( : الروابط

كل المواقع عند الدخول إليها في العادة نكتب في الشريط الذي يكون في اعلى المتصفح رابط الموقع فمثالً‏

عند الدخول إلى موقعي نكتب

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

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

الدخول إليه

في لغة ال

www.osamaalmousa.me

html

هناك وسم كثير االستخدام لموضوع الروابط والذي هو الوسم

وتكون صيغته على الشكل التالي

>a<

>a/a<

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

الرابط

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

فالرابط يوضع بين

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

osa ma

" " و الكلمة href

هي كلمة ثابتة ال تغيرها و بعدها يكتب = و هكذا

في المثال السابق عند كتابته على هذا النموذج فالنتيجة عند الضغط على كلمة

osama

في المتصفح

فسيفتح الرابط في نفس عالمة التتويبة اي لن يفتح الرابط في نافذة جديدة في المتصفح ولجعل الرابط يفتح

في نافذة جديدة في المتصفح فسنزيد بعد

href=" "

بالعبارة التالية ولكن بعد ترك فراغ

target="_blank"

يمكن في نفس الصفحة ان نعمل توجيه لمكان ما في الصفحة و هذا يكون عن طريق ال

توضع مثالً‏ في الوسم

id و class

>p<

والتي مهمتهما اعطاء عنوان للوسم

class ال

او ال id

يمكن كتابتهما اإلثنين مع بعض او واحد منهما و يكون كتابتهما على الشكل التالي

24


" هنا نكتب الذي نريده class="

" هنا نكتب ايضاً‏ ما نريده id="

والجملتان السابقتان يكتبان في ال >p< و ليكون مثالً‏ نكتب هكذا

> p class = " " /p<

"/p<

او

> p id= "

دعونا نكتب مثال لنشرح الموضوع

25






go to paragraph 1

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraph

paragraph 1 paragraph

paragraphparagraphparagraphparagraphpar

agraphparagraphparagraphparagraphparagraph

paragraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraphpar

agraphparagraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraphparagra

phparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraphpar

agraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraphparagraphparagraphparagraph

paragraph



26


في المثال السابق قد كتابنا مجموعة من ال paragraph وبين أوائلهم كتبت وسم

< a href="#go-to-paragraph">go to paragraph 1>/a<

والذي هو الوسم السابق كتبت داخله

# go-to-paragraph

الذي هو عنوان ال paragraph الذي كتبته في id

الخاص به و هذا ال paragraph بعد الوسم

>a<

-

بعدة اسطر ، شكل ال paragraph كان

< p id="go -to-paragraph">paragraph 1

بعد ال id هو هذا العنوان،‏ العنوان متكون من عدة كلمات وبين كل كلمة و كلمة وضعت

إلن ال يمكن

ترك فراغ بين الكلمات عند كتابة العنوان ، ايضاً‏ عندما يكون المسؤول عن العنوان

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

class

id و class

يكون ان عند وضع العنوان في الوسم

>a<

المسؤول عن العنوان id و عالمة.‏ إذا كان المسؤول عن العنوان

نسبق العنوان ب

ال نترك فراغ

#

class

اذا كان

نأتي اآلن إلى ما هي الفائدة من كالمنا السابق،‏ يكمن المعنى في أن اذا اردنا كتابة مقال طويل و اردنا

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

التوجيه إلى ذلك المكان

فالمثال السابق وضعنا رابط والذي اسمه

go to paragraph 1

paragraph

الذي عنوانه

go-to-paragraph

عند الضغط عليه يتم التوجيه إلى ال

يمكنك تجريب ما قلته اذا كتبت مثال للشرح في المفكره و تحفظه وتفتح الملف المحفوظ في المتصفح و

طريقة الحفظ شرحت في أول درس من دروس تعلم

html

المغزى إذا كان المقال طويل و وضعت لفقرة في المقال عنوان و في بداية الموضوع تضع رابط للتوجيه

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

المتصفح

27


الدرس )14( : الوسم iframe

يمكن قد شاهدت بعض المواقع التي تخصص حيز في موقعها لعرض موقع داخل موقعها

سأعطيك مثال على هذا الشيء،‏ انظر للصندوق التالي الذي يعرض موقعي

داخل صندوق

هكذا يفعل الوسم

iframe

و الصندوق الذي يصنعه يمكنك مشاهدة الموقع الذي داخله بتحريك شريطي

التمرير على جانبي الصندوق او من الهاتف بتمرير اصبعك فوق الصندوق و صيغته الiframe على الشكل

وظيفة ال

التالي

> iframe name="my_website" src="www.osamaalmousa. me"/iframe<

كما سبق كان للوسم

iframe

وسم نهاية والعمل يكون على وسم البداية فبعد كتابة

iframe

name="my_website"

name

تكون انها اذا كانت لديك اكثر من

iframe فال name

كتبت

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

يفيد عند تخصيص شكل ال

iframe

بلغة ,css فيبقى

المثال السابق كتبت داخل الname

my_website

اذا كتبت اكثر من كلمة داخل الname ال تترك بينهما فراغ

ثانياً‏ كتبت

ال تغيرها ابقها فهي تعني جلب الرابط وأما الموقع في

يمكنك اضافة على الوسم

,

في حالتي كتبت

_

src="www.osamaalmousa"

src

iframe

هو الموقع الذي نريده ان يعرض داخل الصندوق

في حالتي يمكنك تغييره

اضافات لتخصيص العرض و االرتفاع للصندوق الذي يحتوي الموقع

فمثالً‏ لتغيير العرض نضيف بعد

src="www.osamaalmousa"

28


هذا الكود

width="100px"

طبعاً‏ بعد ترك فراغ بينها وبين الكود الذي قبلها

رقم مئة نغيره بالرقم الذي تريده اما بعد مئة

px

نأتي اآلن إلى االرتفاع فكوده على الشكل التالي

height="100px"

هي مقياس بالبيكسل

نضع هذا الكود بعد كود االرتفاع إذا اردت لكن بعد ترك فراغ

رقم مئة تغيره للذي تريده

29


الدرس )15( : الجداول ( الجزء األول )

الجدول يفيد في كثير من الحاالت كأنشاء جدول يحوي درجات الطالب كمثل هذا الجدول في الصورة التالية

يكمن عمل مثل هذا الشكل بالوسوم التالية

بداية نكتب الوسمين

>table< > /table<

والذي يعني هيئة الجدول ونكتب داخله مجموعة من الوسوم والتي تحدد الصفوف واألعمدة

مثالً‏ لكتابة صف من التسميات نكتب الوسمين

>tr< > /tr<

يمكن تكرار هذين الوسمين لصنع مجموعة الصفوف

شاهد الصورة التالية ما داخل األطار األحمر لتوضح لك ما هو الصف الذي اعنيه

و الوسم الخاص باألعمدة يوضع ما بين وسمين الصف على هذا الشكل

>tr<

>td< > /td<

>/tr<

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

اعمدة عندما تنشاً‏ عدة صفوف داخلها أعمدة

فكل صف له ,

30


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

باللون األحمر

اآلن نأتي إلى الحدود في الجدول كيف وضعها فأنت عند كتابة الجدول يأتي على الصورة التالية

عبارة لوضع الحدود نضع في الوسم

border="1"

ليصبح الوسم بعد ذلك على الشكل التي


يمكن اضافة شيء آخر بعد كود الحدود للتحكم بعرض الجدول بالكامل والذي هو

يمكنك التعديل على العدد لضبط العرض

width="500px"

,

الكود السبق تضعه اذا اردت بعد كود الحدود لكن بعد ترك مسافة

بينهم

سأعطيك مثال تطبيقي على فعلناه

31








ا>‏ ألسم‏ /th>

ا>‏ لمادة‏ /th>

ا>‏ لدرجة‏ /th>



أح>‏ مد‏ /td>

ري اضيات‏ < /td>

90



ب>‏ سام‏ /td>

ري اضيات‏ < /td>

95



ر>‏ امز‏ /td>

ري اضيات‏ < /td>

80



س>‏ امر‏ /td>

ري اضيات‏ < /td>

100





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

في هذه الصورة

32


الدرس )16( : الجداول ( الجزء الثاني )

تعلمنا في الدرس السابق األساسيات في بناء الجداول بلغة

html

الجداول سنتعرف على بعضها في هذا الدرس

الجدول يمكن تقسيمه إلى ثالث اجزاء وهم الجزء العلوي

ما تسمى جسم الجدول

)thead(

)tbody(

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

لكن كيف نضعه في الجدول

و اخر شيء الجزء السفلي

لكن يوجد بعض اإلضافات في بناء

والصفوف التي تقع في المنتصف او

)tfoot(

css

لها على هذا الموقع بعد االنتهاء من دروس

بداية نتعرف اين سنضع thead

وهذه اللغة ان شاء هللا سأضع دروس

html

نضعه على شكل وسمين وسم بداية و وسم نهاية على شكل التالي

>thead/thead<

,

نضعه بأن يكون الصف األول من الجدول داخل هذين الوسمين على الشكل

التالي

ويمكن تنسيق هذا الصف بلغة css عن طريق كتابة اكواد

التالي



text 1

text 2

text 3

text 4



css

ونضع التوجيه لهذا ال الصف على الشكل

33


thead td{background:#ccc; }


فتكون النتيجة على الشكل التالي

مع العلم انا قد وضعت حدود لجدول هذا وضبطت عرضه

و أكواد ال

css ال style

وضعتها في الجزء head من الصفحة

األكواد التي استعملتها في بناء هذا الجدول هي





thead td{background:#ccc;}







text 1

text 2

text 3

text 4






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

والوسوم الذي نحتاجه هو


34


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

مثل الشكل التالي

ويمكن تنسيق هذه الصفوف مثل هذا الشكل



text 5

text 6

text 7

text 8



text 9

text 10

text 11

text 12



text 13

text 14

text 15

text 16




tbody td{background:#e0e0e0}


لتكون النتيجة على الشكل التالي

ويمكنك

دمج المثال السابق مع هذا المثال ليكون الشكل على التالي

35





thead td{background:#ccc;}

tbody td{background:#e0e0e0;}







text 1

text 2

text 3

text 4





text 5

text 6

text 7

text 8



text 9

text 10

text 11

text 12



text 13

text 14

text 15

text 16






اآلن نصل إلى آخر جزأ وهو الجزء السفلي من الجدول والتي وسومه هي


كما نسقنا جسم الجدول و css نضع ما بين الوسمين السابقين آخر صف من الجدول و يمكنك تنسيقه بلغة

رأس الجدول

مثالً‏ لقد اعددت جدول مؤلف من أجزائه كلها و األكواد هي

36





thead td{background:#ccc;}

tbody td{background:#e0e0e0;}

tfoot td{background:#848080;}







text 1

text 2

text 3

text 4





text 5

text 6

text 7

text 8



text 9

text 10

text 11

text 12



text 13

text 14

text 15

text 16





text 17

text 18

text 19

text 20






37


ليصبح الجدول على الشكل التالي

38


الدرس 17( ) : الجداول ( الجزء الثالث )

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

مهمة في بناء الجداول

سنتعرف على أول مفهوم إال وهو

html

, )colspan(

و سيكون فيه عرض مفاهيم

ما هو و ماذا يفيد ؟؟

يفيد هذا الشيء في تلخيص ومنع من تكرار نفس العبارة لمقصد واحد،‏ فمثالً‏ في هاتين الصورتين مقدمة

لما سوف نشرحه

الفرق بين االولى والثانية

في أن األولى في الصف األول كانت تحتوي على أربعة أعمدة و الصورة الثاني

اصبحت في عامودين

فما قلنا منعنا من تكرار نفس العبارة ووضعنا نفس العبارة في عامود واحد أو خلية واحدة ألن المعلومات

تحت كلمة

computer )1(

المكررة هم لكال العبارة المكررة او العمود المكرر فعملنا على االختصار في

العمودين إلى عامود واحد وفعلنا ذلك بإضافة كود

colspan="2"

إلى العامود األول الصف األول وقمنا بحذف العامود الثاني في الصف االول ليصبح الجدول على الشكل

التالي

39








Computer (1)

Computer (2)



ram 1GB

cpu intel

ram 2GB

cpu amd



rom 64GB

OS (M)

rom 128 GB

OS (W)





فجدول كان على هذا الشكل








Computer (1)

Computer (1)

Computer (2)

Computer (2)



ram 1GB

cpu intel

ram 2GB

cpu amd



rom 64GB

OS (M)

rom 128 GB

OS (W)





40


فاالختالف الحاصل بين الجدولين السابقين بالتحديد ان قمنا بحذف المحدد باللون االحمر في النص التالي

المأخوذ من الجدول الثاني مع العلم اني حذفت العامود الرابع من الصف األول ايضاً‏ لنفس السبب الذي هو

الختصار التكرار من

computer (2(

Computer (1)

Computer (1)

Computer (2)

Computer (2)

وقمنا بإضافة الكود الذي هو يأخذ عامودين من الصف األول

Computer (1)

Computer (2)

في الذي سبق اخذنا عامودين لكل من

Computer (1)

و

Computer (2)

و الرقم الذي باللون األزرق هو يعني بأن أخذنا عامودين وهو الرقم

2

41


نأتي اآلن إلى شيء مماثل للذي سبق لكن االختالف في اختصار صفين الذين يقعان في العامود الواحد ,

كيف ذلك ؟؟؟

أنظر إلى الصورتين التاليتين لتفهم الفر ق

لتكن االكواد المستعملة في الصور على الشكل التالي

الصورة األولى أكوادها هن








Computer (1)

ram 1GB

cpu intel



Computer (1)

Crom 64GB

OS (W)



Computer (2)

ram 2GB

OS (M)





42








Computer (1)

ram 1GB

cpu intel



Crom 64GB

OS (W)



Computer (2)

ram 2GB

OS (M)





كما سبق فقد حذفت العامود األول في الصف الثاني

الصورة الثانية أكوادها هن

, ففي الصورة األولى كانت اكواد الصف الثاني على

الشكل التالي

Computer (2)

ram 2GB

OS (M)

فحذفت العبارة الملونة باللون األحمر ليصبح في الصورة الثانية على الشكل التالي

Crom 64GB

OS (W)

43


ومن ثم نضيف في الصف األول العامود األول عبارة

Computer (1)

إلى

Computer (1)

وكلما نزيد من الرقم 2 كلما حجزنا أكثر من الصفوف في نفس العامود

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

,


ونضع هذين الوسمين أسفل الوسم

>table<

مباشرةً‏

ويكون داخل هذين الوسمين الجزء المسؤول أو وسوم تنسيق الجدول

فمثالً‏ نريد تغيير لون أعمدة معينة على كل الصفوف

انظر على الشكل التالي

هذا هوا الجدول

الوسم األب فيه هو

وهذه هي األعمدة

44


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



في السطر األول الذي فيه رقم 2 باللون األحمر كنا نعني من الرقم 2 ان أول عامودين اعطي خلفيتهم لون

معين ف

style

background

تعني الشكل و

تعني خلفية اي خلفية العامود و

#E5E5F1

تعني كود اللون الذي استخدمته في تلوين أول عامودين

في السطر الثاني الذي فيه الرقم 1 الملون باللون األحمر

كنت اعني من الرقم 1 أن أول عامود بعد العامودين في السطر األول لونهم بلون معين

و لكن المطلوب منك معرفة شكل الوسم ككل css هذا ينتمي للغة style انظر ما بعد

السطرين السابقين



يضعان كا قلنا بين الوسمين


45


ملحوظة:‏ ترتيب التلوين في االعمدة يمكنك تعديله فيمكنك القول ان أول عامود يلون بلون و بعدها تقول ثاني

عامودين يلونون بلون معين تختاره

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












Computer (1)

ram 1GB

cpu intel



Crom 64GB

OS (W)



Computer (2)

ram 2GB

OS (M)





46


القوائم : الدرس 18( )

القوائم من األشياء المهمة و المستخدمة كثيراً‏ في أغلب المواقع فما هي و كيف نصنعها ؟

بدايةً‏ القوائم من خاللها يمكن وضع عدة فقرات في ترتيب معين و من خاللها يمكن ان ننظم الموقع و

نعطيه جمالية

مثال على حديثي انظر لهذه الصورة

كما كان مكتوب وضعت جملة

desktop computer components

html

حددتها بالوسم

>h3<

في أول سطر و عند كتابتها ب

و تحته مباشرة كتبت القائمة و التي هي موضوع درسنا،‏ الجملة السابقة

للتوضيح معناها (

مكونات الحاسب المكتبي

)

و تحتها وضعت قائمة بالمكونات

اآلن سأريك ما كتبت من وسوم لفعل هذه القائمة







Desktop computer components


screen

Mouse

box

keyboard

speaker




47


عملنا هو في الجزء ال body

ال

في أول سطر فيه كتبت العبارة التوضيحية موضوعة بين وسم >h3< و السطر الثاني و ما بعده إلى نهاية

body

هي القائمة

الوسمين األساسيين في القائمة السابقة هما


داخلهما تكون سطور القائمة او مكونات القائمة،‏ كل سطر في القائمة يوضع بين الوسمين


و هكذا لتكون النتيجة كما في الصورة في بداية الدرس mouse و الثاني screen في السطر األول كتبت

يوجد أيضاً‏ شيء مشابه للقائمة السابقة لكن تحتوي على ترتيب أكثر فالذي سوف نفعله ان نغير الوسمين

األساسيين من


إلى


و ستكون النتيجة هكذا

كما تشاهدون أن القائمة أصبحت مرتبة على ترتيب معين وهو األرقام

,

أحرف مثالً‏ a b c d

يعني الترتيب األبجدي لألحرف االنجليزية هكذا

إذا أردنا أن تكون بدل االرقام

داخل الوسم

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

type="a"

>ol< بعد ol

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


48


يمكنك أيضاً‏ ترتيب القائمة بحسب العد الروماني مثل هذا الشكل

يمكن عمل المثال السابق بتغيير الحرف a في


i إلى الحرف

أيضاً‏ يوجد ترتيب آخر مثل هذا

كما كان واضح لنا أن األرقام بدأت من الخمسة إلى الواحد أي أنه وضع ترتيب بحيث تكون االرقم

موضوعة في العكس ففي الحالة الطبيعية كان الترتيب يبداً‏ من الواحد إلى الخمسة فاآلن حصل أنه من

خمسة إلى واحد هذا الشيء يمكن عمله عند أضافة كلمة reversed داخل الوسم

كما قلنا إن الترتيب باستخدام الوسم

مسافة مثل الشيء هذا

>ol reversed<

>ol< بعد ol

>ol<

تكون نتيجته مثل هذا الشكل

بعد ترك

بعد

لكن إذا أردنا الترتيب من رقم معي مثالً‏ من الرقم 25

وبعده 26

start="25"

في الوسم ol

>ol<

و و و فيمكن عن طريق أضافة الكود

بعد ترك مسافة و يمكن تغيير الرقم 25 إلى الذي نريده،‏ الوسم >ol< سيكون هكذا


49


والنتيجة ستكون بعد تطبيقه على مثال درسنا

نأتي اآلن إلى جزء قد يفيد كثيراً‏ والذي هو هل يمكن وضع قائمة داخل قائمة ؟

نعم يمكنك

كيف ذلك ؟

كما قلت يمكن وضع قائمة داخل قائمة أيضاً‏ يمكن وضع قائمة داخل قائمة داخل قائمة و هكذا

يوجد لدينا نوعين من القوائم التي درسناها والتي هي القوائم المرتبة و القوائم الغير المرتبة أو التي ال

تحتوي على ترتيب معين،‏ القوائم المرتبة هي بين الوسمين

>ol/ol<

أما النوع الثاني هو

>ul/ul<

وكما قلنا ونزيد يمكن وضع قائمة مرتبة داخل قائمة غير مرتبة أو قائمة غير مرتبة داخل قائمة مرتبة مثالً‏

أنظر إلى هذا الشكل

كما موضح في الصورة التي سبقت أني قلت ال screen وضعت نوعين hd

أكتبها على سبيل المثال

و full hd

) و mouse

و wire نوعين

, wireless

عمل قائمة داخل القائمة الفرعية كما تحدثت

اآلن ناتي إلى كيف فعلت ذلك القائمة السابقة األساسية هي تبدأ ب الوسم

‏)األشياء التي

هكذا أعني بقائمة داخل قائمة ويمكن

>ol<

وتنتهي ب الوسم

>/ol<

ألنها قائمة مرتبة فالقائمة األولى داخل السطر األول والقائمة الثانية وضعت داخل السطر الثاني،‏

وللتوضيح الوسوم التي استعملتها هي

50


Desktop computer components


screen


hd

full hd



Mouse


Wire

Wireless



box

keyboard

speaker


كما سبق السطر األول في القائمة الرئيسية و الذي وسومه لونها أزرق أعني وسم البداية و وسم النهاية

وبعد كلمة screen وضعت القائمة الفرعية ‏)التي هي قائمة غير مرتبة

الممتدة من الوسم

)

>ol<

التي باللون االحمر إلى الوسم

>/ol<

للسطر األول في القائمة الرئيسية

التي أيضاً‏ باللون االحمر

,

الفرعية معلمة باللون الزهري أقصد وسم البداية و وسم النهاية في القائمة الفرعية

أنظر أن القائمة

51


مالحظة:‏ لم يتم حذف وسم النهاية في السطر األول من القائمة الرئيسة في المثال السابق بل حافظنا عليه

و قد لونته لك باللون األزرق

كما الحظنا و كما شرحنا كيفية وضع قائمة داخل قائمة فتحدثت كيف فعلت ذلك بالسطر األول بالقائمة

الرئيسية أيضاً‏ وضعت قائمة في السطر الثاني من القائمة الرئيسية والذي علمته باللون األخضر ولكن

االختالف

بين القائمة الفرعية االولى و القائمة الفرعية الثانية أن القائمة الفرعية األولى كانت قائمة فرعية

غير مرتبة وكانت القائمة الرئيسية مرتبة أم القائمة الفرعية الثانية كانت مرتبة و هذا الذي اقصده أنه

يمكن وضع قائمة مرتبة داخل قائمة غير مرتبة و العكس صحيح

وقلت أيضاً‏ ان يمكن وضع قائمة داخل قائمة داخل قائمة مثل هذا الشكل

كما فعلت أني وضعت قائمة للسطر الذي يحتوي على full hd و الوسوم المستعملة لعمل المثال السابق

هي

Desktop computer components


screen


hd

full hd


30fps

60fps


52




Mouse


Wire

Wireless



box

keyboard

speaker


اآلن نأتي إلى آخر شيء في هذا الدرس والذي يعتبر من القوائم و يشبهه و يستعمل لوصف شيء معين

أو لعرض خواص معينة و هكذا

الوسمين الرئيسين في هذا األخير هم

>dl/dl<

داخلهما نضع القائمة التي لها وسوم معينة و يمكن وضع أكثر من قائمة

مثالً‏ ننشأ قائمة بهذا الشكل

الوسوم التي عملت هذا الشكل هي

53


كما قلنا الوسمين الرئيسيين الذين سيحتويان على القوائم هم

داخلهما وضعت قائمة واحدة والتي عنوانها


Computer Advantages

Way to communicate

Way to learn


>dl/dl<

Computer Advantages

موضوع بين الوسمين

>dt/dt<

‏)مزايا الحاسوب(‏ , العنوان

Way

الوسمين السابقين يضع داخلهما عنوان القائمة أما كل من الجملتين

Way to communicate

و

to learn

هما عناصر القائمة و التين يوضعان بين الوسمين

>dd/dd<

القائمة السابقة يمكن أن نضيف قائمة بعدها قائمة لها عنوان وعناصر مثل هذه الصورة

الوسوم المستعمل هي


Computer Advantages

Way to communicate

Way to learn

Advantages of the Internet

People gathered in one village

To learn


54


الدرس )19( : النماذج / form ‏)الجزء األول(‏

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

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

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

المستخدم،‏ فمثالً‏ هذا الشكل التالي يمثل نموذج

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

body


< / body>

واألمر الرئيسي في النماذج هو



الوسمين السابقين هم األساس في النماذج يعني ما يكتب داخلهما يمثل النموذج

األن ما داخل الوسمين السابقين يوجد عدة وسوم الوسم األول


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

الوسم نفسه بعد كلمة

input

‏"هنا يكتب األسم"=‏name

فمثالً‏ هذا الكود

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

الموقع

فالوسم يصبح على الشكل التالي

55



وكال الوسمين مكتوبين بين الوسمين



لتكون النتيجة هكذا


username



ايضاً‏ يكتب داخل الوسم

>input<

كود من خالله ان يكون الحقل الخاص بالusername فارغ بل يكون

كالم يمكن مسحه وكتابة اسم المستخدم مثالً‏

مثال على كالمي

الكود الذي استخدم هو

value="osama"

ليصبح وسم

هكذا >input<


ايضاً‏ يوجد كود لجعل نص يظهر بالمكان الفراغ الكن يكون فاتح ويذهب عند الكتابة في المربع

الكود هو

placeholder="write here .."

57


وعند وضعه داخل الوسم input تصبح النتيجة


عندما يكتب داخل الوسم

input

تصبح النتيجة مثل هذا الشكل

واذ كتبنا ما داخل المستطيل يذهب النص لتصبح النتيجة هكذا

كلمة

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

في وسم input

>input<

maxlength="10"

حيث يتغير رقم 10 بالعدد الذي تريده ان يكتب في المستطيل اي عدد األحرف واألرقام

النوع الثاني ل

input

هو الخاص بكلمات السر ويتكون بهذا الشكل


حيث يضاف بعد عبارة

input

type="password"

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

58


النوع الثالث هو هذا المربع

إذا ضغطنا عليه يصبح كالشكل التالي

هذا الزر يفيد مثالً‏ تذكير المتصفح ببيانات التسجيل من اجل ال اكتبها كل مرة

الكود هو

type="checkbox"

وعند كتابته داخل الوسم

>input<


النوع الرابع هو زر التسجيل هو يقوم بإرسال البيانات للسيرفر الزر هو

نكتبه داخل الوسم

الزر يكتب بكتابة الكود

type="submit"

>input<

ليكون مثل الشكل التالي


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

وهذه الجملة تتغير بحسب اللغة في الجهاز

59


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

‏"هنا تكتب"=‏value

هذا الكود يكتب داخل الوسم

>input<

type="submit"

ليكون الوسم بالشكل النهائي مثل هذا

الذي يحوي


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

مع الjavascript هذا شيء ستعرفه اذا تعلمت الjavascript

الكود المسؤول عنه هو

type="button"

يمكن تعبئته بكالم عن طريق اضافة كود اضافي هو

‏"هنا يضع الكالم"=‏value

النوع الثامن هو زر الصورة فمثالً‏ تعمله عند الضغط على مكان معين في الصورة يقوم النموذج بإرسال

احداثيات الضغطة اي في اي مكان تم الضغط على الصورة المثال على شرحي

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

61


الكود المستعمل في المثال السابق يأتي ما داخل الوسم input


src حيث

ما بعدها يمثل مسار الصورة المستخدمة

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

يتكون المثال السابق من وسمين

هو جاء في كال وسمين

input

يربطهم اسم واحد فالذي كتبته في الصورة السابقة كانت األكواد هي

التالية

chrome



opera

ان الكود

name="Browser"

input

وهو يعني ان هذين الوسمين هم الخيارين الذان تختار منهم اختيار واحد

والذي باللون األخضر هو الموحد ويمكن تغييره لكن يجب ان يكون نفسه في كال الوسمين

فيمكن تغير ال

اما

value="chrome"

value="opera"

chrome

والشيء األساسي في هذا النوع من

opera و

input

type="radio"

اما

Chrome opera

بما ترغب

هو النوع والذي يعبر بكود

62


الذين جائو بعد الوسمين input فهما ما يظهران في النتيجة في الصورة السابقة

وفي األخير نأتي ل

>br<

هو الذي يمثل سطر بين كل

input

63


الدرس )20( : النماذج / form ‏)الجزء الثاني(‏

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

>input<

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

النصوص الوسم هو

>textarea< > /textarea<

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

فهذا المستطيل يمأل بالكتابة ويمكنك داخله من المتصفح يعني يكون في األصل فارغ او يمكنك كتابة نص

جاهز يكتب عند البرمجة مثل هذا الشيء

>textarea


الكود الثالث او الكلمة هي readonly هذه تكتب في وسم البداية من textarea حيث يصبح الجدول قابل

: مالحظة

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

يمكن كتابة جميع األكواد في وسم البداية

اقصد ان ال يمكن كتابة غير كود واحد في

الشيء الثاني في هذا الدرس هو ال

textarea

, وراء بعضها

textarea

select

انا فقط كنت اشرح األكواد ال

و ال option فمثالً‏ عند كتابة هذين الوسمين

>select< > /select<

فسوف تظهر هذه النتيجة

هذا الشيء هو زر اختيار من خالله تظهر قائمة تختار منها عند الضغط عليها والخيارات هي الوسوم

ه>‏ نا يكتب خيار‏ /option>

ه>‏ نا يكتب خيار‏ /option>

ه>‏ نا يكتب خيار‏ /option>

الوسوم السابقة بين الوسمين


فتكون النتيجة مثل التالي

65


عند الضغط عليها تصبح كالتالي

هذه يمكن تنسيقها بعدة اكواد التنسيقات على وسوم

option و select

كتابة فيه عدة اكواد فمثالً‏ الكود

‏"هنا يكتب االسم name="

اذا اتجهنا للوسم

االسم هو الذي يرسل لسيرفر عند ارسال النموذج له من اجل تعريف هذه القائمة

>select<

فيمكن

الكود الثاني هو لجعل القائمة غير قابلة للضغط عليها من اجل ذلك سنتكتب كلمة disabled لتصبح النتيجة

مثل هذا الشكل

مثل ما سبق أصبح زر االختيار بهذا الشكل وغير قابل للضغط عليه

نأتي األن لما داخل الوسمين

>select< > /select<

فيمكن تنسيق الوسوم

>option>c ar

>option>Bicycl e

>option>Motorcycle


بعدة طرق مثالً‏ يمكن جعل واحدة من الخيارات هي التي تظهر قبل الضغط على زر القائمة مثال الفرق بين

هذين الصورتين

هذا الشيء يمكن عمله بوضع كلمة selected في الوسم

>option<

>option

selected>Bicycl e

option

بعد كلمة option بهذا الشكل

يوجد كود هو يميز كل وسم وقت ارسال النموذج كامالً‏ لسيرفر هذا الكود هو

ايضاً‏

‏"هنا يكتب اسم او رقم"=‏value

بهذا الشكل والكود السابق يكتب بالوسم


كلمة motorcycle اصبحت باهتة في الصورة الثانية اي اصبحت غير قابلة للضغط او اختيارها ويمكن

ذلك بإضافة كلمة disabled في الوسم

>option<

Motorcycle>/option<

بهذا الشكل

اآلن عند كتابة عدة option فيمكن جمع مجموعة خيارات او option تحت اسم واحد مثل هكذا

68


يمكنك ذلك بوضع كل مجموعة وسوم

>option< > /option<

بين وسمين

‏optgroup disabled<

بهذا الشكل

69


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

حقل ادخال مخفي ال يظهر للمستخدم العادي الوسم هو

‏‏ نا تكتب عنوان المستطيل‏ /legend>

70


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




ت>‏ جربة‏ /title>





personal information

username




password





Upload a Photo





say something about yourself


71






other information

Choose Browser



chrome



opera




Why have





car

Bicycle

Motorcycle



72


Computer

Mobile








Buttons singup








الذي

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

73


الدرس )21( : الفرق بين block و inline

يتبين الفرق بين

و inline

بسطر كامل وهذا يعبر عنه ب

السطر الثاني اما

block

block

inline

inline

بحيث تكون بعض الوسوم عند كتابتها تكون النتيجة في صفحة الويب

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

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

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

مثال على كالمي في الفرق بين

inline و block

inline

test

الصورتين السابقتين اللتين باللون األزرق هما يندرجان تحت نوع بحيث جاءت الصورتين على

سطر واحد اما الكلمتين تقعان كل منهما على سطر واحد إلن كتبت كل كلمة بي الوسمين

>div< > /div<

وهذين الوسمين يندرجان تحت مفهوم

اما الصورة وسمها هو

block

‏ /p<

الذي سبق من نوع

block سبق وشرحته في درس سابق حيث يأخذ سطر كامل في صفحة الويب

74


هذه الوسوم h1 و

/h1<

>h2< > /

h 2>

h2

تندرج تحت نوع الblock بحيث تأخذ كل منها سطر كامل بها

يوجد ايضاً‏ هذا الوسم

>span< > /span<

حيث يكتب داخله نصوص وهو من النوع

inline

للمالحظة اذا كتبنا وسم

inline و وسم block

كما قلت وسم الblock يأتي في سطر خاص به في صفحة

الويب وال يمكن جمع النوعين في سطر واحد،‏ درس اليوم كان درس سهل وبسيط وهو اخر درس في هذه

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

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

75


76