Programming the World Wide Web |
Fejezet2 |
| << 2.3. Listák | 2.5. Elemek csoportosítása/kategorizálás >> |
2.4. Táblázatok és képbeszúrás
2.4.1. Táblázatok
A táblázat egy cellákból felépülő mátrix.
Táblázat létrehozása a <table> tag segítségével történik. Az ebbe ágyazott <tr> (table row) tag egy sort definiál. Egy soron belül elhelyezkedő cellák pedig a <td> (table data) tag segítségével adhatók meg.
A táblázat első sora és/vagy első oszlopa gyakorta valamilyen, az oszlopra (illetve sorra) vonatkozó címkét tartalmaz. Az ilyen jellegű cellát a <th> (table heading) tag segítségével adjuk meg.
Egy táblázatban kétféle szegélyvonal szerepel: egy külső szegély (border), illetve egy, a cellákat keretező belső szegély (rule). Amennyiben a table elemben nem jelenik meg a border attribútum, akkor egyik szegély sem lesz megjelenítve. A border attribútum értéke egy egész szám, mely a külső szegély vastagságát adja meg pixel-ekben (1-nél vastagabb külső szegély esetén a táblázat megjelenítése 3D-s hatást kelt). Amennyiben 0-tól különböző értéket adtunk meg a külső szegélynek, a belső szegély vastagsága 1 pixel lesz.
Pl. egy nagyon egyszerű táblázat:
<caption>egy "bonyolultabb" példa (a Százholdas pagony lakóinak ízlése)</caption>
<tr><th> </th><th>Micimackó</th><th>Malacka</th><th>Tigris</th><th>Róbert Gida</th>
</tr>
<tr><th>méz</th><td>kedvencem</td><td>mondjukhogy...</td><td rowspan="2">pfúj!</td><td rowspan="3">nyami!</td>
</tr>
<tr><th>pattogatott kukorica</th><td>az is jó, ha nincs méz</td><td>fincsi</td>
</tr>
<tr><th>sültkolbász</th><td colspan="2">nem az én esetem</td><td>ez már igen!</td>
</tr>
</table>
Így néz ki:
| Micimackó | Malacka | Tigris | Róbert Gida | |
|---|---|---|---|---|
| méz | kedvencem | mondjukhogy... | pfúj! | nyami! |
| pattogatott kukorica | az is jó, ha nincs méz | fincsi | ||
| sültkolbász | nem az én esetem | ez már igen! | ||
A táblázat megjelenítése tovább variálható CSS segítségével.
2.4.2. Képbeszúrás - img
Képet az img üres elem segítségével iktathatunk be. Legegyszerűbb alakja a következő két attribútumot tartalmazza: src, mely a képet tartalmazó állományt adja meg, illetve alt, mely egy alternatív szöveget határoz meg, ami akkor jelenik meg, ha a kép megjelenítése valamilyen okból nem lehetséges
(nem grafikus böngésző vagy a böngészőben ki van kapcsolva a képek megjelenítése). Az alt attribútum használata kötelező a szigorú (X)HTML specifikáció szerint.
Amennyiben a kép ugyanabban a katalógusban található, mint a HTML oldal, elég az állomány nevét megadni, különben a HTML oldal katalógusához képest számítva, relatív úttal együtt adjuk meg.
Az img elem további két opcionális attribútuma a width, illetve height, melyeket a kép átméretezésére használhatunk. Vigyázzunk arra, hogy az átméretezéssel ne torzuljon a kép, másrészt pedig a méretreszabást legtöbbször nem célszerű a böngészőre hagyni. Pl. amikor hatalmas méretű képeket kell lehívnunk a szerver gépről, melyeket majd a böngésző alaposan lekicsinyít a megadott méretre, egyrészt feleslegesen lesz terhelve a hálózati forgalom, másrészt az oldal betöltődése lassú lesz. Ehelyett célszerűbb a megjelenítésre szánt képet valamilyen képszerkesztő segítségével megfelelőképpen méretezni, és ezt az eleve kisebb méretű képet tárolni a szerveren.
Elterjedt kép-formátumok:
- GIF (Graphic Interchange Format)
- 8-bites színkészlet (256 különböző szín)
- a kép lehet átlátszó is - JPEG (Joint Photographic Experts Group)
- 24-bites színkészlet (16 millió különböző szín)
- a kép nem lehet átlátszó
- Mindkét formátum használ tömörítést, de a JPEG jobban tömörít - PNG (Portable Network Graphics)
- újabb az előzőeknél
- a gif illetve jpeg formátumok előnyeit ötvözi
- az állományok mérete nagyobb, mint egy ugyanazt a képet tároló jpeg-é, viszont veszteségmentes a tömörítés
Pl. Ez itt egy „finom” billentyűzet, az alábbi kód segítségével beillesztve:
