4. Az alapvető betűformázó elemek
Az előző fejezetben megtanultuk, hogyan néz ki egy szabályos HTML-dokumentum, megtanultuk a sortörést és azt, hogy miként kell beszúrni több szóközt is. Ennek köszönhetően tulajdonképpen már képesek vagyunk egy szöveget közlésképes formába hozni. Azonban nem tettünk semmi olyat, amit egy közönséges szövegformátumban .txt meg ne tudnánk tenni. Sőt, a közönséges szövegformátum egyszerűbb is, nincs szükség különféle elemekre, és ezáltal rövidebb is. Jegyezzük is meg: bizonyos esetekben célszerű egyszerű szövegformátumban publikálni az interneten. Természetesen ez nem a legesztétikusabb megoldás, és számos lehetőségről le kell mondanunk, mégis előfordulhatnak helyzetek, amikor ez a célszerűbb. A döntést a helyzet ismeretében nekünk kell meghoznunk.
A HTML-formátumban azonban lehetőségünk nyílik olyan dolgok meghatározására, amikre a közönséges szövegállományban nincs. Így például megadhatjuk, hogy mekkora legyen a betűk mérete, dőltek legyenek-e vagy vastagok (kurzívak vagy félkövérek), aláhúzhatjuk őket, alsó vagy felső indexbe írhatunk stb. Ezekről a lehetőségekről szól ez a fejezet.
A betűméret beállítása
Az oldalon alkalmazott betűméretet a <basefont> elemmel állíthatjuk be. Ezt értelemszerűen célszerű még a test első sorában megtenni (tehát az első megjelenő szöveg előtt!). A </basefont> záróelem a testet záró </body> elé kerüljön, A HTML-nek vannak olyan elemei, amelyeknek paramétereket kell vagy lehet megadni. A paraméterek neve után egyenlőségjel (=) után kell megadni a paraméter értékét. Az <basefont> elemben a size paraméter segítségével adhatjuk meg a betű méretét. A betű mérete egytől hétig változhat. Egy szabályos betűméret-meghatározás tehát így néz ki:
<basefont size=4>
Jegyezzük meg, hogy a paramétereknek mindig az elem <> határolóin belül kell lenniük! Vegyük elő korábbi példánkat, melyben adatainkat adtuk meg, és állítsuk a betűméretet hetesre! A nézzük meg a megoldást, és próbáljuk meg megváltoztatni a betűk méretét! Az eredményt mindig (lehetőleg több böngészővel) nézzük meg!
Láthatjuk, hogy a hetes betűméret a legnagyobb, az egyes a legkisebb. Az is feltűnhet, hogy az egyes böngészőkön nem ugyanakkorák a betűk: a betűméret ugyanis csupán relatív. Próbáljuk ki, mi történik, ha a <basefont> elemet nem az első sor elé írjuk! Láthatjuk, hogy a betűméret a dokumentum elején olyan, amilyen a <basefont> elem használata előtt volt. Ha a </basefont> elem után, de még a </body> előtt: itt is a korábbi betűméretet találjuk.
Ha Opera böngészőt használunk, láthatjuk, hogy nem reagál a <basefont> elemre. Ez azonban nem azért van, mert az Opera nem ismeri a <basefont> elemet, hanem azért, mert kissé másképp alkalmazza. Van ugyanis a <basefont> elemnek egy rokona, a <font>. Ez hasonlóan működik, mint a <basefont> próbáljuk ki!. Cseréljük le a <basefont> elemet <font>-ra! (Természetesen a </basefont> elemről se feledkezzünk meg!) Láthatjuk, hogy a hatás ugyanaz, mint az előzőekben, azzal a különbséggel, hogy az Operában is működik.
De mi értelme van ennek? Az, hogy a <font> elemben nem csak egytől hétig terjedő értéket adhatunk meg a size paraméter értékeként, hanem - és + előjellel ellátott számokat is. Ez azt jelenti, hogy viszonylagosan változtatják a betűméretet. Ha a <basefont>-ban ötös betűméretet adtunk meg, majd a <font>-ban mínusz kettőt, akkor a betűméret a </font> elemig három lesz (utána visszatér a korábbihoz, esetünkben az ötöshöz). Ha a <basefont> és <font> elemekben megadott értékek összege egynél kisebb vagy hétnél nagyobb lenne, a böngésző egynek, ill. hétnek értelmezi azt.
Miért jó ez nekünk? Képzeljük el, hogy elkészítünk egy hosszú oldalt, melyben a kevésbé lényeges bekezdéseket kisebb betűvel szeretnénk szedni. Ha mindegyik bekezdésnél megadjuk, hogy mekkora betűkkel szeretnénk szedni, majd rájövünk, hogy túl kis betűket állítottunk be, hosszú ideig tarthatna, míg minden betűméretet növelnénk eggyel. Mindez több hibalehetőséget rejtene magában, és gondoljunk bele, mi történne, ha mégis megondolnánk magunkat... A <basefont> használatával megkönnyítjük a dolgunk. Azokat a bekezdéseket, amelyeket kisebb betűvel szeretnénk szedni a <font size=-1>...</font> elemek közé helyezzük. Ha meg akarjuk változtatni a betűméretet, elég a <basefont> elemet megváltoztatni. Ezzel sok munkát és bosszúságot takarítunk meg.
A fentiek alapján megérthetjük az Opera viselkedését. Mivel a <basefont> a <font>
értékeihez ad alapot, az Opera csak ott veszi figyelembe, ahol <font> is van. Ahol nincs, ott az alapértelmezett betűméretet veszi figyelembe. Annak érdekében, hogy oldalunk minden böngészőben hasonlóan jelenjen meg, érdemes az Operához alkalmazkodnunk. Az alap betűméretet tehát már az első sorban adjuk meg (az utolsóban ne felejtsük el lezárni), és a lap minden pontja kerüljön valamilyen <font> elem hatása alá (természetesen ezek mindegyikét is zárjuk le!). Így dokumentumunk nem csak szabályos, de könnyen átlátható és javítható is lesz.
Kövérítés, kurziválás, aláhúzás, áthúzás
A HTML lehetővé teszi, hogy a szövegünkben bizonyos szavakat, szócsoportokat, mondatokat kiemeljünk. Ezt háromféleképpen tehetjük meg: kövérítéssel (vastagítással), dőlt betűkkel (kurzív szedéssel) és aláhúzással. A kövérítést kiváltó elem a <b>, a kurziválást kiváltó elem az <i>, az aláhúzást kiváltó elem az <u>. Ha valamit helytelennek, rossznak tartunk, azt áthúzással jelölhetjük, erre szolgál a <strike> elem. Mindegyik hatása addig tart, míg a megfelelő záróelemmel le nem zárjuk. Vigyázat! Ha valamelyik nyitóelemet véletlenül kétszer alkalmazzuk, akkor a hatásukat is csak két lezárás szűnteti meg!
A kiemelés típusai (ide értvbe az áthúzást is) természetesen kombinálhatóak, egy-egy szövegrészlet lehet kurzív, félkövér és aláhúzott egyszerre. Ilyenkor az elemeket kombinálhatjuk. Egyetlen dologra kell vigyáznunk: az elemeket ez ellenkező sorrendben kell lezárnunk, mint ahogyan megnyitottuk őket. Tehát a következő megoldás helyes:
Ügyeljünk a <b><i><u>helyes</u></i></b> sorrendre!
A következő példák azonban helytelenek:
Ügyeljünk a <b><i><u>helyes</b></i></u> sorrendre!
Ügyeljünk a <b><i><u>helyes</u></b></i> sorrendre!
Ügyeljünk a <b><i><u>helyes</b></u></i> sorrendre!
Helytelen az ilyen kiemelés is:
A betűk lehetnek <b> félkövérek,<i> egyszerre kurzívak és félkövérek</b> vagy pusztán kurzívak</i> is.
Helyesen így kell írni:
A betűk lehetnek <b>félkövérek,<i> egyszerre kurzívak és félkövérek</i></b> <i>vagy pusztán kurzívak</i> is.
Ha kipróbáljuk ezeket a kombinációkat, azt fogjuk tapasztalni, hogy ezek is helyes eredményt adnak. Az ilyen megoldások mégsem szabályosak. A későbbiekben látni fogjuk, hogy ezekhez az elemekhez további tulajdonságok is rendelhetők. Ha ezeket is alkalmazni fogjuk, a lezárások helytelen sorrendje furcsa galibákat okozhat. Éppen ezért a legegyszerűbb, ha már most hozzászokunk, hogy a záróelemeket a megfelelő sorrendben zárjuk le. A HTML-ben alapszabály: egyetlen elemet sem zárhatunk le úgy, hogy abban nyitott elem maradjon.
Az alsó és a felső index
Ha nem is gyakran, de megesik, hogy valamit alsó vagy felső indexbe kell írnunk. Ha a böngésző indexbe ír, akkor a betűket a szokot helyükhöz viszonyítva egy fél sorral lejjebb vagy feljebb írja. Az alsó index nyitóeleme a <sub>, a felsőé a <sup> (természetesen a záróelemekre itt is szükség van). Példa az indexek használatára:
Magyarország területe több, mint 93.000 km<sup>2</sup>.
A víz képlete H<sub>2</sub>O.
Figyeljük meg, hogy a böngészők kissé eltérő módon kezelik az indexeket: a Netscape Navigátor az indexbe is ugyanakkora betűket ír, mint a normál szövegbe, az Opera viszont kicsinyíti őket.
Kisebb és nagyobb betűk
Ha a szövegben kevésbé fontos megjegyzést szeretnénk tenni, akkor érdemes ezt kisebb betűkkel szednünk. Erre való a <small> elem.
Előfordulhat, hogy egy szövegben valamit úgy akarunk kiemelni, hogy nagyobb betűkkel írjuk. Erre a <big> parancs szolgál. Természetesen mindkettőnél kötelező a záróelem használata.
Hangsúlyozás, idézet
Van a HTML-ben néhány olyan elem, amely nem a kiemelt szövegrész formájára, hanem típusára utal. Ezek a <strong> (erős, hangsúlyos), az <em> (nyomatékos, hangsúlyos) és a <cite> (idézet). A záróelemek használata ezeknél is kötelező.
Alapesetben az idézet és a nyomatékos szöveg kurzívan, az erős szöveg félkövéren jelenik meg, így e parancsok hatása megegyezik a <i>, ill. a <b> parancsok hatásával. Mégsem haszontalan a különböző elemek használata, hiszen később megtanuljuk, hogyan lehet módosítani a formázóelemek hatását, és akkor például kissé más külsőt adhatunk az idézetnek, mint a közönséges kurzívnak. Mivel könnyen lehet, hogy az először egyszerűnek szánt oldalunkat később át akarjuk alakítani, jó, ha az egyszerűbb oldalakon is használjuk ezeket az elemeket. Egyéb betűformázó elemek
Van a HTML-ben néhány olyan elem, melyeket kifejezetten a számítástechnikai témájú szövegekben szoktak alaklmazni. A számítógép által megjelenített, a számítógépbe beírandó stb. szövegeket (akárcsak ebben a segédletben) fix szélességű, ún. &132;írógép-betűkkel&148; (más néven monotype-, teletype-betűkkel) szokás írni. (Ilyen betűtípus a Windowsban a Courier.) Ilyen betűk írására szolgál a <tt> elem. Ezen kívül van még néhány elem, amely hasonlóképpen jelenik meg. Ilyenek a programokból vett részletek kiírására szolgáló <code>, a felhasználó által beírandó szöveget jelző <kbd> és a programok kimenetét jelző <samp>. Ezen kívül a számítástechnikai példákban használatos a <var>, mely a parancsok paramétereinek megadására szolgál: ez alapesetben kurzívan jelenik meg.
Tanácsok a betűformázó parancsok használatához
Láthattuk, hogy a HTML meglehetősen sokféle betűformázó elemet ismer. (A felsoroltakon kívül is akad még.) Először ez talán riasztónak tűnik, de ne felejtsük el, hogy nagyon valószínűtlen, hogy mindegyik használatára szükségünk lesz, különösen egy oldalon belül. Azt a néhányat, amelyiket használni fogunk, hamar meg fogjuk tanulni.
A valódi veszély, ami a kezdő honlapkészítőre leselkedik, az a formázó elemek felesleges használata. Hangsúlyozásra, nyomatékosításra, kiemelésre lehetőleg egyféle (akár kombinált) módszert használjunk (pl. félkövér vagy kurzív-félkövér). Általában kerüljük az aláhúzást, mert folyó szövegben nem hat jól (címben természetesen más a helyzet). Ügyeljünk arra, hogy a szövegben csak a valóban nagyon fontos szavakat emeljük ki. A túl sok kiemelés nem esztétikus, és valódi funkcióját sem tölti be. A kiemelés ne legyen hosszabb egy sornál, és a képernyőn egyszerre legfeljebb 3-4 kiemelés jelenjen meg.
Feladatok
1. Vegyük elő korábbi feladatunkat, melyben személyes adatainkat adtuk meg! Szedjük az adatok megnevezését félkövér, az adatokat kurzív betűkkel. A villanypostacímet viszont monotype betűkkel szedjük! Megoldásunkat hasonlítsuk össze a példamegoldással!
2. Mivel a különböző elemeket nehéz fejben tartani, készítsünk magunknak emlékeztetőt, hogy melyik betőformázó elem mit jelent. Hasonlítsuk össze megoldásunkat a példamegoldással! Nyomtassuk ki az oldalt, hogy mindig kéznél legyen!