نبدأ معكم اليوم درسنا الأول في لغة برمجة الويب 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
ولكن ظهر كسطر واحد , وفي حال أردنا وضع النص على أسطر نضع الوسم التالي

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

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




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




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





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

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



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