كيف تُصنع صفحة الإنترنت؟
📖 باختصار
كل صفحة تراها على الإنترنت، مثل هذه الصفحة التي تقرؤها الآن، مكتوبة بلغة خاصة اسمها HTML. يقرأ المتصفح هذه اللغة ويرسم منها العناوين والصور والأزرار والألوان. فالصفحة مثل وصفة، والمتصفح مثل طبّاخ ماهر!
🤩 هل تعرف هذا؟
- يمكنك في كثير من المتصفحات رؤية كود الصفحة بالضغط على Ctrl + U.
- HTML اختصار لعبارة إنجليزية معناها «لغة ترميز النص التشعبي».
- أول صفحة إنترنت في التاريخ كانت كلامًا وروابط فقط، دون صور.
- الصفحة نفسها تتغيّر لتناسب شاشة الهاتف وشاشة الحاسوب الكبيرة.
🔎 اعرف أكثر
🌟 المتصفح
المتصفح برنامج نزور به المواقع. نكتب فيه اسم الموقع، فيطلب الصفحة من الخادم، ثم يعرضها لنا. وفيه زرّ للرجوع إلى الصفحة السابقة، وزرّ لتحديث الصفحة.
🔍 HTML: الهيكل
لغة HTML تقول ما الذي في الصفحة: هذا عنوان، وهذه فقرة، وهذه صورة، وهذا رابط. تُكتب بعلامات بين قوسين صغيرين، مثل <h1> للعنوان الكبير.
💡 CSS: الزينة
لغة CSS تقول كيف تبدو الصفحة: لون العنوان، وحجم الخط، والمسافات، وشكل الأزرار. بدونها تكون الصفحة كلامًا أسود على خلفية بيضاء.
🎯 JavaScript: الحركة
لغة JavaScript تجعل الصفحة تتفاعل معك: تقلب البطاقة حين تضغط عليها، وتعدّ نقاطك في اللعبة. كل ألعاب هذا الموقع مكتوبة بها!
🧭 الوسوم
في HTML نضع الكلام بين «وسوم»: الوسم <p> لبداية الفقرة و</p> لنهايتها. والوسم <img> يضع صورة، والوسم <a> يصنع رابطًا.
🌈 صفحات لكل الناس
الصفحة الجيدة تصلح للجميع: نص بديل لكل صورة يقرؤه برنامج خاص لمن لا يرى، وألوان واضحة، وأزرار كبيرة. هذا اسمه «إمكانية الوصول».
📊 شاهد كيف يعمل
📚 كلمات مهمة
- المتصفح
- برنامج نزور به المواقع
- الوسم
- علامة في HTML تقول ما نوع الجزء
- إمكانية الوصول
- أن تصلح الصفحة لكل الناس
🧪 جرّب في البيت
ارسم صفحة موقعك على ورقة: عنوان كبير، وصورة، وفقرة، وزرّ. ثم اكتب بجانب كل جزء اسم وسمه: h1 للعنوان، وimg للصورة، وp للفقرة، وbutton للزر.
🧩 اختبر نفسك
1 ما اسم اللغة التي تُكتب بها هياكل الصفحات؟
2 ما الذي يجعل الصفحة تتحرك وتتفاعل معك؟