Základní odkazy (ZÁKLADY XHTML) RNDr. Tomáš ŘEZNÍK, Ph.D. Webová kartografie - úvod podzim 2012 Laboratoř geo inform at iky a kartografie, Masarykova univerzita sc • Zadání cvičení č. 1 Ve studijních materiálech ISu • Tvorba Webu (XHTML) http://www.tvorba-webu.cz/xhtml/ • Jak psát Web http://www.iakpsatweb.cz Laboratoř geoinformatiky a kartografie, Masarykova univerzita 0 LGC • extended Hyper Text Markup Language • Značkovací jazyk • Soubory s koncovkou *.htm nebo *.html • Vychází z obecného standardu XML • Paralela k HTML • Popisuje význam obsahu Laboratoř geo inform atiky a kartografie, Masarykovi XHTML - základni principy Utváří dokument pomocí značek normálni text zvýrazněný text Tento zápis se nazývá zdrojový kód Vytváří se v textovém editoru nebo editoru webových stránek (např. Notepad++, PSpad) Následně se ukládá s koncovkou *.htm, *.html Může se pak otevřít ve webovém prohlížeči (IE, Mozilla, Firefox, Opera, Safari, aj.) Laboratoř geoinfor matiky a kartografie, Masarykovi PRINCIP Logické vs. vizuální značkování Vizuální značkování - určení, jak má výsledný dokument vypadat Logické značkování - snaha postihnout jeho obsah Laboratoř geo inform atiky a kartografie, Masarykovi PRÍKLADY V XHTML 1.0 Strict Logické značky ... ... < ti tle >...
...
< span> ... ...

...

Laboratoř geoinfor matiky a kartografie, Masarykovi 1 POZNÁMKA U MS Internet Explorern, ale i Firefoxu se při ukládání přes Soubor > Uložit (stránku) jako mění zdrojový kód na nevalidní Uložení originálního kóduje možné pomocí přímého kopírování zdrojového kódu nebo na stránce předchozí pomocí odkazu a volby Uložit cíl /odkaz jako Třetí možností je uložit si ZIP archiv Laboratoř geo inform atiky a kartografie, Masarykovi NEJCASTEJSI CHYBY XML SYNTAXE • Neukončení tágu toto je obsah elementu para
A toto taky toto je obsah elementu para
A toto taky • Křížení elementů ukázka křížení elementů • Odlišný zápis určitých znak < < > > & & "" w " ' Tom&Jerry se proto musí zapsat jako

Tom& Jerry

Laboratoř geoinf or matiky a kartografie, Masarykovi Prázdný XHTML soubor a kořenový element dokumentu . Pokud nevíte co činíte, deklaraci neměňte :) V atributech kořenového elementu xml:lang a lang je specifikován jazyk dokumentu (angličtina=en, čeština=cs, slovenština=sk) Laboratoř geo inform atiky a kartografie, Masarykovi Deklarace dokumentu • Nachází se ještě před tágem html • Rozlišujeme tyto 4 deklarace: XHTML 1.0 Striel ■dDOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 S1rict//EN" "http://www.w3.org/TR/xh1ml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional ■dDOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h11p://www.w3.org/TR/xh1ml1/DTD/xhtml1-transition al.dtd"> XHTML 1.0 Frameset ■dDOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "h11p://www.w3.org/TR/xh1ml1/DTD/xh1ml1-tramese1.d1d"> XHTML 1.1 ■dDOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.1//EN" "h11p://www.w3.org/TR/xhtml11/DTD/xh1ml11 .dtd"> Laboratoř geoinformatiky a kartografie, Masarykova univerzKa 0 LGC Prázdný XHTML soubor Laboratoř geoinformatiky a kartografie, Masarykovi Metaúdaje a kódování * Uchovávány v tágu * Jediné, pro co se reálně využívají jsou nastavení jazyka a kódování * Metaúdaje mohou vypadat i následovně: * Lze nastavovat klíčová slova (informace pro vyhledávače), automatickou aktualizaci stránky např. po 10 vteřinách, atd. Laboratoř geoinformatiky a kartografie, Masarykovi Metaúdaje a kódování Prázdný XHTML soubor ■ Kódování definuje použitou znakovou sadu ■ Špatná definice zničí typické české znaky (ěščřžýáíéúů) PrNJs zlutoucky kun upel dabelske kody. PRILIS ZLUTOUCKY KUN UPEL DABELSKE KODY. ISO-8859-2 (ISO Latin-2) Přília, l'lu»oučkýkůň úpěl ďábelské kódy. PŘÍLI© ®LU«OUČKÝ KŮŇ ÚPĚL ĎÁBELSKÉ KÓDY. CP1250 (Windows-1250, WinCS, WinEE] Příliš žluťoučký kůň úpěl ďábelské kódy. PŘÍLIŠ ŽLUŤOUČKÝ KŮŇ ÚPĚL ĎÁBELSKÉ KÓDY. Macintosh Central European (MacCE) Pj'|já ěluéouOU->Kí KTÓ éPL Ň p BELSK KŕDY. Brat©i Kamenijt" (KEYBCS2, CP859] P©T'lužoufk k-ntpl belsk, k"dy. PŽ

  • 'LUtOU€KťK|A —P%oL ...ŽBELSK K-DY. ISO-8859-1 (ISO Latin-1) Příliš zlutoucky kun úpel d®belské kódy. PRÍLIS ŽLUŤOUČKÝ KU+ ÚPEL DOBELSKÉ KÓDY. KOI-8äS2 (KOI8CS) PŇÉliÓ ÚluÓouÁkŮ kEJ ÓpLl ÁÁbelskx kĎdy. PňéLIó úLUôOUäKú Kej oPL aáBELSK-i- KdDY . —> Název stránky Laboratoř geoinf or matiky a kartografie, Masarykovi Kaskádové styly CSS styly používané ke stylu webové stránky (barva, písmo, velikost písma) Pomocí jednoho souboru ovládáte celý vlastní Web Dříve řešeno pomocí tágu , který se ve zdrojovém kódu vyskytoval velmi často a zpomaloval načítání stránek Laboratoř geo inform atiky a kartografie, Masarykovi Kaskádové styly - výhody Máte k dispozici nové možnosti formátování (rámečky, okraje, barvy, pozadí) CSS styly jednoduše deklaruje styl pro celý web a jednoduše mění jeho vzhled Šetříte místo a práci, jeden soubor se styly použijete pro celý web Můžete nastavit jak se mají chovat tágy (tag může podtrhávat text) Tomu, kdo umí dělat s JavaScriptem se otevírají nové možnosti Laboratoř geoinf or matiky a kartografie, Masarykovi Prázdný XHTML soubor . Laboratoř geo inform atiky a kartografie, Masarykovi Prázdný XHTML soubor Nazev stranky Laboratoř geoinf or matiky a kartografie, Masarykovi Textové elementy • Zde píšete veškeré informace ohledně obsahu stránky • Obsahuje velké množství jiných tagů • Ty jsou uspořádány do různých úrovní, dědičností a hierarchií Laboratoř geo inform atiky a kartografie, Masarykova univerzita ■ nadpisy - Měl by shrnovat obsah části stránky - Mohou být rozděleny do několika úrovní (h1 až h6; přičemž h1 je nejvyšší úroveň - ve všech prohlížečích je navíc zobrazen tučně) ■

    odstavce

    - Každý odstavec musí být uveden separátně - Zobrazeno jako bloky textu ■
    zalomení řádku - Nelze použít stisk klávesy Enter - Není párovým tágem Laboratoř geoinformatiky a kartografie, Masarykova univerzita Kontejnery Kontejnery nemají žádný strukturní význam, umožňují pouze uzavřít část dokumentu a na něj následně aplikovat styly
    - Může mít jakýkoli obsah - Může obsahovat pouze text a řádkové elementy Laboratoř geo inform atiky a kartografie, Masarykovi Odkazy URL - Universal Resource Locator • = adresa souboru složená z několika částí • Např. http://www.inmapy.cz/mapa_evropy/mapa_evropy.htm • http je protokol, pomocí něhož se soubor přenáší (fíp,...) • wwwmůže a nemusí být zadáváno-nastavení serveru • inmapy = název domény ("seznam, muni, google,...) • geogr.muni.cz = doména nižšího řádu • /mapa_evropy/= adresářová struktura • mapa_evropy.htm = konkrétní soubor • může být i automaticky (index.htm, default.htm) Laboratoř geoinfor matiky a kartografie, Masarykovi Vytvoření odkazu a záložky ■ Masaryčka - Element a z angl. anchor = kotva - Má jeden atribut href, tj. URL odkazovaného souboru zde - použití atributu title - popisuje, kam odkaz odkazuje Na záložku - otevře se stránka, kde první řádek bude ten, který jste označili záložkou id=„zalozka" Laboratoř geo inform atiky a kartografie, Masarykova univerzita • Mohou web velmi příjemně oživit • „Kamenem úrazu" je jejich velikost, která mnohdy převyšuje velikost samotného textu • Na Webu se používají 3 typy obrázků: - Formát JPEG, JPG f.jpeg, *.jpg) • Ztrátová komprese, vhodné pro fotografie, ztráta kvality ukládáním - Formát GIF f.gif) • Loga, tlačítka a málo barevné a malé věci (256 barev), animace - Formát PNG (*.png) ■ Mapy- kvalitní výsledky při malé velikosti: PNG8 - PNG24 Laboratoř geoinformatiky a kartografie, Masarykova iiniverzria 4 Vytvoření odkazu a záložky I - Element img - Má atribut src, tj. URL odkazovaného souboru - Nejčastěji zadáván v relativní formě - použití atributu height - výška (případně i wiďh - šířka) - výška obrázku tohle je můj obrázek:) - povinný atribut alt- alternativní text - když se obrázek nenačte, zobrazí se tento text - zobrazí se při přechodu myši Laboratoř geoinformatiky a kartografie, Masarykovi Seznamy Automaticky odsazují každý řádek nebo přidávají číslo, písmeno či odrážku Pomocí CSS lze nastavit, aby odrážkou byl obrázek (vlastní prakticky nelimitovaná tvorba vzhledu odrážek) Laboratoř geoinformatiky a kartografie, Masarykovi Seznamy
      odrážky
    - čtverečky a kolečka (plné, prázdné) použité jako odrážky
    • čtvereček jako odxážka
    • kolečko jako odxážka
    • plné kolečko jako odxážka
      číslovaný, písmenkovaný seznam
    1. l">Blansko
      2. a">Boskovice A">Letovice i">Kunštát I">Olešnice Laboratoř geoinformatiky a kartografie, Masarykovi Seznamy • Velmi častá kombinace seznamu, který je zároveň hypertextovým odkazem
        Analogové inapy Digitálni mapy
      Laboratoř geoinformatiky a kartografie, Masarykovi Komentáře Komentáře jsou od toho, aby si programátor mohl do zdrojového kódu psát poznámky, které mu usnadní orientaci a v prohlížeči nebudou vidět Když chcete, mohou být komentáře viditelné (a to třeba jenom ve vámi vybraných prohlížečích)