2.1. fejezet¶

A fejezet anyaga¶

HTML alapok II.¶

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

Néhány fontosabb HTML elem¶

<h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6>: címsorok
<p>...</p>: bekezdés
<br/>: sortörés (páratlan tag)
<hr/>: 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

Iframe-ek¶

Az <iframe>...</iframe> taggel beszúrhatunk a weboldalunkra egy úgynevezett lebegőkeretet (inline frame, röviden iframe). Ezekben a lebegőkeretekben lehetőségünk van megnyitni egy másik weboldalt.

Az <iframe> tag fontosabb attribútumai:

src: a megnyitni kívánt weboldal URL-je
width: a keret szélessége (pixelben)
height: a keret magassága (pixelben).

Példa: Szúrjuk be a TTIK honlapját a weboldalunkra egy 600x600-as iframe-ben!

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Iframe példa</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <iframe src="https://sci.u-szeged.hu/" width="600" height="600"></iframe>
  </body>
</html>

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

Utolsó frissítés: 2024-02-10 17:23:02