Obsah
Ujistěte se, že máte nainstalováno X-Ray Goggles.
Kdykoli narazíte na stránku, kterou chcete prozkoumat, klepněte na liště záložek na tlačítko X-Ray Goggles a začněte s hackováním.
Prozkoumání prvků
Když zaktivujete X-Ray Goggles, zpozorujete, že při zastavení ukazatele myši se zvýrazní určité části stránky.
Tyto rámečky představují prvky webové stránky. Klepněte na jeden a přejdete do editoru kódu, kde můžete vytvořit vlastní variantu daného prvku.
Přetváření stránky
V závislosti na typu vybraného prvku můžete dělat různé druhy úprav.
Změna textu
V editoru kódu vyberte blok textu a změňte jeho znění. V hlavní panelu pak uvidíte, jak to bude na stránce vypadat.
Výměna obrázku
Všechny obrázky jsou v HTML kódu deklarovány značkou <img>
. Každá tato značka obsahuje URL, které značce říká, kde se reálný obrázek nachází.
Původní obrázek můžete nahradit jakýmkoli jiným. Jednoduše v prohlížeči otevřete nový panel a v něm najděte obrázek, který chcete použít. Pak na něj klepněte pravým tlačítkem myši a z nabídky zvolte
.Vložte zkopírované URL obrázku do editoru kódu a v náhledu uvidíte, jak se obrázek změní.
Změna hypertextového odkazu
Hypertextžové odkazy mohou odkazovat kamkoli chcete.
Všechny hypertextové odkazy začínají textem <a href="
, za nímž následuje URL, na které odkaz odkazuje. Změňte ono URL mezi uvozovkami a tím jste změnili cíl odkazu.
Možná také budete chtít změnit text odkazu. To je text, na který návštěvník stránky klepne, chce-li přejít na cíl odkazu, a často je proveden v modré barvě a podtržený.
Uložení a publikování
Pokud jste udělali chybu, můžete klepnout na tlačítko
v editoru kódu.Pokud jste se svými změnami spokojeni, klepněte na zelené tlačítko
a podívejte se, jak vaše předělávka vypadá.Když jste připraveni ji publikovat, klepněte na tlačítko p.
v pravé postranní liště nebo stiskněte na klávesnici klávesuJste-li na webu teach.mozilla.org přihlášeni, bude vaše publikovaná předělávka přidána na vaši stránku "Your Projects" na teach.mozilla.org a obdržíte jedinečné URL pro její sdílení s přáteli.