Editor kódu

Vytvořte první stránku

1. 01

   Na liště souborů otevřete index.html.

2. 02

   Vložte do editoru následující HTML.

3. 03

   V části „Náhled“ se objeví nadpis Hello. Náhled se aktualizuje chvíli poté, co přestanete psát.

4. 04

   Otevřete style.css a přidejte následující CSS. Nadpis zmodrá.

5. 05

   Otevřete script.js a přidejte následující JavaScript. Nadpis se změní na It works.

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="greeting">Hello</h1>
  <script src="script.js"></script>
</body>
</html>

h1 { color: blue; }

document.querySelector("h1").textContent = "It works";

Výchozí projekt obsahuje index.html, style.css a script.js. HTML musí na soubory CSS a JavaScriptu odkazovat, stejně jako v této ukázce. Samotné vytvoření souborů nestačí k tomu, aby je prohlížeč použil.

Sledujte náhled a konzoli

Část „Náhled“ zobrazuje stránku vytvořenou z vašich souborů. Používá index.html, pokud existuje, jinak první HTML soubor v projektu. Odkazy na místní CSS a JavaScript načítá ze složek projektu.

V části „Konzole“ najdete zprávy a chyby z náhledu. Příkazem console.log("Preview ready") v JavaScriptu tam vypíšete vlastní zprávu. Do vstupního pole konzole napište 2 + 3 a stiskněte Enter. Výraz se vyhodnotí v náhledu.

Náhled spouští JavaScript pro prohlížeč. Nespouští server, neinstaluje balíčky a neumí spustit Python, PHP, Javu ani jiné serverové jazyky. Volba typu při vytváření souboru umožňuje takový soubor napsat, neznamená ale, že ho prohlížeč dokáže spustit.

Kód běží v samostatném rámci náhledu s omezeními prohlížeče. Externí skripty, obrázky nebo síťové požadavky ve vašem kódu se přesto mohou spojit s jinými weby. Spouštějte jen kód, jehož účinkům rozumíte.

Přidávejte, přejmenovávejte a mažte soubory

Klikněte na „Přidat soubor“, vyberte typ souboru a zadejte název. Zvolená přípona se doplní automaticky. Pokud už soubor s tímto názvem existuje, přidá se číslo, aby se nepřepsal.

Soubor otevřete kliknutím na jeho záložku nebo název v části „Složky a soubory“. Záložky ukazují soubory ve vybrané složce. Tlačítkem plus vedle složky v ní vytvoříte soubor nebo podsložku.

Soubor přejmenujete tlačítkem tužky vedle jeho názvu. Nový název uložíte klávesou Enter nebo kliknutím mimo pole, klávesou Escape změnu zrušíte. Při přejmenování ponechte příponu, například .css.

Křížek na záložce soubor po potvrzení smaže. Neslouží jen ke skrytí otevřené záložky. Než smažete práci, kterou můžete ještě potřebovat, stáhněte si zálohu.

Přejmenování ani přesunutí souboru nezmění odkazy v HTML. Pokud přesunete style.css do složky assets, upravte jeho odkaz na assets/style.css. Kvůli chybnému odkazu může v náhledu chybět stylování nebo skript.

Uspořádejte soubory do složek

V prohlížeči složek můžete procházet projekt. Rozbalením složky zobrazíte její obsah a výběrem složky přepnete její záložky souborů. Příkaz „Nová složka“ vytvoří složku uvnitř právě vybrané složky.

Soubor nebo složku přesunete přetažením na jinou složku. Na dotykové obrazovce položku nejprve podržte. Složku nelze přesunout do sebe samé ani do některé z jejích podsložek.

Složku lze odstranit dvěma způsoby. Příkaz „Smazat složku“ odstraní samotnou složku a přesune její obsah do kořene projektu. Příkaz „Smazat složku i obsah“ smaže i soubory a podsložky a vyžaduje napsání slova DELETE. Kořenovou složku odstranit nelze.

Na větší obrazovce ponechá příkaz „Připnout jako plovoucí okno“ prohlížeč složek otevřený i při úpravách kódu. Minimalizací okno sbalíte, tlačítkem „Zavřít“ ho zavřete.

Pracujte v samostatných projektech

Příkaz „Projekty“ otevře uložené projekty. Vyberte projekt, ve kterém chcete pokračovat, nebo zvolte „Vytvořit projekt“ a zadejte název. Tužkou projekt přejmenujete, tlačítkem smazání ho po potvrzení odstraníte.

Projekty se ukládají v tomto prohlížeči na tomto zařízení. Ukazatel ukládání informuje, zda jsou poslední změny uložené. Toto ukládání projekt nenahrává do účtu ani nevytváří záložní soubor v počítači.

Příkaz „Exportovat jako ZIP“ stáhne aktuální projekt se všemi soubory a složkami. Uchovejte si kopii před smazáním dat prohlížeče, přechodem na jiné zařízení nebo změnami, které budete chtít případně vrátit. Současný editor neumí projekt ze ZIPu obnovit.

Začněte funkční ukázkou

Na počítači najdete pod tlačítkem „Šablony“ ukázky „Had“, „Kalkulačka“ a „Kreslení“. Výběrem šablony vytvoříte samostatný projekt s vlastním HTML, CSS a JavaScriptem. Dosavadní projekty zůstanou v seznamu projektů.

Vyzkoušejte náhled, změňte malý kousek kódu a zkontrolujte výsledek. Snáz tak zjistíte, který soubor ovládá danou část stránky.

Udělejte si v editoru místo

Na počítači vyberete uspořádání tlačítkem „Rozložení“. Přetažením dostupných oddělovačů změníte velikost panelů, případně použijte jejich tlačítka minimalizace a maximalizace. Telefon používá vlastní kompaktní uspořádání editoru a náhledu bez výběru desktopového rozložení.

„Režim soustředění“ je součástí rozložení editoru. Escape zavírá jeho dialogy, samotný režim ale neukončí. Vraťte se stejným tlačítkem.

Upravte si čitelnost kódu

V části „Nastavení“ nastavíte vzhled editoru, čísla řádků, zalamování, automatické uzavírání značek a závorek i zvýraznění aktuálního řádku. Volba „Podle systému“ se řídí nastavením zařízení, volby „Tmavý“ a „Světlý“ nastavují vzhled editoru přímo.

V části „Písmo“ vyberete písmo a velikost od 12 do 24 pixelů. V části „Odsazení“ nastavíte šířku tabulátoru na dvě, čtyři nebo osm mezer. Tyto předvolby se ukládají v prohlížeči.

Příkaz „Smazat všechna data editoru“ je samostatná akce v části „Nastavení“. Smaže všechny projekty, soubory, uložená data, statistiky a předvolby. Pro potvrzení musíte napsat DELETE. Nejdřív exportujte všechny projekty, které si chcete ponechat.

Používejte klávesové zkratky

Když se výsledek nezobrazuje

Pokud je náhled prázdný, ověřte, že projekt obsahuje HTML soubor s viditelným obsahem. Jestli stránce chybí stylování nebo funkce, zkontrolujte názvy odkazovaných souborů a cesty ke složkám, včetně případných překlepů.

Otevřete část „Konzole“ a zkontrolujte chyby JavaScriptu. Chyba může zastavit zbytek příkazů v daném skriptu. Editor kód automaticky neopravuje.

Pokud se ukazatel ukládání nevrátí do stavu „Uloženo“, ponechte stránku otevřenou a před jejím obnovením projekt exportujte. Soukromé prohlížení, omezené úložiště nebo smazání dat webu mohou způsobit, že uložené projekty nebudou později dostupné.