Create HTML Document Windows
إنشاء صفحة HTML على نظام تشغيل ويندوز
سنتعلم في هذا الدرس كيفية بناء أول صفحة HTML على نظام التشغيل ويندوز وذلك عن طريق برنامج Notepad، كما سنتعلم أيضًا كيفية كتابة العناصر الأساسية داخل صفحة HTML ثم القيام بحفظ هذه الصفحة وعرضها على المتصفح؛ لمشاهدتها ومعاينتها كأول تجربة لكتابة أوامر HTML.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Steps to create and save HTML Document Windows
خطوات إنشاء صفحة HTML على نظام ويندوز وحفظها
</>
Steps to create HTML document windows
خطوات إنشاء صفحة HTML على نظام ويندوز
خطوات إنشاء صفحة HTML على نظام تشغيل ويندوز هي:
- نقوم بفتح المفكرة "Notepad" من:
- Start > Windows Accessories > Notepad
- أو البحث عنها في قائمة ابدأ Start > 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].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
