Hogyan működik a web

1Mi történik, amikor beírsz egy címet?

Képzeld el, hogy bemész egy könyvtárba, és odaszólsz a pultnál ülő könyvtárosnak: „Kérem a Kis herceget!” A könyvtáros hátramegy, megkeresi, és a kezedbe adja. Te nem tudod, hol volt a könyv, melyik polcon, milyen rendszer szerint — csak kértél, és kaptál.

A web pontosan így működik. Két szereplő van:

A folyamat lépésről lépésre

1. Beírod a böngészőbe: www.example.com, és leütöd az Enter-t.
2. A böngésző kideríti, melyik gépet jelenti ez a név. (A nevekhez tartozó címeket egy világméretű „telefonkönyv”, a DNS tartja nyilván.)
3. A böngésző kérést küld annak a gépnek: „add ide a kezdőlapot”.
4. A szerver válaszol: visszaküld egy fájlt. Ez a fájl egy HTML-fájl — egyszerű szöveg.
5. A böngésző elolvassa a szöveget, és kirajzolja belőle az oldalt: a címsorokat nagy betűvel, a képeket letölti, a linkeket kékre színezi, és így tovább.

2Egy weboldal = néhány fájl

Ez a lecke legfontosabb mondata: a weboldal nem valami misztikus dolog, hanem néhány fájl egy mappában. Ugyanolyan fájlok, mint a Word-dokumentumaid — csak más a kiterjesztésük, és a böngésző nyitja meg őket.

Egy tipikus kis weboldal mappája így néz ki:

bemutatkozo-oldal/
├── index.html          ← a kezdőlap (a tartalom)
├── style.css           ← a megjelenés (színek, méretek)
├── script.js           ← a viselkedés (nem kötelező)
└── kepek/
    ├── profil.jpg
    └── hatter.jpg

Ezért van szükség egy szerverre… vagy mégsem?

Amíg tanulsz, egyáltalán nincs szükséged szerverre. Elkészíted a fájlt a gépeden, duplán rákattintasz, és a böngésző megnyitja. A címsorban ilyenkor nem https:// áll, hanem file:///C:/web/index.html — vagyis a saját merevlemezedről olvassa. Szerverre csak akkor lesz szükséged, ha az oldalt mások is el akarják érni az interneten.

3A három nyelv és a munkamegosztás

A weben három nyelv dolgozik együtt, és mindegyiknek pontosan meghatározott feladata van. A legjobb hasonlat egy ház:

Nézd meg ugyanazt a tartalmat CSS nélkül és CSS-sel

Az alábbi két doboz ugyanazt a HTML-t tartalmazza. Az egyetlen különbség, hogy a másodikhoz tartozik egy stíluslap is. Figyeld meg: a szöveg mindkettőben azonos — csak a külseje más.

<h1>Kovács Anna</h1>
<p>Szoftverfejlesztő tanuló vagyok.</p>
<a href="#">Írj nekem</a>

<h1>Kovács Anna</h1>
<p>Szoftverfejlesztő tanuló vagyok.</p>
<a href="#">Írj nekem</a>

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #fdf2f5;
  padding: 20px;
}
h1 {
  color: #be123c;
  border-bottom: 3px solid #fb7185;
  padding-bottom: 6px;
}
p { color: #52434b; }
a {
  display: inline-block;
  margin-top: 8px;
  background-color: #be123c;
  color: white;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 6px;
}

4Miért nem elég a sima szöveg?

Jogos a kérdés: ha a HTML csak szöveg, miért kellenek bele azok a furcsa <kacskaringók>? Miért nem írjuk le simán, amit akarunk?

Azért, mert a böngésző nem tud olvasni. Nem érti, hogy az első sor egy cím és a második egy bekezdés. Neked kell megjelölnöd — innen a HTML neve is: HyperText Markup Language, vagyis jelölőnyelv.

Nézd meg, mi történik, ha jelölés nélkül írunk le egy szöveget:

Kovács Anna

Szoftverfejlesztő tanuló vagyok.
Szeretek weboldalakat készíteni.

Elérhetőség: anna@example.com

<h1>Kovács Anna</h1>

<p>Szoftverfejlesztő tanuló vagyok.
Szeretek weboldalakat készíteni.</p>

<p>Elérhetőség: anna@example.com</p>

5Nézz bele bármelyik oldalba

Mivel a szerver szöveget küld, ezt a szöveget bármikor megnézheted — bármelyik weboldalon a világon. Nincs titkolnivaló: ez a webes tanulás egyik legjobb eszköze.

6Amit a HTML nem tud

Sokan „programozásnak” hívják a HTML-írást. Nem az — és ezt érdemes tisztázni, mert megkönnyíti a tanulást.

7Összefoglalás