HTML állomány felépítése

HTML állomány kiterjesztése
A HTML állományok kiterjesztése .html vagy .htm lehet.
A böngészők, és a fejlesztésre használt szövegszerkesztők automatikusan felismerik, és statikus weboldalként kezelik ezeket az állományokat.
Doctype
A HTML dokumentum a típusmeghatározással kezdődik, ez a !DOCTYPE.
Ez alapján azonosítja be a böngésző a dokumentum típusát, ettől függ az elemek megjelenítésének módja.
Kötelezően a HTML állomány első sorában, a többi elem előtt kell elhelyezni.
A !DOCTYPE nem érzékeny a kis- és nagybetűk különbözőségére
XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".../xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".../xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ".../xhtml1-frameset.dtd">
Régebbi verzióknál a !DOCTYPE tartalmazta a DTD (Document Type Definition) állományokra mutató hivatkozást, a HTML 5 esetében ez az elem is egyszerűsödött.
HTML 5
<!DOCTYPE html>
Mi történik akkor ha elhagyjuk a dokumentum típusát? A böngésző megpróbálja kitalálni a dokumentum tartalma alapján, hogy hogyan kell azt megjelenítenie. Ez a quirks mode, ami erőforrás igényesebb a normális futásnál, így lassabban tölti be az oldalt, mintha eleve megmondanánk neki, hogy hogyan jelenítse meg azt (spórolva a kliens gép erőforrásaival).
Megjegyzések (Comment)
A HTML állományban elhelyezhetők megjegyzések:
<!-- Ez egy megjegyzés -->
A megjegyzés nyitó <!--, és záró --> karaktersorozata közötti részt a böngésző figyelmen kívül hagyja.
A megjegyzés lehet kód magyarázat, jelölhetjük vele szekciók elejét és végét, ez a forráskód olvashatóságát könnyíti.
Elrejthetünk vele HTML elemeket is:
<ul>
    <li>Alma</li>
    <!--<li>Körte</li>-->
    <li>Barack</li>
</ul>
A fenti példában a középső lista elemet nem hozza létre a böngésző.
HTML Címkék (Tag)
A HTML dokumentum tag-ekből (címke) épül fel, ezekből képezi le a böngésző a HTML elemeket, miután beolvasta a dokumentumot.
Egy lehetséges HTML elem:
<elem tulajdonsag="ertek">tartalom</elem>
A HTML elemek nyitó és záró tagből állnak, amennyiben lehet tartalmuk:
Az elemek egymásba ágyazhatóak:
<ul>
    <li>Ez egy lista elem</li>
    <li>Ez egy másik lista elem</li>
    <li>Ez pedig egy harmadik!</li>
</ul>
A fenti példában az ul egy lista, amiben lista elemek li vannak, ez a tartalma. Az li-k az ul gyermek elemei, és egymásnak testvér elemei.
Vannak HTML elemek, amiknek nem lehet tartalma, így záró tag-re nincs szükség:
<br> <!-- Sortörés -->
​
<hr> <!-- Vízszintes vonal -->
​
<img src=kep.jpg> <!-- Kép -->
Tulajdonságok (Atributes)
A HTML elemeket fel lehet ruházni tulajdonságokkal, illetve egyes HTML elemeknek kötelező megadni bizonyos tulajdonságokat.
Korábbi példa:
<elem tulajdonsag="ertek">tartalom</elem>
A tulajdonságok a nyitó tag-ben helyezhetőek el, szóközökkel elválasztva egymástól, és HTML tag nevétől.
Minden tulajdonság egy név-érték pár, balra a tulajdonság neve, jobbra az értéke, egyenlőségjellel elválasztva.
Az értéket idézőjelbe kell tenni, ha tartalmaz szóközt. Bár nem kötelező, az olvashatóság megkönnyítése érdekében ezt érdemes minden esetben kitenni.
Egyes tulajdonságok a HTML elemünk azonosítását könnyítik meg.
Az id (egyedi azonosító) tulajdonsággal egyedi nevet adhatunk elemeinknek:
<h1 id="main-title">Ez a főcím</h1>
Az class (osztály) tulajdonság csoportokba szervezi az elemeket:
<p class="red">Én a pirosak közé tartozom?</p>
<p class="blue">Igen, én kék vagyok, de ettől még lehetünk barátok...</p>
További példák tulajdonságokra:
<input type="text">      <!-- Szövegbeviteli mező -->
<input type="button">    <!-- Gomb --> 
<input type="checkbox">  <!-- Pipa --> 
<input type="password">  <!-- Jelszó -->
Az input (beviteli mező) elem megjelenése és viselkedése a type tulajdonságától függ.
Következő példában egy img (kép), az src a képállományra mutató hivatkozás, a title a kép címe, az alt pedig a kép tartalmának szöveges leirata:
<img 
    src="images/kutya.jpg"
    title="Alvó labradorkölyök"
    alt="A képen egy 6 hetes alvó labradorkölyök látható.">
Példa HTML állomány
Ebben a példában egy egyszerű HTML állomány tartalma látható:
index.html
<!DOCTYPE html>
<html lang="hu">
    <head>
        <meta charset="UTF-8">
        <title>Helló Világ!</title>
    </head>
    <body>
        <h1>Helló Világ</h1>
    </body>
</html>

HTML - Previous

HTML rövid története

Next - HTML

HTML elemek

Last modified 3yr ago

Export as PDF

Copy link

Outline

HTML állomány kiterjesztése

Doctype

XHTML 1.0:

HTML 5

Megjegyzések (Comment)

HTML Címkék (Tag)

Tulajdonságok (Atributes)

Példa HTML állomány