Cvičná webová stránka

Stáhněte si košilku webové stránky (pravý klik, Uložit odkaz jako...).
- Možná vás láká stránku otevřít (to můžete) a potom použít Uložit stránku jako..., to ale obvykle vede k jiným výsledkům. Dneska je to jedno, ale při jiných školních zadáních si tím můžete nechtěně přidělat práci.
Spusťte (z nabídky Start) aplikaci VS Code. Pokud by se to nedařilo, nainstalujte ji z MS Store.
Otevřte stažený soubor z prvního kroku.
- Můžete místo toho použít přímo ve VS Code šablonu html doc, výsledek bude přesně stejný.
Najděte v souboru prázdné místo mezi značkami <body> a </body> a napište do něj dva řádky: první jako nadpis, druhý jako sdělení.
Soubor uložte (z hlavní nabídky) a ve webovém prohlížeči ověřte, že obě části textu se vypsaly na stejném řádku.
- Pro časté ukládání souboru na stejné místo je rychlejší Save než Save as... Ještě rychlejší je zapnout si v té nabídce Auto Save.
- Pro časté otevírání souboru v prohlížeči je rychlejší jej nechat otevřený a jen stisknout klávesu F5.
Ve VS Code přidejte do souboru značku (tag) pro nadpis první úrovně a pro odstavec. Dovnitř nakopírujte první, resp. druhý řádek svého textu.
Dovnitř značky <title> napište totéž, co máte v nadpisu první úrovně.
- Tenhle titulek se neukazuje přímo na stránce, nýbrž v názvu záložky nebo okna prohlížeče.
Přidejte další značku odstavce s libovolným textem uvnitř. Uvnitř tohoto textu někde přidejte značku pro tučné písmo, pro kurzívu, nebo (podle vaší libovůle) pro horní nebo spodní index.
Mezi oba odstavce přidejte libovolný obrázek.
- Můžete použít hledání obrázků (bing, google) nebo wikipedii, kliknout na obrázek pravým tlačítkem a zvolit Kopírovat adresu obrázku.
- Odkaz vložte jako vlastnost <img src="https://nejaky.odkaz.na/.../obrazek.jpg">
- Jestli se obrázek ze zkopírovaného odkazu nedaří zprovoznit, můžete v nouzi použít moji žábu.
- Jestli chcete naopak něco navíc, můžete místo obrázku přidat rovnou video. Najít vhodný zdroj je v tom případě těžší a v nouzi můžete použít třeba veselého králíka.