Co je HTML?
HTML je zkratka pro H yper T ext Markup L jazyk
HTML je standardní značkovací jazyk pro webové stránky
HTML elementy jsou stavební kameny HTML stránek
Prvky HTML jsou reprezentovány značkami <>
HTML prvky
Element HTML je počáteční značka a koncová značka s obsahem mezi:
<h1>Toto je nadpis</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
Atributy HTML
- Prvky HTML mohou mít atributy
- Atributy poskytují další informace o prvku
- Atributy přicházejí v párech název/hodnota jako charset="utf-8"
Jednoduchý HTML dokument
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Příklad vysvětlen
HTML elementy jsou stavební kameny HTML stránek.
- Deklarace
<!DOCTYPE html>definuje tento dokument jako HTML5 - Prvek
<html>je kořenový prvek stránky HTML - Atribut
langdefinuje jazyk dokumentu - Prvek
<meta>obsahuje metainformace o dokumentu - Atribut
charsetdefinuje znakovou sadu použitou v dokumentu - Prvek
<title>určuje název dokumentu - Prvek
<body>obsahuje viditelný obsah stránky - Prvek
<h1>definuje velký nadpis - Prvek
<p>definuje odstavec
HTML dokumenty
Všechny dokumenty HTML musí začínat deklarací typu dokumentu: <!DOCTYPE html>.
Samotný HTML dokument začíná <html>a končí </html>.
Viditelná část dokumentu HTML je mezi <body>a </body>.
Struktura dokumentu HTML
Níže je uvedena vizualizace dokumentu HTML (stránky HTML):
Poznámka: V prohlížeči se zobrazí pouze obsah v sekci <body> (bílá oblast nahoře).
HTML nadpisy
Záhlaví HTML jsou definována pomocí <h1>značek to <h6>.
<h1>definuje nejdůležitější nadpis. <h6>definuje nejméně důležitý nadpis:
Příklad
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML odstavce
Odstavce HTML jsou definovány pomocí <p>značek:
Příklad
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML odkazy
Odkazy HTML jsou definovány pomocí <a>značek:
Příklad
<a href="https://www.w3schools.com">This is a link</a>
Cíl odkazu je uveden v hrefatributu.
HTML obrázky
HTML obrázky jsou definovány pomocí <img>značek.
Zdrojový soubor ( src), alternativní text ( alt),
widtha heightjsou poskytovány jako atributy:
Příklad
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
HTML tlačítka
HTML tlačítka jsou definována pomocí <button>značek:
Příklad
<button>Click me</button>
HTML seznamy
Seznamy HTML jsou definovány pomocí značek <ul>(neuspořádaný/odrážkový seznam) nebo
<ol>(seřazený/číslovaný seznam), po nichž následují <li>
značky (položky seznamu):
Příklad
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML tabulky
HTML tabulka je definována pomocí <table>značky.
Řádky tabulky jsou definovány pomocí <tr>značek.
Záhlaví tabulek jsou definována pomocí <th>značek. (ve výchozím nastavení tučně a na střed).
Buňky tabulky (data) jsou definovány pomocí <td>značek.
Příklad
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Programování HTML
Každý prvek HTML může mít atributy .
Pro vývoj webu a programování jsou nejdůležitější atributy id a class. Tyto atributy se často používají k řešení manipulací s webovými stránkami založenými na programu.
| Atribut | Příklad |
|---|---|
| id | <table id ="table01" |
| třída | <p class ="normal"> |
| styl | <p style ="font-size:16px"> |
| data- | <div data -id="500"> |
| při kliknutí | <input onclick ="myFunction()"> |
| onmouseover | <a onmouseover ="this.setAttribute('style','color:red')"> |
Kompletní HTML tutoriál
Toto byl krátký popis HTML.
Kompletní HTML tutoriál najdete na W3Schools HTML Tutorial .
Úplný odkaz na značku HTML najdete na W3Schools Tag Reference .