HTML

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

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

التاريخ

21 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

2077

المواضيع

12
الشروحات chevron_left Create HTML Document Windows chevron_left HTML

Steps to create and save HTML Document Windows
خطوات إنشاء صفحة HTML على نظام ويندوز وحفظها

</> Steps to create HTML document windows
خطوات إنشاء صفحة HTML على نظام ويندوز

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

  1. نقوم بفتح المفكرة "Notepad" من:
  • Start > Windows Accessories > Notepad
  • أو البحث عنها في قائمة ابدأ  Start > Notepad
Notepad
Notepad
DOCTYPE!

2. نكتب أول سطر في صفحة HTML، وهو عنصر <DOCTYPE!> لكي نُحدد بذلك إصدار لغة HTML.

<!DOCTYPE>
html attribute

3. نقوم بإضافة خاصية html بداخل عنصر <DOCTYPE!> ليصبح بهذا الشكل <DOCTYPE html!> لتحديد إصدار لغة HTML الذي هو HTML5.

<!DOCTYPE html>
HTML root element

4. نقوم بعد ذلك بإضافة عنصر html.

<!DOCTYPE html>
<html>

</html>
head element

5. نقوم بعد ذلك بإضافة عنصر head داخل عنصر html، ولا تنسَ أن عنصر head من نوع العناصر المُتداخلة "nested elements"؛ فهو يحتوي على كل عناصر الصفحة غير المرئية للمستخدمين أو الزوار -باستثناء عنصر title-.

<!DOCTYPE html>
<html>
    <head>

    </head>
</html>
body element

6. نقوم بعد ذلك بإضافة عنصر body داخل عنصر html، وتحت عنصر head، حيث يكون عنصر body من النوع المُتداخل "nested"، فهو يحتوي على كل عناصر الصفحة المرئية للمستخدمين -باستثناء عنصر script-.

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>
title element

7. نقوم بعد ذلك بإضافة عنصر title داخل عنصر head، ولا تنسَ أن عنصر title من النوع المُتداخل "nested" ويُكتب بداخله نص ليظهر هذا النص على متصفح الويب "tab"؛ وذلك لأن جميع صفحات الويب تظهر باسمها على المتصفح.

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

    </body>
</html>
ملاحظة
  • لا نحتاج إلى تثبيت برنامج Notepad "المفكرة" على الجهاز؛ لأنه موجود على نظام التشغيل ويندوز بشكل افتراضي.
  • يجب أن تقوم بتجربة هذا المثال على جهازك الخاص حتى تتمكن من قراءة النصوص المكتوبة داخل عنصر title على المتصفح.

</> Steps to save HTML file
خطوات حفظ صفحة HTML

خطوات حفظ صفحة HTML:

  • الخطوة الأولى:

نقوم باختيار كلمة File من القائمة العلوية لمحرر النصوص "Notepad" -كما هو موضح بالصور-، ثم نقوم باختيار Save File As حفظ الصفحة باسم.

أو يمكن حفظ الملف عن طريق الاختصار [ Ctrl + S ] على لوحة المفاتيح.

  • الخطوة الثانية:

من النافذة الجديدة التي تظهر على شاشة الكمبيوتر، نختار New folder ثم نحفظ هذا الفولدر باسم CloseTag.

ويمكن تسميته بأي اسم آخر، ولكن يُفضل أن يكون باللغة الإنجليزية وبدون مسافات.

  • الخطوة الثالثة

ثم نقوم بعد ذلك بفتح المجلد "Folder" الذي قمنا بإنشائه باسم CloseTag لنقوم بحفظ صفحة HTML بداخله.

  • الخطوة الرابعة:

نقوم بحفظ الملف "file" باسم index ثم نتبع اسم الملف "file name" باسم الامتداد "file extension"، ونفصل بينهما بعلامة dot [.] ليصبح الملف باسم index.html
ويمكن تغيير كلمة index لأي اسم آخر، ولكن الامتداد html. لا يمكن تغييره.

  • الخطوة الخامسة:

نقوم بفتح الملف "HTML file" على المتصفح "browser" من خلال عمل right click ثم open أو double click على الملف، ليفتح لنا على المتصفح الافتراضي سواء كان Google Chrome أو Edge أو أي متصفح آخر.

  • الخطوة السادسة:

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

معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.