Právní upozornění. Další servery s elektronickým obsahem. videoprírucky.cz

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

Download "Právní upozornění. Další servery s elektronickým obsahem. videoprírucky.cz"

Transkript

1

2 Právní upozornění Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována a šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele. Neoprávněné užití této knihy bude trestně stíháno. Používání elektronické verze knihy je umožněno jen osobě, která ji legálně nabyla v rozsahu stanoveném autorským zákonem. Elektronická kniha je datový soubor, který lze užívat pouze v takové formě, v jaké jej lze stáhnout z portálu. Jakékoliv neoprávněné užití elektronické knihy nebo její části, spočívající např. v kopírování, úpravách, prodeji, pronajímání, půjčování, sdělování veřejnosti nebo jakémkoliv druhu obchodování nebo neobchodního šíření je zakázáno! Zejména je zakázána jakákoliv konverze datového souboru nebo extrakce části nebo celého textu, umisťování textu na servery, ze kterých je možno tento soubor dále stahovat, přitom není rozhodující, kdo takového sdílení umožnil. Je zakázáno sdělování údajů o uživatelském účtu jiným osobám, zasahování do technických prostředků, které chrání elektronickou knihu, případně omezují rozsah jejího užití. Uživatel také není oprávněn jakkoliv testovat, dekompilovat, zkoušet či obcházet technické zabezpečení elektronické knihy. Děkujeme že elektronické knihy nelegálně nešíříte. Podporujete tak vznik dalších elektronických titulů. Kopírování zabíjí elektronické knihy! (c) Computer Media s.r.o. Všechna práva vyhrazena. info@computermedia.cz Další servery s elektronickým obsahem videoprírucky.cz

3 OL { list-style-type : upper-alpha }.vnitrni { list-style-position : inside } 00 5px; operace s proměnnou } Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu Martin Domes Nakladatelství a vydavatelství R Vzdìlávání, které baví

4 5px; pomocí HTML, CSS a JavaScriptu Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu Autor: Martin Domes Vnitřní layout, zlom a sazba: Ing. Michal Jiříček Návrh obálky: Ing. Michal Jiříček Jazyková úprava: PhDr. Dagmar Procházková Computer Media s.r.o. Vydání první, 2005 Všechna práva vyhrazena ISBN: Žádná část této publikace nesmí být publikována a šířena žádným způsobem a v žádné podobě bez písemného svolení vydavatele. Názvy produktů a firem uvedených v knize mohou být registrovanými ochrannými známkami jejich vlastníků. Computer Media s.r.o. Hrubčická Kralice na Hané Telefon: Fax: c-media@c-media.cz URL: Kompletní nabídku literatury Computer Media s.r.o. můžete získat i objednat na internetové adrese nebo 2

5 Obsah Obsah VYSVĚTLIVKY K PRVKŮM POUŽITÝM V KNIZE...10 JAK PRACOVAT S KNIHOU? JAK JE KNIHA ČLENĚNA?...10 SLOVO AUTORA...11 ÚVODEM...14 HTML A INTERNET...15 Co to je HTML?...15 Oficiální verze HTML...15 Z historie HTML...16 PŘÍPRAVA...17 Čím začít?...17 Pravidla tvorby webu...19 Jednoduchost a přehlednost...19 Správné zobrazení...19 První stránka webu...19 Texty na webu...20 Odkazy na webu...20 Aktuálnost a zpětná vazba...20 Správný zdrojový kód a syntaxe jazyka...21 Webdesign...21 Rozlišení obrazovky...21 Grafická podoba stránek...22 Grafika a obrázky na webu...23 Zpracování grafiky pro web...24 Webové prohlížeče...24 Internet Explorer...25 Mozilla a Mozilla Firefox...26 Opera...26 Zobrazení v různých prohlížečích...26 V čem psát zdrojový kód...26 Strukturní editory...27 WYSIWYG editory...27 HTML...30 Zdrojový kód...30 Párové a nepárové značky...31 Zápis parametrů značek

6 5px; pomocí HTML, CSS a JavaScriptu Komentář ve zdrojovém kódu...32 Velikosti v HTML...33 Označení umístění objektů...33 Barvy na webu...34 Základní struktura HTML dokumentu...35 Hlavička HTML dokumentu...36 Tělo HTML dokumentu...37 Úprava textu a jeho formátování...39 Úprava textu...40 Formátování a zarovnávání textu...43 Rozdělení dokumentu horizontální linkou...47 Úprava písma...49 Speciální znaky a mezera...53 Seznamy...55 Neuspořádaný a uspořádaný seznam...56 Definiční výčet...59 Obrázky...60 Odkazy...63 Hypertextové odkazy...64 Jmenné odkazy...67 Obrázek jako odkaz...69 Další možnosti odkazů...70 Jak odkazy používat...71 Rámy...72 Tvorba struktury rámů...72 Vkládané rámy...79 Rámy a odkazy...81 Negativa spojená s rámy...85 Tabulky...86 Struktura tabulky...87 Základní definice tabulky TABLE...88 Tělo tabulky a jeho součásti TR a TD...89 Tvorba tabulek...91 Úprava rámečku tabulky...96 Rozdělení tabulky THEAD, TFOOT a TBODY Další možnosti tabulky Problematika tabulek Formuláře Definice formuláře FORM

7 Obsah Vstupní prvek INPUT Textová pole TEXTAREA Výběrová nabídka SELECT Skupina polí FIELDSET Tlačítko BUTTON Další možnosti formulářů Závěrem KASKÁDOVÉ STYLY CSS Co jsou to kaskádové styly? Standardy CSS Vývoj kaskádových stylů CSS a webové prohlížeče Syntaxe CSS Základní syntaxe Zápis selektorů Přívlastkový selektor Třídy a identifikátory Pseudotřídy a pseudoelementy Vlastnosti Poznámky ve stylech Jednotky, barvy a umístění objektů v CSS Jednotky v CSS Zápis barev v CSS Označení umístění objektů Kam zapisovat styly Zápis stylů v těle dokumentu HTML Zápis stylů stylopisem v hlavičce HTML dokumentu Zápis stylů v externím souboru Pozadí a barvy Vlastnosti písma Vlastnosti textu Prázdná mezera Rozměry, okraje, rámečky Rozměry Okraje Rámeček Vizuální formátování Rodičovský a sourozenecký element Oddíly

8 5px; pomocí HTML, CSS a JavaScriptu Blokové elementy a oddíly Řádkové elementy a oddíly Zabíhající oddíly Povaha elementu Shrnutí Umísťování Typy umístění Obsahový oddíl a zobrazovací pole Umístění do pozice Plovoucí oddíly Třetí rozměr vytváření vrstev Vzájemné vztahy vlastností DISPLAY, POSITION a FLOAT Seznamy Pseudotřídy a pseudoelementy CSS Pseudotřídy odkazů Dynamické pseudotřídy Pseudotřída prvního potomka Pseudoelementy textu Automaticky generovaný obsah Pseudoelementy BEFORE a AFTER Generování obsahu Automatické číslování Tabulky v CSS Základní vzhled tabulky Vizuální podoba tabulky Rámeček Vizuální efekty Přetečení obsahu Odstřižení elementu Viditelnost elementu Uživatelské rozhraní Kurzor Integrace systémových barev Integrace systémových fontů Tvorba dynamického obrysu JAVASCRIPT Co to je JavaScript? Kam zapisovat skript Syntaxe jazyka

9 Obsah Komentář ve skriptu Datové typy Operátory a operace s výrazy Proměnné Příkazy Podmínky Cykly Funkce Objekty Pole Události Neviditelné znaky, přerušení řádku a rozdělení kódu Speciální znaky v JavaScriptu Barvy a označení umístění objektu Programování s okny Práce s dokumentem Zpracování řetězců Datum a čas Obrázky Formuláře Zpracování údajů z formulářů Kontrola ové adresy Formátování dat a odeslání formuláře Další možnosti JavaScriptu Detekce prohlížeče Metody objektu LOCATION Metody objektu History CO S HOTOVÝMI STRÁNKAMI Využití jiných zdrojů Umístění stránek na web Umístění odkazů na stránky ZÁVĚREM REJSTŘÍK

10 5px; pomocí HTML, CSS a JavaScriptu 8

11 5px; pomocí HTML, CSS a JavaScriptu <OL start= číslo > Parametr START můžete použít pouze u uspořádaných seznamů. Je to proto, že určuje, od které položky seznam začne počítat. Více ukazuje následující příklad: <OL type= 1 start= 2 > <!-- seznam se začne počítat od dvojky --> <LI>pondělí</LI> <LI>úterý</LI> <OL type= A start= 3 > <!-- seznam se začne počítat od třetí položky --> <LI>první položka</li> <LI>druhá položka</li> <LI>třetí položka</li> </OL> <LI>středa</LI> <LI>čtvrtek</LI> </OL> Jak je vidět, seznam počítá danou jednotku seznamu od takového pořadí, které uvedeme jako hodnotu u parametru START. Svůj seznam možná teď nechcete začínat od jiného čísla než od jedničky. Ale pokud budete chtít seznam přerušit a vložit do něj například nějakou poznámku, pak můžete v další definici seznamu uvést parametr START, jenž začne počítat tam, kde jste skončili. To uvádí do praxe hned následující příklad. <OL type= 1 > <LI>Pondělí</LI> <OL type= A > <LI>první položka</li> <LI>druhá položka</li> </OL> </OL> <BLOCKQUOTE>Poznámka: Tady potřebujeme vložit poznámku.</blockquote> <OL type= 1 start= 2 > <LI>Úterý</LI> <OL type= A > <LI>první položka</li> <LI>druhá položka</li> <LI>třetí položka</li> </OL> <LI>Středa</LI> <LI>Čtvrtek</LI> </OL> 58

12 HTML jazyk a editace jeho kódu Tato praktická ukázka dokládá, že tvorbě seznamů se meze nekladou. Je samozřejmě poněkud nevšední, ale i její aplikace se na internetu vyskytuje. Pokud se vám někdy zdá, že některé elementy HTML nedokážete využít, zkuste být trpělivější a experimentujte. Možná budete překvapeni, kolik toho jednotlivé elementy HTML, zvláště ve vzájemné spolupráci, dokážou vykonat. HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Poznámka: Seznamy jsou součástí HTML již pěknou řádku let, proto se většinou nemusíte obávat, že by se v různých prohlížečích zobrazovaly jinak. Definiční výčet Kromě dvou typů seznamů, uspořádaného a neuspořádaného, si představíme ještě jeden typ seznamu. Můžeme jej nazvat definičním výčtem. Seznamy totiž můžete použít i jiným způsobem, a to k formátování textu do bloků, když potřebujete například vysvětlit nějaký pojem. K tomuto účelu poslouží právě definiční výčet. <DL> Podobně jako UL a OL je tato párová značka definicí začátku a konce definičního výčtu. <DT> Tento tag uzavírá položku výčtu, kterou označujeme jako termín či pojem. <DD> Do této značky zapisujte samotnou definici termínu, respektive pojmu. Na další stránce vidíte příklad užití definičního výčtu: Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 59

13 5px; pomocí HTML, CSS a JavaScriptu <DL> <DT><b>pojem1</b></DT> <DD> <p>v tomto odstavci je možné například vysvětlit, co znamená první pojem.</p> </DD> <DT><b>pojem2</b></DT> <DD> <p>a tady zase můžeme vysvětlit co znamená druhý pojem.</p> </DD> </DL> Množství kombinací vnořených seznamů či definičních výčtů se samozřejmě meze nekladou. Tento příklad je velmi jednoduchý, takže si sami zkuste doplnit do výčtu další vnořené výčty. Taktéž je možné kombinovat výčty s uspořádanými a neuspořádanými seznamy. Tato možnost pak vytváří ze seznamů poměrně silný nástroj pro formátování větších textových celků a dobře poslouží například i k částečnému zalomení stránky. Obrázky V této kapitole si představíme práci s obrázky. Budeme se zabývat především vkládáním obrázků na stránky. Dozvíte se též jak s obrázky na stránce efektivně pracovat. HTML sice není primárně určen pro grafiku, ale vkládání obrázků na web v moderním zpracování webu je nutností, kterou nelze opomenout. Obrázky vkládejte do těla dokumentu pomocí nepárové značky IMG, k níž přidělujte příslušné parametry. <IMG src= URL > Tento parametr u tagu IMG definuje, jaký konkrétní obrázek budete do stránky vkládat. <IMG alt= popisek obrázku title= popisek obrázku > Tyto parametry slouží pro vkládání popisku obrázku. <IMG width= px height= px > Tyto parametry umožňují nastavení pevné výšky (WIDTH) a šířky (HEIGHT) obrázku. 60

14 HTML jazyk a editace jeho kódu Je sice lepší upravit obrázek na takovou velikost, abyste nemuseli tyto parametry uvádět, ale někdy se mohou hodit. Velikosti zadávejte v pixelech. <IMG align= poloha > Další ze známých parametrů zarovnává obrázek do vybrané polohy vzhledem k ostatním elementům HTML na stránce. Možnými hodnotami jsou: TOP horní okraj obrázku zarovnává s textem. BOTTOM má opačnou funkci než TOP, zarovnává dolů. MIDDLE zarovnává střed obrázku se základnou textu, zbývající text pokračuje pod obrázkem. LEFT zarovná obrázek doleva, zbývající text obtéká obrázek zprava. RIGHT funguje stranově opačně než předchozí poloha, obrázek zarovná doprava, text jej obtéká zleva. <IMG src= obr/obrazek.jpg alt= toto je obrázek title= toto je obrázek width= 100 height= 50 align= right > Do dokumentu bude vložen obrázek ze souboru obrazek.jpg z adresáře obr. Přitom mu byl přidělen popisek a pevná výška a šířka. Obrázek bude zarovnán doprava. Upozornění: Pokud nastavíte velikost obrázku pomocí parametrů WIDTH a HEIGHT, obrázek se na stránce pravděpodobně zobrazí deformovaně a výrazně se může změnit i jeho kvalita. To se projeví, zvláště pokud obrázek tímto způsobem zvětšíte. Nebudou li odpovídat poměry stran, bude obrázek deformován. Proto doporučuji tyto parametry nikdy nezadávat a používat obrázek v takové velikosti, v jaké jej chcete na stránkách zobrazovat. Mimo tyto parametry však můžete použít i další, které dokáží buď přímo obrázek, nebo jeho chování upravovat podle vašich představ. <IMG border= px > BORDER umožňuje přidělit zobrazenému obrázku rámeček. Implicitně je velikost rámečku nastavená na nulu, tudíž se rámeček nezobrazuje. V případě, že chcete rámeček kolem obrázku zobrazit, zadávejte hodnoty v pixelech. <IMG vspace= px hspace= px > V případě, že chcete ovlivnit obtékání textu kolem obrázku, použijete tyto dva parametry. VSPACE přiděluje obrázku volný prostor ve vertikálním směru, HSPACE ve směru horizontálním. Velikosti opět zadávejte v pixelech. HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 61

15 5px; pomocí HTML, CSS a JavaScriptu Příklad užití parametrů VSPACE a HSPACE: <P> Text Text Text Text Text Text Text Text Text Text Text <IMG src= obrazek.jpg alt= toto je obrázek title= toto je obrázek width= 100 height= 50 align= right vspace= 10 hspace= 20 > Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </P> Zde vidíte, jak se zarovnává text, jenž obtéká obrázek. Samotný obrázek jsme přitom zarovnali doprava a vytvořili kolem něj nahoře a dole (VSPACE) mezeru o velikosti 10 pixelů a vlevo a vpravo (HSPACE) mezeru o velikosti 20 pixelů. Taktéž je vidět popisek obrázku na místě, kde se ještě obrázek nenačetl. V našem případě odkazujeme na neexistující obrázek, proto se zobrazilo pouze pole o zadané velikosti. Do něj se obrázek načítá. Nyní se podíváme na zarovnání do poloh TOP a BOTTOM, respektive na zarovnání k hornímu a dolnímu okraji, a ukážeme si, jak se chová v takových případech okolní text. <P> Text Text Text Text Text Text Text Text Text Text Text <IMG src= obrazek.jpg alt= toto je obrázek title= toto je obrázek width= 100 height= 50 align= top > Text Text Text Text Text Text Text Text Text Text Text </P> Na další ukázce je vidět, že obtékání obrázků nelze provést u poloh TOP a BOTTOM. Text, který následuje ve zdrojovém kódu za definicí obrázku, se zarovná k hornímu okraji obrázku a pak pokračuje pod ním. Tentokrát jsme neuvedli parametry VSPACE a HSPACE, takže text je přilepený k obrázku. Podobně se bude chovat poloha BOTTOM s tím rozdílem, že text se bude zarovnávat k dolnímu okraji obrázku. Ale taktéž ho nebude obtékat. 62

16 HTML jazyk a editace jeho kódu Aby byl výčet poloh kompletní, podíváme se ještě na jednu ukázku zarovnání obrázku, a to s polohou MIDDLE. <P> Text Text Text Text Text Text Text Text Text Text Text <IMG src= obrazek.jpg alt= toto je obrázek title= toto je obrázek width= 100 height= 50 align= middle > Text Text Text Text Text Text Text Text Text Text Text </P> V této ukázce je dobře vidět, že obrázek se v poloze MIDDLE zarovnává svým středem na základnu textu, tedy přímo na řádek. HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Na posledním příkladu této kapitoly si ještě předvedeme, jak vypadá rámeček kolem obrázku: <IMG src= obrazek.jpg alt= toto je obrázek title= toto je obrázek width= 100 height= 50 border= 10 > Rámeček kolem obrázku je implicitně černý a jeho barvu lze změnit jedině pomocí kaskádových stylů. V zobrazené ukázce má rámeček velikost 10 pixelů. Taktéž si můžete všimnout, že pokud nezadáte parametr ALIGN, který zarovnává obrázek do vybrané polohy vzhledem k dalším elementům HTML na stránce, obrázek se zarovná automaticky doleva. Odkazy Odkazy patří mezi nejpoužívanější součásti HTML. Ostatně už sám pojem hypertext naznačuje, že HTML je jazyk provazující text, respektive informace do rozsáhlejších celků. A tím nejrozsáhlejším celkem je internet jako celosvětová síť. Použití odkazů je velmi jednoduché. Můžete jak propojovat jednotlivé texty na vašem webu, tak odkazovat na jiné stránky. Odkazy budou nedílnou součástí vaší stránky. Obejdete se bez nich možná pouze v případě, že vaše internetová prezentace bude mít podobu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 63

17 5px; pomocí HTML, CSS a JavaScriptu jedné strany. Tato kniha však pojednává o tvorbě internetových stránek, takže mohu předpokládat, že se opravdu nenajde nikdo, kdo by odkazy ke své práci nepotřeboval. Představíme si dva různé způsoby jak vytvářet odkazy. Prvním z nich je hypertextový odkaz, jehož cílem je objekt (HTML dokument, obrázek či jiný soubor). Používáme jej hlavně na odkazování mezi soubory. Druhou možností je použití jmenných odkazů. Ty se užívají především k provazování textu na jedné stránce. V takovém případě můžeme tento typ odkazu nazvat i záložkou či kotvou. Hypertextové odkazy Odkaz je uzavřen párovou značkou A. V případě hypertextového odkazu si představíme základní parametr, pomocí něhož zapisujeme cíl odkazu. Jde o parametr HREF. <A href= URL > Parametr HREF definuje cestu k souboru, který chcete pomocí odkazu otevřít. Přitom můžete uvést relativní cestu k souboru v rámci adresářové struktury na vašem webu, nebo cestu absolutní s plným zápisem. Prakticky to může vypadat například takto: <A href= novinky.html >Novinky</A> <!--relativní cesta k souboru--> nebo <A href= >Novinky</A> <!--absolutní cesta k souboru--> V prvním případě se do aktuální stránky načte HTML dokument novinky.html, uložený v aktuálním adresáři. V případě druhého odkazu jsme uvedli absolutní cestu k souboru včetně umístění souboru. Samozřejmě je možné odkázat na soubor, jenž se na internetu nalézá na jiném místě. Odkazovat můžete i na soubory s jinou koncovkou, než jaká je určena pro dokumenty HTML. Prohlížeč se však v takových případech zachová jinak. O tom si ale povíme až za chvíli. Tip: Pro větší přehlednost zadávejte odkazy na stejný server pomocí relativní cesty a odkazy na jiné servery pomocí absolutní cesty. To se bude hodit i v případě, že stránky přesunete na jiný server. Nebudete tak muset přepisovat všechny cesty u svých odkazů. Možná se ptáte, zda je nutné psát u odkazu v případě absolutní cesty k souboru definici protokolu, v našem případě HTTP. Odpověď zní: ano. Je třeba tuto definici psát, protože prohlížeč by měl vědět, jakou cestou se k odkazovanému dokumentu dostane. 64

18 HTML jazyk a editace jeho kódu HREF může nabývat podle vašich potřeb následujících hodnot: HTTP anglicky HyperText Transfer Protokol. Je základním protokolem internetu pro komunikaci na úrovni obsahu HTML dokumentů. <A href= >C-Media</A> Upozornění: I když u některých prohlížečů zadávat nemusíte, neznamená to, že můžete definici protokolu vypustit u odkazů ve zdrojovém kódu. Prohlížeč je totiž pravděpodobně nastavený tak, aby případnou absenci tohoto zápisu v adresném dialogu automaticky doplnil. Nedoplní ji však ve vašem zdrojovém kódu. FTP anglicky File Transfer Protokol neboli protokol pro přenos souborů na internetu. Pomocí této definice můžete odkazovat na soubory, jež jsou umístěné na FTP serverech. Například: <A href= ftp://ftp.c-media.cz >FTP C-Media</A> FILE touto definicí můžete odkazovat na soubory na vašem disku. Například: <A href= file:///c:/web/html/novinky.html >novinky na disku</a> MAILTO tento zápis použijte v případě, že chcete na váš web umístit aktivní odkaz na ovou adresu. Slovu aktivní rozumějte tak, že když na takový odkaz uživatel poklepe myší, otevře se mu v jeho poštovním klientovi okno pro novou ovou zprávu se zadanou adresou. Například: <A href= mailto:c-media@c-media.cz >c-media@c-media.cz</a> Pamatujte: ovou adresu uvádějte vždy i mezi značku A. Někteří uživatelé totiž nemusí na svém počítači používat poštovního klienta, a tak by se jim text adresy nezobrazil. Hodnota MAILTO může vypadat mnohem složitěji. Pokud totiž chcete, aby se uživateli, který poklepe myší na takový odkaz, v jeho okně pro nový automaticky vyplnil třeba i předmět zprávy, musíte syntaxi zápisu doplnit o patřičný výraz. Doplníte jednoduše také výraz SUBJECT (česky předmět). <P>Objednávku knihy nám pošlete na náš <A href= mailto:c-media@c-media.cz?subject=objednavka%20knihy > c-media@c-media.cz </A>. </P> HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 65

19 5px; pomocí HTML, CSS a JavaScriptu Všimněte si, že ovou adresu a předmět zprávy (SUBJECT) oddělujeme otazníkem (?). Pro mezeru v předmětu zprávy uvádějte speciální znak %20. Nikdy nenechávejte volnou mezeru! Prohlížeč by potom hodnotu parametru HREF neinterpretoval správně. Podobným způsobem můžete zadávat i tělo zprávy. V tom případě za předmět zprávy dopíšete ampersand (&) a výraz BODY. Vypadá to následovně: <A href= mailto:c-media@c-media.cz?subject=objednavka%20knihy&body =Objednavam%20si%20knihu.%0A%0Aděkuji. >Objednávka knihy</a>. Celkově bude tato syntaxe v praxi vypadat tak, jak vidíte na obrázku v pravé části stránky. V tomto případě jde o poštovního klienta Outlook Express od společnosti Microsoft. Zapamatujte si také syntaxi pro odřádkování, kterou jsme použili v této ukázce %0A (odřádkuje text podobně jako značka BR). V našem případě jsme použili syntaxi dvakrát za sebou, abychom dosáhli jednoho volného řádku mezi texty. Pamatujte si, že mezi těmito znaky se mezera nedělá. Respektive funguje to tak, že v hodnotě uzavřené uvozovkami mezeru dělat nemůžete, o čemž jsem se již zmiňoval. A tak bychom mohli pokračovat. Pro odesílání ů využijete pravděpodobně nejčastěji jednoduchý zápis s přednastavenou ovou adresou. Ale nezapomínejte, že ne všichni uživatelé internetu používají ového klienta, proto uvádějte vždy vaši ovou adresu, a ne odkaz s textem typu Pošlete mi !. Když jsem vysvětlil, jak odkaz funguje, je třeba se ještě zmínit o tom, že cílem odkazu může být i soubor s jinou koncovkou než ty, jež definují například HTML dokumenty. Můžete totiž odkazovat na jakýkoli soubor, ať už jde o textový soubor nebo obrázek, soubory audio či video formátu a podobně. A jak se tedy zachová prohlížeč v případě, že budete odkazovat na takové soubory? 1. Pokud je cílem odkazu nějaký obrázek (například ve formátu JPG nebo GIF), zobrazí ho prohlížeč v otevřeném okně. Stejně se zachová v případě, že půjde 66

20 HTML jazyk a editace jeho kódu o soubor obsahující prostý text (s koncovkou TXT). Například operační systém Windows otevře takový soubor v Poznámkovém bloku. 2. Pokud je cílem soubor s jakoukoli jinou koncovkou, nabídne prohlížeč trojí volbu: otevření v programu, který umí pracovat se soubory s uvedenou koncovkou, otevření v jiném programu, stažení souboru na disk. Poznámka: Dialogové okno systému, v němž se nabízejí volby pro otevření a uložení souboru, se ale otevřít nemusí. Záleží především na nastavení operačního systému uživatele. Pokud tedy budete chtít na svých stránkách nabídnout soubor ke stažení (například vaši skladbu nebo nějaký dokument), stačí zapsat pouze odkaz na tento soubor. Zápis vypadá následovně: <A href= obrazek.jpg >Obrázek</A> <A href= audio.mp3 >Hudební skladba</a> <A href= video.avi >Video nahrávka</a> <A href= archiv.zip >Sbalený archiv</a> <A href= dokument.doc >Dokument</A> <A href= soubor.pdf >Soubor ve formátu PDF</A> Pamatujte: Poskytovat ke stažení skladby či celá alba nebo filmy bez souhlasu jejich autora je porušováním ustanovení autorského zákona. To se samozřejmě nevztahuje pouze na audio či video nahrávky. Autorské právo ošetřuje celou oblast tvorby a následného užívání jakýchkoli děl vzniklých na základě duševní činnosti. Autorské právo se tak vztahuje i na texty, grafické prezentace, fotografie a další výsledky duševní činnosti. Jmenné odkazy Odkazy se ale dají použít i jinak, než jak jsme si ukázali, třeba na stejné stránce. Takové odkazy nazýváme odkazy jmennými. Můžete jim však klidně říkat záložky. Ty znáte například z textových editorů. Ke správně definované záložce se totiž můžete z jakéhokoli místa stránky jednoduše vrátit. K tomu slouží dvě definice odkazu pomocí tagu A a dvou parametrů. Jedním je opět směrující parametr HREF, který již znáte. Tím druhým je parametr NAME, jenž umisťuje záložky na vybrané místo v dokumentu. <A name= název_záložky > Tato syntaxe pro vytvoření záložky vypadá na první pohled jako odkaz, ale není jím. HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 67

21 5px; pomocí HTML, CSS a JavaScriptu Zvláště proto, že neobsahuje parametr HREF, který definuje cíl odkazu. Do záložky uzavřete například nadpis v textu, na který pak můžete odkázat třeba z obsahu. Název záložky je nutné zadávat bez mezer a diakritiky. <A href= #název_záložky > K záložce se dostanete pomocí odkazu, jehož cílem není nějaký soubor, ale název záložky. K tomu slouží směrující parametr HREF, jehož hodnotou bude znak # a název záložky, na kterou odkazujete. Obsahem záložky nemusí být vůbec žádný znak. Pro logiku výstavby dokumentu je však vhodné do poznámky zahrnout třeba slovo nebo celý nadpis. Není to však bezpodmínečně nutné. Je dobré také vědět, že odkaz na záložku ji nemusí nutně následovat. Odkaz se může nacházet na začátku dokumentu a záložka níže. To naznačuje následující příklad: <H3><A name= obsah >Obsah:</A></H3> <P><A href= #kapitola1 >Kapitola 1</A></P> <P><A href= #kapitola2 >Kapitola 2</A></P> <P><A href= #kapitola3 >Kapitola 3</A></P> <BR><BR> <A name= kapitola1 ><H3>Kapitola 1</H3></A> <P> Text... </P> <A name= kapitola2 ><H3>Kapitola 2</H3></A> <P> Text... </P> <A name= kapitola3 ><H3>Kapitola 3</H3></A> <P> Text... </P> <BR><BR> <P><A href= #obsah >Zpět na obsah</a></p> Dovnitř odstavců uvozených značkou P je samozřejmě nutné dopsat nějaký delší text, nebo odstavce odřádkovat, aby ukázka dosáhla praktického významu. Použít odkaz na záložku je vhodné na konci stránky, aby se uživatel nemusel ručně vracet na začátek stránky pomocí posunovací lišty. Aplikace záložek je tak zvláště vhodná v případech, kdy je HTML stránka hodně dlouhá a listování by zabralo příliš mnoho času. Svoje použití však můžou mít záložky i v jiných případech. Na záložku totiž můžete odkazovat i z jiného HTML dokumentu. Tak vzniká opravdu ono požadované propojení textů na webu. 68

22 5px; pomocí HTML, CSS a JavaScriptu Vlastnosti písma Tato kapitola se věnuje písmu a možnostem jeho modifikace v kaskádových stylech. Dozvíte se vše potřebné k tomu, abyste správně definovali nejen typ písma, ale též jeho velikost. Jde o tu nejběžnější součást stylů. Celkově je velice důležité, aby vaše stránky obsahovaly správné fonty a velikosti písma, protože text tvoří stále velkou část webu, a použité písmo má tak velký vliv na vizuální podobu stránek. Hlavní vlastností stylů, která se stará o písmo, je podobně jako v HTML vlastnost FONT. Ta obsahuje několik podvlastností, které dokáží velmi lehce proměnit podobu písma. Všechny tyto podvlastnosti jsou zároveň dědičné, přenášejí se tedy z nadřazených elementů na vnořené. Vlastnosti písma lze zároveň aplikovat na všechny elementy HTML. FONT-FAMILY : typ_písma FONT-FAMILY definuje font, respektive fonty (typy písma) použité pro text vybraného elementu nebo části HTML dokumentu. BODY { font-family : Arial, Verdana } Takto definujte font písma pro veškeré písmo v těle dokumentu HTML. Hodnotou může být více typů písma oddělených čárkou. Přitom záleží na jejich pořadí. Pokud prohlížeč první font písma nenajde, zkouší hledat druhý v pořadí a tak dále. Proto je vždy důležité uvádět více fontů a rozhodně se vyhnout použití nestandardních fontů. Tip: Používejte například tuto definici písem: Arial, Verdana, sans-serif. Jde o standardní typy písma, které by měl obsahovat každý operační systém. Sans-serif je navíc označením jakéhokoli bezpatkového písma. V případě, že prohlížeč žádný z fontů nenajde, použije v tomto případě nějaké bezpatkové písmo. Sans-serif proto používejte pokud možno vždy. Kromě klasických fontů můžete ještě definovat rodinu typů písma všeobecně. Do těchto všeobecných rodin patří například i sans-serif. V případě této všeobecné definice písma vybírá prohlížeč písmo sám, a to v závislosti na zvolené všeobecné rodině písem. Můžete vybírat z těchto všeobecných rodin písma: SERIF patková písma (například Times). SANS-SERIF bezpatková písma (například Arial). CURSIVE kurzivní písma (například Zapf-Chancery). FANTASY ozdobná písma (například Western). MONOSPACE písma se stejnou roztečí, tedy neproporcionální písma (například Courier). 148

23 Kaskádové styly - CSS BODY { font-family : Arial, Verdana, sans-serif } Jak vidíte, pomocí sans-serif jsme prohlížeči sdělili, že pokud v počítači uživatele internetu nenajde bezpatková písma Arial ani Verdana, má hledat jakékoli bezpatkové písmo. Je samozřejmě možné definovat typ písma pouze všeobecně, ale připravíte se o možnost primárně ovlivnit, jak bude text vypadat. FONT-SIZE : velikost/%/délka Další velmi důležitá a často používaná vlastnost FONT-SIZE definuje velikost písma v elementu, pro nějž je použita. Možností jak vyjádřit velikost písma je v kaskádových stylech nepřeberné množství. V zásadě můžete velikost písma vyjádřit čtyřmi způsoby: absolutní velikostí, relativní velikostí, procenty, délkou. Absolutní velikosti písma od nejmenšího po největší jsou: XX-SMALL, X-SMALL, SMALL, MEDIUM, LARGE, X-LARGE, XX-LARGE. Přitom jestliže velikost MEDIUM je 10 bodů (pt), pak LARGE je velké 15 bodů (pt). Tyto velikosti se ale mohou lišit v závislosti na použitém fontu. Relativní velikosti písma jsou: LARGER a SMALLER, tedy větší a menší velikost písma než velikost základní. Jestliže je základní velikost písma nadefinována jako MEDIUM, bude relativní velikost LARGER stejná jako absolutní velikost LARGE. Ve stejném případě bude velikost SMALLER totožná s velikostí SMALL. Percentuální vyjádření velikosti písma a vyjádření pomocí jednotek délky neberou v potaz tabulku velikostí, kterou jsem zmínil výše. Percentuální vyjádření velikosti písma se podobně jako relativní odvozuje od velikosti mateřského písma. Nejcennější je asi zápis velikosti písma podle jednotek délky. Dost často zapisujeme písmo pomocí pixelů. Praktickou jednotkou je ale i EX, tedy velikost písma podle písmene x. Předejdete tak situaci, kdy je písmo při větším rozlišení obrazovky příliš malé. Obecně se ale používají velikosti okolo 12 až 14 pixelů. Možnosti zápisu v praxi jsou například tyto: BIG { font-size : large } SMALL { font-size : smaller } BLOCKQUOTE { font-size : 50% } BODY { font-size : 12px } HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 149

24 5px; pomocí HTML, CSS a JavaScriptu Tímto zápisem stylů jsme přiřadili vlastnosti velikosti písma jednotlivým elementům HTML. Značka BIG bude uvozovat text s větší velikostí písma (LARGE), značka SMALL naopak s menším písmem (SMALLER). Odsazený blok písma zapsaný pomocí párové značky BLOCKQUOTE můžete použít třeba k zobrazení poznámek v textu, a tak jsme pro něj definovali poloviční velikost písma (50 %). Pro celé tělo HTML dokumentu jsme stanovili velikost písma na 12 pixelů. FONT-WEIGHT : síla_písma Písmu můžete přidělit také sílu neboli duktus. Tato vlastnost dokáže písmo transformovat na silnější a výraznější. Přitom hodnot, které můžete doplňovat, je opět hodně. Vyjadřovat je můžete buď slovně, nebo číselně. Slovní vyjádření jsou tato: NORMAL, BOLD, BOLDER a LIGHTER. Přitom od normálního písma můžete použít písmo tučné, ještě tučnější a písmo tenčí. Číselná vyjádření: 100, 200, 300, 400, 500, 600, 700, 800, 900. Přitom číslo 100 je hodnota pro nejtenčí písmo a 900 pro nejtlustší. Hodnota 400 koresponduje se slovní hodnotou NORMAL, hodnota 700 s BOLD a 900 s BOLDER. Základní hodnota síly písma je v kaskádových stylech nastavena na 400 bez ohledu na typ písma. Přesto ale opět na výběru písma záleží. Některá písma jsou totiž silnější než jiná. Základní hodnota se však může měnit podle názvu písma. Pokud obsahuje definici MEDIUM, je základní hodnotou 500, pokud obsahuje BOLD, je základní hodnotou 900. Některé hodnoty nemusí podobu písma ovlivnit vůbec, opravdu totiž záleží na typu použitého písma. BODY { font-weight : normal } H3 { font-weight : bolder } Tento příklad ukazuje jak tuto vlastnost použít. Písmo v těle HTML dokumentu má nastavenou standardní sílu (NORMAL). Písmo nadpisů třetí úrovně však dostalo sílu o 400 větší, slovně BOLDER. FONT-STYLE : styl_písma Tato vlastnost umí měnit styl písma a může nabývat těchto hodnot: NORMAL normální styl písma (implicitní hodnota). ITALIC písmo psané kurzívou. OBLIQUE nakloněné písmo. BODY { font-style : normal } P.citace { font-style : italic } 150

25 Kaskádové styly - CSS Uvedený příklad definuje pro tělo dokumentu normální styl písma (NORMAL), zatímco písmo v odstavcích třídy CITACE bude psané kurzívou (ITALIC). FONT-VARIANT : varianta_písma Někdy budete potřebovat, aby byl text psán kapitálkami (například důležitá upozornění). Pomocí této vlastnosti toho jednoduše dosáhnete. Možné varianty písma jsou v tomto případě jen dvě: NORMAL normální varianta písma. SMALL-CAPS písmo psané kapitálkami, tedy velkými písmeny. Jednoduchá, ale velmi prospěšná vlastnost písma v kaskádových stylech dokáže udělat pomocí jedné definice z vašeho normálního písma kapitálky. Zápis bude vypadat třeba takto: H2 { font-variant : small-caps } Nadpisy druhé úrovně budou od této chvíle psány pouze velkými písmeny. FONT : [FONT-STYLE] [FONT-VARIANT] [FONT-WEIGHT] [FONT-SIZE] [FONT-FAMILY] Podobu písma můžete samozřejmě zapsat jednotným zápisem hlavní vlastnosti FONT. Je přitom důležité, abyste velikost písma (hodnotu FONT-SIZE) a font (hodnotu FONT-FAMILY) uváděli až na závěr. Pokud byste některou z hodnot vlastností uvedli až za tyto dvě, je pravděpodobné, že prohlížeč ji nebude interpretovat. H2 { font : italic small-caps bold 14px Arial } P { font : bolder 12px Verdana } První případ uvádí hodnoty všech podvlastností, druhý hodnoty jen dvou podvlastností. To znamená, že můžete kombinovat libovolné množství hodnot podvlastností. Tímto jsme vyčerpali všechny vlastnosti písma, jež jsou současnými prohlížeči podporovány. Závěrem kapitoly se opět podíváme na praktický příklad užití těchto vlastností při úpravě písma. Jak jsem naznačil v předchozí kapitole, příklad se bude skládat ze dvou částí: zdroje stylů a těla HTML dokumentu. Styly: BODY { font-family : Arial, Verdana, sans-serif; font-size : 12px } H3 { font : x-large bolder small-caps } P.citace { font-style : italic } HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 151

26 5px; pomocí HTML, CSS a JavaScriptu Tělo HTML dokumentu: <H3>Nadpis kapitálkami</h3> <P>Normální písmo v těle dokumentu.</p> <P class= citace >A písmo v odstavci třídy CITACE.</P> <P>Normální písmo v těle dokumentu.</p> Tento jednoduchý příklad ukazuje, jak jednoduše se dají definovat styly písma pro jednotlivé elementy HTML. Přitom platí dědičnost. To znamená, že je dobré definovat základní velikost a font písma už pro tělo dokumentu a tuto definici pak už jen doplňovat, případně měnit u jednotlivých elementů HTML. Velikost písma v těle dokumentu jsme stanovili na 12 pixelů. Definice stylu nadpisu druhé úrovně opět ukazuje jak psát styl zkráceným záznamem. Písmo nadpisu dostalo pevnou velikost, definovanou slovně jako X-LARGE, použili jsme zvýraznění síly BOLDER a navíc jsme jej uvedli kapitálkami. Všimněte si, že i v písmu psaném kapitálkami lze rozeznat malá a velká písmena (velké N). U odstavce třídy citace jsme změnili styl písma na kurzívu. Vlastnosti textu O formátování textu v HTML už víte. Kaskádové styly ale nabízejí vyšší stupeň formátování, díky němuž dosáhnete mnohem lepších výsledků a text bude konečně vypadat opravdu podle vašich představ. Jak stále zdůrazňuji, základem webu jsou právě textové informace, a text přehledně uspořádaný do logických celků je vizitkou dobré práce webmastera. K čemu by bylo množství textů, kdyby byly nedbale a nepřehledně uspořádány, respektive neuspořádány? Protože jsou možnosti formátování textu s využitím stylů velmi rozmanité, budete používat množství vlastností. Pomocí stylů lze například nastavit mezery mezi písmeny či slovy, dekorace textu, jeho zarovnání, ale třeba i odsazení prvního řádku v odstavci a tak dále. Pojďme se tedy podívat, které vlastnosti co umí. WORD-SPACING : délka/normal Jde o dědičnou vlastnost, pomocí níž můžete definovat velikost mezislovní mezery, respektive můžete nastavit hodnotu, o kterou se mezera zvětší oproti standardní velikosti. Implicitní hodnotou je NORMAL, tedy standardní velikost mezery. 152

27 Kaskádové styly - CSS Pokud chcete mezeru mezi slovy zvětšit nebo zmenšit, doplňujete kladné či záporné hodnoty s jednotkami délky. P { word-spacing : -0.2em } H3 { word-spacing : 0.5em } Touto definicí stylů jsme písmu odstavců přidělili menší mezislovní mezery, než je standard, naopak nadpisy třetí úrovně dostaly mezeru mezi slovy větší o zapsanou hodnotu. Jaké použijete jednotky, je jen na vás (viz kapitola Jednotky, barvy a umístění objektů v CSS na str. 138). LETTER-SPACING : délka/normal Tato vlastnost má na svědomí taktéž mezery, ale mezi jednotlivými písmeny. Pokud tedy potřebujete text roztáhnout, nebo naopak stáhnout, je LETTER-SPACING tou pravou volbou. Implicitně je opět nastavená hodnota NORMAL (standardní velikost mezery) a i tato vlastnost je dědičná. Tak jako u předešlé vlastnosti i zde definujete velikost, o kolik se mezera mezi písmeny zvětší nebo zmenší oproti standardu. Za číselné vyjádření záporného nebo kladného rozdílu zadávejte jednotky délky. H1 { letter-spacing : 0.2em } H3 { letter-spacing : 0.1em } Jak vidíte, mezera mezi písmeny se může hodit třeba v případě, že chcete roztáhnout nadpisy. V uvedeném příkladu jsme mezery mezi slovy roztáhli jak u nadpisu první, tak třetí úrovně. LINE-HEIGHT : číslo/%/délka/normal Tato dědičná vlastnost definuje velikost řádku, na kterém se text zobrazí, respektive umí ovlivňovat mezery mezi řádky. Pokud je hodnotou číslo, je velikost řádku vypočítána násobením velikosti písma. Procenta zase vyjadřují k velikosti písma relativní poměr. Záporné hodnoty zde nejsou povoleny. Pokud chcete definovat absolutní velikost řádku, použijte jednotky délky. Implicitní hodnota NORMAL symbolizuje standardní řádkování. BODY { line-height : 1.2 } P { line-height : 150% } Uvedený zápis definuje velikost řádku na 1,2násobek velikosti fontu písma pro text v těle dokumentu HTML. Pro odstavec jsme zvolili řádkování 150% velikosti typu písma. HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 153

28 5px; pomocí HTML, CSS a JavaScriptu TEXT-INDENT : délka/%/0 Jistě jste už přemýšleli o tom, jak elegantně by to mohlo vypadat, kdyby byl první řádek odstavce odsazen podobně jako třeba v knize. S kaskádovými styly si toto přání můžete splnit. Právě TEXT-INDENT totiž definuje velikost takzvané odstavcové odrážky. Velikost odsazení zapisujte buď absolutně pomocí jednotek délky, nebo percentuálně. Procenta se vztahují k šířce nadřazeného elementu (například odstavce v případě textu). Implicitní hodnotou je nula. TEXT-INDENT je dědičná vlastnost a je možno ji aplikovat pouze na blokové elementy. P { text-indent : 10px } Touto definicí stylu zajistíte, že každý první řádek v odstavci bude odsazen od okraje o 10 pixelů. Používejte pokud možno stejné jednotky jako u definic velikosti písma. TEXT-DECORATION : typ_dekorace/none Vlastnost dekorace textu umí podobné kousky jako v klasickém HTML značky U a STRIKE, ale nabízí další možnosti a užití. Implicitní hodnotou je NONE (text bez dekorace). Tato vlastnost se mezi elementy nedědí. Možnými typy dekorace jsou: UNDERLINE text bude podržen. LINE-THROUGH text je přeškrtnut. OVERLINE zobrazí čáru nad textem, opak UNDERLINE. BLINK blikající text. Upozornění: Hodnota BLINK je jednou z hodnot, kterou nepodporují všechny prohlížeče. Například Internet Explorer tuto hodnotu nezná, a tak textu vlastnost blikání nepřidělí. V podstatě jde jen o drobnou vadu, protože text se v takovém případě zobrazí normálně. A { text-decoration : none } A:hover { text-decoration : underline } Tento zápis stylů uvádí do praxe použití vlastnosti TEXT-DECORATION. Klasický odkaz se tak bude zobrazovat bez jakékoli textové dekorace. Ovšem když na něj najedete kurzorem myši (pseudotřída HOVER), text odkazu bude podtržen. TEXT-TRANSFORM : typ_textu/none Převádět na kapitálky umí například i vlastnost FONT-VARIANT, neumí ale některé další trasformace. TEXT-TRANSFORM dokáže text transformovat hned několika 154

29 Kaskádové styly - CSS způsoby. Implicitní hodnotou je opět NONE, což je specifikace normálního textu bez transformace. Tato dědičná vlastnost má několik možných hodnot: CAPITALIZE první písmeno z každého slova zobrazí kapitálkou. UPPERCASE pro text použije pouze velká písmena. LOWERCASE text se zobrazí jen malými písmeny. H3 { text-transform : uppercase } Po tomto zápisu bude text nadpisů třetí úrovně psán pouze velkými písmeny. Pokud použijete hodnotu CAPITALIZE, musíte si uvědomit, že na rozdíl od vlastnosti FONT-VARIANT tato vlastnost nebude psát kapitálkami celý text, ale jen první písmeno z každého slova. Poznámka: Hodnoty nelze kombinovat. Například kombinace hodnot UPPERCASE a CAPITALIZE, po které byste mohli čekat velká písmena s většími prvními písmeny každého slova, není možná. TEXT-ALIGN : poloha ALIGN provádí v kaskádových stylech stejně jako v HTML zarovnání, TEXT-ALIGN tedy zarovnává text uvnitř elementu, pro nějž je definován. Tuto dědičnou vlastnost lze aplikovat pouze na blokové elementy. Možnými polohami jsou: LEFT zarovná text doleva. RIGHT zarovnává doprava. CENTER zarovnává na střed. JUSTIFY zarovnává text do bloku. BODY { text-align : left } H3 { text-align : center } V tomto příkladu užití TEXT-ALIGN byl text v těle dokumentu HTML zarovnán doleva. Tuto hodnotu ve skutečnosti zadávat nemusíte, protože jde o hodnotu implicitní. Text nadpisů třetí úrovně byl pro změnu zarovnán na střed. Ještě než se budu věnovat vlastnosti VERTICAL-ALIGN, podívejme se na příklad použití výše zmíněných vlastností v praxi. Styly: H3 { word-spacing : 0.5em; letter-spacing : 0.2em; HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 155

30 5px; pomocí HTML, CSS a JavaScriptu text-transform : capitalize; text-align : center } P { word-spacing : -0.2em; line-height : 150%; text-indent : 10px } A { text-transform : uppercase; text-decoration : none } A:hover { text-transform : uppercase; text-decoration : underline } Zdrojový kód: <H3>Nadpis třetí úrovně</h3> <P> Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce.text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. </P> <P> Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. Text odstavce. <A href= >odkaz_1</a>. Text odstavce. Text odstavce. Text odstavce. <A href= >odkaz_2</a>. Text odstavce. </P> Nyní vysvětlím, co vše jsme se styly provedli. Nejdříve k nadpisu. Ten jsme zarovnali na střed, zvětšili jsme mezery mezi slovy o polovinu šířky písmene M a mezeru mezi písmeny o dvě desetiny šířky písmene M. Nakonec byl text transformován tak, aby se všechna počáteční písmena slov nadpisu zobrazovala velkými písmeny. Odstavec byl upraven takto: První řádek byl odsazen o 10 pixelů, mezera mezi písmeny byla zmenšena o dvě desetiny šířky písmene M, což zapříčinilo, že mezi slovy v podstatě není žádná viditelná mezera (mezi slovy Text a odstavce). Taktéž byla zvýšena hodnota řádkování na jeden a půl řádku, což je jasně patrné. Text prázdných odkazů (nulová hodnota parametru HREF) byl transformován na kapitálky a při najetí kurzorem myši mu byla přidělena dekorace podtržením, jak naznačuje ukázka (kurzor myši na odkaz_1). Poznámka: Pseudotřídě HOVER, kterou jsem použil v tomto příkladu, se budu věnovat v kapitole Pseudotřídy a pseudoelementy CSS, str

31 Kaskádové styly - CSS VERTICAL-ALIGN : pozice/% Nedědičná vlastnost VERTICAL-ALIGN se vztahuje k vertikálnímu zarovnání elementu a lze ji použít pouze pro řádkové elementy a element buňky tabulky. Přitom relativní zarovnání je prováděno k mateřskému, tedy nadřazenému elementu, nebo k základní vertikální úrovni elementu. Percentuální vyjádření vertikální pozice elementu se vztahuje k vlastnosti LINE-HEIGHT, což znamená k výšce řádku. Záporné hodnoty nejsou v tomto případě povoleny. Možnými pozicemi jsou: BASELINE zarovnání na základní linku (například první řádek elementu). MIDDLE zarovnává středový bod elementu na vertikále se základnou mateřského elementu, k níž se připočítává polovina výšky písmene x. Jednoduše řečeno, opticky zarovnává na střed na vertikále. SUB dolní index. SUPER horní index. TEXT-TOP zarovnává strop elementu se stropem fontu mateřského elementu. TEXT-BOTTOM provádí přesný opak TEXT-TOP, zarovnává patu elementu s patou fontu mateřského elementu. TOP zarovnává strop elementu podle nejvyššího elementu na řádku. BOTTOM zarovnává patu elementu podle nejnižšího elementu na řádku. Upozornění: Hodnoty TEXT-TOP a TEXT-BOTTOM, ač jsou součástí oficiální specifikace, nemusí fungovat ve všech prohlížečích. Například Mozilla jim nerozumí. V případech, kdy to je možné, používejte proto hodnoty TOP a BOTTOM. Hodnotu BASELINE interpretuje pouze Internet Explorer. Vertikální zarovnání je dobrá pomůcka, ale vyžaduje vyzkoušet si jednotlivé polohy, abyste metodiku zarovnání skutečně pochopili. Pozic, kterých může element pomocí této vlastnosti na vertikále nabývat, je velké množství a každá má svůj význam. Přitom třeba poloha na základní lince (BASELINE) může být různá v závislosti na mateřském elementu. Protože jde o poměrně složitou záležitost, uvádím příklad, který vysvětlí alespoň základní polohy této vlastnosti. Styly: B { vertical-align : super } TD { height : 80px }.top { vertical-align : top }.bottom { vertical-align : bottom }.middle { vertical-align : middle } HTML a internet Pravidla tvorby webu HTML jazyk a editace jeho kódu Kaskádové styly a jejich užití při tvorbě stránek JavaScript a jeho začlenění do stránky Co s hotovým projektem Odkazy na www stránky 157

32 5px; pomocí HTML, CSS a JavaScriptu Tělo HTML dokumentu: <P>Toto je text. A <B>zvýrazněný text</b>. A opět normální text.</p> <TABLE border= 1 > <TR> <TD class= top >hodnota TOP</TD> <TD class= bottom >hodnota BOTTOM</TD> <TD class= middle >hodnota MIDDLE</TD> </TR> </TABLE> Definovali jsme styly pro značku B vertikální zarovnání do horního indexu, tag TD výšku 80 pixelů, a tři třídy TOP, BOTTOM a MIDDLE podle vertikálního zarovnání na strop, patu či střed elementu. V následujícím zdrojovém kódu jsme třídy přiřadili postupně třem buňkám, na nichž se projevilo zarovnání jejich obsahu. Zvýrazněný text v odstavci (pomocí B) je tučný, protože jde o definovanou značku HTML, která provádí ztučnění textu. Pomocí stylů jsme však této značce přiřadili ještě horní index (hodnota SUPER, vlastnost VERTICAL-ALIGN). Toto jsou základní polohy, které využijete nejčastěji. Pomocí této vlastnosti budete především ovlivňovat text na řádku, protože platí pouze pro řádkové elementy (jako jsou právě značky B, I a další) a elementy buněk tabulky. Poznámka: Pozici BASELINE se budu věnovat v kapitole Tabulky v CSS (str. 213 ). Možností jak upravovat text pomocí kaskádových stylů je opravdu nepřeberné množství. Jak výše uvedené vlastnosti použijete, případně zkombinujete, je jen na vás. Příklad, který jsem uvedl, využívá pouze vlastnosti uvedené v této kapitole. Vy se samozřejmě nemusíte omezovat a můžete kombinovat téměř veškeré vlastnosti uvedené v oficiální specifikaci CSS. Prázdná mezera CSS dovolují specifikovat i vlastnosti prázdné mezery. Prázdná mezera je obyčejně mezera o velikosti jednoho znaku a používá se především k oddělení slov. 158

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

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti

Více

Blokový model v CSS:

Blokový model v CSS: Blokový model v CSS: Blokový model v CSS: Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing

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

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 internetových stránek pomocí HTML, CSS a JavaScriptu

Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu OL { list-style-type : upper-alpha }.vnitrni { list-style-position : inside } i i i li ě 00 5px; operace s proměnnou } Tvorba internetových stránek pomocí HTML, CSS a JavaScriptu Martin Domes Nakladatelství

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

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML

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

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

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

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

Další servery s elektronickým obsahem

Další servery s elektronickým obsahem Právní upozornění Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována a šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele.

Více

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu

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

Kaskádové styly (CSS) Cascading Style Sheets

Kaskádové styly (CSS) Cascading Style Sheets CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...

Více

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML Čtvrtek 11. dubna 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

Více

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění

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

Úvod do jazyka HTML (Hypertext Markup Language)

Úvod do jazyka HTML (Hypertext Markup Language) Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření

Více

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Tvorba webu. Kaskádové styly (CSS) Martin Urza Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).

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

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

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia

Více

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra

Více

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size. Page 1 of 6 CSS vlastnosti - stručný prehľad Vlastnosti písma font-family rodina písma font-style styl písma font-variant varianta písma font-weight duktus písma font-size veľkosť písma font písmo

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

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

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

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a

Více

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES

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

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

PODPORA ELEKTRONICKÝCH FOREM VÝUKY I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a

Více

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 5. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 3. 10. 2012 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

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

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka - definuje vztah k jiným

Více

Další servery s elektronickým obsahem

Další servery s elektronickým obsahem Právní upozornění Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována a šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele.

Více

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného

Více

Základy CSS (3. přednáška)

Základy CSS (3. přednáška) Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze

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

<link> - definuje vztah k jiným XHTML dokumentům, typicky

<link> - definuje vztah k jiným XHTML dokumentům, typicky Návrh a tvorba WWW stránek 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka

Více

Zá klady HTML. Tag HTML <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

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace

Více

CSS - stručná reference kaskádových stylů

CSS - stručná reference kaskádových stylů 1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2-1.6 a line-height

Více

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line)

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line) Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože

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

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

TNPW1 Cvičení

TNPW1 Cvičení 13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS

Více

Další servery s elektronickým obsahem

Další servery s elektronickým obsahem Právní upozornění Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována a šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele.

Více

1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.

1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 2. lekce Čtení dokumentů 1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 3. Přecházení mezi stránkami v dokumentu:

Více

Google Apps. weby 1. verze 2012

Google Apps. weby 1. verze 2012 Google Apps weby verze 0 Obsah Obsah... Úvod... Zahájení práce... Nastavení webu... Úprava stránky... Popis prostředí... Rozložení stránky... Nadpis stránky... Úprava textu... Vložení odkazu... 8 Vložení

Více

CSS Stylování stránek. Zpracoval: Petr Lasák

CSS Stylování stránek. Zpracoval: Petr Lasák CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze

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

CSS styly. Cascading Style Sheets kaskádové styly

CSS styly. Cascading Style Sheets kaskádové styly CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen

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

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

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

Úvod do tvorby internetových stránek v jazyce HTML

Úvod do tvorby internetových stránek v jazyce HTML Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.

Více

Prvně si řekněme, co vlastně odstavec v programu Word je a pár slov o jeho editaci:

Prvně si řekněme, co vlastně odstavec v programu Word je a pár slov o jeho editaci: FORMÁTOVÁNÍ ODSTAVCE Pro formátování odstavce, použijeme opět záložku DOMŮ a zaměříme se na skupinu ikon pro formátování celých odstavců. To se nevěnuje formátování samotného písma, ale celého odstavce.

Více

Formátování obsahu adminweb

Formátování obsahu adminweb Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky

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

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

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

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading

Více

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.

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

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1 1 Úvod V tomto studijním textu se seznámíme s tvorbou webových stránek a prezentací a se základy syntaxe jazyka HTML. K tomu, abychom byli schopni vytvořit internetovou stránku, nemusíme používat žádný

Více

WORD 2007 grafický manuál

WORD 2007 grafický manuál TLAČÍTKO OFFICE dříve známo jako nabídka Soubor umožňuje práci se souborem (otevřít nový nebo existující, uložit, vytisknou, odeslat, zavřít program, ) Mimo jiné zobrazuje názvy posledních otevřených dokumentů

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok

Více

Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6.

Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6. Úprava stránek Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6. Média 1. Popis ikon editoru použitých v šabloně krátký popis detaily

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

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

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

Vzorce. StatSoft. Vzorce. Kde všude se dá zadat vzorec

Vzorce. StatSoft. Vzorce. Kde všude se dá zadat vzorec StatSoft Vzorce Jistě se Vám již stalo, že data, která máte přímo k dispozici, sama o sobě nestačí potřebujete je nějak upravit, vypočítat z nich nějaké další proměnné, provést nějaké transformace, Jinak

Více

Káskádové styly = CSS

Káskádové styly = CSS Návrh a tvorba WWW stránek 1/20 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí

Více

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat. Úprava textu Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů). Fyzické formátování Fyzické formátování říká, jak má který

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

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

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

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací

Více

MS Word. verze Přehled programů pro úpravu textu

MS Word. verze Přehled programů pro úpravu textu MS Word verze 2013 Přehled programů pro úpravu textu Pro úpravu textu slouží textový editor Jednoduché (zdarma, součást operačního systému MS Windows): Poznámkový blok, WordPad Komplexní: MS Word, Writer

Více

Práce s administračním systémem internetových stránek Podaných rukou

Práce s administračním systémem internetových stránek Podaných rukou Práce s administračním systémem internetových stránek Podaných rukou 2011 Ing. Jakub Matas Přihlášení a uživatelský účet Přihlášení Přihlášení do aplikace lze dvěma způsoby: 1. Pomocí panelu ve vrchní

Více

Manuál Redakční systém

Manuál Redakční systém Manuál Redakční systém SA.07 Obsah Úvod... ) Struktura webu... ) Aktuality... 0 ) Kalendář akcí... ) Soubory ke stažení... 6 5) Fotogalerie... 8 Redakční systém umožňuje kompletní správu vašich internetových

Více

Nápověda k redakčnímu systému InstantWeb.cz

Nápověda k redakčnímu systému InstantWeb.cz Nápověda k redakčnímu systému InstantWeb.cz Přihlášení na adrese www.vasedomena.cz/admin naleznete přihlašovací pole se jménem a přiděleným heslem. Toto heslo je zpočátku přiděleno poskytovatelem programu,

Více

Požadované dovednosti v ovládání textového procesoru Microsoft Word 2013 pro předměty VA1 a VT1

Požadované dovednosti v ovládání textového procesoru Microsoft Word 2013 pro předměty VA1 a VT1 Požadované dovednosti v ovládání textového procesoru Microsoft Word 2013 pro předměty VA1 a VT1 1 Úvod 1.1 Práce s dokumenty 1.1.1 Spustit a ukončit textový editor. 1.1.2 Otevřít jeden nebo několik dokumentů.

Více

EU-OPVK:VY_32_INOVACE_FIL16 Vojtěch Filip, 2014

EU-OPVK:VY_32_INOVACE_FIL16 Vojtěch Filip, 2014 Číslo projektu CZ.1.07/1.5.00/34.0036 Tématický celek Inovace výuky ICT na BPA Název projektu Inovace a individualizace výuky Název materiálu Microsoft Word jednoduchý dokument Číslo materiálu VY_32_INOVACE_FIL16

Více

WEBOVÉ STRÁNKY

WEBOVÉ STRÁNKY 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

Ukázka knihy z internetového knihkupectví www.kosmas.cz

Ukázka knihy z internetového knihkupectví www.kosmas.cz Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h

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

Ukázka knihy z internetového knihkupectví www.kosmas.cz

Ukázka knihy z internetového knihkupectví www.kosmas.cz Ukázka knihy z internetového knihkupectví www.kosmas.cz k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 8 2 1 U k á z k a k n i h y

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

Základní nastavení textového editoru Word 8.0 (Microsoft Office 97)

Základní nastavení textového editoru Word 8.0 (Microsoft Office 97) Základní nastavení textového editoru Word 8.0 (Microsoft Office 97) V následujícím textu jsou zapsány nabídky, příslušné podnabídky a záložky, které je nutné volit a hodnoty nastavení, které je třeba nastavit.

Více

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor

Více

Pokyny k vypracování absolventské práce

Pokyny k vypracování absolventské práce Základní škola a Mateřská škola Bělá pod Pradědem, příspěvková organizace tel.: 584 412 084 e-mail: zsadolfovice@jen.cz Adolfovice 170 web: http://zsadolfovice.cz IČO: 75029456 790 01 Jeseník Pokyny k

Více

Kapitola 1 První kroky v tvorbě miniaplikací 11

Kapitola 1 První kroky v tvorbě miniaplikací 11 Obsah Úvodem 9 Komu je kniha určena 9 Kapitola 1 První kroky v tvorbě miniaplikací 11 Co je to Postranní panel systému Windows a jak funguje 12 Co je potřeba vědět před programováním miniaplikací 16 Vaše

Více

POKROČILÉ ZPRACOVÁNÍ TEXTU

POKROČILÉ ZPRACOVÁNÍ TEXTU POKROČILÉ ZPRACOVÁNÍ TEXTU Hana Rohrová, Roman Rohr Cíle kurzu Po ukončení tohoto kurzu budete schopni: používat pokročilé formátování textu, odstavců, sloupců a tabulek, převádět text na tabulku a naopak,

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

Š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

HTML - pokračování. Co už víme?

HTML - pokračování. Co už víme? HTML - pokračování Co už víme? HTML slouží ke strukturovanému zápisu informací HTML dokument je jako skládačka Je to text uvozený značkou Základní části jsou HEAD a BODY Nadpisy pomocí

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