جمّع صفحة ويب كاملة باستخدام doctype والوسوم html وhead وmeta وbody.
افتح هذا الدرس في Kodokonحتى الآن، كتبت أجزاءً من HTML. لكن صفحة ويب حقيقية تتّبع دائمًا الهيكل الكامل نفسه، تمامًا كما تحتوي الرسالة الرسمية دائمًا على ترويسة ومتن وتوقيع. يبدأ كل شيء بالإعلان <!DOCTYPE html>، المكتوب في السطر الأول تمامًا: فهو يُخبر المتصفح بأن المستند يستخدم HTML الحديثة. وهو ليس وسمًا - إنه إعلان بسيط، ولا يُغلق أبدًا.
يأتي بعد ذلك عنصر <html>، جذر الصفحة: كل ما تبقّى يوضع داخله. وخاصيته lang="en" تُحدّد لغة المستند. ويحتوي على ابنَين اثنين بالضبط. أولًا <head>: بطاقة هوية الصفحة، التي تحمل معلومات غير مرئية للزائر. ثم <body>: كل المحتوى المرئي، أي عناوينك وفقراتك وقوائمك وروابطك وصورك وجداولك.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>لننظر في محتويات <head>. الوسم ذاتي الإغلاق <meta charset="UTF-8"> يُحدّد ترميز المحارف: وهو ما يضمن عرض المحارف المشكّلة (é, à, ç) بشكل صحيح. والوسم <title> يُحدّد عنوان الصفحة، الظاهر في تبويب المتصفح وفي نتائج البحث. وكثيرًا ما يُضاف وسم <meta> ثانٍ، يُعرف بوسم viewport، لكي تتكيّف الصفحة مع عرض شاشات الهواتف.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>يمكنك تجربة ذلك الآن، من دون تثبيت أي شيء. افتح محرّر نصوص بسيطًا (Notepad على Windows، أو TextEdit على Mac في وضع النص الصِّرف)، وانسخ الهيكل الكامل، ثم احفظ الملف بامتداد .html، مثلًا index.html. ثم انقر نقرًا مزدوجًا على الملف: يفتح في متصفحك، وتظهر صفحتك الأولى.