قمنا في المقالة السابقة بالتعرف على بعض الأمور البسيطة حول عالم تطوير المواقع , وهي مجرد مقدمة بسيطة ومختصرة , في هذه المقالة سنتعرف على أهم لغة عندما يتعلق الأمر ببناء المواقع ,حيث أن لغة HTML لا غنى ولا يوجد لها بديل لبناء الهيكل الأساسي للموقع , سابقا كانت تستخدم تقنية الفلاش , لكن هذه التقنية أصبحت من الماضي .
لهذا فإن تعلم إتش تي إم إل هو أول خطوة نحو تعلم تصميم المواقع , كلمة HTML هي إختصار ل HyperText Markup Language , وهي مهمة حيث دورها يكمن في وصف عناصر الصفحة , مثل وضع صورة هنا أو حقل لإدخال النصوص هناك.
تعلم HTML
تعتبر من أسهل اللغات التي يمكن التعامل معها , فهي عبارة عن أكواد أو وسوم “Tags” كل Tag لديه مهمة معينة , على سبيل المثال فإن <H1> لديه مهمة وهي الإشارة إلى عنوان الصفحة , أو <body> وهو يستخدم للإشارة إلى جسم الصفحة أو الجزء الظاهر منها , حيث أن جميع العناصر التي تريدها أن تكون جزء من الصفحة الظاهر يجب أن تضعه بين <body> …. <body/> كما تلاحظ فهذا الوسم يحتاج لأن يتم إقفاله عن طريق إستخدام “/” و سنتعرف على هذا الأمر بشكل أفضل فيما يلي.
هناك الكثير من الوسوم لكن من السهل حفظها مع الإستخدام , كما يمكنك دائما الإستعانة بالتوثيق الخاص باللغة الذي يمكنك الوصول له من خلال موسوعة حسوب وهي أول موسوعة عربية توفر توثيق إحترافي للعديد من اللغات الشهيرة , من الجيد الإعتياد على تصفحها و الدخول إليها لمعرفة أي شيء عن اللغة مثل فيما يستخدم هذا الوسم وكيف .
الأن نمر للتالي , وهو كيف تبدوا صفحة HTML بسيطة , إليك الجواب
<!DOCTYPE html> <html lang="en" dir="rtl"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
تم إنشاء اللغة سنة 1989 وكان الهدف من إنشائها هو تسهيل عملية تبادل الأوراق العلمية , طبعا النسخة التي كانت متوفرة في ذلك الوقت لم تكن تملك الإمكانيات المتوفرة حاليا.
التعليقات في HTML
التعليقات خاصية ستجدها في جميع اللغات بدون إستتناء , التعليقات تمكن من ترك الملاحظات داخل أجزاء الشيفرة أو الأكواد التي تكتبها , هذه التعليقات تساعد على فهم ما تقوم به , وتساعد أنت وتساعد غيرك , على سبيل المثال إن أتى شخص أخر ليكمل أو يقوم بالتعديل على موقع كنت تقوم ببنائه , من أجل فعل هذا سيقوم بقراءة التعليقات لفهم الطريقة التي كنت تعمل بها , وأيضا سيسهل عليه إيجاد الأجزاء المحددة التي يبحث عنها ,وهنا مثال بسيط على التعليقات
<!--تعليق ما -->
ميزة التعليقات أنه يتم تجاهلها من قبل المفسر , وهنا نتحدث عن المتصفح , أي أن المتصفح لا يقوم بتنفيد التعليقات ,بل ببساطة يقوم بتجاهلها, إذن فإن طريقة كتابة التعليقات داخل صفحة HTML هي كالتالي
<!-- -->
هنا تقوم بكتابة ماتريد داخل الوسم , وكما سبق كل ما قمت بكتابته سيتم تجاهله.
تذكير
كما سبق الإشارة في المقالة الأولى , للإستمرار تحتاج إلى محرر نصوص ومتصفح , فيما يتعلق بمحرر النصوص أقترح عليكم محرر Atom يمكنكم تحميله من الموقع الرسمي, ولا تقلق من نظام التشغيل لديك ,حيث أنه متوفر لجميع الأنظمة المعروفة , مثل لينكس ويندوز و ماك.
أيضا ستحتاج إلى متصفح من أجل تجربة الأكواد التي ستقوم بكتابتها , وبهذا الخصوص أنصح بمتصفح جوجل كروم الشهير , حيث أنه الخيار الأول للكثيرين وأيضا لأنه يأتي مع الكثير من الإمكانيات على رأسها خاصية “Inspect element” وهي خاصة بالمطورين و سنحتاج لها فيما بعد.
الأن سنقوم بإنشاء مجلد سمه ما شئت , هذا المجلد سنضع فيه جميع الملفات الخاصة بهذه السلسلة من الشروحات , داخل المجلد الذي قمت بإنشائه قم بإنشاء ملف , وتأكد أن هذا الملف ينتهي ب “.html” وهذا مثال على هذه الخطوات
بالنسبة لي هنا قمت بإنشاء مجلد وأسميته “bootcamp”
أيضا قمت بإنشاء ملف “firspage.html” داخل المجلد
نقوم الأن بفتح الملف “firspage.html” باستخدام محرر النصوص Atom أو أي محرر نصوص تحب , ول نقم بكتابة عناصر صفحة HTML الأساسية , وهي كما سبق كالتالي :
<!DOCTYPE html> <html lang="en" dir="rtl"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- عنوان النص --> <h1> السلام عليكم , ياله من يوم جميل! </h1> <p> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. </p> </body> </html>
قم الأن بحفظ ما كتبته وافتح الملف “firspage.html” أو كما سميته أنت , قم بفتحه بإستخدام المتصفح , يمكنك فعل ذلك عن طريق النقر على الملف بإستخدام الزر الأيمن للفأرة ثم إفتح بواسطة المتصفح , والنتيجة من المفترض أن تكون على هذا الشكل
إضافة القوائم
القوائم عنصر مهم في أي صفحة ويب , لهذا هنا سنتعرف على المزيد من الخصائص التي توفرها لغة HTML ,طبعا تذكر أننا لن نتطرق إليها كلها بل فقط البعض من هذه الخصائص , ويمكنك دائما زيارة صفحة التوثيق الخاصة باللغة للتعرف على مزيد.
في القوائم ستجد نوعان هما :
- ال “OL” أي القوائم المرتبة وهي تبدأ من الرقم 1 وهي إختصار ل Ordered List
- ال “UL” أي القوائم الغير مرتبة وهي عبارة عن نقاط لا تتبع ترتيب محدد , وهي إختصار ل Unordered List
طبعا ال OL و UL داخلهما العنصر “LI” وهو إختصار ل “List Item” أي عنصر القائمة و سنتعرف طبعا على طريقة عملها.
لنقم الآن بتجربة مثال بسيط على القوائم في HTML , قم الآن بفتح محرر النصوص وتحديدا ملف firspage.html وقم بكتابة ما يلي داخل وسم <body> </body>
هذه القائمة كما يمكن أن تستنتج هي قائمة مرتبة , حيث تم إنشائها باستخدام الوسم <ol> </ol> والذي كما سبق يعني Ordered List
<ol> <li>أخضر</li> <li>أزرق</li> <li>أحمر</li> </ol>
الآن لنقم بإنشاء قائمة غير مرتبة , ماذا سنستخدم الأن ؟
طبعا سنستخدم <ul> </ul> أي Unordered List وهنا مثال بسيط
<ul> <li> أخضر </li> <li> أزرق </li> <li> أحمر </li> </ul>
الدرس السابق : دورة تطوير المواقع : مقدمة الدرس الثالي : دورة تطوير المواقع : تعرف على Div و Forms