HTML V PRAXI HYPERTEXT MARKUP LANGUAGE V PRAXI. Autor: Petr Kříž

Transkript

1 HTML V PRAXI HYPERTEXT MARKUP LANGUAGE V PRAXI Autor: Petr Kříž

2 1.kapitola - Úvod Když někdo řekne internetová stránka, téměř každému se vybaví prezentace firmy, osobní stránka aj. možnosti, které zaručují informovanost a tok většinou nejaktuálnějších informací. Tahle knížka se nebude zabývat popisem stran které existují, ale klade si za cíl naučit čtenáře vytvářet internetové či intranetové stránky. Největší výhodou stránek je jejich možnost propojování (hypertextovým odkazem nebo-li hyperlinkem) nebo předávání údajů. V knížce se budu zabývat pouze hyperlinkama. Vysvětlení pár základních údajů: HTML = Hypertext Markup Language - základní jazyk který slouží pro nadefinování parametrů stránky, vzájemné propojování stran a jeho velkou výhodou je definice stylů (písmo, velikost, barva ) Přestože na styly existuje jazyk CSS (kaskádové styly), jazyk HTML zvládne veškeré tyto základními požadavky. URL = Uniform Resoure Locator - tenhle složitý název znamená: adresa konkrétní stránky Pokud budeme u používat hyperlinky, bude nutné vždy zadávat jejich konkrétní adresu kam se mají odkázat. Podle mého názoru nejvíce Vás naučí praxe, takže se pusťme do praktické části. Co k tomu budeme potřebovat? Naučit se pár základních údajů (viz. další kapitola) a nějaký textový editor. Napíšu zde výčet asi nejlépe zpracovaných textových editorů a podle svého uvážení si vyberete. Ke každému editoru nakonec napíši svoji poznámku.. První typ editorů strukturní typ editorů Do strukturních editorů se zapisuje přímo HTML kód a je potřeba znát, netroufám si říct dokonale, HTML jazyk. Mají jednu obrovskou výhodu umožňují na 100% kontrolovat obsah stránky a jsou používány většinou profesionálními tvůrci pro tvorbu statických, ale zejména dynamických stránek nebo pro práci s datovými přenosy. Notepad (poznámkový blok) - zcela obyčejný textový editor s kterým dokážete divy na webu. Notepad nepodporuje zadávání tagů, tudíž je musíte vypsat. Poznámka: podle mého názoru je notepad nejlepší editor na tvorbu ne moc grafických stran, protože nepodporuje jejich kontrolu a musíte si je prohlížet ve Vašem internetovém prohlížeči. Na druhou stránku notepad umožňuje velmi kvalitní HTML kód a nebude dělat zbytečné zápisy navíc jako jiné editory. Homesite - tento textový/grafický editor umožňuje psát HTML kód jako notepad, ale má navíc několik funkcí, které pomáhají při zápisu HTML kódu. Homesite je velmi kvalitní editor s nespočetně velkou možností funkcí o kterých by se dala napsat kniha. Poznámka: homesitu jsem nějak nepropadnul. Kombinuji používání notepadu spolu s FrontPagem, ale komu by se zdál homesite lepší než notepad tak mu ho rozhodně doporučuji. 2

3 Druhý typ editorů wysiwyg editory Zřejmě nejpohodlnější editory s kterými lze pracovat. Tahle prapodivná zkratka znamená: What you see is what you get, nebo-li do češtiny přeloženo: Co uvidíš, to dostaneš. Práce s nimi je velmi jednoduchá a sám jsem si je oblíbil při práci na graficky náročných stránkách. jejich nevýhodou je, že nedokáží dokonale zpracovat HTML kód a píšou do něho přebytečné věci, proto je potřeba si po skončení práce upravit HTML kód. Microsoft FrontPage - nejrozšířenější wysiwyg editor. Umožňuje několik režimů zobrazení, konkrétně režim návrhu, HTML strukturu, náhled výsledné stránky a pokud budete pracovat s framovou verzí tak obsahuje i kód HTML stránky rámců. Poznámka: veškeré svoje poznámky jsem popsal při popisování wysisyg editorů. Netscape Composer, Macromedia Dreamweaver a další - s těmito programy se nezabývám, protože wysiwyg editorů existuje hodně velké množství a v dnešní době se už pomalu nedá vybrat pořádný editor. Za zmínku stojí ale Macromedia Dreamweaver, který je zřejmě nejdokonalejší wysiwyg editor a bývá mnoho uživateli kladně hodnocen. Druhy prohlížečů Prohlížeče umožňují prohlížení internetových stran. Microsoft Internet Explorer (IE) - jedná se o nejrozšířenější internetový prohlížeč. IE lze zařadit mezi kvalitní prohlížeče od verze 4 a výše od starších verzích se liší v detailech (ale nejvíce podporou CSS a JS). Většinou jsou všechny stránky přizpůsobeny právě pro IE. Mozilla - jedná se o šestou a sedmou verzi Netscapu, která je o něco lépe zpracovaná než IE zejména pro podporu CSS ve verzi 2, lepší zvládnutí JS a dobré zpracování XML. Jedinou nevýhodou je ladění elementů které vykresluje jinak než u IE Netscape - nejhorší prohlížeč, protože je velmi nestabilní, velmi často chybuje a stránky padají. Netscape používají hlavně uživatelé linuxu, ale Ti pomalu přecházejí na Mozillu. Úplně přesný popis editorů a prohlížečů naleznete spolu s jejich obrázky v dodatku. PrintScreeny hotových příkladů naleznete v dodatku. 3

4 2. kapitola Základy HTML V téhle kapitole se seznámíte s jednoduchou kostrou HTML stránky kterou si také vytvoříte. Jazyk HTML je velmi flexibilní přestože má svoji přesnou syntaxi. Tzn. že pokud se dopustíme chyb, stránka se zobrazí tak jak je chtěl tvůrce zobrazit. (nesmí ale chybět většina HTML kódu, ale jedná se o nějaké prkotiny ) Budete se muset naučit ale pár věcí bez kterých se neobejdete. Jsou to tagy. Tag je klíčové slovo HTML jazyka, které je uzavřeno do špičatých závorek Veškeré HTML příkazy jsou tagy a co se nalézá mimo tyto tagy je součástí stránky. HTML kód nerozlišuje velká a malá písmena (ale pozor, obsah stránky už je rozlišují) Nepárový tag - do nepárového tagu se uzavírají objekty (pozadí, obrázek, zvuk...) vkládání údajů se provádí přímo do špičatých závorek. např.: <body BgColor= # > Párový tag - párové tagy mezi sebe uzavírají text který se bude zobrazovat na stránce. Definice textu je zapsána přímo v těchto tagech. Protože se jedná o párové tagy, je potřeba je nějak začít a nějak ukončit. již název párový znamená, že se jedná o stejný tag, ale ukončení se provádí předřazením znaménka / před konečný tag...raději to vysvětlím na příkladu: <title></title> Příklad na zapsání definice (odborněji atribut) Obecně: <tag atribut01 atribut02>text na stránce co bude vidět</tag> Konkrétní příklad: <a href=" target="_top">seznam</a> Vytvořme si jednoduchou stránku. Otevřete si notepad (prozatím nám bohatě postačí a na naučení je to zřejmě nejlepší editor) a opište tam tuhle předlohu. Jakmile skončíte se psaním, uložte stránku do složky My web jako index.html a nyní se pouštím do vysvětlování. <html> <head> <title>nadpis stránky</title> </head> <body> Text na stránce </body> </html> 4

5 Gratuluji, vytvořili jste první internetovou stránku a zároveň kostru stránky. Prohlédněte si ji v prohlížeči. Tahle kostra je neměnná, takže se ji musíte naučit a musíte ji vždy uvádět pokud budete tvořit internetové stránky. Vysvětlení tagů: Tag <html></html> - je zde uvozen cely HTML kód. Tag <head></head> - uvození záhlaví stránky...uvádí se zde parametr title, resp. pokud pracujete s FrontPagem, ukáže se Vám zde i nepárový tag <meta> do kterého se ukazují parametry o vaší stránce v jakém editoru byla tvořena aj. informace. Záleží na Vás jestli si je tam ponecháte, ale ze své zkušenosti je mažu (nemají žádný vliv na funkčnost stránky) Poznámka: do záhlaví stránky zapisuji i veškeré ostatní proměnné, tzn. třeba jednodušší skripty, CSS apod. nebo pokud se jedná o složitější či rozsáhlejší projekty, tak zde externě propojuji aby se to v těle dokumentu neztratilo. Tag <title></title> - mezi tenhle párový tag se zapisuje nadpis stránky ( to nahoře v modrým pruhu, v tomhle případě konkrétně Nadpis stránky ) Tag <body></body> - je zde uvozeno tělo dokumentu, tzn. že se zde zapisuje HTML kód stránky. Mezi tento tag se zapisují následující hodnoty: a) pozadí barva se zadává převážně v <body bgcolor="#cccccc"> b) zvuk na pozadí téhle sekci je věnována později samostatná kapitola. c) ostatní věci, které se dozvíte poději (např.: obrázek na pozadí a jeho fixace) Momentálně přejdu k vysvětlení pojmenování první stránky. Budeme-li ukládat internetové stránky, musíme použít příponu *.htm nebo *.html (přičemž mezi nimi není žádný rozdíl, ale přípona *.htm je starší pojmenování) Stránku si můžeme pojmenovat jak chceme, ale první stránku která má být zobrazena se musí jmenovat index (včetně malého i ) První stránka se smí jmenovat i default ale každý server nemusí podporovat tuhle možnost. Na internetu existuje několik možností druhů přípon, ale ty už většinou slouží při práci s daty nebo proměnnými. 5

6 3. kapitola Formátování textu Pokud budeme tvořit internetové stránky, jistě se nespokojíte pouze s obyčejným druhem písma které je psáno za sebou. Pro tyhle účely nám slouží další tagy. Plno autorů by v tuhle chvíli ukázalo praktické příklady využití všech tagů, ale já dám přednost jen základním tagům a zkusíme si i složitější příklady na lepší pochopení. U formátování textu existuje i tag <font></font> který je poměrně složitější na vysvětlování proto si ho ponechám na konec. Vytvořte si stránku podle této předlohy a uložte ji jako Formatovani_textu.html <html> <head> <title>formátování textu</title> </head> <body> Tento text je <b>tučný</b><br> Tento text je <i>kurzívou</i><br> Tento text je <u>podtržený</u><br> Tento text je jako _{dolní index}<br> Tento text je jako ^{horní index}<br> Tento text je <s>přeškrknutý</s> </body> </html> Otevřete si stránku v prohlížeči a podívejte se na výsledek. Myslím že nemá cenu popisovat tyhle tagy protože jsou velmi lehce použity. jediný tag který vysvětlím je tag <br> který nám definuje, že text má začínat na novém řádku (z angličtiny znamená tahle zkratka break line). Ukažme si ale složitější případ a poté si ho vysvětleme. Vytvořte si stránku podle této předlohy a uložte ji jako Formatovani_slozitejsiho_textu.html <html> <head> <title>formátování složitějšího textu</title> </head> <body> <!--Nadpis zacatek--> <u><b>formátování textu</b></u><br><hr><br> <!--Nadpis konec--> Pokud budeme <i>tvořit internetové stránky</i>, jistě se <i>nespokojíte pouze s obyčejným druhem písma</i> které je psáno za sebou. <i>pro tyhle účely nám slouží další <b>tagy</b>. Plno autorů by v tuhle chvíli ukázalo praktické příklady využití <b>všech tagů</b></i>, ale já dám přednost jen základním tagům a zkusíme si i složitější příklady na lepší pochopení. </body> </html> 6

7 Myslím že v tuhle chvíli nastalo hodně věcí na vysvětlování. Zapamatujte si že používání tagů které formátují text se smí využívat kdekoliv v textu. Je to velmi praktické, ale pokud budete používat hodně kombinování tagů přes sebe, nezapomeňte, že se jedná o párové tagy a je potřeba je uzavřít a nenechat otevřené. Přibyl nám zde nový tag <hr> který znamená vložení vodorovné čáry. Dalším novým tagem je <!--poznámka--> Jak už text uvnitř stránky napovídá, jedná se o tag do kterého se vkládají poznámky které nejsou na stránce vidět, ale v HTML kódu se zobrazují. Jedná se o velmi praktický a přehledný způsob jak se vyznat ve složitých HTML kódech, ale nesmí se to s nimi přehánět. A teďka se dostávám ke zmíněnému tagu <font></font> a nějaké další rozšířenější tagy bez kterých se neobejdete. Nakonec si uděláme příklad kde využijeme veškeré tyhle poznatky. Důležitý párový tag <p></p> - tento párový tag označuje začátek/konec odstavce. Do tohohle tagu se zapisují definice společné pro celý odstavec a nejvíce se uplatní při zarovnávání textu. Při psaní zápisů je mezera mezi řádky velmi velká, proto se využívá tento parametr výšky pro začátek/konec výšky řádku vzhledem k následujícím řádkům. Využívá se hlavně při psaní textů. <p style="margin-top: 0; margin-bottom: 0">Text</p> Velikost písma - jazyk HTML nedefinuje velikost písma podle boldů, ale podle velikosti size (např. size=3) nebo přesně nadefinovanou velikostí udávanou v pixelech (např. size=12px). Nadpisy - nadpis se tvoří párovým tagem <hx></hx>, kde x nahrazuje velikost nadpisu, které se udává v rozpětí 1 až 6 (největší až nejmenší). Příklad.: <h2>nadpis</h2> Barva písma - obdobný případ nastává i v barvě písma. Je možné ho zapisovat přímo (např. color=red) nebo pomocí složek RGB oddělených čárkou v hexadecimálním tvaru (např. color=53,4b,d6) nebo bez čárek uvozením znakem # (např. color=#534bd6). Zarovnání textu - se provádí pomocí příkazu align Rozeznáváme tyhle druhy zarovnání: left = zarovnat vlevo right = zarovnat vpravo center = doprostřed justify = na oba okraje. Zarovnání textu se většinou zapisuje do odstavců (např.: <p align=center>text</p>) Vodorovná čára <hr> - s vodorovnou čárou jsem se před chvíli setkali, ale pro vodorovnou čáru platí více vlastností. Vodorovná čára se sama zobrazuje jako prostorová (pokud nám to dovoluje prohlížeč), ale dá se této vlastnosti zabránit. 7

8 Jsou to tyhle vlastnosti: size = tloušťka čáry width = délka čáry (nejčastěji se udává v procentech, ale lze ji udat i v pixelech) noshade = prohlížeč zobrazí čáru úplně obyčejným způsobem (neprostorově) Příklad zapsání.: <hr size=3 width=75% align=center noshade> Druh písma vlastnost face - druh písma se zapisuje ve tvaru <font face= Arial > místo Arialu lze použít i jiné druhy písma, ale doporučuji používat základní druhy, protože ne každý počítač obsahuje právě Vaše zvolené písmo. Párový tag <nobr></nobr> - tímhle tagem se označuje část textu, jenž se nesmí zalamovat jinde než na místech označených značkou <br>. Prohlížeč defaultně zalamuje řádky tak, aby se vešly do okna. Použití tohoto tagu je vhodné pro zachování rozmístění textu třeba při výpisu údajů z databáze. Párový tag <small></small> - tento tag zmenší velikost písma o jeden stupeň Párový tag <big></big> - tento tag zvětší velikost písma o jeden stupeň 8

9 Vytvořte si stránku podle této předlohy a uložte ji jako Vyuziti_formatovani.html <html> <head> <title>využití formátování</title> </head> <body bgcolor="#cccccc"> <!--Nadpis--> <p><h2 align=center><font color=red>jak se dělají divy s textem</h2></font></p> <hr size=2 width=75% align=center> <hr size=2 width=50% align=center><br> <font face= Arial >Tak tady si napíšeme <big>ukázkový text</big> s kterým se pokusíme něco udělat:</font> <br><br> <!-- Text na formatovani--> <u>jak to vypada kdyz zakazu prvnim radku se zalamovat?</u><br> <nobr>myslím že v tuhle chvíli nastalo hodně věcí na vysvětlování. Zapamatujte si že používání tagů které formátují text se smí využívat kdekoliv v textu. Je to velmi praktické, ale pokud budete používat hodně kombinování tagů přes sebe, nezapomeňte, že se jedná o párové tagy a je potřeba je uzavřít a nenechat otevřené.</nobr> <!--text by mnel byt na jednom radku a teprve tedka po tagu "br" se zalomit--> <br>přibyl nám zde nový tag který znamená vložení vodorovné čáry. Dalším novým tagem je <!--poznámka--> Jak už text uvnitř stránky napovídá, jedná se o tag do kterého se vkládají poznámky které nejsou na stránce vidět, ale v HTML kódu se zobrazují. <font face="times New Roman" color=#534bd6>jedná se o velmi praktický a přehledný způsob jak se vyznat ve složitých HTML kódech,</font> ale nesmí se to s nimi přehánět. <!--Konec textu na formatovani--> </body> </html> Tímhle příkladem bych rád uzavřel kapitolu o formátování textu, ale je tu jeden zádrhel kterého jste si na první pohled zřejmě nevšimli. Jak je napsaná věta: Dalším novým tagem je a dále začíná nová věta. Co z toho plyne? Že poznámku lze zařadit do jakéhokoliv místa HTML dokumentu a nebude vidět. A teďka směle do dalších kapitol, kde si ukážeme práci s hypertextovým textem, práci s odstavci aj. zajímavosti. 9

10 4. kapitola Seznamy Seznamy mají v praktickém využití poměrně málo místa, protože jsou hojně zastupovány tabulkami. Jedinou výjimkou jsou rozbalovací seznamy které se velmi často upotřebovávají (těmito seznamy se nebudu zabývat protože je potřeba znát alespoň základy CSS a JS) ale princip zůstává stejný jako u klasických seznamů. Protože jsou seznamy čistě psané (bez barevných podkladů atd.) takže můžeme sáhnout po prostředcích pro formátování textu které seznamy rozhodně oživí. Až na seznam definic mají všechny seznamy jedno společné...nepárový tag <li> Tento tag vloží do seznamu novou položku. Příklad použití: <li>položka Seznamy dělíme do 4 kategorií Číslované seznamy - pro číslované seznamy používáme tagy <ol></ol> Tuto definici můžeme využít v seznamu kolikrát chceme. Nečíslované seznamy - pro nečíslované seznamy používáme <ul></ul> Tuto definici můžeme využít v seznamu kolikrát chceme. Seznamy s vlastním obrázek - tyhle seznamy jsou sice velmi působivé na oko. Vytvoří se přiřazením položky imagesrc="umisteni obrazku" k párovému tagu <ul> Příklad použití: Obecně: <ul imagesrc="umístění obrázku + přípona"></ul> Konkrétní případ: <ul imagesrc="../odrazka.jpg"></ul> Seznamy definic - seznam definic se používá především pro rejstříky, slovníky apod. Seznam se označuje párovou značkou <dl></dl> (z ang. definition list) Tento seznam se úplně odlišuje od předcházejících seznamů. Každá položka v seznamu se skládá ze dvou částí. Nejprve je potřeba uvést definovaný termín a posléze jeho definici. Definovaný termín se uvádí nepárovou značkou <dt>, jeho definice pak taktéž nepárovou značkou <dd>. Rozšířené možnosti seznamu Příkaz align - v seznamech je minimálně využíván, ale platí pro něho stejné zásady jako při formátování textu. Příklad zápisu: <ul align=left> 10

11 Příkaz type - můžeme rozdělit podle druhu použitých seznamů. Používáme-li seznam typu <ul> můžeme použít následující příkazy: disk (plné kolečko) circle (prázdné kolečko) square (čtvereček). Používáme-li seznam <ol> můžeme použít následující příkazy: A/a (označení položek velkými/malými písmeny) I/i (označení velkými/malými římskými číslicemi) 1 pro klasické číslice. Zápis pro <ul>je následující: <ul type=disk> Zápis pro <ol> je následující: <ol type=a> Se seznamy se dá velmi dlouho hrát a je to spíše monotónní práce, proto si ukažme jen jednoduchý příklad který si pak můžete dále rozvíjet dle představivosti. Vytvořte si stránku podle této předlohy a uložte ji jako Seznamy.html <html> <head> <title>seznamy</title> </head> <body> <ul> <li>letadlo <ol type=a> <li> Rada 3 <ol type=i> <li> sedadla </ol> </ol> <ol> <li>15 <li>16 </ol> </ul> </body> </html> 11

12 5. kapitola Tabulky Budete-li vytvářet internetové stránky, jistě se setkáte s tabulkami. Jedná se o nejrozšířenější a nejefektivnější způsob jak docílit požadovaných vlastností stránky. Kapitola Tabulky je poměrně náročná a hodně obsáhlá na vysvětlování, takže se zde uplatní lépe příklady. Veškeré příklady by byly lépe znatelné kdyby se s nimi pracovalo ve wysiwyg editorech, (tady se tabulky nejvíce uplatňují) ale postačí nám úplně bez problému notepad. Jak bychom mohli definovat tabulku. Tabulka je souhrn několika druhů čar které jsou vzájemně propojeny. Pokud si nebudeme pohrávat se vzdálenosti čar od sebe (ale jimi si pohrávat budeme, ale až později) tak se Vám tabulka zobrazí vždy správně. Než začnu vysvětlovat tabulku na příkladu, napišme si základní tagy z kterých se tabulka skládá. Tyhle tagy se dají zapsat jako nepárové, ale většina editorů si je jako párové sama definuje. U tabulky existuje pojem buňka tzn. obsah jednoho čtverečku. Pozn.: ze své praxe doporučuji je jako párové tagy zapisovat Tabulka se skládá z těchto tagů Tag <table></table> - tento tag nám uvozuje začátek/konec tabulky. Do tohohle tagu se zapisují definice společné pro celou tabulku (tloušťka čar, zarovnání tabulky aj.) Tag - tento tag vytváří nový řádek. Do tohohle tagu lze zapsat definice pro řádek. Tag <td></td> - tento tag definuje nový sloupec. Do tohohle tagu lze zapsat definice pro sloupec. Tag <th></th> - tento tag definuje obsah buňky. Je hodně využíván u tabulek, kterým se zadává velikost v pixelech. Pro lepší pochopení si ukažme 2 příklady, kde jednou bude velikost tabulky tvořena procentně a druhá tabulka bude tvořena přesně zadanou velikostní nebo-li jinak řečeno, bude zadaná v procentech. Tabulku stačí zapsat klasickým způsobem tzn. <table> 0 <td>text</td> </table> ale pokud budete psát HTML kód, nebude Vám tohle v žádném případě vyhovovat. Nejlepším řešením i pro úplně obyčejné tabulky je nadefinovat jim alespoň základní údaje. (jak je uvedeno i v příkladu) Většina wysiwyg editorů využívá možnost nacpat co nejvíce údajů ohledně struktury tabulky, ale zbytečně je to v mnoha případech přeháněno. Začněme tabulkou, kde bude velikost zadána procentně. 12

13 Vytvořte si stránku podle této předlohy a uložte ji jako Tabulka_procenta.html <html> <head> <title>tabulky - příklad na tabulku s velikostí zadávanou v procentech</title> </head> <body> <!--Zacatek tabulky--> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="tabulka_01"> <td width="33%">radek 1 Text 1</td> <td width="33%">radek 1 Text 2</td> <td width="34%">radek 1 Text 3</td> <td width="33%">radek 2 Text 10</td> <td width="33%">radek 2 Text 11</td> <td width="34%">redek 2 Text 12</td> </table> </body> </html> Vysvětleme si nyní jednotlivé pojmy. Do tabulky lze za jednotlivé tagy dosadit definice jako byly u formátování textu (např. barva pozadí, šířka, vlastnost align aj.) Do párového tagu <table> jsme dosadili následující údaje: border - tenhle příkaz znamená tloušťku ohraničení. Lze udávat jakékoliv číslo. Pokud chceme aby tabulka nebyla vidět, použijeme nulu (border= 0 ) cellpadding - tenhle příkaz znamená výplň buněk nebo-li srozumitelněji řečeno výšku buňky (je společná pro všechny buňky v tabulce) Počáteční hodnota 0 (cellpadding= 0 ) znamená, že se výška řádku přizpůsobí výšce písma. cellspacing - je podobnou vlastností cellpaddingu, ale tahle vlastnost má za úkol určovat vzdálenost buněk. (Pozn. tahle vlastnost má minimální využití, ale je dobré ji uvádět) Volná mezera, nebo-li - nelekejte se, opravdu je tohle příkaz. Tahle směsice písmen je používána v tabulkách na místě, kde potřebujeme aby bylo vidět ohraničení tabulky, ale nebyl zde uveden žádný text. Tento znak se vkládá místo textu, ale na stránce nebude vidět. 13

14 width (platí jak pro celkovou tabulku tak pro jednotlivé buňky) - tahle vlastnost definuje šířku tabulky i buňky. Vlastnost width se dělí dle dvou parametrů...máme-li tabulku zadanou přes procenta nebo přes pixely. Pro vlastnost width platí jedno důležité pravidlo: Velikost jednotlivých šířek buněk v řádku musí být stejná jako velikost celkové šířky tabulky. Např.: máme tabulku která bude mít celkovou velikost 90% a bude obsahovat 3 sloupečky (<td>). Jejich šířku si můžeme zvolit jakou potřebujeme, ale musí nám vždy dát součet 90. To znamená že si šířku buněk můžeme určit =90, nebo =90 apod. Stejné pravidlo platí i pro šířku buněk v tabulce, kde velikost zadáváme v pixelech. (šířka buněk = šířka sloupce za předpokladu, že máme stejně široké řádky v celé tabulce) Tabulka zadaná přes procenta - do celkové definice tabulky <table width= 100% > určujeme šířku tabulky vzhledem k prohlížeči (bude flexibilní velikost) Tzn. že pokud zadáme 100% bude tabulka jinak velká při rozlišení 800x600 pixelů a jinak velká při rozlišení 1024x768 pixelů. Jako velikost tabulky můžeme zadat jakékoliv číslo v procentech, ale musí pro ně platit výše zmíněné pravidlo. Tady bych Vás rád upozornil na jednu skutečnost... může se stát že zadáte velikost 100% a budete ji potřebovat rozdělit do 3 buněk. V tomhle případě rozdělte šířku buněk v poměru 33%+33%+34%. V následujícím příkladě Vám ukážu způsob zapsaní tabulky se dvěma řádkami a třemi sloupci. <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="tb-56"> <td width="33%"> </td> <td width="33%"> </td> <td width="34%"> </td> <td width="33%"> </td> <td width="33%"> </td> <td width="34%"> </td> </table> 14

15 Tabulka zadaná přes pixely - do celkové definice tabulky se zapíše požadovaná šířka tabulky udávaná v pixelech <table width= 300 > Tahle šířka je neflexibilní, takže se při jakémkoliv rozlišení zobrazí stejně. Platí pro ni také výše popsané pravidlo, ale najdeme zde odlišnost při zadávání šířky. Bude-li tabulka zapsaná tímhle způsobem <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" id="tb-125"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </table> tak se nám šířka buněk (resp. sloupců, protože sloupce máme stejně široké jako šířku buněk) rozloží přesně na stejné šířky. V tomhle případě je zadaná celková šířka 300 pixelů a máme zadané 3 buňky v jednom řádku, rozloží se nám jejich šířka po 100 pixelech. Můžeme si také určit jakou velikost si chceme nastavit. Platí zde výše popsané pravidlo zachování šířky a zápis bude následující: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" id="tb-78"> <td width="40"> </td> <td width="133"> </td> <td width="123"> </td> <td width="40"> </td> <td width="133"> </td> <td width="123"> </td> </table> V tomhle zápisu jsme si nadefinovali jakou šířku budou mít jednotlivé buňky. Protože je tahle šířka zadávaná také v pixelech, je neflexibilní. Pokud máte zájem, můžete si vyzkoušet výše uvedené HTML kódy a trochu si pohrát s čísly nebo procenty. 15

16 Vytvořte si stránku podle této předlohy a uložte ji jako Tabulka_pixely.html <html> <head> <title>tabulky - příklad na tabulku s velikostí zadávanou v procentech</title> </head> <body> <!--Zacatek tabulky se stejnymi sloupci--> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" id="tabulka_02"> <td>radek 1 Text 1</td> <td>radek 1 Text 2</td> <td>radek 1 Text 3</td> <td>radek 2 Text 10</td> <td>radek 2 Text 11</td> <td>radek 3 Text 12</td> </table> <br><hr><br> <!--Zacatek tabulky s ruzne velkymi sloupci--> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" id="tabulka_02"> <td width="75">radek 1 Text 1</td> <td width="165">radek 1 Text 2</td> <td width="60">radek 1 Text 3</td> <td width="75">radek 2 Text 10</td> <td width="165">radek 2 Text 11</td> <td width="60">radek 3 Text 12</td> </table> </body> </html> 16

17 id - každý by jistě řekl identifikační číslo. Ano, id může mít hodnotu identifikačního čísla, ale slouží podobně jako parametr name (o něm se zmíním až ve formulářích) a může nabývat veškerých hodnot. U tabulek bych mu nepřikládal velkou hodnotu, ale je lepší si jednotlivé tabulky pojmenovat zabráníte tím zbytečné nepřehlednosti. style - tahle vlastnost určuje ohraničení tabulky (jaký druh čáry se má zvolit) Přestože se tabulka skládá ze tří čar, určujeme ohraničení jen jedné, tudíž této hlavní čáry. Pokud budeme chtít použít jiné druhy čar, změníme tím i ostatní údaje (Pozn. wysiwyg editory jsou na tuhle práci nejlépe stavěné, protože dokážou za Vás zpracovat tyhle veškeré údaje do HTML kódu, zatímco vy si jen vyberete vše přes průvodce tabulkou) Protože ve stylech existuje mnoho druhů ohraničení a mnoho knížek je ani neuvádějí (dají se nalézt na internetu, ale wysiwyg editory za Vás vytvoří HTML kód), já se zmíním jen o základní plné čáře, se kterou jste se doposud setkávali a navíc připíši další dvě definice navíc. Vlastní definice zápisu buňky a tabulky v tagu <table> zní: Případ s použitím borderlight a borderdark <table border="5" cellpadding="0" cellspacing="0" width="100%" id="table_152" style="border-collapse: collapse" bordercolorlight="#0000ff" bordercolordark="#008000" bgcolor="#c0c0c0"> Případ s použitím bordercolor <table border="5" cellpadding="0" cellspacing="0" width="100%" id="table_152" style="border-collapse: collapse" bordercolor="#ff0000" bgcolor="#c0c0c0"> Popišme si jednotlivé elementy: Vlastnost border-collapse: collapse nám definuje, že zvolený typ čáry bude plný. Vlastnost bordercolor= barva nám definuje celkovou barvu pro tabulku. Použijeme-li tenhle případ, již neuvádíme vlastnosti borderlight a borderdark. Vlastnost bordercolorlight= barva nám definuje světlé ohraničení tabulky Vlastnost bordercolordark= barva nám definuje tmavé ohraničení tabulky Vlastnost bgcolor= barva nám definuje pozadí buněk. Pokud jste zvládli následující kroky co se týká tabulek, můžeme přejít do další části, kde se budu zabývat složitějšími příklady s tabulkami. Základní významy tagů jsem popsal v téhle lekci, takže si zkuste jeden příklad dle předlohy níže. V další části tabulek již nebudu popisovat principy tagů které se již zmínily de nahoře. V následujícím příkladu se vyskytne jeden tag který jsem doposud neprobíral, ale vysvětlím ho později. Jedná se o párový tag <div></div>. 17

18 Vytvořte si stránku podle této předlohy a uložte ji jako Tabulka_zaklady.html <html> <head> <title>tabulka se základy</title> </head> <body> <p style="margin-top: 0; margin-bottom: 0"><u><b> <font color="#000080">nejdříve si ukážeme dobře vypadající tabulku:</font></b></u></p><br> <!--Prvni tabulka - druhy zbozi--> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="500" id="tabulka1"> <td width="88"><p align="right"><u>druh zboží:</u></p></td> <td width="17"> </td> <td width="388">diskety</td> <td width="88"> </td> <td width="17"> </td> <td width="388">cd-r, CD-RW</td> </table> <br> <p style="margin-top: 0; margin-bottom: 0"> <font color="#000080"><u> <b>další příklad: vnořená tabulka + ukázky s barvami:</b></u></font></p> <br> <table border="5" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="tabulka2" bordercolorlight="#008000" bordercolordark="#000080"> <td width="100%" bgcolor="#c0c0c0"> <div align=center> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%" id="tabulka3"> <td width="33%" bgcolor="#dfac4d"> </td> <td width="33%" bgcolor="#f0c771"> </td> <td width="34%" bgcolor="#f0c771"> </td> <td width="33%" bgcolor="#dfac4d"> </td> <td width="33%" bgcolor="#f0c771"> </td> <td width="34%" bgcolor="#f0c771"> </td> 18

19 <td width="33%" bgcolor="#dfac4d"> </td> <td width="33%" bgcolor="#f0c771"> </td> <td width="34%" bgcolor="#f0c771"> </td> </div> </table> </td> </table> </body> </html> První část kapitoly máme za sebou a teďka se budu věnovat složitější úpravě tabulek, jako je například sloučení buněk, použití pozadí do buňky aj. zajímavé věci. Abych Vás neodradil hnedka ze začátku (když už jsem se zmínil že se jedná o těžší část) tak začneme vložením pozadí do buňky. Vložení pozadí do buňky - pokud jste zvládli minulou lekci, nebude pro Vás tento úkol těžký. Do definice vlastností se přidá hodnota background Samozřejmě můžete psát do této buňky text, který bude vidět nad Vámi zvoleném pozadí. Příklad na zapsání definice Obecně: <td width="100%" height="414" bgcolor= barva > </td> Konkrétní případ: <td width="100%" height="414" bgcolor= #FF00FF > </td> Párový tag <div></div> - tento tag hraje velkou úlohu v HTML jazyku a zejména v tabulkách. Tento tag se předřazuje (píše se před konkrétní událost) před veškerý HTML kód, kterého se bude týkat. Ukončení tagu se provádí pomocí lomítka, protože se jedná o párový tag. Tento tag zapsaný bez definic nemá žádný význam, ale pokud ho nedefinujeme, bude se týkat všeho co je uzavřeno mezi tímhle tagem. Pokud chceme vložit jinou definici v tomhle tagu, nemusíme ho ukončovat, ale stačí ho pouze přerušit. Nejlepší bude vysvětlit to na příkladu. V tomhle případě nám vlastnost <div align=center> vycentruje na střed vše, co bude uzavřeno mezi tímto tagem. <div align=center> <table width= 300 > <td>text</td> </table> </div> Abychom nemuseli ukončovat tag <div> a znovu ho začínat, tak ho přerušíme. Přerušení = nadřazení definice před textem. Nastane-li situace, že se např. setkají tři různá umístění u textu, bude primárně bráno to, které je mu nejdříve přiřazeno. 19

20 Např.: <td align=right align=center align=left>text</td> - text bude vpravo. <div align=center> <table width= 300 > <td align=left>text</td> </table> </div> Seskupování buněk v řádcích - pro názornost seskupení buněk v řádcích jsem zde vložil názorný příklad Seskupování řádků lze uplatnit u každé tabulky tzn. u tabulek které jsou zadávány v procentech i pixelech (Pozn. v příkladech budu uplatňovat tabulky zadávané v procentech, protože jsou pro vysvětlování přehlednější) Při seskupování řádků se definuje vlastnost colspan= číslo kde číslo znamená počet seskupených buněk. Tahle definice se zapisuje přímo do definice tagu <td>. Vlastnost colspan nám odebírá počet zapsání řádků ve sloupci. Ukažme si teoretický zápis a pak si zkusme udělat tabulku která je zobrazena nahoře. Abychom si to neulehčili, přidáme ji navíc barevný nádech. Většinou se tahle vlastnost zadává spolu s ostatními vlastnosti, takže do definice přiřadím ještě definici šířky buňky. Příklad na zapsání definice Obecně: <td colspan="číslo"> </td> Konkrétní případ: <td width="66%" colspan="2"> </td> 20

21 Vytvořte si stránku podle této předlohy a uložte ji jako Tabulka_colspan.html <html> <head> <title>tabulky - seskupení buněk</title> </head> <body> <div align=center> <table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%" id="tabulka1"> <td width="33%"> </td> <td width="33%"> </td> <td width="34%"> </td> <td colspan="2" bgcolor="#00ffff"> </td> <td> </td> <td width="33%"> </td> <td width="67%" colspan="2" bgcolor="#0000ff"> </td> <td width="50%" colspan="3" bgcolor="#000080"> </td> </table> </div> </body> </html> Seskupování buněk ve sloupcích - pro názornost seskupení buněk ve sloupcích jsem zde vložil následující příklad Stejně jako seskupování buněk v řádcích lze seskupování buněk uplatnit v tabulkách, kterým se zadává šířka v procentech nebo v pixelech. Při seskupování sloupců se definuje vlastnost rowspan= číslo kde za číslo se dosadí počet sloučených buněk. Další vlastností která se běžně nedefinuje, ale je v téhle věci je podle mého názoru velmi užitečná je heigh, nebo-li výška řádku. Zápis vypadá obdobně height= číslo kde číslo znamená výšku řádku. Pokud budeme chtít používat klasickou výšku řádku, nemusíme tuhle vlastnost uvádět, ale pokud ji uvedeme můžeme ji přiřadit i nulu. Zvolíme-li nízké číslo, nemusí se výška vůbec projevit znatelnost závisí na výšce udaného čísla (Poznámka: ze zkušenosti uvádím místo nuly malá čísla např. 1,2 aj.) 21

22 Zkusme si na to obdobný příklad jako byl předtím na colspan. Příklad na zapsání definice Obecně: <td rowspan= číslo height= číslo > Konkrétní případ: <td width="25%" rowspan="2" height="1"> </td> Vytvořte si stránku podle této předlohy a uložte ji jako Tabulka_rowspan.html <html> <head> <title>tabulky - seskupení buněk</title> </head> <body> <div align=center> <table border="2" cellpadding="0" cellspacing="0 style="border-collapse: collapse" bordercolor="#111111" width="50%" id="tabulka2" height="1"> <td width="25%" height="0"> </td> <td width="25%" rowspan="2" height="1" bgcolor="#00ffff"> </td> <td width="25%" height="1"> </td> <td width="25%" rowspan="3" height="1" bgcolor="#000080"> </td> <td width="25%" height="1"> </td> <td width="25%" rowspan="2" height="2" bgcolor="#0000ff"> </td> <td width="25%" height="1"> </td> <td width="25%" height="1"> </td> </div> </body> </html> Absolutní pozice tabulky - tohle téma jsem si nechával na závěr až si ujasníte z čeho se tabulka skládá. V mnoha případech budeme potřebovat umístit tabulku do prostoru stránky podle svých potřeb. V tomhle případě nám pomůže pár rozšířených vlastností k definici stylu. Jedná se o to, že k dosavadní definici style="border-collapse: collapse" dosadíme 3 vlastnosti (všimněte se že všechny jsou uzavřeny do jedné uvozovky a jsou odděleny středníky): style="border-collapse: collapse; position:absolute; left:94; top:93" Pojďme si je vysvětlit. border-collapse: colapse je již známá vlastnost, position:absolute nám určuje že se jedná o absolutní umístění tabulky a vlastnosti left a top nám určují jak má být tabulka umístěna zleva a seshora od levého horního okraje stránky. Ukažme si na to jednoduchý příklad. 22

23 (Poznámka: Pokud budete používat tuhle vlastnost, doporučuji používat výhradně velikosti zadané v pixelech přejdete mnoho zbytečným komplikacím) Vytvořte si stránku podle této předlohy a uložte ji jako Tabulka_abolutni_ulozeni.html <html> <head> <title>tabulky - absolutní umístění</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position: absolute; left: 139; top: 151" bordercolor="#111111" width="300" id="tabulka3x3"> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> <td width="100"> </td> </table> </body> </html> Tímhle příkladem bych rád uzavřel kapitolu na tabulky. Tahle kapitola byla velmi obsáhlá a nelze v ní vyjmenovat veškeré kombinace tabulek jaké mohou nastat. Proto než se pustíte do další kapitoly, tak bych Vám doporučil zkusit si udělat několik vlastních kombinací tabulek, jak pomocí formátování textu, barevných podkladů, seskupování apod. Jak jsem psal již na úvod téhle kapitoly, tak na tuhle práci se hodí nejvíce pracovat s wysiwyg editory. Pokud máte možnost vyzkoušet si je tak si to rozhodně zkuste. Tahle kniha se zabývá jazykem HTML a ne tvorbou stránky podle vzhledu, tudíž zde práci ve wysiwyg editorech nebudu popisovat. 23

24 6. kapitola Grafika WWW Grafika a grafické prvky na internetu? Úplná samozřejmost. Je tomu ovšem tak? Umístit obrázky není vůbec těžké (stačil by i papír velikosti A4 na vysvětlení tagů a příklad), ale nejtěžší je zřejmě uvědomit si okolní skutečnosti, které většinou každý běžný uživatel přehlíží. K čemu by nám byla stránka která bude designově velmi krásná, ale doba načítání by byla 30 minut? V téhle kapitole se naučíte základní parametry obrázků, které Vám pomohou při rozhodování jaké grafické prvky umístit a v jaké míře.ale začněme od začátku. Budeme-li chtít umístit na internet grafické prvky, musíme znát alespoň jejich základní vlastnosti. Grafické prvky rozdělíme do 2 skupin pozadí a obrázky, které se dále dělí podle formátu. Já se budu zabývat pouze dvěma formáty. Pozadí - s pozadím jsme se jíž setkali v minulých kapitolách, ale používali jsme jako pozadí pouze jednu barvu. Jako pozadí můžeme použít jakýkoliv obrázek jakéhokoliv typu (*.jpg, *.gif, *.bmp aj.), ale pozor na důležitou událost. Pozadí stránky se musí stahovat svižně, takže nemá cenu na stránky použít obrázek s velikostí 500kb (přestože bude nádherný) kde budeme stránku otevírat min. 3 minuty, ale stačí použít také originální obrázek s velikostí pár kb které se načtou téměř okamžitě. Pokud uvážíte tahle dvě hlediska, stojí proti Vám: 1) krásné pozadí s velkou velikostí (např.500kb) x dlouhá doba stahování obrázku 2) krásné pozadí s malou velikostí (např. 20kb) x krátká doba stahování obrázku Pozadí stránky se skládá buď z plné barvy, nebo obrázků které se skládají vedle sebe (proto jsou vytvořeny speciální druhy obrázků které mají malou velikost) a vzájemně na sebe navazují. Takže uvažte která možnost se Vám více zamlouvá (Pozn. pokud je to možné, doporučuji používat co nejmenší velikosti. Některé stránky se bohužel této zásadě vyhnout nemůžou kvůli celkovému zpracování, proto je dobré upozornit na tuhle skutečnost ještě před otevřením téhle stránky) A teďka je na řadě lehký HTML kód, který srovnám s jednobarevným pozadím pro lepší pochopení. Pokud bych to mněl zapsat, jedná se o vložení nové definice do tagu <body>. Příklad na zapsání definice, kde je použita barva jako pozadí: Obecné zapsání jednobarevného pozadí: <body bgcolor="barva"> Konkrétní zapsání jednobarevného pozadí: <body bgcolor="#c0c0c0"> Příklad na zapsání definice, kde je použitobrázek jako pozadí: Obecné zapsání pozadí, kde je použit obrázek: <body backround= umístění obrázku + přípona > Konkrétní zapsání pozadí, kde je použit obrázek: <body background="../pozadi_01.jpg"> 24

25 Obrázky ve formátu *.gif - tenhle formát obrázků slouží pro nejkvalitnější grafiku kterou lze vytvořit. Tenhle formát nelze kompresovat (snížit velikost) a podporuje animované sekvence tzv. gify, dále se používá pro ukládání animovaných bannerů. Co dodat závěrem? Používejte tento formát jen tam kde je to nezbytné, protože kvůli své dokonalé kvalitě hrozně moc ovlivňuje dobu načítání stránky (prodlužuje dobu) Obrázky ve formátu *.jpg a *.jpeg - tyhle formáty jsou nejrozšířenější na internetu zejména pro své vlastnosti. Nemohou se sice srovnávat s úplně dokonalou grafikou jako mají formáty *.gif a nepodporují animované sekvence, ale jejich kvalita je na hodně vysoké úrovni. Převážnou většinu fotek naleznete na internetu (dokonce i digitální fotoaparáty ukládají jako formáty *.jpg) právě v tomhle formátu. Na závěr snad jen dodat, že používáním těchto formátů dosáhnete dokonalých výsledků a kvalitu stránky nehorší. Teďka jsem zde popsal základní dva druhy formátů a pouštím se do vysvětlení vložení obrázku na stránku. Jelikož předpokládám že minulé kapitoly jste zvládli, vynechám dopodrobna psané události. Vložení obrázku - se provádí přes nepárový tag <img>, ale tenhle tag sám o sobě nic neznamená, přiřadíme mu další definice, tj. border, src, width a height. Přestože jsem si již některé zmíněné definice popsali, popišme si je ještě jednou. border= - ohraničení (pokud nechceme vidět rámeček zadáme nulu) src= umístění obrázku. Můžeme zadat relativní i přesně danou adresu umístění lowsrc= tento tag je využíván velmi málo, ale je potřený a myslím, že je třeba se o něm zmínit. Pokud používáme na stránce obrázky, které se stahují velmi dlouho, je pro Vás potřeba použít tento parametr. Jak to funguje? Obrázek, který by se vám normálně načetl uložíte ještě jednou, ale tentokrát v horší grafice. Tento parametr nám definuje, že se nejdříve načtou obrázky s horší grafikou (stránka se svižněji načte) a teprve po úplném rozjetí stránky se samy tyhle obrázky začnou nahrazovat obrázky, které jsou uvedeny v src= width= určuje nám šířku obrázku height= určuje nám výšku obrázku Příklad na zapsání definice Obecně: <img border= číslo src= místění + přípona width= číslo height= číslo > Konkrétní případ: <img border= 0 src=../obr.jpg width= 572 height= 480 > Poznámka: ohledně umístění relativních a absolutních adres se dozvíte v kapitole hyperlinky. Doposud zadávejte absolutní adresy tzn. adresu tam, kde se obrázek nachází (např.: C:/Document a Setting/Obrazky/muj_obrazek.jpg) Další formátování obrázků se provádí stejně jako formátování textu. Vzhledem k větší přehlednosti a lepšího zápisu doporučuji uzavírat obrázky do párového tagu <p></p>, protože do něho můžete napsat přímé definice. Můžete také využít párového tagu <div></div>, ale nezapomeňte že se týká veškerého textu i obrázků které jsou umístěny mezi tímto tagem. Budete-li např. chtít vycentrovat obrázek, napíšete: <p align=center><img border= 0 src=../obr.jpg width= 572 height= 480 ></p> 25

26 Pro obrázky platí také více vlastností než je u uváděno u textu. Pokud se budeme zabývat umístěním na stránce, můžeme použít následující definice tagy: Zarovnání obrázku - se aplikuje úplně stejně, jako jsme se doposud setkali, ale u obrázků existuje více vlastností. Rozeznáváme tyhle druhy zarovnání: top = horní okraj grafiky na horní okraj řádku middle = střed grafiky na účaří řádku bottom = dolní okraj grafiky na dolní okraj řádku left = umístění na levý okraj s obtékáním textu zprava right = umístění na levý okraj s obtékáním textu zleva texttop = horní okraj grafiky na horní okraj řádku absmiddle = střed grafiky na střed řádku baseline = dolní okraj grafiky na účaří řádku absbottom = dolní okraj grafiky na spodní okraj řádku Alternativní text: alt a title - alternativní text se může definovat 2-mi vlastnostmi, které se uvádějí do definice tagů. Mezi těmito dvěmi vlastnostmi alt= a title= není velký rozdíl, ale title se používá především u textů a alt u obrázků. Jak to funguje? Pokud přidržíte myš nad textem resp. obrázkem, zobrazí se popiska. Pokud bude popiska příliš dlouhá, sama se zalomí na následující řádky. Zejména možnost alt je velmi praktická, protože když má uživatel vyplé načítání obrázků nebo se mu obrázek špatně načte, zobrazí se mu namísto obrázku text. Ukažme si to na příkladu. Poznámka: Popiska se odborně nazývá tooltip text Poznámka autora: Tooltip text se může občas chovat velni podivně může a nemusí se zobrazovat, přestože máme vše správně zapsané. Tahle chyba se dá opravit většinou restartováním. Příklad na zapsání definice u textu Obecně: <p title= Tady bude text, který se zobrazí >Text</p> Konkrétní případ: <p title= Přejdete na úvodní stránku >Úvod</p> Příklad na zapsání definice obrázku Obecně: <img border= číslo src= místění + přípona width= číslo height= číslo alt= Tady bude text, který se zobrazí > Konkrétní případ: <img border= 0 src=../obr.jpg width= 572 height= 480 alt= Tady je image > 26

27 Vytvořte si stránku podle této předlohy a uložte ji jako alt_a_title.html <html> <head> <title>alt a title</title> </head> <body> <b>pro zobrazení tooltip textu podržte myší nad textem nebo obrázkem.</b> <p title="tohle je krátký popisek">popisek na text č.1 (krátký popis)</p> <p title="tohle je dloooooooooooooooooooouhýýýýýýýýýýýýýýýýýýý popisek">popisek na text č.1 (dlouhý popis)</p> <u>špatné načtení obrázku</u><br> <img border="0" src"spatne_img1.gif" width="200" height="30" alt="tady je obrázek prstenu"><br> <br> <u>dobré načtení obrázku</u><br> <img border="0" src="my web/img1.gif" width="153" height="99" alt="tady je obrázek prstenu"> </body> </html> Než se začnu zabývat dalšími parametry, vytvořme si jeden lehký příklad, kde uplatníme výše zmíněné definice a parametry. 27

28 Vytvořte si stránku podle této předlohy a uložte ji jako grafika_zaklady.html <html> <head> <title>grafika - základy</title> </head> <body bgcolor="#f0c771"> <p align=center>ukažme si nejdříve ohraničení... zleva je border="0", uprostřed border="1" a zprava border="5"<br><br> <img border="0" src="img1.gif" width="153" height="99"> <img border="1" src="img1.gif" width="153" height="99"> <img border="5" src="img1.gif" width="153" height="99"><br> </p> <p align=center>vlastnost lowsrc nemá cenu zkoušet offline, protože obrázek je načten téměř okamžitě</p> <p align=center>teďka si trochu pohrajeme s výškou a šířkou<br> </p> <!--Tabulka--> <table width=100%> <td width=33% align=center><img border="0" src="img1.gif" width="153" height="40"></td> <td width=33% align=center><img border="0" src="img1.gif" width="96" height="63"></td> <td width=33% align=center><img border="0" src="img1.gif" width="101" height="126"></td> </table> </body> </html> hspace - tahle vlastnost nám určuje, kolik bude vynecháno místa v horizontálním směru (tj. horizontální ose) vedle dalšího obrázku. vspace - tahle vlastnost nám určuje, kolik bude vynecháno místa ve svislém směru (tj. vertikální ose) vedle dalšího obrázku. Párový tag <map></map> - funkce tohohle tagu spočívá především při tvorbě map, pozicování objektů při kliknutí nad určitou část obrázku apod. Párový tag <area></area> 28

29 7. kapitola Formuláře Každý z vás na stránce viděl rozvírací seznamy, internetový obchod, dotazníky nebo jiné stránky, do kterých jste zadali nebo vybrali informace a poté je odeslali ke zpracování. V téhle lekci si ukážeme jak toho docílit. Formulář si představme jako souhrn několika různých políček, tlačítek aj. věcí, které jsou uzavřeny v jednom celku. Veškeré události které chceme zpracovávat musí být v tomhle celku uzavřeny. K tomu nám slouží párový tag <form>. Pokud budeme pracovat s textovými poli, zaškrtávacími tlačítky atd., slouží pro jejich kontrolu skripty pro kontroly určitých událostí. Zmiňuji se o tom, protože některé prvky formuláře dokáží tyhle vlastnosti také nabídnout (tzv. ověřovací pravidla) ale v praxi se děje převážná část přes JavaScript. Párový tag <form></form> - do tohohle tagu vkládáme veškeré možnosti formuláře (např.: tlačítka, vstupní pole) Mezi tento tag zapisujeme také klasický HTML kód (chceme-li udělat ve formuláři tabulku, zapíšeme ji mezi tyhle tagy). Párový tag <form></form> sám o sobě nic neznamená, proto se mu přiřazují následující hodnoty a definice jsou zapsány přímo v těchto tagech. Příklad na zapsání hodnot (nebo-li definic, či odborněji atribut) Obecně: <form action= událost method= způsob předání údajů >Naplnění definice</form> Konkrétní příklad: <form action="insert.asp" method="post">naplnění definice</form> Do tagu <form> můžeme zapsat následující hodnoty: action = odkaz na skript, který nám zpracuje data ( tudíž se dá říct, že se jedná o skript který nám bude obsluhovat formulář) method = způsob předání údajů enctype = způsob zakódování dat Jednotlivé hodnoty nabírají následující atributy: Action= mailto:neco@neco.cz - formulář a jeho hodnoty budou odeslány na uvedený . Action= stránka.asp - formulář a jeho hodnoty bude poslán na příslušnou stránku, která zpracuje odeslané údaje. Většinou se odkazuje na na stránky typu *.asp, *.php nebo *.jsp apod. Method= post - veškerá data formuláře se zabalí a odešlou nezávisle na URL adrese. Post je dobré používat u rozlehlých formulářů nebo tam, kde je předáváno mezi stránkami hodně informací. Method= get - veškerá data jsou předávána v URL adrese. Tuhle metodu bych doporučil používat jen tam, kde se předává minimum parametrů (většina vyhledávačů pracuje na tomhle principu) Enctype - atribut slouží pro kódování češtiny, při posílání souborů atd. Enctype nemá v párovém tagu <form></form> moc velkou důležitost, protože se užívá převážně u skriptovacích stránek. 29

30 Enctype může nabývat tyhle hodnoty: a) enctype= text/plain pro posílání jednoduché pošty b) enctype= multipart/form-data pro posílání souborů, přesné kódování češtiny c) další hodnoty: application/x-www-form-urlencoded, libovolná mime deklarace Příklad použití: Obecně: <form action= druh akce method= metoda zpracování dat ></form> Konkrétní případ: <form action= odesli.asp method=post></form> Tag <input type= text > - jedná se o nepárový tag, který do stránky vloží obyčejné textové pole. Do tohohle tagu lze zapsat následující hodnoty: a) size= číslo šířka pole ve znacích b) maxlength= číslo nejvyšší počet zadaných znaků c) name= název kde název je pojmenování pole. Používá se převážně při předávání údajů mezi stránkami, kde název slouží jako proměnná. d) value= text počáteční hodnota e) disabled text bude šedý bude mi přiřazená hodnota jakou mu přiřadíte a nelze jej měnit. Tohle políčko s textem se v Internet Explorer neodesílá. Tahle pravidla neplatí vždy záleží na druhu použitého prohlížeče. f) readonly text bude viděn, normálně bude mu přiřazená hodnota jakou mu přiřadíte ale nelze jej měnit. Tahle hodnota pracuje opět jen v některých prohlížečích. Příklad použití: Obecně: <input type= text size= číslo name= název value= text maxlength= číslo > Konkrétní případ: <input type= text size= 25 name= TP1 value= něco napiš maxlength= 20 > Tag <input type= password > - jedná se o nepárový tag, který do stránky vloží textové pole které slouží pro zadávání hesla (místo písma se jeví hvězdičky). Může nabývat stejných hodnot jako <input type= text > Tag <input type= hidden > - jedná se taktéž o nepárový tag, který vloží do stránky skryté pole. Můžete do něj zadávat stejné hodnoty jako v minulých případech, ale polem nebude na stránce vidět (slouží pro přenos tzv. skrytých hodnot) Tag <input type= checkbox > - jedná se o nepárový tag, který vloží do formuláře zaškrtávací pole. Pokud budete vkládat více zaškrkávacích polí a pojmenujete je stejně (pomocí vlastnosti name) s různými hodnotami (value), vytvoří se tak skupina. 30