فتح ملف HTML عبر الإنترنت - عارض HTML ومحرر ومعاينة مباشرة

افتح واعرض ملفات HTML عبر الإنترنت مجانا. حرر HTML مع معاينة مباشرة لحظية، نسق الكود، واختبر صفحات الويب بأمان داخل متصفحك.

عارض HTML

1479

محرر

كود

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>مرحبا بالعالم!</h1>
        <p>هذه معاينة حية لكود HTML الخاص بك.</p>
        <button onclick="alert('إنه يعمل!')">اضغط هنا</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>مرحبا بالعالم!</h1>
        <p>هذه معاينة حية لكود HTML الخاص بك.</p>
        <button onclick="alert('إنه يعمل!')">اضغط هنا</button>
    </div>
</body>
</html>

معاينة

معاينة حية

قد تحتاج هذا أيضًا

HTML إلى JSON

تحويل بنية HTML إلى شجرة JSON.

فتح الأداة

تنسيق وتصغير HTML

نسّق HTML أو صغّره بسرعة داخل المتصفح.

فتح الأداة

عارض ومحرر Markdown

اكتب Markdown أو الصقه وشاهد المعاينة المباشرة فورًا.

فتح الأداة

عارض XML عبر الإنترنت

افتح ملفات XML واعرضها ونسّقها عبر الإنترنت مع عرض شجري والتحقق.

فتح الأداة

كيفية استخدام عارض HTML؟

اكتب أو الصق كود HTML الخاص بك في جزء المحرر.

سيتم تحديث جزء المعاينة تلقائيًا لإظهار النتيجة المعروضة.

استخدم أزرار شريط الأدوات للنسخ أو المسح أو التبديل إلى ملء الشاشة.

الميزات الرئيسية

معاينة في الوقت الفعلي

شاهد على الفور كيف يتم عرض كود HTML الخاص بك أثناء الكتابة.

الخصوصية أولاً

الكود الخاص بك لا يغادر متصفحك أبدًا. تتم جميع المعالجة محليًا.

تصميم متجاوب

استخدم العرض المقسم أو انتقل إلى ملء الشاشة للحصول على تجربة تحرير أفضل.

الأسئلة الشائعة

كيف أفتح ملف HTML عبر الإنترنت وأعاينه؟

الصق كود HTML أو حمّل ملفا، وسيتم تحديث المعاينة المعروضة فورا. هذا يجعل فحص HTML السريع وتصحيح الأخطاء أسهل.

هل يمكنني اختبار CSS وJavaScript الخارجيين في عارض HTML هذا؟

نعم. يمكن تحميل الموارد الخارجية القياسية في المعاينة عندما تسمح سياسات أمان المتصفح بذلك.