(ZÁKLADY XHTML) RNDr. Tomáš REZNÍK, Ph.D. GeoinformačnI technologie 2 - webová kartografie, podzim 2008 Laboratoř geoinformatiky a kartografie, Masarykova ui Základní odkazy:) ■ • 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.jakpsatweb.cz Laboratoř geoinformatiky a kartografie, Masarykova univerzita XHTML VBSĚBaĚĚĚĚĚBBm extended Hyper Text Markup Language Značkovací jazyk Soubory s koncovkou *.htm nebo *.html Vychází z obecného standardu XML Nahrazuje HTML Popisuje význam obsahu Laboratoř geoinformatiky a kartografie, Masarykova ui XHTML - základní principy Utváří dokument pomocí značek normální 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ř geoinformatiky a kartografie, Masarykova unľ PRINCIP ^ssmňfísmňňĚk 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ř geoinformatiky a kartografie, Masarykova ui PRÍKLADY V XHTML 1.0 Strict Logické značky ... ...< /body> ...
...
...< / span> ...

...

Laboratoř geoinformatiky a kartografie, Masarykova ui POZNÁMKA Prázdný XHTML soubor • 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ódu je 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ř geoinformatiky a kartografie, Masarykova univerzita Název stránky Laboratoř geoinformatiky a kartografie, Masarykova ui Kaskádové styly 1 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ř geoinformatiky a kartografie, Masarykova uriľ Kaskádové styly - výhody Prázdný XHTML soubor 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ř geoinformatiky a kartografie, Masarykova ui . Laboratoř geoinformatiky a kartografie, Masarykova unr Prázdný XHTML soubor Název stránky Laboratoř geoinformatiky a kartografie, Masarykova ui Tag 1 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ř geoinformatiky a kartografie, Masarykova uni1 3 Textové elementy • nadpisy - Měl by shrnovat obsah části stránky - Mohou být rozděleny do několika úrovní (hi 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 1 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ř geoinformatiky a kartografie, Masarykova unľ 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áší (ftp,...) • www můž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ř geoinformatiky a kartografie, Masarykova univerzita /^=^ 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=„záložka" Laboratoř geoinformatiky a kartografie, Masarykova unľ • 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 (*.jpeg, * jpg) • Ztrátová komprese, vhodné pro fotografie, ztráta kvality ukládáním - Formát GIF (*.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 univerzita ^~z Vytvoření odkazu a záložky - 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řipadne i width = šíř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, Masarykova univerzita 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, Masarykova ui <ul>odrážky </ul> - čtverečky a kolečka (plné, prázdné) použité jako odrážky <ul> <li type=čtvereček jako odrážka
  • kolečko jako odrážka
  • plné kolečko jako odrážka
      • člslovaný, písmenkovaný seznam
    1. Blansko
    2. Boskovice
    3. Letovice
    4. Kunštát
    5. 01ešnice
    Laboratoř geoinformatiky a kartografie, Masarykova unľ ■ Seznamy • Velmi častá kombinace seznamu, který je zároveň hypertextovým odkazem
      Analogové mapy Digitálni mapy
    0 Laboratoř geoinformatiky a kartografie, Masarykova univerzita 2^ Komentáře BBHUBi i 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) Laboratoř geoinformatiky a kartografie, Masarykova unr Validace XHTML dokumentů ^^J !^J Napíšete zdrojový kód webové stránky Takřka vždy ale uděláte nějakou chybu:) Tu zjistíte (a uvidíte, jak opravit) na W3C validátoru Na XHTML validní stránky si můžete přidat obrázky (viz. nahoře) Laboratoř geoinformatiky a kartografie, Masarykova ui Validace XHTML dokumentů EEH EE5J Adresa W3C validátoru je: http://validator.w3.org/ Použití je zdarma, ale jestli chcete, můžete se stát sponzory:) I W5^l Laboratoř geoinformatiky a kartografie, Masarykova unr «:■—-■ i:#.i^:#.liTa\Ti: (CSS) Kaskádové styly 1 /* Selektor vybírající všechny elementy (ten je právě jeden).*/ body { /* Řez písma (font) */ font-family: serif; Laboratoř geoinformatiky a kartografie, Masarykova uriľ Typické sady písem Kaskádové styly Arial/Helvetica (základní bezpatkové písmo): font-family: sans-serif Comic Sans MS (veselé, zaoblené znaky): font-family: "Comic Sans MS", "Sand CE", fantasy Courier New/Courier (neproporciální písmo, typ "psací stroj"): font-family: monospace Georgia (elegantnější patkové písmo): font-family: Georgia, "New York CE", utopia, seri Impact (velmi tučné, úzké titulkové písmo): font-family: Impact, "Techno CE", sans-serif Lucida Console (neproporciální bezpatkové písmo): font-family: "Lucida Console", "Monaco Tahoma (alternativní bezpatkové písmo): font-family: Tahoma, "Lucida Grande CE", 1" Times New Roman/Times (základní patkové písmo): font-family: serif Trebuchet MS (sofistikovanější bezpatkové písmo): font-family: "Trebuchet MS", "Geneva CE", . Verdana (širší, o půl stupně větší bezpatkové písmo): font-family: Verdana, "Geneva CE", lucida, Laboratoř geoinformatiky a kartografie, Masarykova ui CE", 1 /* Selektor vybírající všechny elementy (ten je právě jeden).*/ body { /* Řez písma (font) */ font-family: serif; /* Velikost písma udávaná v různých jednotkách (px, %, em atd). 0 jednotkách obecně viz. http://www.jakpsatweb.cz/ess/font-size.html a http://www.jakpsatweb.cz/css/css-jednotky.html */ font-size:100%; Laboratoř geoinformatiky a kartografie, Masarykova unr Pokud není deklarována, vykresluje se velikost 16px -výchozí velikost odpovídající Internet Exploreru Možnost zadání celé řady jednotek Jednotka Význam Příklad Zvětšovací v Exploreru px pixel 12px ne pt typografický bod 9pt ne mm milimetr 5mm ne in palec .5in ne em výška písmene M 1.5em ano, poskakuje % procento 80% ano Zvětšování v IE lze nastavit Zobrazit > Velikost písma (5 stupňů) nebo také CTRL + kolečko myši Laboratoř geoinformatiky a kartografie, Masarykova ui Kaskádové styly 1 /* Selektor vybírající všechny elementy (ten je právě jeden).*/ body { /* Řez písma (font) */ font-family: serif; /* Velikost písma udávaná v různých jednotkách (px, %, em, atd.). 0 jednotkách obecně viz. http://www.jakpsatweb.cz/ess/font-size.html a http://www.jakpsatweb.cz/css/css-jednotky.html */ font-size:100%; /* Barva písma. Zadává se buď jako angl. název barvy (black, white), nebo jako #RGB, kde každá složka barvy je zapsána hexadecimálně. */ color:#000; /* Barva pozadí elementu. */ background:#fff; 0 Laboratoř geoinformatiky a kartografie, Masarykova univerzita í^ 6 Bezpečné barvy na Webu • Neznáme barevnou konfiguraci koncového uživatele + nastavení • OS mají standardně min. 32-bit (4 miliardy barev) • 99,9% uživatelů má více než 256 barev • Jenom 216 z nich je bezpečných na Webu (průnik MACu a Windows) • Standardně se používá více, v naději, že je uživatel zobrazí Kaskádové styly ■ /* Vnějši okraje elementu. */ margin:0; /* Vnitřní okraje elementu. */ padding:5px; /* Selektor vybirajici všechny elementy p (odstavce). */ p t margin: 0; /* Odsazeni prvního řádku odstavce (lem = šiřka 1 písmene M) . */ text-indent: lem; /* Zarovnáni odstavce (justify=do bloku). Dalši možné hodnoty: left, right, center. */ text-align:justify; Laboratoř geoinformatiky a kartografie, Masarykova unľ Kaskádové styly /* Selektor vybirajici všechny elementy hl a h2 (nadpisy 1. a 2. úrovně). */ hl, h2 { /* Řez pisma (font). */ font-family: sans-serif; /* Velikost pisma. */ font-size:115%; /* Selektor vybirajici všechny elementy hl (nadpisy 1. úrovně). Všimněte si, že element hl je vybrán už podruhé -- to ničemu nevadl, naopak je to jeden ze základních principů CSS */ hl /* Styl pisma (italic = kurzíva). */ font-style: italic; Laboratoř geoinformatiky a kartografie, Masarykova ui Kaskádové styly 1 /* Selektor vybirajici všechny elementy h2 (nadpisy 2. úrovně). */ h2 { /* Šiřka pisma (bold = tučné). */ font-weight: bold; /* Spodni vnějši okraj elementu, margin-bottom: 0; */ /* Selektor vybirajici všechny elementy ol a li (číslovaný seznam a položka seznamu). */ ol, li { /* Horni vnějši okraj elementu. */ margin-top: 0; /* Spodni vnějši okraj elementu. */ margin-bottom: 0; Laboratoř geoinformatiky a kartografie, Masarykova unľ /* Selektor vybirajici všechny elementy em, zvýrazněni. */ /* Sirka pisma (tučně). */ font-weight: bold; /* Styl pisma (normálni). Dalši možnou hodnotou je italic. */ font-style: normal; /* Selektor vybirajici všechny elementy se třidou "kapitola". */ .kapitola { /* Barva pozadi. */ background: #ffd; Laboratoř geoinformatiky a kartografie, Masarykova ui Kaskádové styly /* Selektor vybirajici všechny elementy a (odkazy). */ a { color: #00f; /* Selektor vybirajici všechny elementy a s pseudotřidou visited. Česky to znamená:) takové odkazy, které již uživatel navštívil. */ a:visited { color: #00f; 1 Laboratoř geoinformatiky a kartografie, Masarykova unľ Kaskádové styly /* Selektor vybirajici všechny elementy a s pseudotřidou hover. Česky to znamená takové odkazy, nad nimiž se nachází kurzor myši. */ a:hover { color: #000; background:#dd0; /* Bez podtrženi. */ text-decoration: none; Laboratoř geoinformatiky a kartografie, Masarykova ui I CSS je potřeba validovat, adresa: http://jigsaw.w3.org/css-validator/ ^|5^ C5SW,lldJllůnS ____ B l-Tr-ÍHTľin Laboratoř geoinformatiky a kartografie, Masarykova unr 8