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)

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

Download "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)"

Transkript

1 Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 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 se na sebe mohou vrstvit definice stylu, ale platí jenom ta poslední. Už je na světě CSS 2, vylepšené a složitější formy stylů, které ale zatím moc nefungují v nejrozšířenějším prohlížeči Internet Exploreru.) Styly poprvé implementovala f. Microsoft do IE 3.0. První verze stylů má název Level 1 a je uvedena v HTML 4.0. Pomocí stylu lze jednoduše definovat druh písma, způsob zarovnání, barvu a další vlastnosti tagu. Tato definice se použije jednotně v celém dokumentu. V dokumentu se soustředíme pouze na strukturu informace grafický vzhled je definován stylem. Formátování HTML Každý text má obsah a formu. Formát (forma) webových stránek - barva a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text. 1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů <i> a </i>: <i>kurzíva</i>). Pomocí tagů se některé věci nedají udělat. 2. Novější způsob -- CSS styly -- používá obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale všeobecné. Drobný problém CSS nepodporují starší prohlížeče (2. Explorer a 3. Navigator), v takových se text nezformátuje (zůstává čitelný), ale tyhle prohlížeče se už téměř nevyskytují (a bude lépe). CSS zatím nepodporují mobilní zařízení, například prohlížeče Ipaqů. I v nich ale jde text přečíst. Základy práce se styly H1 { color: blue }... skládá se z 1 pravidla H1... selektor, lze použít všechny tagy HTML color: blue... deklarace, color... vlastnost, blue... hodnota vlastnosti Selektor zajišťuje vazbu na odpovídající HTML tag. Vlastností u každého tagu, které je možno použít, je několik desítek. Trojí použití CSS Styl se může nadeklarovat třemi způsoby: Přímo (in-line) Do zdroje se napíše tato deklarace odstavce: <p style="color: red">tento odstavec bude červený.</p> - 1 -

2 Vysvětlení: <p> je značka vymezující odstavec; z anglického paragraph. Atribut "style" je obecný atribut podobný třeba atributu "align", jenže je mocnější

3 Stylopisem Do hlavičky dokumentu se napíše stylopis uzavřený mezi tagy <style></style>: <style> p {color: red} </style> a do těla stránky se mohou psát odstavce: <p>tento odstavec bude červený. </p> <p>tento mimochodem také, protože červené budou všechny.</p> To, jak zařídit, aby nebyly červené všechny, ale jenom některé odstavce, se dá pomocí "tříd" a "identifikátorů", o tom později. Externím CSS souborem Vytvoří se soubor, který se pojmenuje třeba styly.css. V něm bude tento text: p {color: red} Do hlavičky html dokumentu, který chci stylovat, musím napsat odkaz na tento soubor: <link rel="stylesheet" type="text/css" href="styly.css"> V těle dokumentu pak budou opět všechny odstavce červené. K dispozici je i podrobnější příklad. Pravidla použití stylů Definice stylů jsou v sekci HEAD, kvůli kompatibilitě se staršími verzemi prohlížečů je pod úrovní STYLE ještě jeden obal, který má strukturu tradičního komentáře (<!-- až -->). Je to výjimka, kdy moderní prohlížeč tato data neinterpretuje jako komentář, ale jako tag HTML. Ten prohlížeč, který tag STYLE nezná, jej naopak jako komentář interpretuje. Třída jako selektor <HTML> <HEAD> <TITLE>Titulek stránky</title> <STYLE TYPE= text/css > <!-- body {color: blue; background: yellow}.novy { font-size: 12pt; font-weight:bold; color: red; text-align: center} --> </STYLE> </HEAD> <BODY> - 3 -

4 <P CLASS= novy > Přiřadí se styl novy k formátovacímu stylu odstavce P. V případě konfliktu definic má přednost ta, která je uvedena jako poslední. <H1>Tento text nemá přiřazen žádný styl.</h1> <H1 CLASS= novy > Velikost písma ve stylu novy přebije velikost písma definovaného v tagu H1. </H1> <DIV CLASS= novy >Tag DIV vytvoří nový odstavec, nepřidá jiné formátování. </DIV> Chcete-li aplikovat pouze formátování stylu, <SPAN CLASS= novy >tag SPAN nijak text neformátuje </SPAN> a ni na něj nemá žádný vliv. </BODY> Příklad s odkazy :pseudotřídy Pomocí stylopisů se dají formátovat libovolné HTML tagy, ne pouze nadpisy. Obzvlášť efektní je to u odkazů. Nebudu vypisovat celý zdroj, omezím se na stylopis: <style><!-- a {text-decoration: } a:link {color: green} a:visited {color: navy} a:active {color: black} a:hover {color: red; text-decoration: underline} --></style> Celý soubor s tímto stylopisem si můžete zobrazit. Setkáváme se tu s deklarací formátu odkazů -- vnitřku tagu <a> </a>. Navíc tento tag má pseudotřídy (různé stavy), které umožňují různé zobrazení podle toho, zda už je odkaz navštívený nebo zda po něm jede myš. Takže konkrétně: text-decoration: znamená, že odkazy nebudou podtrhávané a:link znamená nenavštívený odkaz (bude zelený) a:visited je už navštívený (tmavě modrý) a:active je ten, na který se zrovna kliklo (černý), nebo ten, po kterém jede tabulátor a: hover je ten, přes který se jede myší (červený podtržený) text-decoration: underline znamená podtržení. Tag A je jediný, u něhož se vyskytují pseudotřídy. Ještě pozor na syntaxi: mezi a a dvojtečkou není mezera! První řádek stylopisu definuje nepodtrhávání odkazů pro všechny pseudotřídy. Pouze a:hover tuto deklaraci přebíjí, protože je uvedena později

5 Identifikátor Pro jednoznačný popis nějakého elementu (zejména pro potřeby skriptů) existuje univerzální atribut ID. I jemu se může ve stylopisu přiřadit nějaká deklarace, ale na rozdíl od třídy nezačíná tečkou, ale dvojkřížkem #. V těle dokumentu by se element s jedním identifikátorem měl vyskytovat jenom jednou. Kdybych v předchozím příkladu použil identifikátoru namísto třídy, deklarace by vypadala takhle: #podtitul { text-align: center; font-weight: bold; text-decoration: overline} a v těle by se odstavci přiřadila identifikace atributem id: <p id="podtitul">text podtitulu</p> Identifikátor id se z hlediska CSS chová stejně jako třída class. Rozdíly jsou právě jen ve skriptech a v parsování dokumentu. Osobně identifikátory pro formátování nepoužívám, stačí mi třídy. Složené deklarace slučování definic Stylopisy umožňují nadeklarovat vlastnosti pro více elementů najednou. Například deklarace H1, H2, H3 {color: green} obarví všechny nadpisy první, druhé i třetí úrovně na zeleno. Hromadnou deklaraci používám, pokud zadávám mnoho stejných vlastností pro mnoho elementů. Důležitá je čárka mezi selektory! Kdyby tam nebyla, šlo by o něco jiného, totiž o kontextový selektor. Nebo lze sloučit deklarace: H1 { font-size: 12pt; font-family: sans-serif; font-style: } Kontextová deklarace Vysvětlím příkladem: H3 A {font-style: italic} Tato deklarace by udělala kurzívou všechny odkazy uvnitř nadpisů třetí úrovně (elementy A uvnitř elementu H3). <h3>obyčejný text nadpisu s <a>odkazem kurzívou</a></h3> <p>obyčejný odstavec s <a>obyčejným odkazem</a></p> Odkazy v obyčejných odstavcích to nijak neovlivní, stejně tak obyčejný text trojkového nadpisu. Zápisy selektorů kontextového zápisu jsou odděleny pouze mezerou. Osobně tuto vlastnost považuji za nejfantastičtější a výborně použitelnou vlastnost CSS. Použil jsem ji třeba v příkladu o různých barvách odkazů. Skládání stylů Díky CSS se na jeden element může navrstvit mnoho různých deklarací (proto styly kaskádové), někdy i protichůdných. Jak se rozhodne, která deklarace převládne? Zpravidla ta poslední. Když chci, aby nějaká dřívější deklarace převládla, napíšu do deklarace řetězec "! important". Taková deklarace potom nebude přehlušena žádnou pozdější. (Tuto vlastnost doporučuji používat s rozvahou, protože způsobuje zmatek při pozdějším ladění designu.) - 5 -

6 Pseudoelementy Ve specifikaci CSS1 se vyskytují pseudoelementy :first-line a :first-letter. Znamenají první řádek a první písmeno. Například zápis: p:first-line {color: blue} p:first-letter {font-size: 200%} by měl způsobit, že odstavce budou mít první řádek modrý a první písmeno dvakrát větší. Z prohlížečů to podporují Mozilla 5, Internet Explorer 5.5 (nikoliv IE 5.0) a IE 6 (myslím ale, že Internet Explorer to umí jenom u tagu <p>). Shrnující příklad Ve stylopisu (v hlavičce či v externím souboru) se mohou vyskytovat i takovéhle věci: <style> #prvniodstavec {text-ident: 20 px} A:visited {color: teal} A:link {color: navy} a:hover {color: red}.velke A {font-weight: bold}.zalozka {font-style: oblique}.zalozka A:visited {color: navy! important} H1, H2 {color: #33ff66; font-variant: small-caps} H2 {font-size: 18pt} </style> Doufám, že význam je zřejmý. Všechno to funguje. Důležité je v příkladu snad jen to, že se může jeden element deklarovat vícekrát a že kontextová deklarace se může kombinovat s třídami a pseudotřídami. Nejisté znaky Ve jménech tříd a identifikátorů se vyvarujte používání podtržítka _ (a raději i češtiny a jiných pochybných znaků, ale mínus je v pohodě). Internet Explorer 5 podtržítko v názvu třídy nebo ID snese a správně zobrazí, žádný jiný prohlížeč ale ne!!! Název třídy ani identifikátoru by podle specifikace neměl začínat číslicí, Internet Exploreru 6 se to opravdu nelíbí

7 Font (písmo) Vlastnost Hodnoty Význam Příklady Poznámky Může se zadávat více písem za sebou, odděluje se font-family seznam písem Druh písma, font font-family: Arial CE, sans-serif čárkami. Pokud klient nemá v systému první font, bere další atd. Vizte Přehled použitelných písem. font-style italic oblique normální kurzíva skoněné font-style: font-style: italic font-style: oblique Skloněné písmo je prostá geometrická transformace, kurzíva je jiný řez. Prohlížeče většinou užívají kurzívu i při oblique. Kapitálky jsou velká písmena velikosti malých. font-variant small-caps normální kapitálky FONT-VARIANT: SMALL-CAPS Velká písmena by měla být trochu větší. IE 5 udělá sice kapitálky, ale zmenší i velká písmena, což by neměl. font-size: xx-small font-size: x-small font-size: small font-size: font-size xx-small x-small small medium large x-large xx-large výška procento mrňavé maličké malé střední velké obří maxipsí výška zvětšení medium font-size: large fontsize: x- large Netscape se na procenta tváří divně. MS IE 3.x zase neumí správně zobrazovat jednotky em a ex. V IE 6 je vykreslovaná velikost závislá na! doctype. Vizte použitelná písma v různých velikostech. Vizte délkové jednotky v CSS. Vizte velikosti písma podle prohlížečů font-size: 14pt font-size: 16px font-size: 125% - 7 -

8 font-weight: font-weight bold bolder lighter 100, 200, 300, 400, 500, 600, 700, 800, 900 normální tučné trochu tučnější trochu světlejší duktus vyjádřený číslem font-weight: bold font-weight: bolder font-weight: lighter font-weight: 100 font-weight: 300, font-weight: 400 font-weight: 500 font-weight: 600 U většiny fontů mají smysl jenom základní tloušťky: záleží to na výrobci fontu. Bolder a lighter se doporučuje nepoužívat. font-weight: 800 font-weight: 900 všechny možné předchozí font: bold Tato deklarace je citlivá na pořadí jednotlivých údajů. Musí se použít v pořadí: tučnost kurzíva font hodnoty nebo systémové italic 20px velikost jméno. Netscape 4 chce všechny hodnoty. písmo Arial Použije-li se v deklaraci např. font: 12pt/14pt, údaj za lomítkem se vztahuje k vlastnosti line-height. hodnota serif sans-serif cursive fantasy monotype font-family - obecná jména fontů obecné jméno fontu patkové písmo, nejčastěji Times New Roman bezpatkové písmo, nejčastěji Arial psací písmo divoké volně psané písmo jako psací stroj Text / odstavec Vlastnost Hodnoty Význam Příklady Poznámky - 8 -

9 text-decoration: textdecoration underline overline linethrough blink bez dekorace podtržení "nadtržení" přeškrtnutí blikání text-decoration: underline text-decoration: overline text-decoration: line-through Teoreticky se dá zadávat více vlastností najednou. Netscape 4 neumí overline. MS IE neumí blinkat. text-decoration: blink Text-Transform: capitalize uppercas e lowercas e nechat jak to je Začátky Slov Velké VELKÁ PÍSMENA malá písmena texttransform Text-Transform: capitalize TEXT- TRANSFORM: UPPERCASE Text-Transform: lowercase word-spacing délka mezislovní mezera zvětšená o délku word-spacing: word-spacing: 100px Prohlížeče podporují od šestých verzí. letter-spacing: letter-spacing délka prostrkání znaků zvětšené o délku l e t t e r - s p a c i n g : Netscape 4 nepodporuje. 5 p t line-height výška násobek procento výška řádku absolutní výška násobek zvětšení line-height: 3 line-height: 8px line-height: 80% text-indent délka procento odsazení prvního řádku text-indent: 50 druhý řádek odstavce Mozilla 5 na této stránce záhadně nepodporuje, normálně ale ano. Popis použití u českých odstavců - 9 -

10 text-align: left text-align left right center justify zarovnání vlevo vpravo na střed do bloku text-align: right text-align: center text-align: justify blablabla blablabla Dá se použít jen u blokových elementů, tj. u věcí, které má smysl zarovnávat, například u odstavců. blablabla bla bla bla vertical-align baseline sub super top text-top middle bottom textbottom procento na řádek dolní index horní index co nejvýše vršek k vršku střed na střed co nejníže spodek ke spodku procento výšky baseline řádek sub řádek super řádek top řádek text-top řádek middle řádek bottom řádek text-bottom řádek 30% řádek Vertikální zarovnání nízkého prvku na vyšším řádku Vlastnosti top, middle a bottom se dají použít u buněk tabulky a u obrázků na řádku. display block inline list-item blokový element řádkový element seznam nezobrazí se display: block <br> display: inline <br> display: list-item <br> Jde o to říct prohlížeči, že některý element je druhu odstavec (blok), nebo že má být zarovnán do řádku, nebo že je to seznam. Nejzajímavější je možnost nezobrazení. Ostatní hodnoty mají význam pouze při formátování XML dokumentů. Předformátovaný text zachovává mezery a konce řádků jako ve white-space pre nowrap normální text předformátovaný nezalamovat zdroji. Obdoba tagu <pre>. Nezalamovaný neudělá automatický konec řádky. Podle mých zkušeností funguje pouze v Mozille a v IE 5.5 Závisí na <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> nebo vyšším. Barvy a pozadí Možnosti zápisu barvy Barva se dá v HTML zapsat pěti způsoby: Způsob zápisu Příklad: červené písmo Poznámka Jménem v angličtině <font color="red"> Existuje mnoho "pojmenovaných" barev

11 Procentuálním RGB zápisem Desetiným RGB zápisem Šestnáctkovým RGB zápisem Zkráceným šestnáctkovým RGB zápisem <font color="rgb(100%,0%, 0%)"> <font color="rgb (255,0,0)"> <font color="#ff0000"> <font color="#f00"> (rgb znamená Red Green Blue) Tento způsob je nejjistější, nejpoužívanější a nejlepší. Jenom v případě, že všechny dvojice cifer shodují Detailním rozborem rgb zápisů se budu zabývat níže. Pojmenované barvy Ačkoliv se dnes uvádí několik desítek pojmenovaných barev, je dobré držet se základních šestnácti windowsáckých barev. Jsou to black, white, green, maroon, olive, navy, purple, gray, yellow, lime, aqua, fuchsia, silver, red, blue a teal. Hlavní výhoda tohoto zadávání spočívá ve snadné zapamatovatelnosti, nemusíte analyzovat světelné složky. Jako všude v HTML nemusíte dávat pozor na velká písmena, RED funguje stejně dobře jako red nebo ReD. RGB model RGB znamená red green blue, čili červená zelená modrá. Lidské oko chápe každé barevné světlo jako směs tří složek: červeného (red), zeleného (green), a modrého (blue) světla

12 Stejným způsobem jsou barvy tvořeny na monitoru. Když se na zapnutý monitor podíváte lupou, uvidíte červené, zelené a modré body (nemáte-li lupu, stačí si na monitor plivnout). Rozsvícením sousedních bodů různou kombinací intenzit se tvoří barvy. Například žlutá barva se vytvoří rozsvícením zelených a červených bodů, když modré zůstanou zhasnuté. RGB v HTML funguje úplně stejně. Říká, jak moc se mají rozsvítit červené, zelené a modré body na obrazovce. Například modrá barva se dá procentuálně napsat jako rgb(0%,0%,100%), protože v ní není žádné červené světlo (to je ta první nula), žádné zelené světlo (druhá nula) a je v ní naplno modrá (100%). Žlutá by byla rgb(100%,100%,0%) neboť je tvořena červeným a zeleným světlem. Myslím, že procentuální zápis je natolik zřejmý, že jej nebudu dále rozvíjet. Nejlepší je zápis šestnáctkový, napřed ale vyložím jednodušší desítkový. Pokud máte raději praxi než teorii, podívejte se na tabulku základních barev, ve které jsem vypsal příklady včetně grafických složek barev. Desítkový RGB zápis Namísto procent se v desítkovém zápisu používají čísla od 0 do 255, kde 0 odpovídá 0% a 255 je 100%. Například zelená barva, která má procentuálně rgb(0%,50%,0%), se desítkově zapíše jako rgb (0,128,0). Proč je maximum zrovna 255? To vyplývá z toho, jak počítače zacházejí s informacemi. Pro škálování intenzity pixelu mají (v hi color) vymezeno 8 bitů, což znamená 2 8 = 256 možností. Protože tam patří i nula, tak maximum je 255. Desítkový zápis se v praxi příliš nepoužívá, ale je dobré jej pochopit, jinak zůstane záhadou i nejpoužívanější zápis šestnáctkový. Šestnáctkový (hexadecimální) zápis barvy Začíná se vždy dvojkřížkem (#, na české klávesnici pravý alt+x), za kterým následuje šest znaků. První dva znaky patří červené (red), prostřední dva zelené (green) a poslední dva modré (blue). Symbolicky to lze zapsat takto: #ČČZZMM, nebo chcete-li anglicky #RRGGBB. Každá dvojice znaků je číslo v šestnáctkové soustavě. Nejvyšší hodnotou je zde FF (odpovídá 100%), nejnižší 00. (FF je = 255) Například modrá barva je #0000FF. Žádná červená ani zelená, jenom naplno modrá. Kdo nerozumí šestnáctkové soustavě, může pro něj být tento zápis na první pohled záhadný. Důležitý je v té dvojici znaků vždycky ten první, druhý jenom drobně škáluje. Čím je ten první znak vyšší, tím více barva svítí. Přitom znak A odpovídá číslu 10, B = 11, C = 12, D = 13, E = 14, F = 15. Nelamte si s tím hlavu, nechte to koňovi, má ji větší. Za chvíli pochopíte, že se to při používání "bezpečných barev" zjednoduší. Zkrácený zápis Protože se oba znaky zastupujících jedno světlo často zapisují stejným znakem, existuje zkrácená varianta zápisu. Místo šesti znaků se použijí jenom 3. Pak symbolicky barva #RGB odpovídá barvě #RRGGBB

13 Například vyblitá barva, která se normálně zapisuje #aabbcc, se dá zapsat také #abc. Toho se bohatě využívá zejména při zápisu bezpečných barev. Bezpečné barvy Starší monitory, starší grafické karty nové mobily dokáží zobrazovat jenom některé barvy. Všechny ostatní barvy se snaží napodobovat kropenatou plochou (dithering), což se ale mnohdy nedaří. Naštěstí existují barvy, kterým se říká bezpečné a které dokáží starší monitory zobrazit bez problémů. Říká se tomu Netscape paleta. Tyto barvy mají v šestnáctkovém zápisu pro každou barvu pouze šest možných hodnot: 00, 33, 66, 99, CC nebo FF. Například #33CC66 je bezpečná barva (nazelenalá). Nebo #FF0066 je bezpečná červená. V procentuálním zápisu se mohou používat násobky 20%, což odpovídá násobkům čísla 51 v zápisu desetinném. Takových barev je 216. Můžete si je prohlédnout na samostatné stránce. Dále k bezpečným barvám patří šestnáct odstínů šedi (#xxxxxx, kde x je 0 až F). Někdy se udává, že k bezpečným barvám patří též základní barvy Windows. Bezpečné barvy by se správně měly používat i ve všech souborech gif. (U jpg je to jedno.) Zápis barev v CSS Zatímco v normálním HTML se zapisuje (symbolicky) <tag vlastnost="barva>, v CSS je to <style> tag {vlastnost: barva} </style> nebo <tag style="vlastnost: barva">. Pro zápis "barvy" platí vše, co bylo řečeno výše, i zde jsou tedy ty čtyři způsoby. (Za zmínku stojí, že se barva nedává do uvozovek, tak ji Netscape 4 nepozná.) Například obarvení všech nadpisů druhé úrovně na zeleno se dělá takto: <style> h2 {color: #009900} </style>. Vlastnost Hodnoty Význam Příklady Poznámky color barva barva písma color:blue barva pozadí background-color: yellow backgroundcolor transparent barva průhledné background-color: pozadí transparent Barva písma a základních rámečků nebo barva toho, k čemu se to vztahuje Barva pozadí. Dá se zadávat libovolná barva (zápis barev). backgroundimage url(cesta) obrázek na pozadí background-image: url ('pozadi5.gif')

14 background-image: url backgroundrepeat repeat no-repeat repeat-x repeat-y pozadí se opakuje neopakuje opakuje v ose X nebo v ose Y ('pozadi5.gif'); backgroundrepeat: repeat background-repeat: norepeat background-repeat: repeat-x background-repeat: repeat-y pozadí se příklad má smysl pouze u backgroundattachment scroll fixed posouvá pozadí je pozadí stránky; fixed se používá zejména v Netscape 4 neumí fixed jako přibité souvislosti s rámy backgroundposition top, center, bottom left, center, right, délka, procento Poloha obrázku na pozadí (nejčastěji pokud se neopakuje) background-image: url ('pozadi5.gif'); backgroundrepeat: no-repeat; background-position: right 50% 2 hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze. Netscape 4.x neumí změnit polohu z levé horní, dokonce tuto vlastnost ani nezná. všechny výše background: url background uvedé ('pozadi5.gif') no-repeat Vizte Vše o pozadí hodnoty scroll silver center bottom URL se zadává do závorek a apostrofů, např.: background-image: url('pozadi.gif'). Jsou ale možné i uvozovky nebo jenom závorky. URL může být absolutní i relativní, je však citlivé na velikost písmen. Velikost a obtékání * Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji šířka dokumentu (nezávislá na okně), kdežto procentuální výška nevnořených elementů se počítá z výšky okna! Vlastnos t Hodnoty Význam Příklady Poznámky

15 V IE nelze nastavit width pro body. Prohlížeče se velmi liší v tom, u kterých objektů jsou width auto šířka procento automatická šířka nastavená šířka procento * Vizte popis délkových jednotek ochotny šířku akceptovat. Myslím, že to má souvislost s blokovými a řádkovými elementy. V Internet Exploreru 4 a vyšších je do šířky nesprávně započítávána šířka paddingu a borderu (to je quirk mode). Opera, Mozilla (a IE6 ve standardním režimu) počítají správně. height auto výška procento automatická výška nastavená výška procento * Dá se nastavit jenom některým tagům. Nejlépe funguje u <div>. Netscape 4 má s height problémy. float left right umístění plovoucího (obtékaného) objektu či zda je neplavec float: left normální odstavec float: right Pro IE 4 nutno aplikovat na div, img nebo object clear left right both čekání na skončení plovoucích objektů zleva, zprava, obou, nebo žádných Používá se namísto atributu "clear" u tagu BR. Většinou u nadpisů pod obrázky. Komentáře EM { color: red} /* všechna zvýraznění budou červená */

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

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

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

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

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

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

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

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

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

Tvorba webových stránek

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

Více

KASKÁDOVÉ STYLY - 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

(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

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

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

Základy HTML. Autor: Palito

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

Více

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

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

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

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

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

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

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

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

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

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

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

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

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

Více

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

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

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

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

Více

Výukový materiál 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

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

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

Barvy v počítači a HTML.

Barvy v počítači a HTML. Barvy v počítači a HTML. Barevný prostor RGB Barvy zobrazované na monitoru jsou skládány ze tří složek (částí světelného spektra). Červená (Red) Zelená (Green) Modrá (Blue) Výsledná barva je dána intenzitou

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

MODUL 7: TVORBA WEBOVÝCH APLIKACÍ

MODUL 7: TVORBA WEBOVÝCH APLIKACÍ 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

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

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

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

Jak vytvořit jednoduché webové stránky.

Jak vytvořit jednoduché webové stránky. Jak vytvořit jednoduché webové stránky. Od vynálezu protokolu HTTP pro přenos dokumentů a jazyka HTML pro jejich popis již uběhlo více než 17 let. Za tu dobu se vyvíjel jak protokol, tak i jazyk. Od původního

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

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

HTML. Verze 2009. Obsah:

HTML. Verze 2009. Obsah: HTML Verze 2009 Obsah: 1) Popis HTML...1 2) Základní popis jazyka...1 2.1) Struktura.html souboru...1 3) Hlavička dokumentu - Head...2 4) Tělo dokumentu - Body...3 5) Text a jeho formátování...5 5.1) Další

Více

CO je to? WWW, HTML, CSS

CO je to? WWW, HTML, CSS CO je to? WWW, HTML, CSS Jak vytvořit vlastní webovou stránku Potřebujete: Webový prohlížeč (Internet Explorer, Opera, Mozilla Firefox nebo Google Chrome. Připojení na internet není nutné v první fázi.

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

CSS Cascading style sheet přehled vlastností selektory

CSS Cascading style sheet přehled vlastností selektory CSS Cascading style sheet přehled vlastností selektory Praha a EU Investujeme do vaší budoucnosti Obsah 1 Přehled některých vlastností a hodnot... 2 1.1 Formátování textu... 2 1.2 Barvy a pozadí v dokumentu...

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

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

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

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

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

Více

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

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

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Word prostředí, základní editace textu Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Office balík aplikací používaných v kancelářské i jiné práci Word textový

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

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

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

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

Více

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

ŠKODA Portal Platform

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

Více

Manuál. pro tvorbu webu. HTML CSS JavaScript

Manuál. pro tvorbu webu. HTML CSS JavaScript Manuál pro tvorbu webu HTML CSS JavaScript Obsah HTML... 3 Struktura stránky... 3 Práce s textem... 3 Obrázky a barvy... 4 Odkazy... 4 Seznamy... 5 Tabulky... 5 Formuláře... 6 CSS... 7 Selektory... 7 Písmo

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

Počítače přirozeně pracují pouze s čísly

Počítače přirozeně pracují pouze s čísly Kódování a entity v XHTML Úvod do CSS Internetové publikování 1 Kódování znaků Počítače přirozeně pracují pouze s čísly Zprostředkování práce se znaky definice párování číslo ~ znak soubor definic = kódová

Více

Práce se styly 1. Styl

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

Více

Š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 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené... Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat

Více

3. Kompatibilita, použitelnost a základy typografie. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

3. Kompatibilita, použitelnost a základy typografie. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008) 3. Kompatibilita, použitelnost a základy typografie Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Kompatibilita } Použitelnost webu } Typografie } Barvy a barevné efekty 2 Kompatibilita } Zpětná

Více

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

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

Více

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

www.helpmark.cz Tomáš Herout

www.helpmark.cz Tomáš Herout 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi

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

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov

Střední průmyslová škola Ostrov. Tvorba webových stránek. Petr Pistulka I2 2012-2013 CC - BY NC SA3.0. Klínovecká 1197 363 01 Ostrov Střední průmyslová škola Ostrov Klínovecká 1197 363 01 Ostrov Tvorba webových stránek Petr Pistulka I2 2012-2013 CC - BY NC SA3.0 Prohlášení Prohlašuji, že jsem svou práci vypracoval samostatně, použil

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

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

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

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

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

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

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26 CSS 5 Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis

Více

Název: VY_32_INOVACE_PG4102 Základní HTML značky. Autor: Mgr. Tomáš Javorský. Datum vytvoření: 05 / 2012. Ročník: 3

Název: VY_32_INOVACE_PG4102 Základní HTML značky. Autor: Mgr. Tomáš Javorský. Datum vytvoření: 05 / 2012. Ročník: 3 Název: VY_32_INOVACE_PG4102 Základní HTML značky Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení s nejdůležitějšími

Více

Textové editory. Ing. Luděk Richter

Textové editory. Ing. Luděk Richter Textové editory Ing. Luděk Richter Střední škola, Havířov-Šumbark, Sýkorova 1/613, příspěvková organizace Tento výukový materiál byl zpracován v rámci akce EU peníze středním školám - OP VK 1.5. Výuková

Více

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

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

Více

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

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

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

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

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

Více

2.8.1 Nejdůležitější a nejpoužívanější elementy... 35 2.9 Ostatní... 36 2.9.1 Znakové entity... 36 2.9.2 kontejnery... 36 2.9.3 komentáře...

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy... 35 2.9 Ostatní... 36 2.9.1 Znakové entity... 36 2.9.2 kontejnery... 36 2.9.3 komentáře... OBSAH Obsah... 4 1. Úvod... 7 1.1 Princip webových stránek... 7 1.1.1 WWW stránka... 7 1.2 Historie XHTML... 9 1.3 Obecně o XHTML... 10 1.4 XHTML editory... 12 1.4.1 Wysiwyg editory... 12 1.4.2 Strukturní

Více

Úvod do počítačové grafiky

Úvod do počítačové grafiky Úvod do počítačové grafiky elmag. záření s určitou vlnovou délkou dopadající na sítnici našeho oka vnímáme jako barvu v rámci viditelné části spektra je člověk schopen rozlišit přibližně 10 milionů barev

Více

Tvorba webu. Základní HTML tagy. Martin Urza

Tvorba webu. Základní HTML tagy. Martin Urza Tvorba webu Základní HTML tagy Martin Urza Cvičení V průběhu přednášky budou postupně probírány jednotlivé základní elementy jazyka HTML a jejich atributy. Nemá smysl tyto věci probírat jen teoreticky

Více

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

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

Více

K 2 - Základy zpracování textu

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

Více

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: 18. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 8. Pozadí webové stránky. CSS pozadí. Datum vytvoření: 18. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 8. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 18. 10. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM

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

INTERSTENO 2015 Budapest World championship professional Word Processing

INTERSTENO 2015 Budapest World championship professional Word Processing OPERAČNÍ SYSTÉM WORD PROCESSING SOFTWARE (TEXTOVÝ PROCESOR) ID SOUTĚŽÍCÍHO Úloha A-1 Instrukce pro účastníky Otevřete dokument YEAROFLIGHT, ihned ho uložte/převeďte do YEAROFLIGHTXXX.DOC NEBO DOCX, kde

Více

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

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

Více

Maturitní otázka číslo 23 strana 1 z 5. Typografie

Maturitní otázka číslo 23 strana 1 z 5. Typografie Maturitní otázka číslo 23 strana 1 z 5 Typografie Typografie je vědní obor zabývající se sázením textu, hlavně jeho grafickou stránkou. S příchodem počítačů máme k dispozici různé DTP programy (DeskTop

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 webu. Úvod a základní principy. Martin Urza

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

Více