1 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ý...
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.
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í kon-
strukce“ webové stránky. Konkrétně se jedná o příkazy: - Tento tag začíná a uzavírá celý dokument. Je nepovinný, prohlížeče si jej totiž dokáží „domyslet“. Nemá žádné další atributy. - 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. - 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
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):
- 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.)
- Řádek tabulky. Lze k němu dopsat atributy, které se budou konkrétního řádku týkat.
- 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ř.
je nadřazený oproti
a ten je nadřazený oproti
. Výsledek tedy bude vypadat jako nahoře v obr. D. V tomto kroku zadáme také atributy k tagu
. 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.
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
a
napsat tag pro obrázek i s cestou k jeho umítění: - 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
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ů
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))
