Základy HTML – vkládání objektů Číslo DUM: VY_32_INOVACE_04_12 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie Tematický celek: webové stránky Název projektu: Zvyšování kvality výuky na CMG 2012 - 2014 Číslo projektu: CZ.1.07/1.5.00/34.0612 Základy HTML – vkládání objektů
Základy HTML – vkládání objektů
Vložení obrázku <img> - obrázek (angl. image), nepárový tag; do stránky se vloží obrázek načtený z jiného souboru; artibuty: src - umístění souboru s obrázkem; v souboru je umístěna pouze cesta k obrázku. Po přemístění „html souboru“ na jiný počítač, na server v internetu apod., cesta se změní a obrázek se nezobrazí. Řešením je umístění obrázku do stejné složky s „html souborem“ a do src napsat jen název obrázku. Název by měl být bez diakritiky a jedno slovo - <img src="fotbal.jpg">
Vložení obrázku alt - alternativní text, zobrazuje se ve stránce tam, kde se nenačte obrázek width, height – šířka a výška obrázku, udává se v pixelech nebo v %, zadáme-li pouze jeden rozměr, je druhý dopočítán a obrázek se nedeformuje border – tloušťka rámečku (border=“0“- bez rámečku) vspace, hspace - vertikální a horizontální odsazení od okolních objektů align – zarovnání obrázku s okolím, obtékání obrázku (right, left), vertikální umístění obrázku na řádku (top, middle, bottom, baseline atd.)
Odkazy - Hypertext <a> </a> - vše co je mezi těmito značkami je odkaz, může to být text, obrázek apod. artibuty: href – zapíše se jako URL (Unique Resource Locator) stránky, na kterou je odkaz přesměrován; odkaz může otevírat i dokument name – jméno záložky, v dokumentu se vytvoří záložka <a name= “zacatek“></a>, na jiném místě se vytvoří odkaz <a href = “#zacatek“>Příklad</a>, který převede uživatele tam, kde je záložka target – určuje okno, ve kterém se zobrazí obsah Příklad
Seznamy Seznamy představují v HTML to, co jsou ve Wordu odrážky, číslování a předsazení nečíslovaný seznam Př. V IT probíráme <ul type="square"> <li>psaní textu</li> <li>internet</li> <li>grafiku</li> </ul>
Seznamy číslovaný seznam Př. Moje nejoblíbenější předměty jsou: <ol> <li>Informatika</li> <li>Matematika</li> <li>Tělocvik</li> </ol>
Seznamy seznam definic Př. <dl> <dt>Elipsa</dt> <dd> je uzavřená křivka v rovině. Všechny body elipsy mají stejný součet vzdáleností …</dd> <dt>Kružnice<dt> <dd>je množina všech bodů v rovině, které leží ve stejné vzdálenosti, označované jako poloměr</dd> </dl>
Tabulky <table> </table> - uzavírá celou strukturu tabulky atributy tabulky: align - obtékání tabulky ostatním textem – right, left, center cellpadding – vnitřní okraj buněk – v pixelech cellspacing - vnější okraj buněk – v pixelech border – šířka rámečku buněk – v pixelech width, height - šířka a výška tabulky – v pixelech nebo v % background – obrázek na pozadí bgcolor – barva pozadí
Tabulky <tr> </tr> - začátek a konec řádku tabulky, musí být uvnitř elementu <table> a smí obsahovat pouze buňky (<td> a <th>) <td> </td> - buňka tabulky, musí být umístěna v řádku <tr> atributy buňky: align, valign – horizontální a vertikální zarovnání obsahu width, height - šířka a výška buňky bgcolor, background – barva pozadí a obrázek na pozadí rowspan – sloučení buněk - zabírá více řádků colspan - sloučení buněk – zabírá více sloupců
Tabulky <th> </th> - hlavičková buňka, má stejné vlastnosti jako <th>, ale text je tučný a umístěný na střed <caption> </caption> - nadpis tabulky, umístěno mezi <table >a prvním řádkem tabulky Prázdná buňka – nevykreslí se rámeček, proto do ní píšeme tzv. nedělitelnou mezeru Příklad
Použité zdroje http://www.jakpsatweb.cz/html/obrazky.html http://www.jakpsatweb.cz/html/tabulky.html http://www.jakpsatweb.cz/html/seznamy.html