SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE"

Transkript

1 SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky DIPLOMOVÁ PRÁCE Pavol Hudran 2007 OPAVA

2 SLEZSKÁ UNIVERZITA V OPAVĚ Filozoficko-přírodovědecká fakulta Ústav informatiky Pavol Hudran Bakalářská diplomová práce CSS v praxi (Practical Cascading Style Sheets) vedoucí práce Mgr. Michaela Ačová OPAVA 2007

3 Prohlášení studenta Prohlašuji, že jsem diplomovou práci včetně příloh vypracoval samostatně pod vedením vedoucí diplomové práce a uvedl jsem všechnu použitou literaturu. V Opavě dne Pavol Hudran

4 Poděkování Děkuji především Mgr. Ačové, vedoucí diplomové práce, za její odbornou pomoc a cenné připomínky při vypracování této diplomové práce. Pavol Hudran

5 1. Úvod Tabulky kaskádových stylů (Cascading Style Sheets = CSS) jsou nadstavbou jazyků HTML, XHTML a XML. Slouží k popisu prezentace dokumentů, aniž by jakkoli ovlivňovali jejich obsah a strukturu. Vývoj spravuje a specifikaci jednotlivých verzí publikuje organizace World Wide Web Consorcium (= W3C) Původně formátování dokumentu HTML záviselo na výstupním zařízení. Kvůli rychle se vyvíjejícím potřebám uživatelů a vylepšením výrobců prohlížečů bylo HTML obohaceno příkazy (= tagy) nad rámec původního HTML standardu a jeho logické struktury, což přináší mnoho problémů: špatnou čitelnost kódu pro vyhledávače, ekonomickou zátěž velké množství přenesených kb, špatnou čitelnost pro zařízení postižených lidí i ztrátu nezávislosti a přenositelnosti dokumentu mezi zařízeními. Řešením je návrat k standardizovanému HTML dokumentu s formátováním definovaným odděleně pomocí CSS stylů, čemuž se přizpůsobují i prohlížeče s větší, či menší úspěšností. Prohlížeče rozeznávají několik druhů HTML dokumentů (např. HTML 4.0, HTML 4.0 Transitional, nebo XHTML 1.0) s významem, že dokumenty mohou být formátovány starým, přechodovým, nebo novým způsobem. Starý upřednostňuje formátování formátovacími příkazy jazyka HTML s obohacením formátovacích možností jazykem CSS, to však jen minimálně. Styly jsou často definované přímo v dokumentu tabulkou stylů, nebo přímými styly. Rozvržení layoutu a prvků na stránce je řešené pomocí tabulek - dochází k vnořování tabulek. Přechodový toleruje většinu původních formátovacích příkazů a taktéž nabízí většinu možnosti formátování pomocí CSS s výjimkou rozvržení layoutu, který je stále řešený tabulkou. Styly můžou být do dokumentu začleněné připojením externího souboru. Nový nepodporuje staré formátování, ale plně uplatňuje formátování CSS styly, včetně rozvržení stránky a pozicování jednotlivých prvků. Nový přístup nevytváří HTML dokument jako důsledek navrženého vzhledu, ale postupuje se přesně opačně. Vychází se z obsahu, který má dokument sdělit. Snaží se o co nejlepší strukturování dokumentu: určí se pořadí jednotlivých částí, jejich hiarerchie a vzájemné vazby. Cílem je přehlednost dokumentu, aby začínal nejdůležitějšími informacemi a postupoval k méně důležitým a aby struktura odpovídala sdělovanému obsahu. To přináší výhody: širší formátovací možnosti snadná tvorba a údržba jednotného stylu celého webu (pro celý web stačí jediný soubor s tabulkou stylů) oddělení struktury a stylu (důsledky: přehlednost; obsah a vzhled mohou tvořit různí lidé, což je v praxi často potřeba; tentýž obsah lze beze změny logické struktury naformátovat více [1]

6 způsoby; stylové pravidla je možné tvořit pro obecnou strukturu obsahu ještě dříve, než skutečný obsah vznikne) vyšší přístupnost dokumentů (pro osoby s různými hendikepy, libovolné koncové zařízení např. prohlížeč, tiskárna, zvukový styl pro čtecí zařízení, atd.) dynamická práce se styly (různé efekty jako popup menu, atd.) formátování XML dokumentů Až s takovýmto dokumentem pracuje grafik, který do něj zasahuje jen přidáváním neškodných příkazů <div> a <span>, pro uzavření částí dokumentu do jednotlivých celků, které mu pomáhají realizovat grafický návrh. Ten by měl být navržen s ohledem na současné možnosti formátování, neboť ačkoli je v souhrnu nový způsob formátování alespoň tak silný jako tradiční způsoby, je natolik odlišný, že s tím musí grafik dopředu počítat. Slovo autora Mým cílem bylo vytvořit příručku, která Vám pomůže svou stručností a přehledností v práci. Nejedná se tedy o obsáhlou kuchařku, určenou pro začátečníky, která by Vás vedla krok po kroku, naopak je určená pro mírně pokročilého čtenáře v oblasti webových technologií. Rozdělil jsem práci do několika kapitol, které postupně seznámí čtenáře s jazykem CSS - verzemi a. V současné době je aktuálním tématem verze CSS3, ta je však prohlížeči podporována s obtížemi a jen částečně, proto se o ní v mé práci zmiňuji okrajově. Kapitola 3. Nutná teorie jazyka CSS, jak už název napovídá, seznámí čtenáře s definicí jazyka CSS, tak aby byl schopen dál s jazykem pracovat s jasnou představou o jeho fungování, ale aby nebyl teorií přílišně zatěžován. V kapitole 4. Přehled funkcí a vlastností CSS uvádím seznam vlastností jazyka CSS se základními sledovanými parametry. Podrobnější popis k jednotlivým vlastnostem by však byl nad rámec této práce, proto odkazuji čtenáře na použitou literaturu. Kapitolou 5. CSS v praxi dovršuji svou práci a předkládám čtenáři řešení pokročilých formátovacích situací větší část této kapitoly obsahuje příloha č. 1 na CD ve formátu HTML a CSS pro snadnější manipulaci. 2

7 2. Obsah 1. ÚVOD OBSAH NUTNÁ TEORIE JAZYKA CSS PODPORA CSS PROHLÍŽEČI VAZBA CSS NA (X)HTML A XML DOKUMENTY Vazba na HTML dokumenty Vazba na XHTML dokumenty Vazba na XML dokumenty SYNTAXE CSS Symbolický popis syntaxe Speciální znaky Symboly v zápisu syntaxe Definice CSS Hodnoty a jednotky Média Použití médií v tabulkách stylů Strom dokumentu Vztahy mezi prvky: Selektory v tabulkách stylů Kombinování selektorů Pseudo-prvky a pseudo-třídy Dědičnost a kaskáda CSS Postup hledání optimální hodnoty Dědičnost Kaskádování Hodnota a a!important Vizuální formátovací model Koncepce boxů Generování boxů Poziční schéma Výpočet rozměrů prvků KRÁTCE O CSS PŘEHLED FUNKCÍ A VLASTNOSTÍ CSS CSS V PRAXI OBECNÉ POSTUPY CHYBY PROHLÍŽEČŮ USPOŘÁDÁNÍ STRÁNKY SEZNAMY FORMULÁŘE A TABULKY FORMÁTOVÁNÍ TEXTU

8 5.7. VIZUÁLNÍ EFEKTY UŽITEČNÉ RADY ZÁVĚR LITERATURA PŘÍLOHY

9 3. Nutná teorie jazyka CSS 3.1. Podpora CSS prohlížeči Jazyk CSS je v jednotlivých prohlížečích implementován v rozdílném rozsahu, nebo různým způsobem. To znamená, že ne všechny definice a vlastnosti (popř. jejich hodnoty) jsou podporovány jednotlivými prohlížeči podle W3C specifikace jazyka a jeho verzí. Některé vlastnosti buďto nejsou podporované vůbec, nebo je prohlížeče pojímají po svém a tím se odklánějí od W3C spefifikace. Většinou je oním problémovým prohlížečem MS InternetExplorer 1. Naštěstí, řešit tyto problémy bude čím dál míň potřeba, protože současné prohlížeče se čím dál víc přibližují specifikacím. Stále však přetrvává nutnost mít znalost, které definice a vlastnosti (popř. jejich hodnoty) jsou podporované jakým prohlížečem. 2 1 Více v kapitole 5.2. Chyby prohlížečů. 2 Více v kapitolách Selektory v tabulkách stylů a 4. Přehled funkcí a vlastností CSS, popř. v použité literatuře. 5

10 3.2. Vazba CSS na (X)HTML a XML dokumenty Vazba na HTML dokumenty a) Připojením externího souboru Připojení externího souboru k dokumentu s tabulkou stylů se provádí vložením příkazu <link> do hlavičky dokumentu. K dokumentu může být takto připojeno více externích souborů. Tento způsob důsledně naplňuje ideu oddělení formátování od struktury dokumentu a přináší výhody s tím spojené (např. po prvním načtení dokumentu daného webového místa se stylový soubor ukládá do paměti a načítání dalších dokumentů se tím podstatně urychlí). Tabulka 1: popis vlastnosti link [2, str ] Příkaz <link> má atributy: href: URL adresa k externímu souboru s tabulkou stylů type: Content-type, neboli typ obsahu vždy text/css rel: typ vazby k externímu zdroji, vždy stylesheet pro základní tabulky stylů, resp. alternate stylesheet pro alternativní tabulky stylů media: druh média, pro který je tabulka stylů určena; nepovinný atribut; implicitní hodnota all, viz část Média title: titulek k tabulce stylů; praktický význam jen u alternate stylesheet Příklad 1: [1, str. 37] <head> <link rel="stylesheets" type="text/css" href="<uri>"> </head> b) Tabulkou stylů v dokumentu Vložení tabulky stylů přímo do hlavičky dokumentu se provádí pomocí příkazu <style>. Je zřejmé, že se tabulka stylů načítá s každým načtením dokumentu to vede ke zvýšení objemu přenesených dat (oproti předchozímu přístupu), také je náročnější přestylování webu. Ovšem hodí se tam, kde z nějakého důvodu potřebujeme definovat styly přímo v dokumentu. Tabulka stylů je určená seznamem pravidel složených ze selektorů a k nim příslušných seznamu definic stylů, popř. doplněná komentáři. Stejného efektu předchozího přístupu docílíme pomocí vepsání do tabulky stylů. Příkaz <style> má atributy: type, media, title viz. Připojením externího souboru. 6

11 Příklad 2: [1, str. 36] <head> <style type="text/css"> <!-- tabulka_stylů //--> </style> </head> c) Přímým stylem Styly lze přiřadit i jednotlivým prvkům dokumentu prostřednictvím atributu style. Hodnotou atributu je definice stylu (resp. seznamu definic stylu). Tento způsob je nevhodný a v novějších verzích XHTML dokonce nepřípustný. Často se používá pro testování vzhledu během vývoje webu. Příklad 3: <značka style="seznam_definic"> d) Dynamicky klientským skriptováním a DOM Načtené CSS definice jsou uloženy v poli document.stylesheets[], kde každá položka v poli odpovídá jedné sekci <STYLE>, včetně externích souborů načtených nebo pomocí příkazu <LINK>. Pořadí položek v poli pak odpovídá pořadí načítání CSS. Obecně podporovaná je pouze vlastnost disabled, která (de)aktivuje daný stylesheet. Příklad 4: [4)] document.stylesheets[n].disabled = true false Vazba na XHTML dokumenty Vložení stylů do dokumentu se provádí především připojením externího souboru jako u HTML dokumentu, nebo tabulkou stylů v dokumentu (od tohoto způsobu se upouští). Příklad 5: [1), str. 37] <head> <style type="text/css"> /* <![CDATA[ */ tabulka_stylů /* ]] */ </style> </head> Vazba na XML dokumenty V jazyce XML se externí soubory s CSS načítají do dokumentu pomocí deklarace: Příklad 6: [1), str. 38] <?xml stylesheet type="text/css" tref="url"> 7

12 3.3. Syntaxe CSS Symbolický popis syntaxe Používají se znaky podle normy ISO v českém prostředí jsou doporučené pouze znaky ASCII. U názvů prvků, jež jsou součástí jazyka CSS, nezáleží na velikosti písmen. Kdežto u názvů prvků dokumentu záleží na velikosti písmen v závislosti na specifikaci jazyka dokumentu. Např. pro HTML nezáleží, kdežto pro XML záleží na velikosti písmen Speciální znaky uvozovky ( " = ASCII 34), ( = 39), mezera, tj. libovolně velká posloupnost mezer (mezera = 32, CR = 12, LF = 10, FF = 12, TAB = 9) čárka (, = 44) a středník ( ; = 59) pro oddělovaní seznamu Význam speciálních znaků může být změněn zpětným lomítkem \, který také slouží k zápisu znaku v dekadickém nebo hexadecimálním tvaru Symboly v zápisu syntaxe Tyto symboly se budou používat v příkladech pro jednodušší pochopení platnosti zápisu syntaxe: Tabulka 2: symboly v zápisu syntaxe [1), str. 39] symbol [ ] [X] * [X] + [X]? [X]{m,n} [X Y Z] [X Y Z] mezera Popis hranaté závorky uzavírají položku pro následující varianty. Výraz X se může vyskytovat v lib. počtu 0 až n-krát. Výraz X se může vyskytovat v lib. počtu, ale alespoň jednou (1 až n-krát). Výraz X se může i nemusí vyskytovat (0 nebo 1-krát). Výraz X se opakuje nejméně m-krát a nejvýše n-krát. Seznam alternativ, vyskytuje se právě jedna z uvedených položek. Seznam alternativ, vyskytuje se jedna či více z uvedených položek v lib. pořadí. Všude kde je mezera může být lib. prázdný prostor. Některé znaky (, [, ], {, },?, *, +, mezera ) mají zvláštní význam - pokud se tento znak vyskytne v textu, bude uveden v uvozovkách. 8

13 Definice CSS Vlastnosti můžou být jednoduché nebo sdružené. Jednoduché vlastnosti mají definici stylu ve tvaru vlastnost: hodnota;, kde mezera je nepovinná a středník za hodnotou se zapisuje vždy, když existuje vlastnost ležící za uvažovanou vlastností v seznamu definic stylu. Sdružené vlastnosti umožňují v jedné definici stylu nastavit více vlastností najednou, zadáním seznamu hodnot oddělených mezerami a to: sdružená_vlastnost: hodnota[ hodnota]*. Kde při vynechání libovolné hodnoty seznamu se příslušná vlastnost nenastaví, ale zdědí z nejbližšího nadřízeného prvku. Definice stylu je přiřazením hodnoty (resp. seznamu hodnot) vlastnosti (resp. sdružené vlastnosti). Definice se mohou spojovat do seznamu definic stylu, který je ve tvaru definice[; definice]*, neboli vlastnost: hodnota[; vlastnost: hodnota]*. Tabulka stylů definuje styly pro celý dokument. Je určena seznamem pravidel a atp. rozšiřující CSS o další funkce viz dále v textu). pravidlo = selektor { seznam_definic }, kde selektor je symbolický popis prvku, či skupiny prvků. Rozvoj pravidla: { seznam_definic; }, { definice[; definice]* }, { vlastnost: hodnota[; vlastnost: hodnota]* }, Popř. { sdružená_vlastnost: hodnota[; hodnota]* }. Příklad 7: /* ukázka možných zápisů pravidel url("styly.css"); P { font-weight: bold; font-size: 12pt; } P { font: bold 12pt; } komentář at-pravidlo pravidlo se seznamem definic pravidlo se sdruženými vlastnostmi Samozřejmě je víc možností, jak zapisovat pravidla do tabulky stylů (viz dále v textu). Mezi jednotlivými pravidly píšeme mezeru. Identifikátory pravidel (názvy prvků) nemohou začínat pomlčkou nebo číslem Hodnoty a jednotky Tabulka 3: typy hodnot i jednotek a jejich charakteristika [1), str ; 2, str ] hodnota popis příklad <klíčová slova> <číslo> obvykle zastupuje jinou hodnotu, na níž se dané klíčové slovo převede; zapisujeme bez uvozovek celé [+ -]<číslo> přirozenému číslu může předcházet symbol +, - (bez mezery) color: yellow kde yellow = rgb(100%,100%,0%)) 0, 1, 10,

14 reálné [+ -]<číslo>[.<číslo>]? jsou buď celá, nebo desetinná čísla; desetinná část se odděluje. 0, 1, 10, -156, , -2.1,.3 <velikost> relativní jednotky em ex vypočítaná hodnota vlastnosti fontsize aktuálního prvku; při použití v samotné vlastnosti font-size se hodnota vztahuje k vlastnosti fontsize rodičovského prvku výška malého písmene x zvoleného písma; často prohlížeče mylně interpretují jako 1ex = 0.5em line-height: 1.2em font-size: 1.2em font-size: 1.2ex px obrazový bod, jehož velikost závisí na zobrazovacím zařízení: obrazovka, tiskárna, projektor, atp. width: 780px absolutní jednotky mm milimetr width: 100mm cm centimetr width: 10cm in palec (angl. inch) 25,4mm width: 3.94in pt typografický bod (angl. point) 1/72 in, především při výstup na tiskárnu 72pt = 1in, 1pt = mm pc typografická jednotka pica 1pc = 12pt 1in = 6pc = 72pt <%> zapisujeme: <číslo>% (bez mezery); procenta se vztahují k jiné hodnotě, kterou je nutno uvést - např. jiná hodnota stejného prvku, stejná hodnota předchůdce, nebo hodnota formátovacího kontextu 100%, 33.33%, -10%,.5% <uri> platná adresa nějakého zdroje na webu; je uzavřená v, nebo "; zapisujeme absolutně (včetně názvu protokolu), nebo relativně (pokud se nacházíme v aktuálním nebo vnořeném adresáři); musí být kódována UTF-8 url("http://bouse. blbeckove.com/ ebook/css.pdf") url(../css.pdf) url(../css.pdf ) url("../css.pdf")../css.pdf "../css.pdf " <barva> číselně hexadecimálně #[RRGGBB RGB] kde R červená, G zelená, B modrá #B1F836 (kde R = B1, G = F8, B = 36 ), #BB5588 (resp. #B58) dekadicky a procentuálně pomocí funkce rgb(r,g,b), kde R, G, B musí být uvedené buď shodně dekadicky, nebo shodně procentuálně. rgb(127, 0, 255) tj. rgb(50%,0%,100%) 10

15 klíčová slova AliceBlue (#F0F8FF), AntiqueWhite (#FAEBD7), Aqua (#00FFFF), Aquamarine (#7FFFD4), Azure (#F0FFFF), Beige (#F5F5DC), Bisque (#FFE4C4), Black (#000000), BlanchedAlmond (#FFEBCD), Blue (#0000FF), BlueViolet (#8A2BE2), Brown (#A52A2A), BurlyWood (#DEB887), CadetBlue (#5F9EA0), Chartreuse (#7FFF00), Chocolate (#D2691E), Coral (#FF7F50), CornflowerBlue (#6495ED), Cornsilk (#FFF8DC), Crimson (#DC143C), Cyan (#00FFFF), DarkBlue (#00008B), DarkCyan (#008B8B), DarkGoldenRod (#B8860B), DarkGray (#A9A9A9), DarkGrey (#A9A9A9), DarkGreen (#006400), DarkKhaki (#BDB76B), DarkMagenta (#8B008B), DarkOliveGreen (#556B2F), Darkorange (#FF8C00), DarkOrchid (#9932CC), DarkRed (#8B0000), DarkSalmon (#E9967A), DarkSeaGreen (#8FBC8F), DarkSlateBlue (#483D8B), DarkSlateGray (#2F4F4F), DarkSlateGrey (#2F4F4F), DarkTurquoise (#00CED1), DarkViolet (#9400D3), DeepPink (#FF1493), DeepSkyBlue (#00BFFF), DimGray (#696969), DimGrey (#696969), DodgerBlue (#1E90FF), FireBrick (#B22222), FloralWhite (#FFFAF0), ForestGreen (#228B22), Fuchsia (#FF00FF), Gainsboro (#DCDCDC), GhostWhite (#F8F8FF), Gold (#FFD700), GoldenRod (#DAA520), Gray (#808080), Grey (#808080), Green (#008000), GreenYellow (#ADFF2F), HoneyDew (#F0FFF0), HotPink (#FF69B4), IndianRed (#CD5C5C), Indigo (#4B0082), Ivory (#FFFFF0), Khaki (#F0E68C), Lavender (#E6E6FA), LavenderBlush (#FFF0F5), LawnGreen (#7CFC00), LemonChiffon (#FFFACD), LightBlue (#ADD8E6), LightCoral (#F08080), LightCyan (#E0FFFF), LightGoldenRodYellow (#FAFAD2), LightGray (#D3D3D3), LightGrey (#D3D3D3), LightGreen (#90EE90), LightPink (#FFB6C1), LightSalmon (#FFA07A), LightSeaGreen (#20B2AA), LightSkyBlue (#87CEFA), LightSlateGray (#778899), LightSlateGrey (#778899), LightSteelBlue (#B0C4DE), LightYellow (#FFFFE0), Lime (#00FF00), LimeGreen (#32CD32), Linen (#FAF0E6), Magenta (#FF00FF), Maroon (#800000), MediumAquaMarine (#66CDAA), MediumBlue (#0000CD), MediumOrchid (#BA55D3), MediumPurple (#9370D8), MediumSeaGreen (#3CB371), MediumSlateBlue (#7B68EE), MediumSpringGreen (#00FA9A), MediumTurquoise (#48D1CC), MediumVioletRed (#C71585), MidnightBlue (#191970), MintCream (#F5FFFA), MistyRose (#FFE4E1), Moccasin (#FFE4B5), NavajoWhite (#FFDEAD), Navy (#000080), OldLace (#FDF5E6), Olive (#808000), OliveDrab (#6B8E23), Orange (#FFA500), OrangeRed (#FF4500), Orchid (#DA70D6), PaleGoldenRod (#EEE8AA), PaleGreen (#98FB98), PaleTurquoise (#AFEEEE), PaleVioletRed (#D87093), PapayaWhip (#FFEFD5), PeachPuff (#FFDAB9), Peru (#CD853F), Pink (#FFC0CB), Plum (#DDA0DD), PowderBlue (#B0E0E6), Purple (#800080), Red (#FF0000), RosyBrown (#BC8F8F), RoyalBlue (#4169E1), SaddleBrown (#8B4513), Salmon (#FA8072), SandyBrown (#F4A460), SeaGreen (#2E8B57), SeaShell (#FFF5EE), Sienna (#A0522D), Silver (#C0C0C0), SkyBlue (#87CEEB), SlateBlue (#6A5ACD), SlateGray (#708090), SlateGrey (#708090), Snow (#FFFAFA), SpringGreen (#00FF7F), SteelBlue (#4682B4), Tan (#D2B48C), Teal (#008080), Thistle (#D8BFD8), Tomato (#FF6347), Turquoise (#40E0D0), Violet (#EE82EE), Wheat (#F5DEB3), White (#FFFFFF), WhiteSmoke (#F5F5F5), Yellow (#FFFF00), YellowGreen (#9ACD32) <řetězec> reprezentuje nějaký text, který vpisujeme mezi, nebo "; možný zápis: " "; výskyt znaků, jimiž je řetězec omezen: \, "\"", "\\", odřádkování: "\n", popř. rozepsání ve zdroji na více řádků: "...\..." <audio> <úhel> <čas> <číslo>[deg rad grad], kde číslo je kladné, deg jsou stupně (v tom případě může být číslo i záporné automaticky se přepočítává, rozmezí: 0º- 360º), rad radiany, grad grady (360º = 400gradů) <číslo>[s ms], kde číslo je kladné a s jsou sekundy, ms milisekundy P.pozn:before { content: "citace odřádkovaného textu \n na výstupu " } A[title="velmi dlou\ hý titulek] {... } 10deg = 350deg = rad = 388.9grad 120ms, 5s <frekvence> <číslo>[hz khz], kde číslo je kladné a Hz jsou hertze, khz kilohertze 2400Hz, 4.2kHz 11

16 Média Jedním z hlavních úkolů CSS je určit, jakým způsobem se má zobrazit dokument na různých typech koncových zařízení (médiích), tj. definovat pro ně rozdílné styly prezentace dokumentu. Média jsou určené typem a mají přiřazenou minimálně jednu skupinu médií, do které náleží. Příslušnost ve skupině přiřazuje médiu množinu vlastností, definovanou pro tuto skupinu. Proto se jednotlivé typy médií vyznačují rozdílnou množinou vlastností (popř. hodnot těchto vlastností). Tabulka 4: typy médií a jejich charakteristika [1), str ; 2), str ] typ média popis stránkovaná plynulá zvuková vizuální hmatová znaková grafická interaktivní statická all všechny typy médií aural zvukový výstup na klávesovém syntetizátoru braille braillova dotyková zařízení embossed stránka zobrazená plastickým tiskem na braillově tiskárně handheld obrazovka kapesního počítače print náhled tisku, stránky tištěné na tiskárně projeciton promítané prezentace (např. projektory) screen obrazovka počítače tty neproporční znakový výstup (dálnopisy, terminály, atp.) tv televizní obrazovky a podobné zařízení Použití médií v tabulkách stylů Připojení tabulky stylů do hlavičky dokumentu, která má platit pouze pro dané médium: Příklad 8: [1), str ] <link rel="stylesheet" type="text/css" href="styl.css" media="seznam_medií"> <style type="text/css" media="seznam_medií"> <!-- tabulka_stylů //--> </style> <style url("url"): seznam_medií; </style> kde seznam médií obsahuje názvy médií oddělené čárkou. Implicitně je nastaveno all. Pro definování médií přímo v tabulce stylů : Příklad 9: [1), str. seznam_medií { /* pravidla platná pro tato média */ } 12

17 uvnitř bloku nesmíme importovat další tabulky stylů Strom dokumentu HTML i XML popisují dokument pomocí stromové struktury. Kořenový prvek, který je jediný (př. <html> ), obsahuje všechny ostatní prvky. Ty jsou uzavřené do jednotlivých celků větví, vytvářejících hierarchii dokumentu. Možné vztahy mezi prvky stromové struktury ilustruje příklad: Příklad 10: [1), str. 49] <html> <head> <title>titulek stránky</title> </head> <body> <h1>nadpis1</h1> <p>odstavcový text</p> <ul> <li>položka seznamu1</li> <li>položka seznamu2</li> </ul> </body> </html> Vztahy mezi prvky: Tabulka 5: demonstrace vztahů mezi prvky [1, str ] Každý prvek kromě kořenového obsahuje právě jeden rodičovský prvek. Každý rodič má množinu potomků, tj. prvky, které bezprostředně obsahuje. Prvky, které rodič obsahuje, ale ne bezprostředně (jsou hlouběji vnořené), jsou jeho následovníci. Potomci stejného rodiče jsou sourozenci. Předcházející sourozenec je prvek, který předchází uvažovanému prvku a je současně sourozenec. např. pro 4. je rodič 1. např. pro 4. jsou potomci 5.,6., 7. např. pro 4. jsou následovníci 8., 9. např. 5., 6., 7. jsou sourozenci např. pro 6. je předcházející sourozenec 5. Obdobně následující sourozenec. např. pro 6. je následující sourozenec 7. Předcházející prvek je prvek, který je předcházející sourozenec nebo předek. Následující prvek je prvek, který je následující sourozenec nebo následovník. např. pro 6. jsou předcházející prvky 5., 4., 1. např. pro 6 jsou následující prvky 7., 8., Selektory v tabulkách stylů Mějme: pravidlo = selektor {seznam_definic} Selektor je přepínač pravidla je to symbolický popis prvku nebo skupiny prvků, které se v dokumentu mohou vyskytovat. Pokud selektor vyhovuje prvku, potom se prvku přiřazuje seznam definic pravidla. Ovšem prvek může vyhovovat více pravidlům, což řeší kaskádování a dědičnost (viz dále). Selektorů je více druhů a existuje i několik operátorů. 13

18 Tabulka 6: typy selektorů a jejich charakteristika [1), str ; 2), str ] skupina typ selektoru popis příklad podpora základní univerzální označuje se symbolem * a vyhovují mu všechny prvky dokumentu rozšířené s atributy typový existence atributu atribut dané hodnoty atribut obsahující danou hodnotu atribut obsahující danou podhodnotu vícenásobné atributy vyhovují mu všechny prvky daného typu značky označuje se x[atribut] a vyhovují mu všechny prvky typu x (i pro * ), které mají (jakkoli) definovaný zvolený atribut označuje se x[atribut=hodn] a vyhovují mu prvky typu x (i pro * ), jejichž atribut má hodnotu přesně rovnu hodn. Hodnotami jsou buď id, nebo jméno třídy nebo řetězce označuje se x[atribut~=hodn[ hodn] * ] (ekvivalentně x.hodn[.hodn] * ) a vyhovují mu prvky typu x (i pro * ), jejichž atribut je atribut=hodn resp. atribut=hodn[ hodn] * pro vícenásobné třídy označuje se x[atribut =hodn] a vyhovují mu prvky typu x (i pro * ), jejichž atribut obsahuje seznam hodnot oddělených spojovníkem (znak - ), a první z nich je právě hodnota hodn označuje se x[atribut[=hodn]? ] + a vyhovují mu prvky typu x (i pro * ), jež odkazuje na více atributů prvku, nebo na více možných hodnot jednoho atributu vlastní třídy označuje se x[class~=hodn[ hodn] * ] (ekvivalentně x.hodn[.hodn] * ) a vyhovují mu prvky typu x (i pro * ), jejichž atribut je class=hodn, resp. class=hodn[ hodn] * pro vícenásobné třídy * {font-size: 10pt} IE5.0 img {border: 1px solid #FF0000} *[alt] {... } img[title] {... } *[alt="popis1"] {...} img[title="titul1"] {...} p[id="odstavec1"] {...} div[class="box1"] {...} *[class~="nadpis"] {...} pro <h1 class="nadpis"> <h1 class="cervena nadpis kurziva"> platí, kdežto pro <h1 class="cervenanadpi s"> neplatí a[lang="en-us"] {...} a[lang="cs"][title] {...} h1[class~="nadpis"] {...} h1[class~="cerveny nadpis kurzivou"] {...} ekvivalentně h1.nadpis {...} h1.cerveny.nadpis.k urzivou {...} NN4.0 IE4.0 OP5.0 IE5.0 resp. 14

19 id označuje se x[id~=hodn] (ekvivalentně x#hodn ) a vyhovují mu prvky typu x (i pro * ), jejichž atribut je id=hodn, hodn musí nabývat unikátních hodnot h1#nadpis {...} *#nadpis {...} #nadpis {...} NN4.0 IE4.0 resp. Kdy použít atribut id a kdy class : to vychází z povahy atributu id z jeho unikátnosti. Atribut id tedy používáme u prvku, o němž víme, že se v dokumentu vyskytuje pouze jednou, a class naopak u prvku, o němž víme, že se vyskytuje vícekrát Kombinování selektorů Selektory je možné vícenásobně kombinovat pomocí operátorů a podle jejich kontextu a vazeb na okolí ve stromu dokumentu, což umožňuje vytvářet velmi složité i podrobné selektory, a tím rozšířit jejich pole působnosti. Tabulka 7: relační operátory mezi selektory [1), str ; 2), str ] operátor popis příklad podpora, mezera slučování umožňuje do jednoho pravidla sloučit více selektorů, které mají mít shodnou definici stylu; dál v kódu je možné pravidla samostatně (pře)definovat následnictví definice stylu pro potomka, nebo následníka uvažovaného prvku > potomek definice stylu pro přímého potomka uvažovaného prvku + sousední sourozenci definice stylu pro následujícího sourozence uvažovaného prvku (časté využití pro oddělovače mezi stejnými prvky) h1, h2 {color: blue} h1 {font-size: 12pt} h1 strong {color: blue}... <h1><strong>nadpis1 </strong></h1> h1>strong {color: blue} platí pro <h1><strong> nadpis1</strong></h1> ale neplatí pro <h1><i><strong> nadpis1</strong></i></h1> li+li { border-top: 1px solid black } NN4.0 IE4.0 IE4.4, Pseudo-prvky a pseudo-třídy Pseudo-prvky a pseudo-třídy umožňují formátování na základě informací existujících mimo strom dokumentu. Pseudo-prvky rozšiřují strom dokumentu o prvky, které v dokumentu neexistují. Pseudo-třídy umožňují rozlišit prvky podle jiných charakteristik, než je jméno a atribut - tedy takových, které nelze odvodit přímo ze stromu dokumentu. Mohou být i dynamické prvky díky aktivitě uživatele do třídy střídavě patří nebo nepatří. Každý klient je interpretuje po svém, proto jimi není vhodné definovat důležité informace pro použití stránky. Pseudo-prvky a pseudo-třídy mohou být uvedeny jen za názvem selektoru. Na velikosti písmen v jejich názvech nezáleží. Některé z nich lze volně kombinovat, zatímco jiné se vylučují. 15

20 Tabulka 8: typy pseudo-prvků i pseudo-tříd a jejich charakteristika [1), str ; 2), str ] kategorie prvky/třídy popis příklad podpora pseudo-prvky pseudo-třídy textové (blokové) vkládání nového obsahu hypertextové odkazy dynamické :first-line :first-letter :before :after :first-child :link :visited :hover :active definice stylu pro první řádek odstavce (může být přiřazen pouze blokovému prvku) definice stylu pro první znak textu iniciála (může být přiřazen pouze blokovému prvku; pokud není vlastnost float: none, tak se chová jako plovoucí prvek) vkládání dat obsahu před prvek (pomocí vlastnosti content ) vkládání dat obsahu za prvek (pomocí vlastnosti content ) vztahuje se k prvku daného typu, který je prvním potomkem nějakého prvku vztahuje se k dosud nenavštíveným odkazům vztahuje se k navštíveným odkazům, s pseudo-třídou :link se vylučuje vztahuje se k prvku, na něhož uživatel ukázal zařízením, ale neaktivoval jej (např. myší) vztahuje se k prvku, jenž byl aktivován (např. v době mezi stiskem a uvolněním tlačítka myši) :focus vztahuje se k prvku, jenž získal zaměření akcí uživatele (např. z klávesnice tabulátor); většinou má uplatnění u formulářových prvků jazykové :lang(jaz) definice jazyka prvku; za jaz dosadíme zkratku zvoleného jazyka (pro stránku definujeme jazyk v meta příkazu a hlavičce protokolu HTTP) p:first-line { font-variant: small-claps } p:first-letter { float:left; fontsize: 18pt } p:before { content: "hlavička"} p:after {content: "hlavička" } div>p:first-child {text-indent: 0px} uvádíme pravidla ve vhodném pořadí od nejobecnějších k nejkonkrétnějším tj. např. pro značku a : a:link {color: red} a:visited {color: green} a.externi:visited {color: purple} a:hover {color: yellow} a:active {color: lime} je možné kombinovat pseudo-třídy: input:focus:hover {...} q:lang(en) {quotes: } q:lang(cs) {quotes: } q:lang(fr) {quotes: } IE5.5 OP5.0 IE4.0 OP5.0 IE4.0 OP Dědičnost a kaskáda CSS Každý prvek dokumentu může vyhovovat více definicím stylu najednou definovaných (i) v několika tabulkách stylů, nebo jako důsledek dědičnosti. Při správném výběru hodnoty se uplatňuje základní princip CSS: kaskádování (viz dále). 16

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

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

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

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy)

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) 15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

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. 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

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

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

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 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

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

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

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz 6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj

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

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

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

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 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 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

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

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

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

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

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

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie Škola Střední odborná škola a Střední odborné učiliště, Hustopeče, Masarykovo nám. 1 Autor Ing. Jiří Tinka Číslo projektu CZ.1.07/1.5.00/34.0394 Číslo DUM VY_32_INOVACE_18_ICT_08.08a Název Tvorba webu

Více

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem

CSS styly - úvod. Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem CSS styly - úvod Formátování HTML - Kdy používat CSS - Nástin možností CSS - Trojí použití CSS - Příklady - Syntaxe - Příklad s nadpisem Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 3. část Vztahy mezi elementy»

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

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

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Označení: C8 Stručná charakteristika modulu Modul si klade za cíl seznámit detailněji s tvorbou webových stránek pomocí kódovacího jazyka

Více

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

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

Microsoft Small Basic. Úvod do programování

Microsoft Small Basic. Úvod do programování Microsoft Small Basic Úvod do programování Kapitola 1 Úvod Small Basic a programování Programování je proces vytváření počítačového software za použití programovacích jazyků. Stejně jako my mluvíme a rozumíme

Více

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie

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

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

Kódy pro formát čísla

Kódy pro formát čísla Kódy pro formát čísla y pro formát čísel se mohou skládat až z tří částí oddělených středníkem (;). Pokud formátovací kód obsahuje dvě části, první část se použije pro kladné hodnoty a nulu, druhá část

Více

Inovace výuky prostřednictvím ICT v SPŠ Zlín, CZ.1.07/1.5.00/34.0333 Vzdělávání v informačních a komunikačních technologií

Inovace výuky prostřednictvím ICT v SPŠ Zlín, CZ.1.07/1.5.00/34.0333 Vzdělávání v informačních a komunikačních technologií VY_32_INOVACE_33_05 Škola Střední průmyslová škola Zlín Název projektu, reg. č. Inovace výuky prostřednictvím ICT v SPŠ Zlín, CZ.1.07/1.5.00/34.0333 Vzdělávací oblast Vzdělávání v informačních a komunikačních

Více

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči

Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje

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

KAPITOLA 1 Přehled aktuálního vývoje webů 11

KAPITOLA 1 Přehled aktuálního vývoje webů 11 Obsah Úvodem 9 KAPITOLA 1 Přehled aktuálního vývoje webů 11 Definice webového designu 12 Poznejte sedm pravidel webového designu 14 Pochopte tři přístupy k webovému designu 16 Shrnutí 24 KAPITOLA 2 Design

Více

Kaskádové styly 4IZ228 tvorba webových stránek a aplikací

Kaskádové styly 4IZ228 tvorba webových stránek a aplikací 4IZ228 tvorba webových stránek a aplikací Jirka Kosek Poslední modifikace: $Date: 2014/10/02 11:38:43 $ Obsah Úvod... 3 Důvody vzniku CSS... 4 Problémy s rádoby graficky dokonalými stránkami... 5 Řešení

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

Nová struktura souborů a složek

Nová struktura souborů a složek Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky

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

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

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

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008) 1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

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

Jazyky pro popis dat

Jazyky pro popis dat Realizováno za finanční podpory ESF a státního rozpočtu ČR v rámci v projektu Zkvalitnění a rozšíření možností studia na TUL pro studenty se SVP reg. č. CZ.1.07/2.2.00/29.0011 Jazyky pro popis dat Pavel

Více

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

Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument Informatika pro moderní fyziky (8) 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 podpory palivového

Více

DATABÁZE A SYSTÉMY PRO UCHOVÁNÍ DAT 61 DATABÁZE - ACCESS. (příprava k vykonání testu ECDL Modul 5 Databáze a systémy pro zpracování dat)

DATABÁZE A SYSTÉMY PRO UCHOVÁNÍ DAT 61 DATABÁZE - ACCESS. (příprava k vykonání testu ECDL Modul 5 Databáze a systémy pro zpracování dat) DATABÁZE A SYSTÉMY PRO UCHOVÁNÍ DAT 61 DATABÁZE - ACCESS (příprava k vykonání testu ECDL Modul 5 Databáze a systémy pro zpracování dat) DATABÁZE A SYSTÉMY PRO UCHOVÁNÍ DAT 62 Databáze a systémy pro uchování

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

Formátování diplomové práce (Office 2007,2010)

Formátování diplomové práce (Office 2007,2010) Formátování diplomové práce (Office 2007,2010) Formátování textu Formát textu je jeden z faktorů, který ovlivní celkový dojem a funkčnost dokumentu. Mnoho začátečníků se zpočátku nechává unést možnostmi

Více

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN RESEARCH / DATA

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN RESEARCH / DATA Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN RESEARCH / DATA Modul FADN RESEARCH je určen pro odborníky z oblasti zemědělské ekonomiky. Modul neomezuje uživatele pouze na předpřipravené

Více

Microsoft Word - Styly, obsah a další

Microsoft Word - Styly, obsah a další Microsoft Word - Styly, obsah a další Definice uživatelských stylů Nový - tzv. uživatelský styl - se vytváří pomocí panelu Styly a formátování stiskem tlačítka Nový styl. Po stisknutí tlačítka se objeví

Více

Co je nového v aplikaci QuarkXPress 2015

Co je nového v aplikaci QuarkXPress 2015 Co je nového v aplikaci QuarkXPress 2015 OBSAH Obsah Co je nového v aplikaci QuarkXPress 2015...3 Nové funkce...4 64bitová aplikace...4 Proměnné obsahu...4 Tabulky v řádku...5 Poznámky pod čarou a Poznámky

Více

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9. Jazyk XSL - rychlá transformace dokumentů 9. prosince 2010 Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí stylů Formátování dokumentu pomocí XSL FO Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí

Více

24. XML. Aby se dokument XML vůbec zobrazil musí být well-formed (správně strukturovaný). To znamená, že splňuje formální požadavky specifikace XML.

24. XML. Aby se dokument XML vůbec zobrazil musí být well-formed (správně strukturovaný). To znamená, že splňuje formální požadavky specifikace XML. 24. XML Úvod Značkovací jazyk XML (extensible Markup Language) vznikl ze staršího a obecnějšího jazyku SGML (Standard Generalized Markup Language). XML byl vyvinut konsorciem W3C, aby poskytl standardní

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

Inovace výuky prostřednictvím šablon pro SŠ

Inovace výuky prostřednictvím šablon pro SŠ Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748

Více

Úvod do problematiky ÚPRAVY TABULKY

Úvod do problematiky ÚPRAVY TABULKY Úvod do problematiky ÚPRAVY TABULKY Zaměříme se na úpravy, které určují finální grafickou úpravu tabulky (tzv. formátování.). Měnit můžeme celou řadu vlastností a ty nejdůležitější jsou popsány v dalším

Více

Vkládání prvků do dokumentu MS Word

Vkládání prvků do dokumentu MS Word Vkládání prvků do dokumentu MS Word 1. Vkládání Do dokumentu můžeme vložit celou řadu prvků, počínaje čísly stránek a obrázky konče. 1.1. Konec stránky Pokud chceme, aby odstavec byl vždy posledním na

Více

KAPITOLA 5 - POKROČILÉ ZPRACOVÁNÍ TEXTU

KAPITOLA 5 - POKROČILÉ ZPRACOVÁNÍ TEXTU KAPITOLA 5 - POKROČILÉ ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY Oddíly, styly, poznámka pod čarou, revize, obsah, rejstřík, záložka, citace a seznamy literatury, vzorce, vložené a propojené objekty, oddíly, zabezpečení.

Více

Znak Slovy Popis Zdroj Výsledek Formátova cí řetězec v CZ verzi Excelu

Znak Slovy Popis Zdroj Výsledek Formátova cí řetězec v CZ verzi Excelu řetězec v Všeobecný Odpovídá obecnému formátu - čísla i text bude zarovnán dle kontextu (při nastavení češtiny tedy Excel zarovná text doleva, čísla a časové údaje doprava). Tento formát nemusíme zadávat

Více

KAPITOLA 4 ZPRACOVÁNÍ TEXTU

KAPITOLA 4 ZPRACOVÁNÍ TEXTU KAPITOLA 4 ZPRACOVÁNÍ TEXTU TABULÁTORY Jsou to značky (zarážky), ke kterým se zarovná text. Můžeme je nastavit kliknutím na pravítku nebo v dialogovém okně, které vyvoláme kliknutím na tlačítko Tabulátory

Více

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní

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

================================================================================ =====

================================================================================ ===== Název: VY_32_INOVACE_PG4101 Základní struktura HTML stránky Datum vytvoření: 01 / 2012 Anotace: DUM seznamuje se základní strukturou a členěním HTML stránky, s jednotlivými složkami - HTML, CSS, externí

Více

Přehledy pro Tabulky Hlavním smyslem této nové agendy je jednoduché řazení, filtrování a seskupování dle libovolných sloupců.

Přehledy pro Tabulky Hlavním smyslem této nové agendy je jednoduché řazení, filtrování a seskupování dle libovolných sloupců. Přehledy pro Tabulky V programu CONTACT Professional 5 naleznete u firem, osob a obchodních případů záložku Tabulka. Tuto záložku lze rozmnožit, přejmenovat a sloupce je možné definovat dle vlastních požadavků

Více

Tabulky. V té to ka pi to le:

Tabulky. V té to ka pi to le: 7 Tabulky V té to ka pi to le: Vytvoření tabulky Výběr oblastí v tabulce Vkládání hodnot a objektů do tabulky Formátování tabulky Řazení dat v tabulce Výpočty v tabulce Kapitola 7 Tabulky Tabulky jsou

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

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o. NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE Ataxo Czech s.r.o. ÚVOD Internetové stránky vytvořené společností Ataxo v rámci produktu Mini web můžete jednoduše a rychle upravovat prostřednictvím on-line administrace.

Více

Microsoft Office PowerPoint 2003

Microsoft Office PowerPoint 2003 Microsoft Office PowerPoint 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ů... 4 3 Základy programu PowerPoint...

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

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

DATABÁZE MS ACCESS 2010

DATABÁZE MS ACCESS 2010 DATABÁZE MS ACCESS 2010 KAPITOLA 5 PRAKTICKÁ ČÁST TABULKY POPIS PROSTŘEDÍ Spuštění MS Access nadefinovat název databáze a cestu k uložení databáze POPIS PROSTŘEDÍ Nahoře záložky: Soubor (k uložení souboru,

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

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

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

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

OBSAH. Kontrola aktualizací... 18

OBSAH. Kontrola aktualizací... 18 2013 Albatros Media a. s. Toto CD je součástí knihy Adobe InDesign CS6, Oficiální výukový kurz a je samostatně neprodejné. Všechna práva vyhrazena. Nelegální kopie tohoto disku jsou zakázány. K2059_potisk.indd

Více

14. Jazyk HTML (vývoj, principy, funkce, kostra stránky). Jazyk XML, XHTML. Algoritmizace - cyklus for, while a do while, implementace v jazyce

14. Jazyk HTML (vývoj, principy, funkce, kostra stránky). Jazyk XML, XHTML. Algoritmizace - cyklus for, while a do while, implementace v jazyce 4. Jazyk HTML (vývoj, principy, funkce, kostra stránky). Jazyk XML, XHTML. Algoritmizace - cyklus for, while a do while, implementace v jazyce PHP. HyperText Markup Language Z Wikipedie, otevřené encyklopedie

Více

RELAČNÍ DATABÁZE ACCESS

RELAČNÍ DATABÁZE ACCESS RELAČNÍ DATABÁZE ACCESS 1. Úvod... 2 2. Základní pojmy... 3 3. Vytvoření databáze... 5 4. Základní objekty databáze... 6 5. Návrhové zobrazení tabulky... 7 6. Vytváření tabulek... 7 6.1. Vytvoření tabulky

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

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World

Více

DIMTEL - dimenzování otopných těles v teplovodních soustavách

DIMTEL - dimenzování otopných těles v teplovodních soustavách Dimenzování těles Dialogové okno Dimenzování těles lze otevřít z programu TZ (tepelné ztráty), z programu DIMOS_W a také z programu DIMTEL. Při spuštění z programu TZ jsou nadimenzovaná tělesa uložena

Více

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC

Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC Internetový přístup do databáze FADN CZ - uživatelská příručka Modul FADN BASIC Modul FADN BASIC je určen pro odbornou zemědělskou veřejnost bez větších zkušeností s internetovými aplikacemi a bez hlubších

Více

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace

Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace Návrh webové stránky responsivní design strana 2 WEB Dříve: místo pro prezentaci a umístění dat prohlížeče pouze na PC Nyní: platforma

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

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

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

2 PŘÍKLAD IMPORTU ZATÍŽENÍ Z XML

2 PŘÍKLAD IMPORTU ZATÍŽENÍ Z XML ROZHRANÍ ESA XML Ing. Richard Vondráček SCIA CZ, s. r. o., Thákurova 3, 160 00 Praha 6 www.scia.cz 1 OTEVŘENÝ FORMÁT Jednou z mnoha užitečných vlastností programu ESA PT je podpora otevřeného rozhraní

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

Webová aplikace Znalostní testy online UŽIVATELSKÁ PŘÍRUČKA

Webová aplikace Znalostní testy online UŽIVATELSKÁ PŘÍRUČKA Webová aplikace Znalostní testy online UŽIVATELSKÁ PŘÍRUČKA 2005 Lukáš Trombik OBSAH ÚVOD... 1 SPUŠTĚNÍ... 1 POPIS OVLÁDÁNÍ INFORMAČNÍHO SYSTÉMU... 1 POPIS KLIENTSKÉ ČÁSTI... 1 POPIS ADMINISTRÁTORSKÉ ČÁSTI...

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