Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se.

Transkript

1 Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se.  Odkaz (hyperlink) Základní kámen www, struktura hypertextu stojí na URL, pomáhají propojovat samotné www a její části nejen v rámci internetu. Pomocí řetězce znaků tvořící URL jednoznačně identifikujeme místa (zdroje), na které je absolutně odkazováno. Místo (text, obrázek, ) v XHTML dokumentu, které přesměruje uživatele (kliknutím, najetím myši) na jiné místo v dokumentu nebo na jinou stránku. Rozlišujeme odkazy absolutní a relativní Schéma URL odkazu: <protokol>://<user>:<password>@<host>:<port>/<path> Absolutní odkaz: Jasnost a nezaměnitelnost adresy (jednoznačná identifikace). Uvádí se plná URL adresa. Nezkracuje (x)html kód, tj. větší velikost www stránky. Při přemístění odkazovaného objektu dojde k znefunkčnění odkazu. Možnost uvádění místo doménového jména také TCP/IP adresu. Používá se v globálním měřítku. <a href=" Univerzita</a> Relativní odkaz: Nejednoznačná identifikace. Uvádí se zkrácená URL adresa. Používá se lokálně na hostingu mezi www stránkami. Umožňuje lépe práci s přemístěním www stránek na jiný server (není použito plné URL), tj. nezávislost na umístění webu. <a href="stranka.htm">text odkazu</a> <a href="./prijimacky/">přijímací řízení Ostravská Univerzita</a> Pro vytvoření odkazu se používá párový tag <a> </a> (<a> anchor, tzv. kotva odkazovaného dokumentu v tomto dokumentu) Parametry tagu <a> </a> href specifikace adresy zdroje, na který odkazujeme (absolutní nebo relativní cestou) title titulek odkazu (zobrazující se po najetí myši na odkaz)

2 id pojmenování části dokumentu v kombinaci s parametrem target způsob a místo otevření odkazovaného souboru užívá hodnoty: _blank nové okno _top nejvyšší okno hierarchie rámů (pro Frame, rám) _parent nadřazený rám (pro Frame, rám) _self tentýž rám (pro Frame, rám) Odkazy v rámci dokumentu: <a name="info"> Informace </a> tzv. kotva odkazu <a href="stranka.html#info"> Text odkazu </a> Odkazy v rámci dokumentu (jiný způsob): <a href="#cast1"> 1. odstavec </a> <a href="#cast2"> 2. odstavec </a> <p> </p> <a id="cast1"> 1. odstavec </a> <b> Nějaký dlouhý text psaný tučně. </b> <p> </p> <a id="cast2"> 2. odstavec </a> <i> Nějaký dlouhý text psaný kurzívou. </i> Pro změny barvy odkazů navštívených ( nakliknutých ) nebo nenavštívených se používají v tagu <body> </body>. Parametry link barva nenavštíveného odkazu, vlink (visited link) barva již navštíveného odkazu, alink (active link) barva aktuálního odkazu. <body vlink="green" alink="red" link ="blue" >... </body> Praktický úkol Vytvořte odkaz na server VŠB TU Ostrava. Vytvořte odkaz na zpravodajský server Odkaz se musí otevřít v novém okně prohlížeče. Vytvořte na odkaz na libovolný soubor s příponou DOC nebo PDF. Vytvořte odkazy na nějaké místo v jiném dokumentu (např. na dokumentech vytvořených jako cvičení 2 a 3). Změňte implicitní barvy odkazů pro navštívený, nenavštívený a aktuální odkaz. 2

3 Odkazy Obrázky Při použití obrázku je nutné zvážit jeho datovou velikost (v KB) pro dobu načítání stránky. Obrázky při tvorbě stránek optimalizujeme (volíme vhodný rozměr obrázku, zvažujeme jak kvalitní obrázek je v dané situaci nutný, tj. jak bude veliký, kvalitní apod.). Nejvhodnější a doporučované jsou: JPG, GIF, PNG. Do www stránky se vkládá pomocí nepárové značky <img /> Dle schématu elementu: <img src="/img/obrazek.jpg" alt="popisek obrázku" width="117" height="18" /> kde parametr: src představuje cestu k obrázku (tj. jak u práce s odkazy) alt popisek obrázku (stručný, výstižný) height výšku obrázku v bodech (pixelech) width šířku obrázku v bodech (pixelech) <img src="logo.jpg" alt="logo OSU" height="100" width="100" /> Další parametry pro tag <img />: align pozice obrázku (hodnoty: left, right, top, middle, baseline) hspace hodnota udávající obtékání obrázku v bodech (pixelech) horizontálně vspace hodnota udávající obtékání obrázku v bodech (pixelech) vertikálně border hodnota udávající šířku rámečku kolem obrázku v bodech (pixelech) <img src= "./vlajka-cz.gif" alt="vlajka ČR" height="100" width="100" align="left" hspace="20" vspace="30" /> Místo textu v odkazu se dá použít i obrázek (tzv. klikací obrázek, po kliknutí na obrázek se zobrazí příslušná www stránka). <a href=" title="stránky Ostravské Univerzity"> <img src="logo.jpg" alt="logo OSU" height="100" width="100" /> </a> Vliv rozměrů na JPEG Velikost grafiky Největším problémem je velikost grafiky. Obrázky by měly být co nejmenší, ale s ohledem na vzhled celé stránky. Pokud jsou na stránce pouze dva obrázky, mohou mít větší velikost. Se zvětšujícím se počtem obrázků na stránce roste nutnost použít větší kompresi na všechny obrázky. 3

4 Orientační velikost obrazových dat Forma obrazu Optimum Maximálně přípustné Pozadí stránky 2 kb 10 kb Tlačítko 2 kb 5 kb Reklamní banner 8 kb 20 kb Fotografie 15 kb 40 kb Zmenšenina fotky 5 kb 10 kb Obrázkový nadpis 3 kb 8 kb Dále je při umístění grafiky na internetu nutné řešit barevnou kompozici, počet barev, rozlišení, grafický formát nebo kompresi. Zdroj: Gimp Grafika pro web Čára Vodorovná čára (angl. horizontal rule). Bez atributů se zobrazí stínovaně šedá přes celou šířku stránky. Atributy ale mohou její vzhled ovlivnit. <hr /> Atributy: width="x" šířka horizontální linky, šíře může být vymezena absolutně v pixelech, nebo relativně v % stránky; šíře v druhém případě je závislá na rozlišení monitoru klientského počítače, size="x" šířka ve smyslu tloušťky délka v pixelech, align="x" (left, center, right) horizontální poloha linky ve vztahu k www stránce, color barva (pouze v IE) barva. <hr /> <hr style="color:#0033ff" /> <hr style="align:center" /> <hr style="width:50%" /> <hr style="color:#0033ff; align:center; width:50%" /> Další možnosti jako jsou barvy, stínování apod. pomocí CSS. Tabulka Jeden z nejdůležitějších prvků (x)html dokumentů. Slouží výhradně k přehledné prezentaci dat (tzv. dvourozměrná prezentace). Lze je použít pro prostorové rozvržení prvků na stránce, tj. v okně prohlížeče. Formátováním částí tabulek lze významně ovlivnit vizuální stránku dokumentu, vytvořit layout stránky. Tabulky nejsou primárně určeny pro rozmístění prvků na stránce, nýbrž CSS. 4

5 Příklad jednoduchá tabulka <table> <th>záhlaví prvního sloupce</th> <th> Záhlaví druhého sloupce </th> <td>první buňka prvního řádku</td> <td>druhá buňka prvního řádku</td> <td>první buňka druhého řádku</td> <td>druhá buňka druhého řádku</td> </table> Syntaxe význam jednotlivých tagů <table> </table> <td> </td> <th> </th> <caption> </caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody> tabulka (kostra tabulky) řádek tabulky buňka záhlaví sloupce (buňky); obsah této buňky (hlavičky) se zobrazuje v různém formátu v závislosti na prohlížeči titulek tabulky, formát popisku je implicitně závislý na prohlížeči záhlaví tabulky zápatí tabulky oddíl tabulky Záhlaví tabulky Ohraničuje skupinu řádků tabulky, považovaných za její hlavičku. Slouží pro opakování hlavičky při vícestránkových výstupech. V tabulce může být použito jen jednou. Použití záhlaví tabulky není povinné, ale může být užitečné. Zápatí tabulky Obdoba záhlaví tabulky. Oddíl tabulky Vytváří samostatný oddíl tabulky. Oddíly se nemohou prolínat. Oddíl může obsahovat pouze řádky, tvořené elementem. V prohlížeči se vizuálně oddělí jednotlivé oddíly. Již skoro nepoužívané tagy skupina sloupců <colgroup> </colgroup>, sloupec <col> </col>, definuje vzhled sloupce ve skupině sloupců. Tyto elementy jsou podporovány pouze v prohlížečích IE 6 a NN 6 Základní atributy tabulky (element <table>) 5

6 align horizontální zarovnání vůči nadřazenému elementu, obtékání tabulky ostatním textem, align= right tabulka bude vpravo a bude obtékána textem zleva, border nastavení šířky vnějšího rámečku kolem tabulky cellspacing prostor mezi buňkami tabulky, vnější okraj buněk (vně rámečku), cellpadding prostor mezi okrajem buňky a jejím obsahem, vnitřní okraj buněk (v pixelech), vzdálenost textu od rámečku, width šířka tabulky (lze zadat absolutně v pixelech nebo relativně v %). Příklad Zapnutí rámečku (border) a vnitřních okrajů buněk (cellpadding): <table border="1" cellpadding="6" cellspacing="0">... border atribut tagu <table>, 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 cellpadding vnitřní okraj buněk (v pixelech), vzdálenost textu od rámečku cellspacing vnější okraj buněk (vně rámečku); různá nastavení velikosti okrajů buněk vysvětluje obrázek Základní atributy buňky (element <td>, <th>) align horizontální zarovnání obsahu v rámci buňky, (left, center, right, justiny), cellspacing prostor mezi buňkami tabulky, cellpadding prostor mezi okrajem buňky a jejím obsahem, colspan slouží pro vytvoření buňky přes více sloupců, rowspan umožňuje vytvoření buňky přes více řádků, height minimální výška buňky/řádku (stačí uvést u jedné buňky v řádku, v pixelech), width minimální šířka buňky (lze zadat absolutně v pixelech nebo relativně v procentech šířky tabulky), nowrap obsah buňky se nebude zalomovat, bez hodnoty (<td nowrap>), valign vertikální zarovnání obsahu v rámci buňky, (top, middle, bottom, baseline - účaří prvních řádků je zarovnáno), bgcolor barva pozadí, bordercolor barva orámování buňky. 6

7 Buňka přes dva řádky (v druhém řádku se zapíše o jednu buňku méně): <td rowspan="2">buňka přes dva řádky</td> Buňka přes tři sloupce: <td colspan="3">buňka přes tři sloupce</td>. Příklad tabulky Text popisku tabulky Hodnota Nárůst za rok Akcie 1 3,3 tis. +1,5 % Akcie 2 10,2 tis. +10,7 % Akcie 3 4 tis. -0,5 % Kód tabulky: <table border="1" cellspacing="0" cellpadding="5"> <caption>text popisku tabulky</caption> <td> </td> <th>hodnota</th> <th>nárůst za rok</th> <td>akcie 1</td> <td>3,3 tis.</td> <td>+1,5 %</td> <td>akcie 2</td> <td>10,2 tis.</td> <td>+10,7 %</td> <td>akcie 3</td> <td>4 tis.</td> <td>-0,5 %</td> </table> Šířky sloupců Problematika šířky buněk a tabulek je překvapivě velmi složitá. Naštěstí existuje několik pravidel, podle kterých se stanovují šířky buněk a tabulek. 1. Pravidlo šířky sloupce: sloupec je tak široký, jak široká je nejširší buňka toho sloupce. 2. Pravidlo minimální šířky podle obsahu: buňka je minimálně tak široká, jak je široké nejdelší slovo nebo obrázek v buňce. 7

8 3. Pravidlo nastavené šířky: buňkám a tabulce se dají nadeklarovat šířky, které ale nemusejí v konečném efektu platit. 4. Konfliktní pravidla: ve většině případů prohlížeče před vykreslením tabulky vyhodnocují, který sloupce bude jak široký, podle složitých pravidel. Přirozené šířky Tabulku můžete prostě nechat, ať si stanoví šířky sloupců sama podle obsahu. Prostě nebudete zadávat žádné šířky. U velmi dlouhých tabulek se to nehodí, ale většinou je přirozené (ne)zadávání šířek výhodou. Zadávání šířek Buňkám a tabulce se dá předepsat šířka a výška explicitně. Jde to několika způsoby: Zadávání šířky v pixelech Atribut width se dá použít u buňky (tag <td>) a u tabulky (tag <table>). Např: <td width="100"> <table width="400"> buňka tabulky o šířce 100 obrazovkových bodů tabulka široká 400 pixelů Zadávání šířky v procentech Např: <td width="20%"> buňka, která by měla zabrat 20 % šířky tabulky (možný konflikt) Poznámka: 100 % je v tomto případě šířka tabulky. <table width="90%"> tak tabulka zabere 90 % šířky okna (nebo prostě prostoru, do kterého by se mohla vykreslit), šířka tabulky je závislá na prohlížeči a rozlišení Výška Podobným způsobem, atributem height, se dá nastavit výška buňky. Vertikálního místa má stránka dost (dá se rolovat), takže nevznikají konflikty. Pokud se tabulce zadá výška v procentech, tak také počítá procenta z výšky okna. Konflikt šířek Úkol č. 2 (Moodle) Vytvořte XHTML dokument na libovolné téma, který bude obsahovat alespoň jeden obrázek, tabulku a absolutní URL odkazy na vnější zdroj (do internetu). Kolem vytvořených prvků vložte text a nastavte parametry pro obtékání. Dokument musí být validní dle normy XHTML Transitional. 8