Homepage Logo

Így készíts weboldalakat!

Bevezetés a HTML világába

A HTML az a „nyelv”, aminek segítségével megmondod a böngészőnek, hogy mit szeretnél megjeleníteni: szövegeket, képeket, gombokat, listákat. Ez az első lecke segít megérteni, hogyan épül fel egy alap HTML oldal, és mik azok az elemek, amikre tényleg szükség van.

Hogyan épül fel nagyvonalakban egy HTML oldal?

Ha belenéznél egy HTML fájlba, három nagy részt látnál:

Nincs benne semmi varázslat — logikus, szinte dokumentumszerű felépítés.

Az alap HTML szerkezet

Egy minimális, abszolút működő HTML oldal így néz ki:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Első HTML oldalam</title>
    </head>

    <body>
        <h1>Helló, web!</h1>
        <p>Ez az első HTML oldalam tartalma.</p>
    </body>
</html>

A legfontosabb elemek röviden

<!DOCTYPE html>

Ezzel jelzed a böngészőnek: modern HTML-t fog kapni.

<html>

A teljes dokumentum gyökere. Minden ebben a tagben él.

<head>

Itt vannak a háttérben futó, „nem látható” dolgok: oldal címe, metaadatok, stílusok, script fájlok.

<body>

A weboldal tényleges tartalma: szövegek, gombok, képek, listák.

Alap tagek a tartalomhoz

Címsorok: <h1>–<h6>

Hat különböző fontossági szint létezik. A <h1> a legerősebb, a <h6> a leggyengébb.

<h1>Főcím</h1>
<h2>Alcím</h2>
<h3>Melléktéma</h3>

<p> — Bekezdés

Egyszerű szövegrész:

<p>Ez itt egy bekezdés.</p>

<br> — Sortörés

<strong> — Erős kiemelés

Például:

<p>Ez egy <strong>nagyon fontos</strong> gondolat.</p>

Hogyan gondolkodj a HTML-ről?

A HTML nem programozás. Sokkal inkább olyan, mintha egy dokumentumot osztanál részekre:

A böngészőnek csak jelzed, hogy mi micsoda. Hogy hogyan néz ki? Azt majd a CSS intézi később.

Vissza az Oktatóanyagokhoz