Ugrás a fő tartalomhoz

Alapvető HTML elemek

1. Címsorok (Headings)

A HTML hat különböző szintű címsort biztosít, <h1>-től <h6>-ig. A <h1> a legnagyobb, legfontosabb címsor.

Példák:

<h1>Ez egy főcím</h1>
<h2>Ez egy alcím</h2>
<h3>Ez egy harmadik szintű cím</h3>
<h4>Ez egy negyedik szintű cím</h4>
<h5>Ez egy ötödik szintű cím</h5>
<h6>Ez a legkisebb címsor</h6>

Gyakorlati tippek:

  • Oldalanként csak egy <h1> címsort használj
  • Tartsd be a hierarchiát (ne ugorj át szinteket)
  • A címsorok segítik a keresőmotorokat és a képernyőolvasókat

2. Bekezdések (Paragraphs)

A bekezdéseket a <p> elemmel hozzuk létre. Ez az egyik leggyakrabban használt HTML elem.

Példák:

<p>Ez egy egyszerű bekezdés.</p>
<p>Ez egy másik bekezdés. A böngésző automatikusan
térközt helyez el a bekezdések között.</p>

Fontos tudnivalók:

  • A böngésző figyelmen kívül hagyja a felesleges szóközöket és sortöréseket
  • Minden bekezdés új sorban kezdődik
  • A bekezdések között automatikus térköz jelenik meg

3. Szövegformázási elemek

Félkövér szöveg

Két lehetőség van:

<strong>Ez fontos szöveg</strong>
<b>Ez is félkövér szöveg</b>
  • A <strong> szemantikai jelentéssel bír (fontos szöveg)
  • A <b> csak vizuális formázást jelent

Dőlt szöveg

Szintén két lehetőség:

<em>Kiemelt szöveg</em>
<i>Dőlt szöveg</i>
  • Az <em> szemantikai kiemelést jelent
  • Az <i> csak vizuális formázást jelent

Kombinált formázás

A formázási elemek egymásba ágyazhatók:

<p>Ez egy <strong>nagyon <em>fontos</em></strong> szöveg.</p>

4. Sortörés

A <br> elem új sort kezd. Ez egy üres elem, nincs záró címkéje.

Példák:

<p>Ez az első sor.<br>
Ez már a második sorban van.</p>

Mikor használjuk:

  • Verssorok között
  • Címekben vagy elérhetőségeknél
  • Ne használjuk bekezdések közötti térköz létrehozására!

5. Betűtípusok és Színek a HTML-ben

A font elem (elavult)

A <font> elem régebben használt megoldás volt a betűtípusok és színek beállítására, de ma már elavultnak számít:

<!-- ELAVULT, NE HASZNÁLD! -->
<font face="Arial" color="blue" size="3">Ez kék színű Arial betűtípusú szöveg</font>

Miért ne használjuk a HTML-ben a formázást?

  1. Szétválasztás elve

    • A HTML a tartalomért felel
    • A CSS a megjelenésért felel
    • A JavaScript a viselkedésért felel
  2. Karbantarthatóság

    • A CSS-ben központilag kezelhetjük a stílusokat
    • Egy helyen módosítva minden elem megjelenése változik
    • Könnyebb a designt frissíteni
  3. Teljesítmény

    • Kisebb fájlméret
    • A CSS cache-elhető
    • Gyorsabb betöltés
  4. Következetesség

    • A CSS biztosítja az egységes megjelenést
    • Könnyebb a stílusokat újrahasználni
    • Professzionálisabb végeredmény

Helyes megoldás CSS használatával

<!-- HTML fájl -->
<p class="kiemelt-szoveg">Ez egy kiemelt szöveg</p>
/* CSS fájl */
.kiemelt-szoveg {
font-family: Arial, sans-serif;
color: #0066cc;
font-size: 16px;
}

CSS előnyei a betűtípusok kezelésében:

  1. Betűtípus-családok

    body {
    font-family: 'Open Sans', Arial, sans-serif;
    }
    • Több alternatívát adhatunk meg
    • Fallback betűtípusokat definiálhatunk
    • Web-biztos betűtípusokat használhatunk
  2. Web fontok

    @font-face {
    font-family: 'SajatBetutipus';
    src: url('betutipus.woff2') format('woff2');
    }
    • Egyedi betűtípusokat tölthetünk be
    • Több formátumot támogathatunk
    • Optimalizálhatjuk a betöltést
  3. Rugalmas méretezés

    p {
    font-size: 1.2em;
    line-height: 1.5;
    }
    • Relatív méreteket használhatunk
    • Reszponzív tipográfiát alakíthatunk ki
    • Könnyebb a karbantartás

CSS előnyei a színek kezelésében:

  1. Többféle színmegadási mód

    .szoveg {
    color: #ff6600; /* Hexadecimális */
    color: rgb(255, 102, 0); /* RGB */
    color: hsl(24, 100%, 50%); /* HSL */
    color: rgba(255, 102, 0, 0.5); /* Átlátszóság */
    }
  2. Színváltozók

    :root {
    --primary-color: #0066cc;
    --secondary-color: #ff6600;
    }

    .gomb {
    background-color: var(--primary-color);
    }
  3. Színátmenetek

    .hatter {
    background: linear-gradient(to right, #ff6600, #0066cc);
    }

6. Gyakorlati példa

Nézzünk egy komplex példát, amely az összes tanult elemet tartalmazza:

<!DOCTYPE html>
<html>
<head>
<title>Verstanulás</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Petőfi Sándor: Nemzeti dal</h1>

<h2>Első versszak</h2>
<p class="vers-szakasz">
Talpra magyar, hí a haza!<br>
Itt az idő, most vagy soha!<br>
Rabok legyünk vagy <strong>szabadok</strong>?<br>
Ez a kérdés, válasszatok!
</p>

<h3>A vers keletkezése</h3>
<p class="leiras">
A verset Petőfi <em>1848. március 13-án</em> írta, és
másnap szavalta el a <strong>Nemzeti Múzeum</strong> lépcsőjén.
</p>
</body>
</html>
/* styles.css */
body {
font-family: 'Georgia', serif;
line-height: 1.6;
color: #333;
}

h1 {
color: #2c3e50;
font-size: 2.5em;
}

.vers-szakasz {
font-family: 'Times New Roman', serif;
margin: 20px 0;
font-size: 1.2em;
}

.leiras {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 15px;
border-left: 3px solid #2c3e50;
}

7. Jó gyakorlatok és tippek

  1. Szemantikus használat

    • Használj <strong> és <em> elemeket <b> és <i> helyett, ha a tartalom jelentése fontos
    • A címsorokat fontossági sorrendben használd
    • A formázásokat mindig CSS-ben valósítsd meg
  2. Olvashatóság

    • Használj megfelelő behúzást
    • A bekezdéseket különítsd el egymástól
    • Ne használj felesleges üres sorokat a kódban
    • A CSS-ben kommentezd a komplexebb stílusokat
  3. Elkerülendő hibák

    • Ne használj inline stílusokat (style attribútum)
    • Ne használj elavult HTML formázó elemeket (<font>, <center>)
    • Ne keverd a HTML és CSS felelősségi köreit

8. Gyakorló feladatok

  1. Alapszintű feladat Készíts egy egyszerű bemutatkozó oldalt magadról:

    • Használj főcímet a nevedhez
    • Írj egy bekezdést a hobbijaidról
    • A formázásokat CSS-ben valósítsd meg
  2. Haladó feladat Készítsd el kedvenc versed vagy dalszöveged formázott változatát:

    • Használj címsorokat a szerkezet kialakításához
    • A verssorokat sortöréssel válaszd el
    • Készíts hozzá stíluslapot egyedi betűtípusokkal és színekkel

9. Ellenőrző kérdések

  1. Mi a különbség a <strong> és <b> elemek között?
  2. Mikor használjunk sortörést (<br>) és mikor új bekezdést (<p>)?
  3. Miért jobb CSS-ben kezelni a formázásokat?
  4. Milyen előnyei vannak a külső CSS fájl használatának?
  5. Hogyan lehet biztonságosan web fontokat használni?
  6. Mi a különbség az inline stílusok és a külső CSS között?
  7. Miért fontos a szemantikus HTML használata?
  8. Hogyan lehet hatékonyan kezelni a színeket CSS-ben?

A következő leckében a HTML táblázatokkal fogunk foglalkozni, amelyek segítségével strukturált adatokat jeleníthetünk meg az oldalunkon.