انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 05
دورة لغة HTML

إنشاء صفحة HTML على نظام تشغيل ويندوزCreate HTML Document Windows

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

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
7
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
8,712
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Steps To Create HTML Document Windows خطوات إنشاء صفحة HTML على نظام ويندوز

خطوات إنشاء صفحة HTML على نظام تشغيل ويندوز هي:


1. في واجهة Windows 10 المعروضة يمكن فتح المفكرة Notepad من:


  • Start > Windows Accessories > Notepad

  • وفي Windows 10 أو 11 يمكن البحث عن Notepad في قائمة ابدأ Start > Notepad
Notepad

Notepad

DOCTYPE!

2. نبدأ بإعلان DOCTYPE في مقدمة المستند. المقطع التالي خطوة غير مكتملة؛ سنكمله بكلمة html في الخطوة التالية ليختار نمط المعايير.

HTML 
<!DOCTYPE>
جرّب بنفسك

Complete HTML Doctype

3. نضيف الكلمة html إلى إعلان DOCTYPE ليصبح ⁦<!DOCTYPE html>⁩. ليست html خاصية، ولا يختار الإعلان رقم إصدار للغة.

HTML 
<!DOCTYPE html>
جرّب بنفسك

HTML Root Element

4. بعد ذلك، نضيف عنصر <html> لبدء تعريف هيكل مستند HTML.

HTML 
<!DOCTYPE html>
<html>

</html>
جرّب بنفسك

Head Element

5. بعد ذلك، نضيف عنصر <head> داخل عنصر <html>. لا تنسَ أن عنصر <head> هو من نوع العناصر المتداخلة [nested elements]؛ فهو يحتوي على معلومات وإعدادات الصفحة غير المرئية للمستخدمين بشكل مباشر، باستثناء عنصر <title>.

HTML 
<!DOCTYPE html>
<html>
    <head>

    </head>
</html>
جرّب بنفسك

Body Element

6. بعد ذلك، أضف عنصر <body> داخل عنصر <html> وتحت عنصر <head>. عنصر <body> هو من النوع المتداخل [nested] فهو يحتوي على كل عناصر الصفحة المرئية للمستخدمين، وقد يحتوي كذلك على عنصر script الذي لا يعرض نص الشفرة للمستخدم.

HTML 
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>
جرّب بنفسك

Title Element

7. بعد ذلك، أضف عنصر <title> داخل عنصر <head>. تَذَكَّر أن عنصر <title> هو عنصر متداخل [nested] ويجب كتابة نص بداخله. وهذا النص سيظهر على شريط التبويب [tab] في متصفح الويب، حيث يعرض اسم الصفحة.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <title> Closetag | Home Page </title>
    </head>
    <body>

    </body>
</html>
جرّب بنفسك

Save As حفظ باسم

إليك خطوات إنشاء أول ملف باستخدام لغة HTML، تبدأ من الخطوة الأولى بحفظ ملف HTML جديد وتنتهي بالخطوة الأخيرة، الخطوة رقم 6، المتعلقة بعنوان علامة التبويب [tab title].

  • اختر File من القائمة العلوية لمحرر النصوص [Notepad] كما هو موضح في الصورة، ثم اختر Save As لحفظ الملف. في الملف الجديد غير المحفوظ يفتح Ctrl + S نافذة الحفظ؛ أما Save As فاختصاره Ctrl + Shift + S في الواجهة المعروضة.
حفظ باسم

Choose New folder اختر مجلد جديد

  • من النافذة الجديدة التي تظهر على شاشة الكمبيوتر، اختر [New folder] ثم احفظ المجلد بالاسم [CloseTag]. يمكنك تسميته بأي اسم آخر، لكن يُفضل أن يكون باللغة الإنجليزية وبدون مسافات.

الاسم الإنجليزي بلا مسافات اقتراح لتسهيل مشاركة المسارات، وليس شرطًا لإنشاء المجلد.

اختر مجلد جديد

Open Folder CloseTag فتح مجلد CloseTag

  • ثم نفتح المجلد [Folder] الذي أنشأناه باسم [CloseTag] لحفظ صفحة HTML بداخله.
فتح مجلد CloseTag

File Name index.html اسم الملف index.html

  • نقوم بحفظ الملف file بالاسم index، ثم نضيف امتداد الملف html. نفصل بين الاسم والامتداد بعلامة النقطة dot [.] ليصبح اسم الملف index.html. يمكن تغيير كلمة index لأي اسم آخر، ويمكن كذلك استخدام الامتداد .htm لملف HTML؛ نتبع .html في هذه الخطوات.

قبل Save اختر All Files (*.*) في Save as type واختر UTF-8. الصورة القديمة أدناه ما زالت تعرض Text Documents (*.txt)؛ لا تعتمد هذا الخيار للخطوة النهائية حتى لا تحصل على index.html.txt. تحقق من الامتداد الفعلي في File Explorer.

اسم الملف index.html

Open File index.html فتح ملف index.html

  • نقوم بفتح الملف HTML على المتصفح [browser] عن طريق النقر بزر الفأرة الأيمن [right click] ثم اختيار فتح [open]  أو عبر النقر المزدوج [double click] على الملف. يعتمد البرنامج الذي يفتح الملف على اقتران .html في جهازك. إذا فتح محررًا، اختر Open with ثم المتصفح المطلوب، مثل Google Chrome أو Edge.
فتح ملف index.html

Tab Title عنوان علامة التبويب

  • سوف تشاهد في المتصفح صفحة HTML، وفي شريط التبويب [tab] سترى النص الذي قمت بكتابته داخل عنصر <title> الموجود داخل عنصر <head>.
عنوان علامة التبويب

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…