Požádáte agenta, aby upravil stránku, a v jednoduchém projektu se objeví soubory s nesrozumitelnými názvy: index.html, style.css, script.js. Nebo už tam byly, ale v agentově zprávě stojí "změnil jsem styly" - a z té věty není jasné, na co přesně sahal.
Vysvětlíme si tři základní technologie, které dostává prohlížeč: HTML, CSS a JavaScript. Pro názornost si vezmeme jednoduchou statickou stránku bez sestavování (buildu). V reálném repozitáři se soubory mohou jmenovat a nacházet jinak, takže před úpravou je užitečné požádat agenta, aby ukázal strukturu projektu a našel soubory, které odpovídají za daný prvek. Ručně psát HTML a CSS vás článek neučí, na to máte agenta.
Stránka je text, který čte prohlížeč
Začneme jednoduchou statickou stránkou: její zdrojové kódy jsou běžné textové soubory. Dají se otevřít v Poznámkovém bloku a přečíst očima. Žádné další sestavování tu není potřeba: prohlížeč čte HTML, načítá související zdroje a podle nich vykreslí stránku na obrazovce.
Výchozím bodem takového projektu bývá soubor index.html. Prohlížeč ho otevře, rozebere značkování a podle odkazů si načte styly, skripty, obrázky a fonty.
V projektu se sestavováním mohou zdrojové kódy ležet v komponentách a hotové HTML, CSS a JavaScript vytváří speciální nástroj. Role níže zůstávají užitečnou mapou, ale hledat tam právě tři soubory s takovými názvy nemá smysl.
Pro náš jednoduchý příklad si vezmeme tři soubory s různými rolemi:
- HTML - co je na stránce: nadpis, odstavec, tlačítko, obrázek;
- CSS - jak to vypadá: barvy, fonty, odsazení, zaoblení, plynulost;
- JavaScript - co se stane: po kliknutí, po zadání textu, podle časovače.
Pojďme postupně.
HTML: z čeho se skládá značkování
HTML je značkování, ne kreslení. Nepopisujete, jak vypadá tlačítko. Říkáte "tady je tlačítko" - a prohlížeč ho nakreslí sám, jak umí.
Základní jednotkou značkování je tag. Skoro vždycky jsou dva: otevírací a zavírací, a mezi nimi obsah.
Každá část má své jméno a celek se nazývá prvek (element). To slovo se vám bude hodit: o stránce se častěji mluví jako o "prvcích" a myslí se tím tag i s tím, co je uvnitř.
Jména tagů jsou zkratky anglických slov: p od paragraph, a od anchor, img od image. Učit se je zpaměti nemusíte, ale domyslet si, k čemu slouží neznámý tag, to obvykle pomůže.
Zavírací tag se liší lomítkem. Existují i prvky bez zavíracího tagu. Například <img> nemůže obsahovat text nebo vnořené tagy a adresu obrázku dostává přes atribut src.
Tagy se do sebe vnořují jako krabice v krabicích a zavírají se v opačném pořadí - nejdřív vnitřní, pak vnější. Když pořadí porušíte, prohlížeč nespadne, pokusí se to uhodnout. Obvykle se netrefí.
Druhý pojem je atribut. Je to upřesnění, které žije uvnitř otevíracího tagu a něco o něm říká: kam vede odkaz, odkud vzít obrázek, jak tento prvek pojmenovat.
<a href="https://example.com">Otevřít web</a>
<img src="cover.png" alt="Obal">
<button id="play" class="btn">Hrát</button>Atribut class z posledního řádku se bude hodit za dvě minuty: podle něj se na tlačítko použijí styly. Atribut id="play" mu dává jedinečné jméno, podle kterého ho skript najde.
Teď celá stránka. Je kratší, než byste čekali:
<!doctype html>
<html>
<head>
<title>Moje stránka</title>
</head>
<body>
<h1>První stránka</h1>
<p>Běžný odstavec textu.</p>
<button id="play" class="btn">Hrát</button>
</body>
</html>Dvě části: <head> - pomocná, patří do ní název karty a odkazy na styly; <body> - všechno, co čtenář vidí na obrazovce. První řádek jen říká prohlížeči, že jde o moderní HTML.
Diagram ukazuje hlavní vlastnost značkování: na stránce všechno leží uvnitř něčeho. <body> uvnitř <html>, tlačítko uvnitř <body>, text uvnitř tlačítka. Odtud i schodovité odsazení v souboru: není pro krásu, ukazuje, co je v čem vnořené.
Praktický závěr je jednoduchý. Název karty prohlížeče a připojení stylů žijí v <head> a na obrazovce je vůbec nevidíte. Všechno ostatní je v <body>. Když agent ve zprávě napíše "přidal jsem blok do body", jde přesně o druhou krabici: nový obsah se objevil na stránce, ne v pomocné části.
Tagů má jazyk přes sto, ale na reálné stránce se skoro vždycky točí pořád tytéž:
| Tag | Co dělá |
|---|---|
<h1> ... <h6> | nadpisy, od hlavního k nejmenšímu |
<p> | odstavec textu |
<a> | odkaz, adresa v atributu href |
<img> | obrázek, cesta k souboru v atributu src |
<button> | tlačítko |
<ul> a <li> | seznam a položka seznamu |
<div> | blokový kontejner, krabice pro další prvky |
<span> | kousek textu uvnitř řádku, aby se dal zvýraznit zvlášť |
Poslední dva samy o sobě nic neznamenají a nic nekreslí. Jsou to prázdné krabice, za které se stylům a skriptům dobře chytá - a právě proto jich je na každé stránce nejvíc.
CSS: jak stránka dostane vzhled
Holé značkování vypadá chudě: černý text na bílém, šedé systémové tlačítko, všechno natlačené k levému okraji. Většinu rozdílu mezi tímhle a upravenou stránkou dělá CSS.
CSS se skládá z pravidel. Pravidlo odpovídá na dvě otázky: na co ho použít a co změnit.
.btn {
background: #6c5ce7; /* barva pozadí */
color: #ffffff; /* barva textu */
padding: 12px 24px; /* vnitřní odsazení */
border-radius: 12px; /* zaoblení rohů */
}První řádek je selektor: říká, na které prvky se pravidlo vztahuje. Dál ve složených závorkách následují dvojice "vlastnost: hodnota", každá končí středníkem.
Tečka před btn znamená třídu. Pamatujete si atribut class="btn" na tlačítku? Tady se uplatnil: ve značkování na prvek připnete štítek a ve stylech se na něj odkazujete. Jeden štítek můžete připnout na deset tlačítek - a jedno pravidlo z nich udělá deset stejných.
Vlastností má CSS stovky, ale abyste četli cizí soubor a rozuměli, co se tam děje, stačí několik:
color- barva textu,background- barva nebo obrázek pozadí;font-sizeafont-family- velikost a řez písma;padding- odsazení uvnitř prvku,margin- vně, mezi sousedy;border-radius- zaoblení rohů, mimochodem polovina dojmu "draze to vypadá";transition- plynulost: ne skokem, ale za 0,2 sekundy.
Nejčastěji pravidla leží v samostatném souboru a stránka se o něm dozvídá z jednoho řádku v pomocné části:
<head>
<link rel="stylesheet" href="style.css">
</head>Odstraňte ten řádek - soubor se styly se nenačte. Text a prvky ve značkování zůstanou, ale obvyklé rozložení a vzhled mohou zmizet a používat stránku bude někdy těžší.
Na diagramu vlevo i vpravo je stejná stránka: nadpis, dva řádky textu, tlačítko. Žádný prvek nepřibyl ani nezmizel - v tomto příkladu se upravoval jen soubor se styly.
Berte to jako mapu pro hledání, ne jako technickou zeď. Kvůli novému rozložení agent někdy musí změnit třídy nebo kontejnery v HTML a nepovedené pravidlo CSS může tlačítko překrýt a kliknutí znemožnit. Proto se po vizuální úpravě prochází diff, otevírá stránka a kontrolují dotčené akce.
JavaScript: co se stane při akci
HTML a CSS už umí zobrazit stránku a přidat jí plynulé přechody nebo animaci. Ale tlačítko z našeho příkladu zatím nemá vlastní akci: kliknete - a skóre se nezmění.
Libovolnou logiku na stránce obvykle přidává JavaScript. Tlačítko už dostalo v HTML jedinečné jméno id="play". Teď je postup jednoduchý: najít prvek, počkat na událost, něco změnit.
// najdeme tlačítko podle jeho id
const button = document.getElementById("play");
let score = 0;
// přihlásíme se k události: co se má stát po kliknutí
button.addEventListener("click", function () {
score = score + 1;
button.textContent = "Body: " + score;
});První klik změní text na "Body: 1", druhý na "Body: 2". Pokud se nic neděje, nejdřív zkontrolujte, že v HTML je id="play" a ve skriptu je totéž jméno play.
Tady jsou tři detaily. const a let zakládají proměnnou - pojmenovanou krabici s hodnotou. addEventListener přihlašuje stránku k odběru události: klik, zadání textu, najetí myší. A ve složených závorkách je funkce - kus kódu, který se provede, když událost nastane.
Všimněte si posledního řádku: skript mění text tlačítka. To je důležitý moment - JavaScript může měnit značkování i styly přímo během běhu stránky. Může přidat odstavec, schovat blok, přebarvit tlačítko. Takže hranice mezi vrstvami je spíš rozdělení práce, ne zeď.
V praxi začněte hledat v JavaScriptu, pokud prvek reaguje na data, zpracovává klik nebo něco počítá. Plynulé objevení, změnu barvy a jednoduchý pohyb často obstará CSS. Je to výchozí bod, ne konečná diagnóza: po úpravě si stránku otevřete a sami si zkontrolujte vzhled a chování - jeden screenshot nestačí.
Jedno tlačítko ve třech souborech
Dáme všechno dohromady na jednom prvku. Tlačítko "Hrát" žije rovnou ve třech souborech a každý odpovídá za své.
<button id="play" class="btn">Hrát</button>.btn {
background: #6c5ce7;
border-radius: 12px;
}const playButton = document.getElementById("play");
playButton.addEventListener("click", function () {
playButton.textContent = "Hra spuštěna";
});Pokud jsou soubory připojeny, klik změní nápis "Hrát" na "Hra spuštěna". Teď se dá příklad vyzkoušet, aniž byste si museli domýšlet chybějící funkci.
A teď to nejužitečnější - co se stane, když odeberete vždy jednu část:
- odstraníte HTML - zmizí všechno: není co stylovat ani oživovat;
- odstraníte CSS - tlačítko zůstane a funguje, jen vypadá jako šedé systémové tlačítko z devadesátek;
- odstraníte JS - tlačítko je hezké, ale mrtvé. Dá se zmáčknout, a nic se nestane.
Odtud jednoduchá mapa pro zadávání úkolů. Pokud se vám nelíbí, jak to vypadá, začněte hledat ve stylech. Pokud se vám nelíbí, co se děje, - ve skriptu. Pokud prvek vůbec chybí, začněte značkováním. Právě jen začněte: skutečná úprava může zasáhnout i sousední vrstvu, proto se výsledek agenta ověřuje v diffu a v prohlížeči.
Co leží ve složce projektu
Nejčastější sada pro jednoduchou stránku vypadá takto:
index.html značkování, vstupní bod
style.css styly
script.js chováníPropojují je dva řádky ve značkování. Styly se připojují v pomocné části, skript - úplně na konci, před uzavřením </body>, aby v okamžiku jeho spuštění už všechny prvky existovaly:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- značkování stránky -->
<script src="script.js"></script>
</body>Bývá to i jinak. Ve velkém projektu jsou souborů desítky, rozložené do složek jako css/ a js/, a vedle leží obrázky a fonty. Bývá i naopak, že je soubor jen jeden - o tom hned níže. Role značkování, stylů a logiky přesto zůstávají, ale názvy souborů a způsob jejich připojení se mohou lišit.
Když styly a skripty leží uvnitř stránky
Tři soubory jsou nejčastější varianta, ale ne jediná. Totéž CSS se dá umístit na tři různá místa a na všechna tři dřív nebo později narazíte.
První už jste viděli: samostatný soubor plus řádek <link>. Druhé - blok <style> přímo ve značkování, bez samostatného souboru:
<head>
<style>
.btn {
background: #6c5ce7;
border-radius: 12px;
}
</style>
</head>Uvnitř je všechno stejné: selektor, složené závorky, dvojice "vlastnost: hodnota". Změnila se jen adresa. Takhle se to píše, když je stránka jen jedna a zakládat pro ni samostatný soubor nemá smysl.
Třetí místo - vložené styly, neboli inline styles. Vlastnosti visí přímo na prvku, v atributu style:
<button class="btn" style="background: #e17055; font-size: 20px">Hrát</button>Selektor tu není potřeba: i tak je jasné, k čemu pravidlo patří - k prvku, na kterém je napsané. Proto žádné složené závorky ani tečka před třídou, jen dvojice "vlastnost: hodnota" oddělené středníkem, všechno na jednom řádku.
Pohodlné je to přesně jednou. Pak začínají nevýhody. Pravidlo se vztahuje na jediný prvek: deset tlačítek - deset kopií a měnit pak musíte všech deset. Běžný vložený styl má obvykle přednost před běžným pravidlem ze souboru. Obarvíte tlačítko přes style, pak upravujete tutéž vlastnost ve style.css a nechápete, proč se barva nemění. Proto se atribut style kontroluje mezi prvními; podrobná pravidla priority zatím nepotřebujete.
Se skriptem je to stejné, jen místa jsou dvě. Samostatný soubor se připojuje přes <script src="...">, ale kód můžete napsat i přímo mezi tagy:
<script>
document.getElementById("play").addEventListener("click", function () {
alert("Hra spuštěna");
});
</script>Shrňme to do jedné tabulky, ať máte kam nahlédnout:
| Co | Kde leží | Jak vypadá v HTML |
|---|---|---|
| styly | samostatný soubor | <link rel="stylesheet" href="style.css"> |
| styly | blok na stránce | <style> ... </style> |
| styly | přímo na prvku | style="color: red" |
| skript | samostatný soubor | <script src="script.js"></script> |
| skript | blok na stránce | <script> ... </script> |
Krajní případ - když je pohromadě úplně všechno: značkování, blok <style> i blok <script> žijí v jednom index.html. Nic strašného na tom není, pro malou stránku je to dokonce jednodušší: jeden soubor, otevřete ho v prohlížeči a funguje, nic se cestou neztratí. Nepohodlí přichází později, když stránka naroste a v tom dlouhém souboru je potřeba něco najít. Pak se obsah obvykle rozdělí do souborů a vznikne právě ta trojice.
Než agenta požádáte, aby "změnil styly", zjistěte, kde leží. Pokud má projekt jen jeden index.html, soubor style.css tam vůbec nemusí být a úprava skončí uvnitř značkování. Pokud se prvek nemění, požádejte ho o kontrolu tří věcí: je připojený správný soubor se styly, sedí selektor a není tam vložený style nebo silnější pravidlo. Tak se hledání zúží bez hádání, kdo je viník.
Jak to funguje ve spojení s Claude Code
Teď je jasné, co se děje, když se agent pustí do stránky:
- v jednoduchém statickém projektu může agent HTML, CSS a JavaScript sám napsat a propojit. V jiném projektu ho nejdřív požádejte, aby ukázal strukturu a vyjmenoval soubory, které odpovídají za daný prvek;
- co přesně uvidíte před zápisem, záleží na nastavení a režimu práce. Pokud agent ukáže návrh předem, projděte si ho; po zápisu si v každém případě prostudujte diff a výsledné soubory. Jméno
style.cssnaznačuje roli souboru, ale ještě nic nezaručuje; - vizuální úpravu kontrolujte očima a kliknutím na dotčené prvky, úpravu chování - skutečnými akcemi. Screenshot neukáže, že počítadlo přestalo počítat;
- pokud se něco rozbilo, popište pozorovaný příznak, ne odhadnutou vrstvu: "po úpravě je tlačítko vidět, ale klik nic nedělá". Pak agent zkontroluje vazby mezi HTML, CSS a JavaScriptem.
GO TO FULL VERSION