HTML je značkovací jazyk, který vám umožňuje vytvářet různé prvky na webové stránce. Je to velmi flexibilní a výkonný nástroj, který lze použít k vytváření interaktivního a krásného obsahu. Jedním z takových prvků může být prezentace, kterou lze vytvořit v HTML bez použití JavaScriptu.
Na rozdíl od JavaScriptu vám HTML umožňuje vytvářet statické prvky na stránce. Statičnost není vždy nevýhodou, zvláště pokud potřebujete vytvořit jednoduchou a rychlou prezentaci bez přidání složitých animací a přechodů mezi snímky.
Chcete-li vytvořit prezentaci v HTML, budete potřebovat pouze základní znalosti tohoto značkovacího jazyka a schopnost pracovat se značkou , která je navržena pro vkládání obrázků. Na stránce můžete vytvořit více obrázků a zobrazovat je postupně pomocí jednoduchého kódu v HTML.
Vytvoření prezentace v HTML bez JavaScriptu
K vytvoření prezentace v HTML bez JavaScriptu, můžete použít prvek a CSS animace. Nejprve identifikujte kontejner, který by měl zobrazovat snímky:
Poté přidejte další CSS k vytvoření prezentace:
.slideshow .slideshow img .slideshow img:first-child .slideshow img.active @keyframes slide 20% < opacity: 1; >80% < opacity: 1; >100% < opacity: 0; >>.slideshow img:nth-child(1) .slideshow img:nth-child(2) .slideshow img:nth-child(3) Tento CSS vytváří jednoduchou animaci, která automaticky přepne snímky po 9 sekundách. Délku animace můžete upravit přidáním nebo odebráním klíčových snímků (@keyframes ) pro různé děti kontejneru slideshow.
Nyní, když jste vytvořili prezentaci v HTML bez použití JavaScriptu, můžete ji přidat na jakoukoli webovou stránku pouhým vložením kódu kontejneru prezentace a příslušného CSS.
Označení HTML
K vytvoření prezentace v HTML bez použití JavaScriptu budeme potřebovat správně strukturované značení. K tomu používáme HTML tagy. Hlavní tag, který bude obsahovat snímky, bude tag
. V rámci této značky umístíme snímky pomocí dalších značek HTML. V každém snímku použijeme značku k zobrazení odpovídajícího obrázku. Každý snímek bude obsahovat vlastní značku .
Kromě značky můžeme také použít jiné značky HTML k přidání popisu snímků nebo tlačítka pro ovládání prezentace. Můžeme například použít značky
a
pro přidání záhlaví a textu ke každému snímku. Můžeme také použít značky k vytvoření ovládacích tlačítek prezentace, jako je" předchozí snímek "a"další snímek".
Přidání obrázků
Zde je návod, jak vytvořit tabulku s buňkami pro každý obrázek:
V tomto příkladu jsme vytvořili tabulku s jedním řádkem a třemi sloupci. V každé buňce je obrázek zobrazený pomocí značky . Zadali jsme cestu ke každému obrázku pomocí atributu src a přidali alternativní text pomocí atributu alt .
Můžete přidat tolik buněk, kolik obrázků potřebujete. Pamatujte, že můžete také změnit velikost obrázků a v případě potřeby přidat další atributy.
Použití stylů CSS
K vytvoření prezentace v HTML bez použití JavaScriptu lze použít styly CSS. Styly vám pomohou nastavit vzhled snímků, animace a umístění prvků na stránce.
Jedním ze způsobů, jak použít styly pro prezentaci, je použít šablonu stylů CSS. Chcete-li to provést, musíte vytvořit blok uvnitř tagu vašeho HTML dokumentu.
Uvnitř tohoto bloku můžete pomocí selektorů CSS definovat styly pro různé prvky prezentace. Můžete například nastavit barvu snímku na pozadí, písmo textu, rozměry prvků a další vlastnosti.
Příklad stylů pro vytvoření prezentace:
V uvedeném příkladu jsou definovány styly pro zabalení prezentace s třídou .slideshow i pro snímky s třídou .slide . Zde jsou nastaveny vlastnosti, které určují velikost a pozici snímků, stejně jako animace přechodu mezi nimi.
Definici stylů lze také přenést do samostatného souboru CSS a připojit jej k dokumentu HTML pomocí značky .
Animace přechodů
Existuje několik způsobů, jak implementovat animace přechodů do HTML bez použití JavaScriptu. Jedním z nich je použití CSS animace.
Chcete-li vytvořit animaci přechodu mezi snímky, můžete použít vlastnost transition v CSS. Pomocí této vlastnosti můžete určit, které vlastnosti stylu by měly být animovány a jaké hodnoty by měly být aplikovány během animace. Můžete například nastavit přechod podle barvy pozadí a délky animace.
Příklad použití animace CSS k vytvoření přechodu mezi snímky je následující:
Zde vlastnost transition označuje, že musí být animována vlastnost background-color s dobou animace 1 sekunda.
Po nastavení stylů můžete do snímků přidat animace nastavením různých hodnot vlastností background-color v CSS:
Výsledkem je, že skript animuje přechod mezi snímky a mění barvu pozadí podle daných hodnot.
Použití CSS animace vám umožňuje vytvářet různé efekty přechodů mezi snímky, což jim dodává styl a dynamiku.
Přidání navigace
Chcete-li přidat navigaci do prezentace, můžeme použít položky tabulky. Vytvořte nový řádek v tabulce pod každým snímkem a přidejte navigační tlačítka do každé buňky tohoto řádku. Každé tlačítko bude mít svérázné číslo snímku, které bude sloužit jako odkaz na příslušný snímek. Zde je příklad kódu:
V tomto příkladu jsou navigační tlačítka přidána do tabulky po každém snímku. Každé tlačítko má jedinečné číslo, které odpovídá číslu snímku. Funkce currentSlide () se vyvolá kliknutím na tlačítko a zobrazí snímek se zadaným číslem.
Nyní, když je přidána navigace, uživatel bude moci snadno přepínat mezi snímky kliknutím na tlačítka.