MODUL 7: TVORBA WEBOVÝCH APLIKACÍ

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

Download "MODUL 7: TVORBA WEBOVÝCH APLIKACÍ"

Transkript

1 Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice MODUL 7: TVORBA WEBOVÝCH APLIKACÍ Studijní opora Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky

2 Název projektu: Zkvalitňujeme cestu k poznání Číslo projektu: CZ.1.07/1.1.02/ TVORBA WEBOVÝCH APLIKACÍ Autor: Jaroslav Kotlán Tato studijní opora byla vytvořena pro projekt Zkvalitňujeme cestu k poznání CZ.1.07/1.1.02/ Operační program Vzdělávání pro konkurenceschopnost. Boskovice 2011 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky

3 Tato publikace je spolufinancována Evropským sociálním fondem a státním rozpočtem České republiky v rámci projektu Zkvalitňujeme cestu k poznání, registrovaného pod číslem CZ.1.07/1.1.02/ Vydala VOŠ ekonomická a zdravotnická a SŠ Boskovice, Hybešova 53, Boskovice v roce Žádná část tohoto materiálu nesmí být použita jinak, než jak povoluje licenční ujednání CC BY-NC-ND 3.0: Uveďte autora - Neužívejte dílo komerčně - Nezasahujte do díla. Dílo smíte šířit za těchto podmínek: Uveďte autora, neužívejte dílo komerčně, nezasahujte do díla (viz platný text licence: Informace o autorských právech a ochranných známkách Všechny obchodní názvy a ochranné známky jsou majetkem svých příslušných vlastníků. Ochranné známky nebo registrované ochranné známky zmiňované v tomto dokumentu jsou uváděny pouze pro informační a výukové účely. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky

4 Obsah 1 HTML Co to je HTML Jak se www stránka zobrazí Základy tvorby www stránek Syntaxe Kostra HTML dokumentu Atributy <body> Poznámka v kódu Základní prostředky pro vytvoření internetové stránky Formátování textu Formátování odstavce Seznamy Tabulky Pokročilejší nástroje pro tvorbu stránek Obrázky Odkazy Formuláře CSS Princip tvorby stránek pomocí CSS Možnosti zápisu do HTML Délkové jednotky Pozicování Popis základních vlastností JavaScript Základy jazyka Syntaxe Základní funkce Proměnné a datové typy Výrazy a operátory Studijní opora: Tvorba webových aplikací Stránka 4 z 70

5 2.2 Pokročilejší metody Větvení Cykly Objekty Práce s formulářem Události Funkce Propojení s formulářem Odkaz na jiný objekt než formulář Přílohy Barvy Zápis v šestnáctkové soustavě bezpečných barev bezpečných stupňů šedi základních barev Windows Pojmenované barvy Použitá literatura Studijní opora: Tvorba webových aplikací Stránka 5 z 70

6 Tato publikace je spolufinancována Evropským sociálním fondem a státním rozpočtem České republiky v rámci projektu Zkvalitňujeme cestu k poznání, registrovaného pod číslem CZ.1.07/1.1.02/ Vydala VOŠ ekonomická a zdravotnická a SŠ Boskovice, Hybešova 53, Boskovice v roce Žádná část tohoto materiálu nesmí být použita jinak, než jak povoluje licenční ujednání CC BY-NC-ND 3.0: Uveďte autora-neužívejte dílo komerčně-nezasahujte do díla 3.0 Česko Dílo smíte šířit za těchto podmínek: Uveďte autora, neužívejte dílo komerčně, nezasahujte do díla (viz platný text licence: Informace o autorských právech a ochranných známkách Všechny obchodní názvy a ochranné známky jsou majetkem svých příslušných vlastníků. Ochranné známky nebo registrované ochranné známky zmiňované v tomto dokumentu jsou uváděny pouze pro informační a výukové účely. Studijní opora: Tvorba webových aplikací Stránka 6 z 70

7 1 HTML 1.1 Co to je HTML 15 minut Cíl: stručně se seznámit se základy HTML jazyka a s se způsobem zobrazení stránky v počítači. HTML (HyperText Markup Language) je hypertextový značkovací jazyk, který slouží pro vytvoření kódu, který umožňuje zobrazení dat v internetovém prohlížeči. Výstupem tohoto zobrazení je webová stránka. Základem HML jsou tagy (značky), které určují, co a jak se má v prohlížeči zobrazit. O tom, jak tagy vypadají, si řekneme v další kapitole. Často se uvádí, že HTML je programovací jazyk. Tak tomu ale ve skutečnosti není. Pomocí programovacího jazyka napíšeme program ve formě spustitelného kódu. HTML používáme jako vložené značky do textového souboru. Komu to není zatím úplně jasné, nemusí zoufat. Po prostudování dalších kapitol se vše objasní Jak se www stránka zobrazí Www stránky, které si prohlížíme na internetu, jsou uloženy na serverech. Servery jsou velmi výkonné počítače, které slouží mimo jiné pro ukládání velkého množství dat. Takovými daty mohou být HTML soubory. Když se bavíme o www stránkách, musíme si uvědomit, že pod jednou URL adresou se skrývá ne jeden, ale desítky až stovky souborů. Každý takový soubor má jedinečnou adresu, která ho jednoznačně identifikuje. Adresy na internetu si můžeme představit, jako adresy lidí na světě. Když chcete někomu poslat dopis, musíte vědět, ve kterém bydlí státu, ve kterém městě, ulici, domu, bloku, a samozřejmě, jak se jmenuje. I tak tomu je na internetu, jenom adresy tam nejsou jmenné, ale číselné. Někoho napadne, proč se o tom teď zmiňuji, vždyť mi nepotřebujeme nic odesílat, ale přijímat. To je sice pravda, ale aby příslušný server věděl, že nám má data poslat, musíme mu nejdříve říci, že je chceme. To uděláme tak, že do řádku adresy u internetového prohlížeče zadáme adresu a odešleme požadavek. Vše je v internetu tak důmyslně propojeno, že je odpovídající server nalezen a pošle nám naši stránku. A jak? Pošle ji ve formě HTML souboru, ve kterém jsou tagy (HTML značky). Jak jsme si již dříve uvedli, ty slouží prohlížeči pro sestavení stránky. Dnes se již stránky neskládají jenom z textu, ale jejich nedílnou součástí jsou i obrázky, flashové aplikace, videa a mnoho dalšího. Tato data nám server pošle také, ale HTML dokument je základ. HTML dokument je tedy doručen a internetový prohlížeč zač stránku zobrazovat. To, jak má stránka vypadat se dozví díky HTML, formou tagů. Zde je třeba, uvědomit si zásadní důsledek, který vyplývá z existence různých prohlížečů. HTML je sice jazyk standardizovaný, ale ne všechny firmy, vytvářející prohlížeče se těmito Studijní opora: Tvorba webových aplikací Stránka 7 z 70

8 standardy řídí. Proto se může jedna a tatáž stránka zobrazovat v různých prohlížečích různě. Povinností každého tvůrce www stránek je zobrazit si stránky ve všech nejběžněji používaný internetových prohlížečích. Mezi ně řadíme Internet explorer, Mozilla firefox, Opera a Safari. 1.2 Základy tvorby www stránek 90 minut Cíl: Seznámit se základními principy tvorby stránek Ještě, než přistoupíme k popisu HTML, řekneme si několik nezákladnějších pravidel, kterými je dobré se držet: Hlavní je informační obsah stránek Informace mají být aktuální Hlavní informace by měly být na začátku stránek Stránka by neměla být delší než 2 obrazovky Odkazy by měly mít jasnou, nejlépe stromovou strukturu Používejte spisovný jazyk s diakritikou Používejte nadpisy a odstavce Pozor na speciální efekty, jako je blikání textu apod. Co se týče grafiky: v jednoduchosti je síla Syntaxe Syntaxe HTML jazyka je velmi jednoduchá. Tagy jsou uzavřeny do ostrých závorek <>. Na velikosti písmen nezáleží. Vše, co je uvnitř je buď název tagu nebo jeho parametry (vlastnosti). Vlastnosti se do tagu zapisují následovně: <nazev_tagu vlastnost_1= hodnota_vlastnosti_1 vlastnost_2= hodnota_vlastnosti_2... vlastnost_n= hodnota_vlastnosti_n >. Tagy se do sebe mohou vnořovat. Jakákoliv chybná syntaxe je ignorována. Z toho plynou 2 důsledky. Jeden dobrý a druhý špatný. Dobrý je, že když máme v kódu chybu, tak se stránka zobrazí. Třeba odlišně, než jsme si představovali, ale uživatel ji vidí. Špatný důsledek je ten, že můžeme chybu snadno přehlédnout. Dnes již naštěstí existují moderní programy, které nám s vyhledáním nepřesností pomohou. Dalším prvkem jsou tzv. znakové entity. To jsou speciální znaky, jako je například. Ty začínají znakem & a končí ;. Vše co je mino tyto prvky je prostý text, který také jako text prohlížeč zobrazí. Všechny konce řádků ( Entery ) jsou ignorovány. Když je v textu více mezer za sebou, jsou prohlížečem ignorovány a zobrazí se mezera jedna. Jestliže vyžadujeme více mezer za sebou, musíme použít znakovou entitu. Studijní opora: Tvorba webových aplikací Stránka 8 z 70

9 Příklad: 3 mezery za sebou: Párové Nepárové Rozdělení tagů Platnost tagu někde začíná a někde končí <body> </body> začátek a konec těla dokumentu Tag upraví dokument v daném místě <br /> Konec řádku Kostra HTML dokumentu Základem www stránky jsou tři základní tagy. <html> o Ohraničuje začátek a konec HTML dokumentu o Zde by mělo být vše, co chceme v prohlížeči zobrazit nebo podat informace o stránce <head> o Hlavička dokumentu o Zde se objevuje například titulek stránky, informace pro prohlížeče, informace o tvůrci stránek, typ HTML dokumentu a celá řada dalších užitečných informací <body> o Tělo stránky o Zde je zapsán veškerý obsah stránky <html> <head> <title> Zde bude titulek stránky </title> </head> <body> Obsah stránky </body> Studijní opora: Tvorba webových aplikací Stránka 9 z 70

10 </html> Právě jsme se dozvěděli, jak kód napsat, ale ještě si musíme říci, v jakém programu ho napsat a jak ho uložit. Pro psaní HTML kódu můžeme používat některý ze speciálních programů (Macromedia Dreamweaver, MS FrontPage, atd.) nebo obyčejný poznámkový blok. Nedoporučuje se používání složitějších textových editorů (MS Word). Ty si totiž mimo prostého textu ukládají celou řadu pomocných informací, které HTML kód znečistí. Potom je třeba naše data uložit. Uložíme je jako soubor s příponou html (případně htm) do nějaké vhodně vytvořené složky na našem PC. Www stránky se většinou skládají ze stránek několika. Až naše stránky budeme umísťovat na nějaký internetový server, bude nutné, aby se první stránka, která se má zobrazit (říká se jí také hlavní stránka) jmenovala index. Proto si zvykne vždy nové stránky ukládat do nových složek a hlavní se bude vždy jmenovat index.html. Potom stačí stránku vyhledat v některém správci souborů, dvakrát na ni kliknout a stránka se zobrazí v prohlížeči. Z celého postupu je zřejmé, že na tvorbu stránek nepotřebujeme být aktuálně připojeni k internetu. Jistě jste zaregistrovali, že jsem v příkladu použil nový tag <title>. Tato značka má velký význam, mimo jiné pro vyhledávače, je to titulek stránky. No a takhle vypadá naše první stránka v prohlížeči Mozilla Firefox: T Obrázek Atributy <body> Při popisu syntaxe HTML jazyka jsme si řekli, že každý tag může mít vlastnosti neboli atributy. Pomocí atributů můžeme měnit vzhled, pozici, styl a mnoho dalších věcí. Některé vlastnosti mohou být u různých tagů stejné, jiné se mohou lišit. Na tomto místě je nutno říci, že v dnešní době se při návrhu vzhledu a stylu stránek používají kaskádové styly (CSS), které nahrazují definici atributů přímo u tagu. Není ale na škodu si zadávání atributů osvojit a několik základních si zapamatovat. Právě na tagu <body> si některé základní popíšeme. Studijní opora: Tvorba webových aplikací Stránka 10 z 70

11 Barva stránky Asi všechny prohlížeče mají implicitně nastavěnou barvu pozadí stránky na bílou. Pro změnu barvy pozadí slouží atribut bgcolor. Příklad: stránka bude mít šedou barvu pozadí <html> <head> <title> Zde bude titulek stránky </title> </head> < body bgcolor="gray > Obsah stránky </body> </html> stránka bude mít šedou barvu pozadí Obrázek Barva textu Dalším atributem u <body> je např. text, který nastavuje barvu textu Příklad: <html> <head> Studijní opora: Tvorba webových aplikací Stránka 11 z 70

12 <title> Zde bude titulek stránky </title> </head> < body bgcolor="gray" text="white"> Obsah stránky </body> </html> Šedé pozadí, bílý text Obrázek Jak je to s barvami V kapitole Atributy <body> jsme použily pro změnu barvy pojmenování v angličtině. To je jeden z možných způsobů. V internetovém prohlížeči můžete zobrazit teoreticky jakoukoliv barvu. Problém může nastat u starších PC, kde se barvy nezobrazí korektně. Když počítač Vámi zadanou barvu neumí zobrazit, použije nejbližší vhodnou. To může způsobit nemalé problémy v čitelnosti stránky. Proto se doporučuje používat 256 bezpečných barev. Proč 256? Takto reprezentované barvy jsou uloženy jako 1B, to je 8 bitů, jeden bit může nabývat hodnoty 1 nebo 0, z toho vychází počet možných kombinací 2 8 = Možnosti zápisu barev Pojmenované barvy RGB Model vychází z principu zobrazování barev na monitoru. Každá barva se skládá ze tří složek: Red červená, Green zelená, Blue modrá o Zápis v šestnáctkové soustavě bezpečných barev: #FF0000 o Zápis v desítkové soustavě: rgb(255,0,0) Studijní opora: Tvorba webových aplikací Stránka 12 z 70

13 o o Procentový zápis: rgb(100%,0%,0%) Ve všech třech předchozích zápisech je reprezentována červená barva Co znamenají čísla za # nebo rgb? Vždycky první část je podíl červené, druhá část podíl zelené a třetí část podíl modré. Seznam barev naleznete v příloze Barvy Poznámka v kódu Při psaní kódu (a nejen HTML) je velmi užitečné vkládat mezi řádky jednoduchý popis toho, jaký má následující nebo předchozí řádek význam. Toho docílíme pomocí tzv. poznámky: <!-- Začátek poznámky; libovolný text ; konec poznámky --> Poznámka se dá využít i v případě, že chceme na stránce něco skrýt, ale ne úplně smazat, pro další použití. Náš základní kód, který si opoznámkujeme: <!-- Začátek HTML dokumentu --> <html> <! Hlavička stránky --> <head> <!-- Titulek --> <title> Zde bude titulek stránky </title> </head> <! Tělo stránky --> <body> Obsah stránky </body> <! Konec HTML dokumentu --> </html> Zdá se Vám, že poznámek je na tak malý počet řádků moc? Máte úplnou pravdu. V praxi je takto podrobný popis zbytečný. Na druhou stranu pro začátečníka, který se HTML jazyk teprve učí je zřejmé, co který tag znamená. Může být nastavena barva pozadí stránky a barva textu na stejnou hodnotu? o Jestli ano, má to smysl? Může jeden tag obsahovat jiný? o Př: <body <title>> Studijní opora: Tvorba webových aplikací Stránka 13 z 70

14 Vytvořte jednoduchou stránku, u které nastavíte titulek, změníte barvu textu a barvu pozadí a tělo stránky bude obsahovat libovolný text Obrázek na pozadí Velmi zajímavých efektů se dá docílit, pomocí obrázků na pozadí stránky. Je to dáno tím, že obrázek se zobrazí v levém horním rohu, a když je menší než viditelná oblast stránky, tak se naskládá do řady vedle sebe a v řadách pod sebou. Ke vložení obrázku na pozadí slouží atribut background= URL obrázku. URL je adresa obrázku. Zde si vysvětlíme, jak se adresy zapisují. Je to opravdu velmi důležité, protože stejný princip budeme používat u odkazů a vkládání obrázků na stránku. Ještě jednou si připomeneme, že každá stránka, kterou zobrazujeme, musí být někde uložena. To znamená, že je na nějakém konkrétním místě v PC (náš PC, internetový server) a má tudíž ve stromové struktuře adresářů svoji cestu, po které se k souboru dostaneme. Budeme vycházet z toho, že je naše stránka uložena na disku c:, v adresáři www. Její cesta je tedy c:/www/index.html. Dále potřebujeme obrázek, který se má zobrazit na pozadí. Ten musíme někam uložit. Logicky ho umístíme do stejného adresáře. Cesta k němu bude následující: c:/www/pozadi.jpg. Vše máme připravené, můžeme si ukázat 2 možnosti zápisu adresy: 1. Absolutně <body background= c:/www/pozadi.jpg > na první pohled vše vypadá v pořádku, obrázek se na pozadí objeví. Má to ale jeden zásadní háček. Tohle bude fungovat jenom na PC, ve kterém stránky tvoříte nebo na jiném PC, kde uložíte soubor do stejného umístění. Vy ale budete výsledné stránky nahrávat na nějaký server, kde vám jistě neumožní vybrat si umístění stránek. Určitě Vám stránky neuloží na disk c:. Prohlížeč proto obrázek nenajde a nezobrazí ho. Tento způsob zápisu adresy má význam při vkládání adres na internetu, např: Pro zápis adres v rámci stránek je mnohem vhodnější 2. způsob 2. Relativně <body background= pozadi.jpg > V zápisu jsme vynechali c:/www/. To prohlížeči říká, že má prohledat složku, ve které se nachází aktuální stránka. Obrázek se opět zobrazí, a když obsah složky www překopírujeme kamkoliv jinam, bude to opět fungovat. Zde bychom si ještě měli uvézt, že soubory by se měly logicky rozdělovat do podložek. Je to podstatně přehlednější. Proto obrázek umístíme do složky Studijní opora: Tvorba webových aplikací Stránka 14 z 70

15 c:/www/obr/pozadi.jpg. Adresa potom bude vypadat následujícím způsobem: <body background= obr/pozadi.jpg > Vypracujte a odevzdejte Pracovní list 1 Projděte si internet a podívejte se, jak to s obrázky na pozadí je Obrázek na pozadí zjistíte, ze zdrojového kódu nebo pomocí pravého tlačítka myši Při tvorbě stránek je dobré řídit se základními pravidly (viz. úvod kapitoly) Základním stavebním prvkem při tvorbě stránek jsou tagy Tagy mohou mít vlastnosti (atributy) HTML dokument musí obsahovat základní tagy tzv. kostru Barvy se dají zadat třemi základními způsoby Obrázek na pozadí stránky se vkládá vedle a pod sebe do konce stránky Adresu obrázku (i jiných objektů) můžeme zapsat absolutně a relativně 1.3 Základní prostředky pro vytvoření internetové stránky 120 minut Cíl: naučit se základy při vytváření www stránek, pochopit základní pravidla. V předchozí kapitole jsme se naučili vytvořit zcela primitivní internetovou stránku. Když jsme zvládli úplné základy, můžeme se vrhnout na pokročilejší techniky. Co nás tedy čeká? Zjistíme, jak v textu přeskočit na nový řádek, vytvořit odstavec, odkaz, tabulku atd. Naučíme se tedy základní metody pro změnu vzhledu a rozvržení stránky. Ještě než se začneme věnovat vlastnímu obsahu této kapitoly, je nutné zopakovat, že vzhled a formátování stránky se dnes navrhují pomocí tzv. kaskádových stylů (CSS). CSS budeme studovat později. Studijní opora: Tvorba webových aplikací Stránka 15 z 70

16 1.3.1 Formátování textu Jeden důležitý tag jsme si již uvedli. Je to tag <br /> a pozornému čtenáři jistě neušlo, že je to tag pro konec řádku. Obrázek 4 Ve velkém množství příkladů budu pro názornost používat zobrazení kódu výsledné stránky v programu MS FrontPage Očíslované stránky znamenají kód, to co je pod nimi je výsledná stránka. Kurzor na výsledné stránce (v tomto případu na konci oddělovací čáry) si vždy odmyslete. V prohlížeči zobrazen nebude. Na příkladu vidíte, že odřádkování Enterem nemá na výslednou podobu stránky vliv. Na stránce se odřádkuje pouze tehdy, když na daném místě použijete <br />. Dále jsem na stránce použil tag <hr />. To je tag, který na stránce vytvoří oddělovací čáru. Oddělovací čára má několik atributů: Atribut Význam Možné hodnoty width šířka (horizontálně) délka nebo procento size šířka ve smyslu tloušťky v pixelech align zarovnání čáry s nastavenou šířkou left, center, right Studijní opora: Tvorba webových aplikací Stránka 16 z 70

17 color barva (pouze v IE) barva noshade čára bude bez stínu bez hodnoty Mnoho atributů se u jednotlivých tagů opakuje. Při prvním výskytu je vysvětlím a dále je budeme automaticky používat. To stejné platí pro hodnoty atributů (to co je za = ). U šířky, výšky a jiných rozměrů se v zásadě udává buď počet pixelů (pevný rozměr) nebo rozměr v procentech (přizpůsobuje se velikosti okna). To se v našem případě týkalo atributu width. Zarovnání (align horizontální) se vztahuje na daný prvek vzhledek k prvku nadřízenému. V našem případě je zatím pořád nadřízený prvek okno prohlížeče. Může nabývat hodnot left, center, right (zřejmé) a justify (do bloku, má význam u odstavce). Obrázek 5 Na příkladu vidíte použití některých atributů u vodorovné čáry a to, jak se projeví na jejím vzhledu Zvýraznění a efekty písma V tabulce si uvedeme některé tagy pro formátování textu. Jejich použití je jednoduché, lehce se je naučíte samostatně na příkladu. Studijní opora: Tvorba webových aplikací Stránka 17 z 70

18 Atributy tagu font: Atribut tagu <font> Význam tag Význam Párový b tučné písmo ano i kurzíva ano u podtržení textu ne sub dolní index ano sup horní index ano small zmenšení textu ano big zvětšení písma ano s přeškrtnutý text ano font písmo ano Hodnoty color barva písma barva size velikost, stupeň písma 1 až (+-1 až 6)) face font, druh písma jména fontů oddělená čárkami Velikost písma (size) je zadaná buď absolutně (1 je nejmenší) nebo relativně + nebo mínus nějaká hodnota od základní velikosti písma. Mohou se do sebe jednotlivé tagy vnořovat? Začátek výkladu o HTML Vytvořte stránku, na které bude následující text (stejně formátovaný): Jan Novák Boskovice 546 řešil následující kvadratickou rovnici: 2 5x 4x + 10 = 0 Vyšel mu výsledek: x 1 = 54 x2 = a to nebylo špatně. Studijní opora: Tvorba webových aplikací Stránka 18 z 70

19 Nadpisy Použití nadpisu je velmi důležité pro zpřehlednění textu. Nadpisů máme 6 úrovní <h1>...</h1> až <h6>...</h6>. Obrázek 6 Za koncem nadpisu nemusí býr <br />, nadpis si odřádkuje sám Formátování odstavce Další velmi důležitým prvkem na stránce je odstavec. Text v odstavci ohraničuje párový tag <p> </p>. Jediným atributem pro odstavec, který na tomto místě zmíním je align (zarovnání). Začátek a konec odstavce má smysl před a po nadpisu Seznamy Seznam není nic jiného, než odrážka a číslování. Jejich funkce v textu je opět zřejmá. Číslovaný seznam se uzavírá do tagů <ol>...</ol> a nečíslovaný do <ul>...</ul>. Jednotlivé položky se uzavírají do tagů <li>...</li> Studijní opora: Tvorba webových aplikací Stránka 19 z 70

20 Obrázek 7 U obou typů seznamů se dají měnit parametry číslování (odrážek). To mění atribut type: Atribut Význam Hodnoty Význam hodnot druh odrážky <ul> disc circle square puntík kolečko čtvereček type druh číslování <ol> 1 A a I i normální číslování velké písmenkování malé písmenkování římské číslice malé římské číslice Vypracujte a odevzdejte Pracovní list 2 Studijní opora: Tvorba webových aplikací Stránka 20 z 70

21 1.3.4 Tabulky Tabulky měly v minulosti velký význam pro rozložení stránky. Stránka byla jedna velká tabulka a její buňky tvořily jednotlivé její části. Dnes se již od tohoto způsobu upustilo. Neznamená to ale, že na internetu takové stránky nenajdete. Nové tak už ale prosím netvořte. Dnes se tabulky používají prostě jako tabulky. Výsledkové listiny, seznam zboží, atd. Tabulky se dají dále použít tam, kde je třeba zarovnat text pod sebe (jsme opět u rozvržení, ale určitě ne celé stránky). Tabulka se definuje celkem jednoduše, ale je třeba pamatovat na některá úskalí. Definici tabulky si vysvětlíme na příkladu, je to tak nejnázornější. Obrázek 8 Tabulka začíná tagem <table>. Tím i končí. V tabulce se definují řádky <tr> a v nich jednotlivé buňky <td> (ne sloupce). Aby byla vidět mřížka tabulky, nastavili jsme atribut border= 1. Aby byla vidět buňka, musí v ní něco být. Ale co, když ji chceme prázdnou? Jak je vidět, velmi se k tomu hodí tvrdá mezera. Níže si prostudujete parametry tabulky a buněk. Zmíním zde několik základních pravidel, konkrétní chování a nastavení tabulek si vyzkoušíme na příkladech. Když není zadán rozměr tabulky nebo buňky, přizpůsobí se textu. Jak je vidět na příkladu, tabulka se zobrazí rovnoměrně. Když zadáte nějaký rozměr, je to rozměr mini- Studijní opora: Tvorba webových aplikací Stránka 21 z 70

22 mální, ne přesný. Je to proto, aby se tabulka (buňka) mohla nafouknout, když je v ní více textu (větší obrázek) než je navržena. Nezadané rozměry se buď přizpůsobí obsahu nebo vedlejší větší buňce nebo se dopočítají. Další problém nastane, když chceme sloučit buňky. Opět ukážu na příkladu: Obrázek 9 Na první pohled se stalo několik zvláštních věcí. V 1. řádku 2 buňky ubyly, ve 3 jedna. Je to tím, že jsme museli říci, že 2. buňka 1. řádku bude zasahovat přes 3 sloupce colspan= 3 a 1. buňka 2 řádku bude zasahovat přes 2 řádky rowspan= 2. Ve 3. řádku proto na 1. buňku nezbylo místo. Ekvivalentní je to i u 1. řádku s 3. A 4. buňkou. Opět je nejlepší si vše vyzkoušet na příkladu. Atributy tagu <table>: atribut význam možné hodnoty Align obtékání tabulky ostatním textem cellpadding vnitřní okraj buněk pixely Cellspacing vnější okraj buněk pixely left, right, center Studijní opora: Tvorba webových aplikací Stránka 22 z 70

23 Border šířka rámečku buněk pixely Width minimální šířka tabulky délka nebo procento Height minimální výška délka nebo procento Bgcolor barva pozadí barva bordercolor barva rámečku barva Atributy tagu <td> a <tr>: atribut význam hodnoty align valign horizontální obsahu vertikální zarovnání obsahu zarovnání left, center, right, justify top, middle, bottom, baseline width doporučená šířka buňky délka nebo procento height minimální výška řádku délka bgcolor barva pozadí barva bordercolor barva rámečku barva rowspan (ne <tr>) colspan (ne <tr>) přesah buňky na n dalších řádků (spojení buněk) přesah buňky do dalších sloupců počet přesahujících řádků počet přesahujících sloupců Může tabulka obsahovat další tabulku. Vypracujte a odevzdejte Pracovní list 3 Vypracujte a odevzdejte Pracovní list 4 Text na stránkách se dá formátovat pomocí tagů <b>,<i>,<s>... Velikost, styl a barva písma - <font> Důležité jsou nadpisy a odstavce Tabulky se definují pomocí řádků a buněk Studijní opora: Tvorba webových aplikací Stránka 23 z 70

24 1.4 Pokročilejší nástroje pro tvorbu stránek 150 minut Cíl: zvládnout vložení obrázku, tabulek a formulářů. Formuláře zatím bez funkčnosti tlačítek (mimo reset) Obrázky Vložení obrázku na stránku je velmi jednoduché: <img src= adresa obrázku > O adresách sme se bavili v předchozí kapitole, princip je stejný. Obrázek se umístí (jako každý prvek na stránce) tam, kam ho umístíte v kódu. Důležité je zarovnání obrázku vůči textu. Zarovnání je mnoho způsobů, vše je dobré procvičit si na příkladech. Další důležitou věcí je zadání šířky a výšky obrázku. Nejdříve je nutné nastavit si rozměry obrázku v některém bitmapovém editoru. Na www stránkách se nejčastěji používají obrázky typu *.gif a *.jpg (*.jpeg). Šířka a výška sice nejsou povinné parametry, ale je velmi vhodné je zadat. Když zadáte rozměry jiné, než jsou ve skutečnosti, prohlížeč obrázek přizpůsobí. Atributy <img> Atribut Význam Hodnoty src umístění souboru s obrázkem URL alt alternativní popis libovolný text width šířka délka nebo procento height výška délka nebo procento border tloušťka rámečku délka vspace vertikální okraj délka hspace horizontální okraj délka align zarovnání obrázku left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom Je vhodné nechat obrázek velký a změnu ať provede prohlížeč? Studijní opora: Tvorba webových aplikací Stránka 24 z 70

25 Zamyslete se nad velikostí stránky a rychlosti stahování z internetu Vyzkoušejte si různé způsoby zarovnání obrázku vůči textu Podívejte se, jak se chová stránka, když (ne)zadáte rozměry a u atributu src vložíte dobrou nebo špatnou adresu Odkazy Hypertextový odkaz je základ navigace na internetu. Z předchozího studia znáte odkazy z MS wordu. Smysl odkazů je stejný. Chci přejít na jinou stránku, kliknu na odkaz. Definice odkazu: <a href= adresa odkazu >Text odkatu</a> Pro adresu odkazu platí stejná pravidla, jako pro adresu obrázku. Odkazy mohou být: 1. Na jinou stránku 2. Na soubor 3. Na jiné místo na téže stránce 4. Na mailovou adresu Ad 1. Odkaz na jinou stránku je základ internetu. Seznam odkazů na vlastní stránky se umísťuje většinou na levý okraj nebo vodorovně pod záhlaví stránky. Říká se mu menu. Jak tedy uděláme stránku s odkazy? Velmi jednoduše. Popíšeme si to na příkladu. Abych se měl na co odkazovat, musím to mít nejdříve vytvořené. Takže v první fázi si vytvoříme Strukturu stránky imaginární firmy. Firma se bude jmenovat například Novák consulting. Tento nadpis bude na v všech stránkách stejný. Potom vytvoříme 4 různé stránky. Budou stejné, kromě obsahu. Pro rozdělení stránky použijeme tabulku (řekli jsme si, že se to tak nedělá, ale pro naše účely je to efektní a zároveň i efektivní). Uvodní Stránka může vypadat následujícím způsobem: Studijní opora: Tvorba webových aplikací Stránka 25 z 70

26 Obrázek 10 V menu by vždy mělo být tlačítko HOME (domů), kdyby se někdo při procházení stránek ztratil, aby měl možnost návratu na úplný začátek. Když se podíváte na zdrojový kód stránky, je zřejmé, jak se budou jmenovat další stánky (tato je index.html). Ty musíte vytvořit a uložit do jednoho adresáře. Ad 2. <a href= soubory/hry/superhra.zip >Stahujte naši novou strategii</a>, rozbalte a hrejte. Ad 3. Zde je to trošku složitější. Když se chcete odkazovat na místo na stejné stránce, musíte na stránce nejdříve vytvořit kotvu a potom odkaz na ni: <a name= kotva >Sem se přesune kurzor</a> po kliknutí na: <a href= #kotva >odkaz na kotvu</a> Ad 4. Studijní opora: Tvorba webových aplikací Stránka 26 z 70

27 <a href= >Napište mi, jak se máte </a> Otevře se přednastavený ový klient, který dá do adresy automaticky a do předmětu Pozdrav. Vypracujte a odevzdejte Pracovní list 5 Vypracujte a odevzdejte Pracovní list Formuláře Formuláře se většinou používají ve spojení s nějakým programovacím jazykem. Typickým příkladem je vyplnění a vytištění formuláře, výpočet splátky u půjčky, převody měn, atd. My se je zatím naučíme vytvářet, rozchodíme je v dalších kapitolách. Základem formulářů jsou formulářové prvky. Jejich funkci znáte z programování, proto si je dopodrobna popisovat nebudeme. Pro přehledné rozvržení formulářových prvků a jejich popisů je vhodné využít tabulku. Výčet prvků: Tlačítko CheckBox - Zátržítko RadioButton - Přepínač Textové pole Textová oblast seznam Každý formulář začíná tagem <form> <form> má mnoho atributů. My si vybereme jenom ty pro nás v tuto chvíli prospěšné, další přidáme během následujících kapitol. <form name= prazdny > Studijní opora: Tvorba webových aplikací Stránka 27 z 70

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Kaskádové styly. formátování webových stránek

CSS Kaskádové styly. formátování webových stránek CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací

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

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

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

Č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

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

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

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

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

Více

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

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

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

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

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

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

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11 Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

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

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

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

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585

Výukový materiál vytvořen v rámci projektu EU peníze školám. Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585 Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

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

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

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

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

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

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

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

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

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

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

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

Přehled vlastností stylů

Přehled vlastností stylů Přehled stylů Styly jsou ds jefektivnějším způsobem, jak ovládat grafický vzhled strák. Definují přes padesát, které slouží k vizuálních atributů elementů. V následujících tematicky rozčleněných tabulkách

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

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

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

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

Jdeme tvořit webové stránky!

Jdeme tvořit webové stránky! Jdeme tvořit webové stránky! Díky prezentaci jsme se již dozvěděli, že na tvorbu základních webových stránek v podstatě nepotřebujeme žádné speciální programy a stačí nám obyčejný poznámkový blok, který

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

Cascading Style Sheets CSS Selektory Selektory

Cascading Style Sheets CSS Selektory Selektory CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>

Více

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

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

Více

Š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

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. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

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

Více

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

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích

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

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice INOVACE PŘEDMĚTŮ ICT MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Zpracoval: Jaroslav Kotlán srpen 2009s Úvod Modul Programování

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

Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.

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

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

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

SkautIS Remote Components absolventská práce

SkautIS Remote Components absolventská práce MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1.

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

6. Formátování: Formátování odstavce

6. Formátování: Formátování odstavce 6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy

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

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

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně , , ,

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot> Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky

Více

Stránka se dá otevřít dvěma způsoby

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá

Více

M E T O D I K A W I K I

M E T O D I K A W I K I M E T O D I K A W I K I STŘEDNÍ ŠKOLY INFORMATIKY A SPOJŮ, BRNO, ČICHNOVA 23 NÁPOVĚDA OBSAH Webové stránky Střední školy informatiky a spojů, Brno, Čichnova 23... 3 Moje stránka... 6 Přihlášení... 6 Po

Více

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz

Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz Inovace bakalářského studijního oboru Aplikovaná chemie http://aplchem.upol.cz CZ.1.07/2.2.00/15.0247 Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. Tvorba

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

03 - Základy editace dynamických stránek

03 - Základy editace dynamických stránek Dynamické WWW stránky V předchozí kapitole byly popsány tagy jazyka HTML, kterým se říká statické. Jinými slovy, lze jimi vytvořit plnohodnotnou a kvalitní statickou stránku. To znamená, že stránka sice

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

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

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

Více

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

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

Více

Práce v programu Word 2003

Práce v programu Word 2003 Práce v programu Word 2003 Prostředí programu WORD 2003 Program WORD 2003 slouží k psaní textů, do kterých je možné vkládat různé obrázky, tabulky a grafy. Vytvořené texty se ukládají, jako dokumenty s

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

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

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

Hlavička dokumentu. mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka</a> </h3> <p> <img alt="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" title="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" class="news-block-img pull-right" src="/thumbs/48/23934103.jpg"> 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 </p> <a href="/23934103-Hlavicka-dokumentu-mezi-head-a-head-obsahuje-informace-vztazene-k-dokumentu-metadata-title-nazev-stranky-povinna-parova-znacka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/26556526-02-hodina-2-1-typy-souboru-a-objektu-2-2-ovladaci-prvky-label-a-textbox.html">02. HODINA. 2.1 Typy souborů a objektů. 2.2 Ovládací prvky Label a TextBox</a> </h3> <p> <img alt="02. HODINA. 2.1 Typy souborů a objektů. 2.2 Ovládací prvky Label a TextBox" title="02. HODINA. 2.1 Typy souborů a objektů. 2.2 Ovládací prvky Label a TextBox" class="news-block-img pull-right" src="/thumbs/50/26556526.jpg"> 02. HODINA Obsah: 1. Typy souborů a objektů 2. Ovládací prvky Label a TextBox 3. Základní příkazy a vlastnosti ovládacích prvků 4. Práce s objekty (ovládací prvky a jejich vlastnosti) 2.1 Typy souborů </p> <a href="/26556526-02-hodina-2-1-typy-souboru-a-objektu-2-2-ovladaci-prvky-label-a-textbox.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1517294-Kapitola-4-zpracovani-textu.html">KAPITOLA 4 ZPRACOVÁNÍ TEXTU</a> </h3> <p> <img alt="KAPITOLA 4 ZPRACOVÁNÍ TEXTU" title="KAPITOLA 4 ZPRACOVÁNÍ TEXTU" class="news-block-img pull-right" src="/thumbs/22/1517294.jpg"> 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 </p> <a href="/1517294-Kapitola-4-zpracovani-textu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2842561-Manual-jak-pouzivat-administraci-webovych-stranek-obsah-zaklad-2-upravy-polozky-3-upravy-textove-stranky-4.html">MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4</a> </h3> <p> <img alt="MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4" title="MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4" class="news-block-img pull-right" src="/thumbs/24/2842561.jpg"> 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... </p> <a href="/2842561-Manual-jak-pouzivat-administraci-webovych-stranek-obsah-zaklad-2-upravy-polozky-3-upravy-textove-stranky-4.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596686-Databazove-aplikace-pro-internetove-prostredi-01-php-uvod-zakladni-princip-vkladani-skriptu-komentare-vypis-na-obrazovku.html">Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku</a> </h3> <p> <img alt="Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku" title="Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku" class="news-block-img pull-right" src="/thumbs/20/596686.jpg"> Databázové aplikace pro internetové prostředí 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Projekt: Inovace výuky prostřednictvím ICT Registrační číslo: CZ.1.07/1.5.00/34.250 </p> <a href="/596686-Databazove-aplikace-pro-internetove-prostredi-01-php-uvod-zakladni-princip-vkladani-skriptu-komentare-vypis-na-obrazovku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2717143-25-tvorba-html-dialogu-pro-pevne-tvary.html">25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY</a> </h3> <p> <img alt="25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY" title="25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY" class="news-block-img pull-right" src="/thumbs/24/2717143.jpg"> 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é </p> <a href="/2717143-25-tvorba-html-dialogu-pro-pevne-tvary.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2123813-Php-php-je-skriptovaci-programovaci-jazyk-dynamickych-internetovych-stranek-php-je-nezavisly-na-platforme.html">PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě</a> </h3> <p> <img alt="PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě" title="PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě" class="news-block-img pull-right" src="/thumbs/24/2123813.jpg"> PHP PHP původně znamenalo Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami a nyní tato zkratka znamená Hypertext Preprocessor. PHP je skriptovací programovací jazyk, určený především </p> <a href="/2123813-Php-php-je-skriptovaci-programovaci-jazyk-dynamickych-internetovych-stranek-php-je-nezavisly-na-platforme.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18364095-Internet-02-tvorba-statickych-www-stranek-za-pomoci-html-tagu.html">Internet 02 - Tvorba statických www stránek za pomoci HTML tagů</a> </h3> <p> <img alt="Internet 02 - Tvorba statických www stránek za pomoci HTML tagů" title="Internet 02 - Tvorba statických www stránek za pomoci HTML tagů" class="news-block-img pull-right" src="/thumbs/39/18364095.jpg"> Tagy Jak bylo uvedeno na předchozích stránkách, tag je vlastně značka, podle které se prohlížeč řídí. Tag určuje, jakým způsobem bude stránka upravena. Například - teď zarovnej text doprava, nyní zvětši </p> <a href="/18364095-Internet-02-tvorba-statickych-www-stranek-za-pomoci-html-tagu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/27243834-Word-2007-graficky-manual.html">WORD 2007 grafický manuál</a> </h3> <p> <img alt="WORD 2007 grafický manuál" title="WORD 2007 grafický manuál" class="news-block-img pull-right" src="/thumbs/50/27243834.jpg"> 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ů </p> <a href="/27243834-Word-2007-graficky-manual.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28133790-Link-definuje-vztah-k-jinym-xhtml-dokumentum-typicky.html"><link> - definuje vztah k jiným XHTML dokumentům, typicky</a> </h3> <p> <img alt="<link> - definuje vztah k jiným XHTML dokumentům, typicky" title="<link> - definuje vztah k jiným XHTML dokumentům, typicky" class="news-block-img pull-right" src="/thumbs/51/28133790.jpg"> 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 </p> <a href="/28133790-Link-definuje-vztah-k-jinym-xhtml-dokumentum-typicky.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2017 © DocPlayer.cz <a href="/support/privacy-policy/">Ochrana osobních údajů</a> | <a href="/support/terms-of-service/">Podmínky obsluhování</a> | <a href="/support/feedback/">Kontaktní formulář</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/9bab/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":24,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=24&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>