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.

< = &lt;
(less than)

> = &gt;
(greater than)

= &nbsp;
(noble space)

¢ = &cent;
(cent-jel)

£ = &pound;
(font-jel)

¥ = &yen; (yen-jel)

& = &amp;
(angol és-jel)

© = &copy; (copyright)

® = &reg; (registered)

ä = &auml; (ümlautos a)

µ = &micro;
(micro jel)

€ = &euro;
(Euro jel)

± = &plusmn;
(plus-minus)

β = &Beta;
(görög béta)

∞ = &infin;
(végtelen)

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&eacute;ter angolul</b></td>
<td><b>Magyarul</b></td>
<td><b>Lehets&eacute;ges &eacute;rt&eacute;kek</b></td>
</tr>
<tr>
<td>ALIGN</td>
<td>igaz&iacute;t&aacute;s</td>
<td>left/right/center</td>
</tr>
<tr>
<td>BORDER</td>
<td>keretvastags&aacute;g</td>
<td>0, 1, 2, 3, ...</td>
</tr>
<tr>
<td>COLS</td>
<td>oszlopok sz&aacute;ma</td>
<td>1, 2, 3, 4, ...</td>
</tr>
<tr>
<td>BACKGROUND</td>
<td>h&aacute;tt&eacute;rsz&iacute;n</td>
<td>sz&iacute;n neve vagy k&oacute;dja, esetleg k&eacute;p URL-je</td>
</tr>
<tr>
<td>BORDERCOLOR</td>
<td>keretsz&iacute;n</td>
<td>sz&iacute;n neve vagy k&oacute;dja</td>
</tr>
<tr>
<td>WIDTH</td>
<td>t&aacute;bl&aacute;zat sz&eacute;less&eacute;ge</td>
<td>pixelsz&aacute;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.:

Videó beszúrása

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.

Videó beszúrása autoplay

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


Folytatása következik!