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ó  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>

PreviousHTML rövid története NextHTML elemek

Last updated 5 years ago