Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Transkript

1 Š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/ 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: 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.

2 Odkazy a tabulky v HTML

3 Odkazy URL čili adresy URL (Uniform Resource Locator) univerzální formát adresy Server (koho kontaktovat Cesta (co po něm chtít) Schéma (přístupový protokol)

4 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

5 Aktivní stránky Jsou konstruovány za běhu podle požadavků klienta např. server Lupa sude%5d=1 Informace sloužící pro vytvoření stránky

6 Ú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?

7 Ú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

8 Odkazy na stránce <a href= > Server Seznam </a> cvičení Text odkazu měl by být výstižný, stručný, nemá obsahovat závorky, čárky, uvozovky

9 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>

10 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>

11 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

12 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.

13 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>

14 Tabulky Dovoz Vývoz 1.čtvrtletí čtvrtletí <table> <tr> <th></th> <th>dovoz</th> <th> vývoz</th> </tr>.</table> Table Row Table Header

15 <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <th></th> <th>dovoz</th> <th> vývoz</th> <th> 1. čtvrtletí 2000</th> <td> </td> <td> </td> <th> 2. čtvrtletí 2001</th> <td> </td> <td> </td> 1.čtvrtletí čtvrtletí 2001 Dovoz Table Data Vývoz

16 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

17 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

18 Literatura: PÍSEK, Slavoj. HTML: začínáme programovat. 3., aktualiz. vyd. [i.e.] 1. vyd. Praha: Grada. ISBN PROKOP, Marek. CSS pro webdesignery: [kaskádové styly pro webdesignéry]. Vyd. 1. Praha: Mobil Media, 2003, 190 s. ISBN CASTRO, Elizabeth, Bruce HYSLOP. HTML5 a CSS3. Vyd. 1. Praha: Computer press, 2012, 288 s. ISBN

19 Obrázky: Vlastní zdroje Zajímavé stránky: