سلام الله عليكم ايها المطورين انا اقوم بتطوير الويب على codepen ( لمن لا يعرفها فهي منصة تطوير مجانية بخصاىص html css and js)
و عند كتابتي الشكل العام لصفحة الويب على html تظهر علامة على هناك خطا و الخطا يقول ان فقط معلمات <body> هي التي تكون داخل الhtml و ماذا عن <head> ?
لمن لديه الاجابة يتفضل مشكورا بالمساعدة و شكرا
حياكم الله .
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
وعليكم السلام ورحمة الله وبركاته .
إن codepen لا يقوم بقراءة الصفحة كاملة كما في ال html الطبيعي بل هو فقط يريد منك إدخال العناصر التي سيتم وضعها في الbody فقط.
حيث إذا قمت بالضغط على learn more في الخطأ الذى يظهر لك سيقوم بتحويلك إلى الصفحة التي يخبرك أنه عندما تقوم بكتابة الكود الخاص بك في codepen فهو يأخذه ويقوم بوضعه في القالب الخاص به وهذا هو القالب:
<!DOCTYPE html>
<html lang="en" {IF CLASSES}class="classes"{/IF}>
<head>
<meta charset="UTF-8">
{IF PRIVATE}
<meta name="robots" content="noindex">
{ELSE}
<!-- MIT License -->
{/IF}
<title>{TITLE}</title>
{STUFF FOR <HEAD>}
<link rel="stylesheet" href="{CSS RESET CHOICE}">
{EXTERNAL CSS}
<style>
{EDITOR CSS}
</style>
{PREFIX FREE (if enabled)}
{MODERNIZR (if enabled)}
</head>
<body>
{EDITOR HTML}
{JS Library (if chosen)}
{EXTERNAL JS}
<script>
{EDITOR JS}
//# sourceURL=pen.js
</script>
</body>
</html>
لاحظ في القالب الخاص به يأخذ ما قمت بكتابته في جزء ال html ويقوم بوضعه بداخل ال body مكان {EDITOR HTML} وما تقوم بكتابته في css بداخل ال head مكان {EDITOR CSS} والجافاسكريبت مكان {EDITOR JS} بداخل ال body .
لهذا حينما تقوم بكتابة الكود الذى أرفقته فهو يقوم بوضعه كاملا بداخل ال body وإذا قمت بعمل inspect للصفحة ستجد أنه وضع <html> بداخل ال body وال head أيضا . لهذا يظهر لك هذا التحذير أنه لا يجب عليك كتابة <html> أو <body> أو <head> فقط قم بكتابة العناصر مباشرة التي تريد وضعها بداخل ال body
عندما تكتب أكواد HTML داخل صندوق المحرر في codepen ففي الواقع يتم حقن ذلك في عنصر ifram في منطقة العرض لكي يتم عرض ما كتبته، وربطه بتنسيقات CSS وأكواد جافاسكريبت، ويضع بداخل ifram كود HTML كامل به عنصر head مكتوب مسبقًا و عنصر body الذي يضع به الكود الخاص بك كالتالي:
ولا يدعم ميزة إنشاء بيئة تطوير خاصة للمشروع، لذا هو مجرد مُحرر لتنفيذ وتشغيل أكواد HTML, CSS, JS.
لذا عنصر head نضع به الأكواد الخاصة بالإعدادات وبالتالي ذلك غير مدعوم سوى في بيئة التطوير كما ذكرت، وهناك مواقع توفر لك ذلك مثل موقع vscode.dev
كما تم التوضيح في التعليقات السابقة فإنه ما تقوم بإضافة في المحرر يتم وضعه في الوسم body مباشرة لذلك كتابة head يعطي خطأ ولكن يمكنك إضافة الوسم الذي تريده من خلال الإعدادات كما بالصورة التالية عن طريق الضغط على أيقونة الإعدادات
ثم بعد ذلك يظهر لك قائمة وبها عدة نوافذ قم بكتابة ما تريده في النافذه Stuff for head وسيتم إضافته كما بالصورة التالية
التعليقات