HTML - značkovací jazyk
HTML je jazyk pre popis webových stránok.
- HTML je skratka pre Hyper Text Markup Language
- HTML nie je programovací jazyk, je to značkovací jazyk
- Značkovací jazyk je množina značiek, pomocou ktorých určujeme vlastnosti textu
- HTML používa značky značky na opis webovej stránky
Obsah
HTML tagy
- HTML tagy sú kľúčové slová, obklopený hranatých zátvorkách ako <html>
- HTML tagy bežne prichádzajú v pároch, ako je <b> a </ b>
- Prvá značka v páre je štart značka, druhá značka je značka koniec
- Začiatok a koniec značky sú taktiež tzv. otváranie značky a uzatváracie značky (tagy)
HTML stránka pozostáva z HTML elementov. HTML elementy definujú HTML značky. Príkladom HTML elementu môže byť nadpis (H1, H2, ...), obrázok (IMG), formulár (FORM) a iné. HTML element môže mať atribúty. Atribút je doplňujúca informácia HTML elementu. Príkladom atribútu elementu img môže byť atribút src:
<img src="subor.jpg"/>
HTML dokumenty = webové stránky
- HTML dokumenty popisujú webové stránky
- HTML dokumenty obsahujú HTML tagy a čistý text
- HTML dokumenty sú tiež známe ako webové stránky
Úlohou webového prehliadača (napríklad Internet Explorer, Firefox alebo Opera), je čítať HTML dokumenty a zobraziť ich ako webové stránky. Prehliadač nezobrazuje HTML tagy, ale používa ich na interpretovanie obsahu stránky:
<html>
<body>
<h1>Môj prvý nadpi</h1>
<p>Môj prvý odstavec.</p>
</body>
</html>
Vysvetlenie:
- Značky <html> a </ html> určuje začiatok a koniec stránky. Text medzi nimi popisuje obsah webovej stránky.
- Text medzi <body> a </ body> je viditeľný obsah stránky
- Text medzi <h1> a </ h1> sa zobrazí ako nadpis
- Text medzi <p> a </ p> sa zobrazí ako odstavec
Pravidlá pre HTML značky
- HTML značka je obklopená dvomi znakmi: < a >
- HTML tagy sa zvyčajne objavujú v pároch, ako je <b> a </ b>
- Prvá značka v páre je štart značka, druhá značka je koncová značka
- Text medzi začiatočnou a koncovou značkou je obsah HTML elementu
- HTML značky nerozlišujú malé a veľké písmená; <b> znamená to isté ako <B>
Základné HTML značky
| Nadpisy | 1. úroveň | <h1>...</h1> |
|---|---|---|
| 2. úroveň | <h2>...</h2> | |
| 3. úroveň | <h3>...</h3> | |
| 4. úroveň | <h4>...</h4> | |
| 5. úroveň | <h5>...</h5> | |
| 6. úroveň | <h6>...</h6> | |
| Odstavec | Zoskupí text do bloku | <p>...</p> |
| Obrázok | (nepárová značka) Vloží na stránku obrázok | <img src="cesta k obrazku" alt="alternativky text" title="nazov obrazku"/> |
| Odkazy | Odkaz na inú stránku | <a href="adresa">text odkazu</a> |
| Odkaz v rámci HTML stránky | <a href="#odskok">text odkazu</a> | |
| Zoznam | Číslovaný zoznam | <ol>...</ol> |
| Nečíslovaný zoznam | <ul>...</ul> | |
| Položka zoznamu | <li>...</li> | |
| Značky pre formátovanie textu | Tučný text | <b>...<b/> |
| Veľký text | <big>...</big> | |
| Šikmý text | <i>...<i/> | |
| Malý text | <small>...</small> | |
| Hrubo tlačený text | <strong>...</strong> | |
| Dolný index | <sub>...</sub> | |
| Horný index | <sup>...</sup> | |
| Tabuľky | Tabuľka | <table>...</table> |
| Riadok tabuľky | <tr>...</tr> | |
| Bunka tabuľky | <td>...</td> | |
| Formulár | Formulár | <form>...</form> |
| Vstupné políčko | <input>...</input> | |
| Tlačidlo na odoslanie | <submit>...</submit> | |
| Textový blok | <textarea>...</textarea> | |
| Výber z viacerých možností | <select>...</select> | |
| Kontajner | Samostatný blok s zadefinovanými rozmermi | <div>...</div> |
Odstavec
Obrázok
Odkaz
Zoznam
Tabuľka
Formulár
Kontajner
HTML farby
Jazyk HTML definuje farby pomocou ich mien, pomeru farebných zložiek RGB (Červená, Zelená, Modrá) v percentuálnom pomere, alebo vyjadrením v hexadecimálnych číslach.
| Názov farby | HEX kód | Desiatkový kód | Ukážka |
|---|---|---|---|
| Čierna | #000000 | rgb(0,0,0) | |
| Červená | #FF0000 | rgb(255,0,0) | |
| Zelená | #00FF00 | rgb(0,255,0) | |
| Modrá | #0000FF | rgb(0,0,255) | |
| Žltá | #FFFF00 | rgb(255,255,0) | |
| Tyrkysová | #00FFFF | rgb(0,255,255) | |
| Purpurová | #FF00FF | rgb(255,0,255) | |
| Šedá | #C0C0C0 | rgb(192,192,192) | |
| Biela | #FFFFFF | rgb(255,255,255) |
HTML hlavička
Elementy v HTML hlavičke nie sú zobrazené na web stránke. Informácie, ktoré môžu byť umiestnené v hlavičke sú hlavne:
- metainformácie o stránke (jej tvorcovi, obsahu, ...)
- odkazy na súbory so štýlmi (CSS)
- odkazy na súbory s Javascriptovým kódom
- informácie o názve stránky
Príklad hlavičky HTML stránky
<html>
<head>
<title>Názov stránky</title>
<link type="text/css" href="styl.css" rel="stylesheet"/>
<meta name="description" content="internetove technologie" />
</head>
...
</html>
