Webové prezentace II Tagy patřící do hlavičky (head) ntitle n nlink n nmeta tag title nTitulek stránky. Párový tag. Mezi značkami a je text, který bude chápán jako titulek. Titulek má několik málo známých funkcí, například: nzobrazuje se v záhlaví okna a na hlavním panelu jako nadpis aplikace nzobrazuje se jako nadpis ve vyhledávačích nje prioritní při indexování stránky vyhledávacími roboty nObsahem elementu může být pouze obyčejný text bez tagů. tag link n n nSpojitost s jiným souborem, neviditelný vztah. Nejčastěji se užívá pro propojení s externím CSS stylem. Nepárový tag, vyskytuje se pouze v hlavičce. n n atributy tagu link nrel vztah k linkovanému souboru stylesheet | teoreticky i další nhref cesta k linkovanému souboru URL ntype typ souboru specifikace (např. "text/css") n nPř.: n tag meta n Informace o dokumentu. Nepárový tag vyskytující se v hlavičce. Slouží třeba k informaci o klíčových slovech nebo použitém kódování. Běžná internetová stránka má v hlavičce kolem čtyř různých tagů . V praxi je čtou a používají pouze programy (vyhledávače, parsery a editory). atribut name nkeywords n ndescriptions n nauthor n Příklady atributu name n n n n n přímo do www stránky n ...tzv stylopis n

první odstavec na stránce bude zobrazen modře (Př. stylIV) ...tzv přímý styl externí soubor n stránka se styly n n Selektor a Deklarace n np {color:white; background-color:black } n n

n nVše se musí zapisovat jako v příkladu nejdříve selektor a pak deklarace, deklarace musí být uzavřena do znaku { a } každá vlastnost od hodnoty se odděluje dvojtečkou : pokud zapisujete více vlastností musí se oddělit středníkem ; Více selektorů n n h1, h2, h3, h4 {color:green; background-color:gold } (Př. styl_VI) n nPokud chcete pro více selektorů napsat stejnou deklaraci např. u nadpisů napíšete selektory za sebou a oddělíte je čárkami. Následující příklad zajistí že nadpisy h1-h4 se budou zobrazovat zeleně se zlatým pozadím. priklad_uvod nPř. priklad_stylopis n nPř. priklad_externi CSS font notevřít z příručky nPř. vsechny_hodnoty (vsechny_hodnoty) nPř. italic bold 15px Arial (vybrane_hodnoty) nPř. přes font (vybrane_hodnoty_font) tagy Span a Div nNěkdy je ale potřeba zformátovat kus textu, který není vymezen žádným konkrétním tagem. Proto se tam vloží nový tag. Zahrnuje-li formátovaná oblast více odstavců, použije se párový tag

, v rámci jednoho odstavce se používá , protože
by to roztrhal do více odstavců. Rozdíl mezi
a nDiv je element blokový nspan je element řádkový. n nPř. div n nPř. span Komentář nKomentáře nAby byl styl více čitelný a jasný můžete si do něj přidávat komentáře které prohlížeč ignoruje, komentář se vkládá mezi znaky /* a */ a může být i přes několik řádků. nJe dobré se v komentářích vyvarovat psaní písmen ě š č ř ž, protože některé prohlížeče s tím mají problémy. Třídy a Identifikátory nU každého elementu v html možné přiřadit atributy class a id pomocí kterých můžete na daný element navázat styl, jako hodnoty se uvádí jakékoliv jméno nebo číslo. nužívá se pokud chcete např. jeden element formátovat více styly. n Příklad třída nPříkladem vlastního stylu může být podtitul. (Nepatří do nadpisu a přece by měl být formátován odlišně než normální text.) Dá se formátovat přímo, ale aby byl ve všech dokumentech stejný, je dobré nadefinovat jej jako styl. HTML ale nemá pro podtitul žádný tag , a tak si musím pomoci jinak. Vytvořím třídu s názvem podtitul, ve stylopisu mu nadefinuji vlastnosti (třeba tučnost, zarovnání na střed) a u daného textu jenom řeknu, že patří do třídy podtitul. Ukázka n n

Text podtitulu

Druhý případ np{color : Black;} p.cervena{color : Red;} n nPředchozí stylopis zajistí že každý odstavec bude zobrazen černým písmen a odstavce s třídou cervena (p class="cervena") se zobrazí červenou barvou. Vyzkoušet Př. nrozdíl mezi p.cervena a .cervena Identifikátor nPro jednoznačný popis nějakého elementu 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. Příklad identifikátor n#podtitul { text-align: center; font-weight: bold; text-decoration: overline} na v těle by se odstavci přiřadila identifikace atributem id: n

Text podtitulu

nIdentifikátor id se z hlediska CSS chová stejně jako třída class. Příklad ntrida n nidentifikátor