Publikálás a világhálón

Prezentáció középiskolásoknak

📌 Témák

  1. Az internet és a WWW kapcsolata
  2. A WWW (világháló) építőkövei
  3. Weboldalak elérése és címzése
  4. HTML - A tartalom leírása
  5. CSS - A kinézet leírása

1. rész: Az internet és a WWW kapcsolata

🌐 Mi az internet?

Az internet egy globális számítógépes hálózat, amely behálózza az egész bolygót.

  • Nem egy fizikai hálózat, hanem sokféle önálló hálózat összessége
  • A csatlakoztatott eszközök egyedi IP-címmel rendelkeznek
  • Példa IP-címre: 84.206.104.74

📧 Az internet szolgáltatásai

Az internethálózat sokféle szolgáltatást támogat:

  • E-mail (elektronikus levél)
  • Chat (csevegés)
  • Fájlátviteli szolgáltatás (FTP, SFTP, SCP)
  • World Wide Web (világháló)
  • És sok más...

🕸️ Mi az a World Wide Web (WWW)?

A világháló egy olyan szolgáltatás, amelyet az internethálózaton érhetünk el.

⚠️ Fontos: A világháló és az internet NEM ugyanaz!
Sok ember tévesen szinonimaként használja őket.

Világháló = az internet egyik szolgáltatása

👨‍💻 A világháló megalkotói

Tim Berners-Lee és Robert Cailliau

  • A CERN (Európai Nukleáris Kutatási Szervezet) munkatársai
  • 1989-ben kezdték kidolgozni a rendszert
  • Céljuk: információmegosztás támogatása a világ különböző helyszínein dolgozó kutatók között

📅 A WWW története

1993. április 30.
A CERN bejelentette, hogy a WWW technológiát mindenki szabadon, ingyenesen használhatja.

1993
Magyarországon elindult az első www-kiszolgáló: www.fsz.bme.hu

📅 A WWW története (folyt.)

1994
Tim Berners-Lee megalapította a World Wide Web Konzorciumot (W3C)

  • A szervezet ma is koordinálja a nyílt webes szabványok kidolgozását
  • Weboldal: w3.org

💡 A W3C feladata a webes szabványok (HTML, CSS stb.) fejlesztése és karbantartása.

2. rész: A WWW építőkövei

🧱 A világháló definíciója

A világháló egy olyan információs rendszer, amelyre jellemző:

  • Böngészőprogramok segítségével érhetjük el
  • Különböző dokumentumokat tartalmaz:
    • Weboldalak
    • PDF-dokumentumok
    • Képek, videók, zenék
  • Ezeket összefoglalóan erőforrásoknak (resource) nevezzük
  • Hiperhivatkozások (linkek) teremtenek kapcsolatot az erőforrások között

🔗 Hiperhivatkozások jellemzői

  • Egy weboldalról kiindulva újabb és újabb oldalakra juthatunk
  • A hivatkozások egyirányúak
  • A visszafelé irány nem garantált
  • Bármilyen weboldalra hivatkozhatsz, de nem biztos, hogy visszahivatkoznak rád

🌐 Milyen eszközzel érjük el a tartalmakat?

Népszerű böngészőprogramok:

  1. Google Chrome
  2. Safari (Apple)
  3. Mozilla Firefox
  4. Samsung Internet
  5. Microsoft Edge
  6. Opera

💡 Egy operációs rendszerre több böngészőprogram is telepíthető!

🔗 Hogyan hivatkozunk dokumentumokra?

URL - Uniform Resource Locator

(Egységes Erőforrás-helymeghatározó)

Az URL segítségével hivatkozhatunk dokumentumok és állományok elérési helyére.

Példák:

  • https://www.nava.hu/
  • https://www.mnm.hu/kiallitasok
  • https://hirmagazin.sulinet.hu/
  • file:///C:/honlapra/hobbi.html

📋 Az URL felépítése

Egy URL több részből áll:

  1. Séma (protokoll)
  2. Útvonal (doménnév, állomásnév, mappák, fájl)
  3. Lekérdezési paraméterek (opcionális)
  4. Oldalrész (opcionális)

1️⃣ Séma (Protokoll)

A séma utal arra, hogy milyen szabályrendszer szerint történik a kommunikáció.

Leggyakoribb sémák:

  • http:// - HyperText Transfer Protocol
  • https:// - Biztonságos, titkosított HTTP
  • file:// - Helyi fájl

Formátum: séma://

💡 A böngésző alapértelmezetten http-t használ, ha nem adod meg!

2️⃣ Útvonal - Doménnév

Doménnév felépítése:

Példa: hirmagazin.sulinet.hu

  • .hu - felső szintű tartomány (országkód)
  • sulinet - második szintű tartomány
  • hirmagazin - állomásnév (harmadik szintű tartomány)

2️⃣ Útvonal - Doménnév

Felső szintű tartományok típusai:

  • Országkódok: .hu, .jp, .de
  • Kategóriák: .com, .org, .edu

2️⃣ Útvonal - Második szintű tartomány

  • Második szintű tartománynevet bárki lefoglalhat meghatározott díjért
  • Az adott névnek szabadnak kell lennie
  • Ellenőrzés: https://www.domain.hu/

Példák:

  • sulinet.hu
  • fortepan.hu
  • google.com

2️⃣ Útvonal - Mappák és fájlok

A szervereken az információk mappaszerűen vannak szervezve.

Példa:
http://www.fortepan.hu/_photo/display/154350.jpg

  • Szerver: www.fortepan.hu
  • Mappa: _photo/display/
  • Fájl: 154350.jpg

💡 Ha nem adunk meg útvonalat, az alapértelmezett tartalom jelenik meg (pl. index.html)

3️⃣ Lekérdezési paraméterek

A paraméterek segítségével az oldal más-más tartalmat tud szolgáltatni.

Formátum: kulcs=érték

3️⃣ Lekérdezési paraméterek

Példa:
https://www.google.com/search?q=világháló&num=3

  • ? - első paraméter előtt
  • q=világháló - első paraméter (keresési kifejezés)
  • & - paraméterek elválasztása
  • num=3 - második paraméter (találatok száma)

4️⃣ Oldalrész

A # jel után egy oldalrészre hivatkozó azonosító állhat.

Példa:
https://hu.wikipedia.org/wiki/Tim_Berners-Lee#Kitüntetései

  • A böngésző az oldal adott elnevezésű részéhez ugrik
  • Csak akkor működik, ha az oldal készítője ellátta egyedi névvel
  • Kivétel: az oldal teteje (#)

🔄 Hogyan történik a kommunikáció?

HTTP/HTTPS protokoll

A világhálón kérés-válasz formájában zajlik a kommunikáció:

  1. Kliens (böngésző) → kérést küld → Szerver
  2. Szerver → választ küld → Kliens

🔄 Mit kap meg a böngésző?

A böngésző a szervertől megkapja:

  • A weboldal forráskódját (HTML)
  • Képeket, videókat és egyéb elemeket
  • Stíluslapokat (CSS)
  • Scripteket (JavaScript)

Majd mindezek alapján megjeleníti az oldalt.

📝 HTML - A tartalom leírása

HTML = HyperText Markup Language
(Hiperszöveges Jelölőnyelv)

Jellemzői:

  • Nem programozási nyelv, hanem jelölőnyelv
  • A weboldalak tartalmának leírására szolgál
  • Legújabb verzió: HTML5
  • Tagek (címkék) segítségével írjuk le a dokumentumot

🏷️ HTML tagek (címkék)

Tag felépítése:

<tagnév>Tartalom</tagnév>

Részek:

  • <tagnév> - nyitó tag
  • Tartalom
  • </tagnév> - záró tag

🏷️ HTML tag példák

<h1>Ez egy címsor</h1>
<h2>Ez egy alcím</h2>

<p>Ez egy bekezdés</p>

<strong>Vastag szöveg</strong>
<em>Dőlt szöveg</em>

<a href="https://google.com">Ez egy link</a>

<ul>
  <li>Lista elem 1</li>
  <li>Lista elem 2</li>
</ul>

🏷️ Önmagukban záródó tagek

Vannak címkék, amelyeknek nincs záró párjuk:

<br>   <!-- Sortörés -->
<hr>   <!-- Vízszintes vonal -->
<img>  <!-- Kép -->

🖼️ Kép beillesztése HTML-ben

<img src="goldi.jpg" alt="A kutyám, aki egy Golden Retriever.">

Parameterek:

  • src - source (forrás): a kép elérési útja
  • alt - alternate (helyettesítő): szöveges leírás

Miért fontos az alt?

  • Ha a kép nem töltődik be, ezt a szöveget látjuk
  • Vak emberek így tudják, mi van a képen (felolvasó szoftver)

📦 HTML paraméterek (attribútumok)

A paraméterek további információkat adnak a tageknek.

Formátum: paraméter="érték"

Globális paraméterek (bármilyen tagnél):

  • title - súgó szöveg
  • class - CSS osztály
  • id - egyedi azonosító

📦 Tag-specifikus paraméterek

Bizonyos paraméterek csak adott tageknél használhatók:

  • src - forrás (kép, script)
  • href - hivatkozás célja (link)
  • alt - alternatív szöveg (kép)
  • width, height - szélesség, magasság (kép)
  • target - link megnyitási módja

🎨 CSS - A kinézet leírása

CSS = Cascading Style Sheets
(Lépcsőzetes/Csatolt stíluslapok)

Mit csinál?

  • A weboldalak kinézetét írja le
  • Elválik a HTML tartalomtól
  • Legújabb verzió: CSS3

✅ A CSS előnyei

  1. Sokféle formázást támogat

    • Színek, betűtípusok, méretezés
    • Elrendezés (kétoszlopos, rács stb.)

  2. Egyszerűbb karbantartás

    • A kinézet és a tartalom nem keveredik

  3. Akadálymentesség

    • Segíti az akadálymentes oldalak készítését

  4. Eszközfüggő megjelenés

    • Külön stíluslap mobiltelefonra, nyomtatóra, okosórára

📐 CSS felépítése

p {
    color: blue;
    font-size: 120%;
}

Részek:

  • p - szelektor (kijelölő): melyik elemre vonatkozik
  • { } - deklarációs blokk
  • color: blue; - deklaráció (tulajdonság: érték)
  • ; - deklarációk elválasztása

🎯 CSS példák

Szöveg színe és mérete:

p {
    color: blue;
    font-size: 120%;
}

Szegély:

.szegely {
    border: 1px solid blue;
}

🏷️ CSS osztályok

Az osztályokkal különböző formázást adhatunk azonos típusú elemeknek.

HTML kód:

<p class="kiemelt">Ez egy kiemelt bekezdés</p>
<p>Ez pedig egy normál bekezdés</p>

CSS kód:

p.kiemelt {
    color: blue;
    font-size: 120%;
}

A class paraméterrel osztályokat rendelhetünk az elemekhez!

🌟 Általános CSS osztályok

Olyan osztályok, amelyeket bármilyen elemnél használhatunk:

CSS kód:

.szegely {
    border: 1px solid blue;
}

HTML kód:

<p class="szegely">Szegélyezett bekezdés</p>
<h1 class="szegely">Szegélyezett címsor</h1>

💡 A pont előtt nincs tag név, így univerzális!

📝 Osztálynevek megválasztása

✅ Jó gyakorlatok:

  • Használj általános nevet, ami a funkciót írja le
  • Például: kiemelt, fontos, szegely

❌ Kerülendő:

  • Ne használj színneveket osztálynévként!
  • Például: piros - ha később lilára változtatod, félrevezető lesz

🎓 Összefoglalás

Az internet és a WWW

  • Az internet = globális számítógépes hálózat
  • A WWW = az internet egyik szolgáltatása
  • Tim Berners-Lee és Robert Cailliau alkották meg (1989)
  • 1993-tól szabadon használható

🎓 Összefoglalás (folyt.)

A WWW építőkövei

  • Böngészőprogramok - Chrome, Firefox, Safari, Edge
  • URL - webcímek (séma, útvonal, paraméterek, oldalrész)
  • HTTP/HTTPS - kommunikációs protokoll
  • HTML - tartalom leírása (tagek, paraméterek)
  • CSS - kinézet leírása (szelektorok, osztályok)

📚 Források

  • NKP Tankönyv - Digitális kultúra 9.
  • W3C - World Wide Web Konzorcium
  • Domain.hu - Doménnév ellenőrzés

❓ Kérdések?

Köszönöm a figyelmet! 🙏

További információk: