Tamás Ferenc: Weblapkészítés HTML alapokon – 3. rész
6. fejezet: Ékezetek
Némi kiegészítés az eredeti verzióhoz: amikor a könyv eredetijét írtam, akkor ez a fejezet még kiemelt fontosságú volt. Azóta ez jócskán csökkent, ugyanis a kódlapok (később lesz szó róluk) olyan mértékben elterjedtek, hogy gyakorlatilag megkerülhetetlenek. Óriási előnyük: immáron már nem kell szenvedni az egyes ékezetes karakterek kódjaival. Így ezt a fejezetet inkább csak, mint érdekességet ajánlom!
Az ékezetek nem mindig és könnyedén használhatóak a HTML-nyelvben. Eleve a dolog azért problémás, mert rengeteg nemzeti nyelv van a világon, viszont az internet alapvető nyelve a meglehetősen kicsi karakterkészlettel rendelkező angol. Az egyik lehetséges megoldás az, hogy mindenki csak a saját nemzeti nyelvén készült honlapokat láthatja. Nyilvánvaló, hogy ez mereven ellentmond a web nemzetköziségének. Ráadásul eleve lehetetlenné teszi a nyelvtanulást.
Másik verzió, hogy eleve minden nemzeti nyelv összes karakterét beépítjük a böngészők összes verziójába, de ezzel a képírásos keleti nyelvek (kínai, japán, koreai, stb.) hatalmas mennyiségű jelkészlete miatt a méret drasztikus növekedését érjük el. Lehetséges középút, hogy minden alapvető (angol) karakternek van egy egyszerű (1 byte-os) kódja (aki ismeri: ez az ASCII kód). Gyakorlatilag ez a repülő ékezetes írásmód "e’kezet ne'lku:li i'ra'smo'd ke’so:bb kirakott e’kezetekkel".
Az ékezetes betűk viszonylag egyszerűek, mivel az alapvető (angol) karakter köré az &xacute; kombináció kell írni, ahol az "x" az adott karaktert jelöli. De itt van egy táblázat is - a jobb érthetőség kedvéért!
Á = Á |
É = É |
Í = Í |
Ó = Ó |
Ú = Ú |
á = á |
é = é |
í = í |
ó = ó |
ú = ú |
Mint a fentiekből is látható itt kivételesen FONTOS a kisbetű-nagybetű különbsége!
Ha rövid dupla ékezet kell, akkor a &xuml; kombinációt kell alkalmazni, míg az ő karakterhez a õ kombináció kell vagy az ű-höz az û.
Ö = Ö |
Ü = Ü |
Õ = Õ |
Û = Û |
ö = ö |
ü = ü |
õ = õ |
û = û |
A legjobb jóindulat ellenére is előfordulhat, hogy nem minden karakter jelenik meg pontosan, mivel egyes Windows betűkészletekben nem feltétlenül találhatók meg (az USÁ-ból nézve) igencsak egzotikus magyar ékezetes karakterek. Természetesen vannak még speciális karakterek, például a "<" és a ">" jeleket helyettesítő kódok is.
< = < |
> = > |
= |
¢ = ¢ |
£ = £ |
¥ = ¥ (yen-jel) |
& = & |
© = © (copyright) |
® = ® (registered) |
ä = ä (ümlautos a) |
µ = µ |
€ = € |
± = ± |
β = Β |
∞ = ∞ |
Ha valakinek eddig gondjai támadtak az ékezetes karakterekkel, akkor remélem, hogy ez a pár mondat megoldja!
12. feladat: Írja le a következő ékes magyar kifejezéseket - HTML kóddal: hosszúszárú cipőfűző, illetve árvíztűrő tükörfúrógép.
Még egy apró megjegyzés, ami később nyer fontosságot. Az előző módszerrel gyakorlatilag bármelyik nyelv karakterét le tudjuk írni, ha az bele van építve a HTML-szabványba. Ha nincsen, akkor a <HTML> tag után közvetlenül be kell gépelnünk a következő részletet - PONTOSAN! (htmlpelda18.html) Magyarázat: ez az egyik magyar nyelvű betűkészletet jelöli, így a gépelés közben nem kell figyelnünk az ékezetes karakterekre.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</head>
Megjegyzés: részletes karakterlista található a mellékletben ITT: https://www.w3schools.com/html/html_symbols.asp
Eme segítséggel már nyugodtan gépelhetünk, mint az a fenti mintából is látható! A pontos jelentésről majd (sokkal) később, mivel most fontosabb az alapok folytatása…
7. fejezet: Táblázatok
Nos, elértük a HTML nyelv egyik legjobban megjeleníthető objektumát: a táblázatokat. Maga a táblázat tagje igen egyszerű: <TABLE> és </TABLE>. Ezen belül viszont sok minden lehet. Minden egyes sort <TR> és </TR> közé kell zárni (TR = table row = táblázat sora), míg minden egyes cella tartalmát <TD> és </TD> közé (TD = table data = táblázat adata). Ha semmi különös bonyolítást nem szeretnénk, akkor már el is készíthetjük az első táblázatot! (htmlpelda18.html)
<HTML> <table> <tr> <td>1. sor 1. cella</td> <td>1. sor 2. cella</td> </tr> <tr> <td>2. sor 1. cella</td> <td>2. sor 2. cella</td> </tr> <tr> <td>3. sor 1. cella</td> <td>3. sor 2. cella</td> </tr> </table> </HTML> |
És az eredménye:
|
Azért ez még túl egyszerű, így persze lehet (és kell is) bonyolítani.
- A legegyszerűbb a táblázat igazítása: <TABLE ALIGN="left"> Ez az alapeset. </TABLE> Persze lehet középre (center), illetve jobbra (right) is igazítani.
- A második lehetőség a keret vastagsága. <TABLE BORDER=0> Ez az alapeset. </TABLE> A vastagság képpontokban mérendő és egész szám lehet. Szokásos érték: 1 és 5 között.
- A harmadik lehetőség látszólag felesleges, mivel érdemes az oszlopokat megszámolni és ezt a táblázat fejlécébe beírni. <TABLE COLS=3> 3 oszlop lesz!</TABLE>
- Negyedszerre érdemes figyelembe venni, hogy a táblázatot lehet (és érdemes is) színezni. <TABLE BGCOLOR="red"> Ez a hagyományos színekkel vagy kódokkal történik </TABLE>.
- Lehet egy kép is a háttér. Lásd: <IMG SRC="képurl">
- Persze nem csak a táblázat hátterét, de a kereteket is lehet színezni! <TABLE BORDERCOLOR="yellow"> Így zöld lesz a keret színe. </TABLE>. Megjegyzés: Saját tapasztalat, hogy a színekkel mértékkel kell bánni!
- Az egyes cellákat nem kell összezsúfolnunk, mivel a cellákat ki lehet bélelni. <TABLE CELLPADDING=2>. Ez a cellahatár és az adat távolságát mutatja meg. Alapeset a 0.
- Persze az egyes cellákat sem kell mindig összezsúfolni, így a CELLSPACING használatával nagyobb lehet a cellahatárok közti távolság. Alapeset: 0.
- Az egyik legfontosabb lehetőség maradt a legvégére: a táblázatnak nem kell kitöltenie az ablak egészét, hanem a <TABLE WIDTH="50%"> paraméter segítségével megadható, hogy hány százalékot töltsön ki. </TABLE> Ha csak simán egy szám szerepel a WIDTH után, akkor százalék helyett képpont lesz az értelmezés.
Néhány fontosabb paraméter jöjjön a jobb áttekinthetőség kedvéért egy táblázatban:
Paraméter angolul |
Paraméter magyarul |
Lehetséges értékek |
align |
igazítás |
left/right/center |
border |
keret vastagsága |
képpont vagy egyéb távolságegység |
cols |
oszlopok száma |
1, 2, 3, … |
bgcolor |
háttérszín |
valamilyen szín vagy RGB-kód |
bordercolor |
keret színe |
valamilyen szín vagy RGB-kód |
cellpadding |
cellán belüli távolság a kerettől |
0, 1, 2, 3, … |
cellspacing |
cellák közti távolság |
képpont vagy egyéb távolságegység |
width |
szélesség |
képpont, % vagy egyéb távolságegység |
A fenti paraméterek persze kombinálhatóak! A következő táblázat például jobbra igazítva, 2-es keretvastagsággal, 2 oszloppal szürke háttérszínnel és piros keretekkel készült a böngészőablak 60%-ára. A cellák bélése 2, akárcsak a cellák közti távolság is. (htmlpelda19.html)
<html>
<table ALIGN=RIGHT BORDER=2 CELLSPACING=2 CELLPADDING=2
COLS=3 WIDTH="60%" BGCOLOR="#FFFF00" BORDERCOLOR="red">
<tr>
<td><b>Paraméter angolul</b></td>
<td><b>Magyarul</b></td>
<td><b>Lehetséges értékek</b></td>
</tr>
<tr>
<td>ALIGN</td>
<td>igazítás</td>
<td>left/right/center</td>
</tr>
<tr>
<td>BORDER</td>
<td>keretvastagság</td>
<td>0, 1, 2, 3, ...</td>
</tr>
<tr>
<td>COLS</td>
<td>oszlopok száma</td>
<td>1, 2, 3, 4, ...</td>
</tr>
<tr>
<td>BACKGROUND</td>
<td>háttérszín</td>
<td>szín neve vagy kódja, esetleg kép URL-je</td>
</tr>
<tr>
<td>BORDERCOLOR</td>
<td>keretszín</td>
<td>szín neve vagy kódja</td>
</tr>
<tr>
<td>WIDTH</td>
<td>táblázat szélessége</td>
<td>pixelszám vagy %</td>
</tr>
</table>
</html>
13. feladat: Készítsen a legnépszerűbb magyar hírportálokról egy táblázatot, benne a portálok nevével és URL-címével.
További lehetőségek
• Egy táblázatnak címet is adhatunk. Ezt a <TABLE> szimbólum után kell írni a következő minta szerint: (htmlpelda20.html) Szabályozható, hogy hová kerüljön a cím <CAPTION ALIGN="TOP"> felülre kerül - alapértelmezés. </CAPTION>. További lehetőségek: bottom = alulra és középre, center = középre, left = balra, right = jobbra.
<HTML> <table border="2"> <caption> Ez a cím </caption> <tr><td> Ez a táblázat eleme</td></tr> </table> </HTML> |
|
• Függőleges helyzetet szabályozhatjuk a VALIGN paraméterrel. Minta: <CAPTION VALIGN="TOP"> - Alapértelmezés = A táblázat címe a táblázat fölé kerül. Másik lehetséges érték: BOTTOM = a cím alulra kerül.
• A két paraméter persze együtt is használható!
• Szükség esetén egyes cellákat összevonhatunk. A vízszintes irányban az oszlopokat vonjuk össze, tehát a kívánt paraméter: COLSPAN=szám, míg függőleges irányban a sorokat vonjuk össze, így a ROWSPAN=szám szükséges. A két összevonás persze kombinálható is!
14. feladat: Készítsen egy tetszőleges tartalmú 5x5-ös táblázatot, melyben az egyes sorok színe legyen eltérő!
15. feladat: Az előző táblázatban vonjon össze három sort, majd három oszlopot!
• Minden egyes cella tartalmát darabonként is igazíthatjuk <TD ALIGN="LEFT"> Balra rendez - alapértelmezés </TD> Lehet középre (center) vagy jobbra (right) is rendezni.
• Persze egyenként is lehetőségünk van a cellák szélességének állítására is az egész táblázat szélességére alkalmazott WIDTH paraméterrel.
• Minden egyes cellához lehet rendelni egy címet is, mely akkor jelenik meg, ha az illető cella fölé kerül az egér. <TD TITLE="cím"> elem tartalma </TD>.
• Hosszú szövegeknél előfordulhat, hogy egy sornál több is lehet 1-1 cella tartalma. Ilyenkor jól jöhet a <TD VALIGN="CENTER"> paraméter </TD>, ahol valign = vertical align = függőleges rendezés. Lehetséges értékek: center = közép; top = fent; bottom = alul; baseline = a betűk szintjének aljához igazítja az objektumot.
• Ennek némileg ellentmond, hogy ha semmiképpen sem akarjuk, hogy egy cellában a szöveget megtörje, akkor használhatjuk a NOWRAP=TRUE paramétert a TD tag-ben. Ekkor a cellatartalom nem kerül törésre. Alapértelmezés: NOWRAP=FALSE.
(azaz a cellatartalom törhető.)
• Cellánként is lehetőség nyílik háttérszín (BGCOLOR), illetve háttérgrafika (BACKGROUND) definiálására, azért csak óvatosan a díszekkel!
• Külön lehetőségünk van <TH> táblázat fejlécének - table heat </TH> és <TFOOT> táblázat láblécének - table foot </TFOOT> definiálására is.
• Értelemszerűen létezik a táblázatnak a törzse is. Ez a <TBODY> és a </TBODY> közé kerülhet.
• Ezek után már bátran neki lehet állni táblázatok formázásának és kitöltésének!
Megjegyzés: a sima táblázatokat nem feltétlenül könnyű natúr HTML-ben megírni, de sokan azt csinálják, hogy a táblázat alapját megcsinálják WYSIWYG-szerkesztőben, majd az apróságokat utána állítgatják. (Magyarázat: WYSIWYG = What You See Is What You Get = Amit látsz, azt kapod.)
A másik módszer kicsit macerásabb, de nálam bejött: először a táblázat fő paramétereit csinálom meg (sorok és oszlopok száma, szélessége), majd utána az egyes cellák tartalmát; végül az apróbb finomításokat.
8. fejezet: Kép beszúrása
Valamirevaló weblap semmit sem ér képek és látványosabbnál látványosabb animációk, esetleg videók nélkül. A kép beszúrása is ugyanolyan egyszerű, mint az eddigi legtöbb parancs: <IMG SRC="képnév.kit">, ahol IMG = image = kép/látvány; SRC = source = forrás. Záróelem nincs, akárcsak a <BR> tagnél. Ha a forrásfájl azonos könyvtárban van a weblappal, akkor simán be lehet írni a file nevét. Ha az adott weblap környezetéből kell vennünk egy forrásfájlt, akkor a jól ismert DOS-struktúra szerint utalhatunk rá; ellenben ha teljes hivatkozás kell URL-lel, akkor a hiperhivatkozásoknál megismert módszert kell alkalmaznunk.
Fontos, hogy ha jól működő weblapot szeretnénk feltölteni, akkor soha ne használjunk abszolút URL-t (pl.: ami a helyi merevlemezről szedi a forrást), hanem kizárólag relatívot (pl.: \kepek\hatter.jpg) Mivel a weblapok egy nagy részét Linux-szervereken tárolják és ott gond lehet a fájlnevekkel, ezért kerülni kell a magyar ékezetek és az üres helyek használatát a fájlnevekben.
A jelenleg támogatott fájlkiterjesztések (ezek változhatnak!):
.jpg, .jpeg — Joint Photographic Experts Group (JPEG)
.gif — Graphics Interchange Format (GIF)
.bmp — Windows Bitmap (BMP)
.png — Portable Network Graphics (PNG)
A fontosabb paraméterek kép beszúrása esetén:
- ALT = helyettesítő szöveg (amit a böngésző a kép előtt betölt)
- ALIGN = top/middle/bottom/left/right : rendezés a szöveg tetejére/közepére/aljára/balra/jobbra
- BORDER = szám : kép kerete képpontban (HTML5 nem támogatja)
- HEIGHT = szám: a kép magassága képpontban.
- WIDTH = szám: a kép szélessége képpontban.
Megjegyzés: érdemes megadni a beszúrt kép méreteit, mivel így a böngésző kihagyja a kép helyét még a lassan betöltő honlapokon is.
- HSPACE = szám: a kép bal és jobb oldalán hagyott üres hely képpontban. (HTML5 nem támogatja)
- VSPACE = szám: a kép alsó és felső részén hagyott üres hely képpontban. (HTML5 nem támogatja)
- SRC = source (forrás): a kép forrása relatív vagy abszolút módon.
Íme egy egyszerű példa (htmlpelda21.html):
<HTML>
<img src="http://tferi.hu/cikkek/htmlpelda1.jpg" width="718" height="190" alt="helyette" align="absmiddle" border="2">
</HTML>
Megjegyzés: sokszor érdemes a képeket letölteni, majd átméretezni egy kisebb, de gyorsabban letöltődő verzióba. Erre kiválóan lehet alkalmazni pl. az IrfanView nevű programot.
Gyakori az a megoldás is, hogy magára a weblapra egy kis méretű képet rakunk fel, de kattintásra előjön a teljes méretű kép.
16. feladat: Keressen három fényképet az interneten az Ön által szeretett zenészekről és szúrja be egy weblapra!
17. feladat: Keressen 12 fényképet az Ön által kedvelt városról, töltse le, majd méretezze át valamennyit és rendezze egy táblázatba!
9. fejezet: Videó beszúrása
A legegyszerűbb egy Youtube-videót beágyazni, mivel itt pár kattintással megkaphatjuk a beágyazási kódot, pl.:
Megjegyzés: ez a módszer HTML4-ben és 5-ben is működik.
Megjegyzés! A fenti űrlapot a Google Chrome biztonsági beállításai miatt kénytelen voltam képpé alakítani, így nem lehet HTML-formátumban letölteni!
Ha a fenti videót szeretnénk automatikusan lejátszhatóra állítani, akkor az URL-hez hozzá kell tenni a következőt: "?autoplay=1"
Így a következő verzió a lap betöltésekor automatikusan elindul.
Megjegyzés! A fenti űrlapot a Google Chrome biztonsági beállításai miatt kénytelen voltam képpé alakítani, így nem lehet HTML-formátumban letölteni!
Öt paraméter látható is szerepel, melyek a következők:
- height - magasság képpontban
- width - szélesség képpontban
- scr - forrásfájl megadása (relatív vagy abszolút útvonallal)
- frameborder - keret vastagsága képpontban
- allowfullscreen - teljes képernyős lejátszás engedélyezése
Beépített Flash-animációs (csak HTML5-ben engedélyezett):
<embed src="http://www.tferi.hu//cikkek/bohr.swf">
Fontosabb paraméterek:
- height - magasság képpontban
- width - szélesség képpontban
- scr - forrásfájl megadása (relatív vagy abszolút útvonallal)
- type - forrásfájl típusa
Megjegyzés: a fenti animáció a Bohr-fájl atommodell energiáiról készült Corel Rave programmal.
Másik lehetőség szintén HTML5-ben:
<video width="640" height="360" controls>
<source src="/PaulPotts1st.mp4" type="video/mp4">
A böngésző nem támogatja a video taget.
</video>
Fontosabb támogatott típusok:
- MP4 - video/mp4
- WebM - video/webm
- OGG - video/ogg
Érdekesség, hogy a videóhoz lehet felirat is, pl.:
track src="/subtitles_en.vtt" kind="subtitles" srclang="en" label="English"
persze megfelelő HTML-tagjelekbe zárva.
További fontos paraméterek:
- autoplay (érték nélkül) - automatikus elindulás.
- loop (érték nélkül) - folyamatos lejátszás.
- muted (érték nélkül) - hang nélküli lejátszás.
- poster="URL" - a videó betöltése alőtt milyen képet rak ki a megfelelő ablakba.
- preload="none/auto/metadata" - milyen előtöltést végez? Nagy méretű fájloknál érdemes használni. (none=semmit; auto=automatikus; metadata=csak a metadata adatokat)
Hang lejátszása esetén a példa kicsit átalakul:
<audio controls>
<source src="/Ilyenek_Voltunk.mp3" type="audio/mp3">
A böngésző nem támogatja az audio taget.
</audio>
A fontosabb paraméterek hasonlóak a videó paramétereihez!
Fontos megjegyzés: a mintaként hozott videók, illetve hangfájlok helyének megadására minden esetben vigyázni kell, ahogy a megfelelő szerzői jogokra is!
Felhasznált szakirodalom:
https://www.w3schools.com/tags/default.asp