---
marp: true
theme: gaia
paginate: true
---
# 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](https://www.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/](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** = **H**yper**T**ext **M**arkup **L**anguage
(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:
```html
Tartalom
```
**Részek:**
- `` - nyitó tag
- Tartalom
- `` - záró tag
---
## 🏷️ HTML tag példák
```html
Ez egy címsor
Ez egy alcím
Ez egy bekezdés
Vastag szöveg
Dőlt szöveg
Ez egy link
- Lista elem 1
- Lista elem 2
```
---
## 🏷️ Önmagukban záródó tagek
Vannak címkék, amelyeknek **nincs záró párjuk**:
```html
![]()
```
---
## 🖼️ Kép beillesztése HTML-ben
```html
```
**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** = **C**ascading **S**tyle **S**heets
(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
```css
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:
```css
p {
color: blue;
font-size: 120%;
}
```
### Szegély:
```css
.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:**
```html
Ez egy kiemelt bekezdés
Ez pedig egy normál bekezdés
```
**CSS kód:**
```css
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:**
```css
.szegely {
border: 1px solid blue;
}
```
**HTML kód:**
```html
Szegélyezett bekezdés
Szegélyezett címsor
```
> 💡 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](https://www.w3.org/) - World Wide Web Konzorcium
- [Domain.hu](https://www.domain.hu/) - Doménnév ellenőrzés
---
## ❓ Kérdések?
### Köszönöm a figyelmet! 🙏
**További információk:**
- [https://www.nkp.hu/tankonyv/digitalis_kultura_9_nat2020/](https://www.nkp.hu/tankonyv/digitalis_kultura_9_nat2020/)