HTML – Základní kostra jednoduché HTML stránky, základní tagy HTML
HTML – hypertext markup language
- je určený pro tvorbu webových stránek (.html, .htm)
- zaznamenává grafické prvky pomocí html jazyka (všechny prvky kromě obrázků jsou napsané kódem)
- prohlížeč pozná html soubor podle koncovky a podle tagu <!DOCTYPE>
Html stránka se rozděluje na tyto sekce:
- head – nastavení, připojené soubory, styly, skripty…
- – sada znaků
- – název stránky (title)
- – favicon
- – fonty (např. google fonts)
- – styly – CSS (buď ve stylu, nebo jako externí soubor)
- – skripty – JavaScript, JQuery
- body – je samotný obsah stránky
Obsah uvnitř body upravují kódy tzn. tagy (píší se do <> )
tagy – buď upravují textový obsah, nebo vkládají nové objekty
- párové – „obalí“ nějaký text nebo prvek stránky a ten upraví (struktura nebo vzhled)
- nepárové – vkládají nový obsah
- nadpisy – <h1></h1>, <h2></h2>, …. <h6></h6>
- odstavce – <p></p>výběr – <span></span>
- zalomení řádku <br> – break
- tabulka – <table></table>
- řádek tabulky <tr></tr>
- buňka tabulky – normální <td></td>
- buňka tabulky – nadpis <th></th>
- číslovaný seznam – <ol></ol>
- nečíslovaný seznam – <ul></ul>
- položky seznamu – <li></li>
Tagy upravující vzhled textu:
- tučné písmo – bold <b></b>
- kurzíva – italika <i></i>
- podtržené písmo – underlined <u></u>, <ins></ins>
- přeškrtnuté písmo – <strike></strike>, <del></del>
- zvýrazněné písmo <strong></strong>
- zmenšené písmo <small></small>
- zvětšené písmo <big></big>
Vzhled i strukturu upravují:
- kódy – pro zobrazení <code></code>
- citace – bloková <blockquote></blockquote>
- citace – v textu <q></q>
- citace – zdroj <cite></cite>
- preformátovaný text – <pre></pre>
Tagy vkládající nový obsah:
- odkazy – <a src=“kam odkazuje“ target=“_blank“ >Text odkazu</a>
– odkaz na webovou stránku
<a src=“http://www.hollarka.cz/uvod.html“ target=“_blank“ >Text odkazu</a> - -odkaz na relativní webovou stránku
<a src=“/slozka/uvod.html“ target=“_blank“ >Text odkazu</a>
<a src=“../uvod.html“ target=“_blank“ >Text odkazu</a> - – odkaz na kotvu na stejné webové stránce
<a src=“#nazevKotvy“ target=“_blank“ >Text odkazu</a>
<div id=“nazevKotvy“> </div> - rozdělení stránky – pomocí division <div></div>
můžeme nastavovat vzhled uvnitř tagu pomocí vlastnosti style
nebo v headu v kaskádových stylech – musíme nastavit id nebo class - horizontální čára – <hr>
- tlačítko – <button></button>
- rozklikávací detaily – <details><summary>To co je vidět</summary>
To co je schované. </details> - obrázky <img src=“adresaobrazku.jpg“ width=“200″ height=“600″ alt=“obrázek“ >