V tem vadnem programu se boste naučili, kako urediti strukturo HTML spletne strani z orodji za razvijalce Chrome (Chrome Developer Tools ali DevTools). Ta praktična orodja vam omogočajo, da v realnem času opazujete spremembe v strukturi in prikazu vaše spletne strani. DevTools ponujajo številne funkcije, ki olajšajo razvoj in odpravljanje napak spletnih strani. V tem vadnem programu se bomo osredotočili predvsem na urejanje HTML in DOM (Document Object Model).
Najpomembnejša spoznanja
- Orodja razvijalcev Chrome omogočajo obsežno manipulacijo HTML in DOM.
- Lahko podvajate HTML elemente, spreminjate njihovo besedilo, dodajate ali odstranjujete atribute ter celo prilagajate slog elementa.
- Te spremembe niso trajne in pomagajo pri testiranju in odpravljanju napak spletnih strani.
Korak za korakom vodnik
Najprej se morate prepričati, da ste odprli orodja razvijalcev Chrome. To lahko storite tako, da desno kliknete na spletno stran in izberete "Razišči" ali uporabite bližnjico na tipkovnici Ctrl + Shift + I (Windows) oziroma Cmd + Option + I (Mac).
Podvojitev elementov
Za podvojitev elementa kliknite z desno miškino tipko na želeni element na zavihku Elementi orodij DevTools in izberite možnost "Podvoji element". S tem se kopira celoten element skupaj s stili.
Urejanje HTML
Lahko tudi neposredno urejate HTML vsebino elementa. Desno kliknite na element in izberite "Uredi kot HTML". Odpre se polje za vnos, v katerem lahko urejate HTML kodo.
Tukaj lahko dodate celo večvrstične vsebine, tako da uporabite oznake
za ustvarjanje prelomov vrstic.
Za shranjevanje sprememb preprosto pritisnite tipko Enter ali kliknite izven polja za vnos.
Dodajanje in spreminjanje atributov
Za dodajanje ali spreminjanje atributa preprosto kliknite na element. Dvakrat kliknite na želeni atribut, na primer disabled, in ga spremenite neposredno.
Za dodajanje novega atributa desno kliknite na element in izberite možnost "Uredi atribut". Vnesite novo ime in vrednost atributa ter potrdite s tipko Enter.
Izbris elementov
Če določenega elementa več ne potrebujete, ga enostavno izbrišete. Desno kliknite na element in izberite "Izbriši". Element bo takoj odstranjen iz DOM.
Prisilitev sloga
Odlična funkcija orodij DevTools je možnost prisiljevanja stanja premika miške nad elementom. Desno kliknite na element in izberite "Prisili stanje" > "miškin premik". S tem se prikaže učinek premika miške, tako da lahko vidite posledice CSS stilov.
Upravljanje vidnosti
Včasih želite narediti elemente nevidne, ne da bi jih popolnoma izbrisali. Za to lahko nadzorujete vidnost elementa. Desno kliknite na element, izberite "Skrij element" in element bo postal neviden, vendar bo ostal v DOM.
Telo in celotna struktura
Lahko dostopaš tudi do elementa Body in narediš spremembe na celotni strani. Če želiš urediti vsebino oznake Body, enostavno izbereš element in uporabiš opisane tehnike zgoraj.
Uporaba sprememb
Pomembno je opozoriti, da so vse spremembe, ki jih narediš preko orodij za razvijalce, začasne. Ko ponovno naložiš stran, bodo vse prilagoditve izgubljene. Zato je priporočljivo, da kopiraš urejeni kodo in jo shraniš v svojem projektu, če želiš obdržati spremembe.
Povzetek
V tem vadnici si se naučil, kako lahko uporabiš orodja za razvijalce Chrome za urejanje HTML-ja in DOM-a. Lahko podvojiš elemente, modificiraš HTML, dodajaš, brišeš in nadzoruješ vidljivost elementov. Te funkcije so še posebej uporabne za odpravljanje napak (debugging) in razvoj spletnih strani.
Pogosto zastavljena vprašanja
Kako odprem orodja za razvijalce v Chrome?Odpri DevTools z desnim klikom na spletno stran in izberi "Pregledovanje" ali s Ctrl + Shift + I (Windows) oz. Cmd + Option + I (Mac).
So spremembe trajne?Ne, spremembe, ki jih narediš v DevTools, so začasne in izginejo ob osvežitvi strani.
Lahko dodam več vrstic besedila?Da, z uporabo oznak
v HTML-ju dodaj vrstice.
Kako izbrišem element?Klikni z desnim gumbom na element in izberi "Izbriši".
Kako ustvarim stanje Hover?Klikni z desnim gumbom na element in izberi "Prisili stanje" > "lebdi" za prikaz učinka Hover.
