2. modul · HTML alapok · 4. lecke
Egy weboldal túlnyomó része szöveg. Ebben a leckében megtanulod megjelölni a szöveget: mi a főcím, mi a bekezdés, mi a fontos, mi az idézet. Nem díszítünk — a díszítés a CSS dolga lesz. Itt jelentést adunk.
h1-től h6-ig.h1 van.strong/em és a b/i párost.<, >, & jeleket úgy, hogy ne törjön el az oldal.
Hat címsorszint létezik, a <h1>-től a
<h6>-ig. A h a heading (fejléc, címsor) szóból jön.
<h1>Első szintű címsor</h1> <h2>Második szintű</h2> <h3>Harmadik szintű</h3> <h4>Negyedik szintű</h4> <h5>Ötödik szintű</h5> <h6>Hatodik szintű</h6>
h5 és a h6 már kisebb, mint a sima szöveg —
pont ezért nem szabad őket „kis betűnek" használni.
A legnagyobb kezdő félreértés: „a h1 nagy betű, a
h3 kisebb". Nem. A címsor azt mondja meg, hogy a szöveg
hol áll a tartalom szerkezetében. Hogy ettől nagyobb betűvel jelenik meg, az csak a böngésző
alapértelmezése — amit a CSS-ben bármikor felülírsz.
Tehát: ne azért válassz h3-at, mert az akkora, amekkorát
szeretnél. Azért válaszd, mert az a tartalom harmadik szintje.
| Szabály | Miért? |
|---|---|
Egy oldalon egy h1 |
Ez az oldal főcíme — a „mi ez az oldal?" kérdésre válaszol. Egy oldalnak egy témája van. |
| Ne ugorj szintet | h1 után h2 jön, nem h4. Olyan ez, mint egy vázlat számozása: 1. → 1.1. → 1.1.1. |
| Lefelé bármennyit ugorhatsz | Egy h3 után jöhet új h2 — az új fejezetet nyit. |
| A címsor rövid | Egy egész bekezdést ne tegyél h2-be, még ha jól is néz ki. A címsor cím, nem szöveg. |
<h1>Rakott krumpli</h1>
<h2>Hozzávalók</h2>
<h3>Az alapokhoz</h3>
<h3>A tetejére</h3>
<h2>Elkészítés</h2>
<h2>Tippek</h2>
<h1>Rakott krumpli</h1>
<h4>Hozzávalók</h4>
<h2>Az alapokhoz</h2>
<h1>Elkészítés</h1>
<h6>Tippek</h6>
A behúzás a bal oldali példában csak a szemléltetés kedvéért van ott — a HTML-ben a címsorok egymás mellett állnak, nincsenek egymásba ágyazva. A szintjük adja a szerkezetet.
h2-re". Rossz hierarchiánál az oldalad használhatatlan lesz számukra.
A <p> (paragraph) a leggyakoribb elem az egész HTML-ben.
Egy összefüggő gondolatot fog össze.
Ezt már láttad az 1. leckében, most nézzük meg pontosan. A HTML az egymás melletti szóközöket, tabulátorokat és sortöréseket egyetlen szóközzé vonja össze. Ennek van neve: whitespace collapsing.
<p>Egy szó után sok szóköz és üres sorok is vannak.</p> <p>Ez egy másik bekezdés.</p>
<p> elem.
Ennek köszönhetően szabadon tördelheted és behúzhatod a kódot anélkül, hogy az eredmény megváltozna. Pont ezért lehet a HTML-forrás olvasható — ha a szóközök számítanának, minden sort egybe kellene írnunk.
Ne próbálj szóközökkel igazítani (behúzni, középre tenni, elválasztani). Nem fog működni, és ha mégis, akkor is rossz megoldás. A térközök és az igazítás CSS-feladat — a 17. leckétől kezdve megtanulod rendesen.
<p>-be címsort, listát vagy táblázatot. A bekezdés szöveget tartalmaz.A 3. leckében már találkoztál velük, itt nézzük meg, mikor helyes használni őket.
| Elem | Mikor használd? |
|---|---|
<br> |
Ha a sortörés a tartalom része: cím, vers, dalszöveg, feladó. Nem bekezdések elválasztására! |
<hr> |
Ha témaváltás van: új szakasz kezdődik. A böngésző vízszintes vonallal jelöli. |
<p> Nagy László<br> Kiss János utca 4.<br> 1052 Budapest </p> <hr> <p> Ki viszi át a Szerelmet<br> a túlsó partra? </p>
<br>.
<p>Első gondolat.</p> <br><br><br> <p>Második gondolat.</p>
<p>Első gondolat.</p> <p>Második gondolat.</p>
A jobb oldali változatban a térköz nagyságát majd egyetlen CSS-sorral állítod be — az összes bekezdésre egyszerre. A bal oldalinál minden egyes helyen kézzel kellene babrálni.
Négy elem, két megjelenés, de négy különböző jelentés. Ez a lecke legfontosabb fogalmi különbsége.
<p>Ez <strong>strong</strong> elemmel van.</p> <p>Ez <b>b</b> elemmel van.</p> <p>Ez <em>em</em> elemmel van.</p> <p>Ez <i>i</i> elemmel van.</p>
strong és a b ugyanúgy félkövér,
az em és az i ugyanúgy dőlt.
Szemre nincs köztük különbség — jelentésben viszont igen.
| Elem | Megjelenés | Jelentés — mikor használd? |
|---|---|---|
<strong> |
félkövér | Fontos! Figyelmeztetés, lényeg, amit nem szabad átsiklani. „Ezt vedd komolyan." |
<b> |
félkövér | Csak vizuálisan kiemelt, de nem fontosabb: terméknév egy listában, kulcsszó egy összefoglalóban. |
<em> |
dőlt | Hangsúly. Ha felolvasnád, itt megnyomnád a szót: „Én nem mondtam ilyet." |
<i> |
dőlt | Más jellegű szöveg: idegen szó, latin kifejezés, hajónév, gondolat. Nem hangsúly. |
Tedd fel a kérdést: „Ha valaki felolvasná, máshogy mondaná ezt a szót?"
strong vagy emb vagy i
Amíg nem érzed a különbséget, használd a strong-ot és az
em-et. Ezek a „biztonságos" választások: ha kell a nyomaték,
jól jelölted; ha nem kell, akkor sem okoztál bajt.
<p> <strong>Figyelem:</strong> a sütőt <em>előre</em> melegítsd fel! </p> <p> A <i>Titanic</i> 1912-ben süllyedt el. </p> <p> Ma a <b>rakott krumplit</b> nézzük meg. </p>
<p>A keresett szó: <mark>kiemelve</mark>.</p> <p>Ár: <del>4990 Ft</del> <ins>3490 Ft</ins></p> <p>Képlet: H<sub>2</sub>O, és 5<sup>2</sup> = 25</p> <p><small>A készlet erejéig.</small></p> <p>A <abbr title="HyperText Markup Language">HTML</abbr> jelölőnyelv.</p>
abbr alatt pontozott aláhúzás jelenik meg — vidd rá az egeret, és
megjelenik a title attribútumban megadott teljes név.
| Elem | Megjelenés | Mire való? |
|---|---|---|
<mark> | sárga háttér | Kiemelés, mintha szövegkiemelővel húztad volna át. Például találat a keresésben. |
<del> | áthúzott | Törölt, már nem érvényes szöveg. Például régi ár. |
<ins> | aláhúzott | Beszúrt, új szöveg. A del párja. |
<sub> | alsó index | Kémiai képletek: H2O, CO2. |
<sup> | felső index | Hatványok, lábjegyzetszámok, m2. |
<small> | kisebb betű | Apróbetűs rész: jogi megjegyzés, szerzői jog, feltételek. |
<abbr> | pontozott aláhúzás | Rövidítés. A title attribútumban add meg, mit jelent. |
A fenti „megjelenés" oszlop a böngészők alapértelmezését írja le. Egy
<mark> nem azért sárga, mert a HTML így rendeli, hanem mert a
böngésző így dönt. CSS-sel bármelyiket átszínezed. A jelentés viszont marad.
Két elem van rá, aszerint, hogy az idézet hosszú-e vagy rövid.
<p>Ahogy a mondás tartja: <q>a jó munkához idő kell</q>.</p> <blockquote> <p>A HTML nem programozási nyelv, hanem jelölőnyelv. Ez a különbség nem szőrszálhasogatás.</p> <p>— <cite>Egy tanár</cite></p> </blockquote> <p>A szöveg itt folytatódik.</p>
<q> köré a böngésző magától kirakja az idézőjeleket —
nem neked kell begépelni! Ráadásul a lang attribútumnak megfelelő
idézőjelet használja. A <blockquote>-ot behúzva jeleníti meg.
| Elem | Mikor? |
|---|---|
<q> | Rövid, mondaton belüli idézet. Idézőjelet magától kap. |
<blockquote> | Hosszú, önálló blokkban álló idézet. Bekezdéseket tegyél bele. |
<cite> | A forrás megnevezése: mű, könyv, cikk címe vagy a szerző. Dőlten jelenik meg. |
Ha az idézetnek van webes forrása, add meg a cite attribútumot
(ne keverd össze a <cite> elemmel):
<blockquote cite="https://example.com/cikk"> <p>Az idézett szöveg.</p> </blockquote>
Ez nem látszik az oldalon — a keresőknek és a programoknak szól.
Ha az oldalad kódot mutat be (mint ez a tananyag), két elemre lesz szükséged — és fontos, hogy melyiket mikor.
<p>Használd a <code>margin</code>
tulajdonságot.</p>
<pre><code>body {
margin: 0;
padding: 20px;
}</code></pre>
<p>Nyomj <kbd>Ctrl</kbd> + <kbd>S</kbd>
billentyűt.</p>
<pre> a kivétel a szóköz-összevonás alól:
pontosan megtartja a szóközöket és a sortöréseket. Ezért marad meg benne a behúzás.
| Elem | Mire való? |
|---|---|
<code> | Kódrészlet a szövegen belül: egy elemnév, egy tulajdonság, egy fájlnév. Írógép-betűvel jelenik meg. |
<pre> | Előformázott szöveg: megtartja a szóközöket és a sortöréseket. Több soros kódhoz. |
<kbd> | Billentyű, amit a felhasználónak le kell nyomnia. |
<samp> | A program kimenete, hibaüzenet. |
A bevett minta: <pre><code>...</code></pre>.
A pre adja a formázás megőrzését, a code a
jelentést („ez kód").
Figyeld meg a példában: a két nyitó tag közvetlenül egymás után áll, szóköz és
sortörés nélkül. Ha közéjük ütnél egy Entert, az megjelenne üres sorként a kimenetben —
a pre ugyanis mindent megőriz.
Mi történik, ha ki akarod írni az oldalra, hogy 5 < 8? A böngésző a
< jelet tag kezdetének nézi, és összezavarodik.
Erre valók a karakterentitások: különleges kódok, amikkel „körülírsz" egy karaktert.
Minden entitás & jellel kezdődik és ;
jellel végződik.
<p>Ha 5 < 8, akkor 8 > 5.</p> <p>Kata & Peti</p> <p>A bekezdés tagje: <p></p>
<, >
és & jelek szövegként jelenjenek meg.
Ezzel a trükkel írja ki ez a tananyag is az összes HTML-példát.
| Entitás | Eredmény | Mire? |
|---|---|---|
< | < | Kötelező — kisebb jel (less than) |
> | > | Kötelező — nagyobb jel (greater than) |
& | & | Kötelező — és-jel (ampersand) |
| · | Törhetetlen szóköz — itt nem tör sort a böngésző. Például: 10 km |
© | © | Copyright-jel |
… | … | Három pont egyetlen karakterként |
— | — | Hosszú gondolatjel |
→ | → | Jobbra mutató nyíl |
Régi tananyagokban látni fogsz ilyet: á az
á helyett. Erre ma nincs szükség. Ha van
<meta charset="UTF-8"> a fájlodban, egyszerűen leírod:
á, ő, ű.
Sokkal olvashatóbb.
?
Ha nem akarod, hogy két összetartozó dolgot elválasszon a sortörés. Például
10 kg, Dr. Kovács vagy
2024. május. Így a szám és a mértékegység mindig egy sorba kerül.
Amire viszont nem való: behúzás vagy térköz csinálása. Az CSS-feladat.
| Hiba | Miért baj, és mi helyette? |
|---|---|
| Címsor választása méret alapján | Elromlik a szerkezet és az akadálymentesség. Válaszd a szint szerint, a méretet CSS-sel állítsd. |
Több <h1> egy oldalon |
Nem derül ki, mi az oldal témája. Egy főcím, alatta h2-k. |
<br><br> térköz gyanánt |
Kézzel adagolt, karbantarthatatlan térköz. Használj külön <p>-ket. |
| Szóközökkel igazítani | A HTML összevonja őket, tehát nem is működik. CSS-re tartozik. |
Címsort tenni <p>-be |
Érvénytelen szerkezet. A bekezdés szöveget tartalmaz, nem címsort. |
Idézőjelet begépelni a <q> köré |
Dupla idézőjelet kapsz, mert a böngésző is kirakja. Hagyd rá. |
< jelet szövegben, entitás nélkül |
A böngésző tagnak nézi, és a szöveg egy része eltűnik. Írj <-t. |
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Egy alcímet szeretnél, ami kisebb betűs legyen, mint a többi. Választhatsz-e emiatt <h5>-öt?
Nem. A címsorszint a tartalom szerkezetében elfoglalt helyet jelöli, nem a méretet. Válaszd a szint szerint helyes címsort (pl. h3), és a méretét állítsd be CSS-sel.
2. Mi jelenik meg ebből: <p>Egy kettő</p> (öt szóközzel)?
Egy kettő — egyetlen szóközzel. A HTML az egymás melletti szóközöket, tabokat és sortöréseket egyetlen szóközzé vonja össze.
3. „Figyelem, a gáz zárva legyen!" — melyik szót milyen elemmel jelölnéd?
A „Figyelem" valódi fontosság → <strong>. A „zárva" hangsúly, amit felolvasva megnyomnál → <em>.
4. Mi a különbség a <b> és a <strong> között, ha egyszer ugyanúgy néznek ki?
Csak a jelentésükben. A strong azt mondja: „ez fontos" — a felolvasó programok nyomatékkal mondják, a keresők súlyozzák. A b csak vizuális kiemelés, jelentés nélkül. Kezdőként használd a strong-ot.
5. Miért nem működik a behúzás egy <p>-ben, de működik egy <pre>-ben?
Mert a pre az egyetlen elem, amelyik kivétel a szóköz-összevonás alól: pontosan megtartja a szóközöket és a sortöréseket. Ezért alkalmas kód megjelenítésére.
6. Ki akarod írni az oldalra: a & b. Hogyan írod a HTML-be?
a & b. Az & az entitások kezdőjele, ezért magát az és-jelet is entitással kell írni.
7. Szeretnéd, hogy a „25 kg" ne törjön ketté a sor végén. Mit teszel közé?
Törhetetlen szóközt: 25 kg. Így a böngésző nem tördeli szét a számot és a mértékegységet.
h1 oldalanként, szintugrás nélkül lefelé.<p> egy összefüggő gondolat. Új gondolat → új bekezdés.<br> csak akkor, ha a sortörés a tartalom része. Térközhöz soha.strong = fontos · em = hangsúly · b és i = csak vizuális. Kérdés: „felolvasva máshogy mondanád?"mark, del, ins, sub, sup, small, abbr.<q> (az idézőjelet a böngésző adja), hosszúhoz <blockquote>, forráshoz <cite>.<code>, több sorhoz <pre><code>.<, >, &. Ékezethez nem kell entitás, ha van UTF-8.