2. fejezet¶

Ebben a részben folytatjuk a HTML dokumentum törzsrészében (body) használatos tagekkel való ismerkedést.

Szakaszok¶

HTML-ben lehetőségünk van a weboldal tartalmának strukturálására is. Ezt szakaszok, tartalmi egységek kialakításával tehetjük meg.

A <div>...</div> egy általános célú blokkszintű (block) szakasz. A blokkszintű elemek mindig új sorban kezdődnek, és kihasználják a teljes rendelkezésre álló szélességet.

A <span>...</span> egy átalános célú sorszintű (inline) szakasz. A sorszintű elemek nem kezdődnek új sorban, illetve szélességük csak akkora, mint amekkora helyre szükségük van.

Szabály

Egy sorszintű (inline) HTML elem nem tartalmazhat blokkszintű (block) elemet.

Példa: A <span> és <div> tagek használata. A kód kimenetében a szemléletesség kedvéért a <div>-ek által meghatározott szakaszokat világoskék, míg a <span> által meghatározott szakaszt sárga háttérrel jelöltük

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Szakaszok</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div>
      <h2>1. tartalmi egység</h2>
      <p>Ez egy bekezdés.</p>
      <p>Ez egy másik bekezdés.</p>
    </div>
    <div>
      <h2>2. tartalmi egység</h2>
      <p>Ez egy olyan bekezdés, ami egy <span>span elemet</span> tartalmaz.</p>
    </div>
  </body>
</html>

A kód kimenete, színezéssel kiegészítve

Listák¶

A HTML listák lehetőséget biztosítanak arra, hogy egymáshoz kapcsolódó információkat egy csoportba gyűjtve sorolhassunk fel. Két fontos listatípus:

<ul>...</ul>: rendezetlen (számozatlan) lista
- akkor használjuk, ha a listaelemek között nincs megállapítható sorrend
- a listaelemeket a <li>...</li> taggel adhatjuk meg
<ol>...</ol>: rendezett (számozott) lista
- akkor használjuk, ha számít a listaelemek sorrendje
- a listaelemeket a <li>...</li> taggel adhatjuk meg
- fontosabb attribútumok:
  - reversed: fordított számozás
  - start: számozás kezdősorszáma
  - type: felsorolásjel típusa
    - lehetséges értékei: 1: arab szám, i: "kisbetűs" római szám, I: "nagybetűs" római szám, a: kisbetű, A: nagybetű

Példa: Rendezetlen és rendezett lista

<!-- Rendezetlen (számozatlan) lista -->
<ul>
  <li>Kenyér</li>
  <li>Tej</li>
  <li>Felvágott</li>
</ul>

<!-- Rendezett (számozott) lista -->
<ol>
  <li>Nyisd ki a szemed!</li>
  <li>Nyomd ki az ébresztőt!</li>
  <li>Aludj vissza!</li>
</ol>

A kód kimenete

A fenti listatípusokból készíthetünk többszintű listát is. Ennek a lényege, hogy egy listaelembe egy másik listát ágyazunk be.

Példa: Többszintű lista

<ol>
  <li>Első listaelem</li>
  <li>
    Második listaelem
    <ol type="a">
      <li>Első allista elem</li>
      <li>Második allista elem</li>
    </ol>
  </li>
  <li>Harmadik listaelem</li>
</ol>

A kód kimenete

Táblázatok¶

A <table>...</table> taggel egy táblázatot szúrhatunk be a weboldalunkra. A táblázat egy sorát a <tr>...</tr> tag segítségével adhatjuk meg. Az egyes sorokon belül létrehozhatunk fejléccellákat (<th>...</th> tag), illetve adatcellákat (<td>...</td> tag).

Ha szeretnénk egy táblázatnak címet adni, akkor ezt a <caption>...</caption> taggel tehetjük meg, amit mindig közvetlenül a <table> után kell írnunk.

Példa: Egy egyszerű táblázat

<table>
  <caption>Kínálatunk</caption>
  <tr>
    <th>Pizza neve</th>
    <th>Ár</th>
  </tr>
  <tr>
    <td>Sonkás-kukoricás</td>
    <td>1800 Ft</td>
  </tr>
  <tr>
    <td>Négysajtos</td>
    <td>2000 Ft</td>
  </tr>
</table>

Lehetőségünk van arra is, hogy egy táblázatban sor- és oszlopösszevonásokat végezzünk: a celláknak adott rowspan attribútummal megadhatjuk az összevonni kívánt sorok számát, a colspan attribútummal pedig az összevonni kívánt oszlopok számát.

Azt is meg tudjuk mondani, hogy egy táblázatcella mely fejléccellá(k)hoz tartozik. Ezt a következőképpen tehetjük meg:

a fejléccelláknak adunk egy-egy id attribútumot (egyedi azonosítót)
a cellák headers attribútumaként megadjuk azon fejléccellá(k)nak az id-értékét, ami(k)hez az adott cella tartozik.

Ha a headers attribútumot ennek megfelelően használjuk, akkor a képernyőolvasó programok a táblázatcellák esetén azt is felolvassák, hogy az adott cella melyik fejléccellá(k)hoz tartozik. Ezáltal a képernyőolvasókat használó felhasználói csoportok (pl. vakok, látássérültek) számára egyszerűbb lesz a táblázatban szereplő adatok értelmezése.

Példa: Az előző táblázat kiegészítése sor- és oszlopösszevonással, valamint fejléccella-társítással

<table>
  <caption>Kínálatunk</caption>
  <tr>
    <th id="nev">Pizza neve</th>
    <th id="ar">Ár</th>
    <th id="extra">Rendelés esetén jár még</th>
  </tr>
  <tr>
    <td headers="nev">Sonkás-kukoricás</td>
    <td headers="ar">1800 Ft</td>
    <td headers="extra" rowspan="2">Ajándék szósz és üdítő</td>
  </tr>
  <tr>
    <td headers="nev">Négysajtos</td>
    <td headers="ar">2000 Ft</td>
  </tr>
  <tr>
    <td headers="nev">Hawaii</td>
    <td headers="ar extra" colspan="2">NEM RENDELHETŐ!</td>
  </tr>
</table>

A HTML táblázatok sorait 3 fő egységre bonthatjuk:

<thead>...</thead>: fejlécsorok csoportja
<tbody>...</tbody>: adatsorok csoportja, a táblázat törzse
<tfoot>...</tfoot>: láblécsorok csoportja.

A fenti tagek használata opcionális, nem kötelező. Használatuk esetén, ha papírra nyomtatjuk ki a weboldal tartalmát, akkor a hosszabb, több lapon átívelő táblázatoknál a <thead> és a <tfoot> minden nyomtatott oldalon megjelenik.

Ha szeretnénk a táblázat oszlopait csoportosítani (pl. formázás céljából), akkor ezt a <colgroup>...</colgroup> taggel tehetjük meg. Ezt közvetlenül a <caption> után (ha van caption) és a <thead> elé (ha van thead) írjuk. Az oszlopcsoportosításon belül a <col/> páratlan tag jelöl egy oszlopot. Ha egyszerre több, mondjuk N darab oszlopot szeretnénk kijelölni a csoportosításban, akkor ezt a <col span="N"/> segítségével tudjuk megtenni.

Példa: Az előző táblázat kiegészítése a sorok és oszlopok csoportosításával

<table>
  <caption>Kínálatunk</caption>
  <colgroup>
    <!-- az első oszlop világospiros háttérszínű lesz -->
    <col style="background-color: salmon;"/>
    <!-- a következő 2 oszlop világoszöld háttérszínt kap -->
    <col style="background-color: lightgreen;" span="2"/>
  </colgroup>
  <thead>
    <tr>
      <th id="nev">Pizza neve</th>
      <th id="ar">Ár</th>
      <th id="extra">Rendelés esetén jár még</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="nev">Sonkás-kukoricás</td>
      <td headers="ar">1800 Ft</td>
      <td headers="extra" rowspan="2">Ajándék szósz és üdítő</td>
    </tr>
    <tr>
      <td headers="nev">Négysajtos</td>
      <td headers="ar">2000 Ft</td>
    </tr>
    <tr>
      <td headers="nev">Hawaii</td>
      <td headers="ar extra" colspan="2">NEM RENDELHETŐ!</td>
    </tr>
  </tbody>
  <!-- itt még lehetne akár egy <tfoot> is, viszont ez opcionális... -->
</table>

A kód kimenete

Néhány további fontosabb HTML elem¶

<h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6>: címsorok
<p>...</p>: bekezdés
<br/>: sortörés (páratlan tag)
<hr/>: horizontális elválasztó vonal (páratlan tag)
<pre>...</pre>: előre formázott szöveg
- alakhű megjelenést biztosít: az ilyen taggel megadott szövegek megőrzik a whitespace karaktereket (szóközöket, tabulátorokat, sortöréseket)
- akkor használjuk, ha a szöveg jellegéből szemantikusan következik a tartalom szóközökkel, térközökkel való formázása (pl. billentyűrajzok, kódrészletek, képversek)

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <h1>Piramis</h1>
    <hr/>
    <pre>
          0
         0 0
        0 0 0
       0 0 0 0
    </pre>
    <p>A piramis egy négyzet alapú <br/> gúla alakú építmény.</p>
  </body>
</html>

A kód kimenete

<em>...</em>: a tartalom hangsúlyozására használjuk
- szemantikus jelentéssel bír
- a képernyőolvasó programok másképp olvassák fel, mint a hagyományos szövegeket
- a böngészők általában dőlt betűkkel jelenítik meg
<strong>...</strong>: a tartalom erős kiemelésére használjuk
- szemantikus jelentéssel bír
- a képernyőolvasó programok másképp olvassák fel, mint a hagyományos szövegeket
- a böngészők általában félkövér betűkkel jelenítik meg

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <p><em>Ricsi</em> ma vizsgázik Prog2-ből.</p>   <!-- Ki vizsgázik? -->
    <p>Ricsi <em>ma</em> vizsgázik Prog2-ből.</p>   <!-- Mikor vizsgázik? -->
    <p>Ricsi ma vizsgázik <em>Prog2-ből</em>.</p>   <!-- Miből vizsgázik? -->

    <p><strong>Figyelem!</strong> A ketrecbe benyúlni veszélyes!</p>
  </body>
</html>

A kód kimenete

Figyelem

A HTML tageket NE használjuk formázási célokra! Ha egy szöveget félkövérré vagy dőltté szeretnénk tenni, használjunk CSS-t!

<sub>...</sub>: alsó index
<sup>...</sup>: felső index
<q>...</q>: inline idézet (az idézőjeleket automatikusan kiteszi)
<blockquote>...</blockquote>: idézetblokk
<code>...</code>: kódrészlet
<mark>...</mark>: vizuális szövegkiemelés

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Fontosabb HTML elemek</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <p>Alsó index: x<sub>2</sub>, felső index: x<sup>2</sup></p>
    <p><q>A Webtervezés még könnyű tárgynak számít</q></p>

    <blockquote>
      Never gonna give you up <br/>
      Never gonna let you down <br/>
      Never gonna run around <br/>
      And desert you
    </blockquote>

    <p>Egy C program belépési pontja: <code>int main(int argc, char **argv)</code></p>
    <p>bla bla bla <mark>ez itt a lényeg</mark> bla bla bla</p>
  </body>
</html>

A kód kimenete

A HTML5 szemantikus tagek¶

Az 1. fejezetben láttunk példát a weboldalak tartalmának strukturálására. Emlékeztetőül: a <div> és <span> tagekkel általános célú szakaszokat, tartalmi egységeket alakítottunk ki.

A <div> egy blokkszintű (block) objektum, ami azt jelenti, hogy mindig új sorban kezdődik, és kihasználja a teljes rendelkezésre álló szélességet. Ezzel szemben a <span> egy sorszintű (inline) elem, tehát nem kezdődik új sorban, és szélessége is csak akkora, mint amekkora helyre szüksége van.

A <div> és <span> tagek mellé, a HTML5 szabványban új, szemantikus jelentéssel bíró strukturális elemeket vezettek be:

<header>...</header>: az oldal vagy egy tartalmi egység fejléce
<footer>...</footer>: az oldal vagy egy tartalmi egység lábléce
<nav>...</nav>: navigációs menü
<aside>...</aside>: érintőlegesen kapcsolódó tartalom (jellemzően oldalsáv)
<main>...</main>: fő tartalom
<section>...</section>: logikai egység
<article>...</article>: önálló tartalom.

A fenti tagek kivétel nélkül blokkszintű (block) elemek, a <div>-hez hasonlóan.

Ezek a tagek - az általános célú <div> és <span> tagekkel ellentétben - szemantikai jelentéssel bírnak, tehát egyértelműen meghatározzák a tartalmuk jelentését (pl. egy <nav>-ról tudjuk, hogy valamilyen navigációt valósít meg).

A HTML5-ben bevezetett szemantikus tageket felhasználva precízebben leírhatjuk egy weboldal szerkezetét. A szemantikus HTML5 tagek nemcsak a kód olvashatóságát és karbantarthatóságát javítják, hanem segítenek a keresőmotoroknak és egyéb eszközöknek is jobban értelmezni az oldalt. Ezekkel a tagekkel készíthetünk például az alábbihoz hasonló elrendezésű weboldalt. (Az ábra forrása)

HTML5 szemantikus tagek

Megjegyzés

Ahhoz, hogy az ábrán látotthoz hasonló elrendezést kapjunk, a tanult tagek használata önmagában nem elegendő (pl. az <aside> nem fog automatikusan oldalra kerülni). Az elemek helyzetének megadására a CSS-beli pozicionálást használhatjuk.

Utolsó frissítés: 2024-08-16 17:08:00