Mgr. Vlastislav Kučera lekce č. 3

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Technologie pro publikování na webu 1
TVORBA WEBOVÝCH STRÁNEK
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Tagy neboli příkazy Olga Kasafírková Základy HTML.
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
Mgr. Vlastislav Kučera přednáška č. 5.  Seznamy  CSS – vlastnosti seznamů ◦ list-style-type, list-style-image, list-style-position  Tabulky  CSS –
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
HyperText Markup Language
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektu CZ.1.07/1.5.00/ Číslo sady29Číslo DUM14.
Programování HTML stránek
TNPW1 Cvičení
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání,
ZÁKLADNÍ TYPOGRAFICKÁ PRAVIDLA
Mgr. Vlastislav Kučera přednáška č. 10.  Polohování ◦ Absolutní polohování  Vlastnosti ◦ umístění ◦ display ◦ visibility.
TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní.
Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.
GWEB2 MGR. VLASTISLAV KUČERA 3. PŘEDNÁŠKA. Obsah přednášky  CSS3  barvy  border-radius  box-shadow  text-shadow.
Formátování textu. Odstavce  tvoříme párovou značkou  text bude od ostatního textu oddělen Konec řádky  nepárová značka způsobuje ukončení řádku a.
TNPW1 Technologie pro publikování na webu
Jazyk HTML.
Třídy, generické třídy, pseudotřídy
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Blokový model v CSS Obr. 1.
GWEB2 MGR. VLASTISLAV KUČERA 2. PŘEDNÁŠKA. Obsah přednášky  Prvky rozdělující obsah  article, aside, nav, section  header  footer.
Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
CSS – rámečky Mgr. Lenka Švancarová.
KASKÁDOVÉ STYLY SYNTAXE STYLŮ PRAVIDLO DEFINUJÍCÍ STYL SE SKLÁDÁ Z NEJMÉNĚ TŘÍ ZÁKLADNÍCH ČÁSTÍ: * SELEKTOR ZNAČKY * SLOŽENÉ ZÁVORKY A V NICH JE.
Word – Zásady psaní textu
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_258 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
Textový procesor (MS Word)
Kaskádové styly - CSS.
KASKÁDOVÉ STYLY DÉLKOVÉ JEDNOTKY DÉLKOVÉ ÚDAJE SE ZAPISUJÍ JAKO CELÁ NEBO DESETINNÁ ČÍSLA S NEBO BEZ ZNAMÉNKA. DVOJICE PÍSMEN IDENTIFIKUJÍCÍ JEDNOTKY.
Pravidla a doporučení pro názvy souborů
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
CSS – vlastnosti textu text-align (vodorovné zarovnání)
Referát č.13 Textový editor (struktura textu – přiřazení stylu, formátování (vzhled) textu, změna stylu, typografická a estetická pravidla)
TNPW1 Cvičení
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
KASKÁDOVÉ STYLY 1. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ.
CSS Cascading Style Sheets Kaskádové styly
Mgr. Vlastislav Kučera přednáška č. 5.  transformace  přechody.
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
CSS – float a clear Mgr. Lenka Švancarová. CSS – float Vlastnost určuje obtékání prvku. Hodnoty:  right – prvek bude zarovnán vpravo, okolní obsah stránky.
Mgr. Vlastislav Kučera lekce č. 6.  Polohování ◦ normální řazení ◦ plovoucí boxy  Vlastnosti ◦ float ◦ clear.
Obrázky v HTML dokumentech Druhy a použití. Obrázky + Zvyšují atraktivitu stránek. + Zvyšují vypovídací schopnost stránek. - Zvyšují dobu načítání stránky.
VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS.
Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),
Mgr. Vlastislav Kučera přednáška č. 3
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS formátování.
KASKÁDOVÉ STYLY.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
Tvorba WEBOVÝCH stránek – základní TAGY
Jméno Příjmení, další jména Ústav konstruování
Tvorba webových stránek
Transkript prezentace:

Mgr. Vlastislav Kučera lekce č. 3 PGWE1 Mgr. Vlastislav Kučera lekce č. 3

Obsah přednášky Nadpisy Odstavce, zalamování řádku Zvýraznění textu Obrázky Odkazy Bloky, označené části řádku Komentáře

Obsah přednášky Vlastnosti textu Vlastnosti pozadí color, font-family, font-size, text-align, text- indent font-weight, font-style, font-variant, letter-spacing text-align Vlastnosti pozadí background-color, background-image, background-repeat, background-attachement, background-position

Nadpisy <h1></h1> ... <h6></h6> párové tagy, zobrazují se tučně H1 – 2 x větší než okolní text H2 – 1,5 x H3 – 1,17 x H4 – stejně jako okolní text H5 – 0,83 x H6 – 0,67 x hodnoty se můžou v jednotlivých prohlížečích lišit př.: priklad-nadpisy.html

Odstavce, zalamování řádku <p></p> párový tag Zalamování řádku <br /> - XHTML, <br> - HTML nepárový tag, bez obsahu př.: priklad-odstavce.html

Vlastnost color určuje barvu popředí textového obsahu prvku hodnoty "barva", inherit výchozí hodnota závisí na klientovi, resp. uživ. nastavení význam hodnot barva – určuje barvu př. - priklad-color.html

CSS – definice barev buď klíčovým slovem nebo tzv. číselnou RGB notací klíčovým slovem je definováno 16 základních barev a názvy určitých objektů operačního systému 16 barev: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow číselné vyjádření hexadecimálně musí začínat #; př: #ffddaa (= #fda); #1a2b3c dekadicky rgb(255,0,0) rgb(100%, 50%, 25%)

Definice barev v CSS3 - RGBA RGB + úroveň neprůhlednosti úroveň neprůhlednosti: 0 – 1 0 = 0% - plně průhledná 1 = 100% - neprůhledná jenom pomocí zápisu v desítkové soustavě: rgba(r,g,b,a) podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

Definice barev v CSS3 – HSL, HSLA nový způsob zápisu barvy H – hue – odstín hodnoty: 0 – 359 (0 – červená, 60 – žlutá, 120 – zelená, 180 – azurová, 240 modrá, 300 - fialová) S – saturation – sytost hodnoty: v procentech, 100% - plná sytost, 0% - žádná sytost L – lightness – světelnost hodnoty: v procentech, 100% - bílá, 50% - aktuální odstín, 0% - černá HSLA = HSL + neprůhlednost – stejné jako u RGBA podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

Neprůhlednost barvy opacity hodnoty – stejné jako RGBA – 0 – 1 podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+ opacity je dědičná vlastnost

Vlastnost font-family určuje rodinu písma, nebo typové písmo, kterým bude vykreslen text prvku hodnoty <název písma> <typ písma> inherit výchozí hodnota závisí na klientovi, resp. uživatelském rozhraní př. font-family.html

Vlastnost font-size určuje velikost písma hodnoty výchozí hodnota xx-small, x-small, small, medium large, x-large, xx-large larger, smaller "velikost", "procenta", inherit výchozí hodnota medium význam hodnot xx-small – nejmenší písmo – absolutní velikost podle tabulky velikosti písem sestavené a udržované klientem xx-large – největší písmo smaller – menší písmo – relativní určení velikosti na základě tabulky velikostí klienta a velikosti písma rodičovského prvku larger – větší písmo "velikost" – hodnota určuje absolutní velikost písma nezávisle na tabulce "procenta" - hodnota určuje absolutní velikost písma relativní vzhledem k velikosti písma rodičovského prvku

CSS – definice číselných hodnot zapisují se vždy v desítkové soustavě !! při použití desetinných čísel se místo desetinné čárky (,) používá tečka (.) !! velikost relativní jednotky em – velikost příslušného písma ex – střední výška příslušného písma px – pixely (obrazové body) absolutní jednotky pt – typografické body – používá se zejména ve stylech určených pro tiskárny !! mezi číslem a jednotkou nesmí být mezera !!

Vlastnost text-align určuje horizontální zarovnávání řádkového obsahu blokových prvků hodnoty left, right, center, justify, inherit výchozí hodnota závisí na klientovi, resp. uživ. nastavení a směru psaní význam hodnot left – obsah se zarovná vlevo right – obsah se zarovná vpravo center – obsah se horizontálně vystředí justify – obsah se zarovná na obě strany (tzv. do bloku) př. - priklad-text-align.html

Vlastnost text-indent určuje odsazení prvního řádku textu v bloku hodnoty "velikost", "procenta", inherit výchozí hodnota význam hodnot velikost – odsazení je pevné velikosti procenta – velikost odsazení je udána v procentech z šířky obsahujícího bloku př. - priklad-text-indent.html

Zvýraznění textu <strong> <em> <b> <i> párový tag důležitý text <em> mírný důraz <b> část textu, na kterou chceme upoutat pozornost, ale bez důrazu <i> část textu vyjadřující názor, postoj, .. <strong> a <em> - syntezátor hlasu mění parametry syntézy (hlasitost, výška, rychlost) př.: priklad-zvyrazneni_textu.html

Vlastnost font-weight určuje sílu písma hodnoty normal, bold, bolder, lighter, inherit 100, 200, 300, 400, 500, 600, 700, 800, 900 výchozí hodnota normal význam hodnot normal – nastaví normální sílu písma; odpovídá 400 bold – nastaví tučné písmo; odpovídá 700 bolder – nastaví písmo o stupeň tučnější než je zděděná; nesmí překročit hodnotu 900 lighter – nastaví písmo o stupeň méně tučné než je zděděná; nesmí překročit hodnotu 100 100 až 900 – nastaví absolutní hodnotu od nejtenčí po nejsilnější př.: font-weight.html

Vlastnost font-style nastavuje řez (styl) písma hodnoty normal, italic, oblique, inherit výchozí hodnota normal význam hodnot italic – nastaví řez italica (kursiva); pokud není k dispozici, vykreslí se stejně jako oblique oblique – nastaví řez oblique, pokud je k dispozici; může se jednat i o automaticky generované šikmé písmo př.: font-style.html

Vlastnost font-variant umožňuje nastavit tzv. kapitálky vlastnost lze použít jen na rodiny písem, které rozlišují mínusky (malá písmena) a verzálky (velká písmena) hodnoty normal, small-caps, inherit výchozí hodnota normal význam hodnot normal – nastaví normální písmo small-caps – nastaví kapitálky př.: font-variant.html

Vlastnost letter-spacing určuje vzdálenost jednotlivých znaků textu (prostrkání) hodnoty normal, "velikost", inherit výchozí hodnota normal význam hodnot normální vzdálenost znaků odpovídající danému písmu "velikost" hodnota, která se přičte k implicitní vzdálenosti mezi znaky textu i záporné hodnoty př.: letter-spacing.html

Obrázky <img /> - XHTML, <img> - HTML nepárový tag parametry: src – adresa souboru obrázku alt – alternativní text pro případ, že se obrázek nezobrazí př: <img src="obrazek.gif" alt="Náš první vložený obrázek"/> na veškeré další úkony (velikost, umístění, ohraničení, ...) se doporučuje požívat kaskádové styly př.: priklad-obrazky.html

Obrázky - doporučení formát: gif, jpeg, png velikost souboru: čím menší, tím rychlejší načítání fotogalerie: vytvořit náhledové snímky (rozměry např. 128 x 96 px) a ty použít jako odkazy

Odkazy <a></a> párový tag parametry href – adresa umístění web. stránky name – jmenný odkaz (kotva) accesskey – klávesová zkratka target – okno, kde se odkaz otevře př.: <a href="http://www.uhk.cz">UHK</a>

Odkazy – parametr href hodnoty: př. : priklad-odkazy.html http://adresa ftp://adresa mailto:e-mailová adresa př. : priklad-odkazy.html

Odkazy – parametr name častěji bývá označován jako jmenný odkaz nebo kotva odkaz: <a href="stranka.html#kotva">Kotva</a> na stránce potom bude na místě, kam se má stránka po klepnutí na odkaz nastavit <a name="kotva">Kotva</a> př.: priklad-odkazy.html, priklad-kotva.html

Odkazy – parametr accesskey klávesová zkratka odkazu accesskey="1" přístup ALT+1, CTRL+1 ve Firefoxu se zmáčknutím kl. zkratky aktivuje odkaz v IE se na odkaz pouze zaměří, návštěvník musí ještě zmáčknout Enter v Opeře - Shift + ESC - objeví se seznam klávesových zkratek dané www stránky př.: priklad-odkazy.html

Odkazy – parametr target přesměruje odkaz do specifického okna prohlížeče hodnoty parametru: _blank – nové okno jméno okna – rozdíl oproti _blank je ten, že při použití _blank se otevře vždy nové okno, zatímco při použití „jméno okna“ se otevře jenom poprvé a další odkazy se otevírají v tom daném okně

Vlastnost text-decoration určuje ozdoby přidané k textu prvku hodnoty none, underline, overline, line-through, blink, inherit výchozí hodnota none význam hodnot underline podtržený text overline nad textem je vodorovná čára line-through přeškrtnutý text blink blikající text př.: text-decoration.html

Komentáře <!-- --> <!-- --> text, část stránky (i s kódem) nebude zobrazena př.: priklad-komentare.html

Vlastnost background-color určuje barvu pozadí prvku hodnoty "barva", transparent, inherit výchozí hodnota transparent význam hodnot barva - určuje barvu transparent – nastavuje průhledné pozadí prvku, takže je skrze něj vidět pozadí i obsah prvků ležících vespod př. - priklad-background-color.html

Vlastnost background-image určuje obrázek na pozadí; zobrazí se buď jednou nebo opakovaně v závislosti na hodnotě background-repeat hodnoty <adresa>, inherit, none výchozí hodnota none význam hodnot <adresa> - adresa obrázku; při použití relativní adresy-relativní cesta vzhledem k umístění stylového předpisu, nikoli dokumentu

Vlastnost background-repeat určuje, zda a jak se bude obrázek na pozadí opakovat hodnoty repeat, repeat-x, repeat-y, no-repeat, inherit výchozí hodnota repeat význam hodnot obrázek se opakuje horizontálně i vertikálně repeat-x horizontální opakování repeat-y vertikální opakování no-repeat obrázek se neopakuje

Vlastnost background-attachment určuje, zda je obrázek na pozadí nezávislý na posunu stránky, nebo zdali se posouvá spolu se stránkou hodnoty scroll, fixed, inherit výchozí hodnota scroll význam hodnot obrázek roluje s dokumentem, tj. mění pozici vzhledem k průhledu, nikoli vzhledem k ostatním prvkům dokumentu fixed obrázek je fixován vzhledem k průhledu

Vlastnost background-position určuje počáteční polohu obrázku na pozadí hodnoty "procenta", "velikost" top, center, bottom, left, inherit výchozí hodnota 0% 0% význam hodnot "procenta" 0% 0% - levý horní roh obrázku bude umístěn na levý horní roh hrany výplně boxu 100% 100% - pravý dolní roh obrázku bude umístěn na pravý dolní roh hrany výplně "velikost" př.: 10px 5px levý horní roh obrázku bude posunut od levého horního rohu boxu o zadané hodnoty

Vlastnost background-position význam hodnot top left = left top totéž jako 0% 0% top, top center = center top 50% 0% left, left center =center left 0% 50% center 50% 50% right, right center = center right 100% 50% bottom, bottom center = center bottom 50% 100% ... př.: background-fixed.html, background-scroll.html

Vícenásobná pozadí můžeme definovat více obrázků (barev) na pozadí jednotlivé obrázky (barvy) oddělujeme čárkou př.: background-image: url(obrazek1.png), url(obrazek2.png) obrazek1.png bude umístěn nad obrazek2.png podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

Vícenásobná pozadí upravena i background-position můžeme definovat pozice pro každý obrázek pozici každého obrázku oddělujeme čárkou pokud nedefinujeme – obrázky se zobrazují z levého horního rohu

Background-size měníme velikost obrázku hodnoty: cover – obrázek vyplní celou plochu contain – obrázek se zobrazí celý rozměry – vertikální horizontální pří více obrázcích: jednotlivé definice oddělujeme čárkou podpora: Firefox 4+, Safari 5+, Chrome 10+, IE 9+, Opera 11+

lineární gradienty linear-gradient definuje se směr gradientu, barvy obsažené v gradientu směr: úhel, strana nebo roh odkud se má začínat barvy: kód barvy + procento nebo délka, jak daleko podél gradientu bude barva umístěna podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

lineární gradienty – příklady linear-gradient(270deg, #abc 0%, #fff 100%) odshora dolů 270deg = top top – výchozí hodnota pro směr 0% - výchozí hodnota pro délku začínající barvy 100% - výchozí hodnota pro koncovou barvu strany, rohy: top, right, bottom, left úhly: 0deg – doprava, 90deg – nahoru, 180deg – doleva, 270deg - dolů linear-gradient(45deg, #00f 25%, #f00 25%, #ff0 75%, #080 75%) ostré hrany mezi barvami

radiální gradienty kruhové nebo elipsovité radial-gradient umístění středu, tvar velikost, počáteční, koncová barva podobně jako u lineárních gradientů můžeme definovat dosah barev podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+

radiální gradienty umístění středu tvar velikost výchozí hodnota: center př.: 50px 25px, … tvar výchozí hodnota: ellipse circle velikost výchozí hodnota: cover – tvar gradientu dosahuje až ke straně boxu, která je nejdále od středu contain – tvar gradientu dosahuje od středu k nejbližšímu rohu boxu closet-side – podobně jako cover, ale dosahuje k nejbližší hraně středu

Opakování gradientů pro případ, že chceme gradienty opakovat repeating-linear-gradient repeating-radial-gradient podpora: Firefox 16+, Safari 5.1+, Chrome 26+, IE 10+, Opera 12.1+