# 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**:
```markup
```
```markup
```
```markup
```
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
```markup
```
{% hint style="warning" %}
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).
{% endhint %}
## Megjegyzések (Comment)
A HTML állományban elhelyezhetők megjegyzések:
```markup
```
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:
```markup
Alma
Barack
```
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:
```markup
tartalom
```
A **HTML** elemek **nyitó** és **záró** **tagből** állnak, amennyiben lehet tartalmuk:
Az elemek egymásba ágyazhatóak:
```markup
Ez egy lista elem
Ez egy másik lista elem
Ez pedig egy harmadik!
```
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:
```markup
```
## 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:
```markup
tartalom
```
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:
```markup
Ez a főcím
```
Az `class` (osztály) tulajdonság csoportokba szervezi az elemeket:
```markup
Én a pirosak közé tartozom?
Igen, én kék vagyok, de ettől még lehetünk barátok...
```
További példák tulajdonságokra:
```markup
```
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:
```markup
```
## Példa HTML állomány
Ebben a példában egy egyszerű HTML állomány tartalma látható:
{% code title="index.html" %}
```markup
Helló Világ!
Helló Világ
```
{% endcode %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/html/html-allomany-felepitese.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
```
## 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:
```markup
```
## Példa HTML állomány
Ebben a példában egy egyszerű HTML állomány tartalma látható:
{% code title="index.html" %}
```markup