زهير طه

71

7,487

دورة البرمجة بلغة html الدرس 1



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

وذكرت في المقدمة بعض البرامج المساعدة على كتابة الكود
وبشكل عام في هذه البرامج غالباً ما نجد صفحة عمل البرنامج مقسمة لعدة أقسام
فلو أخذنا برنامج Front Page سنجد في أسفل الصفحة الأقسام التالية:
Design لتصميم الصفحة بدون الحاجة لكتابة كود
Code لعرض الكود فقط
Split لعرض الكود مع الناتج
Preview لاستعراض الناتج




وبالنسبة لي أميل لأن أترك الوضع على split لمعاينة النتائج عند كتابة الكود
و أيضاً تساعد هذه البرامج على كتابة الكود فعند البدء بكتابة الكود كما ستتعودون لاحقاً ستجد أن البرنامج يعطي اقتراحات و أيضاً هناك ما يسمى الوسوم ستقوم البرامج التي ذكرناها في المقدمة بالمساعدة على الإغلاق و...

وكما وعدت وضعت لكم صفحة هنا على موقع طه سوفت بحيث يمكنكم العمل و التجربة خلال دروس html بشكل مباشر
رابط الصفحة :
http://www.tahasoft.com/code.htm



لنبدأ:
سأعرض كود و نعلق عليه








هذا كود أساسي وسيكون مرافق لكم دوماً في كل صفحات الانترنت التي نكتبتها
إن طريقة كتابة أكواد HTML تعتمد على ما يسمى tag أو يسمى بالعربية وسم ( مع أني لا أحب هذه الكلمة )
و إن لكل وسم tag بداية ونهاية
بدأنا الكود السابق بالـوسم التالي :

حيث تم كتابة HTML بين قوسين كما هو موضح
ويتم الإغلاق كالتالي:

و بينهما يوضع عدة أكواد أو أشياء أخرى
و الوسم الذي ذكرت HTML معناها أن بين علامتي الفتح و الاغلاق المذكورتين سيتم كتابة
اكواد بلغة البرمجة HTML
( سنرى وسم آخر لكل لغة أخرى )
ثم بعده جاء الوسم head أو الترويسة
وتم فتحه و إغلاقه بطريقة مشابهة لسابقه
و بعده جاء الوسم body
لاحظ عزيزي المتابع أني تركت فراغاً بعد الوسم head و فراغاً بعد الوسم body
حيث أن كل ما سنكتبه سيأتي في هذين الفراغين
أي أن معظم الاكواد تكتب بين وسمتي الرأس tag أو وسم body

وغالباً مايكون وسم head مسؤولاً عن اسم الصفحة و كلمات البحث و بعض أكواد css,javascript كما سنرى لاحقاً
و الجزء الأكبر يكون حمله على body



لنرى الكود التالي:


دورة برمجة الويب


الدرس الأول





جرب كتابة هذا الكود في الصفحة
http://www.tahasoft.com/code.htm
فترى النتيجة فوراً
أو اكتبه على أحد المحررات التي تعتمد عليها من برامج سابقة الذكر
ثم احفظ الصفحة بأي اسم مع امتداد htm أو html
أي لو كتبته في برنامج المفكرة عندك قم بحفظ الصفحة بأحد الامتدادين لكي تصبح صفحة انترنت
ثم شغلها فترى النتائج



هذا ماثل لكي تلاحظ كل وسم كيف يتم فتحه و إغلاقه و كيف يتم كتابة الكود داخل الوسم tag



لنبدأ الآن دراستنا

وسم كتابة العناوين headings


حيث أننا سندرس كل tag و نشرح ما يفعله
اكتب الكود التالي:

طه سوفت


طه سوفت


طه سوفت


إن الوسم h مسؤول عن كتابة النص بشكل كبير
حيث إن هذا الوسم يمكن كتابته بدءاً من h1 إلى h6
وعند الرقم 1 تكون أكبر قيمة للحجم و بالعكس
جرب بنفسك



وسم كتابة الفقرات Paragraph


جرب الكود التالي

طه سوف


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


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



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





وضع سطر كفراغ

break


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


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


أهلاً وسهلاً بكم مع سلسلة


دروس تعلم لغة برمجة الويب


على منتديات طه سوفت



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


ملاحظة : وجود أسطر في الكود لا تعنى شيئاً عن التنفيذ
إنما نضعها لتحسين منظر الكود فقط




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

التعليقات (10)

abubkir     

وهذا تطبيقي
ما رأيك






http://ashbalsy.p2h.info/vb




منتديات أشبال سوريا


منهـل     
فلسطيني وافتخر     

شو هاد يا معلم فعلا ابداع متواصل

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

ابداع × ثقة = طــ سوفت ــه

وهذا تطيبق الدرس







طه سوفت







منتدى رائع بل أروع من رائع


واكثر ما يجعله رائعاً




مديره الرائع: زهير طه




kenan     
شكرا كتير إلك أخي زهير .....
بالنسبة إلي هالموضوع إجا بصدفة حلوة ...
لاني كنت عم بتعلم هاللغة وحدي ....
ووصلت بنفس المكان اللي وصل فيه الدرس 4 ....
شكرا كتير...
حاليا عم راجع شوي فيها ...
ورح كمل معك .......

مشكووووووووووور

وفعلا هي لغة سهلة وحلوة ....
بس تطبييها صعب شوي ومانها مرنة كتير .... لهيك بيضل الواحد مضطر ستخدم لغة css الإنسيابية .....
وشكرا من جديد !!
زهير طه     
أهلاً waddahkh
بالنسبة للعنوان له وسم خاص اسمه title
يعني يكتب كما يلي:
العنوان هنا

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


هذا هو العنوان الذي كتبته



أهلاً وسهلاً بكم في دورة برمجة الويب



أتمنا أن لكم المتعا الفائدة


برعاية منتدى طه سوفت



لنبدأ بدرسنا الأول




بس عندي مشكلة واحدة أنو عنوان الصفحة الذي كتبته في الوسم head لم يظهرفي العنوان كما كنت أتوقع بل ظهر في body
زهير طه     
تمام شباب
بما أن تحسنت متابعة الدروس لشد الهمة أنا كمان و أسرع بوضع الدروس
ابو حماد     


اهلا وسهلا بكم مع سلسلة


دروس تعلم لغة برمجة الويب


على منتديات طه سوفت



والف الف شكر من ابو حماد

حسن صحارى     
مشكوووووووور يغالي
الدرس غاية في السهولة
وإليك التطبيق:
 

www.tahasoft.com طه سوفت للبرامح


دورة برمجة الويب


الـــدرس الأول


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


M.nshawaty     

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

التطبيق



طه سوفت للبرامح


دورة برمجة الويب


الدرس الأول



فعلاً كان درس مهم وسهل وراائع بكل معنى الكلمة