في هذا الدرس 7تصفّح المواضيع
لست بحاجة إلى شراء أي برامج مدفوعة للبدء بكتابة صفحات HTML على نظام ويندوز؛ فكل ما تحتاجه هو محرر نصوص خام (Plain-Text Editor) مثل برنامج المفكرة المدمج (Notepad) أو محرر الأكواد الاحترافي VS Code. وفي المقابل، إياك أن تكتب أكواد الويب داخل برامج معالجة الكلمات المنسقة:
- محررات النصوص والأكواد الخام (VS Code، Notepad، Notepad++): تحفظ الحروف والوسوم صافيةً بترميز
UTF-8دون أي بيانات خفية، فيقرأها المتصفح بدقة تامة. - معالجات الكلمات المنسقة (Microsoft Word، WordPad): تحقن شيفرات تنسيق مخفية للخطوط والفقرات وتستبدل علامات التنصيص البرمجية المستقيمة
" "بعلامات زخرفية منحنية تُعطّل خصائص العناصر فوراً.
Plain Text HTML Sourceكود نصي نقي للصفحة
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clean HTML Document</title>
</head>
<body>
<h1>Plain Text Source</h1>
<p>Saved directly without rich formatting.</p>
</body>
</html>Clean Document Browser Viewعرض المستند النقي بالمتصفح
تبدأ الممارسة الهندسية السليمة دائماً بإنشاء مجلد عمل مخصص للمشروع بدلاً من بعثرة الملفات على سطح المكتب؛ كأن تنشئ مجلداً منظماً بالمسار D:\projects\first-website مع الالتزام بثلاث قواعد ذهبية لتسمية المجلدات والملفات:
- استخدام الحروف الإنجليزية الصغيرة والأرقام: اكتب
first-websiteوتجنب خلط الأحرف الكبيرة والصغيرة؛ لأن خوادم الإنترنت العاملة بنظام Linux حساسة لحالة أحرف المسارات. - الشرطة الوسطية بدلاً من المسافات: استبدل المسافة بشرطة
-حتى لا تتحول المسافات في شريط عنوان المتصفح إلى الرمز المربك%20. - تخصيص اسم الصفحة الرئيسية: سمِّ الملف الافتتاحي دائماً
index.htmlلأن خوادم الويب تبحث عن هذا الاسم تلقائياً كواجهة افتراضية للموقع.
يُخفي مستكشف الملفات في نظام ويندوز افتراضياً امتدادات الملفات المعروفة؛ وهو ما يوقع المبتدئين في أشهر فخ تقني: حيث يكون الاسم الحقيقي للملف على القرص index.html.txt بينما يعرضه ويندوز ظاهرياً باسم index.html! لتفادي هذه المشكلة نهائياً، فعّل إظهار الامتدادات بخطوة واحدة:
- في نظام Windows 11: افتح مستكشف الملفات (File Explorer) ثم اضغط قائمة View ثم Show وضع علامة صح أمام File name extensions.
- في نظام Windows 10: افتح مستكشف الملفات وانتقل إلى تبويب View في الشريط العلوي ثم فعّل خيار File name extensions مباشرةً.
عند حفظ الكود من برنامج المفكرة عبر قائمة File → Save As، اضبط الحقول الثلاثة التالية بدقة قبل النقر على زر الحفظ:
- اسم الملف (File name): اكتب الاسم القياسي
index.html. - نوع الحفظ (Save as type): غيّر القائمة المنسدلة من
Text Documents (*.txt)إلى الخيار الحاسمAll Files (*.*). - الترميز (Encoding): تأكد من اختيار
UTF-8لضمان سلامة الحروف العربية والرموز في جميع المتصفحات.
جرّب الحالات الثلاث في المحاكي التفاعلي التالي لترى نتيجة كل إعداد على الفور:
بمجرد حفظ الملف بالامتداد الصحيح index.html، ستلاحظ تحوّل أيقونته فوراً من رمز المفكرة الورقي إلى شعار متصفحك الافتراضي. انقر عليه نقراً مزدوجاً لفتحه، أو انقر بزر الفأرة الأيمن واختر Open with لتجربته على أكثر من متصفح.
تأمّل شريط العنوان في أعلى المتصفح عند فتح الملف؛ ستجده يبدأ بالبروتوكول المحلي file:/// متبوعاً بمسار المجلد على قرصك الصلب، مما يعني أن المتصفح يقرأ الصفحة مباشرةً من جهازك دون الحاجة إلى اتصال بالإنترنت.
رتّب شاشتك بوضع نافذة محرر النصوص في النصف الأيمن ونافذة المتصفح في النصف الأيسر لتعمل بأعلى إنتاجية. تسير عملية التطوير في إيقاع ثلاثي سريع ومستمر: عدّل الكود في المحرر، ثم اضغط اختصار الحفظ Ctrl + S، ثم انتقل للمتصفح واضغط مفتاح التحديث F5 أو Ctrl + R لمشاهدة النتيجة فوراً.
تجربة المفكرة (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>.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Plain-Text Editor محرر النصوص الخام
- برنامج مثل VS Code أو المفكرة يحفظ الأكواد والحروف صافيةً دون دمج شيفرات تنسيق مخفية تفسد عمل المتصفح.
- للمراجعة
- 02 File Extension امتداد الملف
- اللاحقة المكتوبة بعد النقطة الأخيرة في اسم الملف مثل .html لتحديد نوع الملف والبرنامج المسؤول عن فتحه في النظام.
- للمراجعة
- 03 Syntax Highlighting التلوين الدلالي للكود
- ميزة بصرية في محررات الأكواد تلوّن الوسوم والخصائص والقيم بألوان متمايزة تسهل القراءة وتكشف الأخطاء النحوية فوراً.
- للمراجعة
- 04 Local File URI مسار الملف المحلي
- عنوان يبدأ بالبادئة file:/// في شريط المتصفح لقراءة مستند الويب مباشرةً من القرص الصلب دون خادم خارجي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 IDE IDE
- Integrated Development Environment
- بيئة تطوير متكاملة تجمع محرر الأكواد والطرفية وأدوات الفحص وإدارة ملفات المشروع في نافذة واحدة.
- للمراجعة
- 02 BOM BOM
- Byte Order Mark
- علامة ترتيب بايتات اختيارية في مطلع الملفات النصية؛ ويُفضّل في ملفات الويب الحفظ بصيغة UTF-8 الخالية منها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
فعّل خيار File name extensions في مستكشف ويندوز، وأنشئ مجلد first-site ثم احفظ داخله ملف index.html بترميز UTF-8 وتأكد من خلوه من لاحقة .txt.
-
افتح ملف index.html في محرر الكود والمتصفح معاً، وعدّل نص العنوان <h1> ثم اضغط Ctrl+S يتبعه F5 في المتصفح للتأكد من ظهور التحديث فوراً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.