Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940 Autor: Lenka Šálková Tematická oblast: Digitální zpracování dat Název DUMu: Odkazy, tabulky v HTML Kód: VY_32_INOVACE_IN.1.17 Datum: 14. 1. 2013 Cílová skupina: Žáci středních škol Klíčová slova: Webová stránka, jazyk HTML, XHTML, tagy, odkazy, URL, tabulky Anotace: Prezentace k hodině, ve které se probírá a procvičuje základní formátování odkazů a tabulek v HTML. Vhodné je prezentaci doplnit praktickými příklady řešenými v textovém editoru.
Odkazy a tabulky v HTML
Odkazy URL čili adresy URL (Uniform Resource Locator) univerzální formát adresy http://www.seznam.cz/instituce/stredni_skoly/ Server (koho kontaktovat Cesta (co po něm chtít) Schéma (přístupový protokol)
URL čili adresy Nejpoužívanější schémata: http WWW stránky ftp FTP mailto Informace dostupné prostřednictvím adresy Cesta odpovídá také cestě k souboru v systému souborů na disku
Aktivní stránky Jsou konstruovány za běhu podle požadavků klienta např. server Lupa www.lupa.cz http://www.lupa.cz/vyhledavani/?qs=&search=hledej&kde%5bv sude%5d=1 Informace sloužící pro vytvoření stránky
Úkoly Chci získat z www serveru neviditelnypes.lidovky.cz stránku, ke které vede cesta astro-nejtezsi-hvezdna-cerna-dira-dl8- /p_veda.asp?c=a071028_182519_p_veda_wag Jak bude vypadat URL?
Úkoly Projděte si několik svých oblíbených serverů. Na každém si prohlédněte několik stránek a sledujte, jejich URL. A následně server zařaďte do jedné z kategorií: používá převážně statické stránky počet statických i aktivních stránek je podobný používá převážně aktivní stránky
Odkazy na stránce <a href= http://www.seznam.cz/ > Server Seznam </a> cvičení Text odkazu měl by být výstižný, stručný, nemá obsahovat závorky, čárky, uvozovky
Relativní URL Používají se v rámci jedné kolekce stránek umístěných na stejném serveru <a href=../brno/spilberk.html > Hrad Špilberk </a>
www.svet.cz evropa staty.html CR Italie praha.html roudnice.html palermo.html australie benatky.html perth.html sydney.html <a href=../australie/perth.html > Odkaz na Perth </a>
Cvičení Vytvořte tři po sobě jdoucí stránky textu, uložte je do jednoho adresáře. Propojte je navzájem odkazy na následující a předcházející stranu
Cvičení Vytvořte malý receptář. Připravte stránky zhruba pro pět receptů. Každý napište na samostatnou www stránku. Dále vytvořte titulní stránku se seznamem dostupných receptů. Seznam bude obsahovat odkazy na jednotlivé recepty. Kromě toho na stránky jednotlivých receptů vložte odkazy další a předchozí, které umožní uživateli procházet postupně jeden recept za druhým.
Odkazy na stránce Na začátku stránky je vložen odkaz: <a href="#brno">odkaz na historii Brna </a> Označení záložky v textu: <h3 id= Brno >O historii Brna</h3>
Tabulky Dovoz Vývoz 1.čtvrtletí 2000 273 674 256 457 1.čtvrtletí 2001 345 639 318 908 <table> <tr> <th></th> <th>dovoz</th> <th> vývoz</th> </tr>.</table> Table Row Table Header
<table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <th></th> <th>dovoz</th> <th> vývoz</th> <th> 1. čtvrtletí 2000</th> <td> 273 674</td> <td> 256 457</td> <th> 2. čtvrtletí 2001</th> <td> 345 369</td> <td> 318 908</td> 1.čtvrtletí 2000 1.čtvrtletí 2001 Dovoz Table Data Vývoz 273 674 256 457 345 639 318 908
Atributy tabulky - CSS table,td,th Vlastnosti rámečku: border: solid red 2px Vlastnosti textu, zarovnávání: font-family: Arial CE, sans-serif text-align: center vertical-align A další viz. jak psát web
Velikost a sloučení buněk <table border = 1 > <tr> <th rowspan = 2 >Město</th> <th colspan = 2 >Časy</th> </tr> <tr> </tr> <tr> </tr> <th>příjezd</th> <th> Odjezd</th> <th>praha</th> <th> 13.05</th> <th> 13.15</th> Město Časy Příjezd Odjezd Praha 13.05 13.15
Literatura: PÍSEK, Slavoj. HTML: začínáme programovat. 3., aktualiz. vyd. [i.e.] 1. vyd. Praha: Grada. ISBN 978-80-247-3117-9. PROKOP, Marek. CSS pro webdesignery: [kaskádové styly pro webdesignéry]. Vyd. 1. Praha: Mobil Media, 2003, 190 s. ISBN 80-865-9335-5. CASTRO, Elizabeth, Bruce HYSLOP. HTML5 a CSS3. Vyd. 1. Praha: Computer press, 2012, 288 s. ISBN 978-802-5137-338.
Obrázky: Vlastní zdroje Zajímavé stránky: http://www.jakpsatweb.cz/ http://www.owebu.org/cze/html/text.php