Prozkoumání a přetvoření první webové stránky

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 Kopírovat adresu obrázku.

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 Cancel v editoru kódu.

Pokud jste se svými změnami spokojeni, klepněte na zelené tlačítko Update a podívejte se, jak vaše předělávka vypadá.

Když jste připraveni ji publikovat, klepněte na tlačítko Publish v pravé postranní liště nebo stiskněte na klávesnici klávesu p.

Jste-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.

Byl tento článek srozumitelný?

Počkejte prosím...

S napsáním tohoto článku pomohli tihle úžasní lidé:

Illustration of hands

Zapojte se

Rozvíjejte a sdílejte své znalosti s ostatními. Odpovídejte na dotazy a vylepšujte naše články nápovědy.

Zjistit více