شرح صفوف ومحتوى الفقرة
تجربة المفكرة (Notepad) في البداية تثبت لك عملياً أن HTML مجرد نص نقي بسيط لا يعتمد على أدوات غامضة، لكن العمل اليومي يصبح أسرع وأمتع بكثير عند الانتقال إلى محرر أكواد احترافي مجاني مثل Visual Studio Code (VS Code) لما يقدمه من مزايا جوهرية:
- التلوين الدلالي للكود (Syntax Highlighting): يلوّن الوسوم والخصائص والقيم بألوان متمايزة تكشف لك أي علامة تنصيص منسية بلمح البصر.
- الإكمال التلقائي واختصارات Emmet: كتابة علامة
!ثم ضغطTabتولّد الهيكل الكامل لمستندHTML5في ثانية واحدة، مع إغلاق الوسوم تلقائياً فور فتحها. - التحديث التلقائي للمعاينة: تتيح إضافات العرض المحلي تحديث المتصفح تلقائياً بمجرد حفظ الملف دون ضغط
F5يدوياً.
Emmet HTML5 Starter Templateقالب إيميت السريع للمستند
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VS Code Project</title>
</head>
<body>
<h1>Modern Editor Setup</h1>
<p>Enhanced developer productivity tools.</p>
</body>
</html>Editor Scaffold Render Outputمعاينة الهيكل التلقائي للمحرر
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس الفرق الحاسم بين محررات النصوص ومعالجات الكلمات، وقواعد تنظيم مجلد المشروع، وإظهار امتدادات الملفات المخفية في ويندوز لتجنب فخ index.html.txt، وحفظ الملف بترميز UTF-8 وتشغيله عبر المسار المحلي file:/// ضمن حلقة التعديل والتحديث السريعة. الخطوة التالية: انتقل الآن إلى الوحدة الثالثة ودرس «عناوين صفحة HTML» لإتقان درجات العناوين الدلالية الست وتوسيع تدرجها انطلاقاً من <h1> و <h2>.