Mgr. Vlastislav Kučera přednáška č. 3 Tvorba www stránek Mgr. Vlastislav Kučera přednáška č. 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> blokové, 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> blokový, 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%)

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 tučně kurzíva <b></b>, <strong></strong> řádkový, párový tag kurzíva <i></i>, <em></em> <strong> a <em> - syntezátor hlasu mění parametry syntézy (hlasitost, výška, rychlost) pro větší kontrolu nad tučným písmem, resp. kurzívou se místo <b>, <i> používají kaskádové styly 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 řádkový, 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> řádkový, 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

Bloky, označené části řádku <div></div> blokový, párový tag Označené části řádku <span></span> řádkový, párový tag jejich hlavní využití je při používání CSS př.: priklad-bloky.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