CVIČENÍ WWW1 (PWA1) č. 1

Rozměr: px
Začít zobrazení ze stránky:

Download "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" "http://www.w3.org/tr/html4/loose.dtd"> (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" "http://www.w3.org/tr/html4/loose.dtd"> 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="http://www.neco.cz">sem 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="http://www.atlas.cz">atlas</a></li> <li><a href="http://www.seznam.cz">seznam</a></li> <li><a href="http://www.centrum.cz">centrum</a></li> </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).

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34. Úvod do CSS Tematický okruh (ŠVP) CSS1 Vysvětlení úlohy CSS při programování www stránek Úvod do CSS VY_32_INOVACE_01_02_01 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

KASKÁDOVÉ STYLY - PÍSMO

KASKÁDOVÉ STYLY - PÍSMO KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum

Více

Internetové technologie, cvičení č. 5

Internetové technologie, cvičení č. 5 Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a

Více

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

Více

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci Název modulu: Označení: C7 Stručná charakteristika modulu Modul vznikl za účelem úvodního seznámení zájemců o problematiku tvorby moderních webových stránek podle standardů W3C. Zahrnuje základní nezbytné

Více

Zá klady HTML. Tag HTML Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

Základy HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

Více

Základní práce v souborovém manažeru

Základní práce v souborovém manažeru Základní práce v souborovém manažeru 18-20-M/01 Informační technologie Základní pojmy a prostředky pro programování webových stránek Zvládnutí nástrojů typických pro programování webových aplikací Základní

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

K 2 - Základy zpracování textu

K 2 - Základy zpracování textu Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

Kaskádové styly základy grafiky

Kaskádové styly základy grafiky 1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a

Více

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),

Více

Tvorba stránek v HTML ve Wordu

Tvorba stránek v HTML ve Wordu Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o

Více

Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ

Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ Střední průmyslová škola a Střední odborné učiliště, Trutnov, Školní 101, tel.: +420 499 813 071, fax: +420 499 814 729, e-mail: skola@spssoutu.cz, URL: http://www.spssoutu.cz Osnova kurzu OBSLUHA PC ZÁKLADNÍ

Více

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku! Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími

Více

ZŠ ÚnO, Bratří Čapků 1332

ZŠ ÚnO, Bratří Čapků 1332 TS Výuka informatiky I (ovládání textových editorů) Terasoft - možnost instalovat jeden až tři kurzy (cvičení fungují pouze s nainstalovaným vlastním editorem) : o Výuka MS Office Word 2003 o Výuka MS

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

HROMADNÉ ÚPRAVY NAJÍT A NAHRADIT

HROMADNÉ ÚPRAVY NAJÍT A NAHRADIT HROMADNÉ ÚPRAVY NAJÍT A NAHRADIT Funkce Najít a nahradit slouží k rychlému vyhledávání určitých slov a jejich nahrazování jinými slovy. Lze hledat i určité varianty slov a nahrazovat je buď hromadně (všechny

Více

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

Více

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

Výukový materiál KA č.4 Spolupráce se ZŠ

Výukový materiál KA č.4 Spolupráce se ZŠ Výukový materiál KA č.4 Spolupráce se ZŠ Modul: Téma workshopu: Výpočetní technika Co je to internet? Jak si udělat vlastní www stránku? Vypracovala: Ing. Lenka Hellová Termín workshopu: 30. říjen 2012

Více

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webu. Úvod a základní principy. Martin Urza Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

12. Základy HTML a formuláře v HTML

12. Základy HTML a formuláře v HTML 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

ZŠ ÚnO, Bratří Čapků 1332

ZŠ ÚnO, Bratří Čapků 1332 MS Excel 2002 Grada - po spuštění je třeba kliknout do středu obrazovky - v dalším dialogovém okně (Přihlášení) vybrat uživatele, zřídit Nového uživatele nebo zvolit variantu Bez přihlášení (pro anonymní

Více

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou

Více

1. Nastavení dokumentu

1. Nastavení dokumentu Obsah as a asta 2. Okno / více dokumentů otevírání, zavírání, vytváření nového, přepínání, ukládání 3. Barevný režim dokumentu 4. Zobrazení, vlastní pohledy 5. Objekty vkládání 1. Nastavení dokumentu Uprostřed

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,

Více

Tvorba internetových stránek

Tvorba internetových stránek Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/ Samostatný úkol Zvolili jste si doménu a zjistili její cenu? Nalezli jste svůj freehosting?

Více

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Základy programovacího jazyka HTML Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Název školy: Číslo a název projektu: Číslo a název šablony klíčové

Více

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Word Metodický materiál pro základní

Více

o o Autor karty a všech jejích součástí, není-li uvedeno jinak, je: Bc. Pavel Janíček

o o Autor karty a všech jejích součástí, není-li uvedeno jinak, je: Bc. Pavel Janíček Název (téma) Oblast zařazení do RVP Ročník, věková kategorie Učivo Word Test znalostí Informační a komunikační technologie IKT textové editory 14-15 let Všeobecné znalosti o Wordu Cíle (kompetence) Žák

Více

www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_19 Databáze Databáze Databáze Ing. Petr Vilímek

www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_19 Databáze Databáze Databáze Ing. Petr Vilímek VY_32_INOVACE_33_19 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Střední průmyslová škola Zlín Inovace výuky prostřednictvím ICT v

Více

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_20 Databáze Databáze Databáze Projekt II. Ing. Petr Vilímek

www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_20 Databáze Databáze Databáze Projekt II. Ing. Petr Vilímek VY_32_INOVACE_33_20 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Název Autor Vytvořeno, pro obor, roč. Anotace Přínos/cílové kompetence

Více

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako.

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Otevře se tabulka, v které si najdete místo adresář, pomocí malé šedočerné šipky (jako na obrázku), do kterého

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se.

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)

Více

ŠKODA Portal Platform

ŠKODA Portal Platform ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro

Více

Manuál k editoru TinyMCE

Manuál k editoru TinyMCE Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo,

Více

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha

Více

Práce se styly 1. Styl

Práce se styly 1. Styl Práce se styly 1. Styl Styl se používá, pokud chceme, aby dokument měl jednotný vzhled odstavců. Můžeme si nadefinovat styly pro různé úrovně nadpisů, jednotlivé popisy, charakteristiky a další odstavce.

Více

1. Začínáme s FrontPage 2003 11

1. Začínáme s FrontPage 2003 11 Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty

Více

Webová grafika, struktura webu a navigace, použitelnost a přístupnost

Webová grafika, struktura webu a navigace, použitelnost a přístupnost Webová grafika, struktura webu a navigace, použitelnost a přístupnost Martin Kuna martin.kuna@seznam.cz Obsah Webová grafika Rozvržení stránky Typografické zásady Nejčastější chyby Struktura webu a navigace

Více

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS

Více

Powerpoint pro začátečníky. Zbyněk Sušil

Powerpoint pro začátečníky. Zbyněk Sušil Zbyněk Sušil Průběh lekce Seznámení s PP Základní funkce Vytvoření nové prezentace Nejčastější chyby Zadávání a úpravy textu Přesouvání kurzoru, Výběr části textu, Kopírování / Přesun Vložení informací

Více

MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru:

MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru: MS Word základy Úvod do MS Word. Vytvoření zástupce programu na ploše. Start Programy PK na Microsoft Word Odeslat Plocha Vytvořit zástupce Otevření dokumentu a popis prostředí: Spuštění programu Start

Více

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku: Co je HTML HTML HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu

Více

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017. Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou

Více

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014 Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat

Více

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument

Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a

Více

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu.

Zobrazování bannerů podporují pouze nově vytvořené šablony motivů vzhledu. Bannerový systém ProEshop od verze 1.13 umožňuje zobrazování bannerů na popředí e-shopu. Bannerový systém je přístupný v administraci e-shopu v nabídce Vzhled, texty Bannerový systém v případě, že aktivní

Více

Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12

Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12 Obsah Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12 Kapitola 1 Než se pustíme do práce 15 Internet, web, WWW co to vlastně je? 15 Jak se tvoří internetové stránky 16

Více

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu...

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... 9 Slovo úvodem Editaci článků provádějte v prohlížeči MOZILLA FIREFOX!

Více

Vlastnosti dokumentu/stránky

Vlastnosti dokumentu/stránky Vlastnosti dokumentu/stránky Formát stránky papíru pro tisk V záložce Rozložení stránky na pásu karet najdeme vše potřebné pro přípravu dokumentu před tiskem. 1) Záložka Rozložení stránky 2) Změna Orientace

Více

ZÁKLADY POŘIZOVÁNÍ TEXTU

ZÁKLADY POŘIZOVÁNÍ TEXTU Úvod do problematiky ZÁKLADY POŘIZOVÁNÍ TEXTU Na začátku psaní je vhodné nastavit vzhled stránky. Důležitá je především orientace stránky. Můžeme si vybrat mezi uspořádáním textu na výšku stránky (většinou

Více

Microsoft Office Excel 2003

Microsoft Office Excel 2003 Microsoft Office Excel 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2014 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu Excel... 4

Více

Uživatelský manuál. Aplikace GraphViewer. Vytvořil: Viktor Dlouhý

Uživatelský manuál. Aplikace GraphViewer. Vytvořil: Viktor Dlouhý Uživatelský manuál Aplikace GraphViewer Vytvořil: Viktor Dlouhý Obsah 1. Obecně... 3 2. Co aplikace umí... 3 3. Struktura aplikace... 4 4. Mobilní verze aplikace... 5 5. Vytvoření projektu... 6 6. Části

Více

TVORBA TEXTOVÉHO DOKUMENTU PROSTŘEDKY, PŘENOSITELNOST

TVORBA TEXTOVÉHO DOKUMENTU PROSTŘEDKY, PŘENOSITELNOST TVORBA TEXTOVÉHO DOKUMENTU PROSTŘEDKY, PŘENOSITELNOST 1 Tvorba dokumentu - prostředky Psací stroj Od psaní na stroji pochází pojem normostrana Textové editory (např. T602) Slouží k tvorbě textu členěného

Více

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení

Více

Administrace webu Postup při práci

Administrace webu Postup při práci Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se...

Více

Návrh stránek 4IZ228 tvorba webových stránek a aplikací

Návrh stránek 4IZ228 tvorba webových stránek a aplikací 4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2013/12/12 20:40:58 $ Obsah Úvod... 3 Recept na dobré webové stránky... 4 Použitelnost... 5 Jak se pozná použitelný web...

Více

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4 MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY...

Více

WWW a HTML. Základní pojmy. Ivo Peterka

WWW a HTML. Základní pojmy. Ivo Peterka WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní

Více

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

Microsoft Office Word 2003

Microsoft Office Word 2003 Microsoft Office Word 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu PowerPoint...

Více

VÝPOČETNÍ TECHNIKA OBOR: EKONOMIKA A PODNIKÁNÍ ZAMĚŘENÍ: PODNIKÁNÍ FORMA: DENNÍ STUDIUM

VÝPOČETNÍ TECHNIKA OBOR: EKONOMIKA A PODNIKÁNÍ ZAMĚŘENÍ: PODNIKÁNÍ FORMA: DENNÍ STUDIUM VÝPOČETNÍ TECHNIKA OBOR: EKONOMIKA A PODNIKÁNÍ ZAMĚŘENÍ: PODNIKÁNÍ FORMA: DENNÍ STUDIUM 1. Historie a vývoj VT. Dnešní parametry PC. Von Neumannovo schéma. a. historie a vznik počítačů b. využití počítačů

Více

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603

Více

Formátování pomocí stylů

Formátování pomocí stylů Styly a šablony Styly, šablony a témata Formátování dokumentu pomocí standardních nástrojů (přímé formátování) (Podokno úloh Zobrazit formátování): textu jsou přiřazeny parametry (font, velikost, barva,

Více

Microsoft. Word. Šablony. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Microsoft. Word. Šablony. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Word Šablony Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Šablony šablona obsahuje předdefinované rozvržení dokumentu a stylů jednotlivých položek ve Wordu existují hotové

Více

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení

Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185

Více

METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS Word MÍRNĚ POKROČILÍ Formátování textu Text formátujeme (určujeme jeho vlastnosti) na pásu karet DOMŮ. U textu můžeme formátovat font, velikost písma, řez, barvu písma, barvu

Více

ROZLOŽENÍ STRÁNKY, NÁVRH. Okraje

ROZLOŽENÍ STRÁNKY, NÁVRH. Okraje ROZLOŽENÍ STRÁNKY, NÁVRH Ve Wordu tedy můžeme nastavovat vlastnosti písma, vlastnosti odstavce a také vlastnosti stránky. Přesuneme se na záložku ROZLOŽENÍ STRÁNKY, kde tyto najdeme v levé části. Další

Více

Základy WWW publikování

Základy WWW publikování Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz

Více

Mgr. Stěpan Stěpanov, 2013

Mgr. Stěpan Stěpanov, 2013 Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet

Více

Dokument a jeho části oddíly, záhlaví, zápatí

Dokument a jeho části oddíly, záhlaví, zápatí Dokument a jeho části oddíly, záhlaví, zápatí Nejčastějším úkolem bývá ukončení stránky a pokračování textu na další stránce nebo vložení stránky před napsaný text. Podobným úkolem je jiné svislé zarovnání

Více

3 Formuláře a sestavy Příklad 1 Access 2007

3 Formuláře a sestavy Příklad 1 Access 2007 TÉMA: Vytváření formulářů Správce databáze Naše zahrada předpokládá, že bude s vytvořenou databází pracovat více uživatelů. Je třeba proto navrhnout a vytvořit formuláře pro přístup k datům. Zadání: Otevřete

Více

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní

Více

WEBOVÉ STRÁNKY www.krestanskevanoce.cz

WEBOVÉ STRÁNKY www.krestanskevanoce.cz WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých

Více

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz PŘÍRUČKA KE KURZU: ZÁKLADY PRÁCE NA PC MS WORD 2003 Gabriela Janská Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz Obsah: 1. Písmo, velikost písma, tučně, kurzíva, podtrhnout

Více

APLIKACE XML PRO INTERNET

APLIKACE XML PRO INTERNET APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je

Více

Reliance 3 design OBSAH

Reliance 3 design OBSAH Reliance 3 design Obsah OBSAH 1. První kroky... 3 1.1 Úvod... 3 1.2 Založení nového projektu... 4 1.3 Tvorba projektu... 6 1.3.1 Správce stanic definice stanic, proměnných, stavových hlášení a komunikačních

Více