طبعا سنستخدم محرر النصوص لكتابة الشفرة البرمجية html فيما سنستعرض النتيجة عبر المتصفح

يمكن تحميل محرر النصوص notepad++  من خلال الرابط التالي

https://portableapps.com/apps/development/notepadpp_portable

سيساعدك محرر النصوص هدا على التمييز بين وسوم html و النصوص الأخرى على خلاف المحرر الكلاسيكي المرفق مع الويندوز




حتى يتعرف البرنامج على اللغة البرمجية اللتي نعمل عليها نختر من قائمة language  ا h تم html




أول وسم سنتعرف عليه في html هو وسم الخلية div
و يستخدم لإدراج أي عنصر آخر ( نص أو صورة أو حتى خلية أخرى ) داخل إطار مربع الشكل

مثال


تكتب بداية أي وسم بهده الطريقة <div> و تكتب نهايته </div> طبعا مع إستبدال div بإسم الوسم

الخلية div تبقى شفافة و بدون أي حواف ما لم يتم تحديدها
في هدا المثال سنقوم بتلوين خلفية الخلية


ما قمنا به هو إضافة التوصيف style للوسم div و قيمة التوصيف style هي background-color:#00ff00;

#00ff00 هو رمز اللون الأخضر.
و يمكن الحصول على رموز الألوان عن طريق برامج التصميم . ( الفوتوشوب مثلا ) أو عن طريق الموقع https://htmlcolorcodes.com/



سيساعدك محرر النصوص notepad++ في كتابة وسوم اللغة و التوصيفات المتعلقة بها عن طريق الإقتراح







إدا كانت معظم الوسوم توفتح و تغلق كالمثال div (مثال 1)
 فهناك وسوم منفردة لا تحتاج لرمز الإغلاق (مثال 2)
و كمثال هناك وسم img لإدراج الصور يمكن كتابته هكدا

<img src="folder/logo.png">

طبعا مع إستبدال folder/logo.png بمسار الصورة .




يمكن إعطاء المزيد من القيم للstyle في وسم div لإجراء تعديلات أخرى على المظهر
مثال





و في الجدول التالي بعض وسوم لغة html مع طريقة إستخدامها






في html توجد عشرات الوسوم مع مئات التوصيفات اللتي يمكن إدراجها داخل الصفحة . و مع صعوبة حفظ كل هده الوسوم يمكنك الإستناد إلى مراجع أو مكتبات على شبكة الإنترنت لمعرفة طريقة كثابة أي وسم
و من أهم هده المراجع موقع w3school


https://www.w3schools.com


إنتهى الجزء الأول من الدرس
إلى اللقاء