<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>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]]
↶↷Úvod k HTML
Vítejte ve vzdělávacím interaktivním materiálu Základy HTML. 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.
Další doporučená kapitola
Základy a základní značky HTML
Rozcestník příručky
Základy a základní značky HTML
Multimédia
Formátování textu
Kvíz