Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a tabulek. Struktura dokumentu (webové stránky) 1. Spusťte editor BlueFish. 2. V záložce Standardní klikněte na první ikonu Rychlý start... 3. V dialogovém okně Rychlý start: a. vyberte DTD: XHTML 1.0 Transitional b. vyplňte Titulek: např. Ukázka odkazů a tabulek c. odstraňte všechny metaznačky kromě těch, které definují použitou znakovou sadu dokumentu (webové stránky) UTF-8 metaznačky se odstraňují označením příslušné metaznačky a kliknutím na tlačítko Odstranit (Remove) poté klikněte na tlačítko OK KIT PEF CZU v Praze Stránka 1
4. Soubor se základní strukturou webové stránky uložte na Plochu pod názvem prvni-dokument.html např. kliknutím na ikonu diskety v panelu nástrojů nebo v menu Soubor Uložit. 5. Dvojím poklepáním myší na prvni-dokument.html na Ploše zobrazíte dokument ve webovém prohlížeči. Titulek WWW stránky se zobrazí v záložce prohlížeče nebo v modrém záhlaví okna aplikace webového prohlížeče. Odkazy 6. V editoru BlueFish napište pod začínající párovou značku <body> text Odkazy a tabulky. KIT PEF CZU v Praze Stránka 2
Tento vepsaný text označte tažením myši a kliknutím na desátou ikonu Vložit značku H1 v záložce Písma vložte párovou značku <h1>... </h1>. Pod nadpis <h1>odkazy a tabulky</h1> vložte prázdný řádek, do kterého kliknutím na jedenáctou ikonu Vložit značku H2 v záložce Písma vložte párovou značku <h2></h2>. Do této značky vepište text Odkazy. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. KIT PEF CZU v Praze Stránka 3
Externí odkaz 7. V editoru BlueFish pod nadpis druhé úrovně <h2>odkazy</h2> vložte prázdný řádek, do kterého kliknutím na pátou ikonu Odstavec v záložce Standardní vložte značku <p></p>. Do této značky vepište text Externí odkaz. Část textu, která má být odkazem, tažením myši označte (např. slovo odkaz) a klikněte na devátou ikonu Kotva / hypertextový odkaz... v záložce Standardní. V dialogovém okně vyplňte atribut Odkaz korektní adresou (url), na kterou má hypertextový odkaz směřovat., např. http://www.pef.czu.cz. Adresa musí obsahovat protokol http. KIT PEF CZU v Praze Stránka 4
Po vyplnění atributu klikněte na tlačítko OK. Tím vložíte párovou značku <a>... </a> s atributem href, který obsahuje cílovou adresu. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. Po kliknutí na odkaz ve webovém prohlížeči budete přesměrování na cíl odkazu. Pro zobrazení vytvářeného dokumentu (prvni-dokument.html) klikněte na možnost Zpět v nabídce webového prohlížeče. KIT PEF CZU v Praze Stránka 5
Odkaz na email 8. V editoru BlueFish vložte pod odstavec s externím odkazem prázdný řádek, do kterého kliknutím na pátou ikonu Odstavec v záložce Standardní znovu vložte značku <p></p>. Do tohoto odstavce vepište text Odkaz na email. Tažením myši označte část textu, která má být odkazem, např. slovo email a klikněte na devátou ikonu Kotva / hypertextový odkaz... v záložce Standardní. V dialogovém okně vyplňte atribut Odkaz korektní e- mailovou adresu včetně protokolu mailto:, na kterou má hypertextový odkaz směřovat., např. mailto: s_kit@pef.czu.cz. KIT PEF CZU v Praze Stránka 6
Po vyplnění atributu klikněte na tlačítko OK. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. Po kliknutí na odkaz ve webovém prohlížeči by se měl spustit emailový klient, který je na lokálním počítači nainstalován. Uživatel tak může pohodlně psát emailovou zprávu, aniž by musel vyplňovat adresu příjemce. KIT PEF CZU v Praze Stránka 7
Odkaz v rámci webové prezentace 9. V editoru BlueFish kliknutím na první ikonu Rychlý start... založte nový dokument. 10. V dialogovém okně Rychlý start: a. vyberte DTD: XHTML 1.0 Transitional b. vyplňte Titulek: např. Druhý dokument c. odstraňte všechny metaznačky kromě těch, které definují použitou znakovou sadu dokumentu (webové stránky) UTF-8 metaznačky se odstraňují označením příslušné metaznačky a kliknutím na tlačítko Odstranit (Remove) poté klikněte na tlačítko OK 11. Soubor se základní strukturou webové stránky uložte na Plochu pod názvem druhy-dokument.html např. kliknutím na ikonu diskety v panelu nástrojů nebo v menu Soubor Uložit. V dolní části okna editoru BlueFish jsou zobrazeny záložky s rozpracovanými dokumenty. 12. Kliknutím na záložky prvni-dokument.html zobrazíte rozpracovaný zdrojový kód právě prvního dokumentu. Pod druhý odstavec (odkaz na email) vložte prázdný řádek, do kterého kliknutím na pátou ikonu Odstavec v záložce Standardní znovu vložte značku <p></p>. Do tohoto odstavce vepište text Odkaz v rámci webové prezentace. Tažením myši označte část textu, která má být odkazem, např. slova webové prezentace a klikněte na devátou ikonu Kotva / hypertextový odkaz... v záložce Standardní. V dialogovém okně vyplňte atribut Odkaz názvem druhého souboru, tedy druhy-dokument.html. Žádný protokol neuvádějte. KIT PEF CZU v Praze Stránka 8
Po vyplnění atributu klikněte na tlačítko OK. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. Po kliknutí na odkaz ve webovém prohlížeči by měla být zobrazena právě druhá webová stránka. KIT PEF CZU v Praze Stránka 9
13. V editoru BlueFish se přepněte kliknutím na záložku druhydokument.html na druhý soubor. Pod začínající značku <body> vložte odstavec (značka <p></p>), do kterého vepište text Odkaz na první webovou stránku. Označte část textu a analogicky vytvořte odkaz na první dokument. Výsledný soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. Kliknutím na odkaz se dostanete zpět na první webovou stránku. Tabulky 14. V editoru BlueFish si zobrazte první dokument (prvni-dokument.html) a pod poslední odstavce vložte prázdný řádek. Do tohoto prázdného řádku kliknutím na jedenáctou ikonu Vložit značku H2 v záložce Písma vložte párovou značku <h2></h2>, do které vepište text Tabulky. 15. Pod nadpis druhé úrovně <h2>tabulky</h2> vložte prázdný řádek a postavte se na něj kurzorem. V záložce Tabulky klikněte na první ikonu Průvodce tabulkou... V dialogovém okně Průvodce tabulkou vyplňte Počet řádků 3, Počet sloupců také 3 a zaškrtněte Odsadit ve zdrojovém kódu. KIT PEF CZU v Praze Stránka 10
Kliknutím na tlačítko OK vložíte zdrojový kód tabulky. Tabulka začíná značkou <table> a končí značkou </table>. Každý řádek tabulky začíná značkou <tr> a končí značkou </tr> a každá buňka v řádku tabulky začíná značkou <td> nebo <th> a končí značkou </td>, resp. </th>. 16. Klikněte pravým tlačítkem myši na začínající značku tabulky <table>, vyberte Upravit značku a zaškrtněte volbu Okraj. KIT PEF CZU v Praze Stránka 11
Kliknutím na tlačítko OK vložíte ke značce <table> atribut border s hodnotou border. Do každé buňky tabulky vepište číselné hodnoty, tedy do první buňky prvního řádku číslo 1, do druhé buňky číslo 2, do třetí buňky číslo 3, do první buňky druhého řádku číslo 4, atd. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. 17. Pokud potřebujeme například jeden řádek do tabulky přidat, stačí nějaký stávající řádek označit, zkopírovat do schránky a na příslušné místo tabulky vložit. V editoru BlueFish tedy: a. Označte tedy první řádek tabulky včetně značek <tr> a </tr>. KIT PEF CZU v Praze Stránka 12
b. Označenou část kódu zkopírujte do schránky (ctrl + c). c. Pod značku <table border= border > vložte prázdný řádek. d. Do toho prázdného řádku vložte část kódu ze schránky (ctrl + v). e. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. KIT PEF CZU v Praze Stránka 13
18. Pokud potřebujeme do tabulky přidat jeden sloupec, nakopírujeme jednu buňku do každého řádku. V editoru BlueFish tedy: a. Označte poslední buňku prvního řádku. b. Označenou část kódu zkopírujte do schránky (ctrl + c). c. Pod každou poslední buňkou tabulky vložte prázdný řádek. KIT PEF CZU v Praze Stránka 14
d. Do těchto prázdných řádků vložte část kódu ze schránky (ctrl + v). KIT PEF CZU v Praze Stránka 15
e. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. 19. V editoru BlueFish přepište v prvním řádku všechny začínající a ukončovací značky buněk (<td> a </td>) na značky <th> a </th>. Z kontextové nabídky nic nevybírejte, jen značky manuálně přepisujte. Hodnoty v nových buňkách <th>... </th> následně změňte z číslic na písmena, v první buňce bude A, ve druhé B, ve třetí C a ve čtvrté D. KIT PEF CZU v Praze Stránka 16
Takto pozměněné značky budou webovým prohlížeči brány jako hlavička tabulky (hodnota buněk <th>... </th> vliv na sémantiku nemá! Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. Slučování buněk 20. Pokud potřebujeme sloučit dvě či více buněk v rámci jednoho řádku, slučujeme vlastně sloupce v daném řádku a použijeme atribut colspan s hodnotou odpovídající počtu slučovaných buněk. Vždy je potřeba si uvědomit, kde začíná slučování a co je slučováno (zda řádky nebo sloupce). Pokud např. potřebujeme sloučit druhou a třetí buňku druhého řádku tabulky, v editoru BlueFish proveďte: a. Klikněte na druhou začínající značku <td> druhého řádku tabulky pravým tlačítkem myši (buňka má hodnotu 2), z kontextové nabídky vyberte Upravit značku a v dialogovém okně nastavte Sloučené se na hodnotu 2 (jsou slučovány dva sloupce). Poté klikněte na tlačítko OK. KIT PEF CZU v Praze Stránka 17
b. Následující buňku tabulky <td>3</td> celou smažte. Buňka je již popsána v atributu colspan druhé buňky. c. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. 21. Pokud potřebujeme sloučit dvě či více buněk v rámci jednoho sloupce, slučujeme vlastně řádky pod jedním sloupcem a použijeme atribut rawspan s hodnotou odpovídající počtu slučovaných buněk. Vždy je potřeba si uvědomit, kde začíná slučování a co je slučováno (zda řádky KIT PEF CZU v Praze Stránka 18
nebo sloupce). Pokud např. potřebujeme sloučit třetí buňky ve třetím a čtvrtém řádku, v editoru BlueFish proveďte: a. Klikněte na třetí začínající značku <td> třetího řádku tabulky pravým tlačítkem myši (buňka má hodnotu 6), z kontextové nabídky vyberte Upravit značku a v dialogovém okně nastavte Sloučené řádky na hodnotu 2 (jsou slučovány dva řádky). Poté klikněte n tlačítko OK. b. Následující slučovanou buňku smažte. Jedná se však o třetí buňku ve čtvrtém řádku (jsou slučovány řádky), tedy o značku <td>9</td>. KIT PEF CZU v Praze Stránka 19
c. Soubor uložte a aktualizujte zobrazení ve webovém prohlížeči. Validita prvního dokumentu dokumentu (webové stránky) 22. Ve webovém prohlížeči zobrazte webovou stránku aplikace validátoru kódu konsorcia World Wide Web, která je dostupná na adrese http://validator.w3.org. Vyberte záložku Validate by File Upload, vyberte prvni-dokument.html a klikněte na tlačítko Check Během velmi krátké doby zjistíte, zda vytvořená webová stránka má validní zdrojový kód podle specifikace konsorcia World Wide Web. Pokud KIT PEF CZU v Praze Stránka 20
vidíte zelený pruh s oznámením, že dokument byl úspěšně zkontrolován (validován), je vše v pořádku. V opačném případě je nutné z výsledku validace vyčíst, na kterém řádku kódu jaká chyba je a opravit ji. KIT PEF CZU v Praze Stránka 21