النتائج مقدَّمة لأغراض إعلامية فقط وقد تحتوي على أخطاء. يُرجى التحقق من المعلومات المهمة بشكل مستقل. استخدام هذه الأداة على مسؤوليتك الخاصة.
ماذا تفعل هذه الأداة
تكتب أداة توليد قالب HTML الأساسي الهيكل الابتدائي لصفحة HTML5: التصريح <!DOCTYPE html>، وعنصر <html> مع السمة lang، وقسم <head> يتضمن ترميز UTF-8 وعنوان الصفحة، وقسم <body> يحتوي على عنوان رئيسي. غيّر العنوان أو اللغة فتتحدّث الشيفرة فورًا.
هناك ثلاثة خيارات مفعّلة افتراضيًا ويمكن إيقافها: وسم viewport متجاوب (وهو لازم لعرض الصفحات بشكل صحيح على الهواتف)، ورابط إلى style.css، ووسم script.js مع السمة defer التي تنزّل السكربت بالتوازي وتشغّله بعد تحليل الصفحة. يُهرَّب (escape) العنوان واللغة، لذا تكون أحرف مثل & أو < آمنة.
متى تستخدمها
- بدء نموذج أولي أو عرض توضيحي أو إعادة إنتاج خطأ يحتاج إلى ملف HTML نظيف.
- تعليم البنية الدنيا لصفحة HTML5 صالحة.
- إنشاء صفحة هبوط ثابتة قبل إضافة إطار عمل.
- معرفة وسوم head التي تحتاجها الصفحة قبل إضافة وسوم SEO باستخدام أداة توليد الوسوم الوصفية (Meta).
مثال عملي
المدخلات
عنوان الصفحة: My Page
رمز اللغة: en
وسم viewport وstyle.css وscript.js: مفعّلةالمخرجات
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Page</h1>
<script src="script.js" defer></script>
</body>
</html>أسئلة حول هذه الأداة
لماذا تهم السمة lang؟
تستخدمها قارئات الشاشة لاختيار النطق الصحيح، وتستخدمها المتصفحات لاقتراح الترجمة، وتعتمد عليها محركات البحث كإشارة إلى اللغة. اضبطها على اللغة الرئيسية للمحتوى، مثل en أو fr أو he.
ماذا يفعل وسم viewport؟
من دونه تعرض متصفحات الهاتف الصفحة كأن عرض الشاشة نحو 980px ثم تصغّرها، فيصبح النص صغيرًا جدًا. أما width=device-width, initial-scale=1.0 فيطلب منها استخدام العرض الحقيقي للشاشة.
لماذا يُضاف السكربت مع defer؟
تسمح defer للمتصفح بمواصلة تحليل HTML أثناء تنزيل السكربت، ثم تشغيله بعد أن يصبح المستند جاهزًا. بذلك لا يتعطل عرض الصفحة، ويستطيع السكربت البحث عن العناصر بأمان.
ما الذي أضيفه بعد ذلك؟
وصف تعريفي (meta description) ووسوم معاينة الشبكات الاجتماعية. تنتجها أداة توليد الوسوم الوصفية (Meta) وأداة توليد وسوم Open Graph، وتساعدك أداة توليد ملف Robots.txt عند إطلاق الموقع.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.