Informatika – Tanulj programozni ↹ HTML

A HTML, azaz a HyperText Markup Language az internet alapnyelve. Minden weboldal, amelyet meglátogatsz, legalább részben HTML-re épül. Lehetővé teszi a fejlesztők számára a webes tartalom strukturálását, linkek beágyazását, szöveg formázását, képek beillesztését és interaktív űrlapok létrehozását.

Ez a nyelv nem csak a webes tartalom strukturálását szolgálja, hanem a weboldalak hozzáférhetőségében és használhatóságában is döntő szerepet játszik.

A HTML jelentősége túlmutat a statikus weboldalak létrehozásán. Zökkenőmentesen együttműködik a CSS-sel (Cascading Style Sheets) és a JavaScript-tel, így alkotva azt a hármast, amelyre a legtöbb modern webes alkalmazás támaszkodik. Ez a kölcsönhatás dinamikus, reszponzív és vizuálisan vonzó weboldalakat tesz lehetővé, amelyek különböző platformokon és eszközökön keresztül is elérhetők.

Íme a 30 leggyakrabban használt HTML parancs (elemek és attribútumok):

Alapvető HTML-elemek

1. `<html>` – A HTML dokumentum gyökéreleme.
2. `<head>` – A dokumentum fejlécét tartalmazza (metaadatok).
3. `<title>` – Az oldal címe (böngészőfülön jelenik meg).
4. `<body>` – A dokumentum törzse, amely az oldal tartalmát tartalmazza.
5. `<h1>` – `<h6>` – Címsorok (h1 a legnagyobb, h6 a legkisebb).
6. `<p>` – Bekezdés (paragrafus).
7. `<br>` – Sortörés.
8. `<hr>` – Vízszintes vonal.

Szövegformázás

9. `<b>` – Félkövér szöveg.
10. `<i>` – Dőlt szöveg.
11. `<u>` – Aláhúzott szöveg.
12. `<strong>` – Kiemelt (fontos) félkövér szöveg.
13. `<em>` – Kiemelt (fontos) dőlt szöveg.
14. `<mark>` – Kiemelt (háttérszínnel kiemelt) szöveg.
15. `<small>` – Kisebb méretű szöveg.
16. `<sub>` – Alsó index.
17. `<sup>` – Felső index.

Hivatkozások és képek

18. `<a href=”URL”>` – Hivatkozás (link) egy másik oldalra.
19. `<img src=”URL” alt=”leírás”>` – Kép beszúrása.

Listák

20. `<ul>` – Rendezett lista (pontokkal).
21. `<ol>` – Számozott lista.
22. `<li>` – Listaelemek megadása.

Táblázatok

23. `<table>` – Táblázat létrehozása.
24. `<tr>` – Táblázatsor.
25. `<td>` – Táblázat cella.
26. `<th>` – Fejléc cella (félkövér és középre igazított).

Űrlapok és bevitel

27. `<form>` – Űrlap létrehozása.
28. `<input>` – Felhasználói bevitel (szövegmező, jelszó, gomb stb.).
29. `<button>` – Gomb létrehozása.
30. `<label>` – Űrlapmező címkéje.

Ezek az elemek adják a HTML alapját, és a legtöbb weboldalon megtalálhatóak.

Vannak olyan HTML elemek, amelyeket nem kell lezárni (ún. önálló, önzáró vagy void elemek). Ezek nem tartalmaznak belső tartalmat, ezért nincs szükségük záró </tag> címkére.

Önzáró HTML elemek:

<br> – Sortörés.
<hr> – Vízszintes vonal.
<img> – Kép beillesztése.
<input> – Beviteli mező (pl. szövegmező, gomb, jelszó, stb.).
<meta> – Metaadatok a dokumentumhoz (pl. karakterkódolás, SEO).
<link> – Külső erőforrások csatolása (pl. CSS fájlok).
<source> – Forrásmegadás <audio> és <video> elemekhez.
<area> – Képterületek megjelölése egy <map> elemen belül.
<col> – Táblázatos oszlopstílusok meghatározása <colgroup> elemen belül.
<wbr> – Szóelválasztási javaslat a böngészőnek (ha a szöveg tördelése szükséges).

Fontos megjegyzések:

XHTML-ben vagy szigorúbb HTML szabványoknál ajánlott önzáró formában írni őket:
```
<br />  
<img src="image.jpg" alt="Leírás" />  
```
HTML5-ben azonban az önzáró forma nem kötelező, így az alábbi írásmód is helyes:
```
<br>
<img src="image.jpg" alt="Leírás">
```