PODPORA ELEKTRONICKÝCH FOREM VÝUKY
|
|
|
- Ilona Žáková
- před 8 lety
- Počet zobrazení:
Transkript
1 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/ Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín
2 I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í Programové vybavení Programové vybavení_4.ročník_b Autorem tohoto výukového materiálu je Mgr. Hynek Kohout SOŠ informatiky a spojů a SOU, Jaselská 826, Kolín
3 Úvod Použití CCS Vlastnosti písma Vlastnosti textu Seznamy Pozadí Rámečky Pozice elementu, rozměry Příklady Metatagy Inspirativní webdesign Pravidla tvorby WWW Test CSS Informační zdroje
4 Úvod Kaskádové styly (Cascading Style Sheets ) Umožňují definovat způsob zobrazení (druh a velikost písma, barvu, zarovnání.. každého elementu na stránce. Styl není přímo součástí textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný. Styly umožňují definovat jednotný vzhled určitého elementu v celém dokumentu jedním zápisem -- nemusíme jej opakovat u každého elementu. Pro tvorbu CSS je potřeba textový editor a nezbytná znalost jazyka HTML.
5 Úvod Nevýhody použití CSS Rozdílná implementace různými prohlížeči????
6 Úvod Program Topstyle program pro přehledné zadávání kaskádovách stylů a jejich vlastností ctrl + mezerník vkládání příkazů
7 Použití CCS 1. Přímý styl Přímo v textu zdroje u formátovaného elementu pomocí atributu style="...". <p style="color: green">tento odstavec bude zelený.</p> 2. Stylopis Zápis kaskádového stylu se provádí mezi tagy <style>... </style> Tagy se umísťují do hlavičky dokumentu, která je uvozena tagy <head>... </head> Příklad: <head> <style> p {color: red} </style> <head> <body> <p></p> The British pride in ownership is well known.. A house, a garden and a place to wash the car is a British ideal. </body>
8 Použití CCS 3. Pomocí externího souboru V externím editoru vytvoříme soubor s příponou css. Např. styly.css Tento externí soubor propojíme s HTML stránkou nebo stránkami pomocí příkazu umístěného v hlavičce HTML stránky. <link rel="stylesheet" type="text/css" href=styly.css"> Do externího souboru vložíme css příkazy: p {color: green} h1 {color: red} styly.css p {color: green} h1 {color: red} stranka.html stranka.html stranka.html
9 Použití CCS Zapisují se jako soubor pravidel, složených ze dvou částí. CSS nazývá prvníčást selektorem a druhou část deklarací. H1{ color:blue } p{ align:left }
10 Vlastnosti písma font-family font-size font-variant font-style font-weight font typ písma velikost varianty písma řez písma tloušťka zkrácený zápis
11 Vlastnosti písma
12 hieroglifické Vlastnosti písma klínové tibetské
13 Vlastnosti písma font-family Určuje font pro vykreslení písma v prohlížeči tzv. rodina písma Pokud prohlížeč uvedené písmo najde, použije ho k vykreslení fontu, pokud nenajde zkouší použít další font uvedený v seznamu fontů vlastnosti font-family. H1 {font-family: Arial;} H1 { font-family: Arial,Verdena;} H1 { font-family: Arial,Verdena, Tahoma;}
14 Vlastnosti písma font-family Obecné skupiny písma vlastnosti font family serif patkové písmo sans-serif bezpatkové písmo cursive kurzíva fantasy ozdobné písmo monospace neproporcionální písmo
15 Vlastnosti písma font- size Velikost písma lze zadávat absolutně nebo relativně: mm cm in (milimetr) (centimetr) (2,54cm) pt (1/72 palce) px (pixel) % (procenta)
16 Vlastnosti písma font- style normal normální stojaté písmo Italic kurzíva obliques skloněné písmo (geometricky transformované stojaté písmo) font- variant normal small-caps normální stojaté písmo velká písmena zmenšená na velikost malých písmen
17 Vlastnosti písma font- weight font- weight : normal normální písmo font- weight : bold tučné Tuto vlastnost je možné zadávat číslicemi od 100 do 900 v násobcích 100 : font- weight : 100 nejméně tučné písmo nejvíce tučné písmo
18 Vlastnosti písma font- zkrácený zápis souhrnu vlastností Všechny vlastnosti font, je možné zapsat bez zadávání jednotlivých vlastností samostatně, ale výčtem v tomto pořadí: font-style 1. font-variant 2. font-weight 3. font-size 4. font-family {font: bold italic 15px Verdana}
19 Vlastnosti textu word-spacing - mezery mezi slovy letter-spacing - mezery mezi znaky text-decoration - podtrhávání, přeškrtnutí vertical-align - svislé zarovnání text-transform - malé / velké znaky text-align - zarovnání textu text-indent - odsazení prvního řádku line-height řádkování
20 Vlastnosti textu word-spacing určuje mezeru mezi slovy word-spacing:normal word-spacing: 2px word-spacing: 150%; (standartní mezera mezi slovy) Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in letter-spacing: 5px; letter-spacing určuje mezeru mezi písmeny Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in
21 Vlastnosti textu text-decoration určuje vzhled písma text-decoration : none text-decoration : underline text-decoration : overline text-decoration : line-through text-decoration : blink žádné podtržení podtržení nadtržení přeškrtnutí blikání
22 Vlastnosti textu vertical-align určuje vertikální zarovnávání textu v bloku vertical-align : baseline vertical-align : middle zarovnání na účaří rámu zarovnání středu prvku na střed řádku vertical-align : top zarovnání horní hrany textu s horní hranou rámu vertical-align : bottom zarovnání spodní hrany řádku s dolní hranou rámu vertical-align : sub posune účaří rámu dolů vertical-align : super posune účaří rámu nahoru vertical-align : text-top zarovnání horní hrany rámu s horním účařím vertical-align : textubaseline zarovnání na účaří rámu
23 Vlastnosti textu text-transform převod velkých písmen na malá a opačně text-transform : none znaky beze změn text-transform : capitalize převedení na kapitálky každé slovo text-transform : uppercase všechny znaky převedené na velké text-transform : lowercase všechny znaky převedené na malé
24 Vlastnosti textu text-align horizontální zarovnání textu text-align : left / right / center / justify vlevo, vpravo, na střed, do bloku text-indent odsazení prvnířádky text-indent : 40px Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in
25 Vlastnosti textu text-height řádkování textu line-height: 1.3px; line-height: 170%; procento normální výšky line-height: 1.5; násobek velikosti řádkování Dovolené jednotky: em, ex, px, cm, mm, pt, pc, in line-height: 170% ; = line-height: 1.7;
26 Seznamy Pří použítí seznamů se používají tagy <ul>, <ol>, <li> <OL> <LI> asie <LI> afrika <LI> amerika </OL> <UL> <LI> asie <LI> afrika <LI> amerika </UL> číslovaný seznam seznam s odrážkami U číslovaného i nečíslovaného seznam lze v CSS typ odrážky nebo číslování, obrázkovou odrážku a umístění odrážek v textu.
27 Seznamy Vzhled odrážky nebo čísla list-style-type: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none Doplňky: armenian, georgian, hiragana, katakana, hiragana-iroha, katakana-iroha
28 Seznamy Umístění odrážky list-style-position : outside odrážka je umístěna vlevo od bloku textu, řádky začínají pod sebou inside odrážka je umístěna hned vedle textu, takže druhý řádek je pod odrážkou Obrázková odrážka list-style-image list-style-image: url( foto.gif ). <ul> <li style="list-style-image: url( adresar/foto.gif')">text odrážky</li> </ul> Umístění obrázku na disku může být popsáno absolutním i relativním odkazem!
29 Třídy, identifikátory Třídy 1. Umožňují vytvořit vlastní prvky nezávislé na HTML 2. definují se pomocí tečky a názvu třídy v hlavičce dokumentu nebo externím souboru: Definice třídy: <style>.název třídy { seznam vlastností }.test { text-align: center; font-weight: bold } </style> Použití třídy: <style> <tag class="jméno_třídy"> <p class= testl">vlastní text odstavce</p> </style>
30 Třídy, identifikátory Kombinace tříd Třídy v jednotlivých tagách lze libovolně kombinovat a seskupovat Jsou definovány tyto třídy <style>.kurziva {font-style: italic;}.tucna {font-weight:bold;}.zelená {color:green;} </style> Použití: <p class="kurziva tucna zelená"> <p class="kurziva zelená"> <p class=" tucna zelená">
31 Třídy, identifikátory Kontextové selektory Používají se v případě, pokud je nutné použit jinou vlastnost u prvku, který je uvnitř jiného elementu <style> div p { color : green; background-color : white; } </style> Pokud bude element p uvnitř elementu div sformátuje se dle předpisu text bude zelený, podklad bílý. Text Text Text Text Text Text Text Text Text
32 Třídy, identifikátory Identifikátor Je podobný třídě, má však vyšší prioritu. Označuje se symbolem # na rozdíl od třídy, kde se používá.. Může být přiřazen pouze jedinému objektu na rozdíl od třídy. Definice ID <STYLE> #prvni_odstavec {text-indent : 40px ;} </STYLE> Použití: <P ID="prvni_odstavec">Toto je text na který je použit ID </P>
33 Třídy, identifikátory Dědičnost Třídy Příklad: p {color : red;} p.zelena {color : green;} každý odstavec bude zobrazen červeným písmen a odstavce třídou zelená. (p class="cervena") se zobrazíčervenou barvou. Identifikátor.moje{color : Black;} #zelena{color : blue;} (id= zelena") bude zobrazen černým písmen a odstavce s třídou zelená.
34 Třídy, identifikátory Dědičnost Vyšší váha stylu pokud máme styl v externím souboru a nastavené odstavce P na zelenou barvu a jeden odstavec v HTML stránce chcete změnit na červenou barvu tak přímo do elementu přídáte style="color:red" style="color:red" má vyšší váhu protože byl zapsán později a odstavec bude červený. Pokud za styl je vloženo slovo! important nebude záležet jesli byl napsán později a bude mít vždy vyšší váhu!! Dědičnost si vysvětlíme na následujícím příkladu, co se stane když do hlavního nadpisu vložíme element a (odkaz), odkaz zdědí po hlavním nadpisu velikost, ale jen tehdy pokud odkazu ve stylovém předpisu velikost nenastavíme. h1{color : green; background-color : red;font-family : Verdanal, Helvetica, sans-serif; font-size : 150%;} Odkaz <a> zdědí po nadpisu velikost, barvu pozadí a rodinu písma.
35 Třídy, identifikátory Pseudotřídy Charakteristika: 1. Speciálním typem class 2. vždy použity na celý obsah elementu 3. aktivovány nějakou událostí nebo splněním podmínky 4. Používají symbol : link visited active hover focus
36 Třídy, identifikátory Pseudotřídy Pseudotřídy definované pro odkazy :link - aplikuje se na ještě nenavštívený odkaz :visited aplikuje se na již navštívený odkaz O použití je rozhodnuto již při načítání HTML stránky prohlížečem. Dynamické pseudotřídy :active - odkaz bykl aktivován, na odkazu bylo zmáčknuto tlačítko myši a tlačítko je stále stlačeno. :hover aktivuje se při přejetí kurzoru nad odkazem :focus - odkaz byl vybrán například klávesou TAB
37 Pseudotřídy Pseudotřídy definované pro text :first-letter - používá se k formátování prvního písmena v textu - tvorba iniciály :first-line - používá se k formátování prvního řádku v textu p:first-line {color: red} Třídy, identifikátory
38 Pozadí Barva na pozadí široce podporovaná vlastnost většinou prohlížečů Příklad: background-color : RGB(255,0,0) background-color: #FFFFCC background-color: red Obrázek na pozadí background-image background-image: url(/foto/leto/obrazek.jpg) background-image: url(foto.jpg) Při zadání URL je nutné dbát na správné umístění cílového souboru ve stromové struktuře počítače!
39 Pozadí background-color Opakování obrázku na pozadí Vlastnosti: repeat-x horizontální opakování obrázku repeat-y vertikální opakování obrázku no-repeat zákaz opakování obrázku na pozadí Příklad: 1. body {background-image: url(obrazek.png); background-repeat: repeat-x;} 2. body {background-image: url(obrazek.png); background-repeat: repeat-y;} U prohlížečů je vlastnost opakování nastavena automaticky. Jednotlivé obrazy se vykreslují jeden vedle druhého - vyplní celý obsah HTML stránky.
40 Pozadí Pozice obrázku na pozadí background-position určuje pozici obrázku na obrazovce background-position: x y Vlastnosti: bottom dole right vpravo left vlevo top nahoře % pixel Příklad: background-position: right top background-position: 100% 0%
41 Pozadí rolování obrázkového pozadí Fixace pozadí background-attachment : rolování obrázkového pozadí Příklad: background-attachment :scroll background-attachment :fixed pozadí se roluje se stránkou pozadí je pevně přichyceno při rolování Definice <style> body {background-image: url(foto.jpg); background-attachment:scroll;} </style>
42 Pozadí
43 Rámečky Pomocí kaskádových stylů lze u boxů nastavit šířku, výšku, orámování, vnitřní a vnější okraj.
44 Buňkám tabulek vždy nastavujte vnitřní okraj (cellpadding), aby se text nelepil na rámeček. Celému tělu stránky (tag <body>) zadejte pravý a levý margin, ať není text nalepený na okraje okna. Potom se navíc může vlevo vykreslit něco na pozadí nebo -- pokud bude okraj větší -- umístit do něj absolutně pozicované menu. Máte-li na stránce víc obrázků, oddělujte je prostorem. České odstavce bez vertikálních mezer popisuji v CSS prakticky. Zajímavé je, že plovoucí elementy (obrázky například) se umísťují do marga jiných elemetů. Například pokud máte obrázek plovoucí vpravo a za ním odstavec s pravým margem, obrázek se zarovná ke kraji dokumentu. A určitě přijdete na další. Kdo hodně používá tabulky a pozadí nebo dělá rámečky kolem obrázků nebo odstavců, musí pochopit rozdíl mezi vnitřním a vnějším okrajem elementu. Používá se
45 Rámečky Margin Vlastnost margin určuje velikost vnějších okrajů okolo boxu. Výčet vlastností: margin-top - horní vnější okraj margin-bottom - dolní vnější okraj margin-left - levý vnější okraj margin-right - pravý vnější okraj margin - kompletní nastavení vnějších okrajů Velikost se udává v procentech nebo délkových jednotkách Příklad: p.ramecek{ margin-bottom : 15px; margin-left : 15px; margin-right : 15px; margin-top : 15px; } Zkrácený zápis: nastavuje se v tomto pořadí horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj. p.ramecek {margin : 15px 15px 15px 15px;}.
46 Rámečky Padding Vlastnost padding určuje velikost vnitřních okrajů uvnitř boxu. Výčet vlastností: padding-top - horní vnitřní okraj padding-bottom - dolní vnitřní okraj padding-left - levý vnitřní okraj padding-right - pravý vnitřní okraj Velikost se udává v procentech nebo délkových jednotkách Příklad: p.vnokraj { padding-bottom : 40px; padding-left : 40px; padding-right : 40px; padding-top : 40px; } Zkrácený zápis: nastavuje se v tomto pořadí horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj. p.vokraj {padding : 50px 50px 50px 50px;}
47 Rámečky Border Vlastnost border určuje šířku, barvu a druh rámečku. Výčet vlastností: border-top - nastavení horníčásti rámečku border-bottom - nastavení dolníčásti rámečku border-left - nastavení levéčásti rámečku border-right - nastavení pravéčásti rámečku border - kompletní nastavení rámečku border-color - kompletní nastavení barvy rámečku border-style - kompletní nastavení stylu rámečku border-width - kompletní nastavení šířky rámečku Kombinace jednotlivých vlastností I. border-left-color - nastavení barvy border-left-style - nastavení stylu border-left-width - nastavení šířky border-right-color - nastavení barvy border-right-style - nastavení stylu border-right-width - nastavení šířky
48 Rámečky Kombinace jednotlivých vlastností II. border-top-color - nastavení barvy border-top-style - nastavení stylu border-top-width - nastavení šířky border-bottom-color - nastavení barvy border-bottom-style - nastavení stylu border-bottom-width - nastavení šířky Border border-style - kompletní nastavení stylu rámečku border-style border-style: none dotted dashed solid double groove ridge inset outset.
49 Rámečky Border ukázka vzhledu jednotlivých rámečků Příklad: test{ border-bottom : 2px dashed #FF00FF; border-left : 4px dashed #FF00FF; border-top : 2px dashed #FF00FF; border-right : 4px dashed #FF00FF; }
50 Width šířka určuje šířku objektu p.test{width : 300px;} tag p s třídou test bude široký 300 pixelů Rámečky Rozměry objektu Velikost se udává v procentech nebo délkových jednotkách. Vlastnost width nefunguje na řádkové prvky!! Height výška určuje výšku objektu p.test{height : 300px;} tag p s třídou test bude vysoký 300 pixelů Velikost se udává v procentech nebo délkových jednotkách.
51 Rámečky Plování objektu Float plování / obtékání objektu float : left float : right float :none intherit zarovnání vlevo a obtékání textem z druhé strany zarovnání vpravo a obtékání textem z druhé strany objekt není plovoucí hodnota se zdědí po rodičovském prvku Příklad: img.doprava {float : right} obrázek bude umístěn vpravo
52 Rámečky Řízení obtékání textu Clear clear : none clear : both clear : left clear : right popisuje čekání na ukončení obtékaných prvků na plovoucí prvky se nečeká objekt buude vykreslen až po všemi prvek čeká na obtékané elementy přiražené doleva prvek čeká na obtékané elementy přiražené doprava Čekání na plovoucí objekt, je myšleno, že se vykreslí až pod tímto plovoucím objektem. Normálně prvky na skončení obtékaného prvku nečekají (kdyby čekaly, tak ty prvky už nebudou obtékané. Plovoucí objekty jsou takové objekty, které mají nastavenou vlastnost float na left nebo right, popřípadě jsou zarovnány vlastnoastí align doleva nebo doprava.
53 Rámečky Příklad na řízení obtékání Výchozí situace: Na stránce je umístěný text, vedle textu vpravo obtékaný obrázek. Za textem má následovat nadpis s tagem <H4>... </H4>. <img src= foto.jpg" width= 300" height= 300" style="float: right"> vlastní text článku... <h4>nadpis</h4> 1. Nadpis se zobrazí nalevo od obtékaného obrázku. Nadpis bude umístěn pod obrázkem nikoliv vedle něho. <img src= foto.jpg" width="200" height="300" style="float: right"> vlastní text článku... <h4 style="clear: both">nadpis</h4> 2.
54 Rámečky Příklad na řízení obtékání Řešení 1
55 Rámečky Příklad na řízení obtékání Řešení 2
56 Pozice elementu, rozměry Pozice Absolutní Relativní Absolutní pozice - objekt je umístěn do stránky na udané souřadnice bez ohledu na okolní text. Relativní pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své normální poloze.
57 Pozice elementu, rozměry Pozice elementu position:relative position:absolute relativní pozice absolutní pozice v souřadném systému top posunutí objektu směrem dolů v jednotkách * left posunutí objektu směrem doprava v jednotkách * z-index překrývání objektů. Je možné zadávat kladná i zápornáčísla. Čím vyššíčíslo tím je nám vrstva blíže. *Dovolené jednotky pro top a left : em, ex, px, cm, mm, pt, pc, in Příklad: position: relative; top: 50px ; position: absolute; top: 150px; left: 100px
58 Pozice elementu, rozměry Příklad 1 <body> Normální text, <span style="position: relative; top: 20px"> relativně umístěný text</span> a <span style="position: absolute; top: 100px; left: 150px">absolutně umístěný text</span>. </body> Příklad 2 position:absolute; width: 150px; height: 150px; top:250px; left: 100px; backgroundcolor:lime; z-index:2
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
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
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
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...
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...
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
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.....................
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í
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
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).
Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)
Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading
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
Cascading Style Sheets CSS Selektory Selektory
CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>
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
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
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
CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace
CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace
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
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
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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
Základy CSS (3. přednáška)
Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze
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
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
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í
CSS styly. Cascading Style Sheets kaskádové styly
CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen
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
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ý
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
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...
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
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í
KASKÁDOVÉ STYLY - CSS
Kaskádové styly I. KASKÁDOVÉ STYLY - CSS HTML je značkovací jazyk, ve kterém by se pomocí značek měl vyznačovat význam jednotlivých částí textu. Z vlastní zkušenosti však víme, že dnes v HTML existuje
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.
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
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
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
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
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
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border
Historie. K čemu je to dobré? Začínáme. Úvod do CSS Historie K čemu je to dobré? Začínáme
Úvod do CSS Historie K čemu je to dobré? Začínáme Historie CSS (Cascading Sytle Sheets) boli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu strák. První návrh normy byl zveřejněn v roce 1994,
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
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
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
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako absolutně pozicované bloky)
12. Úvod do CSS (CSS styly)
12. Úvod do CSS (CSS styly) HTML kód je naprostým základem při tvorbě internetových stránek. Je to nosný pilíř, který musí jakýkoliv tvůrce internetových stránek bez potíží ovládat. Pokud ale budete tvořit
<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
tvoříme web HTML/CSS
tvoříme web HTML/CSS 22. 4. 2018 Zlín HTML/CSS Co s načatou nedělí Pochopíme k čemu slouží HTML a CSS Naučíme se pár nových slovíček Vytvoříme webovou stránku v HTML Dáme jídlo Pomocí CSS dodáme stránce
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
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití 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í
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
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
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
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
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
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
1. Přímo vložený styl
CSS 1. Přímo vložený styl 2. Šablona stylu v dokumentu 3. Externí šablony stylů 4. Syntaxe stylů 5. Třídy stylů 6. Vlastnosti písma 7. Vlastnosti barvy a pozadí 8. Vlastnosti textu 9. Vlastnosti obdelníku
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
(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
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
selektor {vlastnost1: hodnota_vlastnosti1; vlastnost2: hodnota_vlastnosti2;}
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
Microsoft Office SharePoint Server 2007
Microsoft Office SharePoint Server 2007 Příručka pro uživatele Úvod do HTML a CSS Verze 1.1 Stav k 7.4. 2009 Středisko komunikačních a informačních systému Univerzita obrany Brno 2009 2008 Středisko komunikačních
Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)
Skripta ke školení Autor: Tomáš Herout E-mail: herout@helpmark.cz Telefon: (+420) 739 719 548 2017 Obsah CSS... 3 Co je to CSS... 3 Druhy selektorů... 4 Pseudotřídy a pseudoelementy nejpoužívanější z nich...
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
Š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
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é
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
CSS kaskádové styly a jejich využití při tvorbě internetových stránek
Základní škola Dr. E. Beneše, Praha 9 Čakovice, nám. J. Berana 500 Ročník 9. A CSS kaskádové styly a jejich využití při tvorbě internetových stránek Školní rok: 2010 / 2011 Vypracoval: Michal Kolář Vedoucí
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová
Název projektu: Podpora výuky v technických oborech Registrační číslo projektu: CZ.1.07/1.5.00/34.0458 Název šablony: V/2 Inovace a zkvalitnění výuky směřující k rozvoji odborných kompetencí žáků středních
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
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
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í
HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>
HTML Úvod do (X)HTML Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) text HTML HyperText Markup Language HTML první verze 1991 Značkovací jazyk
CSS (Cascading Style Sheets) Jak se zapisují? externí soubory s koncovkou.css. přímo do www stránky
CSS (Cascading Style Sheets) Jak se zapisují? externí soubory s koncovkou.css přímo do www stránky Externí soubory: stránka se styly
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
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ý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
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
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
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
absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru.
Základy www Jak vytvořit webové stránky Návody a příklady najdete na adrese webowebu.phorum.cz Podrobný popis a další možnosti najdete na stránkách owebu.org Potřebný software Html editor PSPad, který
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ší
VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB. Projekt
VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB Projekt Návrh a implementace systému správy obsluhy pro informační screen VOŠIS Zadavatel: Ing. Antonín Skopec Petr Bednář vedoucí
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í
Káskádové styly = CSS
1/31 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í CSS lze nadefinovat společný
Techniky rozvržení KAPITOLA 2
Techniky rozvržení KAPITOLA 2 V této kapitole: Box model Blokové versus řádkové elementy Zkrácené versus běžné vlastnosti jazyka CSS Rozvržení založené na obtékání Pozicování v jazyce CSS Responzivní web
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
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
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
Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant
Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu
CSS Kaskádní styly. Založeno na přednášce Lukáše Bařinky
CSS Kaskádní styly Založeno na přednášce Lukáše Bařinky Obsah Základní principy Syntaxe Selektory Dědičnost Formátovací model Generovaný obsah Média, UI Co se nevešlo... Základní principy Dopřená i zpětná
Všechny značky musí být vzájemně správně vnořeny <i><b>špatně</i></b> <i><b>správně</b></i>
1 Tvorba WWW stránek Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Mohou být použité i jiné programovací jazyky jako XML, XHTML apod.
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á
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
Použití CSS v dokumentech HTML
Použití CSS v dokumentech HTML Tabulky kaskádových stylů mohou být součástí dokumentu HTML, nebo být umístěny v separé souboru. Jsou tři možnosti použití: přímá definice stylu - jednoho prvku pomocí atributu
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í
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)
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