A szövegek formázása

 

 

Ebben a fejezetben a különböző szövegformázási módokkal ismerkedünk meg.
Témák:


A címsorok

A dokumentumunknak először is címet kell adnunk. Ezt egy erre kitalált elemmel tudjuk kiemelni a szövegkörnyezetből. A címsorokat 6 különböző szinten defíniálhatjuk: főcím, 1. alcím, 2. alcím stb... A címsorok alapértelmezetten balra igazítva, a szokottnál nagyobb és vastagított karakterekkel fognak megjelenni.
Lássunk példákat a címsorokra:

1. szintű címsor:

1. szintű címsor

2. szintű címsor:

2. szintű címsor

3. szintű címsor:

3. szintű címsor

4. szintű címsor:

4. szintű címsor

5. szintű címsor:
5. szintű címsor
6. szintű címsor:
6. szintű címsor

A címsorok igazíthatók: balra(left), középre(center), vagy jobbra(right).


Ez egy középre igazított címsor lesz:
<H3 align="center"> ez lesz a középre igazított címsor</H3>

ez a középre igazított címsor

A címsorokról bővebben itt olvashatsz...

fel...


A FONT elem

A karakterek formázásához a HTML nyelv a <FONT> elemet ajánlja. Ezzel meghatározhatjuk a karakterek betűtípusát, méretét és színét. A font elemnek van nyitó és zárótagja.
Lássuk sorban:

  • A betűtípusok: <FONT face="Arial">
    A böngésző az itt megjelölt karaktertípusból fogja a nyitó és zárótag által közrezárt szöveget megjeleníteni. A betűk típusát tetszőlegesen meg lehet választani. Számítva arra, hogy az általunk megadott betűtípus esetleg nincs telepítve a látogató számítógépén, érdemes több betűtípust is - vesszővel elválasztva - megjelölni. Ha az elsőként megadott betűtípust nem találja a böngésző, a következővel próbálkozik. Ha egyet sem találna akkor keres egy hasonló típust. Ez mindjárt egy bizonytalansági tényező: nem biztos, hogy a látogató ugyanazt fogja látni, amit mi mutatni akarunk. Még egy példa: <FONT face="Arial, Verdana, Tahoma, sans-serif"> Látjuk, hogy végső lehetőségként egy betűcsaládot jelöltünk meg.

  • A betűk mérete: <FONT size="3">
    A betűméreteket 1-től 7-ig relatív értékekkel lehet megadni. A tényleges betűméret függ a böngésző beállításától is. Alapértelmezett méret a 3-as.

    1-es méret
    2-es méret
    3-es méret
    4-es méret
    5-es méret
    6-es méret
    7-es méret

    Megadhatjuk a karakterméretet így is: <FONT size="-1"> Ekkor az alapértelmezett betűmérethez képest nagyobb vagy kisebb lesz a megjelenített karakterek mérete. Ez a legkevésbé ajánlott megoldás, mert nem tudjuk, mi van a látogató gépén beállítva alapértelmezett betűméretként.

  • A betűk színe: <FONT color="#FF0000">
    A betűk(karakterek) színét megadhatjuk hexadecimális kóddal, vagy a defíniált szín nevével is.

A FONT elem használatát a böngészők ugyan kivétel nélkül támogatják, használatát a W3C nem ajánlja. Helyette a karakterek formázására a CSS nyelvet javasolják, amelynek sokkal szélesebb lehetőségei vannak a karakterek megjelenésének leírására.

A FONT elemről bővebben itt olvashatsz...

fel...


vastag betűk, dőlt betűk...

A karakterek vastagítása a <B> vagy a <STRONG> elemmel lehetséges:
Ebben a szövegben van <B>kurzív betűs</B> rész is.
ez megjelenítve így néz ki:     Ebben a szövegben van kurzív betűs rész is.


Dőlt betűs karaktereket az <I> vagy az <EM> elemmel készíthetünk:
Ebben a szövegben van <I>dőlt betűs</I> rész is.
ez megjelenítve így néz ki:     Ebben a szövegben van dőlt betűs rész is.

Aláhúzott karaktereket az <U> elemmel készíthetünk:
Ebben a szövegben van <U>aláhúzott</U> rész is.
ez megjelenítve így néz ki:     Ebben a szövegben van aláhúzott rész is.

Áthúzott karaktereket az <S> vagy a <STRIKE> elemmel készíthetünk:
Ebben a szövegben van <S>áthúzott</S> rész is.
ez megjelenítve így néz ki:     Ebben a szövegben van áthúzott rész is.

fel...


az alsó és felső index...

Mértékegységek, képletek írásához használható a következő két elem.

A terület mértékegysége: m<SUP> 2 <SUP> azaz: m2

A víz vegyjele: H<SUB> 2 </SUB> azaz: H2O

fel...


a kisebb és nagyobb szöveg esete...

Soron belül is növelhetjük, vagy csökkenthetjük a betűméretet.

Ez a szöveg <BIG> nagyobb </BIG> és <SMALL> kisebb </SMALL> betűket is tartalmaz.
Ez a szöveg nagyobb és kisebb betűket is tartalmaz.

Több ilyen elem összefűzésével még nagyobb illetve kisebb karaktereket állíthatunk elő:

Ez a szöveg <BIG><BIG> nagyobb </BIG></BIG> és <SMALL><SMALL> kisebb </SMALL></SMALL> betűket is tartalmaz.

Ez a szöveg nagyobb és kisebb betűket is tartalmaz.

fel...


Más defíniált karaktertípusok

A HTML többféle előre defíniált karakter megjelenítési módot kínál különböző célokra. Lássunk belőlük néhányat:

  • Az írógép típus
    Ekkor egyforma széles karaktereket rajzol ki.
    <TT>Ez egy mintaszöveg.</TT> azaz:    Ez egy mintaszöveg

  • A kódszöveg típus
    Megjelenítése az előzőhöz hasonló.
    <CODE>Ez is egy mintaszöveg.</CODE> azaz:    Ez is egy mintaszöveg

    Látjuk, néha elég kis különbség van a különböző elemek megjelenítése között.

  • Az idézet típus
    Idézetekhez használatos. A böngészők általában dőlt betűkkel jelenítik meg.
    <CITE>Ez egy idézet lenne.</CITE> azaz:    Ez egy idézet lenne

  • Az acronym típus.
    Az acronym elem title attribútumával jegyzetet, magyarázatot fűzhetünk a folyó szöveghez.
    <ACRONYM TITLE="Thomas Web Műhely"> T. W. M. </ACRONYM>
    Told az egérmutatót ide: T. W. M.

fel...


A HTML másféle karakterformázási lehetőségeket is kínál. Itt csak a fontosabbak közül van néhány felsorolva. A szövegszintű elemek és a karakterformázási elemek lapokon megtalálod a fenti és a többi elemek részletes ismertetését.

Próbálj te is karaktereket formázni. Az alábbi kódban változtass kedved szerint, aztán nézd meg, amit alkottál:

   

 



fel...
előző: a szövegtest részei...
következő: a hiperhivatkozásokról...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002