Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné fungování webových stránek musí být veškeré obrázky či externí soubory uloženy v podsložkách umístěných v hlavní složce. V HTML kódu se zadává cesta k souborům. Vazeb mezi HTML dokumentem a obrázky využíváme již při tvorbě dané stránky při kontrolních náhledech, a tak je dobré nový dokument hned po vytvoření uložit. Hlavní, úvodní stránka se vždy ukládá pod názvem index.html obr. C 3) Zvolená možnost z kroku 2 nám otevře nový dokument, kde je již přednastavena základní konstrukce webové stránky. Konkrétně se jedná o příkazy: <html></html> - Tento tag začíná a uzavírá celý dokument. Je nepovinný, prohlížeče si jej totiž dokáží domyslet. Nemá žádné další atributy. <head></head> - Hlavička dokumentu, která se uživatelům nezobrazuje. Obsahuje další tagy (title, meta, link, style, script...). V případě, že do hlavičky napíšeme prostý text, některé prohlížeče ho zobrazí na začátku stránky! Tento tag rovněž nemá žádné atributy. <body></body> - Tělo stránky. V podstatě vše co umístíme do tagu body, bude vidět na stránce. Atributem body může být například nastavení pozadí těla stránky (barva, obrázek...) My v tomto kroku ještě do těla stránky připíšeme párový tag <center> </center>, aby jsme měli stránku zarovnanou na střed prohlížeče.
Tvorba fotogalerie v HTML str. 2 obr. D 4) Nyní si vytvoříme tabulku, která nám později vytvoří fotogalerii. Tabulka sestává z párových tagů, které určují začátek a konec tabulky, řádky a také sloupce (buňky): <table></table> - Tento tag začíná a končí celou tabulku. Je možné ho doplnit různými atributy. Například informacemi o velikosti tabulky, tloušťce linek atd.) <tr></tr> - Řádek tabulky. Lze k němu dopsat atributy, které se budou konkrétního řádku týkat. <td></td> - Sloupec/buňka tabulky. Lze k němu dopsat atributy, které se budou konkrétní buňky týkat. Z důvodu dobré čitelnosti a orientace v kódu je zapotřebí dodržovat určitá pravidla pro jeho psaní. U tabulek se užívá tzv. nadřazenosti některých tagů oproti ostatním. Nadřazené se píší zleva a jim podřízené se odráží tabulátorem směrem na pravou stranu. Např. <table> je nadřazený oproti <tr> a ten je nadřazený oproti <td>. Výsledek tedy bude vypadat jako nahoře v obr. D. V tomto kroku zadáme také atributy k tagu <table>. Konkrétně: border= 1 - Tloušťka linek tabulky. V případě hodnoty 0 se linka zruší. height= 600 - Výška tabulky. Hodnota je uvedena v pixelech. width= 600 - Šířka tabulky. Hodnota je uvedena v pixelech.
Tvorba fotogalerie v HTML str. 3 obr. E obr. F 5) V hlavní složce, kde máme dokument html uložen, vytvoříme podsložku s názvem images a do ní uložíme obrázky pod názvy 1.jpg 2. jpg 3. jpg 4.jpg 5.jpg 6.jpg Aby se v tabulce objevily obrázky, musíme mezi značky <td> a </td> napsat tag pro obrázek i s cestou k jeho umítění: <img src= images/název obrázku včetně koncovky > - Zde si musíme dát pozor, aby jsme napsali správně tvar názvu obrázku. Tzn. například 1.jpg Písmena jpg musí být napsána minuskami, od názvu obrázku oddělená tečkou. (Na tomto příkladu pouze pro ilustraci je u všech obrázků uveden stejný název, v galerii se nám proto opakuje jeden obrázek.) Naše tabulka má 4 řádky a 3 sloupce. V prvním a třetím řádku budou obrázky, ve druhém a čtvrtém budou popisky k obrázkům. Popisky do tabulky napíšeme jednoduše: Mezi značky <td> a </td> ve druhém a čtvrtém řádku tabulky napíšeme konkrétní popisky k obrázkům. Po stisku klávesy F10 se nám zobrazí náhled webové stránky. (viz obr. F (kvalita obrázku je nízká, proto se některé linky tabulky nemusí na výtisku zobrazit))
Tvorba fotogalerie v HTML str. 4 obr. G obr. H 6) Na obrázku F z předcházející strany, jsou obrázky v galerii zarovnány na levou stranu buněk a stejně tak i popisky. Nyní vše zarovnáme na střed buněk. Provedeme to atributem: align= center - Zde align znamená zarovnání a center znamená na střed. Tento atribut napíšeme do všech tagů <td> naší tabulky. Po stisku klávesy F10 se nám zobrazí náhled webové stránky. Nyní již jsou obrázky i popisky na středu buněk. (viz obr. H (kvalita obrázku je nízká, proto se některé linky tabulky nemusí na výtisku zobrazit))
Tvorba fotogalerie v HTML str. 5 obr. J obr. K 7) Fotogalerie slouží k prohlížení fotek. V naší tabulce jsou zobrazeny zatím jen náhledy. Avšak až uživatel klikne na daný náhled fotky/obrázku, či popisek, chceme docílit toho, aby se mu fotka zobrazila v normální velikosti. Proto musíme z obrázků a popisků v podstatě vytvořit odkazy. Používá se k tomu následující tag: <a href= images./název obrázku > - Zde již samotný tag <a> znamená odkaz, avšak my k němu připojíme atribut href, který odkazuje na tzv. kotvu, což je náš obrázek. Po stisku klávesy F10 se nám zobrazí náhled webové stránky. Nyní již jsou kolem obrázků rámečky značící odkaz a popisky jsou podtrženy, neboli, jsou aktivní. (viz obr. K (kvalita obrázku je nízká, proto se některé linky tabulky nemusí na výtisku zobrazit)) Zda odkazy fungují, poznáme po najetí myší, kdy se nám kurzor myši změní ze šipky na ručičku. Po kliknutí na obrázek nebo popisek by se měl zobrazit obrázek v plné velikosti.
Tvorba fotogalerie v HTML str. 6 obr. L obr. M 8) Obrázky většinou nevypadají hezky, pokud je kolem nich rámeček, značící odkaz. Proto ho zrušíme atributem, který přidáme do tagu pro obrázek. Samotný atribut vypadá následovně: border= 0 - border znamená rámeček a hodnota 0 nám udává zrušení rámečku. Po stisku klávesy F10 se nám zobrazí náhled webové stránky. Nyní již kolem obrázků rámečky značící odkaz nejsou. (viz obr. M (kvalita obrázku je nízká, proto se některé linky tabulky nemusí na výtisku zobrazit)).
Tvorba fotogalerie v HTML str. 7 obr. N obr. O 10) Teť už jen zbývá tabulku, nebo-li naší galerii trochu upravit vizuálně. Je spousta možností, pro příklad si uvedeme, jak se dá změnit barva jednotlivých buněk. Rozhodli jsme se, že chceme, aby buňky, kde jsou popisky, měly např. růžovou barvu. Uděláme to pomocí atributu: bgcolor= pink - bgcolor znamená barva pozadí a hodnota pink nám udává růžovou barvu. Atribut bgcolor lze užít i do jiných tagů, například <body> kde nám určí barvu pozadí celého dokumentu. Barva se dá zadat podle anglického názvu, avšak výběr je dost omezený. Druhou možností jsou tzv. hexakódy. Pokud si v programu Adobe Photoshop namícháme libovolnou barvu, opíšeme si potom její šestimístný (hexa) kód a spolu se znakem # ho napíšeme k atributu bgcolor. atribut pak bude vypadat například takto: bgcolor= #ffccff (též růžová barva, ale namíchaná ve Photoshopu a zadaná hexakódem do HTML.) Po stisku klávesy F10 se nám zobrazí náhled webové stránky. Buňky s popisky jsou růžové. (na výtisku jsou šedé, kvůli tisku ve stupních šedi) (viz obr. O (kvalita obrázku je nízká, proto se některé linky tabulky nemusí na výtisku zobrazit)).