Typy tagů stylové (formátovací) - tučné <b>, šikmé <i>, styl <style>, písmo <font> ... strukturální- odstavce <p>, nadpisy <h1>, seznamy <ul>, tabulky <table> ... popisné - <content>, adresa <address>, navigace <menu> ... navigační - odkazy na jiné stránky <a href="adresa_odkazu">Text odkazu</a> multimediální - vložení obrázků <img src="adresa_obrázku">, animace, zvuky, video ... párové x nepárové, bez atributů x s atributy
Struktura stránky <!DOCTYPE HTML > <html> <head> <title> Název stránky </title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h1> Nadpis </h1> <p> Nějaký text v odstavci </p> </body> </html>
Nadpisy <h1>Nadpis nejvyšší úrovně</h1> <h2>Nadpis kapitoly nebo odstavce</h2> <h3>Podnadpis</h3> ... <h6>Poslední podnadpis</h6>
Formátování textu <b>/<i> tučné/kurzíva </b>/</i> <span> část textu </span> <em> kurzíva </em> <strong> tučně </strong> <code> výpis kódu </code> <samp> ukázka </samp> <cite> citace </cite> horní <sup> index </sup> dolní <sub> index </sub>
Odstavec <p>Odstavec zalamuje řádky podle šířky prostoru, který má (nejčastěji okna). Na konci odstavce se zalomí řádek.</p> <p>Zalomení řádku <br> a pokračuji na novém řádku.</p> neoddělitelná mezera mezi slovy Lorem Ipsum
Seznam nečíslovaný Nečíslovaný seznam (puntíky): <ul> <li>první položka</li> <li>druhá položka</li> </ul> Obrázkové odrážky (CSS) <style type="text/css"> ul li {list-style-image: url("obrazek.gif"} </style> disc (kolečko - výchozí) circle (kroužek) square (čtvereček)
Vzhled odrážky disc (kolečko - výchozí) <ul type="disc"> <li> První </li> <li> Druhá </li> <li>Třetí </li> </ul> <ul type="circle"> <li> První </li> <li> Druhá </li> <li>Třetí </li> </ul> <ul type="square"> <li> První </li> <li> Druhá </li> <li>Třetí </li> </ul> disc (kolečko - výchozí) circle (kroužek) square (čtvereček)
Seznam číslovaný Číslovaný seznam (1, a, A, I, …): <ol> <li>první položka</li> <li>druhá položka</li> </ol> Změna číslování(CSS) <style type="text/css"> ol li {list-style-type: lower-alpha;} </style> <ol start="5"> <li>položka 1</li> <li>položka 2</li> </ol>
Změna stylu číslování 1 (arabská čísla - výchozí) A (velká písmena) a (malá písmena) i (římská malá čísla) I (římská velká čísla) <ol type="A"> <li> První </li> <li> Druhá </li> <li>Třetí </li> </ol>
Víceúrovňové seznamy <ol> <li>První</li> <ol type="A"> <li>Jedna</li> <li>Dvě</li> </ol> <li>Druhá</li> <ol type="A"> <li>Jedna</li> <li>Dvě</li> </ol> </ol>
Definiční seznam - rejstřík <dl> <dt> Shareware </dt> <dd> volně šiřitelný SW prodávající se metodou "napřed zkus, potom zaplať" </dd> <dt> Freeware </dt> <dd> SW poskytovaný zcela zdarma, bez svolení autora nelze do programu dělat žádné zásahy ani úpravy </dl>
Odkazy <a href=“cíl”>ODKAZ - text</a> URL Soubor html Obrázek Jakýkoli soubor (určený ke stažení) href=“https://www.gymbos.cz” href=“index2.html” href=“obrazek.jpg” href=“soubor.zip” <a href="https:/www.gymbos.cz " target="_blank">text</a> …. nová stránka
Obrázek jako odkaz Stačí příkaz <img /> uzavřít do příkazu <a><img /></a> <a href="VOBR.JPG"><img src="mobr.jpg" alt="popis" /></a> Fotografie musí být uložena ve dvou samostatných souborech (verzích): malý náhled a velká fotografie. Je vhodné ukládat je do samostatných složek a pojmenovat je stejně: <a href="fotky/ucebna.jpg"><img src="nahledy/ucebna.jpg" alt="Učebna" /></a> Opět platí, že pokud obrázek tvoří odkaz, neměla by za příkazem <img /> být mezera ani konec řádku, protože by prohlížeč zařadil tuto mezeru do odkazu, což opticky nevypadá dobře.
Záložka <a name=priklad></a> Text příkladu (místo „doskoku“) <a href="#priklad">Kam…</a>
Obrázek <img src="strom.gif" alt="strom"> <img src= "Obrazek.jpg" alt=„text" title=„popis" border="0" height="631" width="975">
Obrázek obtékaný textem Obtékání se nastavuje jako vlastnost obrázku. Lze ho zapnout buď lokálně parametrem align, nebo stylem. <img src="ucebna1.jpg" alt="Učebna1" align="left" /> Obrázek může být umístěn vlevo nebo vpravo a obtékán následujícím textem. <img src="ucebna2.jpg" alt="Učebna2" align="right" /> Obtékání lze i předčasně ukončit, buď vlastností definovanou ve stylu, nebo příkazem: <br clear="left" /> <br clear="right" /> <br clear="all" /> (levé obtékání, pravé obtékání, obojí obtékání)
Tabulka <table > <tr> <td>Obsah buňky</td> <td>Další buňka</td> </tr> <tr> <td>levá spodní </td> <td>pravá spodní</td> </tr> </table>
Tabulka <table> začíná tabulku <tr> začíná a končí řádek tabulky <td> buňka tabulky <th> buňka tabulky v záhlaví <caption> </caption> popis tabulky - nad tabulkou (tr znamená table row, čili řádek)
Parametry tabulky <table> border tloušťka ohraničení celé tabulky v pixelech width šířka tabulky v % nebo pixelech cellspacing mezery mezi buňkami v pixelech cellpadding mezery v buňkách mezi ohraničením a obsahem (textem) v pixelech <tr> <th> <td> align vodorovné zarovnání obsahu buňky (textu) left, right, center, justify valign svislé zarovnání obsahu buňky (textu) top, middle, bottom
Slučování v tabulce colspan počet slučovaných buněk vedle sebe rowspan počet slučovaných buněk pod sebou <td colspan="2"> Dvě sloučené buňky vedle sebe </td> <td rowspan="2"> Dvě sloučené buňky pod sebou </td>
Blok - <div> <div align="right" title="Autor"> Podpis </div> podpis s titulkem (text v bublince)