Požiadate agenta, aby upravil stránku, a v jednoduchom projekte sa objavia súbory s nejasnými názvami: index.html, style.css, script.js. Alebo tam už boli a v správe agenta stojí "zmenil som štýly" - a z tejto vety nie je jasné, čo presne upravoval.
Rozoberieme si tri základné technológie, ktoré dostáva prehliadač: HTML, CSS a JavaScript. Pre názornosť si vezmeme jednoduchú statickú stránku bez buildu. V reálnom repozitári sa súbory môžu volať inak a ležať inde, preto sa pred úpravou oplatí požiadať agenta, aby ukázal štruktúru projektu a našiel súbory, ktoré zodpovedajú za potrebný element. Ručne kódovať stránky vás tento článok neučí, na to máte agenta.
Stránka je text, ktorý číta prehliadač
Začneme jednoduchou statickou stránkou: jej zdrojové kódy sú obyčajné textové súbory. Môžete ich otvoriť v Poznámkovom bloku a prečítať si ich. Žiadny ďalší build tu nie je potrebný: prehliadač číta HTML, načíta súvisiace zdroje a podľa nich vykreslí stránku na obrazovke.
Východiskovým bodom takého projektu býva súbor index.html. Prehliadač ho otvorí, rozoberie značkovanie a podľa odkazov načíta štýly, skripty, obrázky a fonty.
V projekte s buildom môžu zdrojové kódy ležať v komponentoch a hotové HTML, CSS a JavaScript vytvára špeciálny nástroj. Roly nižšie zostávajú užitočnou mapou, ale hľadať tam práve tri súbory s takými názvami netreba.
Pre náš jednoduchý príklad si vezmeme tri súbory s rôznymi rolami:
- HTML - čo na stránke je: nadpis, odsek, tlačidlo, obrázok;
- CSS - ako to vyzerá: farby, fonty, odsadenia, zaoblenia, plynulosť;
- JavaScript - čo sa deje: po kliknutí, pri písaní textu, podľa časovača.
Ďalej postupne.
HTML: z čoho sa skladá značkovanie
HTML je značkovanie, nie kreslenie. Neopisujete, ako vyzerá tlačidlo. Poviete "tu je tlačidlo" - a prehliadač ho nakreslí sám, ako vie.
Základnou jednotkou značkovania je tag. Takmer vždy sú dva: otvárací a uzatvárací, a medzi nimi obsah.
Každá časť má svoje meno a celok sa nazýva element. To slovo sa zíde: o stránke sa častejšie hovorí "element" a myslí sa tým tag spolu s tým, čo je vnútri.
Názvy tagov sú skratky anglických slov: p od paragraph, a od anchor, img od image. Učiť sa ich naspamäť netreba, ale pri neznámom tagu vám to zvyčajne pomôže odhadnúť, na čo slúži.
Uzatvárací tag sa líši lomkou. Existujú aj elementy bez uzatváracieho tagu. Napríklad <img> nemôže obsahovať text ani vnorené tagy a adresu obrázka dostáva cez atribút src.
Tagy sa do seba vkladajú ako krabice do krabíc a uzatvárajú sa v opačnom poradí - najprv vnútorný, potom vonkajší. Ak poradie porušíte, prehliadač nespadne, pokúsi sa to uhádnuť. Zvyčajne neúspešne.
Druhý pojem je atribút. Je to spresnenie, ktoré žije vnútri otváracieho tagu a niečo o ňom hovorí: kam vedie odkaz, odkiaľ vziať obrázok, ako sa tento element volá.
<a href="https://example.com">Otvoriť web</a>
<img src="cover.png" alt="Obálka">
<button id="play" class="btn">Hrať</button>Atribút class z posledného riadku sa zíde o dve minúty: podľa neho sa na tlačidlo použijú štýly. Atribút id="play" mu dáva jedinečné meno, podľa ktorého tlačidlo nájde skript.
Teraz celá stránka. Je kratšia, než by ste čakali:
<!doctype html>
<html>
<head>
<title>Moja stránka</title>
</head>
<body>
<h1>Prvá stránka</h1>
<p>Obyčajný odsek textu.</p>
<button id="play" class="btn">Hrať</button>
</body>
</html>Dve časti: <head> - servisná, patrí tam názov karty a odkazy na štýly; <body> - všetko, čo čitateľ vidí na obrazovke. Prvý riadok prehliadaču len oznamuje, že má pred sebou moderné HTML.
Schéma ukazuje hlavnú vlastnosť značkovania: na stránke všetko leží vnútri niečoho. <body> vnútri <html>, tlačidlo vnútri <body>, text vnútri tlačidla. Odtiaľ aj schodíky odsadení v súbore: nie sú tam pre krásu, ukazujú, čo je v čom vnorené.
Praktický záver je jednoduchý. Názov karty prehliadača a pripojenie štýlov žijú v <head> a na obrazovke ich vôbec nevidno. Všetko ostatné je v <body>. Keď agent v správe napíše "pridal som blok do body", ide presne o druhú krabicu: nové pribudlo na stránke, nie v servisnej časti.
Tagov je v jazyku vyše sto, ale na reálnej stránke sa takmer vždy točia tie isté:
| Tag | Čo robí |
|---|---|
<h1> ... <h6> | nadpisy, od hlavného po najmenšie |
<p> | odsek textu |
<a> | odkaz, adresa je v atribúte href |
<img> | obrázok, cesta k súboru v atribúte src |
<button> | tlačidlo |
<ul> a <li> | zoznam a položka zoznamu |
<div> | blokový kontajner, krabica pre ďalšie elementy |
<span> | kúsok textu v riadku, aby sa dal zvýrazniť zvlášť |
Posledné dva samy osebe nič neznamenajú a nič nekreslia. Sú to prázdne krabice, za ktoré sa štýly a skripty pohodlne chytajú, - a práve preto ich je na každej stránke najviac.
CSS: ako stránka dostane vzhľad
Holé značkovanie vyzerá chudobne: čierny text na bielom, sivé systémové tlačidlo, všetko pritlačené k ľavému okraju. Väčšinu rozdielu medzi tým a naštýlovanou stránkou robí CSS.
CSS sa skladá z pravidiel. Pravidlo je odpoveď na dve otázky: na čo ho použijeme a čo meníme.
.btn {
background: #6c5ce7; /* farba pozadia */
color: #ffffff; /* farba textu */
padding: 12px 24px; /* vnútorné odsadenie */
border-radius: 12px; /* zaoblenie rohov */
}Prvý riadok je selektor: hovorí, ktorých elementov sa pravidlo týka. Ďalej v zložených zátvorkách idú dvojice "vlastnosť: hodnota", každá sa končí bodkočiarkou.
Bodka pred btn označuje triedu. Pamätáte si atribút class="btn" na tlačidle? Práve ten tu zafungoval: v značkovaní dáte elementu štítok a v štýloch sa naň odvolávate. Jeden štítok môžete dať na desať tlačidiel - a všetkých desať bude vďaka jednému pravidlu rovnakých.
Vlastností má CSS stovky, ale na to, aby ste čítali cudzí súbor a chápali, čo sa v ňom deje, stačí niekoľko:
color- farba textu,background- farba alebo obrázok pozadia;font-sizeafont-family- veľkosť a typ písma;padding- odsadenie vnútri elementu,margin- zvonka, medzi susedmi;border-radius- zaoblenie rohov, mimochodom polovica dojmu "draho";transition- plynulosť: nie skokom, ale za 0,2 sekundy.
Najčastejšie pravidlá ležia v samostatnom súbore a stránka sa o ňom dozvie z jedného riadku v servisnej časti:
<head>
<link rel="stylesheet" href="style.css">
</head>Odstráňte tento riadok - súbor so štýlmi sa nenačíta. Text a elementy v značkovaní zostanú, ale zvyčajné rozloženie a vzhľad môžu zmiznúť a používať stránku bude niekedy ťažšie.
Na schéme vľavo aj vpravo je tá istá stránka: nadpis, dva riadky textu, tlačidlo. Žiadny element nepribudol ani nezmizol - v tomto príklade sa upravoval iba súbor so štýlmi.
Je to mapa na hľadanie, nie technický múr. Pre nové rozloženie musí agent niekedy zmeniť triedy alebo kontajnery v HTML a nevydarené pravidlo CSS môže prekryť tlačidlo a zabrániť kliknutiu. Preto sa po vizuálnej úprave pozrite na diff, otvorte stránku a skontrolujte dotknuté akcie.
JavaScript: čo sa stane po akcii
HTML a CSS už vedia zobraziť stránku a pridať jej plynulé prechody alebo animáciu. Tlačidlo z nášho príkladu však zatiaľ nemá vlastnú akciu: kliknete - skóre sa nezmení.
Ľubovoľnú logiku na stránku zvyčajne pridáva JavaScript. Tlačidlo už v HTML dostalo jedinečné meno id="play". Teraz je postup jednoduchý: nájsť element, počkať na udalosť, niečo zmeniť.
// nájdeme tlačidlo podľa jeho id
const button = document.getElementById("play");
let score = 0;
// prihlásime sa na udalosť: čo robiť po kliknutí
button.addEventListener("click", function () {
score = score + 1;
button.textContent = "Body: " + score;
});Prvé kliknutie zmení nápis na "Body: 1", druhé na "Body: 2". Ak sa nič nedeje, najprv skontrolujte, či je v HTML napísané id="play" a v skripte to isté meno play.
Sú tu tri detaily. const a let vytvárajú premennú - pomenovanú krabicu s hodnotou. addEventListener prihlasuje stránku na udalosť: kliknutie, písanie textu, prejdenie myšou. A vnútri zložených zátvoriek je funkcia - kus kódu, ktorý sa vykoná, keď udalosť nastane.
Všimnite si posledný riadok: skript mení text tlačidla. To je dôležitý moment - JavaScript vie meniť značkovanie aj štýly priamo počas behu stránky. Môže pridať odsek, skryť blok, prefarbiť tlačidlo. Preto hranica medzi vrstvami nie je múr, ale deľba práce.
V praxi začnite hľadať v JavaScripte, ak element reaguje na dáta, spracúva kliknutie alebo niečo počíta. Plynulé objavenie, zmenu farby a jednoduchý pohyb často robí CSS. Je to východiskový bod, nie konečná diagnóza: po úprave otvorte stránku a sami skontrolujte vzhľad aj akcie - jeden screenshot nestačí.
Jedno tlačidlo v troch súboroch
Poskladajme všetko na jednom elemente. Tlačidlo "Hrať" žije naraz v troch súboroch a každý zodpovedá za svoje.
<button id="play" class="btn">Hrať</button>.btn {
background: #6c5ce7;
border-radius: 12px;
}const playButton = document.getElementById("play");
playButton.addEventListener("click", function () {
playButton.textContent = "Hra spustená";
});Ak sú súbory pripojené, kliknutie zmení nápis "Hrať" na "Hra spustená". Teraz sa dá príklad vyskúšať bez vymýšľania chýbajúcej funkcie.
A teraz to najužitočnejšie - čo sa stane, keď odstránite po jednom riadku:
- odstránili ste HTML - zmizlo všetko: nie je čo štýlovať ani oživovať;
- odstránili ste CSS - tlačidlo je na mieste a funguje, len vyzerá ako sivé systémové tlačidlo z deväťdesiatych rokov;
- odstránili ste JS - tlačidlo je pekné, ale mŕtve. Kliknete naň a nič sa nedeje.
Z toho vyplýva jednoduchá mapa na zadanie úlohy. Ak sa vám nepáči, ako to vyzerá, začnite hľadať v štýloch. Ak sa vám nepáči, čo sa deje, - v skripte. Ak element vôbec nie je, začnite značkovaním. Práve začnite: reálna úprava môže zasiahnuť aj susednú vrstvu, preto sa výsledok agenta kontroluje v diffe a v prehliadači.
Čo leží v priečinku projektu
Najčastejšia zostava pre jednoduchú stránku vyzerá takto:
index.html značkovanie, vstupný bod
style.css štýly
script.js správanieSpájajú ich dva riadky v značkovaní. Štýly sa pripájajú v servisnej časti, skript - úplne na konci, pred uzatvorením </body>, aby v momente jeho spustenia už všetky elementy existovali:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- značkovanie stránky -->
<script src="script.js"></script>
</body>Býva to aj inak. Vo veľkom projekte sú súbory na desiatky, rozložené v priečinkoch ako css/ a js/, a vedľa ležia obrázky a fonty. Býva to aj naopak, keď je súbor iba jeden, - o tom hneď nižšie. Roly značkovania, štýlov a logiky aj tak zostávajú, ale názvy súborov a spôsob ich pripojenia sa môžu líšiť.
Keď štýly a skripty ležia priamo v stránke
Tri súbory sú najčastejšie rozloženie, ale nie jediné. To isté CSS môžete dať na tri rôzne miesta a so všetkými tromi sa skôr či neskôr stretnete.
Prvé ste už videli: samostatný súbor plus riadok <link>. Druhé - blok <style> priamo v značkovaní, bez samostatného súboru:
<head>
<style>
.btn {
background: #6c5ce7;
border-radius: 12px;
}
</style>
</head>Vnútri je všetko rovnaké: selektor, zložené zátvorky, dvojice "vlastnosť: hodnota". Zmenila sa len adresa. Takto sa píše, keď je stránka jedna a zakladať pre ňu samostatný súbor nemá zmysel.
Tretie miesto sú vložené štýly, po anglicky inline styles. Vlastnosti visia priamo na elemente, v atribúte style:
<button class="btn" style="background: #e17055; font-size: 20px">Hrať</button>Selektor tu netreba: aj tak je jasné, čoho sa pravidlo týka - elementu, na ktorom je napísané. Preto žiadne zložené zátvorky ani bodka pred triedou, len dvojice "vlastnosť: hodnota" oddelené bodkočiarkou, všetko v jednom riadku.
Pohodlné je to presne raz. Potom prichádzajú nevýhody. Pravidlo platí pre jediný element: desať tlačidiel - desať kópií, a meniť potom budete musieť všetkých desať. Bežný vložený štýl má zvyčajne prednosť pred bežným pravidlom zo súboru. Tlačidlo prefarbíte cez style, potom upravujete tú istú vlastnosť v style.css a nechápete, prečo sa farba nemení. Preto sa atribút style kontroluje medzi prvými; podrobné pravidlá priority zatiaľ nepotrebujete.
So skriptom je to rovnaké, len miesta sú dve. Samostatný súbor sa pripája cez <script src="...">, ale kód sa dá napísať aj priamo medzi tagy:
<script>
document.getElementById("play").addEventListener("click", function () {
alert("Hra spustená");
});
</script>Zhrňme to do jednej tabuľky, aby ste mali kam nazrieť:
| Čo | Kde leží | Ako to vyzerá v HTML |
|---|---|---|
| štýly | samostatný súbor | <link rel="stylesheet" href="style.css"> |
| štýly | blok priamo v stránke | <style> ... </style> |
| štýly | priamo na elemente | style="color: red" |
| skript | samostatný súbor | <script src="script.js"></script> |
| skript | blok priamo v stránke | <script> ... </script> |
Krajný prípad je, keď je spolu úplne všetko: značkovanie, blok <style> aj blok <script> žijú v jednom index.html. Nie je na tom nič strašné, pre malú stránku je to dokonca jednoduchšie: jeden súbor, otvoríte ho v prehliadači a funguje, nič sa po ceste nestratí. Nepohodlie príde neskôr, keď stránka narastie a v tej dlhočiznej plachte treba niečo nájsť. Vtedy sa obsah zvyčajne rozdelí do súborov a vznikne tá známa trojica.
Skôr než agenta požiadate "zmeniť štýly", zistite, kde ležia. Ak má projekt iba jeden index.html, súbor style.css nemusí existovať a úprava skončí priamo v značkovaní. Ak sa element nemení, požiadajte o kontrolu troch vecí: či je pripojený správny súbor so štýlmi, či sedí selektor a či tam nie je vložený style alebo silnejšie pravidlo. Tak sa hľadanie zúži bez hádania, kto je vinník.
Ako to funguje spolu s Claude Code
Teraz je jasné, čo sa deje, keď sa agent pustí do stránky:
- v jednoduchom statickom projekte môže agent sám napísať a prepojiť HTML, CSS a JavaScript. V inom projekte ho najprv požiadajte, aby ukázal štruktúru a pomenoval súbory, ktoré zodpovedajú za potrebný element;
- čo presne uvidíte pred zápisom, závisí od nastavení a režimu práce. Ak agent ukáže návrh vopred, prezrite si ho; po zápise si v každom prípade preštudujte diff a výsledné súbory. Názov
style.cssnapovedá rolu súboru, ale ešte nič nezaručuje; - vizuálnu úpravu kontrolujte očami a kliknutím na dotknuté elementy, úpravu správania - skutočnými akciami. Screenshot neukáže, že počítadlo prestalo počítať;
- ak sa niečo pokazilo, opíšte pozorovaný príznak, nie uhádnutú vrstvu: "po úprave je tlačidlo vidieť, ale kliknutie nič nerobí". Potom agent skontroluje prepojenia medzi HTML, CSS a JavaScriptom.
GO TO FULL VERSION