A HTML oldal <BODY> és</BODY> közötti része további tag-ekbõl, valamint folyamatos szövegbõl áll. Ennél az a probléma merül fel, hogy a < és a > jeleket a tag-ek jelölésére, illetve az idézõjelet az attributumok értékeinek megadásánál használjuk, igy a megjelenítendõ szövegben ezek a jelek valójában nem fordulhatnak elõ, tehát valamilyen más módon kell a böngészõ értésére adni, hogy mégsem tagrõl van szó. Ezen félreértések elkerülésének az érdekében a HTML-ben létrehoztak egy egységes jelölésrendszert, ahol a speciális jelek helyett különféle szimbólumokat használnak. A szimbólumokat az alábbi két, egyébként teljesen egyenértékû formában adhatjuk meg:
&a_szimbólum_rövidítése; &#kódszám;
Ezekrõl a HTML-ben használatos szimbólumokról az alábbi táblázat ad némi felvilágosítást. A táblázat nagyobbik részét azok a különleges karakterek képezik, amelyek az ISO-8859-1 kódolásban a 128-as pozíciótól szerepelnek. [1] A különleges karakterek jelölésének ez a módja a HTML szabvány egyik igen fontos részét képezi. HTML 4.0-ban már nem 8, hanem 16 biten történik a karakterek kódolása, így mintegy 65000 jel megjelenítésére, kódolására van lehetõség.
Például: И a ciril "I"-t jelenti И
Ennek a kódolástípusnak az elsõ 256 karaktere, azaz �-tól ÿ-ig az ISO-8859-1 jeleinek felel meg, az e feletti kódokkal pedig egyértelmûen definiálni tudjuk az összes nemzetközi jelet.
A HTML-ben dokumentumaink szövegét logikailag vagy közvetlenül formázhatjuk meg. A közvetlen formázásnál mi írjuk elõ, hogy a megjelenítendõ szöveg, hogyan nézzen ki (pl.: kövér betû, dõlt betû), a logikai formázásnál pedig a felhasználó böngészõje végzi el teljes egészében az oldal formázását. A formai megjelenést közvetlenül befolyásolni körülbelül nyolc-tíz féle képen lehetséges. Az elsõ a már fent említett kövér betûtípus használata, erre a <b>...<b/> tag párost használjuk. Az <i>...</i> tag-ekkel a közbezárt szövegrészt dõlt betûkkel jelenítjük meg. A harmadik, közvetlen formázásra alkalmas tag a <tt>...</tt> páros, ami a teletype vagy az írógép betûtípust jelenti.
Az így elkészült, szépen megformázott oldalunk azonban még nem biztos, hogy a felhasználó böngészõjében is úgy jelenik majd meg, ahogy mi szeretnénk, mert bizonyos böngészõk kizárhatnak egyes megjelenítési formátumokat pl.: a lynx a kövér betûtípust aláhúzva jeleníti meg, mert a karakteres képernyõ lehetõségei igen korlátozottak. vagy egyszerûen csak az éppen használt böngészõ konfigurációja más beállításokat nem definiál, illetve a felhasználóknak már megvan az a lehetõsége, hogy stíluslapok segítségével gyakorlatilag az összes elõre definiált formázást felülbírálja, megjelenítési paramétert megváltoztassa.
Az <u>...</u> tag-ek közé ékelt szövegrész aláhúzva jelenik meg. Ezzel a lehetõséggel csínyján kell bánni, mert az oldalon a linkeket is aláhúzás jelöli, így a linkek és a szöveg színét úgy kell beállítani, hogy azokat ne lehessen összekeverni. A <strike>...</strike> hatására áthúzott szöveg jelenik meg. Megváltoztathatjuk a betûk méretét úgy, hogy az alapértelmezetthez képest növelni a <big>...</big> tag-gel, csökkenteni a <small>...</small> tag-gel lehetséges. Elhelyezhetünk még szöveget alsó <sub>...</sub> és felsõ <sup>...</sup> indexként. A különbözõ betûtípusokat kombinálni is lehet egymással a kívánt eredmény elérése érdekében, a felhasználhatóságnak csak a fantázia szab határt. Kerüljük a tag-ek keresztezését, még akkor is,ha nem okoznának gondot, de a nem kívánt hatások elkerülése érdekében igyekezzünk az egymásba ágyazásokat pontosan elvégezni. pl.: <b>Hello, te<i> ló!</b></i> megoldás kerülendõ.
Lehetõség van egyes oldalak, bekezdések betûméretének megadására is a <font size=méret>...</font> tag és hét méret (1-7) segítségével. Az alapértelmezett méret (ha az oldalon nem definiálunk más alapméretet a <BASEFONT SIZE="méret" tag-gel) a 3-as. Ha módosítani akarjuk egy szövegrész betûméretét, megtehetjük az éppen aktuális mérethez viszonyítva is.
Pl.: <FONT SIZE="+2">Kettõvel nagyobb</FONT>
<FONT SIZE="-1">Egyel kisebb</FONT>
Vagy pedig a <BIG>...</BIG> és a <SMALL>...</SMALL> tag-ekkel érhetünk el hasonló eredményt. Hatásukra a közbezárt szövegy egy mérettel nagyobb, illetve kisebb lesz.
Mindezeken felül, hogy még mutatósabbá, illetve még kiszámíthatatlanabb megjelenésûvé tegyünk egy HTML oldalt a <FONT FACE="betûtípus">...</FONT> jelölésekkel megadhatunk a megjelenítõnek általunk javasolt betûtípusokat. Paraméternek több betûtípust is megadhatunk vesszõkkel elválasztva egymástól. Ilyenkor mindig az elsõnek megadott betûtíputssal kezdi a böngészõ a szöveg megjelenítését, ha az telepítve van. Ennek kizárólag annyi hátránya van, hogy vannak betûtípus nevek, amiket szerzõi jogok védenek és például más néven megtalálható ugyanaz a típus, illetve még az szab határt a lehetõségeinknek, hogy a felhasználó milyen telepített betûkészlettel rendelkezik. A FONT-nak létezik még egy paramétere, amivel kiírandó karakterek színét adhatjuk meg. Egy színt a neve, vagy a rá jellemzõ hexadecimális RGB kód ír le pontosan.
<FONT COLOR="00ff00">Ez bizony zöld!</FONT>
Logikai formázásnál a szövegrészekhez egy típust rendelünk, és ettõl kezdve kizárólag a megjelenítõn múlik, hogyan jelenik meg benne az így közrezárt szöveg.
Idézeteket jelölhetünk a <CITE>...</CITE>, a <Q>...</Q> és a <BLOCKQUOTE>...</BLOCKQUOTE> tag-ekkel. A különbség csupán annyi közöttük, hogy a <Q>-t rövid, egysoros idézetekhez használjuk, míg a többit célszerûbb hosszabb szövegekhez használni. A <BLOCKQUOTE> és a <Q> tag-nek van egy új paramétere, a CITE="URL". Ezzel a paraméterrel az idézet eredetijét tartalmazó oldal címét adhatjuk meg.
A <CODE>...</CODE> tag-gel programok forráskódját vagy annak részleteit jelöljük. A <VAR>...</VAR> programváltozót, a <KBD>...</KBD> billentyûzetrõl várt szöveget és a <SAMP>...</SAMP> valamilyen programkimenetet jelöl.
Kiemelésre alkalmazható az <EM>...</EM> tag valamint a <STRONG>...</STRONG> is. Az elõzõ általában dõltbetûs szöveget, míg a másik vastagabetûs szöveget eredményez.
A HTML dokumentumok nemzetközibbé tétele érdekében mód van különféle metainformációk segítségével annak a jelölésére, hogy az milyen nyelven illetve milyen irányban íródott. Különféle nyelvterületekhez különbözõ nyelvû dokumentumokat készíthetünk. A metainformációk általában a dokumentum tartalmára vonatkoznak és segítenek a keresõknek az oldal hatékony megtalálásában. Amikor több nyelvfüggõ informació létezik egy oldalról, akkor a keresõk a LANG paraméter alapján kinálják fel a megfelelõt a felhasználónak. Például:
<-- Amerikai angolt beszélõknek -->
<META name="keywords" lang="en-us"
content="vacation, Greece, sunshine">
<-- Britt angolt beszélõknek -->
<META name="keywords" lang="en"
content="holiday, Greece, sunshine">
<-- Franciául beszélõknek -->
<META name="keywords" lang="fr"
content="vacances, Grèce, soleil">
<-- Magyarul beszélõknek -->
<META name="keywords" lang="hu"
content="nyaralás, Görögország,
napsütés">
A LANG paraméter szinte bármelyik elemhez kapcsolható, segítségével meghatározhatjuk az adott elemen belül elhelyezett információ nyelvét. Ezt kétbetûs betûkódokkal [1] tehetjuk meg:
Magyar: hu
Cseh: cs
Német: deMindezeken túl a megjelenítendõ szöveg kiíratásának az irányát is meghatározhatjuk a DIR paraméterrel. Ez két lehetséges értéket vehet fel: LTR-balról jobbra és RTL-jobbról balra. Az alábbi rövid példában egy héber idézetet jelenítünk meg:
<HTML lang="hu"> <BODY> ...Magyar nyelvû szöveg... <Q lang="he" dir="rtl">...Héber nyelvû szöveg...</Q> ...Magyar nyelvû szöveg... </BODY> </HTML>
Az Internet és a Web óriási sikerét és népszerûségét az oldalakon elhelyezhetõ grafikák és egyéb grafikai objektumok magyarázzák. A HTML oldalon kisebb trükkökkel, illetve trükkök nélkül is szinte bárhová, bármilyen formában építhetünk kisebb-nagyobb képeket, grafikákat, animált grafikákat. Ezeket a képeket nem csak passzív elemekként használhatjuk, hanem aktivizálhatjuk is azokat, vagy az egész képet vagy csak egyes részeit. Ez az aktivizálás azt jelenti, hogy linkeknek lehetnek a kiindulási pontjai.
A képek elhelyezése az <IMG> tag-gel és néhány paraméter megadásával történik. Ez minimálisan az <IMG SRC="Kép, animáció elérési útja és neve"> formában adható meg. A böngészõprogram betölti az SRC-ben megadott fájlt és megjeleníti egy ablakban, de csak abban az esetben, ha a grafika maga a dokumentum és a böngészõ ismeri annak formátumát. Máskülönben egy külsõ programot hív meg a grafika megjelenítésére, ha a böngészõ megfelelõen van konfigurálva. Napjainkban alapvetõen háromféle képformátumot támogatnak a böngészõk, ezek közül az egyik fiatalsága miatt még nem nagyon elterjedt. Ez a Portable Network Graphics röviden PNG. A PNG-t a W3 konzorcium fejlesztette ki és sokan a jövõ formátumának tartják, bár ma még csak kevés böngészõprogram ismeri. A PNG típus fejlesztésekor igyekeztek a JPEG és a GIF formátumok jó tulajdonságait egybegyúrni. A PNG a GIF-fel szemben 24 bit színmélységû képek tárolására is kiválóan alkalmas. Többféle tömörítési algoritmus áll rendelkezésre, de ezek ellentétben a JPEG-gel , nincsenek negatív hatással a kép minõségére. A másik kettõ formátum viszont nagyon elterjedt és minden böngészõ ismeri õket: GIF (Graphical Interchange Format) és a JPEG. A GIF formátum egyik fajtája különösen jól használható weblapok készítésekor. Ezt transzparens GIF-nek hívják. Ennek a típusnak az a lényege, hogy a képben megtalálható színek egyikét átlátszónak kell definiálnunk, így amikor egy böngészõ megjeleníti azt, az átlátszónak definiált szín helyén az oldal háttérszíne lesz látható. Ezzel a technikával elõállított és felhasznált grafikák szinte szerves részeivé válnak az oldalnak. Ezen kívül a GIF formátum lehetõvé teszi, hogy egyetlen fájlban több képet is eltároljunk, így azok egymás utáni lejátszásával egyszerû animációt kapunk. A GIF formátumban azonban nem csak a képek tárolhatók el, hanem az úgynevezett kontroll blokkok is, amelyekkel az animáció lejátszását lehet szabályozni. Animált GIF-eknél minden egyes képre beállíthatók a következõ paraméterek:
A kép transzparens színe. Az animáció képei átlátszó GIF-ek is lehetnek.
Késleltetés két képváltás között (duration, delay).
Esetleges helyettesítõ képkocka
Beállítható az is, hogy mit csináljon a böngészõ, ha lejárt az animáció:
leave: az utolsó képkocka változatlanul marad.
restore previous: az utolsó képkocka az azt megelõzõ képkockára cserélõdik ki.
restore background: az eredeti oldalháttér kerül megjelenítésre.
Képeink paraméterezésénél illendõ gondolni azokra a felhasználókra is, akik karakteres böngészõprogramot (LYNX) használnak. Nekik nagy segíség lehet, ha tudják, hogy valójában mivel kapcsolatos a kép és nem csak az "IMAGE" feliratot látják a kép helyén. Erre az ALT paraméter nyújt tökéletes megoldást. Az ALT mögött megadott szöveg helyettesíti a képet a fent említett böngészõkben, illetve azokban a programokban, ahol ki lehet kapcsolni és ki is van kapcsolva a képek letöltése.
A grafikák függõleges igazítását az ALIGN attributum értékeivel állíhatjuk be. A TOP a sor felsõ széléhez, a MIDDLE középre, a BOTTOM pedig a sor alsó széléhez igazítja a grafikát. A függõleges igazításon túl a LEFT és RIGHT értékkel az ábrát az oldal bal illetve jobb széléhez igazíthatjuk, így azonban a grafika nem a sorban helyezkedik el, hanem a sor szélén és a szöveg körbeveszi õt.
|
|
Az oldalon már megfelelõen elhelyezett grafikát be is keretezhetjük a BORDER attributum segítségével. A BORDER-nek pixelben, azaz képpontban adunk értéket. A BORDER=0 pedig eltünteti a keretet.
BORDER=1 |
BORDER=4 |
BORDER=0 |
A HTML dokumentum szerkesztésekor, "építésekor" megadhatjuk a beépítendõ grafikai elem befoglaló méreteit. Erre azért lehet szükség, mert így a böngészõ a grafikák elõzetes letöltése nélkül is tökéletesen meg tudja formázni az oldalt. A WIDTH (szélesség) és a HEIGHT (magasság) attributumokkal adhatjuk meg ezeket az értékeket. Érdemes úgy megválasztani a szélességet és magasságot, hogy az eredeti kép egész számú többszörösei legyenek, mert akkor a megjelenítendõ kép nem szenved torzulást a nagyításkor, illetve kicsinyítéskor. Az oldal letöltésének tempóján emelhet még a LOWSRC attributum azzal, hogy az egy az eredetinél kisebb méretû, kisebb felbontású grafikára mutat, ami jóval rövidebb idõ alatt töltõdik be.
A HTML oldalakon elhelyezett grafikai elemeket felhasználhatjuk linkjeink kiinduló pontjainak is, ezzel nagymértékû interaktivitás érhetõ el. Az ilyen módon kialakított képek az IMAGEMAP-ek. Az imagemap-eket az különbözteti meg az egyszerû képektõl, hogy ezek bizonyos részein kattintva más-más link által meghatározott helyre kerülünk. Ehhez meg kell adnunk az ISMAP attributumot, célként pedig egy szkriptet kell megadni az <A> tag HREF paraméterében. Ha ezek után rákattintunk a képre, akkor a böngészõ megállapítja az aktuális egérkoordinátákat a képen belül, és elküldi paraméterként az imagemap nevû szkriptnek. Erre válaszul azt az URL-t várja, amit az adott koordinátához hozzárendeltek. Ezt a hozzárendelést leíró adatokat map-adatoknak nevezzük. A map-adatok feldolgozásáért mindig egy, a szerverhez adott program a felelõs, és az adatok formátuma is szerverenként változik, nincs rá szabvány.
A fenti esetben a map-adatok feldolgozása a szerveren történik meg, mert ott futtatható az imagemap szkript. Ez tulajdonképpen egy körülményes megoldás, mert a böngészõ saját maga is kiválaszthatná a megfelelõ URL-t. Az ilyen megvalósítást nevezzük kliens oldali imagemap-feldolgozásnak. Ennek alapja a USEMAP attributum, amelyet az <IMG> tag-nél kell megadni. A szerver oldali imagmap-feldolgozásnál a map-adatok a szerveren vannak, míg a kliens oldali imagemap-feldolgozásnál ugyanezek az adatok a <MAP>...</MAP> tag-ek között helyezkednek el.
A <HR> tag-gel húzhatunk a legegyszerûbben vízszintes vonalat. Paraméterezhetjük a vonal szélességét a WIDTH attributummal, a vastagságát a SIZE attributummal. Ha úgy adjuk meg a vonal paramétereit, hogy az nem fut végig az egész oldalon, akkor az ALIGN-nal igazíthatjuk (LEFT, RIGHT és CENTER). A NOSHADE paraméter segítségével pedig megadhatjuk, hogy legyen árnyéka a vonalnak vagy sem.
A HTML-ben szükség van rá, hogy valamilyen úton jelezzük a böngészõnek, hogy melyik ponttól kezdõdik új sor. Ez a <BR> (break) tag-gel oldható meg. Erre azért van szükség, mert a HTML forrásszövegben szóközökkel és enterekkel elkövetett formázás nem befolyásolja a késõbbi megjelenést. A sortöréseket szabályozhatjuk még két, a Netscape által bevezetett tag-gel. Ez a <NOBR>...</NOBR> és a <WBR>. A <NOBR>...</NOBR> páros olyan szövegrészt fog közre, ahol a szövegben nem szerepelhet sortörés. Ennek viszont van egy apró hátránya, azaz ha megjelenítendõ szöveg túllóg a megjelenítõnek az ablakkeretein, akkor az oldal szerkesztõjének sajátkezûleg kell sortöréseket elhelyezni a szövegben a <BR> vagy a <WBR> tag-ek valamelyikének a használatával. A <WBR> (wish break) kizárólag csak azt jelzi, hogy ezen a ponton megtörhet a szöveg, de nem feltétlenül idéz elõ sortörést. Új bekezdés jelölésére a <P> (paragraph) tag szolgál. Hatására a mögötte álló szöveg új sorban egy kicsit lejjebb és a bekezdés elsõ sora egy kicsit beljebb kezdõdik. Lezáró </P> tag használata nem kötelezõ, mert egy új <P> egyértelmûen új bekezdést is jelöl. Mégis a jobb olvashatóság és félreértések elkerülése érdekében használjuk a </P>-t is. A bekezdéseken belüli szövegigazítást az ALIGN attributum végzi el. Az értékei lehetnek:
LEFT: balra igazítja a sorokat
CENTER: középre igazítja a sorokat
RIGHT: jobbra igazítja a sorokat
JUSTIFY: sorkizártra igazít
Ahogyan a <P>...</P> tag ALIGN attributumával bekezdéseket igazíthatunk, úgy a <DIV>...</DIV> tag segítségével egész dokumentumok igazítását végezhetjük el. Természetesen ez itt is az ALIGN megfelelõ értékûre állításával történik. Ez ugyanazokat az értékeket veheti fel, mint a bekezdéseknél. A szövegrészletek középre igazításához a <CENTER>...</CENTER> tag-et is használhatjuk. Ugyanazt a hatást érjük el vele, mint a <DIV ALIGN=CENTER>-rel. Elméletileg tabulátort is el lehet helyezni dokumentumainkban a <TAB> tag-gel, de ezzel az aprobléma, hogy egyedül a LYNX ismeri. Üres helyek létrehozása nem olyan egyszerû, hogy csak szóközöket hagyunk, mert a böngészõk nem veszik figyelembe a sok szóközt egymás után, így különféle trükkökhöz kell folyamodni. Az egyik ilyen megoldás a Netscape által bevezetett <SPACE> tag-gel és attributumainak megfelelõ beállításaival lehetséges.
TYPE: az üres terület típusát definiálja, ami lehet HORIZONTAL vízszintes magasság nélküli üres hely, VERTICAL szélesszég nélküli üres oszlop vagy BLOCK üres téglalap.
WIDTH: az üres téglalap szélességét adja meg.
HEIGHT: az üres téglalap magasságát adja meg.
SIZE: a vízszintes, illetve függõleges üres helyek méretét adja meg.
ALIGN: az üres téglalap pozícióját határozza meg ugyanolyan módon, mint az <IMG> tag-nél.
A böngészõben vízszintesen futó szöveg létrehozására a <MARQUEE>...</MARQUEE> tag-et használjuk. Ennek egyetlen szépséghibája, hogy kizárólag az Internet Explorer és a LYNX ismeri. Az utóbbi is csak animáció nélkül.