HTML : *| 3. A szöveg formázása |
*| 3. A szöveg formázása
2009.01.16. 10:27
Az előző leckében megtanultuk a honlap felépítését. Most akkor a BODY-ban fogunk dolgozni.
Majdnem minden HTML-es szövegdologhoz a FONT nevű tag kell nekünk. Ez egy teljesen normális tag, van neki nyitó- és záró része is, és a nyitó tagba kerülnek a beállítások. A font körbezárja azt a szöveget, amit máshogy szeretnénk megjeleníteni, valahogy így (a pontok jelképezik a beállításokat): Szöveg Másmilyen szöveg
Betűméret
Akkor nézzük a betűméretet. Ezt a size nevű beállítással adjuk meg (magyarul méret). A size-nak az értéke 1-től 7-ig mehet. A 3-as jelképezi a normál méretet. Példa: Kis méret
Normál méret
Nagyobb méret
Szúrd be a fenti kódot az index.html-be, és próbáld ki, mit mutat a böngésződ. Ezt fogod látni:
Kis méret Normál méret Nagyobb méret
Mit csinál a kód: Először is kezdünk egy új bekezdést P, aztán nyitunk egy font-tal, és annak segítségével beállítjuk a lehető legkisebb betűméretet. Írunk valami szöveget, és bezárjuk a font-ot, mert most már vége annak a szövegnek, amit kis méretben szeretnénk megjeleníteni. A BR segítségével új sort kezdünk. Így folytatjuk, csak mindig változó mérettel, a végén pedig lezárjuk a bekezdést.
Szövegszín
Ez is egy fontos beállítás, kis szín mindig kell egy honlapra! Ezt pedig a color-ral szabályozzuk. Piros szöveg
Kék szöveg
Piros szöveg Kék szöveg
Két választásod van: Vagy az angol nevét adod meg (red, yellow, black, white. Vagy az ún. színkódját írod az idézőjelek közé. Ez a színkód hatjegyű, és egy # után kezdődik. Ha nem állítasz be semmit, fekete marad a szöveg, ami önmagában nem rossz, de van, hogy a honlap kinézetéhez kell igazítani a színt.
Félkövér, dőlt, stb.
Ehhez nem a font tag kell. Három lehetőségünk van, a félkövér, a dőlt, és az aláhúzott szöveg, és mindháromhoz külön tag szükséges. Ezek is teljesen normálisak, van nyitó-, és záró részük, csakhogy nincs külön beállítás, amit a nyitó részre be lehetne írni (szóval igazából egyszerű megjegyezni őket). Itt is értelemszerűen a nyitó-, és zárótag körbezárják a megváltoztatott szöveget.
Először is, a félkövér, azaz angolul bold, szöveg. Ennek a tagnak a neve b, az angol kifejezés alapján könnyen meg lehet jegyezni. A dőlt szöveg angolul italique, azaz a hozzá tartozó tag neve i. Az aláhúzott angol megfelelője pedig underlined, és a tag neve u. Félkövér szöveg
Dőlt szöveg
Aláhúzott szöveg
Félkövér és aláhúzott szöveg
Dőlt és aláhúzott szöveg
Az eredmény pedig:
Félkövér szöveg Dőlt szöveg Aláhúzott szöveg Félkövér és aláhúzott szöveg Dőlt és aláhúzott szöveg
Mindegy, milyen sorrendben írod a tag-eket, csak az a fontos, hogy ne keresztezzék egymást.
További ilyen karakterformázó tag-ek (Természetesen kacsacsőrben és zárótag-gel használatosak!:)
S - Áthúzott formátumot eredményez TT - Fixpontos betűket eredményez EM - Kiemeli a szöveget CITE - Idézetekre használható VAR - Változónevet jelöl STRONG - Ez is egy kiemelési lehetőség CODE - Kódoknál használjuk KBD - Billentyűfelirat jelzése BIG - Nagyméretű betűformátumot eredményez SMALL - Kisméretű betűformátumot eredményez SUB - Alsóindexet eredményez SUP - Felsőindexet eredményez
Igazítás
Jobbra-balra, középre, bármit lehet! Csupán a bekezdés nyitó tagba kell beleírni az align szót, mögötte idézőjelekben pedig a kívánt igazítást. Választhatsz a következőkből: left, right, center, és justify. (Gyengébbek kedvéért: bal, jobb, középre és sorkizárt) Balra igazított szöveg
Eredmény:
Balra igazított szöveg
GYAKOROLJ!!!
Kinézetet adtunk a szövegünknek. Lassan már biztos összekeveredsz a sok érthetetlen angol kifejezés miatt, de türelem, előbb-utóbb megtanulod őket, és akkor már nagyon könnyű lesz kombinálni is. Addig is, gyakorolj úgy, hogy magadban eldöntöd például ezt: "Most egy kis méretű, félkövér, narancssárga mondatot írok". És akkor meg is teszed: Kis méretű, félkövér, narancssárga mondat.
Kis méretű, félkövér, narancssárga mondat.
Így lehet gyakorolni. Kisérletezz, és változtatgasd tetszés szerint az index.html-t. Meglátod, előbb-utóbb bele fogsz jönni a kódolásba! :)
|