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 XHTML - základní principy 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 univerzita PRÍKLADY V XHTML 1.0 Strict Logické značky ... ... ...

...

...

...

...

Vizuální značky .. «.>..> <±>.. .. ... .. 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 0 Laboratoř geoinformatiky a kartografie, Masarykova univerzita • Neukončení tagu 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 < Slt; > Sgt; S Samp; 1' Squot; Sapos ; Tom&Jerry se proto musí zapsat jako

Tom&Jerry

Laboratoř geoinformatiky a kartografie, Masarykova univerzita Prázdný XHTML soubor Deklarace dokumentu Laboratoř geoinformatiky a kartografie, Masarykova univerzita • Uchovávány v tagu • 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, Masarykova univerzita 2 Metaúdaje a kódování • Kódování definuje použitou znakovou sadu • Špatná definice zničí typické české znaky (ěščřžýáíéúů) Prilis zlutoucky kun upel dabelske kody. PRILIS ZLUTOUCKY KUN UPEL DABELSKE KODY. ISO-8859-2 (ISO Latin-2) Přília llu»oučký kůň úpěl ďábelské kódy. PŘÍLI© ®LU«OUČKÝ KŮŇ ÚPĚL ĎÁBELSKÉ KODY. 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É KODY. Macintosh Central European (MacCE) PJ'lia ěluéouOU-Kí KJÔ éPL Ň|jBELSK KŕDY. Brat©i Kamenitt" (KEYBCS2, CP859) P©"lflužou4k k-o tp l belsk, k"dy. Pž

'LUfOU€Kť Kft —PILL ...ŽBELSK K«DY. ISO-8859-1 (ISO Latin-1) Prílis zlutoucký kun úpel d®belské kódy. PRÍLIS ZLUTOUCKÝ KU+ ÚPEL D0BELSKÉ KODY. KOI-8 aS2 (KOI8CS) PŇÉliO ÚluÔouÁkÚ kEÍ ÔpĹl ÁÁbelsk* kĎdy. PňéLIó úLUôOUäKú KeT ÓPÍL äáBELSK, KdDY. A 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 tagy (tag může podtrhávat text) Tomu, kdo umí dělat s JavaScriptem se otevírají nové možnosti Laboratoř geoinformatiky a kartografie, Masarykova univerzita Prázdný XHTML soubor Prázdný XHTML soubor 3 Textové elementy nadpisy - Měl by shrnovat obsah části stránky - Mohou být rozděleny do několika úrovní (hl až h6; přičemž hl 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 tagem Laboratoř geoinformatiky a kartografie, Masarykova univerzita 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áší (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=„zalozka" Laboratoř geoinformatiky a kartografie, Masarykova univerzita Obrázky Mohou web velmi příjemně oživit „Kámenem ú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, Masarykwa univerzita 4 Seznamy
odražky
- čtverečky a kolečka (plné, prázdné) použité jako odrážky

čtvereček jako odrážka

kolečko jako odrážka

plné kolečko jako odrážka

číslovaný, písmenkovaný seznam

Blansko

Boskovice

Letovice

Kunštát

Olešnice

Laboratoř geoinformatiky a kartografie, Masarykova univerzita Validace XHTML dokumentů 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) 5 Rámy (frames) neplést rámy s rámečky© pomocí rámů rozdělíme obrazovku na několik částí s jiným obsahem rozumné řešení pro navigaci v jedné části se obsah nemění, v jiné ano • tvoření rámů: ■ definice rozdělení obrazovky (50:50, 20:80,...) ■ Deklarace vždy v tagu Laboratoř geoinformatiky a kartografie, Masarykova univerzita Rámy (frames) - syntaxe • v navigačním rámu je třeba přidat v tagu atribut target, který má hodnotu rovnající se danému cílovému rámci Laboratoř geoinformatiky a kartografie, Masarykova univerzita Rámy - atributy pro Atribut Použití Hodnoty rows Rozdělení na řádky px, % cols Rozdělení na sloupce px, % border Šířka rámečku px frameborder Zobrazení rámečku yes / no bordercolor Barva rámečku Red, #000000 framespacing Mezery mezi rámy px Laboratoř geoinformatiky a kartografie, Masarykova univerzita Rámy - atributy pro Atribut Použití Hodnoty src cesta ke stránce URL name jméno pro zacílení odkazů cokoli scrolling zobrazení rolovacích lišt yes / no / auto noresize možnost měnit velikost rámů yes / no marginheight vertikální okraje rámu px marginwidth horizontální okraje rámu px frameborder šířka rámu px framecolor barva rámu red, #000000 Laboratoř geoinformatiky a kartografie, Masarykova univerzita KASKÁDOVÉ STYLY (CSS) 6 Typické sady písem 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: ^nospace Georgia (elegantnější patkové písmo): font-family: Georgia, "New York CE", utopia, serif 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 CE", fixed, monospace Tahoma (alternativní bezpatkové písmo): font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif 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", lucida, sans-serif Verdana (širší, o půl stupně větší bezpatkové písmo): font-family: Verdana, "Geneva CE", lucida, sans-serif Laboratoř geoinformatiky a kartografie, Masarykova univerzita Velikost písem 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 univerzita Kaskádové styly /* Selektor vybirajici všechny elementy (ten je právě jeden).*/ body { /* Řez pisma (font) */ font-family: serif; /* Velikost pisma udávaná v různých jednotkách (px, %, em, atd.). O jednotkách obecně viz. http://www.jakpsatweb.cz/css/font-size.html a http://www.jakpsatweb.cz/css/css-jednotky.html */ font-size:100%; /* Barva pisma. 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 pozadi elementu. */ background:#fff; Laboratoř geoinformatiky a kartografie, Masarykova univerzita 7 Kaskádové styly Kaskádové styly ■ /* Vnější okraje elementu. */ margin:0; /* Vnitřní okraje elementu. */ padding:5px; } /* Selektor vybírající všechny elementy p (odstavce). */ p { margin: 0; /* Odsazení prvního řádku odstavce (lem = šířka 1 písmene M) . */ text-indent: 1em; /* Zarovnání odstavce (justify=do bloku). Další možné hodnoty: left, right, center. */ text-align:justify; } Laboratoř geoinformatiky a kartografie, Masarykova univerzita /* Selektor vybírající všechny elementy hl a h2 (nadpisy 1. a 2. urovně). */ h1, h2 { /* Řez písma (font). */ font-family: sans-serif; /* Velikost písma. */ font-size:115%; } /* Selektor vybírající všechny elementy hl (nadpisy 1. úrovně). Všimněte si, že element hl je vybrán už podruhé to ničemu nevadí, naopak je to jeden ze základních principů CSS */ h1 { /* Styl písma (italic = kurzíva). */ font-style: italic; } Laboratoř geoinformatiky a kartografie, Masarykova univerzita 8 Validace CSS I CSS je potřeba validovat, adresa: http://jigsaw.w3.org/css-validator/ Laboratoř geoinformatiky a kartografie, Masarykova univerzita 9