HTML Basic – Alapok
A HTML (HyperText Markup Language) a weboldalak alapját képező jelölőnyelv. Ebben az anyagban megismerheted a HTML alapvető fogalmait, felépítését és a legfontosabb elemeket, amelyek segítségével elkezdheted saját weboldalaid létrehozását. Ezen az oldalon a HTML dokumentumok szerkezetéről, az alapvető elemekről, valamint néhány egyszerű kódrészletről lesz szó, hogy megalapozd a további részletesebb tanulnivalókat.
HTML Alapok
A HTML dokumentumok egyszerű szöveges fájlok, amelyeket .html vagy .htm kiterjesztéssel mentünk el. Minden HTML oldal elején egy deklarációval kezdünk, amely a böngésző számára jelzi, hogy HTML5-öt használunk.
Például egy nagyon alap HTML oldal így néz ki:
A legfontosabb részek
Nézzük át, melyek azok a kulcselemek, amelyek egy HTML dokumentumot felépítenek:
- <!DOCTYPE html>: Minden HTML oldal első sora, ami jelzi, hogy HTML5-öt használunk.
- <html>: A dokumentum gyökéreleme, mely tartalmazza az egész oldalt.
- <head>: Az a rész, ahol háttérinformációkat adunk meg – például a karakterkódolás, az oldal címe, és hivatkozások külső stíluslapokra.
- <title>: Az oldal címe, amely a böngésző fülén jelenik meg.
- <body>: Itt található a tényleges tartalom: szövegek, képek, linkek, listák és egyéb elemek.
Címek, bekezdések és linkek
Az oldalon a címeket általában a <h1>–<h6> tagek segítségével definiáljuk, amelyek a hierarchikus felépítést segítik. A <p> tagek a bekezdéseket, míg az <a> tag a linkeket jelentik.
Például, a főcím:
És egy bekezdés:
Egy egyszerű hivatkozás:
Képek és listák
A képek beillesztése az <img> tag segítségével történik. A forrását az src attribútummal adod meg, míg az alt attribútum a kép leírását tartalmazza. A listák segítségével rendezett vagy rendezetlen módon jeleníthetünk meg adatokat.
Íme egy példa egy rendezetlen listára:
Kód részletek
<!-- Unordered list --> <ul> <li>First element</li> <li>Second element</li> <li>Third element</li> </ul>
Előnézet
- First element
- Second element
- Third element
És egy rendezett lista:
Kód részletek
<!-- Ordered list --> <ol> <li>Step one</li> <li>Step two</li> <li>Step three</li> </ol>
Előnézet
- Step one
- Step two
- Step three
Vízszintes vonal és sortörés
A <hr> tag egy vízszintes elválasztót hoz létre, amelyet gyakran használunk a tartalom részek elválasztására. A <br> tag pedig sortörést jelent.
Önzáró elemek és kommentek
Bizonyos HTML elemek nem igényelnek külön záró taget – ezek az úgynevezett önzáró elemek, mint például az <img>, <br> vagy <hr>. Emellett kommenteket is elhelyezhetsz a kódban, de ezek a böngésző számára láthatatlanok.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
