2- HTML – إعداد الحاسوب من أجل تعلم لغة html لتصميم المواقع و بعض الاساسيات

السلام عليكم متابعي و زوار مدونة العلوم سبيلنا, اليوم نبدأ الدرس الثاني من دورة تصميم المواقع, و الدرس الاول من الجزء الاول اتش تي ام ال. وفي هذا الدرس سنقوم بإعداد حاسوبنا للانطلاق في تعلم لغة html لتصميم المواقع, و للمعلومة فإن html لا تعتبر لغة برمجة لذلك فهي سهلة جدا للتعلم. و بعد الانتهاء من تحميل البرنامج اللازم لبدأ التعلم سنبدأ بأول دروس html حيث سنبدأ بتعليم أساسيات هذه التقنية و تعريف أهم مصطلحاتها. انا أرى أن تجهيز الحاسوب أمر ضروري من الناحية البيداغوجية, لأني أرى أن أفضل طريقة لتعلم تقنيات الواب أو البرمجة بصفة عامة هي بأن يقوم المتعلم بتجربة الأكواد بمفردة و مراجعة النتيجة التي تحصل عليها.

المرحلة الأولى: تجهيز الحاسوب من اجل تعلم لغة html

كلما نحتاجه من أجل تصميم موقع html هو المتصفح و برنامج تحرير النصوص أو المفكرة. هناك العديد من برامج الكتابة أو تحرير النصوص مثل Sublime Text و ATOM و Vim و Notepad++, و كل هذه البرامج جيدة و أظنها كلها مجانية لكننا في هذه الدورة سنستعمل برنامج Notepad++  ولك حرية اختيار المحرر الذي ترتاح له. وبعد تنصيب المحرر بإمكانك تعلم لغة html عن طريق التجربة و مراجعة نتيجة ما كتبته بمفردك.

يمكنك مشاهدة الشرح بالفيديو لمتابعة عملية تحميل و تنصيب Notepad++.

المرحلة الثانية: البدأ في تعلم HTML عن طريق التجربة

اساسيات لغة html

ال html هو عبارة عن كود به مجموعة من العناصر و السمات و كل عنصر مسؤول عن اظهار شيء معين في المتصفح, فلو اردنا مثلا اظهار صورة في الصفحة التي نصنعها نكتب هذا الكود فقط:


<img src="هنا يوضع رابط الصورة" >

في هذا الكود يوجد عنصر الصورة وهو <img>  و توجد أحد سمات الصورة الاساسية و هي src وهي تمثل رابط الصورة المراد إنشائها. هناك العديد من السمات الخاصة بعنصر الصورة لكن أردت تبسيط الكود قدر المستطاع في هذا المثال حتى تفهم أخي المتابع معنى عناصر و سمات ال html. و سنرى تفصيلا أكثر حول الصورة و خول كل عنصر من عناصر الاتش تي ام ال على حدى في دروس مقبلة إن شاء الله.

إذا جربنا كود الصورة بمفرده في المحرر فإنه سيعمل. لكن يحب أن نعلم أن هناك بعض العناصر الأساسية التي يجب أن نضعها قبل البدأ في كتابة أي شيء, وهذه العناصر تمثل هيكل الصفحة, وهي تساعد محركات البحث و الأجهزة و المتصفحات و غيرها على الفهم الجيد لمحتوى صفحتنا. وفي يلي الكود الذي يمثل أقصر كود html يمكن أن نبدأ به متضمنا فقرة ترحيبية قصيرة.


<!DOCTYPE html>
<html>
<head>
<title>العلوم سبيلنا</title>
</head>
<body>
<p>Welcome to 3ooloom.com Saber.</p>
</body>
</html>

وفي ما يلي شرح لدور كل عنصر من العناصر الموجودة في الكود أعلاه:

عنصر <!DOCTYPE html>: يعني أن الملف الذي نقوم بتحريره هو ملف HTML5 (آخر إصدارات HTML)

عنصر <html>: وهو العنصر الجذري للصفحة أي بداخله نكتب الكود الخاص بنا, يغلق هذا العنصر بكتابة نفس العنصر مع إضافة /, وهذا هو الحال مع أغلب العناصر كما هو مبين في الكود أعلاه.

عنصر <head>: يغلق هذا العنصر باستعمال </head> وداخل هذا العنصر نكتب عادة معطيات تخص الصفحة لكنها لا تظهر داخلها, مثل عنوان الصفحة و وصف الصفحة و الكلمات الدلالية و غيرها و هذه المعطيات مهمة لمحركات البحث, و يمكن أن نضع في العنصر الرئسي كذلك روابط خارجية لملفات css أو javascript.

عنصر <body>: داخل هذا العنصر نضع الأشياء التي تظهر للزائر, مثل عنصر <p> الذي يمثل الفقرة و بداخله نضع فقرة نريد كتابتها.

و إليكم في الصورة التالية النتيجة التي تحصلنا عليها بعد أن قمت بنسخ الكود أعلاه في محرر Notepad++ و بعد أن قمت بتسجيل الملف بصيغة html كما هو موضح بشرح الفيديو.

تعلم لغة html

إضافة التعليقات في كود html

من الأشياء المهمة التي يستعملها المبرمج لتنظيم الكود الذي يكتبه هو إستعمال التعليقات, وهي عبارة عن ملاحظات نكتبها داخل الكود بدون أن تأثر على المحتوى الظاهر للمستعمل, وهذه التعليقات تساعدنا على فهم الكود بعد الرجوع إليه مرة أخرى.

و من أجل كتابة تعليق في كود html يكفي أن نكتب ملاحظاتنا بين العلامتين التالين <!– و –> . مثال لتعليق:


<!-- هذا تعليق يظهر فقط في الكود للمبرمج -->

بعض المصطلحات و المعلومات حول لغة HTML:

الكود الخاص بإنشاء العناصر في ال html يسمى أيضا وسم أو tag بالانجليزية, و عادة ما يكون لكل عنصر وسم البداية و وسم النهاية أو الإغلاق, مثل عنصر الفقرة:

<p>هنا تكتب الفقرة بين وسم البداية و وسم النهاية</p>

السمات الخاصة بالعناصر تسمى بالانجليزية Attribute.

HTML هي اختصار ل HyperText Markup language أو لغة ترميز النص التشعبي, و تحتوي على أكثر من 140 عنصر و سمة.

 

هذا يكفي بالنسبة لدرس اليوم, لا أريد أن أطيل عليكم أكثر لأنكم تتعلمون أساسيات شيء جديد عليكم, لكن إنطلاقا من الدرس القادم سيكون نسق الدرس أسرع مع معلومات أكثر, لإن تعلم html أمر سهل كما ترون, خاصة بعدما عرفتم معنى العناصر و السمات في لغة html. لإن تعلم لغة html هو عبارة عن معرفة دور كل وسم (أو عنصر) و كل سمة.

 


Add a Comment

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *