1. Bevezetés a webfejlesztésbe

A böngésződben (Chrome, Firefox, Edge) megjelenő weboldalak valójában egyszerű szöveges fájlok. Ahhoz, hogy a gép tudja, mi a cím, mi a bekezdés és hol van egy kép, egy speciális jelölőrendszert használunk. Ez a HTML (HyperText Markup Language - Hiperszöveges Jelölőnyelv).

Fontos: A HTML NEM programozási nyelv! Nincsenek benne elágazások (if), sem ciklusok (for). A HTML egy "leíró nyelv", amivel a weboldal szerkezetét és tartalmát (a "csontvázat") építjük fel.

1.1. A Címkék (Tagek) anatómiája

A HTML-ben mindent úgynevezett tagek (címkék) közé zárunk. Ezek mondják meg a böngészőnek, hogy az adott szöveg micsoda. A tageket mindig kacsacsőrök < > közé írjuk.

A legtöbb HTML elem három részből áll:

Nyitó tag: <tagnev> (Itt kezdődik az elem)
Tartalom: Maga a szöveg, amit a felhasználó lát.
Záró tag: </tagnev> (Ugyanaz, mint a nyitó, de van benne egy perjel /! Ez jelzi az elem végét.)

Példa:

<p>Ez itt egy egyszerű szöveges bekezdés.</p>

(Léteznek úgynevezett "üres" vagy önmagukat lezáró tagek is, amiknek nincs záró párjuk, mert nem ölelnek körbe szöveget – ilyen például a sortörés: <br> vagy a kép: <img>.)

1.2. A HTML dokumentum alapszerkezete

Ahogy a VS Code is legenerálta neked, minden HTML dokumentumnak van egy szigorúan kötött, kötelező szerkezete. Olyan ez, mint egy emberi test felépítése.

<!DOCTYPE html>
<html lang="hu">

<head>
    <meta charset="UTF-8">
    <title>Az első weboldalam</title>
</head>

<body>
    <!-- Ide jön minden, amit a látogató látni fog! -->
</body>

</html>

Nézzük meg sorról sorra, mi mit jelent!

<!DOCTYPE html>: Ez a legelső sor. Nem is igazi tag, csak "szól" a böngészőnek, hogy ez egy modern, HTML5 szabványú dokumentum lesz.
<html> ... </html>: Ez a gyökérelem. Ez öleli körbe a teljes weboldalt. A lang="hu" megmondja a gépnek (és a Google fordítónak), hogy az oldal magyar nyelvű.

Az <html> tagen belül a weboldal mindig két fő részre bomlik: a Fejre és a Testre.

A Fej (`<head>`) - Az agy, ami a háttérben dolgozik

A <head> és </head> közé kerülnek a metaadatok. Ide olyan dolgokat írunk, amiket a weblap látogatója NEM LÁT közvetlenül az oldalon, de a böngésző és a Google kereső számára létfontosságúak. * <meta charset="UTF-8">: Beállítja a karakterkódolást. Enélkül a magyar ékezetes betűk (ű, á, ő) helyén csúnya kérdőjelek vagy hieroglifák jelennének meg! * <title> ... </title>: A weboldal címe. Ez jelenik meg a böngésző fülén (tab), és ezt mutatja a Google a találati listában.

A Test (`<body>`) - Amit a felhasználó lát

A <body> és </body> közé kerül minden, ami fizikailag megjelenik a böngésző ablakában: a szövegek, a képek, a gombok, a videók. Ha valamit meg akarsz mutatni a látogatónak, annak ide kell kerülnie!

1.3. Az első elemeink: Címsorok és Bekezdések

Most, hogy megvan a szerkezet, tegyünk is bele valamit a <body> részbe!

Címsorok (Headings): Hat különböző szintű címsorunk van, <h1>-től <h6>-ig. Az <h1> a legfőbb, legnagyobb cím (ebből logikailag csak egyetlen darab lehetne egy oldalon), míg a <h6> a legkisebb alcím.

<h1>Ez a főcím, a legfontosabb szöveg</h1>
<h2>Ez egy fontos alcím</h2>
<h3>Ez egy kisebb alfejezet címe</h3>

Bekezdések (Paragraph): A sima folyószöveget, cikkeket, leírásokat mindig a <p> (paragraph) tagek közé tesszük. Ha több bekezdést írsz egymás alá, a böngésző automatikusan hagy közöttük egy kis üres helyet (térközt), hogy olvashatóbb legyen.

<p>Ez az első bekezdés. Itt nagyon sok okos dolgot írtam le a weboldalam témájáról.</p>
<p>Ez már egy teljesen új bekezdés lesz, egy picit lejjebb kezdve.</p>

💻 Gyakorlati Feladat

Készítsd el az index.html fájlt a VS Code-ban, és a felkiáltójel (!) segítségével generáld le az alapszerkezetet!
Állítsd át a nyelvet angolról magyarra (lang="en" helyett lang="hu")!
A <title> tagen belül adj egy egyedi címet az oldaladnak (pl. "Dávid első weboldala")!
A <body> részbe készíts egy <h1>-es főcímet "Üdvözöllek a blogomon" szöveggel!
Írj alá két darab <p> bekezdést, amiben pár mondatban bemutatkozol!
Nyisd meg a Live Server segítségével, és ellenőrizd az eredményt a böngészőben!