A html program nyelv mire való?

A legjobb a webböngészőben (bármelyikben) a weboldalak forráskódját nézegetni, belenyúlni (átírhatod).

Ehhez az alábbit tedd:

1. Nyomj Ctrl-Alt-I-t (Mac-en Cmd-Alt-I-t), Firefoxon elvileg Ctrl-Shift-I (Mac-en viszont ugyanúgy Cmd-Alt-I, ki érti ezt), ezzel megnyílik az Inspector vagy Vizsgálat.

2. Ezt tarts angol nyelven, mert ha magyarul van, és valaminek utána kell nézned, akkor mindent angolul magyaráznak el, így ha nem angolul van, akkor keresgélheted, hogy hogyan szól az gomb vagy akármi magyarul.

Ez a panel jobbra, balra, ablak aljára is rendezhető, illetve külön ablakba kitehető. Ismerd ki a használatát.

Látod benne a weboldal (pl. ennek a weboldalnak) a kódszerkezetét. Belenyúlhatsz, változtathatsz, így láthatod, hogy mitől hogyan változik.

A HTML és a CSS összetartozik. A CSS a stílusokat írja le, tehát hogy hogyan nézzen ki egy elem, illetve van animációs lehetőség is. A HTML és a CSS (meg a Javascript, az a harmadik fontos nyelv, amit gyakran használnak weboldalakban) angolul van, szóval angoltudással gyorsabb, de anélkül is rád tud ragadni.

Például itt egy alap HTML-kód:

<div class="tartalom">

<p class="bekezdes">Szöveg</p>

</div>

A <valami> és </valami> jellegzetes szerkezet, ez megnyit és lezár egy elemet, és ezt több szinten elképzelheted. (Valójában ez így "valami"-vel is helyes, nem kell div-nek vagy más egyéb elemnek lennie, csak nagyon szokás eltérni az alap elemmegnevezésektől, de szabad eltérni.)

És tehát CSS-ben pedig ezeket így írhatod le:

div.tartalom {color: black; background-color: white;} (lásd még a Vizsgálóban jobboldalt)

valami {color: red;}

És persze itt kezd bonyolódni. Regisztrálj a ChatGPT-re www.chatgpt.com és kérdezd ki az alábbiakból, magyarázza el, hogy mi a különbség, meg úgy általában kérheted, hogy tanítson meg (csak az első válasz után a válasz alatt válaszd ki a 3.5-ös verziót, ilyesmire nincs értelme használni a fejlettebb modellt):

.tartalom

div.tartalom

div.tartalom.bekezdes

div.tartalom .bekezdes

div.tartalom p.bekezdes

div.tartalom > .bekezdes

div.tartalom + .bekezdes

div.tartalom:hover .bekezdes

div.tartalom .bekezdes:hover

Ezek lesznek az alapok, és minden más ott van bármelyik weboldal kódjában, a tananyag gyakorlatilag ott hever körülötted. :)

Ja igen, kódszerkesztéshez használd a Visual Studio Code-ot.

Alternatívaként a Notepad++ is praktikus, csak kevesebbet tud.

Mac-en a Nova, bár ez fizetős, de a 30-napos próbaidő újraindítható.