1. Alapok

A html (Hyper Text Markup Language) fájl egy szövegfájl, amelyben a formázásokat és más utasításokat kacsacsőrök < > közé írva adjuk meg és TAG-eknek nevezzük.

Például kiemelt szöveg megadása: <strong>kiemelt szöveg</strong>.

A böngészőkben egy adott weboldal forráskódját (azaz a TAG-ekkel ellátott szövegfájlt) a jobb kattintással megjeleníthető menüben tudjuk megnyitni.

A html fájlok szerkesztésére használhatunk jegyzettömböt, vagy inkább a programozásra fejlesztett notepad++-t is, és weblapszerkesztő programokat is.

A weblapszerkesztő programok használata valamelyest hasonlít a szövegszerkesztő programok használatára, de az értő használathoz fontos megtanulni az alapvető TAG-eket.

Egy html fájl 3 részből áll:

  1. DOCTYPE: Ez az utasítás adja meg a böngészőnek, hogy az adott fájlt melyik szabvány szerint jelenítse meg. Modern, szabványos weblap ezzel az utasítással kezdődik.
  2. head: A weblap feje. Itt vannak az oldal címén kivül a böngészőnek, keresőmotoroknak adott meta utasítások (pl. betűkészlet megadása, kulcsszavak kereséshez).
  3. body: Test, szövegtörzs. Itt találhatóak címsorok, bekezdések, táblázatok, listák, azaz maga a formázott szöveg.

A weblapokkal szemben támasztott megjelenési követelmények miatt a szabványok sokat fejlődtek és a régi szabványokhoz képest szigorodtak, így a régen készült oldalak már nem biztos, hogy szabványosak. Ráadásul a böngészők gyártói maguk sem tartották/tartják be a szabványokat teljes mértékben. Előfordulhat, hogy egy html utasítás az egyik böngészőben nem ugyanazt a hatást kelti, mint a másikban, esetleg nem is működik. Szerencsére a legfrissebb böngészők már az alapvető utasításokat ugyanúgy kezelik, így ha szabványos oldalt készítünk, akkor bízhatunk abban, hogy az minden számítógépen ugyanúgy fog megjelenni!

A továbbiakban az egyik legmodernebb szabványt, a html5-öt fogom használni.

<!DOCTYPE html>
<!-- Ezt a sort kommentnek nevezik és nem jelenik meg a weblapon, csupán a forráskódban szerepel.-->
<html>
        <!-- Itt kezdődik a (head) fej.-->
    <head>
        <meta charset="utf-8">
        <title>A böngésző címsorában megjelenő szöveg helye</title>
    </head>
        <!-- Itt kezdődik a (body) szövegtörzs.-->
    <body>
        <h1>Főcím</h1>
        <p>Ez az első bekezdés a főcím után.</p>
        <p>Ez pedig a második bekezdés.</p>
    </body>
</html>

Betartandó szabályok:

  1. Kötelező DOCTYPE-ot megadni! DOCTYPE azt mondja meg, hogy melyik szabvány szerint készült az oldal. Több előre meghatározott változata lehetséges, és szó szerint kell megadni! A fenti példa a html5-nek megfelelő DOCTYPE-ot tartalmazza. (A DOCTYPE-ra nem vonatkoznak a további szabályok.)
  2. Szinte minden utasításnak van záró utasítása: <p>bekezdés</p>!
    Kivéve önmagukban záródó utasítások:
    <img src="valami.jpg" title="kép">
    Megjegyzés: az xhtml szabványban az önmagukban záródó utasításokat is le kell zárni, de a nyitó TAG-en belül:
    <img src="valami.jpg" title="kép" />
    Legfontosabb önmagukban záródó utasítások: kép beszúrása, sortörés, meta TAG-ek, űrlap input elemek.
  3. Az utasítás nyitóeleme tartalmazhat tulajdonságokat is: Lásd a fenti képbeszúrást, ahol az img utasításnak két tulajdonsága van (src és title) szóközzel elválasztva.
  4. Az utasítás záróeleme az utasítás nevén kívül mást nem tartalmazhat.
  5. Minden utasítás, és az utasításokhoz tartozó tulajdonság kis betűvel van írva.
  6. Minden tulajdonság="értéket" idézőjelben kell megadni!
  7. Az utasításokat a matematikai zárójelezés szabályai szerint lehet egymásba ágyazni (azaz, amelyik utasítással kezdünk, azt zárjuk be később):
    helyes: <b><i>dőlt és vastagon írt szöveg</i></b>
    helytelen: <b><i>dőlt és vastagon írt szöveg</b></i>

Segédanyagok:

www.w3schools.com
» Learn HTML: Oldalmenüben találhatóak a html tananyagok.
» Utasításlista, és referenciakönyv: Az utasítás kiválasztása után az Optional Attributes táblázatban találhatóak az utasítás választható tulajdonságai, és azok lehetséges értékei.
» Színválasztó » Színtáblázat

validator.w3.org: Hibaellenőrző oldal. A Validate by Direct Input fülre kattintva (forrást kijelöl » másol » beilleszt) bemásolhatjuk a weblapunkat és ellenőrízhetjük.
Érdemes a More Options-ban bejelölni a Verbose output, és a Show source menüpontokat!