1 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 atribu...
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 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
...
.
Pod nadpis
Odkazy a tabulky
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 .
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ě
Odkazy
vložte prázdný řádek, do kterého kliknutím na pátou ikonu Odstavec v záložce Standardní vložte značku .
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 ... 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 . 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í emailovou adresu včetně protokolu mailto:, na kterou má hypertextový odkaz směřovat., např. mailto: [email protected].
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 . 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 vložte odstavec (značka ), 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 , do které vepište text Tabulky.
15. Pod nadpis druhé úrovně
Tabulky
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
a končí značkou
. Každý řádek tabulky začíná značkou
a končí značkou
a každá buňka v řádku tabulky začíná značkou
nebo
a končí značkou , resp.
. 16. Klikněte pravým tlačítkem myši na začínající značku tabulky
, 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
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
a
.
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
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 (
a
) na značky
a
. Z kontextové nabídky nic nevybírejte, jen značky manuálně přepisujte. Hodnoty v nových buňkách
...
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
...
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
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
3
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
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
9
.
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.
