Webové prezentace II Složení kurzu navazuje na webové prezentace I nvždy úvodní teoretická část (kratší) n n n nnásledována praktickou částí (delší) Navazovat na html bude: n nxhtml, css, xml nredakční systémy (k čemu slouží a jak se používají) ndalší technologie dle časových možností n správná syntaxe html ntagy (párové / nepárové): n libovolný obsah n

nadpis první úrovně

n n( tohle
tohle ) natributy n n
nPř. zkusit správná struktura html n titulek html dokumentu tělo stránky (vše co se na stránce zobrazí) nPř1. zkusit Blokové elementy v HTML nP – odstavec n

vycentrovaný odstavec

nPř.2 nBr - zalomení řádku ntext text text
text na dalším řádku nPř.3 n n naddress n
MU Brno
Veveří
Brno
n nh1-h6 n

nadpis první úrovně

nadpis druhé úrovně

nadpis třetí úrovně

nadpis čtvrté úrovně

nadpis páté úrovně
nadpis šesté úrovně
n..slouží pro strukturování textu, velmi podstatné, vyzkoušet n n nHr - vodorovná čára n n
HTML kódy na pozadí - barvy

Tato stránka bude mít zelené pozadí...

nPř.6 Obrázek na pozadí n HTML kódy na pozadí - obrázek

Tato stránka bude mít na pozadí obrázek... nVyzkoušet analogicky dle předchozího příkladu Seznam nli /položka seznamu/ nnepovinně párový n nul /odrážkový (nečíslovaný) seznam/ n nol /číslovaný seznam/ n n n n nečíslovaný seznam natribut Type n n Atribut type se používá k nastavení druhu odrážky na výběr jsou tři puntík,kolečko a čtverec Hodnoty jsou disc(puntík), circle (kolečko), square(obdélník). Type se může zapisovat v ul i li. n n n

Číselný seznam nType - atribut n U číselných seznamů se atribut type používá k nastavení druhu číslic hodnoty jsou: 1(normální číslování), A(velká písmena), a(malá písmena), I(římské číslice), i(malé římské číslice).Type se může zapisovat v ol i li. nStart - atribut n Atribut start se používá k změně počátečního čísla nebo písmena. Př. 2 n Definiční seznam nDefiniční seznamy se uzavírají do párového tagu
, před definovaný termín musíte zapsat nepárový tag
a před samotný popis termínu musíte zapsat nepárový tag
.Text popisu termínu bude odsazena z leva od okolního textu. Př. 3 n Odkazy nA - odkaz n A je párový tag obsahuje atributy bez kterých by nefungoval jako text odkazu se zobrazí to co je mezi tagy a můžete zadat text nebo i obrázek který bude sloužit jako odkaz.. Atribut Href (cesta) nTento atribut se používá k zadání URL( co je to url = adresa ) jeho hodnotou je cesta k souboru může se použít absolutní nebo relativní. jako absolutní se uvede např. http://www.seznam.cz Na začátku musí být to http:// jinak by to fungovalo jako relativní v relativní adrese se může napsat pouze jméno souboru např. stranka.html pokud je stránka v dalším pod adresáři použije se ve tvaru adresar/stranka.html protokol mailto nPro odkaz na e-mail musíte zadat jiný protokol pro odkaz se použije protokol mailto: existují další (gother, telnet, file, ftp). atribut target nAtribut target se používá k nastavení okna v kterém se bude stránka načítat se využije hlavně s rámy které dokážou okno stránky rozdělit na několik částí. Např: n_blank (nové okno) n_self (totéž okno) Př. 4 n Vložení obrázku nImg - obrázek n Obrázky se vkládají na stránku nepárovým tagem img možné grafické formáty jsou gif, jpeg a poslední dobou png. Pomocí tagu img také můžete na stránky vložit video ale musíte zaměnit atribut src za dynsrc. Atribut src nSrc - cesta k souboru n U obrázků je src nejdůležitější atribut, jako jeho hodna se uvádí cesta k souboru může se použít relativní i absolutní. n Atribut alt nAlt - popis obrázku n Atribut alt slouží jako alternativní text zobrazuje se pokud se nezobrazí obrázky nebo po najetí na obrázek ve žluté bublině, jako hodnota se používá popis obrázku. n popis obrázku Width a height - šířka a výška natribut šířky a výšky, udává se v pixelech Př. 5 n Tabulky nNa internetových stránkách se tabulky používají ve dvou případech: n1) Jestliže je potřeba udělat klasickou tabulku. n2) Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba). n Nejjednodušší tabulka n
Obsah buňky Další buňka
levá spodní pravá spodní
Co znamenají jednotlivé tagy: n n Párový tag, který začíná tabulku. n n Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek). n
n Tag buňky tabulky. Tag pro hlavičkové pole n n se dá použít namísto , ale znamená to hlavičkové pole. Obsah bývá tučný a zarovnaný na střed. Používání této značky se doporučuje kvůli automatickému zpracování textu (například mně se díky CSS stylům rovnou podbarvilo zeleně). n Atributy v tabulkách nborder n atribut tagu , který nastavuje šířku vnějšího rámečku kolem tabulky (v obrazovkových bodech); kdyby bylo border="0", nevykreslí se ani vnitřní mřížka ncellpadding n vnitřní okraj buněk (v pixelech), čili vzdálenost textu od rámečku. Taktéž atribut tagu
ncellspacing n vnější okraj buněk (vně rámečku) Příklad zobrazení border, cellpadding a cellspacing Př. 6 n n nVšechno, co je v HTML souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. její konec. Př. 7 (procvičení) n 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 nukázka (www.okennisystemy.cz 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