p
elem
A szöveg rendszerint paragrafusokba (bekezdésekbe) foglalva helyezkedik el a dokumentum törzsében.
Az XHTML standard nem engedi meg, hogy a szöveget közvetlenül a törzsbe (body elem) helyezzük. Ehelyett az egyes szövegrészeket a <p>
tag segítségével jeleníthetjük meg.
A bekezdés megjelenítését illetően a böngésző annyi szót helyez egy sorba, amennyi a böngészőablakba belefér. Minden sor végére sortörés kerül
(a szövegbe írt újsor-karaktereket nem veszi figyelembe a böngésző, illetve több egymásutáni szóköz egyetlen szóközzel lesz helyettesítve).
A p
elembe ágyazott szöveget üres sor előzi meg.
br
elem
Új sor kezdése a <br>
(break) tag beiktatásával lehetséges (azt meglőző üres sor nélkül).
Üres elem, tehát nem lehet törzse, következésképpen záró tag-je sem.
XHTML esetén az alakja: <br />
Itt jegyezzük meg, hogy az üres tag-ek esetében az XHTML szintaxisban a "/" karakter jelzi, hogy nyitó és egyben záró tag-ről van szó. A "/" előtti szóköz az üres tartalmat jelképezi. (Bizonyos régebbi böngészőknek gondot okoz a <br/>
alak, a <br />
-vel viszont boldogulnak ezek is.)
Egy dokumentumban a szöveget gyakran fejezetekre/alfejezetekre bontjuk, és mindenik egy-egy címmel kezdődik. Az (X)HTML 6 szintet határoz meg a címek hierarchiába való szervezésére: <h1>
, <h2>
, <h3>
, <h4>
, <h5>
és <h6>
(h = heading), ahol
<h1>
a legfelső szintet (a főcímet) jelöli. Ezeknek a címeknek a megjelenítése általában vastag betűvel történik, a standard betűméret pedig a címet jelölő elem sorszámának függvényében változik. A legtöbb böngésző esetében a <h1>
, <h2>
, <h3>
a szöveg alapértelmezett méreténél nagyobb betűméretet használ, a <h4>
betűmérete az alapértelmezett betűméretnek megfelelő, míg a <h5>
és <h6>
betűmérete ennél kisebb.
A h
elemek megtörik a sort, vagyis tartalmuk új sorban jelenik meg. A böngészők általában előtte és utána is kihagynak valamennyi helyet.
Az alsó- illetve felső index a <sub>
(subscript), illetve <sup>
(superscript) tag-ek segítségével valósítható meg.
Pl. x12+x22
pre
elem
Amennyiben éppen azt szeretnénk, hogy a szövegbe írt fehér karakterek megmaradjanak, vagyis meg szeretnénk előzni, hogy a böngésző kiküszöbölje a többszörös szóközöket, illetve a sortörést figyelmen kívül hagyja, ezt megtehetjük a pre
(preserve rövidítése) elem segítségével.
Pl.
Som dere, som dara som vessző Kikereki pókokat ébresztő. Pitteg a pattog a bekereki bokorág, Heje-huja szélnek tél ad parolát.
hr
A szöveg tagoltabbá, ezáltal olvashatóbbá tehető vízszintes vonalak beiktatásával, melyet a <hr>
(horizontal rule) üres tag segítségével valósíthatunk meg (XHTML esetén ennek alakja: <hr />
).
Korábban számos olyan tag volt használatban, mely a szöveg megjelenítésére vonatkozó információkat adott meg, mint pl. a betűtípus vagy betűméret. A CSS (Cascading Style Sheets, magyarul st1íluslapok) megjelenésével ezek a tag-ek elavulttá váltak, további használatuk nem ajánlott.
Maradt mégis néhány olyan, a karakterkészlettel kapcsolatos szövegformázó tag, melyeket napjainkban is széles körben használnak, ezek az ún. tartalomalapú tag-ek (content-based style tags).
A legelterjedtebbek: em
, strong
, code
Az <em>
(emphasis) tag azt fejezi ki, hogy a törzsében levő szöveg valamilyen szempontből kiemelt. A legtöbb böngésző dőlt betűvel jeleníti meg a tartalmát. Így: kiemelt szöveg
A <strong>
tag jelentése az <strong>
-éhez hasonló, de még nagyobb hangsúlyt ad a törzsében levő szövegnek. A böngészők általában vastagított betűvel jelenítik meg: nagyon fontos ... szöveg
Dőltbetűs szöveget írhatunk az i
(i = italic) elem segítségével (dőlt), illetve vastagított szöveget a b
(b = bold) elemmel (vastag). Ezek az elemek nincsenek ugyan elavultnak nyilvánítva, de amennyiben egy tetszőleges szövegrész betűstílusát vagy betűvastagságát szeretnénk megadni, ezt célszerűbb CSS stílusmeghatározásként megadni.
Az i
, illetve b
elemet használhatjuk olyankor, ha valamiképpen a tartalom kívánja meg, hogy dőlt , illetve vastagított betűt használjunk, pl. a szövegben szereplő kémiai elemeket dőlt betűvel szeretnénk írni (H2O+CO2...) vagy vastagított betűvel valamilyen kulcsszavakat...
A code
elemet általában állandó betűszélességű karakterkészlettel írt szöveg (tipikusan számítógépes kód) beiktatására használják.
A szövegformázó tag-ek nyújtotta megjelenítés CSS stílusmeghatározással is elérhető, sőt, ez utóbbi jóval bővebb lehetőséget kínál, így az itt említett tag-eket igyekezzünk ritkán használni, és csak akkor, ha valóban inkább a tartalmat szeretnénk vele megjelölni, és nem a szöveg megjelenítését formázni, amire a CSS használata alkalmasabb.
Háromféle listát hozhatunk létre: rendezetlen, rendezett (sorszámozott), illetve definíciós listát.
Rendezetlen listát használunk, amennyiben a felsorolt elemek sorrendje nem lényeges (mint amilyen pl. egy bevásárlólista). A listát az <ul>
(unordered list) tag hozza létre, új listaelemet pedig a <li>
(list item) tag segítségével szúrhatunk be. Megjelenítéskor minden egyes lista-elem előtt egy felsorolási jel (bullet) jelenik meg (ez módosítható CSS stílus megadásával).
Pl. (bevásárlólista)
A rendezett listában számít az elemek sorrendje. A megjelenítéskor a lista-elemek elé implicit módon szekvenciális értékek (alapértelmezett módon arab számok) kerülnek.
A rendezett lista létrehozása az <ol>
(ordered list) tag segítségével történik, a lista-elemek definiálása ugyanúgy történik, mint rendezetlen lista esetén.
A rendezett-, illetve rendezetlen listákat egyaránt egymásba is ágyazhatjuk, de nem közvetlenül az <ol>
, illetve <ul>
tag-be kell ágyazni a következő <ol>
, illetve <ul>
tag-et, hanem a külső lista <ol>
, illetve <li>
tag-ébe kerül bele a beágyazott lista.
Pl. (Fiktív tartalomjegyzék)
A definíciós lista név-érték párokat jelenít meg, tipikusan kifejezéseket és ezek definícióit. A <dl>
(definition list) tag hozza létre a listát, ezen belül pedig a <dt>
(definition term) tag határozza meg egy új bemenet értékét, a <dd>
(definition description) tag pedig a leírást.
Pl. (légitársaságok operációs rendszer módra)
A táblázat egy cellákból felépülő mátrix.
Táblázat létrehozása a <table>
tag segítségével történik. Az ebbe ágyazott <tr>
(table row) tag egy sort definiál. Egy soron belül elhelyezkedő cellák pedig a <td>
(table data) tag segítségével adhatók meg.
A táblázat első sora és/vagy első oszlopa gyakorta valamilyen, az oszlopra (illetve sorra) vonatkozó címkét tartalmaz. Az ilyen jellegű cellát a <th>
(table heading) tag segítségével adjuk meg.
Egy táblázatban kétféle szegélyvonal szerepel: egy külső szegély (border), illetve egy, a cellákat keretező belső szegély (rule). Amennyiben a table
elemben nem jelenik meg a border
attribútum, akkor egyik szegély sem lesz megjelenítve. A border
attribútum értéke egy egész szám, mely a külső szegély vastagságát adja meg pixel-ekben (1-nél vastagabb külső szegély esetén a táblázat megjelenítése 3D-s hatást kelt). Amennyiben 0-tól különböző értéket adtunk meg a külső szegélynek, a belső szegély vastagsága 1 pixel lesz.
Pl. egy nagyon egyszerű táblázat:
x | 0 | x |
x | 0 | 0 |
0 | x | 0 |
A colspan
(illetve rowspan
) attribútumok segítségével olyan cellát hozhatunk létre, amelyik több oszlopot (sort) is áthidal.
Micimackó | Malacka | Tigris | Róbert Gida | |
---|---|---|---|---|
méz | kedvencem | mondjukhogy... | pfúj! | nyami! |
pattogatott kukorica | az is jó, ha nincs méz | fincsi | ||
sültkolbász | nem az én esetem | ez már igen! |
A táblázat megjelenítése tovább variálható CSS segítségével.
img
Képet az img
üres elem segítségével iktathatunk be. Legegyszerűbb alakja a következő két attribútumot tartalmazza: src
, mely a képet tartalmazó állományt adja meg, illetve alt
, mely egy alternatív szöveget határoz meg, ami akkor jelenik meg, ha a kép megjelenítése valamilyen okból nem lehetséges
(nem grafikus böngésző vagy a böngészőben ki van kapcsolva a képek megjelenítése). Az alt
attribútum használata kötelező a szigorú (X)HTML specifikáció szerint.
Amennyiben a kép ugyanabban a katalógusban található, mint a HTML oldal, elég az állomány nevét megadni, különben a HTML oldal katalógusához képest számítva, relatív úttal együtt adjuk meg.
Az img
elem további két opcionális attribútuma a width
, illetve height
, melyeket a kép átméretezésére használhatunk. Vigyázzunk arra, hogy az átméretezéssel ne torzuljon a kép, másrészt pedig a méretreszabást legtöbbször nem célszerű a böngészőre hagyni. Pl. amikor hatalmas méretű képeket kell lehívnunk a szerver gépről, melyeket majd a böngésző alaposan lekicsinyít a megadott méretre, egyrészt feleslegesen lesz terhelve a hálózati forgalom, másrészt az oldal betöltődése lassú lesz. Ehelyett célszerűbb a megjelenítésre szánt képet valamilyen képszerkesztő segítségével megfelelőképpen méretezni, és ezt az eleve kisebb méretű képet tárolni a szerveren.
Elterjedt kép-formátumok:
Pl. Ez itt egy „finom” billentyűzet:
span
és div
elemek
A span
elemet tipikusan arra szokás használni, hogy egy bizonyos szövegrésznek önálló stílust adhassunk meg.
Pl. „Micimackó egy erdőben élt, saját kunyhójában, Kovács János név alatt.”
(Megjegyzés: a példában az egyszerűség kedvéért inline stílusmeghatározást használtunk, tipikusabb a stílusosztály használata, de mindez a CSS témakörébe tartozik.)
A div
elem segítségével az oldal egy részének, egy különálló nagyobb egységnek kölcsönözhetünk sajátos kinézetet.
Megj.: sem a span
sem a div
elemhez nincs a böngészőben alapértelmezett megjelenítési mód hozzárendelve.
A(z) (X)HTML elemek két kategóriába vannak sorolva: minden elem vagy inline vagy blokk típusú.
Egy inline típusú elem tartalma az aktuális sorban jelenik meg, azaz megjelenítéséhez nem tartozik implicit módon egy sortörés is. Egetlen kivétel ez alól a br
elem, mely inline elemnezk számít, de a rendeltetése tulajdonképpen éppen az, hogy egy sortörést beékeljen.
Egy blokk típusú elem megtöri az aktuális sort, így tartalma egy új sorban jelenik meg.
Pl.
h1
-h6
, p
, hr
, ul
, ol
, dl
, table
, div
, stb.em
, strong
, img
, a
, span
, stb.Példaszöveg, ami minden magyar ékezetes karaktert tartalmaz: árvíztűrő tükörfúrógép :)
body
elem), illetve form
elemben csupán blokk típusú elemek szerepelhetnek (inline elem vagy sima szöveg nem lehet közvetlenül body
vagy form
elembe ágyazva)