Otevřít HTML soubor online - HTML prohlížeč, editor a živý náhled

Otevřete a zobrazte HTML soubory online zdarma. Upravujte HTML s živým náhledem v reálném čase, formátujte kód a bezpečně testujte stránky v prohlížeči.

HTML Prohlížeč

1485

Editor

Kód

<!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>Ahoj světe!</h1>
        <p>Toto je živý náhled vašeho HTML kódu.</p>
        <button onclick="alert('Funguje to!')">Klikni na mě</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>Ahoj světe!</h1>
        <p>Toto je živý náhled vašeho HTML kódu.</p>
        <button onclick="alert('Funguje to!')">Klikni na mě</button>
    </div>
</body>
</html>

Náhled

Živý náhled

Možná budete potřebovat i toto

HTML na JSON

Převést strukturu HTML na strom JSON.

Otevřít nástroj

Minifikátor/Formátovač HTML

Minifikovat nebo formátovat text HTML s odsazením 2/4 mezer.

Otevřít nástroj

Prohlížeč Markdown

Náhled a úprava Markdownu s živou vizualizací.

Otevřít nástroj

Prohlizec XML online

Otevirejte, prohlizejte a formatujte XML soubory online se stromovym zobrazenim a validaci.

Otevřít nástroj

Jak používat HTML Prohlížeč?

Zadejte nebo vložte svůj HTML kód do panelu editoru.

Panel náhledu se automaticky aktualizuje a zobrazí vykreslený výsledek.

Pomocí tlačítek na panelu nástrojů můžete Kopírovat, Vymazat nebo Přepnout na Celou Obrazovku.

Klíčové Funkce

Náhled v Reálném Čase

Okamžitě vidíte, jak se váš HTML kód vykresluje při psaní.

Ochrana Soukromí

Váš kód nikdy neopustí váš prohlížeč. Veškeré zpracování probíhá lokálně.

Responzivní Design

Použijte rozdělené zobrazení nebo přejděte na celou obrazovku pro lepší zážitek z úprav.

Často Kladené Otázky

Jak otevřít HTML soubor online a zobrazit náhled?

Vložte HTML kód nebo načtěte soubor a vykreslený náhled se okamžitě aktualizuje. Rychlá kontrola HTML a ladění jsou tak jednodušší.

Mohu v tomto HTML prohlížeči testovat externí CSS a JavaScript?

Ano. Běžné externí zdroje se mohou v náhledu načíst, pokud to umožňují bezpečnostní zásady prohlížeče.