كيفية فتح وكتابة كود صفحة ويب باستخدام Windows Notepad

Updated يونيو 8, 2026 6 min read

Aldawsari

دقائق القراءة: 6

مقدمة: هل يمكن استخدام Windows Notepad لكتابة صفحات الويب؟

يُعد Windows Notepad أحد أبسط برامج تحرير النصوص المضمنة افتراضياً في جميع إصدارات Windows تقريباً، مثل XP وWindows 7 وWindows 8 وWindows 10 وما بعدها. ورغم أنه لا يقدم مزايا متقدمة مثل syntax highlighting أو الإكمال التلقائي أو تنسيق الأكواد، فإنه يظل أداة عملية لفهم أساسيات البرمجة وكتابة ملفات الويب يدوياً.

استخدام Notepad في البداية يمنح المبتدئ فرصة ممتازة لفهم بنية الكود، والانتباه إلى التفاصيل، والاعتماد على نفسه في كتابة التنسيق والربط بين الملفات دون أدوات مساعدة كثيرة. وهذا ما يجعل التجربة مفيدة تعليمياً قبل الانتقال إلى محررات أكثر تطوراً مثل VS Code أو Sublime Text أو Atom.

واجهة برنامج Windows Notepad المستخدم في تحرير ملفات HTML وCSS وJavaScript

طرق كتابة الكود باستخدام Notepad

يمكنك العمل على ملفات البرمجة في Notepad بطريقتين:

فتح برنامج Notepad أولاً ثم كتابة الكود وحفظ الملف لاحقاً بالامتداد المناسب.
إنشاء الملفات أولاً داخل مجلد المشروع، ثم فتح كل ملف بواسطة Notepad.

في هذا الشرح سنعتمد الطريقة الثانية، لأنها أوضح عند تعلم إنشاء مشروع ويب بسيط مكوّن من ملفات HTML وCSS وJavaScript.

كيفية إنشاء موقع ويب بسيط عبر Notepad خطوة بخطوة

1) إنشاء مجلد المشروع

ابدأ بإنشاء مجلد جديد في أي مكان على جهازك. يمكنك وضعه على سطح المكتب أو داخل المستندات، والأهم أن يكون الوصول إليه سهلاً أثناء العمل.

2) تفعيل إظهار امتدادات الملفات في Windows

من داخل المجلد، انتقل إلى تبويب View في شريط الأدوات، ثم تأكد من تفعيل خيار file name extensions. هذه الخطوة مهمة جداً لأنها تسمح لك بإنشاء الملفات بامتداداتها الصحيحة مثل .html و.css و.js.

تفعيل خيار إظهار امتدادات الملفات في Windows لإنشاء ملفات HTML وCSS وJavaScript بشكل صحيح

3) إنشاء ملفات المشروع الأساسية

داخل المجلد الذي أنشأته، قم بإنشاء الملفات التالية:

index.html
styles.css
app.js

هذه الأسماء شائعة ومتعارف عليها في مشاريع الويب، لكنها ليست إلزامية. يمكنك استخدام أي أسماء أخرى، بشرط أن تربطها لاحقاً بشكل صحيح داخل ملف HTML.

إنشاء ملفات index.html وstyles.css وapp.js داخل مجلد المشروع

4) فتح ملف HTML باستخدام Notepad

انقر بزر الفأرة الأيمن على الملف index.html ثم اختر Open with وبعدها Notepad. تجنب النقر المزدوج على الملف، لأن Windows سيفتحه غالباً في المتصفح الافتراضي مباشرة.

إذا لم يظهر Notepad ضمن الخيارات، انقر على Choose another app ثم More apps، وستجده ضمن القائمة.

فتح ملف HTML باستخدام Windows Notepad من خلال قائمة Open with اختيار برنامج Notepad لفتح ملف HTML عند عدم ظهوره مباشرة ضمن الخيارات

عند تنفيذ الخطوات بالشكل الصحيح، سيُفتح الملف داخل Notepad كصفحة فارغة جاهزة لكتابة الكود.

5) إضافة كود HTML الأساسي

انسخ الكود التالي والصقه داخل ملف index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notepad Website</title>
</head>
<body>
  <h1 class="page-heading"></h1>
  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <h5>This is heading 5</h5>
  <h6>This is heading 6</h6>
  <p>This is a paragraph with some placeholder texts: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos modi odit incidunt ut vitae cum maiores.</p>
  <strong>This is a bolded sentence</strong>
  <br>
  <em>This is an italicised text</em>
  <p>This is a link to <a href="https://freecodecamp.org">freeCodeCamp</a>, a platform where you can learn to code for free</p>
  <p>Below is freeCodeCamp logo:</p>
  <img src="https://popsql.com/static/external-logos/freecodecamp.png" alt="freecodecamp-logo" />
</body>
</html>

بعد ذلك احفظ الملف باستخدام الاختصار Ctrl + S أو من خلال File > Save. وإذا لاحظت أن الكود غير منسق تلقائياً، فهذا طبيعي لأن Notepad لا يطبق تنسيقاً آلياً على الأكواد.

كود HTML مكتوب داخل محرر Windows Notepad بعد لصقه في الملف

6) معاينة ملف HTML في المتصفح

عد إلى مجلد المشروع، ثم انقر نقراً مزدوجاً على ملف index.html لفتحه في المتصفح الافتراضي. ستظهر لك صفحة ويب بسيطة تعرض العناوين والنصوص والصورة.

عرض صفحة HTML البسيطة في المتصفح بعد إنشائها باستخدام Notepad

إضافة CSS لتنسيق الصفحة

افتح ملف styles.css داخل Notepad، ثم أضف الكود التالي:

.page-heading {
  color: #2ecc71;
}

إذا قمت الآن بتحديث الصفحة، فلن تلاحظ أي تغيير. السبب أن العنصر h1 الذي يحمل الصنف page-heading فارغ حالياً، لذلك لا يوجد نص ظاهر ليتم تطبيق اللون عليه.

إضافة JavaScript لتوليد المحتوى ديناميكياً

افتح ملف app.js وأضف الكود التالي:

const pageHeadingText = "This is a Simple Website coded with Windows Notepad";
const pageHeading = document.querySelector(".page-heading");
pageHeading.innerHTML = pageHeadingText;

ماذا يفعل هذا الكود؟

ينشئ متغيراً باسم pageHeadingText يحتوي على النص المراد عرضه.
ينشئ متغيراً آخر باسم pageHeading لاختيار العنصر الذي يحمل الصنف .page-heading باستخدام querySelector.
يستخدم الخاصية innerHTML لإدخال النص داخل عنصر h1 الفارغ.

حتى هذه اللحظة، قد لا يظهر التغيير في الصفحة بعد التحديث، لأن ملفات CSS وJavaScript لم يتم ربطها بعد بملف HTML.

ربط ملفات CSS وJavaScript بملف HTML

ربط ملف CSS داخل head

أضف السطر التالي داخل القسم head في ملف index.html:

<link rel="stylesheet" href="styles.css" />

ربط ملف JavaScript قبل إغلاق body

أضف السطر التالي قبل وسم الإغلاق </body>:

<script src="app.js"></script>

الشكل النهائي لملف HTML بعد الربط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notepad Website</title>
  <!-- CSS Link -->
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1 class="page-heading"></h1>
  <h1>This is heading 1</h1>
  <h2>This is heading 2</h2>
  <h3>This is heading 3</h3>
  <h4>This is heading 4</h4>
  <h5>This is heading 5</h5>
  <h6>This is heading 6</h6>
  <p>This is a paragraph with some placeholder texts: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, mollitia quo quasi voluptatum quam soluta debitis praesentium molestias nam magnam aperiam deserunt eos modi odit incidunt ut vitae cum maiores.</p>
  <strong>This is a bolded sentence</strong>
  <em>This is an italicised text</em>
  <p>This is a link to <a href="https://freecodecamp.org">freeCodeCamp</a>, a platform where you can learn to code for free</p>
  <p>Below is freeCodeCamp logo:</p>
  <img src="https://popsql.com/static/external-logos/freecodecamp.png" alt="freecodecamp-logo" />
  <!-- JavaScript Link -->
  <script src="app.js"></script>
</body>
</html>

بعد حفظ الملفات وتحديث الصفحة في المتصفح، ستلاحظ ظهور العنوان الذي أضفته عبر JavaScript باللون الأخضر الذي حددته في CSS، ما يؤكد أن الربط تم بنجاح.

النتيجة النهائية لصفحة الويب بعد ربط ملفات CSS وJavaScript بملف HTML

لماذا قد يكون Notepad مناسباً للمبتدئين؟

يساعد على فهم بنية الملفات وامتداداتها بشكل عملي.
يعلمك كتابة الكود يدوياً دون الاعتماد على المزايا الذكية.
يزيد من قدرتك على اكتشاف الأخطاء الإملائية والتركيبية بنفسك.
يمنحك فهماً أفضل لكيفية ربط ملفات HTML وCSS وJavaScript داخل المشروع.

متى يكون من الأفضل الانتقال إلى محرر أكواد متقدم؟

بعد فهم الأساسيات، سيكون من العملي استخدام محرر أكواد احترافي مثل VS Code، لأنه يوفر مزايا مهمة مثل:

syntax highlighting لتسهيل قراءة الكود.
التنسيق التلقائي للملفات.
اقتراحات ذكية أثناء الكتابة.
إضافات كثيرة عبر المتجر الرسمي.
دعم مدمج لأدوات التطوير الحديثة.

وإلى جانب VS Code، توجد خيارات أخرى مثل Atom وSublime Text وVim وNotepad++، وهو بديل متقدم قريب في فكرته من Notepad التقليدي.

نصائح عملية عند استخدام Notepad في البرمجة

احرص على كتابة أسماء الملفات وامتداداتها بدقة.
احفظ ملفاتك باستمرار لتجنب فقدان التعديلات.
راجع الأقواس والوسوم يدوياً لأن Notepad لا ينبهك للأخطاء.
اختبر الصفحة في المتصفح بعد كل تعديل مهم.
استخدم بنية مجلد واضحة منذ بداية المشروع.

الخلاصة التقنية

يظل Windows Notepad خياراً تعليمياً جيداً لفهم أساسيات تطوير الويب، خاصة عند تعلم كيفية إنشاء ملفات HTML وCSS وJavaScript وربطها يدوياً. ورغم محدودية ميزاته مقارنة بالمحررات الحديثة، فإن قيمته الحقيقية تكمن في تدريب المبتدئ على الانتباه للتفاصيل وفهم طريقة عمل الصفحة من الداخل. أما في المشاريع الفعلية أو عند التوسع في البرمجة، فمن الأفضل الانتقال إلى محرر أكواد أكثر تقدماً يسرّع العمل ويرفع الإنتاجية.