Part 01 – مقدمة عن HTML – تثبيت vscode – xmapp

Part 01 – مقدمة عن HTML – تثبيت vscode – xmapp

الفيديو العملي

✅ ما هي HTML؟

HTML اختصار لـ HyperText Markup Language، يعني:
لغة ترميز النص الفائق.

• هي اللغة الأساسية لبناء صفحات الويب.

• مش لغة برمجة، لكنها لغة “ترميز” أو “وصف” للعناصر الموجودة في الصفحة.

• باستخدام HTML، بتحدد للمتصفح شكل وترتيب المحتوى زي:

  • العناوين

  • الفقرات

  • الصور

  • الروابط

  • الجداول

  • النماذج… وغيرها

مثال بسيط

<h1>أهلاً بك في موقعي!</h1>
<p>ده مثال بسيط على فقرة مكتوبة بلغة HTML.</p>

تاريخ HTML وتطورها (HTML5)

● HTML 1.0 (سنة 1993):

• بداية ظهور HTML، كانت بدائية جداً.

● HTML 2.0 – 4.01:

• تم تطويرها تدريجياً بإضافة عناصر جديدة زي الجداول، النماذج، والأُطر (frames).

● HTML5 (من 2014 ومستمر):

• أحدث وأقوى إصدار.

• قدم ميزات جديدة لتسهيل بناء صفحات تفاعلية وحديثة بدون الحاجة إلى إضافات خارجية (زي Flash).

أهم مميزات HTML5:

• دعم الفيديو والصوت بدون برامج إضافية (<video>, <audio>)

• عناصر دلالية جديدة لتنظيم الصفحة (<header>, <nav>, <article>, إلخ)

• دعم للرسومات (Canvas, SVG)

• تحكم أفضل في النماذج

• أداء وتحسينات أمنية أفضل

• دعم لتطبيقات الويب (Web APIs)

✅ الفرق بين HTML وباقي تقنيات الويب (CSS – JavaScript)

🧑‍💻 1. Visual Studio Code (VS Code):

• برنامج محرر نصوص (code editor)

• مجاني وسهل الاستخدام

• مميزات:

  • تكملة تلقائية للكود (autocomplete)

  • إضافات (extensions) قوية زي Live Server

  • مظهر مريح للعين

🔗 رابط التحميل: https://code.visualstudio.com

🌐 2. المتصفح (Browser):

• أي متصفح زي Google Chrome – Firefox – Edge

• هو اللي بيقرأ كود HTML ويعرضه للمستخدم

• ممكن كمان تستخدم أدوات المطورين فيه (Inspect → Elements) علشان تشوف الكود وتشخص الأخطاء