الدرس الأول (( قسم المبتدئين )) Html في لغة الربمجة

من طرف **Admin** الإثنين يونيو 22, 2009 10:09 am

الدرس الأول في لغة البرمجة :: Html :: (( قسم المبتدئين )) .....

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);

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

أخواني الكرام ها نحن نبدأ قسمنا الأول من أقسام دورة لغة البرمجة HTML

(( القسم الأول مبتدئ ))

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

وسنقوم بعمل تطبيقات صغيرة لنتعرف على أننا على الطريق الصحيح

هل سألت يوماً ما هي لغات البرمجة ؟؟

هل سألت يوماً كيف يتم الاستفادة من هذه اللغات ؟؟ وكيف تتعلمها ؟؟

هل فكرت يوماً أو حاولت به أن تتعلم ولو جزء يسير من لغات البرمجة ؟؟

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

كيف ؟؟ لماذا ؟؟ متى ؟؟ أين ؟؟ ......الخ

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

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

طالما وجدت لديك الرغبة والتقبل

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

ولاكن مع ممارستها ستجد نفسك مبدع كما أنت مبدعاً الآن

لرغبتك في قراءات هذا الموضوع فهذا يدل على تقبلك للموضع إذاً .. (( أنت مبدع ))

ملاحظة هامة : (( العمل سيكون بالمفكرة NotePad))

ونبدأ الآن التعريف بلغة البرمجة ..

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

حيث أسم اللغة هذي هو : Hyper Text Markup Languge

(( لغة الارتباطات النصية التشعبية ))

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

مثلاً الرمز <HTML>

هو ترميز بداية الصفحة لأن صفحات الأنترنت تكون بلغة الترميز HTML

ولمشاهدة لغات الترميز التي سنتحدث عنها توجه إلى أحد الموقع التي تعرفعها

وقم بالضغظ على زر عرض ومن ثم المصدر

ستجد أن المفكرة فتحت ومكتوب فيها أكواد كثيرة بدت بــ <HTML>

وأنتهت بــ </HTML>

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

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

أجي الحين أوضح لكم أهم الرموز الي موجودة بالــ HTML

أولاً : الترميز <HTML>

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

صفحة إنترنت وقمنا بنهاية الصفحة بوضع الترميز </HTML>

مميزاً ببداية بوضع / وهي تدل على القفل أو بالأحرى تدل على إيقاف الترميز المطلوب

أي نهاية صفحة الأنترنت ..

بداية الصفحة ==> <HTML>

نهاية الصفحة ==> </HTML>

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

<HTML>

</HTML>

قم بحفظ المفكرة التي قمت بعملها بأسم خاص بك مثلاً (( صفحتي )) بعد كلمة صفحتي

تكتب .html ولاتنسى علامة دوت لكي تحدد نوع الملف بأنه صفحة إنترنت

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

ستجد أن صفحتك موجودة على أنها صفحة إنترنت ..

إذا الآن تعلمنا كيف نفتح صفحة وكيف يتم إغلاقها بالترميز السابق

قم بفتح الصفحة وستجد أن الصفحة فارغة المحتوى (( تأتي بيضاء ))

البعض يسأل لماذا ؟؟

الجواب هو عدم وجود أي معلومات قمنا بوضعها ليتم عرضها إذا لايوجد

معلومات .. حسناً الآن مارأيك لو نقوم بإدخل بعض المعلومات للصفحة ؟؟

إذا كنت موافقاً أكمل الدرس معنا وإن لم توافق يمكنك أخذ إستراحة قصيرة وتكمل الدرس لاحقاً

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

كالإنسان تماماً ولاكن طبعاً الإنسان مكون من عظام ولحم وأما صفحات الإنترنت من أكواد ورموز J

رأس الصفحة يكون باسم هيد Head أي أن الترميز الخاص بها يكون <head>

ويكون إغلاق الترميز كالتالي : </head>

وأيضاً ترميز الجسم هو body

يكون ترميزه <body> وإغلاق الترميز </body>

أي أنه عندما نضع ترميز من التراميز السابقة التي قد قمنا بذكرها سابقاً
في نهاية الترميز نضع الرمز / فهذا هو رمز الإغلاق ونقوم بوضعه بعد فتح القوس قبل الكلمة كـــــ

</HTML>

إذاً حان الوقت لنقم بتطبيق عملي لنرى ماهو الناتج :

طبق التالي كما هو موضوح

<HTML>
<HEAD>
صفحتي الأولى
</HEAD>
<BODY>
أهلا وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي
</BODY>
</HTML>

قم بحفظ المثال السابق عن طريق المفكرة بأسم خاص بك ولاتنسى .html

حيث سيكون أسم الملف مثلاً xxxx.html

حيث أنxxxx هو أسم الملف الخاص بك

ثم قم بحفظ الملف على سطح المكتب لكي يسهل الوصول إلية

J

وبكذا أنت سويت أول صفحة من برمجتك الخاصة

ولاكن عندما نقوم بحفظ الصفحة على

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

صفحتي الأولى أهلاً وسهلا بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي

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

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

صفحتي الأولى

أهلاً وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي

؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

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

طيب وش هو الترميز هذا ؟؟؟؟؟

الترميز هو : br
 

طيب الحين نجرب تطبيق المثال السابق إلى طبقناه أول

بس الحين بعد الترميز </HEAD>

نحط الترميز هذا

 

وعادي لو تحط التراميز بأحرف صغيرة أو كبيرة ماراح تفرق

بعد ماحطينا الكود السابق حق النزول سطر

راح يكون عندنا البرمجة الجديدة كالتالي :

<HTML>
<HEAD>
صفحتي الأولى
</HEAD>
 
<BODY>
أهلا وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي
</BODY>
</HTML>

طبق المثال السابق بالمفكرة وأحفظة كما قد تم ذكرة مسبقاً

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

و أهلاً وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي

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

و أهلاً وسهلا بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي تأتي على اليمين

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

سأقوم بذكر التراميز وذكر مواقعها

1 – الترميز النصفي والإغلاق يكون بــ 

2 – الترميز الأيمن والإغلاق يكون بــ 

3 – الترميز الأيسر والإغلاق يكون بــ 

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

التراميز السابقة أستخدامها واحد فقط يتم التغيير في المغير المراد مثل : center or right or lift
 صفحتي الأولى 

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

نطبق المثال السابق ولاكن بالتعديل الجديد كالتالي :

<HTML>
<HEAD>
صفحتي الأولى
</HEAD>
 
<BODY>
أهلا وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي
</BODY>
</HTML>

جرب المثال السابق بالمفكرة وستلاحظ الناتج وقم بتغير كلمة

center

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

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

بنفس الطريقة كالمثال التالي :

<HTML>
<HEAD>
صفحتي الأولى
</HEAD>
 
<BODY>
أهلا وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي
</BODY>
</HTML>

شرح المثال السابق :

طلبنا من الصفحة بعرض جملة صفحتي الأولى بوضعها بالمنتصف

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

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

رغبت به ..

طيب وش رأيكم لو نسوى شوية إبداع بالجمل إلي نحطها مثلاً نكبر الخط أو نصغره أو نغير لونه

عشان نكبر أو نصغر الخط نستخدم الترميز التالي :

 هذا للفتح وطلب العرض

 وهذا لغلق الترميز

راح أشرح لكم أحجام الخطوط الموجودة عندنا بالبرمجة هذي

طبعاً أكبر خط نحطه بالرقم 7 زى ما هو واضح بالمثال إلي فوق يعني واحد أكبر خط موجود

وهكذا 6 أصغر من 7 بقليل وهكذا حتى نصل للرقم 1 وهو أصغر خط معروف

جرب تطبيق المثال إلى ذكرناه سابقاً مع إدخال الترميز الجديد

<HTML>
<HEAD>
صفحتي الأولى
</HEAD>
 
<BODY>
أهلا وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي
</BODY>
</HTML>

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

الحين وش رايكم نلون الخط ؟؟

طيب تلوين الخط سهل مره وحلو لأنه يعطي شكل جميل للخط

Color كود اللون هو

ويكون ترميزه كالتالي :

COLOR="#كود اللون"

<HTML>
<HEAD>
صفحتي الأولى
</HEAD>
 
<BODY>
أهلا وسهلاً بكم في صفحتي الأولى والتي سأتحدث بها عن نفسي
</BODY>
</HTML>

قم بتجربة المثال السابق ولاحظ ماذا قمنا ببرمجته بلحظات قليلة ؟؟

إذاً الآن تستطيع أن تقوم بعمل الصفحة ووضع الجمل التي تريدها وأن تقوم بتكبيرها وتصغيرها
وأن تغيير لون الخط حسب ماأردت ..

في هذا الدرس قمت بشرح البدائيات والرموز الهامة أما في الدرس القامة سوف

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

HTML

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

فتقبلوا أشواقي حتى نلتقي في درس آخر

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

لتعم الفائدة على الجميع

أخــــوكـــم

محترف تصميم
مقتـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــبس من موقـ سوالف سوفت ـــــ ع