21/02/2024
تعلم أساسيات HTML

الدرس الثانى – محرر النصوص HTML Editor الأداة الرئيسية لكتابة أكواد HTML

ما هو محرر النصوص HTML Editor ؟ فقط أي محرر نصوص بسيط هو كل ما تحتاجة لإنشاء أو تعديل أي صفحة ويب بلغة HTML مثل Notepad أو TextEdit.

محرر النصوص HTML Editor – استخدام Notepad أو TextEdit

يمكن انشاء وتعديل صفحات الويب باستخدام محرارت النصوص الاحترافية Professional HTML editors ، ولكن لتعلم HTML يفضل استخدام محرر نصوص بسيط مثل Notepad (Windows) أو TextEdit (Mac).

اتبع الخطوات التاليه لإنشاء أول صفحة ويب لك باستخدام Notepad أو TextEdit:

الخطوة الأولى: فتح محرر النصوص

اذا كنت تستخدم الويندوز افتح Notepad – محرر النصوص HTML Editor

بالنسبة لـ Windows 8 / 10:
افتح Start screen (رمز الويندوز فى أسفل يسار الشاشة) – ثم اكتب notepad

بالنسبة لـ Windows 7:
افتح Start > Programs > Accessories > Notepad

إذا كنت تستخدم ماك افتح TextEdit – محرر النصوص HTML Editor

افتح Finder > Applications > TextEdit

أيضا قم بتغيير بعض الإعدادات حتى يقوم التطيبق بحفظ الملف بشكل صحيح
Preferences > Format > قم باختيار “Plain Text”
ثم في “Open and Save” قم بالتعليم على مربع الاختيار الذي به “Display HTML files as HTML code instead of formatted text”
ثم افتح ملف جديد “new document” حتى يمكنك وضع الأكواد فيه

الخطوة الثانية: كتابة بعض أكواد HTML

اكتب الأكواد التالية فى محرر النصوص الخاص بك


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
محرر النصوص HTML Editor

الخطوة الثالثة: حفظ الملف

احفظ الملف على جهاز الكمبيوتر الخاص بك عن طريق اختيار file > Save as فى قائمة برنامج Notepad
قم بتسمية الملف “index.htm” ثم قم باختيار “UTF-8” من قائمة “encoding” (هذا هو التشفير الذى يفضل استخدامه فى ملفات HTML) كما هو موضح فى الصورة التالية

save as

ملحوظة: يمكنك ايضا استخدام الامتادات (.htm) أو (.html) لا يوجد فرق بينهما ، هذا فقط يرجع إلى اختيارك.

الخطوة الرابعة: عرض صفحة HTML في المتصفح

افتح ملف HTML الذى قمت بحفظه في الخطوة السابقة فى المتصفح المفضل لديك كما هو موضح في الخطوات التالية:
اضغط مرتين (double click) على الملف ، أو اضغط مرة على زر الفأرة الأيمن (right click) ثم قم باختيار “Open with” فستكون النتيجة كما فى الصورة التالية:

محرر النصوص HTML Editor


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →