نبدأ معكم اليوم درسنا الأول في لغة برمجة الويب HTML
هذه اللغة ستكون بسيطة وسهلة وليست معقدة و يمكن تعلمها بسرعة
و كما ذكرت في المقدمة فإن البرامج المساعدة على تصميم المواقع يمكنها إنجاز معظم ما نكتبه من أكواد بدون الحاجة لكتابة الأكواد البرمجية ولكن من الضروري جداً تعلم هذه اللغة حتى نستطيع التحكم بمحتويات صفحة الانترنت التي نصممها بشكل متقن و أيضاً هناك بعض الأمور لا يمكن إنجازها إلا من خلال كتابة الأكواد البرمجية و أيضاً عندما ننتقل إلى باقي اللغات يجب أن تكون هذه اللغة من البديهيات حتى نستطيع العمل عليها
لنبدأ:
سأعرض كود و نعلق عليه
هذا كود أساسي وسيكون مرافق لكم دوماً في كل صفحات الانترنت التي نكتبتها
إن طريقة كتابة أكواد HTML تعتمد على ما يسمى tag أو يسمى بالعربية وسم ( مع أني لا أحب هذه الكلمة.png "TahasoftSmile (23)")
)
و إن لكل وسم tag بداية ونهاية
بدأنا الكود السابق بالـوسم التالي :
حيث تم كتابة HTML بين قوسين كما هو موضح
ويتم الإغلاق كالتالي:
و بينهما يوضع عدة أكواد أو أشياء أخرى
و الوسم الذي ذكرت HTML معناها أن بين علامتي الفتح و الاغلاق المذكورتين سيتم كتابة
اكواد بلغة البرمجة HTML
( سنرى وسم آخر لكل لغة أخرى )
ثم بعده جاء الوسم head أو الترويسة
وتم فتحه و إغلاقه بطريقة مشابهة لسابقه
و بعده جاء الوسم body
لاحظ عزيزي المتابع أني تركت فراغاً بعد الوسم head و فراغاً بعد الوسم body
حيث أن كل ما سنكتبه سيأتي في هذين الفراغين
أي أن معظم الاكواد تكتب بين وسمتي الرأس tag أو وسم body
وغالباً مايكون وسم head مسؤولاً عن اسم الصفحة و كلمات البحث و بعض أكواد css,javascript كما سنرى لاحقاً
و الجزء الأكبر يكون حمله على body
لنرى الكود التالي:
جرب كتابة هذا الكود في الصفحة
اكتبه على أحد المحررات التي تعتمد عليها من برامج سابقة الذكر مثل notepad التي نشتغل عليها منذ البدايه
ثم احفظ الصفحة بأي اسم مع امتداد htm. أو html.
أي لو كتبته في برنامج المفكرة عندك قم بحفظ الصفحة بأحد الامتدادين لكي تصبح صفحة انترنت
ثم شغلها فترى النتائج
لنبدأ الآن دراستنا
وسم كتابة العناوين headings
حيث أننا سندرس كل tag و نشرح ما يفعله
اكتب الكود التالي:
إن الوسم h مسؤول عن كتابة النص بشكل كبير
حيث إن هذا الوسم يمكن كتابته بدءاً من h1 إلى h6
وعند الرقم 1 تكون أكبر قيمة للحجم و بالعكس
جرب بنفسك
وسم كتابة الفقرات Paragraph
جرب الكود التالي
وضع سطر كفراغ break
إذا لاحظت أن الكود السابق كتبنا عدة أسطر في داخل الوسم p
ولكن ظهر كسطر واحد , وفي حال أردنا وضع النص على أسطر نضع الوسم التالي
هذا مسؤول عن وضع فراغ " يمكن كتابة <br> هكذا ولكن يفضل السابقة
وسيصبح الكود السابق كالتالي لو أردنا تقسيمه لأسطر
ملاحظة : وجود أسطر في الكود لا تعنى شيئاً عن التنفيذ
إنما نضعها لتحسين منظر الكود فقط
نكتفي بهذا القدر اليوم و أتمنى أن تطبقوا ماذكر حتى نتابع معاً
و أي شخص عنده استفسار فليضعه في المشاركات
و بشكل عام حاول أن تكتب الكود بنفسك لا أن تعتمد على النسخ و اللصق و حاول تعمل بعض التغييرات و التعديلات عليه لترى النتائج
هذه اللغة ستكون بسيطة وسهلة وليست معقدة و يمكن تعلمها بسرعة
و كما ذكرت في المقدمة فإن البرامج المساعدة على تصميم المواقع يمكنها إنجاز معظم ما نكتبه من أكواد بدون الحاجة لكتابة الأكواد البرمجية ولكن من الضروري جداً تعلم هذه اللغة حتى نستطيع التحكم بمحتويات صفحة الانترنت التي نصممها بشكل متقن و أيضاً هناك بعض الأمور لا يمكن إنجازها إلا من خلال كتابة الأكواد البرمجية و أيضاً عندما ننتقل إلى باقي اللغات يجب أن تكون هذه اللغة من البديهيات حتى نستطيع العمل عليها
لنبدأ:
سأعرض كود و نعلق عليه
<html> <head> </head> <body> </body> </html>
هذا كود أساسي وسيكون مرافق لكم دوماً في كل صفحات الانترنت التي نكتبتها
إن طريقة كتابة أكواد HTML تعتمد على ما يسمى tag أو يسمى بالعربية وسم ( مع أني لا أحب هذه الكلمة
)و إن لكل وسم tag بداية ونهاية
بدأنا الكود السابق بالـوسم التالي :
<html>
ويتم الإغلاق كالتالي:
</html>
و الوسم الذي ذكرت HTML معناها أن بين علامتي الفتح و الاغلاق المذكورتين سيتم كتابة
اكواد بلغة البرمجة HTML
( سنرى وسم آخر لكل لغة أخرى )
ثم بعده جاء الوسم head أو الترويسة
وتم فتحه و إغلاقه بطريقة مشابهة لسابقه
و بعده جاء الوسم body
لاحظ عزيزي المتابع أني تركت فراغاً بعد الوسم head و فراغاً بعد الوسم body
حيث أن كل ما سنكتبه سيأتي في هذين الفراغين
أي أن معظم الاكواد تكتب بين وسمتي الرأس tag أو وسم body
وغالباً مايكون وسم head مسؤولاً عن اسم الصفحة و كلمات البحث و بعض أكواد css,javascript كما سنرى لاحقاً
و الجزء الأكبر يكون حمله على body
لنرى الكود التالي:
<html> <body> <h1>دورة برمجة الويب</h1> <p>الدرس الأول</p> </body> </html>
جرب كتابة هذا الكود في الصفحة
اكتبه على أحد المحررات التي تعتمد عليها من برامج سابقة الذكر مثل notepad التي نشتغل عليها منذ البدايه
ثم احفظ الصفحة بأي اسم مع امتداد htm. أو html.
أي لو كتبته في برنامج المفكرة عندك قم بحفظ الصفحة بأحد الامتدادين لكي تصبح صفحة انترنت
ثم شغلها فترى النتائج
لنبدأ الآن دراستنا
وسم كتابة العناوين headings
حيث أننا سندرس كل tag و نشرح ما يفعله
اكتب الكود التالي:
<h1>سبحان الله</h1> <h2>سبحان الله</h2> <h3>سبحان الله</h3>
إن الوسم h مسؤول عن كتابة النص بشكل كبير
حيث إن هذا الوسم يمكن كتابته بدءاً من h1 إلى h6
وعند الرقم 1 تكون أكبر قيمة للحجم و بالعكس
جرب بنفسك
وسم كتابة الفقرات Paragraph
جرب الكود التالي
<p> أهلاً وسهلاً بكم مع سلسلة دروس تعلم لغة برمجة الويب على محترفي الكمبيوتر </p> <p> نتمنى لكم التوفيق </p>
وضع سطر كفراغ break
إذا لاحظت أن الكود السابق كتبنا عدة أسطر في داخل الوسم p
ولكن ظهر كسطر واحد , وفي حال أردنا وضع النص على أسطر نضع الوسم التالي
<br/>
وسيصبح الكود السابق كالتالي لو أردنا تقسيمه لأسطر
<p> أهلاً وسهلاً بكم مع سلسلة <br/> دروس تعلم لغة برمجة الويب <br/> على محترفي الكمبيوتر </p> <p> نتمنى لكم التوفيق </p>
ملاحظة : وجود أسطر في الكود لا تعنى شيئاً عن التنفيذ
إنما نضعها لتحسين منظر الكود فقط
نكتفي بهذا القدر اليوم و أتمنى أن تطبقوا ماذكر حتى نتابع معاً
و أي شخص عنده استفسار فليضعه في المشاركات
و بشكل عام حاول أن تكتب الكود بنفسك لا أن تعتمد على النسخ و اللصق و حاول تعمل بعض التغييرات و التعديلات عليه لترى النتائج
ليست هناك تعليقات:
إرسال تعليق