Digitális kiadványok
CSS
CSS technikák
Bootstrap
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éreXHTML 1.0:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".../xhtml1-transitional.dtd">
Copied!
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".../xhtml1-strict.dtd">
Copied!
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" ".../xhtml1-frameset.dtd">
Copied!
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
1
<!DOCTYPE html>
Copied!
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:
1
<!-- Ez egy megjegyzés -->
Copied!
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:
1
<ul>
2
<li>Alma</li>
3
<!--<li>Körte</li>-->
4
<li>Barack</li>
5
</ul>
Copied!
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:
1
<elem tulajdonsag="ertek">tartalom</elem>
Copied!
A HTML elemek nyitó és záró tagből állnak, amennyiben lehet tartalmuk:
Az elemek egymásba ágyazhatóak:
1
<ul>
2
<li>Ez egy lista elem</li>
3
<li>Ez egy másik lista elem</li>
4
<li>Ez pedig egy harmadik!</li>
5
</ul>
Copied!
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:
1
<br> <!-- Sortörés -->
2
3
<hr> <!-- Vízszintes vonal -->
4
5
<img src=kep.jpg> <!-- Kép -->
Copied!
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:
1
<elem tulajdonsag="ertek">tartalom</elem>
Copied!
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:1
<h1 id="main-title">Ez a főcím</h1>
Copied!
Az
class (osztály) tulajdonság csoportokba szervezi az elemeket:1
<p class="red">Én a pirosak közé tartozom?</p>
2
<p class="blue">Igen, én kék vagyok, de ettől még lehetünk barátok...</p>
Copied!
További példák tulajdonságokra:
1
<input type="text"> <!-- Szövegbeviteli mező -->
2
<input type="button"> <!-- Gomb -->
3
<input type="checkbox"> <!-- Pipa -->
4
<input type="password"> <!-- Jelszó -->
Copied!
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:1
<img
2
src="images/kutya.jpg"
3
title="Alvó labradorkölyök"
4
alt="A képen egy 6 hetes alvó labradorkölyök látható.">
Copied!
Példa HTML állomány
Ebben a példában egy egyszerű HTML állomány tartalma látható:
index.html
1
<!DOCTYPE html>
2
<html lang="hu">
3
<head>
4
<meta charset="UTF-8">
5
<title>Helló Világ!</title>
6
</head>
7
<body>
8
<h1>Helló Világ</h1>
9
</body>
10
</html>
Copied!
Last modified 3yr ago