CVIČENÍ WWW1 (PWA1) č. 1

Transkript

1 CVIČENÍ WWW1 (PWA1) č. 1 Přihlášení ke školní síti (v případě, že předmět zahajuje cvičení v laboratoři jako první). Ve spolupráci s p. Kolečkem se provede registrace žáků do sítě Novell. Žáci jsou seznámeni s organizací síťových disků a se způsobem jejich využití. Úkol na doma zkusit (podle návodu na školním webu) připojení z domova ke školní síti přes FTP. Organizace práce v laboratoři Zopakování některých zásad typických pro laboratoř. Domovským adresářem žáka bude adresář s názvem třídy umístěný na lokálním disku (v našem případě na disku D: v adresáři STUDENTI). Důvod pracuje-li aplikace se souborem přímo na síťovém disku, může to vést k problémům (např. Homesite). Žák si průběžně zálohuje data na osobní síťový disk G: kopírováním. Základní práce v souborovém manažeru Práce s okny (načítání obsahu, přepínání mezi okny, třídění obsahu,..) Procházení stromovou strukturou disku. Vytváření adresářové struktury. Operace se soubory (kopírování, přesuny, přejmenování) a se skupinami souborů. Hvězdičková a otazníková konvence. Prohlížení, editace a mazání souboru. Běžně používané klávesové zkratky. Samostudium Projděte si níže uvedené odkazy a podle prvního tutorialu trénujte práce se soubory a složkami. Všechny operace provádějte v rámci složky své třídy na lokálním disku, tj. D:/STUDENTI/<složka vaší třídy>/ Užitečné odkazy: - úvod do používání Total Commanderu. užitečné tipy a triky v Total Commanderu.

2 CVIČENÍ WWW1 (PWA1) č. 2 Kódování textové informace Co je to znak, znaky tisknutelné a řídicí. ASCII tabulka (žáci již mají základy binární číselné soustavy) a její struktura. Rozšíření ASCII tabulky o stránku znaků národní abecedy (WINDOWS-1250, UNICODE, kódování UTF-8). WINDOWS A B C D E F NUL SOH STX ETX EOT ENQ ACK BEL BS HT LF VT FF CR SOH SI 1 DLE 16 DC1 17 DC2 18 DC3 19 DC4 20 NAK 21 SYN 22 ETB 23 CAN 24 EM 25 SUB 26 ESC FS GS RS US ! " # $ % & ' ( ) * +, -. / : ; < = >? A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { ~ DEL NZ NZ NZ Š Ś Ť Ž Ź 9 NZ NZ š ś ť ž ź A ˇ Ł Ą Ş «Ż B ± ł µ ą ş» Ľ ľ ż C Ŕ Á Â Ă Ä Ĺ Ć Ç Č É Ę Ë Ě Í Î Ď D Ð Ń Ň Ó Ô Õ Ö Ř Ů Ú Ű Ü Ý Ţ ß E ŕ á â ă ä ĺ ć ç č é ę ë ě í î ď F đ ń ň ó ô ő ö ř ů ú ű ü ý ţ Je možno trénovat tak, že každý napíše své jméno v rozšířeném ASCII kódu pomocí HEXA soustavy a převede je do binární soustavy na 0 a 1. Př.: Jan Novák = 4A 61 6E 20 4E 6F 76 E1 6B Užitečné odkazy: - úvod do ASCII, vysvětlení řídicích znaků. přehled znakových sad. - povídání o znakové sadě WINDOWS-1250.

3 Práce s textem v Poznámkovém bloku a v Listeru Založení textového souboru (Shift + F4 apod.). Ukládání textového souboru v kódování ANSI, UNICODE a UTF-8. Vyhodnocení informací z hexadecimálního výpisu souboru v Listeru. Porovnání různě kódovaných souborů co do velikosti. Vkládání znaků pomocí ALT + xxxx, kontrola podle ASCII tabulky (xxxx začíná nulou pro číslo>127; pozor na nastavený typ klávesnice - musí být česká). ANSI (ASCII + rozšíření na WINDOWS ) velikost souboru 17 bajtů odřádkování tabulátor UNICODE Hlavička velikost souboru 36 bajtů UTF - 8 Hlavička velikost souboru 21 bajtů Zobrazení textu v internetovém prohlížeči Otevření textového souboru v internetovém prohlížeči. Autodetekce znakové sady a její ověření. Pokusy s různými znakovými sadami.

4 CVIČENÍ WWW1 (PWA1) č. 3 Úvod do HTML Význam zkratky HyperText Markup Language. Vysvětlit, co je to hypertext, jaká je úloha značek (Mark) při vykreslování stránky. Verze HTML význam verze HTML 3.2 (dotvořil se sortiment značek, na kterých stojí základ současného webu), aktuální verze HTML 4.01 (změny oproti verzi 3.2 budou probrány později), budoucí verze HTML 5. Souvislost HTML s XHTML. Užitečné odkazy: Obsah a forma HTML dokumentu Obsah = sdělení (hlavně texty) to je na stránkách prvotní. Forma = rozvržení obsahu (formátování textu, druh písma, okraje, styly objektů, centrování, odsazení, barvy čehokoliv apod.) to je druhotné (ale rovněž důležité). Původní myšlenkou HTML bylo, že jak obsah, tak forma se budou vytvářet HTML značkami. Moderní web naproti tomu přísně (striktně) odděluje tvorbu obsahu od formy. Obsah je dán HTML, forma se vytváří pomocí kaskádových stylů (CSS). Svůj záměr - psát stránky dle striktních požadavků moderního webu (STRICT) nebo z těchto požadavků slevit a přechodně (TRANSITIONAL) využívat k formátování obsahu prostředků HTML - sdělujeme prohlížeči úvodní značkou našich stránek, tzv. DTD (viz dále). Do jaké míry se nám tento záměr nakonec podaří realizovat, to nám řekne validátor. V případě úspěchu budou naše stránky validní podle pravidel STRICT nebo TRANSITIONAL. Struktura HTML dokumentu Realizace HTML dokumentu jako textového souboru (práce s textovými soubory byla probrána v minulém cvičení včetně kódování do ANSI, UTF aj. NotePad, Lister). Činnost internetového prohlížeče po načtení HTML souboru vysvětlit, jak a z čeho prohlížeč vytváří stránku. Části HTML souboru struktura je obsažena v přehledu HTML 3.2, který žáci dostanou vytisknutý. Vysvětlit základní pojmy a pravidla (tagy a jejich druhy, direktivy, pravidla HTML,..)

5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> Definice typu dokumentu (DTD budeme využívat k přepínání cílového prohlížeče do jednoho z vykreslovacích režimů) <html> HTML dokument Hlavička <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="keywords" content="hudba, kytara, Beatles"> <title>název stránky</title> </head> (hlavička obsahuje dodatečné informace vztahující se k celé stránce) <body> Tělo stránky </body> (tělo obsahuje pokyny pro vykreslení všech objektů tvořících výslednou podobu stránky) </html> Výše uvedenou strukturu je vhodné vysvětlovat v prostředí HomeSite vytvoří se automaticky při spuštění programu. Vzájemné vztahy mezi jednotlivými částmi HTML dokumentu lze přehledně znázornit pomocí stromové struktury stránky. HTML HEAD META HTTP- EQUIV META NAME TITLE BODY OBJEKT 1 OBJEKT 2 OBJEKT 3

6 Osvědčilo se vysvětlovat strukturu HTML souboru v pořadí BODY HEAD DTD (tj. od nejpochopitelnějšího k nejnáročnějšímu). Objekt BODY odpovídá oknu prohlížeče na monitoru a to, co je v BODY, odpovídá tomu, co bude vykresleno v okně. Hlavička HEAD obsahuje dodatečné informace vztahující se k stránce jako k celku. Některé z nich použije prohlížeč pro správné vykreslení stránky (informace o znakové sadě, název stránky, cesty k dalším souborům nutným pro sestavení stránky apod.), jiné jsou určeny pro další zařízení (pro roboty, vyhledávače apod.). DTD (Document Type Definition) má za úkol informovat prohlížeč a další internetová zařízení o pravidlech, podle kterých je stránka napsána (zda se jedná o HTML či XHTML, podle které normy apod.). Na základě těchto informací se prohlížeč rozhodne pro postup, jak bude stránku z došlých údajů skládat dohromady. Vykreslovací režimy prohlížeče Moderní prohlížeče disponují alespoň dvěma vykreslovacími režimy: - STANDARDNÍ MÓD neboli režim platných standardů a - QUIRK MÓD neboli režim zpětné kompatibility. O tom, do kterého módu se prohlížeč přepne, aby vykreslil naši stránku, rozhoduje DTD neboli definice typu dokumentu uvedená na začátku HTML souboru. Na internetu je mnoho starých stránek napsaných v poměrně dávné minulosti, tj. podle technologií, které jsou dnes již překonané. QUIRK mód slouží pro správné zobrazování právě těchto stránek. Narazíli moderní prohlížeč na takovou starou stránku, nenajde v ní DTD odpovídající moderní technologii a přepne prohlížeč do QUIRK módu. Prohlížeč se začne chovat jako jeho starší verze, tj. vrátí se v čase a vykreslí starou stránku bez problémů. Při psaní stránek budeme volit takové DTD, které přepne prohlížeč do standardního módu. Tím dosáhneme toho, že prohlížeč se bude snažit vykreslit naši stránku podle dnešních norem, tj. pro nás předvídatelným způsobem. V mnoha případech se tak vyhneme rozdílnému vykreslování stránky v různých typech prohlížečů. Nejjednodušším způsobem, jak přepnout drtivou většinu moderních prohlížečů do STANDARD módu, je sdělit prohlížeči, že stránka je psána podle striktních pravidel pro oddělení obsahu a formy STRICT a použít DTD ve tvaru <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (1) Pro korektní přepnutí do QUIRK módu stačí sdělit prohlížeči, že stránka je psána podle starých nebo přechodových pravidel pro oddělení obsahu a formy - TRANSITIONAL. Pro využití posledně zmíněné možnosti stačí použít DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (2) Netroufáme-li si napsat stránku podle pravidel STRICT a přesto chceme donutit prohlížeč, aby se přepnul do režimu STANDARD, použijeme DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " (3) Pro psaní stránek, k jejichž formátování nebudeme využívat kaskádové styly, je vhodné používat DTD podle (2) nebo (3); v těchto případech lze dosáhnout validity stránky podle TRANSITIONAL. Až se budeme učit formátovat stránku pomocí CSS, je žádoucí používat DTD podle (3) a postupně se snažit o validitu také podle (1), tj. STRICT.

7 Shrnutí: Typ HTML dokumentu DTD Vykreslovací mód prohlížeče <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> STANDARD STRICT zásady moderního webu, mj. přísné oddělení formy od obsahu. Obsah je tvořen HTML, forma se vytváří výhradně přes kaskádové styly. TRANSITIONAL nelpí se striktně na zásadách moderního webu. Formátování obsahu může být provedeno HTML značkami. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " QUIRK STANDARD Některé prohlížeče umožňují uživateli zjistit, do kterého režimu činnosti jsou právě přepnuty. Pro Mozillu Firefox zvolte nabídku Nástroje Informace o stránce. Užitečné odkazy:

8 Seznámení s prostředím programu HomeSite Automatické vygenerování struktury HTML souboru po spuštění popis struktury. Orientace v prostředí HomeSite okno editace, okno náhledu na stránku. Ukládání HTML souboru - Připomenout nutnost ukládání na lokální disk do domovské složky žáka na disku D: (při práci přímo na síťovém disku G: nastávají potíže s náhledy). - Navyknout si ukládat ještě prázdnou stránku. Při práci s ještě neuloženou stránkou nefungují odkazy na dokumenty nacházející se na disku (na obrázky apod.). - Všimnout si, že při ukládání si můžeme zvolit typ výsledného kódování souboru. Pokud je tato možnost nepřístupná, lze ji zapnout zaškrtnutím volby Enable non-ansi file encoding v nabídce Options Settings File Settings. První pokusy v editoru - Vyplnění titulku; po uložení na disk se výsledek projeví až v externím prohlížeči zkusit si to (náhled v HomeSite titulek stránky nezobrazuje). - Vložení několika náhodných slov do BODY, vysvětlit chování textu v okně prohlížeče (jak je to s ukončením řádku apod., všimnout si, že text má určitý výchozí styl apod.). - Vysvětlit význam generátoru textu pro návrh stránek, vygenerovat náhodný text na přenést jej do BODY (např. přes schránku), zkoumat chování textu v okně prohlížeče při změnách velikosti okna. - Vložení parametru do BODY (vysvětlit princip automatického vkládání parametrů), zkusit to na příkladu bgcolor. Vysvětlit kódování barev, využít toho, že žáci již znají základy HEXA soustavy. Vysvětlit pojem TRUE COLOR, dojít k tomu, kolik barev je možno vytvořit, vysvětlit, proč se používají pouze barvy z palet omezené velikosti. Vysvětlit, které barvy lze zadat jménem. Pokusy s přepínáním prohlížeče mezi režimy STANDARD a QUIRK - Zkusit si změny v DTD a v Mozille FF detekovat výsledný režim. - Detekovat režim prohlížeče při zpracování různých stránek na internetu.

9 CVIČENÍ WWW1 (PWA1) č. 4 Informace o kódování stránky Zohlednění použitého kódování výsledného dokumentu pomocí meta tagu, např. ANSI = <meta http-equiv="content-type" content="text/html; charset=windows-1250">, UTF8 = <meta http-equiv="content-type" content="text/html; charset=utf-8">, vkládat do <head> ještě před <title> kvůli čitelnosti titulku. Užitečné odkazy: Použití validátoru (odtud si lze tagy zkopírovat např. přes schránku do HomeSite). Co to je validátor a k čemu se dá použít. HTML validátory na internetu - oficiální w3c na český na - výhody českého validátoru (pro začínající programátory). Validace dokumentu vytvořeného v HomeSite - vkládání zdrojového textu do validátoru, výhody přímého vstupu přes schránku, - čtení výstupu validátoru a práce s chybovými hláškami, - validita dokumentu podle TRANSITIONAL a STRICT deklarace. Vkládání a formátování textu Zásady a doporučení pro psaní stránek - Tagy sice nejsou case sensitive, ale naučíme-li se psát je malým písmem, usnadníme si pozdější přechod na XHTML. - Párové tagy vždy ukončujeme (raději i tehdy, kdy je to nepovinné např. p, td aj.) - Další užitečná doporučení pro psaní webu najdeme na Vložení dominantního nadpisu stránky tag h1. Význam dominantního nadpisu. Co se stane, když místo h1 napíšu hl princip ignorování neznámého tagu. Další úrovně nadpisů - h2 až h6, jejich reálná použitelnost. Možné důsledky neukončení párového tagu. Odstavec jako základ pro vložení textové informace - p jako paragraph, - vzhled odstavce v okně prohlížeče a jeho chování vůči okolním objektům, - formátování odstavce (zarovnání = align) a následná ztráta validity stránky ve stylu STRICT. Fyzické a logické styly písma rozdíly mezi fyzickým a logickým stylem (vysvětlit na příkladu b strong a i - em), myšlenka maximálně přístupného webu, doporučení nahrazovat fyzické styly logickými, příklady nezavržených fyzických stylů - horní a dolní index (km 2, H 2 O apod.).

10 Vnoření tagů - zásady pro vnoření tagů, - nebezpečí zkřížených tagů (např. <strong>toto je tučně <em>a toto navíc kurzívou </strong>a toto už je zkřížený tag</em>), reakce validátoru. Tagy zavržené ve verzích HTML 4 (vyznačit ve vytisknutých seznamech HTML 3.2) - podtržení u, - přeškrtnutí strike, - vlastnosti písma font, - základní velikost písma basefont, - centrovaný text center, - seznamy dir a menu. Vytváření validních dokumentů s použitím zavržených tagů - důvody pro zavržení některých tagů, - reakce HomeSite při vložení zavrženého HTML tagu, - možnosti tagu font ( size, color, face ) - změna DTD na nižší verzi HTML (např. HTML 3.2) a revalidace dokumentu. Entity - základní myšlenka entit vkládání speciálních znaků, jejichž zobrazení v prohlížeči nezávisí na zvoleném kódování dokumentu, - jednotná syntaxe &xxxx; (xxxx je kód entity), - pomoc při vkládání entity v prostředí HomeSite, - přehled entit je k dispozici na disku I: ve složce příslušného předmětu v souboru xhtml-entity.pdf, - je možno zkoušet např. toto: 27ºC, 1kΩ, ω=2πf,.. Užitečné odkazy:

11 CVIČENÍ WWW1 (PWA1) č. 5 Blokové a řádkové elementy Rozdíl mezi elementem, tagem a atributem. <font color="#ff0000">toto je červený text.</font> Atribut je vlastnost. Tag je značka vymezující začátek, příp. konec elementu. Element je objekt vytvořený tagem. Užitečné odkazy: Blokové elementy (BLOCK) Element si pro sebe zabere ve vodorovném směru celou šířku okna prohlížeče (začíná tedy na samostatném řádku a má ho celý pro sebe). Jakýkoliv následující element (ať už blokový nebo řádkový) začíná až na dalším řádku. Seznam blokových elementů: Užitečné odkazy: - prvky pro formátování textu p, br, center, hr, - prvky pro strukturování dokumentu h1 až h6, div, blockquote, address, pre, - prvky seznamů ul, ol, li, dl, dt, dd (chovají se jako bloky jen do určité míry) Řádkové elementy (IN-LINE) Element si pro sebe zabere v rámci řádku jen tolik místa, kolik mu dovolí jeho (zformátovaný) obsah. Vedle sebe mohou být na stránce pouze řádkové elementy. Seznam řádkových elementů: - elementy pro logické styly písma (em, strong, dfn, code, samp, kbd, var, cite), - elementy pro logické styly písma nově přidané do HTML 4 (abbr, acronym, del, ins, q), - elementy pro fyzické styly písma (tt, i, b, u, strike, big, small, sub, sup, font, basefont), - odkazy a, - obrázky img, - řádkový kontejner span. Užitečné odkazy:

12 Pravidla pro vnořování elementů Pravidlo 1: Do řádkového elementu nesmíme vložit blokový element. Příklad: <b> <p>toto je text odstavce, který měl být tučně</p> </b> Všechny ostatní možnosti jsou dovoleny, tj. blokové elementy (s výjimkou následujícího pravidla 2) mohou obsahovat jak další blokové, tak i řádkové elementy: Příklady: <p> <b>toto je text odstavce, který bude tučně</b> </p> <div> <p>kousek textu</p> <b>a tučný text </b> <i>a kurzíva </i> <font color= red >a červený text.</font> </div> Pravidlo 2: Do odstavce p a nadpisů h1 až h6 nesmíme vložit blokový element. p h1 až h6 Příklady: <h1> Dobrý začátek, ale <p>špatný pokus o odřádkování.</p> </h1>

13 Pravidlo 2 má tuto logiku: Odstavec p je elementární bloková jednotka, která se už nedá dělit na další bloky. Nadpisy h1 až h6 jsou jen zvláštními typy odstavce. Užitečné odkazy: Obě pravidla je nutno dodržovat, jinak můžeme očekávat velké problémy s neočekávaným chováním stránky. Některé prohřešky proti oběma pravidlům nemusí vést k chybnému vykreslování stránky a nemusí je objevit ani validátor. Validátory a prohlížeče si totiž při vykreslování chybně napsané stránky pomáhají tím, že se pokoušejí domýšlet správnou podobu kódu. Jak uvažuje prohlížeč Napište v NotePadu kousek textu a uložte jej jako soubor s koncovkou HTM nebo HTML. Zobrazte obsah souboru v prohlížeči Mozilla Firefox. Označte libovolnou část textu, pomocí pravého tlačítka myši vyvolejte nabídku a z ní vyberte položku Zobrazit zdrojový kód výběru. Ukáže se, že aby prohlížeč mohl obsah souboru vykreslit, domyslel si chybějící HTML značky. Prohlížeč si především domýšlí tagy, které jsou v příslušné HTML specifikaci definovány jako nepovinné. Mezi nepovinné tagy patří otevírací i ukončovací značky pro html, head i body. Nepovinný je i tag pro ukončení odstavce </p>. Zkuste si změnit obsah souboru na Prohlížeč si domyslí toto:

14 V okamžiku, kdy prohlížeč narazil na tag h1, zjistil porušení pravidla 2 (nadpis nemůže být v odstavci) a aktuálně otevřený odstavec p ukončil. Poté už jenom doplnil chybějící značku pro uzavření nadpisu. Pozn.: nadpis má povinnou ukončovací značku. Z toho vidíme, že prohlížeč nedoplňuje pouze nepovinné tagy, ale také ty, jejichž absence způsobuje ztrátu validity. Výše uvedené chování nám pomůže pochopit chybové hlášení validátoru při zpracování kódu Validátor si domyslel ukončení odstavce před nadpisem a vadí mu uzavírací tag </p>. Užitečné odkazy: - perfektní vysvětlení, jak přemýšlí prohlížeč - seznam všech HTML elementů (O = Optional neboli nepovinný tag)

15 CVIČENÍ WWW1 (PWA1) č. 6 Seznamy Princip, typy a použití nejznámější typy seznamů neuspořádaný a uspořádaný, má přesně danou strukturu a některé rysy blokového elementu (viz dále), používaný pro navigaci na stránkách. Neuspořádaný seznam = unordered list = ul Uspořádaný seznam = ordered list = ol Společné rysy seznamů ul a ol chovají se jako bloky, ale mohou obsahovat jen li = list item, položky seznamu se zobrazí jako bloky s odsazením od levého okraje a s odrážkami, odrážky lze změnit atributem type elementu ul nebo ol. Položka seznamu li může obsahovat řádkový prvek nebo další seznam, sama musí být obsažena uvnitř seznamu, její ukončení tagem je nepovinné. Náměty k procvičení (hotový kód vždy přezkoušet validátorem) jednoúrovňové seznamy s různými typy řazení (číslování) a odrážek, víceúrovňové (vnořené) seznamy, seznamy se změnou logiky číslování (řazení) položek. Užitečné odkazy:

16 Odkazy Princip odkazu, typy odkazů je to řádkový element (odkazy se na stránce řadí vedle sebe), a href se používá k vytváření hypertextových odkazů (hypertext reference), a name se používá k vytváření záložek. a href hypertextový odkaz Účel kliknutím na odkaz se přeneseme do cíle. element a = anchor vnořený element pro aktivaci odkazu (na co mám kliknout) <a href=" klikni</a> cíl odkazu (kam se mám přenést po kliknutí) Cíl odkazu obecná syntaxe URL cílového dokumentu, různé typy protokolů (http, mailto, file,..), zápis cesty k dokumentu (absolutní a relativní cesty, používané symboly), záložka (bude probráno dále), prázdný odkaz # (pro ladicí účely) Element pro aktivaci odkazu musí to být řádkový element (text, obrázek aj.), nesmí to být další odkaz, tabulka, formulář aj. Parametry target pro definici cílového rámce (není validní podle STRICT specifikace), title jako univerzální popisovač. Vytváření navigace přes seznam položek prakticky jediný uznávaný způsob, příklad: <ul> <li><a href=" <li><a href=" <li><a href=" </ul> vodorovná navigace v HTML např. pomocí tabulky.

17 a name záložka Účel záložka je pojmenované místo v dokumentu, na které se mohu přenést kliknutím na odkaz. Odkaz na záložku v navigaci <ul> <li><a href="#kapitola1">kapitola 1</a></li> <li><a href="#kapitola2">kapitola 2</a></li> <li><a href="#kapitola3">kapitola 3</a></li> </ul> Vytvoření záložky v názvu kapitoly jméno záložky cílem odkazu je záložka <h2><a name="kapitola2">kapitola 2</a></h2> element a = anchor Skok na záložku nacházející se v jiném dokumentu <a href="jiny.html#kapitola2">kapitola 2</a> Alternativa k záložkám identifikátor ID <h2 id= kapitola2 >KAPITOLA 2</h2>

18 CVIČENÍ WWW1 (PWA1) č. 7 Obrázky Účel grafiky na webu - má dekorativní funkci (tapeta na pozadí stránky, výplň a orámování objektů, efekty), - nese užitečnou informaci (nákresy, fotografie apod.). Pravidla pro webovou grafiku - pozor na autorská práva, - volba vhodného grafického formátu, - pečlivá příprava grafiky s ohledem na minimální velikost souboru. Používané formáty - GIF obrázek se může skládat z většího počtu rámců, které se střídají (možnost animace), v každém rámci může být max. 256 různých barev z předem namíchané palety, jedna barva v rámci může být průhledná (pozadí stránky je přes obrázek vidět), obrázek je bezeztrátově komprimován, hodí se pro kresby a technickou grafiku (schémata), nehodí se pro ukládání fotografií (málo barev). - JPG obrázek může obsahovat až 16 miliónů různých barev (TRUE COLOR 24 bitů), formát nepodporuje animace ani průhledné barvy, obrázek je ztrátově komprimován (na úkor kvality) s nastavitelným stupněm kvality, hodí se pro ukládání fotografií, nehodí se pro kresby a technickou grafiku (vznik rušivých artefaktů). - PNG 2 varianty: paletově orientovaný nebo TRUE COLOR, možnost řídit průhlednost barvy (některé prohlížeče to neumí zobrazit), formát nepodporuje animace, obrázek je bezeztrátově komprimován, hodí se na kombinace kresby a fotografie (hodně barev, průhlednost, jemné detaily). Užitečné odkazy:

19 Dekorativní grafika v HTML - má za následek ztrátu validity u stránek psaných podle STRICT specifikace, - klasickými příklady jsou tapety (na pozadí stránky nebo prvků tabulky) <body background="tapeta.jpg"> Obrázek pro tapetu je většinou malý obrázek, který je prohlížečem rozkopírován jako dlaždice ve vodorovném i svislém směru po celé ploše okna. Aby byl vytvořen plynulý vzor, musí obrázek vyhovovat určitým požadavkům. Další informace včetně různých atributů pro použití pozadí v HTML je možno nalézt na Grafika nesoucí užitečnou informaci - je zastoupena elementem img, který je tvořen nepárovým tagem, - img by se neměl používat pro vykreslení grafiky, která nemá vypovídací hodnotu, - img je řádkovým elementem (chová se stejně jako písmenko, obrázky se řadí vedle sebe). element img = image je tvořen pouze startovacím tagem alternativní text <img src="../images/fotka.jpg" alt= Pepa u moře width= 320 height= 200 > relativní cesta k obrázku šířka a výška obrázku v pixelech - cesta k souboru s obrázkem může být relativní i absolutní (vyhýbáme se absolutní cestě), - alternativní popisek je povinný i pro stránky psané podle TRANSITIONAL specifikace, - alternativní popisek má za úkol nahradit obrázek v případě, že tento nemůže být vykreslen, - alternativní popisek je prohlížečem IE mylně vykreslován jako bublinková nápověda, která se správně realizuje atributem title, - je vhodné vždy zadávat u obrázků rozměry, - není vhodné udávat jiné rozměry obrázku, než jsou rozměry originálu. Zvláště nevhodné je zmenšování velkého originálu tak, aby se vešel na stránku stejně musíme stahovat velký obrázek a tím i zbytečné množství dat. Dodatečná změna rozměrů způsobuje u některých grafických formátů ztrátu kvality ( rozsypání grafiky u GIFu apod.). - kliknutím pravého tlačítka na obrázek a aktivací volby Vlastnosti zjistíme pouze hodnoty atributů width a height, nikoliv skutečné rozměry obrázku, - formátovací atributy border, align, hspace a vspace jsou dnes zastaralé a způsobují ztrátu validity u stránek psaných podle STRICT deklarace. Užitečné odkazy:

20 CVIČENÍ WWW1 (PWA1) č. 8 Tabulky elementy pro prezentaci tabulkových dat Účel tabulek na webu - zobrazení klasických tabulkových dat, - formátování obsahu (dnes by se mělo nahrazovat pomocí CSS). Nejjednodušší tabulka <table> <tr> první řádek <td>první vlevo</td> <td>první uprostřed</td> <td>první vpravo</td> </tr> <tr> První vlevo První uprostřed První vpravo <td>druhý vlevo</td> <td>druhý uprostřed</td> <td>druhý vpravo</td> Druhý vlevo Druhý uprostřed Druhý vpravo </tr> druhý řádek </table> - element table obsahuje řádky tr (table row) složené z buněk td (table data), - vykreslování probíhá po celých řádcích shora dolů a po buňkách v řádku zleva doprava, - musíme vypsat obsahy všech buněk, - elementy tr a td jsou párové a jejich ukončování je nepovinné. Co může být vnořeno do tabulkových elementů - v elementu table mohou být pouze řádky tr (a některé speciální pro tabulky, viz dále) - v elementu tr mohou být pouze buňky td (nebo th, viz dále), - v elementu td může být cokoliv (třeba obsah celé stránky). Rozměry elementů tvořících tabulku (v pixelech nebo v procentech rozměru nadřazeného prvku) - je povoleno zadávat šířku celé tabulky i u STRICT deklarace bez ztráty validity, - šířka celého sloupečku se řídí podle nejširší buňky sloupečku, ostatní buňky se přizpůsobí, - nastavení výšky tabulky způsobuje ztrátu validity i podle TRANSITIONAL deklarace (ale většinou to funguje), - zadávat šířku a výšku buňky u STRICT deklarace vede ke ztrátě validity, - výšku řádku nelze zadat v elementu tr, zadávají se výšky buněk td; výška celého řádku se řídí podle nejvyšší buňky v řádku, výšky ostatních buněk v řádku se tomu přizpůsobí, - vykreslení rámečku border lze použít bez ztráty validity podle STRICT deklarace.

21 Grafika v elementech tvořících tabulku - veškeré změny barev v tabulce mají za následek ztrátu validity podle STRICT deklarace, - obarvení rámečků mají za následek ztrátu validity i podle TRANSITIONAL deklarace (všechny varianty atributu bordercolor v elementech table, tr, th a td), - barvu pozadí lze nastavit u elementů table, tr, th i td, - obrázkové výplně lze použít do pozadí elementů table, td a th, - použití obrázkových výplní v tabulkách není v HTML dovoleno a způsobuje ztrátu validity i podle TRANSITIONAL deklarace, většinou to ale funguje. Tabulky s přesahy buněk - slévání buněk ve vodorovném směru (atribut colspan), - slévání buněk ve svislém směru (atribut rowspan), - použití TABLE WIZARD v HomeSite. Umístění tabulky na stránce - bez použití atributu align se tabulka chová podobně jako blokový element, - při použití align= center se tabulka chová jako vycentrovaný blokový element, - při použití align= left nebo align= right se tabulka chová jako plovoucí element obtékaný za ním následujícími objekty zprava nebo zleva (možnost umístit tabulky vedle sebe apod.), - použití atributu align má za následek ztrátu validity u stránky psané podle STRICT deklarace. Užitečné odkazy: Konverze tabulky do HTML - makro pro převod tabulky z Wordu - program pro převod tabulky z Excelu, Wordu aj. - diskusní stránka o konverzi tabulek do HTML

22 CVIČENÍ WWW1 (PWA1) č. 9 Tabulky elementy pro formátování stránky Formátování stránky pomocí tabulky - tabulkový design celé stránky (design, layout), - formátování dílčího obsahu (vodorovná navigace, náhrada tabelátorů apod.). Tabulkový design stránek - tabulkový design je na webu velmi častý pro svou jednoduchost a spolehlivost, - tabulkový design má i některé nevýhody a dnes se nahrazuje technologií CSS. Příklady: okraj - pevná šířka obsahu Obsah stránky okraj <table align= center width= 640 height= 100% > <tr> <td>tady bude obsah stránky</td> </tr> </table> - vícesloupcový layout navigace Obsah stránky - záhlaví Hlavička navigace Obsah stránky info <table width= 100% height= 100% > <tr valign= top > <td width= 200 >navigace</td> <td>tady bude obsah stránky</td> <td width= 150 >info</td> </tr> </table> <table width= 100% height= 100% > <tr> <td colspan= 2 height= 20 >Hlavička</td> </tr> <tr valign= top > <td width= 200 >navigace</td> <td>tady bude obsah stránky</td> </tr> </table> Pozn.: atributy označené červeně způsobují ztrátu validity stránky i podle TRANSITIONAL deklarace. Užitečné odkazy:

23 Tabulkové formátování obsahu - tabulek se dá v HTML využít pro pozicování a formátování obsahu stránky (obsah se rozmístí do buněk tabulky a využije se všech možností tabulek v HTML nastavení rozměrů, barvy a výplně pozadí, zarovnání obsahu i samotné tabulky apod.) Příklady: - vodorovná navigace Odkaz Odkaz Odkaz Odkaz <table align= center > <tr> <td width= 60 >Odkaz</td> <td width= 60 >Odkaz</td> <td width= 60 >Odkaz</td> <td width= 60 >Odkaz</td> </tr> </table> - přechodná změna formátování Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Tady je text, který je formálně odlišen od okolního textu např. změnou šířky řádku, orámováním, je vypodložen grafikou, má barevné pozadí apod. <table width= 480 align= center bgcolor= #f2dbdb > <tr> <td> Tady je text, který je formálně odlišen od okolního textu např. změnou šířky řádku, orámováním, je vypodložen grafikou, má barevné pozadí apod. </td> </tr> </table> Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Tady je text přes celou šířku okna prohlížeče. Text zarovnaný doleva - náhrada různých typů tabelátorů Text zarovnaný doprava <table width= 100% > <tr> <td>text zarovnaný doleva</td> <td align= right >Text zarovnaný doprava</td> </tr> </table>

24 CVIČENÍ WWW1 (PWA1) č. 10 Osobní stránky zadání projektu Obecné zásady pro vytváření zdrojového kódu - stránky pište jako validní podle TRANSITIONAL deklarace HTML 4.01, případné prohřešky proti validitě si budete muset obhájit, - do hlavičky vložte stručný a výstižný titulek, jméno a autora kódu a způsob kódování dokumentu, - stránky opatřete hypertextovou navigací; každý dokument vašeho webu vyjma úvodní stránky bude obsahovat odkaz na úvodní stránku; navigace na všech stránkách webu musí vypadat stejně, - na úvodní stránce popište cíl a sdělení celého webu a uveďte kontakt na sebe jako na autora, - ke strukturování textu používejte nadpisy h1, h2 až h6 podle potřeby (h1 je pouze 1x, pak h2 nepřeskakovat hned na h3 apod.), a to i v případě, že textové nadpisy nahrazujete grafikou, - veškerý text a jiné řádkové elementy rozdělujte do odstavců p, neoddělujte odstavce řádkovým zlomem br, ten neslouží ke členění textů do odstavců, - pro účely tohoto projektu se vám povoluje používat tabulkový design stránek (neumíte dosud CSS), vyzkoušejte maximálně jeho možnosti (při dodržení výše uvedeného požadavku na validitu dokumentu), - vyhýbejte se značkám div a span, pokud nejsou potřeba, - barvy musí být definovány s ohledem na dostatečný kontrast jasu a odstínu popředí a pozadí. Na pozadí nesmí být použit vzorek, který jakkoli snižuje čitelnost obsahu. Užitečné odkazy: Požadavky na minimální obsah webu (pro případ osobních stránek) - úvodní stránka, - stručné osobní informace, - záliby a oblíbená činnost, - oblíbené odkazy, - fotogalerie, - o projektu (vše o výrobě tohoto webu, shánění podkladů, volba koncepce, jak dopadla validace a proč apod.)

25 Tipy pro atraktivní design stránek Obrázková navigace Princip: Provedení: Příklad: - obrázek rozdělíme rastrem na malé obdélníčky a z některých uděláme odkazy. - z obrázku nařežeme malé obrázky a ty složíme k sobě pomocí tabulky. - rozřezání provedeme ručně nebo pomocí nějaké utility, např. která nám obrázek nejen rozřeže, ale i složí do tabulky. Původní grafika Rozřezání podle rastru a převod do HTML tabulky Výsledek Výsledný kód HTML, který podobné programy vygenerují, bychom vždy měli zkontrolovat a případně upravit podle svých potřeb.

26 Klikací mapa Princip: Provedení: Příklad: - v obrázku si vyznačíme plochy, které se budou chovat jako odkazy. - jde o element HTML, který se vytváří tagem map. Obsahem tohoto tagu jsou oblasti, které kreslíme přes obrázek a které budou reagovat na kliknutí myši. - v HomeSite je pěkný průvodce, který vám s vytvářením klikací mapy pomůže. <img src="ssier0.jpg" usemap="#rozcestnik" alt="ssier" border="0"> Obrázek, přes který nakreslíme klikací mapu jménem rozcestnik <map name="rozcestnik"> <area alt="spše Rožnov" shape="poly" coords="173,104,472,173,467,260,309,261,132,176" href="#" title="spše Rožnov"> <area alt="sou Rožnov" shape="poly" coords="22,27,163,28,160,121,360,200,435,190,433,124,496,56,536,87,47 2,161,419,209,355,213,158,122,26,110" href="#" title="sou Rožnov"> </map> Užitečné odkazy:

27 CVIČENÍ WWW1 (PWA1) č. 11 Úvod do CSS Co je to CSS a k čemu je to dobré - CSS = Cascading Style Sheets = kaskádové stylopisy. - Stylopis je předpis, kterým se předepisuje forma stránky (barvy prvků, jejich rozměry, umístění na stránce atd.). Buď je umístěn přímo v HTML dokumentu nebo je v externím souboru, na který je ze stránky odkaz. - Forma stránky je podle zásad moderního webu dána stylopisem, obsah stránky je vytvořen HTML značkami. Vyhovíme-li beze zbytku tomuto požadavku, mohou být naše stránky validní podle STRICT deklarace. Pak může naše stránka začínat např. deklarací <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> - Stylopisem můžeme zcela předefinovat vzhled a chování jakéhokoliv elementu stránky či celých skupin nejrůznějších objektů. CSS navíc podstatně rozšiřuje formátovací možnosti HTML. - Výhodou je, že jediným zásahem do stylopisu můžeme rázem změnit vzhled a chování celé stránky (nebo dokonce více stránek v případě externího stylopisu). Tři různé způsoby, jak psát stylopis - Interní stylopis - stylopis se umístí přímo do HTML souboru do hlavičky stránky, tj. do elementu tvořeného tagem head. Jakákoliv změna ve stylopisu se projeví změnou chování nebo vzhledu této jediné stránky. - In-line stylopis - stylopis se umístí jako atribut do tagu, který chceme formátovat. Změna ve stylopisu se projeví změnou chování nebo vzhledu pouze toho elementu, který je vytvořen tímto tagem. Jeho použití se nedoporučuje, neboť popírá některé principy, kvůli kterým bylo CSS zavedeno, nicméně někdy se mu nevyhneme. - Externí stylopis - stylopis se umístí do externího souboru, kterému dáme koncovku css. Do hlavičky HTML dokumentu, který bude tohoto stylopisu využívat, vložíme na externí CSS soubor odkaz. Změna ve stylopisu se najednou projeví na všech stránkách, v jejichž hlavičkách je na tento stylopis odkaz. V současnosti je to jediný doporučovaný způsob, jak ostylovat HTML dokument. Interní stylopis selektor selektuje ze stránky všechny objekty tvořené tagy h2 Budeme chtít přebarvit hlavní nadpis stránky namodro a všechny nadpisy druhé úrovně načerveno bez ohledu na to, kolik jich na stránce bude. Kdybychom měli vystačit s prostředky HTML, museli bychom udělat ve stránce změny na tolika místech, kolik je ve stránce dotyčných nadpisů. V případě nového požadavku na jinou barvu by se všechno opakovalo.. CSS umožňuje zadefinovat, jak se bude dotyčný tag projevovat, ať už je na stránce použit kdekoliv a kolikrát chce.. Základní pojmy (týkají se každého druhu stylopisu): h2 {color: red; a přiřazuje jim červenou barvu vlastnost hodnota stylopis středník je oddělovač, za kterým může následovat další CSS vlastnost

28 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>první pokus s CSS</title> <style type="text/css"> h1 {color: blue; h2 {color: red; </head> </style> interní stylopis <body> <h1>hlavní NADPIS</h1> <p>tady bude nějaký text v odstavci..</p> <h2>kapitola 1</h2> <p>tady bude nějaký text 1. kapitoly..</p> <h2>kapitola 2</h2> <p>tady bude nějaký text 2. kapitoly..</p> </body> </html> Výsledek v prohlížeči <body> In-line stylopis <h1>hlavní NADPIS</h1> Chceme, aby konkrétní odstavec vybočoval z obvyklého vzhledu tím, že bude mít jinou šířku než ostatní a bude vhodným způsobem orámován. Kdybychom měli vystačit s prostředky HTML, museli bychom text tohoto odstavce umístit do tabulky a tu vhodně naformátovat. Všimněte si, že CSS podstatně převyšuje formátovací možnosti obyčejného HTML. <p style="width: 300px; border: 1px red dotted;"> Tady bude nějaký úvodní text.. Tady bude nějaký úvodní text.. Tady bude nějaký úvodní text.. </p> <h2>kapitola 1</h2> <p>lorem ipsum dolor sit amet, consec adipiscing elit. Praesent posuere, pulvinar blandit, urna mattis, non suscipit sapien interdum tortor.</p> <h2>kapitola 2</h2> <p>mauris placerat, dolor congue vulputate, massa imperdiet orci, porta lorem neque velit. In et velit dolor sodales blandit ac et est.</p> </body> </html> in-line stylopis Výsledek v prohlížeči

29 Externí stylopis Externí soubor se stylopisem můžeme vyrobit v jakémkoliv textovém editoru (např. v NotePadu) nebo použijeme vhodnější nástroj, např. utilitu TopStyle, která je integrována přímo v HomeSite. název a umístění HTML souboru název a umístění CSS souboru vložení externího stylopisu seznam CSS vlastností Předběžný pohled na výsledek

30 Odkaz na soubor s externím stylopisem Užitečné odkazy: Doporučený způsob práce s CSS vytváření a úpravy externího stylopisu + aktualizace CSS souboru vytváření a úpravy HTML kódu předběžný pohled na výslednou stránku

31 CVIČENÍ WWW1 (PWA1) č. 12 Obecné zásady pro práci s CSS Jaké DTD zvolit už při zakládání HTML dokumentu? - Mnoho vážných problémů s CSS nám odpadne, když zajistíme přepnutí cílového prohlížeče do módu STANDARD. Prohlížeč přepnutý naopak do QUIRK módu se totiž chová jako jeho starší verze a tudíž nemusí znát mnohá pravidla CSS. Navíc v případě IE by se naše stránka vykreslovala i s anomáliemi, které jsou pro starší verze IE typické. - Přepnutí drtivé většiny moderních prohlížečů do módu STANDARD zajistíme použitím DTD 1 Tímto DTD však dáváme prohlížeči na vědomí, že stránka bude psána podle STRICT specifikace. Aby byly naše stránky validní, musíme pak striktně dodržovat pravidla pro vzájemné oddělení obsahu HTML dokumentu od jeho formy + další zásady, které z těchto pravidel vyplývají. To může být někdy obtížné např. všechno formátování už musíme dělat přes CSS a ne HTML značkami. Dobrou zprávou je, že i když tato pravidla porušíme, prohlížeč zůstane přepnut do STANDARD módu, stránky pouze nebudou validní. - Prohlížeč můžeme přepnout do módu STANDARD také pomocí následujícího DTD. 2 Tímto DTD dáváme prohlížeči na vědomí, že stránka bude psána podle TRANSITIONAL specifikace. Udržovat takto napsaný dokument jako validní je mnohem snadnější a navíc máme jistotu správného zobrazování stránky, protože prohlížeč pracuje v STANDARD módu. Z praktických i pedagogických důvodů budeme upřednostňovat DTD 1. Toto DTD lze vyrobit jednoduchou editací šablony nabídnuté HomeSite po spuštění programu (umazáním slovíčka Transitional včetně mezery před ním). Pozn.: Pokud bychom potřebovali otestovat stránku v QUIRK módu (např. chceme odhadnout, jak se stránka bude chovat ve starší verzi IE), stačí jakkoliv porušit DTD, např. umazat písmenko D v DOCTYPE.

32 Jak zobrazit vazby mezi prvky HTML dokumentu? - vazby mezi objekty HTML dokumentu se dají graficky znázornit jako stromová struktura, - pro úspěšné použití CSS je znalost stromové struktury stránky velkou pomocí. Ukázka v prostředí HomeSite: Vše vyrůstá z objektu HTML, který je kořenovým neboli ROOT elementem. Všechny elementy tvořící obsah stránky jsou obsaženy v elementu BODY, který je vzhledem k nim předchůdcem (ancestor) a ony jsou vzhledem k němu následníky (descendant). Vzájemně nejbližší předchůdci a následníci jsou vůči sobě rodiči (parent) a dětmi (child). Vztah parent-child lze vysledovat např. u dvojic elementů UL - LI, LI - STRONG, BODY H1 aj.

33 Obsah stránky (BODY) je možno pro větší přehlednost nakreslit takto: BODY rodič - dítě H1 P P H2 UL P rodič - dítě předchůdce - následník EM STRONG STRONG LI LI LI STRONG STRONG STRONG STRONG STRONG STRONG STRONG sourozenci Některé prohlížeče umožňují zobrazit stromovou strukturu HTML dokumentu. IE od verze 8 má v sobě pro tyto účely tzv. Nástroj pro vývojáře, který se spouští klávesou F12. Pro FireFox existuje rozšíření pro vývojáře FireBug, Na obrázku je postup při spuštění podobné utility v prohlížeči Google Chrome. Utilitu vyvoláme přes pravé tlačítko myši a vybereme volbu Zkontrolovat prvek.

34 Po stromové struktuře můžeme cestovat a studovat všechny elementy a jejich vlastnosti. Prvek, na kterém máme zrovna kurzor myši, se ve stránce vysvítí.

35 Jak selektovat prvky ze stránky a pak je stylovat - typy selektorů a jejich použití Selektor seznamu - Máme přebarvit na žluto pozadí všech nadpisů H1 a H2. Potřebný selektor se složí ze selektorů pro H1 a H2 oddělených čárkami: Selektor následníka Selektor dítěte h1, h2 {background-color: yellow; - Máme přebarvit na červeno pozadí jen těch prvků STRONG, které jsou v seznamech UL. Potřebný selektor se složí ze selektorů pro UL a STRONG, mezi které vložíme mezeru: ul strong {background-color: red; - Máme přebarvit na zeleno pozadí jen těch prvků STRONG, které jsou přímými následníky prvků EM (tj. dětmi, mezi nimi a EM už není žádný prvek). Potřebný selektor se složí ze selektorů pro EM a STRONG, mezi které vložíme značku větší než : Selektor nejbližšího mladšího sourozence em > strong {background-color: green; - Máme přebarvit šedou barvou pozadí jen těch odstavců P, které jsou hned za nadpisy H2 (všechny H1, H2 a P a UL na obrázku jsou sourozenci, prvek uvedený v dokumentu dříve je starší). Potřebný selektor se složí ze selektorů pro H2 a P, mezi které vložíme značku + : h2 + p {background-color: gray; BODY H1 P P H2 P P UL H2 P P P P EM EM STRONG LI LI LI STRONG STRONG FONT STRONG STRONG STRONG STRONG STRONG STRONG STRONG Selektor dítěte a selektor nejmladšího sourozence podporuje IE až od verze 7. Pokud bychom při psaní stránky zvolili takový DTD, který by prohlížeč přepnul do QUIRK módu, tyto selektory by nefungovaly ani ve vyšších verzích IE (prohlížeč zestárne a tyto prvky nezná..). Problematika selektorů je mnohem širší, více na Test prohlížeče na to, jak zvládá určité typy selektorů, lze najít na

36 Validace dokumentu s kaskádovými styly - lze použít odkaz na CSS validátor uvedený na adrese - lze použít přímý odkaz na CSS validátor - na stránkách CSS validátoru se seznamte s volbou Další možnosti a s rozbalovací nabídkou Profil, - nastudujte si historii CSS, seznamte se s verzemi CSS a s jejich podporou v dnešních prohlížečích. Užitečné odkazy:

37 CVIČENÍ WWW1 (PWA1) č. 13 Zásady pro psaní HTML podle STRICT specifikace Používání DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> vede k tomu, že cílový prohlížeč bude přepnut do režimu STANDARD (a to právě potřebujeme pro minimalizaci problémů s vykreslováním stránky v CSS). Současně nás však tato deklarace zavazuje k tomu, že budeme HTML dokument psát podle striktních zásad, na kterých stojí moderní web (STRICT specifikace). Aby byly naše stránky validní podle STRICTu, musíme splnit přísnější podmínky než u deklarace TRANSITIONAL. Zde jsou hlavní zásady, které nám v tom pomohou: - Všechny přestupky proti TRANSITIONAL deklaraci jsou zároveň přestupky proti STRICTu. - Zákaz používání jakékoliv kombinace HTML značek a atributů pro formátování vzhledu a chování stránky to vše už musíme dělat pomocí CSS. - Příkladem formátovacího elementu, který je ve striktní deklaraci zakázán, je CENTER nebo FONT <center>toto má být vycentrováno</center> <font>toto je nevalidní, i když se formátuje přes CSS</font> Dalšími příklady elementů zakázaných podle STRICTu jsou dnes již zapovězené prvky STRIKE, U a další (je možno vyzkoušet ve validátoru). - Příkladem zakázaného formátovacího atributu je align nebo bgcolor: <p align= center >Toto má být vycentrováno</p> <body bgcolor= silver >Tady bude obsah stránky</body> - Řádkové elementy nesmí být přímo v BODY, ale musí být vnořeny do některého blokového prvku. - Přirozenými stavebními prvky obsahu jsou odstavce P. Všechen běžný textový obsah by měl být strukturován do odstavců, tj. měl by být vnořen do prvků P. - Přímo v BODY nesmí být žádné další řádkové elementy obrázky, odkazy, elementy vytvářející fyzické a logické styly atd.: <body> <a name= top ></a> Takhle přímo v BODY se nesmí povalovat <strong>žádný</strong> text. <img src= logo.gif alt= Logo width= 320 height= 200 >.. </body> Drobné poznámky k psaní CSS - Řádkové elementy si své rozměry vydobudou samy svým obsahem (např. šířka věty je dána počtem znaků atd.), proto nemá smysl zadávat jim rozměry přes CSS (šířka, výška). Starší verze IE se vám při vykreslování stránky přesto snaží vyhovět a to vede k problémům. CSS validátor na tuto logickou chybu nereaguje. - Ne všechny barvy můžete zadat v CSS pomocí názvu barvy, nižší verze CSS to považují za nevalidní.

38 Logické členění obsahu stránky - Pro logické členění obsahu formátovaného pomocí CSS jsou určeny HTML elementy DIV a SPAN. - DIV je neutrální blokový element: <div id= levy_panel > Tady může být celý kus stránky, který bude mít zvláštní formátování přes CSS. V DIVu může být obsažen jakýkoliv HTML element, tedy i další DIV. </div> - SPAN je neutrální řádkový element: Tady je kousek textu a <span id= zvyrazneni >tady je jeho pokračování, které bude mít zvláštní formátování přes CSS</span>. SPAN je řádkový element, proto do něj nesmíme uzavírat žádné blokové prvky. - Stránku s řádkovými prvky umístěnými přímo v BODY lze udělat validní ve STRICTu např. tímto způsobem: <body> <div id= obalka > <a name= top ></a> Záložka jménem top, tento text i následující obrázek už neleží přímo v BODY, ale jsou vnořeny do blokového elementu DIV. Jedná se tedy o <strong>validní</strong> zápis i podle STRICT deklarace. <img src= logo.gif alt= Logo width= 320 height= 200 >.. </div> </body> Neutrální kontejnery by se měly používat pouze k tomu účelu, ke kterému jsou určeny k rozdělení obsahu stránky na logické celky, které se následně formátují přes CSS. Snažíme se výskyt DIVů a SPANů minimalizovat na skutečně nevyhnutelné případy, kdy se bez nich neobejdeme (vytváření efektů rámů, plovoucího obsahu aj.). Na obrázku je ukázka použití DIVů celá stránka je vnořena do obálky, která může být pomocí CSS speciálně vybarvena, dostane rozměry a určíme její chování vůči oknu prohlížeče. Obsah této obálky můžeme dále rozčlenit na 3 panely, jejichž vlastnosti také definujeme pomocí CSS. BODY DIV id= obalka DIV id= levy_panel DIV id= stred DIV id= pravy_panel Obsah levého panelu Obsah prostředního panelu Obsah pravého panelu Zneužívání DIVů a SPANů je častým nešvarem, který vede ke vzniku problematického stylu popsanému např. na

39 Vývojové pomůcky pro práci s CSS Rozšíření FIREBUG pro FireFox - jde o rozšíření poskytující přístup k detailním informacím o tom, jak pracuje prohlížeč se zdrojovým kódem stránky, - umožní nám pochopit fungování dědičnosti v HTML stromu, poskytne nám detailní přehled o vlastnostech prvků na našich stránkách, graficky nám ukáže formátovací modely ke každému prvku aj., - doplněk instalujeme klasicky z prostředí FireFoxu z nabídky Nástroje Správce doplňků nebo přímo z adresy - doplněk aktivujeme z prostředí FireFoxu klávesou F12 nebo pomocí příslušných ovládacích prvků (pravým tlačítkem myši a volbou Zkoumat prvek, ťuknutím na ikonku ve stavovém řádku aj.) Aplikace FastStone Capture - jde o aplikaci, jejíž primární funkcí je snímání nejrůznějších výřezů obrazovky a jejich následné konverze do různých grafických formátů. Aplikace má v sobě navíc utilitky užitečné pro webdesignéra - lupu pro detailní zkoumání obrazovky, - kapátko pro analýzu a snímání barev a - pravítko pro měření rozměrů objektů na obrazovce.

40 Formátování písma - U písma se dá pomocí CSS určovat - definice písma (druh fontu neboli rodina písma), - vzhled (styl) písma, - varianta písma, - tučnost písma, - velikost písma, jeho šířka a další vlastnosti. Vlastnost font a všechny její následující podvlastnosti navigují prohlížeč, jak skládat text z fontů, které jsou nainstalovány na klientském počítači. Definice písma - druh fontu Fonty se dělí do těchto základních tříd: Patkové - Serif - (Times New Roman, MS Georgia) Bezpatkové - Sans-Serif - (MS Arial, MS Verdana, Helvetica) Strojové - Monospace - všechna písmena jsou stejné šířky, tzv. písmo neproporcionální neboli písmo psacího stroje (Courier, MS Courier New) Ozdobné - Fantasy - (Alpha Geometrique, Critter, Cottonwood, FB Reactor) Kurzíva - Cursive - podobné ručnímu nebo skloněnému písmu (Comic Sans MS, Caflisch Script, Adobe Poetica) body { prohlížeč hledá na počítači nainstalovaný font podle seznamu zleva doprava font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; h1,h2 { font-family: Georgia, serif; Nastudujte si z níže uvedených odkazů typické použití patkových a bezpatkových písem které se hodí na prostý text, které na nadpisy apod. Prostudujte si případy pro typické použití strojového písma. nezapomenout uvést nakonec základní třídu fontu poslední záchrana Vyberte si písma, která budete na svých stránkách preferovat, a vezměte v potaz kritéria doporučovaná v odkazech (čitelnost písma, všeobecná rozšířenost fontu, ne příliš mnoho různých fontů apod.). Písma si odzkoušejte na pokusné stránce vytvořením vlastního stylopisu, který přiřadí různé fonty textu obsaženému v odstavcích a textu v nadpisech. Užitečné odkazy: - dobrý úvod, přehled, doporučení, - obecné zásady, kombinování písem, - jak který font vypadá, - praktické rady, podrobný přehled, - seriál o stylování písma přes CSS.

41 CVIČENÍ WWW1 (PWA1) č. 14 Dědičnost a kaskáda V HTML stromech jsou některé vlastnosti dědičné (a některé dědičné nejsou). Není-li vlastnost definována stylopisem, výchozí hodnotu jí přiřadí prohlížeč. Hodnota dědičné vlastnosti se dědí od rodičovského prvku a přebíjí výchozí hodnotu. Hodnota přiřazená stylopisem přebíjí výchozí i zděděnou hodnotu. /* Žádný stylopis, body { body { všechny vlastnosti color: color: prvků mají prohlížečem olive olive p { přiřazeny výchozí color: hodnoty, např. color: # */ BODY red BODY P P P Výsledná hodnota vlastnosti prvku je dána kombinací dědičnosti a kaskády stylopisných pravidel. Přesný algoritmus není jednoduchý, proto velmi zjednodušeně: vlastnosti přidělené stylopisem mají přednost před vlastnostmi zděděnými, jsou-li v konfliktu dvě pravidla stylopisu, vítězí poslední z pravidel (poslední karta přebíjí vše..), konkrétnější pravidlo má přednost před méně konkrétním. body { color: olive BODY ul { color: gray p b { color: red P UL UL P B LI LI LI LI LI LI I b { color: B B B blue Olivovou barvu textu zdědí všichni potomci BODY, tj. všechny prvky stránky. Šedou barvu textu zdědí všichni potomci UL. Modrou barvu textu získají všechny prvky B. Prvek B, který je potomkem prvku P, získá nakonec červenou barvu textu. Tady se uplatňuje pravidlo konkrétnější pravidlo vítězí (selektor p b je konkrétnější než selektor b). Nezáleží na pořadí těchto dvou selektorů ve stylopisu.

42 Procvičování dědičnosti, kaskády a dosud probraných vlastností písma Připravte si HTML kód se stromovou strukturou podobnou stromu z předchozího obrázku. Proveďte link na soubor s externím stylopisem, který prozatím ponechte prázdný. Stránku si zobrazte ve Firefoxu s nainstalovaným doplňkem FireBug. Pomocí doplňku FireBug zjistěte, jaký druh písma přiřadil prohlížeč jednotlivým prvkům na stránce. Prohlídněte si výchozí hodnoty i jiných vlastností než font-family. Skutečné hodnoty přiřazené vlastnostem každého prvku najdete v záložce Panel-computed. Pomocí záložky Panel-computed prozkoumejte, čím se liší výchozí vlastnosti nadpisů H1, H2,.. od vlastností obyčejného textu. Pomocí stylopisu změňte druh písma prvku BODY na některé bezpatkové a přesvědčte se, že vlastnost fontfamily je dědičná (záložka Styly). Pomocí stylopisu změňte druh písma nadpisů na některé patkové a v záložce Styly sledujte přerušení toku dědičnosti. Procvičte si na stromové struktuře různé druhy selektorů ve spojení s dalšími vlastnostmi textu, které už znáte barva písma color a barva pozadí background-color. Přesvědčte se, že všechny tyto vlastnosti kromě background-color jsou dědičné. Pozorujete nějaký rozdíl mezi tím, když stylujete dědičné vlastnosti prvku BODY nebo HTML? Vyzkoumejte, zda lze pomocí stylopisu ovlivnit vlastnosti písma v titulku stránky (barva, typ písma, pozadí písma). Vzhled (styl) písma Stylopis rozšiřte o další dědičnou vlastnost font-style, která upravuje sklon písma. Vyzkoušejte všechny tři povolené hodnoty: normal výchozí hodnota, znamená přirozený sklon písma (vyzkoušejte také na prvcích I a EM), italic nahradí dané písmo jeho verzí s kurzívou; není-li k dispozici, prohlížeč skloní písmo sám, obligue uměle skloněný text (zjistěte skutečnou hodnotu této vlastnosti u prvků I a EM).

43 Varianta písma Stylopis rozšiřte o další dědičnou vlastnost font-variant, která umožňuje vykreslovat normálně zadaný text buď normálně nebo tzv. kapitálkami. Některé prohlížeče tuto vlastnost neovládají. Vyzkoušejte: normal výchozí hodnota, znamená normální variantu písma, small-caps kapitálky, tj. text se nahradí velkými písmeny. Malá písmena se od velkých odliší tím, že jsou o trochu nižší. Tučnost písma Stylopis rozšiřte o další dědičnou vlastnost font-weight, která umožňuje řídit tučnost písma (jeho váhu ). Vyzkoušejte: normal, bold, bolder, lighter výchozí hodnota je normal a bold je tučně. Hodnoty bolder a lighter nemusí být správně vykresleny (ne každé písmo disponuje těmito variantami tučnosti), čísla 100, 200, 300, 400, 500, 600, 700, 800, 900 číselně odstupňovaná tučnost, větší číslo znamená tučnější písmo. Samo písmo musí tyto varianty tučnosti obsahovat, většinou to v praxi nefunguje. Velikost písma Stylopis rozšiřte o další dědičnou vlastnost font-size, která umožňuje řídit velikost písma. Vyzkoušejte: xx-small, x-small, small, medium, x-large, xx-large absolutní hodnoty. Výchozí hodnota prohlížeče pro neformátovaný text je medium, toto si však může uživatel změnit, smaller, larger relativní hodnoty, pomocí nich se dá zvětšovat nebo zmenšovat písmo po stupnici absolutních hodnot (larger udělá z hodnoty small hodnotu medium atd.), číselné vyjádření velikosti písma v příslušných jednotkách px (pixely), pt (typografické body), em (čtverčíky neboli šířka velkého písmene M), ex (výška malého písmena x), mm (milimetry), cm (centimetry), pc (pica), in (palce), % (procenta z velikosti rodičovského prvku). Nejčastěji se pro účely prezentace stránky na stínítku obrazovky používají tučně zvýrazněné jednotky.

44 Užitečné odkazy: Zkrácená varianta deklarace písma v CSS Místo font-family: serif; font-size: 15px; font-style: italic; font-variant: small-caps; font-weight: bold; se dá použít zkráceného zápisu font: italic small-caps bold 15px serif; Musí být dodrženo uvedené pořadí vlastností písma. Povinné jsou v tomto zkráceném zápisu pouze velikost (font-size) a rodina písma (font-family), ostatní se mohou podle potřeby vynechat. Užitečné odkazy: Délkové jednotky v CSS Pixel (picture element) je obrazový bod. Z pixelů se tvoří vizuální podoba dokumentu na stínítku obrazovky, na promítací stěně, na papíru při tisku. Velikost pixelu je dána typem zobrazovacího zařízení a podmínkami jeho provozu. Příklady: Velikost pixelu na stínítku monitoru je dána aktuálním nastavením monitoru, např. jeho rozlišením. Pokud upravujeme příslušnými ovládacími prvky geometrii obrazu, např. jeho šířku a výšku, měníme také velikost pixelu. Zoomováním obrazu promítaného dataprojektorem na plátno nebo přibližováním a oddalováním projektoru od promítací stěny se podstatně mění velikost pixelu. U tiskáren je velikost pixelu dána konstrukcí tiskárny a požadovanou kvalitou tisku v DPI. Pixel je tedy relativní délková jednotka vztažená vždy ke konkrétnímu zobrazovacímu zařízení. Přepočet mezi pixely a absolutními délkovými jednotkami jako např. centimetry, milimetry a palci obecně není možný a může se vztahovat pouze na konkrétní situaci. Námět na společnou práci v laboratoři: Nastavte stylopisem velikost písma kořenového prvku dokumentu dle vlastní volby v pixelech (např. 20px) body {font-size: 20px; a ověřte skutečnou velikost písma na obrazovce monitoru a na promítací stěně pro dataprojektor. Velikosti určete v pixelech a v milimetrech. Na promítacím plátně jsou pixely dobře viditelné a lze je spočítat, pro zjišťování délek na monitoru použijte utilitu Pravítko z FS Capture. Pomocí fotoaparátu zhotovte snímek detailu písma z promítací stěny a sejměte makrosnímek z monitoru. Pokuste se zjistit, co přesně velikost fontu znamená a jak se měří. Užitečné odkazy:

45 Pixel na monitoru je vysoký asi 0,26mm..... a na promítací ploše dataprojektoru může mít třeba 5mm.

46 CVIČENÍ WWW1 (PWA1) č. 15 Relativní délková jednotka em Délka 1em je odvozena od šířky velkého písmena M. Z historických důvodů je dnešní pojetí výšky písma totožné s šířkou velkého M, takže stylopis body {font-size: 1em znamená, že velikost písma ponecháváme na stejné hodnotě, jakou mu přidělil prohlížeč, tj. na výchozí hodnotě např. 16px. Zápis body {font-size: 0.8em znamená, že velikost písma měníme na 0,8 16 = 12, 8 px. body { font-size: 20px p { font-size: 0.8em b { font-size: 1.1em 20px x 0,8 = BODY P 16px UL P 16px x 1,1 = B LI LI LI I 17,6px B B B 20px x 1,1 = 22px 20px x 0,8 = 16px 16px dědí se vypočtená hodnota, nikoliv 0.8em V případě rozměrů udávaných v relativních jednotkách se dědí vypočtené hodnoty, nikoliv původní relativní hodnoty. To má dobrý důvod. Kdyby tomu tak nebylo a element I by zdědil od odstavce P místo vypočtené hodnoty 16px hodnotu 0,8em, písmo by se dále zmenšilo na 0,8 16 = 12, 8 px a s každým dalším zanořeným elementem by bylo stále menší a menší. Rozměry udávané v procentech % se vztahují k rozměrům rodičovského prvku. Platí 1em = 100% 1.1em = 110% 0.75em = 75% Užitečné odkazy:

47 Sazba písma Jak vypadá řádek - jak se měří výška písma příklad pro font-size: 30px 30px - výška řádku se udává jako násobek výšky písma. Příklad pro řádkování 2 line-height: 2; nebo line-height: 200%; nebo line-height: 2em 2x30px=60px line-height: 1.5; nebo line-height: 150%; nebo line-height: 1.5em 1.5x30px=45px line-height: 1.2; nebo line-height: 120%; nebo line-height: 1.2em 1.2x30px=36px - toto je výchozí hodnota běžných prohlížečů nejmenší řádkování, při kterém ještě do sebe nezasahují sousední řádky. line-height: 1; nebo line-height: 100%; nebo line-height: 1em 1x30px=30px - sousední řádky do sebe zasahují. Pokud má text nastaveno barevné pozadí jako na ukázce, dochází k přemazávání písma pozadím spodního řádku. Alternativní zadávání řádkování font: 30px/1.5 serif Užitečné odkazy:

48 Kouzla s textem Následující vlastnosti se přiřazují převážně blokovým elementům, příp. elementům HTML a BODY a řídí chování textů v nich obsažených: - vodorovné zarovnání textu, - odsazení prvního řádku odstavce, - dekorace textu, - transformace textu, - vertikální zarovnání, - prostrkání textu, - bílé mezery Vodorovné zarovnání textu Stylopis pro cvičný HTML text rozšiřte o dědičnou vlastnost text-align, která upravuje vodorovné zarovnání textu vůči nadřazenému blokovému elementu. Vyzkoušejte všechny čtyři povolené hodnoty, které už znáte z HTML - left, right, center a justify. Odsazení prvního řádku odstavce Vyzkoušejte další dědičnou vlastnost text-indent, která umožňuje odsadit první řádek textu. Vyzkoušejte hodnoty zadávané v relativních jednotkách em, ex, % (z čeho se berou procenta?) a px. Které jednotky lze použít, když chceme odsadit první řádek o předem známý počet znaků? Dekorace textu Vyzkoušejte další (částečně) dědičnou vlastnost text-decoration, která umí podtrhávat, nadtrhávat, přeškrtnout nebo rozblikat text hodnotami underline, overline, line-through a blink. Všechny čtyři hodnoty lze libovolně kombinovat, např. text-decoration: underline overline; Hodnotu blink, prosím, nepoužívejte, stránky pak vypadají jako pozvánka do cirkusu. Vlastnost text-decoration se dá použít i na řádkové elementy, v tomto případě ale není dědičná. Vyzkoušejte, podle čeho se prohlížeč řídí při výběru barvy dekorační čáry. Transformace textu Vyzkoušejte další (částečně) dědičnou vlastnost text-transform, která transformuje zdrojový text na velká, malá písmena a na kapitálky hodnotami uppercase, lowercase a capitalize. Vlastnost text-transform se dá použít i na řádkové elementy, v tomto případě ale není dědičná. Výchozí hodnotou je none. Svislé zarovnání Stylopis pro cvičný HTML text rozšiřte o vlastnost vertical-align, která upravuje svislé zarovnání textu vůči řádku. Vyzkoušejte hodnoty baseline, sub, super,top, text-top, middle, bottom a textbottom. Vlastnost není dědičná.

49 Prostrkání textu Stylopis rozšiřte o další dědičné vlastnosti word-spacing a letter-spacing které umožňují měnit vzdálenosti mezi slovy a mezi jednotlivými znaky (tzv. prostrkání slov nebo písmen). Předpisem word-spacing: 0.1em; letter-spacing: 1em; přidáváme hodnotu 0.1em k výchozí vzdálenosti mezi slovy a 1em k výchozí vzdálenosti mezi znaky. U této vlastnosti nelze použít procenta. Bílé mezery Je libovolná posloupnost mezer, tabelátorů a dalších řídicích znaků pro odřádkování ( enter ) v HTML kódu stránky. Vlastnost white-space určuje, jak se tyto znaky projeví v prohlížeči. Hodnoty: normal chování odpovídající HTML, tzn. série mezer se smrskne do 1 mezery a ostatní řídicí znaky (tabelátory, konce řádků aj.) se ignorují, nowrap mezery se stahují do 1 mezery, text se však na konci okna prohlížeče neláme na druhý řádek. Stránku pak musíme ovládat vodorovným posuvníkem. Pro normální účely nepoužitelné. pre blok se chová stejně jako HTML element PRE, tj. prohlížeč dodržuje veškeré formátování zdrojového textu včetně sérií mezer, tabelátorů, konců řádků apod. Užitečné odkazy: Výplně řádkových elementů Řádkovým elementům můžeme nastavit barevnou výplň a {background-color: #CCFFFF nebo vyplnit jejich pozadí obrázkem a {background-image: url(pozadi.jpg) Název obrázku spolu s případnou cestou k němu může být uzavřen v uvozovkách nebo v apostrofech. Větší obrázek bude ořezán na velikost odpovídající textovému obsahu prvku, malý obrázek bude naopak použit jako tapeta. Pro kombinaci vlastností podkladu lze použít zkrácené formy a {background: yellow url(pozadi.jpg) Další chování obrázku na pozadí bude probráno ve spojitosti s formátováním blokových elementů.

50 Rámečky kolem řádkových elementů Řádkovým elementům můžeme nastavit rámečky strong {border-style: double; border-width: 3px; border-color: red nebo zkráceně strong {border: double 3px red Na tom, v jakém pořadí hodnoty uvedeme, nezáleží. Všimněte si, že šířka bočních hran rámečku zvětšuje celkovou šířku textu, kdežto na výšku řádku rámeček nemá vliv. Proto se může stát, že rámeček zasahuje do sousedních řádků. Všimněte si, jak se chová rámeček kolem textu, který je přerušen koncem okna prohlížeče. Prostudujte si další možnosti, které pro styly rámečků nabízí CSS (solid, dotted, groove, inset, outset, ridge,..). Další možnosti rámečků probereme ve spojitosti s okraji blokových elementů. Vnitřní okraje řádkových elementů Odstup textového obsahu od rámečku lze řídit pomocí vlastnosti padding em {padding: 5px Pokud rámeček chybí, odstup se počítá ve vodorovném směru od obklopujícího textu. Před prvek i za prvek se vloží navíc prázdný prostor o délce paddingu. Další možnosti paddingu probereme ve spojitosti s blokovými elementy.

51 CVIČENÍ WWW1 (PWA1) č. 16 Identifikátory HTML elementům lze přiřadit jednoznačná jména, tzv. identifikátory. <h1>hlavní nadpis stránky</h1> <p id= motto > identifikátor Tady je text, který slouží jako úvodní průpovídka. Bla bla bla,...atd. </p> <p> Tady je text dalšího odstavce. </p> STYLOPIS: p#motto{ font-size: 0.8em; font-style: italic; width: 50%; Na stránce nemohou být dva různé elementy s identifikátorem stejného jména. Identifikátor použitý v selektoru stylopisu vybírá ze stránky právě tento jedinečný prvek v našem případě jde o konkrétní odstavec P, který má jméno motto. Protože identifikátor je na stránce jedinečný a nemůže být přiřazen ještě jinému prvku, dá se předchozí zápis zjednodušit na #motto {font-size: 0.8em; font-style: italic; width: 50%; Identifikátory se dají použít k pojmenování a následnému ostylování částí stránky vybraných pomocí neutrálních kontejnerů SPAN a DIV. Příklad na využití řádkového kontejneru SPAN - změna stylu souvislé části textu: <p> Dnešní výhra je <span id= vyhra >13592 dolarů</span> a bude.. </p> STYLOPIS: #vyhra{ font-size: 150%; font-weight: bold; color: red;

52 Příklad na využití blokového kontejneru DIV - změna stylu souvislé části stránky: <p> Toto je text nějakého odstavce. </p> <div id="paticka"> Tady bude obsah patičky.. </div> </body> </html> STYLOPIS: #paticka{ border: groove 5px blue; padding:.5em; background-color: yellow; font-weight: bold; text-align: center; Zásada snažte se redukovat počet identifikátorů i kontejnerů DIV a SPAN na skutečně nutné minimum. V následující ukázce je nadbytečný DIV, který je použit jenom z toho důvodu, že bylo potřeba pojmenovat seznam UL, protože je v něm obsažena navigace stránky a jeho formátování přes CSS bude jiné než formátování jiných seznamů na stránce. Stejného efektu je však možno dosáhnout, když pojmenujeme přímo příslušný seznam UL. <div id="menu"> <ul> <li>...</li> <li>...</li> Nadbytečný DIV <li>...</li> </ul> </div> <ul id="menu"> <li>...</li> <li>...</li> <li>...</li> </ul>

53 Třídy (class) V CSS lze vytvořit tzv. třídy a napsat k nim stylopisy. HTML element zařazený do třídy přebírá její vlastnosti. <h2 class="podtrzeny"> Kapitola 1. </h2> <p class="cerveny"> Tady bude nějaký text.. </div> <p> Tady je kousek <span class="cerveny podtrzeny"> zvýrazněného textu</span> a tady je pokračování. </p> STYLOPIS:.podtrzeny{ text-decoration: underline;.cerveny{ color: red; Do jedné třídy můžeme zařadit více elementů různého typu. Jeden a ten samý element může patřit do více tříd a z každé z nich si přibere její vlastnosti. Jeden konkrétní nadpis H2 patří do třídy podtrzeny, jeden konkrétní odstavec P zase do třídy cerveny. Jeden konkrétní kousek textu uzavřený do elementu SPAN patří do obou těchto tříd a je červený i podtržený zároveň. BODY Tento P patří do třídy cerveny Tento H2 patří do třídy podtrzeny H2 P P SPAN I Tento SPAN patří do obou tříd, tj. cerveny i podtrzeny Zásada snažte se redukovat počet tříd na skutečně nutné minimum. Příklady, jak toho dosáhnout: - výše uvedený příklad se zařazováním jednoho elementu do více tříd, - jednu třídu můžeme definovat různě pro různé prvky. Chceme např. něco zvýraznit, ale zvýraznění celého odstavce bude vypadat jinak než zvýraznění odkazu nebo zvýraznění tučného písma. Třídu zvyrazni definujeme jinak pro odstavec, jinak pro odkaz a jinak pro tučné písmo:

54 <p class="zvyrazni"> Nadále platí <b class="zvyrazni">zákaz posílání mailů</b> na adresu <a class="zvyrazni" </p> STYLOPIS: p.zvyrazni{ border: 1px solid red; b.zvyrazni { background-color: silver; a.zvyrazni { font-size: 120%; font-weight: bold; Pseudotřídy Pseudotřída je zvláštní typ třídy, která se aplikuje na prvek až tehdy, nastane-li v prohlížeči specifická situace. Pseudotřídy spojené s událostmi: STYLOPIS: Dosud nenavštívený odkaz Již navštívený odkaz a:link{ text-decoration: none; text-weight: bold; color: blue; background-color: yellow; a:visited{ color: yellow; background-color: green; Myší kurzor se vznáší nad odkazem a:hover{ color: yellow; background-color: blue; Odkaz aktivován, např. je stlačeno levé tlačítko myši a:active{ color: yellow; background-color: red; Záleží na pořadí, v jakém se pseudotřídy definují ve stylopisu, viz např. Všimněte si zvláštnosti v chování pseudotřídy :active ve starších verzích prohlížeče IE. Pseudotřídy spojené s událostmi fungují ve starších verzích IE pouze spolu s prvkem A (odkazy). Obecně se dají aplikovat na další prvky a vytvářet tak např. efekty při najetí na odstavec (p: hover{). Aby tyto efekty fungovaly v nových verzích IE, je nutné přepnout prohlížeč do STANDARDního módu volbou vhodného DTD.

55 Aplikace na pseudotřídy Jsou k dispozici tyto obrázky: ball_purple.gif ball_green.gif ball_orange.gif ball_red.gif Máte vytvořit tento efekt: Dosud nenavštívené odkazy jsou ozdobeny grafickým symbolem fialového kolečka. Po najetí kurzoru myši změní kolečka barvu na oranžovou. Při stisknutí levého tlačítka myši kolečko zčervená. Již navštívený odkaz dostane zelenou barvu. Návod: Vyrobíte HTML kód pro odkazy vedle sebe. Vypnete podtržení odkazů pomocí CSS vlastnosti text-decoration. Přebarvíte odkazy pomocí vlastnosti color. Obrázek umístíte do pozadí odkazu pomocí CSS vlastnosti background-image. Vypnete opakování obrázku na pozadí vlastností background-repeat. Umístíte obrázek do levé části odkazu a svisle ho vycentrujete vlastností background-position. Nastavíte odkazům takovou hodnotu padding-left, aby obrázek nezasahoval do levé části odkazu. Nastavíte odkazům takovou hodnotu padding-right, aby měly odkazy od sebe vhodný odstup. Nastudujte a vyzkoušejte, jak zjednodušit zápis všech vlastností pozadí do jedné CSS vlastnosti background, viz např. preview this book, str. 234 Více k použití pseudotříd nastudujte a vyzkoušejte podle

56 CVIČENÍ WWW1 (PWA1) č. 17 Box model pro blokové elementy Rozměry blokových HTML elementů se řídí podle následujícího modelu. Margin Border Padding Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. height height starší verze IE width width starší verze IE Šířka width a výška height blokového elementu se vztahují k (textovému) obsahu. Nezadáme-li rozměry v CSS, element zabere celou šířku okna prohlížeče, výška se odvodí z výšky obsahu. Starší verze IE chápou rozměry jinak (viz obrázek), což vede k závažným problémům. Chceme-li se jim vyhnout v moderních verzích IE, musíme zajistit přepnutí prohlížeče do standardního módu použitím vhodného DTD. Padding je odstup, který si drží (textový) obsah od okrajů prvku (aby obsah nebyl nalepený až na okraje). Nastavují se mu pouze rozměry. Pokračuje v něm barva pozadí prvku. Border je rámeček kolem prvku. Nastavují se mu rozměry, styl a barva. Margin je odstup, který si prvek drží od jiných prvků stránky (je to jeho privátní zóna ). Nastavují se mu pouze rozměry. Vlastnosti rámečku (border) lze zadávat zjednodušeným způsobem, tj. zadáme rozměry, styl i barvu jako seznam hodnot oddělených mezerami. Na pořadí nezáleží, prohlížeč sám pozná, co z toho je rozměr, co barva a co je styl.

57 Následující obrázek ukazuje, jak nám může pomoci při analýze rozměrů blokových elementů nástroj FireBug. margin border padding Vyzkoušejte si, jaké výchozí hodnoty vlastností padding, border a margin přiřazuje prohlížeč elementům BODY, nadpisům H1, H2,.., odstavcům P, seznamům UL, OL a jejich položkám LI, DIVům. Ověřte si pokusem, že tyto vlastnosti nejsou dědičné. Nastavte šířku a výšku konkrétnímu odstavci (např. si ho pojmenujte identifikátorem), zvolte nenulové hodnoty pro jeho padding a border a vnitřek odstavce vhodně vybarvěte. Pro začátek nastavte takovou výšku odstavce, aby se do něj veškerý text pohodlně vešel. Ověřte si, že když nezadáte styl rámečku, rámeček se nezobrazí, neboť výchozí hodnotou stylu je none. Zjistěte, jakou barvou se vybarví rámeček, když barvu nezadáte. Pro názornost zvolte styl rámečku solid a vhodně jej vybarvěte. Zjistěte, jak široký bude rámeček, když jeho šířku (border-width) nezadáte. Přepínejte prohlížeč IE mezi standardním módem a módem zpětné kompatibility a pomocí elektronického pravítka sledujte rozdíly ve vykreslování box modelu. Sledujte, jak se rozdíly prohlubují, když zvětšujete hodnoty padding a border-width. Sledujte, co se děje, když se text nevejde do předem stanovených rozměrů odstavce. Zjistěte, jak se přitom zachová IE v režimu zpětné kompatibility (bude probráno a vysvětleno dále přetékání obsahu). Užitečné odkazy:

58 Každé ze čtyř stran blokového elementu lze zadat jiné hodnoty (rozměry, barvy a styly rámečku). Pro následující ukázky je použito vlastnosti padding, stejné zásady však platí i pro border i pro margin. Výčet všech 4 hodnot v libovolném pořadí Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. STYLOPIS: p { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; Výčet všech 4 hodnot ve směru hodinových ručiček, začíná se shora 20px 5px Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. 10px 15px STYLOPIS: p { padding: 5px 10px 15px 20px; Výčet hodnot, horní levá a pravá dolní 15px 5px Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. 20px 15px STYLOPIS: p { padding: 5px 15px 20px; Výčet 2 hodnot, horní a dolní levá a pravá 15px 10px Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. Tady bude nějaký textový obsah. 10px 15px STYLOPIS: p { padding: 10px 15px; 1 hodnota společná pro všechny strany 10px Tady bude nějaký textový obsah. Tady 10px bude nějaký textový obsah. Tady bude 10px nějaký textový obsah. 10px STYLOPIS: p { padding: 10px;

59 Možnosti vykreslování rámečků Volbou vhodné kaskády CSS vlastností lze dosáhnout libovolné kombinace tloušťky, barvy a stylu na každé straně rámečku. Pokuste se vysvětlit, jak uvažuje prohlížeč při vykreslování následujících rámečků. Vyzkoušejte další zajímavé kombinace, snažte se přitom použít co nejjednoduššího stylopisu. P P P p { border: red solid; border-width: 0 3px; p { border: 3px green; border-top-style: double; p { border-color: green red; border-style: double solid; Přetékání obsahu Chování prohlížeče v případě, že obsah prvku přesáhne jeho rozměry, ošetřuje CSS vlastnost overflow. Výchozí hodnota je visible. Obsah, který se nevejde do předepsaného rámce, přeteče a zůstane viditelný (visible). STYLOPIS: p#box{ background-color: #FFEFD5; border: 1px red dotted; width: 30em; height: 10em; obsah, který přetekl.. Obsah, který přetekl rámec vymezený blokovému elementu, se překresluje přes objekty, které následují za ním (není na obrázku). Vyzkoušejte přepnutím prohlížeče do režimu zpětné kompatibility: Starší verze IE vybarvují barvou pozadí i obsah, který přetekl. Objekty, které následují, uhnou a nejsou překresleny.

60 Použijeme-li pro vlastnost overflow hodnotu auto, zabráníme přetečení obsahu do zbytku stránky a na celý obsah se dostaneme pomocí posuvníku, který se automaticky vytvoří podle potřeby. Vložte do zkoumaného boxu dlouhé slovo, které se do něj nevejde na šířku. Ověřte si, že se automaticky vygeneruje vodorovný posuvník. Zjistěte, zda se rozměry posuvníků započítávají do rozměrů width a height. Vyzkoušejte hodnoty hidden a scroll a uvažte, k čemu by se daly použít. STYLOPIS: p#box{ background-color: #FFEFD5; border: 1px red dotted; width: 30em; height: 10em; overflow: auto; Vyzkoušejte vlastnosti overflow-x a overflow-y a zjistěte na internetu, v kterých prohlížečích fungují. Procvičování tříd, pseudotříd a formátování rámečků Rozdělte odkazy na stránce na tři druhy: 1. odkazy vedoucí na externí stránky, 2. odkazy na poslání u, 3. odkazy na obrázky. Založte tomu odpovídající třídy a pseudotřídy s tím cílem, aby každý druh odkazu vypadal jinak a choval se jinak po najetí kurzoru myši. Odzkoušejte na HTML dokumentu. Inspirace: Externí odkaz Výchozí podoba odkazu Odkaz po najetí kurzoru myši Odkaz pro Odkaz na obrázek Ikonky si sežeňte na internetu, např. na nebo na školní síti dle pokynů vyučujícího (hledejte na disku I: ve složce ICONS).

61 CVIČENÍ WWW1 (PWA1) č. 18 Margin (okraj) Margin je minimální odstup od jiných objektů na stránce, který si prvek nárokuje jako svoji privátní zónu. Na každé ze 4 stran blokového prvku může být nastavena jiná hodnota. Blokové elementy uvedené v HTML kódu za sebou se na stránce vykreslí pod sebe. Aby se vyhovělo požadavkům každého z nich na privátní zónu, ve svislém směru si bloky od sebe udržují odstup, který je roven většímu z obou marginů. margin-top: 30px margin-bottom: 20px vertikální odstup 30px Margin se dá nastavit i pro celé BODY. Objekty na stránce si zachovávají odstup od okrajů okna. margin: 15px odstup od horního okraje okna 30px odstup od levého okraje okna > 15px Při umísťování blokového elementu do BODY platí pravidlo o větším marginu jen ve svislém směru, ve vodorovném směru se marginy sčítají. Vyzkoušejte přepnutím prohlížeče do režimu zpětné kompatibility: Starší verze IE zacházejí s pravidly o výsledném marginu jinak. Pro vodorovné vystředění blokového elementu vůči nadřazenému bloku se používají tzv. automatické okraje. auto 21px 21px STYLOPIS: h1 { width: 200px; text-align: center; background: Green; color: White; margin: 21px auto; okraje se dopočítají tak, aby byly stejné Automatické okraje mají význam tehdy, je-li udána šířka bloku, v opačném případě blok zabere celou šířku okna a není co středit. Samotný text by pak byl vystředěn vůči oknu stylopisem text-align: center, nikoliv automatickými okraji. Vyzkoušejte, že automatické okraje nefungují ve starších verzích IE. Nastudujte si techniky, jak na to (využití vlastnosti text-align a její nestandardní interpretace staršími verzemi IE), viz např. auto

62 Plovoucí prvky V normálním případě se HTML prvky na stránku vykreslují v tom pořadí, v jakém se nacházejí v HTML kódu. Pomocí CSS vlastnosti float to můžeme změnit, neboť můžeme některé prvky naučit plavat v řádkovém obsahu stránky. Takovým plovoucím prvkům říkáme plaváčky. Aby se prvek mohl stát plovoucím, musí mít zadánu šířku. Prvek, kterému přiřadíme do vlastnosti float hodnotu right nebo left, se stane plaváčkem a odpluje ve vodorovném směru z pozice, kterou by normálně zaujal, doprava nebo doleva, dokud nenarazí na překážku (např. okraj okna), a tam zůstane. NADPIS float: right Tady měl původné být Prvek, který je v HTML kódu uveden za ním a neumí plavat (jeho vlastnost float má výchozí hodnotu none) si plaváčku nevšímá a normálně se vykreslí, takže může zabrat stejnou část okna, ve které už plaváček je. Obsah tohoto prvku se však plaváčku vyhne a proteče kolem něho. NADPIS Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. Plaváček je blíže k uživateli a překrývá vše pod sebou, například rámeček. Vyzkoušejte si: Vytvořte v HTML 3 prázdné DIVy a pojmenujte je pomocí ID v tomto pořadí tak, jak jdou za sebou v HTML kódu: modry, zluty a cerveny. Dejte jim pomocí CSS odpovídající barvu pozadí a nastavte jim čtvercové rozměry takto: modrý 120 x 120px, červený 100 x 100px, žlutý 150 x 150px. Přesvědčte se, že čtverečky jsou naskládány na sobě v tom pořadí, v jakém jste je uvedli v HTML kódu. Udělejte ze všech tří čtverečků plaváčky, tj. definujte jim vlastnost float takto: modrý left, červený right, žlutý right. Postupně zmenšujte šířku okna prohlížeče a sledujte přeskupování plaváčků. Zadejte každému čtverečku jiné velikosti okrajů margin a prozkoumejte, jaká platí pravidla pro odstup mezi plovoucími objekty ve vodorovném i svislém směru. Zkuste si to i pro starší verze IE. Experimentujte s jinými kombinacemi rozplavání čtverečků.

63 Přidejte do HTML kódu odstavce a sledujte, jak jejich obsah protéká mezi plaváčky. Vyzkoušejte, jak jde plovoucí elementy dodatečně pozicovat všemi směry pomocí okrajů margin (tyto okraje můžete zadávat také záporné). Vyzkoušejte, že starší verze IE zdvojnásobují u plovoucích elementů okraj margin, kterým se prvek zastaví např. o konec okna viz např. Seznamte se s řešením v podobě tzv. podtržítkového hacku. Vytvořte následující konfiguraci stránky.

64 Ukončení obtékání Nechceme-li, aby některý prvek sousedil s plaváčkem a dělil se tak s ním o místo pro svůj obsah, přidělíme tomuto prvku vhodnou hodnotu vlastnosti clear. Prvek h2 s obsahem Kapitola 1 z následujícího obrázku stále sousedí s plaváčkem, ale my chceme, aby byl umístěn až pod něho. Stylopis h2 {clear: left zajistí, že h2 se nebude za žádných okolností dělit o svůj obsah s nalevo sousedícími plaváčky, tj. bude vykreslen až za nimi. NADPIS NADPIS Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. KAPITOLA 1 Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. Tady bude text, který jako kapalina obtéká plaváčka a vyplňuje prostor, který mu zbyl. clear: left KAPITOLA 1 Další možné hodnoty vlastnosti clear jsou right, both (prvek nechce mít za sousedy plaváčky z pravé ani levé strany) a none. NADPIS Poznámka k odstavci Další poznámka A opět moje poznámka Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Tady bude text. Vytvořte stránku dle výše uvedeného vzoru. Poznámky vlevo od textu jsou plovoucí elementy, které sousedí s příslušným odstavcem. Odstavce mají nastavený levý okraj tak, aby pro poznámky uvolnily místo. Pro vytvoření efektu poznámky založte třídu (class).