Slovník tvorby webů a online marketingových pojmů

HTML

  • Proweby.cz
  • 10. 7. 2024
  • H.

Co je to HTML?

HTML (HyperText Markup Language) je základní značkovací jazyk používaný pro tvorbu a strukturování obsahu na webových stránkách. Je to základní stavební kámen webu, který umožňuje vytváření webových stránek a webových aplikací. HTML byl poprvé vyvinut Timem Berners-Leem v roce 1991 a od té doby prošel mnoha verzemi a vylepšeními.

Struktura HTML dokumentu

Každý HTML dokument má základní strukturu, která zahrnuje několik klíčových prvků:

Deklarace DOCTYPE

htmlZkopírovat kód<!DOCTYPE html>

Tato deklarace určuje verzi HTML, kterou dokument používá. V moderních dokumentech se používá jednoduše <!DOCTYPE html>, což značí HTML5.

Tagy <html>, <head> a <body>

htmlZkopírovat kód<html>
  <head>
    <title>Titul stránky</title>
  </head>
  <body>
    <h1>Hlavní nadpis</h1>
    <p>Obsah stránky.</p>
  </body>
</html>
  • <html>: Kořenový element, který obaluje celý HTML dokument.
  • <head>: Obsahuje metadata dokumentu, jako je název (<title>), odkazy na stylové soubory, skripty a další.
  • <body>: Obsahuje veškerý viditelný obsah webové stránky, jako jsou nadpisy, odstavce, obrázky, odkazy a další prvky.

Základní HTML prvky

Nadpisy

Nadpisy se používají pro strukturování obsahu. HTML poskytuje šest úrovní nadpisů, od <h1> po <h6>.

htmlZkopírovat kód<h1>Titul stránky</h1>
<h2>Sekce</h2>
<h3>Podsekce</h3>

Odstavce

Odstavce jsou označeny tagem <p>.

htmlZkopírovat kód<p>Toto je odstavec textu.</p>

Odkazy

Odkazy se vytvářejí pomocí tagu <a> a atributu href.

htmlZkopírovat kód<a href="https://www.example.com">Navštivte naši stránku</a>

Obrázky

Obrázky se vkládají pomocí tagu <img> a atributů src (zdroj) a alt (alternativní text).

htmlZkopírovat kód<img src="obrazek.jpg" alt="Popis obrázku">

Seznamy

HTML podporuje dva typy seznamů: neuspořádané (bulleted) seznamy (<ul>) a uspořádané (numbered) seznamy (<ol>).

Neuspořádaný seznam

htmlZkopírovat kód<ul>
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ul>

Uspořádaný seznam

htmlZkopírovat kód<ol>
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

Tabulky

Tabulky se vytvářejí pomocí tagů <table>, <tr> (řádek), <th> (hlavička) a <td> (buňka).

htmlZkopírovat kód<table>
  <tr>
    <th>Sloupec 1</th>
    <th>Sloupec 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Formuláře

Formuláře umožňují interakci uživatelů s webem. Vytvářejí se pomocí tagu <form> a různých vstupních prvků jako <input>, <textarea>, <button> a dalších.

htmlZkopírovat kód<form action="/submit" method="post">
  <label for="jmeno">Jméno:</label>
  <input type="text" id="jmeno" name="jmeno">
  <button type="submit">Odeslat</button>
</form>

HTML5 Novinky

HTML5 přineslo mnoho nových prvků a funkcí, které usnadňují tvorbu moderních webových aplikací.

Nové semantické prvky

HTML5 zavedlo nové semantické prvky, které zlepšují strukturu a čitelnost kódu.

  • <header>: Hlavní část stránky nebo sekce.
  • <nav>: Navigační odkazy.
  • <section>: Sekce obsahu.
  • <article>: Samostatný obsah, jako je článek.
  • <footer>: Zápatí stránky nebo sekce.
  • <aside>: Vedlejší obsah, jako jsou postranní lišty.

Multimediální prvky

HTML5 přidalo podporu pro nativní přehrávání multimédií bez potřeby externích pluginů.

  • <audio>: Vložený zvukový soubor.
htmlZkopírovat kód<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Váš prohlížeč nepodporuje přehrávání zvuku.
</audio>
  • <video>: Vložené video.
htmlZkopírovat kód<video controls>
  <source src="video.mp4" type="video/mp4">
  Váš prohlížeč nepodporuje přehrávání videa.
</video>

Závěr

HTML je základním kamenem webového vývoje, který umožňuje vytváření a strukturování obsahu na webových stránkách. Díky své jednoduchosti a všestrannosti je HTML snadno pochopitelné a použitelné pro vývojáře všech úrovní. Moderní HTML5 přináší nové funkce a prvky, které usnadňují tvorbu komplexních a interaktivních webových aplikací.