<h1>Úvod k HTML</h1> Vítejte ve vzdělávacím interaktivním materiálu <strong>Základy HTML</strong>. Tento interaktivní materiál je určen pro začátečníky, kteří se chtějí seznámit s HTML a začít vytvářet vlastní webové stránky. V průběhu tohoto materiálu se dozvíte, jak vytvořit základní strukturu webové stránky, používat základní HTML značky a přidávat multimédia, jako jsou obrázky, audio, video a iframe. Po absolvování tohoto materiálu budete mít základní znalost HTML a budete schopni začít tvořit své vlastní webové stránky. <h3>Další doporučená kapitola</h3> [[Základy a základní značky HTML]] <h3>Rozcestník příručky</h3> [[Základy a základní značky HTML]] [[Multimédia]] [[Formátování textu]] [[Kvíz]]

<h1>Multimédia v HTML</h1> HTML vám umožňuje přidávat různá multimédia do Vašich webových stránek. Můžete vložit obrázky, audio soubory, videa a dokonce i webové stránky v iframe. Zde je několik příkladů: <ul> <li>Obrázky se vkládají pomocí značky <img>. Například: <img src="obrazek.jpg" alt="Popis obrázku"> <br /> Příklad: <img src="https://milanrehor.jecool.net/assets/img/predmety/online-education-3412473_1280.jpg" alt="ukázka obrázku" width="350px"> </li> <li>Audio můžete přehrát pomocí značky <audio>. Například: <audio src="hudba.mp3" controls></audio> <br /> Příklad: <audio src="https://milanrehor.jecool.net/assets/files/cardinal-37075.mp3" controls></audio> </li> <li>Video lze vložit pomocí značky <video>. Například: <video src="videoklip.mp4" controls width="320" height="240"> <br /> Příklad: <video src="https://milanrehor.jecool.net/assets/files/fall_-_23881%20(720p).mp4" controls width="320" height="240"></video> </li> <li>Iframe umožňuje vložit obsah jiné webové stránky. Například: <iframe src="https://www.example.com" width="600" height="400"></iframe> <br /> Příklad: <iframe src="https://www.jakpsatweb.cz/" title="ukázka iframe"> </iframe></li> </ul> <h3>Další doporučená kapitola</h3> [[Formátování textu]] <h3>Rozcestník příručky</h3> [[Úvod k HTML]] [[Základy a základní značky HTML]] [[Formátování textu]] [[Kvíz]]

<h1>Kvíz</h1> Tento kvíz slouží k ověření Vašich znalostí z tohoto interaktivního materiálu. Jakmile budete připraveni, zobrazte si první otázku odkazem níže. [[První otázka]] <h3>Rozcestník příručky</h3> [[Úvod k HTML]] [[Základy a základní značky HTML]] [[Multimédia]] [[Formátování textu]]

<h1>Formátování Textu v HTML</h1> Jednou z důležitých aspektů webových stránek je formátování textu. Pomocí HTML je umožněno definovat různé styly pro text, což zahrnuje změny velikosti písma, tučný nebo kurzívní text a další úpravy. <h2>Nadpisy</h2> Nadpisy se používají k označení různých úrovní nadpisů na stránce. HTML nabízí šest úrovní nadpisů, přičemž <b><h1></b> je nejvýraznější a <b><h6></b> nejméně výrazný. <h2>Tučné a Kurzíva</h2> Text můžete zvýraznit pomocí tučného nebo kurzívního stylu. Pro tučný text lze použít značky <b><strong></b> nebo <b><b></b>, zatímco kurzívu je možné značkami <b><em></b> nebo <b><i></b>. <h2>Podtržený Text</h2> Pokud chcete text podtrhnout, použijte značku <b><u></b>. To je užitečné například pro zvýraznění odkazů. <h3>Další doporučená kapitola</h3> [[Kvíz]] <h3>Rozcestník příručky</h3> [[Úvod k HTML]] [[Základy a základní značky HTML]] [[Multimédia]] [[Kvíz]]

<h1>Základní HTML značky a struktura</h1> <strong>HTML</strong> (HyperText Markup Language) je základní stavební kámen webových stránek. Jinak řečeno, jedná se o klíčový jazyk pro tvorbu webových stránek a základní znalost jeho značek je nezbytná pro každého, kdo se chce seznámit s webovým vývojem. <h2>HTML: Jazyk webových stránek</h2> HTML slouží k definování struktury a obsahu webových stránek. Vytváří základní kostru stránky, která umožňuje prohlížeči pochopit, jak zobrazit informace a obsah. Zde je náhled na základní strukturu HTML dokumentu: <img src="https://milanrehor.jecool.net/assets/img/other/doctype.png" alt="ukázka doctype" width="350px"> Vysvětlení: <ul> <li><!DOCTYPE html> definuje verzi HTML, kterou dokument používá.</li> <li><html> obaluje celý dokument a označuje začátek a konec webové stránky.</li> <li><head> obsahuje metadata, jako je název stránky a odkazy na externí soubory.</li> <li><title> určuje název stránky, který se zobrazuje v záhlaví prohlížeče.</li> <li><body> obsahuje veškerý viditelný obsah stránky, včetně textu a multimédií.</li> <li><h1> označuje nadpis první úrovně.</li> <li><p> označuje odstavec textu.</li> </ul> <h2>Základní HTML značky</h2> S příchodem HTML 5 je v nabídce celá řada HTML značek, historicky nejpoužívanější jsou však následující: <ul> <li><b>Text</b>: <p> a <span> značky se používají pro text.</li> <li><b>Odkazy</b>: <a> značka se používá k vytvoření odkazů na jiné stránky.</li> <li><b>Obrázky</b>: <img> značka umožňuje vkládat obrázky na stránku.</li> <li><b>Seznamy</b>: <ul>, <ol>, a <li> značky se používají k vytvoření seznamů.</li> <li><b>Tabulky</b>: <table>, <tr>, <th>, a <td> značky slouží k vytváření tabulek.</li> </ul> <h3>Další doporučená kapitola</h3> [[Multimédia]] <h3>Rozcestník příručky</h3> [[Úvod k HTML]] [[Multimédia]] [[Formátování textu]] [[Kvíz]]

<h1>První otázka</h1> Otázka 1: Jaký HTML element se používá k vytvoření nadpisu první úrovně? [[<heading>]] [[<h1>]] [[<title>]] Můžete přejít zpět na úvodní stránku kvízu: [[Kvíz]]

<h1>Druhá otázka</h1> Jak vložíte obrázek na webovou stránku v HTML? [[<img src="obrazek.jpg" alt="Popis obrázku">]] [[<picture source="obrazek.jpg" description="Popis obrázku">]] [[<image src="obrazek.jpg" alt="Popis obrázku">]] Můžete přejít zpět na úvodní stránku kvízu: [[Kvíz]]

<h1>Kvíz</h1> Která značka se používá k vytvoření odkazu v HTML? [[<link>]] [[<url>]] [[<a>]] Můžete přejít zpět na úvodní stránku kvízu: [[Kvíz]]

<h1>To je špatně...</h1> Správně je <b>h1</b> značka. [[Druhá otázka]]

<h1>To je správně!</h1> [[Druhá otázka]]

<h1>To je špatně...</h1> Správně je <b>h1</b> značka. [[Druhá otázka]]

<h1>To je správně!</h1> [[Třetí otázka]]

<h1>To je špatně...</h1> Správně je <b>img</b> značka. [[Třetí otázka]]

<h1>To je špatně...!</h1> Správně je <b>a</b> značka. To byla poslední otázka. Můžete přejít zpět na úvodní stránku kvízu: [[Kvíz]]

<h1>To je správně!</h1> To byla poslední otázka. Můžete přejít zpět na úvodní stránku kvízu: [[Kvíz]]

<h1>To je špatně...!</h1> Správně je <b>a</b> značka. To byla poslední otázka. Můžete přejít zpět na úvodní stránku kvízu: [[Kvíz]]