5. Lecke: Szövegelemek, linkek, képek, listák

- Ismerje a legfontosabb szövegelemeket
- Ismerje a blokkos és a sorközi (inline) szövegelemek közötti különbséget
- Ismerje az elemi támogatott szövegformázó HTML elemeket
- Ismerje a fontosabb szövegformázó stílusokat
- Ismerje a linkek használatát
- Ismerje a képek beillesztésének és formázásának módjait
- Ismerje a listák fajtáit és definiálási, formázási
- A legfontosabb blokkos és sorközi (inline) szövegelemek
- A szövegformázó HTML tag-ek
- Szövegformázás stílussal
- Linkek megadása és formázása
- Képek megadása és formázása
- Listák megadása és formázása
Szövegelemek
Ahogy korábban szerepelt, a HTML forrás tag-ekből és statikus szövegből áll. Ez utóbbi az oldalon megjelenő szövegtartalom. Fontos, hogy a weboldal összes szövegelemét valamilyen befoglaló tag-be kell helyezni, hogy formázáshoz tudjunk rá hivatkozni. A legnyilvánvalóbb befoglaló a szövegelem. A szövegelemeket megjelenés szempontjából két csoportra osztjuk: a blokkos és a sorközi (inline). Megjegyzendő, hogy ezek a megjelenési formák nem csak szövegekre érvényesek, a 9. fejezetben általánosan újra szóba jönnek.
Blokkos szövegelem
A blokkos szövegelem mindig egy önálló egységet képez a weboldalon, így szövegkörnyezetétől elválik úgy, hogy előtte és után is sortörés illetve alapértelmezettként helyköz van. A blokkos elemek leírásakor a forrásban bárhogy tördelhetjük a szöveget white-space karakterekkel (szóköz, tabulátor, sortörés) az áttekinthetőség miatt, a weboldalon sorfolytonos szövegként jelenik meg.
A legelemibb blokkos szövegelem a bekezdés. Ez önmagában nem hordoz más jelentést illetve formátumot sem.
<p>...</p>
A címsor szövegelemek jelölik az oldal fő-, al- és további alcímeit. Ezt hét szintig lehet lebontani, tehát hét fajta címsor szövegelem van:
<h1>...</h1>
<h2>...</h2>
...
<h7>...</h7>
Ezekhez a böngésző alapértelmezettként formátumot rendel, például félkövérséget, nagyobb betűméretet.
Ha egy blokkos elembe sortörést szeretnénk beszúrni anélkül, hogy új elemet kezdenénk, akkor a
<br />
tag-et kell használnuk.
Sorközi (Inline) szövegelem
A sorközi szövegelem általában valamilyen hosszabb szöveg része, így általában egy blokkos szövegelemen belül használjuk. Egy sorközi tag-be foglalt szövegrész nem válik el a környezetétől, sorfolytonos marad.
Az általános sorközi szövegelem a span, amelynek nincs tartalmi jelentése és formátumot sem hordoz. Az a szerepe, hogy a befoglalt szövegrészre stílusformázáskor tudjunk kijelölőkkel hivatkozni.
<span>...</span>
A többi elemnek jelentése van, így a befoglalt szövegrészek címkézettek valamilyen tartalmi jelentéssel. Ezek a tag-ek formátumot is hordoznak, de ezeket természetesen felül lehet definiálni stílussal. A leggyakrabban előforduló ilyen tag-ek:
kiemelt
<strong>...</strong>
hangsúlyos
<em>...</em>
programkód
<code>... </code>
idézet
<cite>...</cite>
stb
Fontos megjegyezni, hogy például a strong tag alapértelmezettként félkövérré alakítja a szöveget, de a funkciója nem ez. A tag-nek jelentése van, a szövegrész kiemelt, nem formázás céllal használjuk.
Szövegformázó tag-ek
A korszerű weboldalaknál a formázást stílusok használatával végezzük, sok formázó tag-et és attribútumot már nem is ajánlanak (sőt a HTML5 nyelvben már nem is szerepelnek). Ettől függetlenül továbbra is vannak formázó tag-ek, bár a stílusformázás, az előző leckében leírtak alapján, hatékonyabb.
A legfontosabb, még használatban lévő formázó tag-ek:
félkövér
<b>...</b>
dőlt
<i>...</i>
aláhúzott
<u>...</u>
Szövegformázás stílussal
Bármilyen szöveg tartalmú tag-re kijelölővel való hivatkozáskor stílussal megadható a tartalmazott szöveg formátuma. A legfontosabb szövegformázó tulajdonságok:
Szövegszín megadása
color : szín;
A színek háromféle módon adhatók meg:
- a szín angol nevével; több színhez tartozik egy sötét és egy világos árnyalat
color : darkblue / blue / lightblue;
- a szín decimális RGB kódjával, ahol a három színkód sorrendben a piros, zöld és kék, melyek intenzitásértéke 0 és 255 között terjedhet.
color : rgb(0,0,0);
- a szín hexadecimális kódjával, ahol az első két karakter jelenti a piros kódját, a második kettő a zöldét, a harmadik kettő a kékét (00-tól FF-ig)
color : #001133;
Karakter távolság megadása, a távolságot leggyakrabban pixelben (px), karakterméretben (em), vagy pontban (pt) adhatjuk meg
letter-spacing : 5px;
Szavak távolságának megadása, megadhatjuk pixelben, pontban, stb.
word-spacing : 5px;
Sorok magasságának megadása, megadható pixelben, százalékban, stb. (csak blokkos megjelenésű elemre)
line-spacing : 150%;
A többi formázást két csoportra lehet bontani, az egyik, amelyik karakterekre vonatkozik és a font szó vezeti be, a másik, ami szövegekre vonatkozik és a text szó vezeti be.
Karakterre vonatkozó formázások
A betűtípus megadásakor vigyázni kell arra, hogy olyan betűtípust kell megadni, amelyet minden böngésző meg tud jeleníteni. Ezért több típust is fel szoktunk sorolni a speciálistól haladva az általánosig lezárva a megfelelő betűtípus csoporttal. Három alapcsoportot különböztetünk meg: a Serif a talpas betűtípus, a Sans-Serif a nem talpas és a Monospace az egyenlő betűszélességű típus. Azokat a betűtípusokat, amelyek neve több szóból áll, idézőjelek közé kell tenni.
font-family : "Times New Roman", Times, Serif;
Betűméret megadása, lehet pixelben, pontban, arányban és százalékban
font-size : 12pt;
Dőlt
font-style : italic / normal;
Félkövér
font-weight : bold / normal;
Szövegre vonatkozó formázások
Szövegigazítás (csak blokkos elemre)
text-align : left / right / center / justify;
Aláhúzás, föléhúzás, áthúzás
text-decoration : underline / overline / line-through / none;
Nagybetűssé alakítás
text-transform : uppercase / lowercase;
Első sor behúzása (csak blokkos elemre)
text-indent : 25px;
Linkek
A link az egyik alapeleme a weboldalaknak. Fontos, hogy az általános szövegtől formátumban elváljanak. A linkekhez meg kell adni a címet, amire hivatkozik, erre való a href attribútum. A nyitó és záró tag közötti rész fog hivatkozásként viselkedni. Akármilyen megjelenő elem lehet link: szöveg, kép, stb.
<a href="http://www.jgypk.hu/"> ... </a>
Továbbá megadható egy cél, hogy a hivatkozott weboldal hol nyíljon meg, ezt a target attribútummal adjuk meg. Ennek leggyakoribb használati esete, amikor egy link által hivatkozott oldalt egy másik ablakban (fülön) nyitunk meg, amikor a target értéke _blank. Általában hasznos, ha a minden olyan linket, amely az webhelyünkről kifele mutat (más webhelyre vezérel) átirányítjuk egy új ablakba, hogy a saját oldalunk is nyitva maradjon.
<a href="http://www.jgypk.hu/" target="_blank" > ... </a>
A link nem csak arra való, hogy más weboldalakra mutasson, hanem egy oldal egy adott pontjára is tud hivatkozni. Ez a pont lehet ugyanabban a dokumentumban, de egy másik oldalon is. Ezeket a hivatkozási pontokat szintén a link tag segítségével adjuk meg, de ilyenkor a tag-nek nem a href attribútumát adjuk meg, hanem a name tulajdonságát, ezzel azonosítjuk a pontokat.
<a name="eleje">Az oldal eleje</a>
Ilyenkor a hivatkozó tag-ben a href értéke az oldal elérése (ha másik oldalra hivatkozunk, különben elhagyható) majd a pont neve # karakterrel kezdve.
<a href="index.html#eleje">...</a>
Linkkel lehetőség van e-mail küldésére is. Pontosabban a linkre klikkelve a böngésző elindítja a kliens gépen az alapértelmezett levelező programot kitöltve a címzett e-mail címet (valaki@cimzett.hu).
<a href="mailto:valaki@cimzett.hu">...</a>
Ahogy a 4. Leckében már szerepelt, a linkeknek az állapotait külön lehet formázni látszólagos kijelölők használatával. Az állapotai:
- alapállapot: a:link
- látogatott állapot: a:visited
- amikor a kurzor a link fölött van: a:hover
- aktív állapot, amikor a felhasználó lenyomja az egérgombot a linken, de még nem engedi fel: a:active
A linkek formázására az általános formázási módok érvényesek, attól függően, hogy milyen elem a link, azaz a szöveg linkre szövegformátumot adunk meg.
Képek
A képek a legnyilvánvalóbb médiaelemei a weboldalaknak. A mai weboldalak már elképzelhetetlenek képek nélkül, de a túl sok és túl erőteljes képek a weboldal hatékonyságának rovására mennek. Éppen ezért a megfelelő képek és megfelelő formázásuk alapvető a webes fejlesztés témakörben.
A képeket beszúró tag-nek nincs lezáró párja, mivel a tag már önmagában egy elemet jelent. A legfontosabb attribútumai a kép forrását megadó src, és a helyettesítő szöveget megadó alt. A kép forrása lehet helyi tárolású, de akár teljes URL-lel megadott távoli kép is. A képekhez fontos megadni a helyettesítő szöveget, amely egyrészt akkor jelenik meg, amikor a kép nem tud betöltődni, másrészt a vakokat és gyengénlátókat segítő felolvasó szoftverek ezt a szöveget olvassák fel. Éppen ezért a korszerű weboldalak esetén a képeknek az alt tulajdonság megadása kötelező.
<img src="images/logo.png" alt="A cég logója" />
A height és a width tulajdonsággal meg lehet adni egy kép megjelenési méretét, ezek nélkül a kép eredeti méretében fog megjelenni. Ha csak az egyik értéket adjuk meg, akkor a másik értéket a böngésző hozzá igazítja a kép méretarányait megtartva. Ha mindkét érték szerepel, akkor a méretet ezek szerint állítja be, amely a kép torzulását eredményezheti. Az értéket pixelként kell érteni.
<img src="images/logo.png" alt="A cég logója" height="50" width="40" />

width : 50%;A kép méretét célszerű mindig beállítani, mert ilyenkor a böngésző azonnal lefoglalja a helyet a képnek és építi tovább a weboldalt miközben a kép letöltődik.
height : 50%;
Ezeken kívül nincs speciális stílusformátum rendelve a képekhez, általánosságban a keretét, margóját (6. lecke) és az elhelyezését (9. lecke) szokták megadni.
Listák
Fontos, hogy ha listát akarunk az oldalon elhelyezni, akkor ne sima szövegként adjuk meg, hanem listaként vegyünk fel. A listáknak két fajtája van: a számozatlan és a sorszámozott. Mindkét esetben először a listát kell definiálni, majd a nyitó és záró tag között definiáljuk a lista elemeit.
A számozatlan lista esetén minden elem elé egy bevezető karakter kerül, például egy pont.
<ul>
<li>elem1</li>
<li>elem3</li>
<li>elem3</li>
</ul>
A sorszámozott lista elemei számokkal vagy betűkkel kezdődnek, a sorrendet automatikusan állítja a böngésző. A kezdő sorszámot a start attribútummal lehet megadni. Fontos, ez mindig szám értékű, azt jelenti, hogy sorszám (vagy betű) hányadik elemétől kezdje a számozást.
<ol start="10">
<li>elem1</li>
<li>elem3</li>
<li>elem3</li>
</ol>
Stílussal megadható, hogy a számozatlan listának milyen bevezető karaktere, száma vagy betűje legyen:
list-style-type : circle; /* üres kör karakter */
list-style-type : upper-roman; /* nagy római számok */
A felsorolt listának megadható egy tetszőleges kép, mint az elemeket kezdő szimbólum:
list-style-image : url('dot.png');
Továbbá beállítható, hogy a bevezető karakterek a listaelemek általi szövegen belül, vagy kívül helyezkedjenek el:
list-style-position : inside / outside;

- személyes adatok,
- iskolák,
- végzettségek,
- érdeklődési kör.

A blokkos elem elkülönül a környezetétől azáltal, hogy elé és utána egy sortörés kerül. A sorközi elem sorfolytonos marad.
| |
A blokkos elem a sorközi elemeket foglalja össze egy blokkba.
| |
A blokkos elem egy téglalap formájú elem, a sorközi pedig egy tetszőleges formájú.
|
A <b> és a <strong> tag formátuma ugyanolyan, de nem ugyanarra való, mert az előbbi csak formáz, az utóbbinak tartalmi jelentése van.
| |
A <b> és a <strong> tag jelentése ugyanaz, mindkettő félkövérré alakít, így nincs szükség mindkettőre, ezért az előbbit ki is vették a HTML5-ből.
| |
A <b> és a <strong> tag formátuma ugyanaz, de mást jelent, az első kiemel a szövegből, a második címsort határoz meg.
|
<a href="http://www.jgypk.hu">...</a>
| |
<link href="http://www.jgypk.hu">...</link>
| |
<a href=http://www.jgypk.hu />
|
<img src="kep.png" />
| |
<img src="kep.png">...</img>
| |
<img href="kep.png">...</img>
|
<ol><li>...</li>...</ol>
| |
<ul><li>...</li>...</ul>
| |
<ol><ul>...</ul>...</ol>
|