HTML alapok › 1. modul: Az első weboldal › 1.2 lecke
HTML alapok · 1.2 lecke
Az index.html titka és a jó fájlnevek
Miért épp index.html a főoldal neve? És miért nem lehet egy fájl neve „Az én oldalam.HTML”? Ebben a leckében megismered a webhelyek fájlneveinek szabályait, amelyek miatt egy oldal a te gépeden működik, a szerveren pedig nem.
A lecke végére
- megmagyarázod, miért index.html a főoldal neve;
- a webes fájlnév-szabályok szerint nevezed el a fájljaidat;
- átlátható mappaszerkezetet alakítasz ki;
- kijavítod a hibás fájlneveket.
Mielőtt elkezded
Szükséged lesz a VS Code-ra és a saját oldalad mappájára.
Miért épp index.html?
Amikor beírod a böngészőbe, hogy www.digitalisfelfedezok.hu, nem írsz utána fájlnevet. A szerver ilyenkor egy alapértelmezett fájlt keres a mappában, és ez szinte minden webszerveren az index.html. Az index szó tartalomjegyzéket jelent: a főoldal a webhely „kezdőlapja”, ahonnan minden más elérhető.
Jósold meg!
Egy mappában két fájl van: index.html és rolam.html. Mit mutat a szerver, ha csak a mappa címét írod be?
Megoldás
Az index.html-t. A rolam.html-t csak akkor, ha a nevét is beírod a cím végére.
Minden mappának lehet saját index-e
Ha a blog mappában is van egy index.html, akkor a …/blog/ cím azt mutatja. Így lesznek „szép”, fájlnév nélküli webcímek.
A webes fájlnevek szabályai
A saját gépeden szinte bármilyen fájlnév működik, a webszervereken viszont nem. Ezért a webfejlesztők egy egyszerű szabályrendszert követnek:
| Szabály | Így ne | Így igen |
|---|---|---|
| Csupa kisbetű | Rolam.HTML | rolam.html |
| Nincs ékezet | kép-galéria.html | kep-galeria.html |
| Nincs szóköz, helyette kötőjel | az en oldalam.html | az-en-oldalam.html |
| Beszédes, rövid név | oldal2.html | hobbim.html |
| A kiterjesztés .html | index.txt | index.html |
Miért ennyire fontos?
A legtöbb webszerver megkülönbözteti a kis- és nagybetűt: a Rolam.html és a rolam.html két külön fájl. A szóközből a webcímben %20 lesz, az ékezetes betűkből pedig kódolt jelsorozat. Egyszerűbb, ha ilyen nincs is.
Átlátható mappaszerkezet
Ahogy nő a webhely, érdemes a fájlokat típus szerint mappákba rendezni. Ezt a szerkezetet fogod a tanfolyam során felépíteni:
Csináld meg!
A sajat-oldal mappádban hozd létre a css, a js és a kepek mappát (a VS Code Intéző paneljén az Új mappa ikonnal). Most még üresek, a későbbi leckékben töltjük meg őket.
Hibavadászat: melyik fájlnév rossz?
1. Rólam.html
Mi a baj?
Nagybetű és ékezet is van benne. Helyesen: rolam.html.
2. kedvenc filmjeim.html
Mi a baj?
Szóköz van benne, ami a webcímben %20 lesz. Helyesen: kedvenc-filmjeim.html.
3. index.HTML
Mi a baj?
A kiterjesztés nagybetűs. Sok szerveren működik, de nem biztos, hogy alapértelmezett fájlként megtalálja. Maradjunk a csupa kisbetűnél: index.html.
4. index.html.txt
Mi a baj?
Rejtett kiterjesztés: valójában szöveges fájl. Kapcsold be a kiterjesztések megjelenítését a fájlkezelőben, és töröld a .txt-t.
Projekt: rend a saját oldalad mappájában
Folytasd a saját oldalad projektet!
- Hozd létre a
css, ajsés akepekmappát. - Készíts egy második oldalt
rolam.htmlnéven, ugyanazzal a vázzal, mint az index. - Ellenőrizd mindkét fájl nevét a szabályok szerint.
Kész vagy, ha…
…a mappaszerkezeted megegyezik a leckében láthatóval, és minden fájlnév csupa kisbetű, ékezet és szóköz nélküli.
Ellenőrizd magad!
Miért index.html a főoldal neve?
Mert a webszerver ezt a fájlt mutatja, ha a címben nincs fájlnév.
Miért ne legyen nagybetű a fájlnévben?
Mert a legtöbb szerver megkülönbözteti a kis- és nagybetűt, így a link nem találná meg a fájlt.
Mi lesz a szóközből a webcímben?
%20
Hogyan nevezed el helyesen a „Kép galéria” oldalt?
kep-galeria.html
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón (HTML-dokumentumok, publikálás), valamint a digitális eszközök használata témakör (fájl- és mappaműveletek).
Módszertan
A szabályok táblázata „így ne, így igen” formában, konkrét ellenpéldákkal mutatja be a szabályt, a hibavadászat pedig a szabály alkalmazását gyakoroltatja. A mappaszerkezet előre felvázolja a tanfolyam projektjének útját, ami segíti a tájékozódást.
Időterv
Miért index?: 10 perc. Fájlnév-szabályok: 12 perc. Mappaszerkezet: 8 perc. Hibavadászat és projekt: 15 perc.