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

iDevice ikon Célok
  • 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

Tartalom
  • 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" />

8. Ábra: A kép méretezésének hatása
 
A kép mérete megadható stílussal is, az értékek beállításának elve megegyezik a HTML attribútumokéval, de itt megadható százalék is:
width : 50%;
height : 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.
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;

9. Ábra: Felsorolt lista list-style-position tulajdonsága

 

 

iDevice ikon Feladat
Készítsen el egy olyan oldalt, amely az ön önéletrajzát tartalmazza! Kiindulásnak használja a 3. leckében megírt alapforrást! Adjon az oldalnak címet és bontsa az adatait csoportokra és használjon alcímeket azokhoz! A csoportok legyenek:
  • személyes adatok,
  • iskolák,
  • végzettségek,
  • érdeklődési kör.
Töltse ki a megfelelő részeket úgy, hogy használja a szövegelemeket és a szövegformázásokat a megfelelő kijelölésekkel! Az iskoláknál használjon sorszámozást, a végzettségnél felsorolást! Az iskolákhoz készítsen linkeket, amelyek az intézmények weboldalára mutat és új ablakban nyitja meg azokat! A személyes adatokhoz illessze be a saját képét! A érdeklődési kör részbe egy bekezdésekre tagolt hosszabb szöveget írjon, amiből kiemeli a lényegesebb kulcsszavakat és kifejezéseket!

iDevice kérdés ikon Feleletválasztós teszt
Mi a különbség a blokkos és a sorközi elemek között?
  
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ú.

Melyik a helyes állítás?
  
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.

Melyik a helyes megadása a linknek?
  
<a href="http://www.jgypk.hu">...</a>
<link href="http://www.jgypk.hu">...</link>
<a href=http://www.jgypk.hu />

Melyik a helyes megadása a képnek?
  
<img src="kep.png" />
<img src="kep.png">...</img>
<img href="kep.png">...</img>

Mi a helyes megadása a sorszámozott listának?
  
<ol><li>...</li>...</ol>
<ul><li>...</li>...</ul>
<ol><ul>...</ul>...</ol>