Tvorba www stránek

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 • 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 • Odstavce • <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 • 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 • 0 • 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ě • <b></b>, <strong></strong> • řádkový, párový tag • kurzíva • <i></i>, <em></em> • řádkový, párový tag • <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 • normal • 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ř: <imgsrc="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ř.: <ahref="http://www.uhk.cz">UHK</a>

Odkazy – parametr href • hodnoty: • 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: • <ahref="stranka.html#kotva">Kotva</a> • na stránce potom bude na místě, kam se má stránka po klepnutí na odkaz nastavit • <aname="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 • Bloky • <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 • repeat • 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 • scroll • 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

Tvorba www stránek