HTML alapok › 1. modul: Az első weboldal › Gyorsítópálya
🚀 HTML alapok · 1. modul · Gyorsítópálya
Az első weboldal – gyorsítópálya
Az 1. modul teljes tudása egyetlen leckében: kódszerkesztő, fájlnevek, és egy szabályos HTML-dokumentum minden része a doctype-tól a body-ig. Ha valahol elakadsz, a részletes leckék egy kattintásra vannak.
Mikor válaszd?
- ha gyorsan haladsz, és egy órában szeretnéd átvenni a modult;
- ha ismételsz, például dolgozat előtt;
- ha érettségire készülsz, és egy tömör áttekintés kell.
Részletesen
1.1 Visual Studio Code →
1.2 Az index.html titka →
1.3 Doctype és nyelvválasztás →
1.4 A head címke →
1.5 Mi a body szerepe? →
1.6 HTML megjegyzés →
Puska: egy szabályos weboldal váza
<!DOCTYPE html> <!-- 1.3: szabványos mód --> <html lang="hu"> <!-- 1.3: magyar nyelv --> <head> <!-- 1.4: az oldalról szóló adatok --> <meta charset="utf-8"> <!-- ékezetek --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Anna oldala – főoldal</title> <meta name="description" content="Anna bemutatkozó oldala."> </head> <body> <!-- 1.5: ami látszik --> <h1>Szia, Anna vagyok!</h1> <p>Szeretek <strong>kosarazni</strong>.</p> </body> </html>
| Téma | Szabály |
|---|---|
| Eszköz | VS Code, Fájl → Mappa megnyitása, automatikus mentés; váz: ! + Tab, majd lang és title átírása. |
| Fájlnév | Csupa kisbetű, ékezet és szóköz nélkül, kötőjellel; a főoldal index.html. |
| Doctype | Mindig az első sor; nélküle kompatibilitási mód. |
| Nyelv | lang="hu"; idegen nyelvű részlet: lang="en" a címkén. |
| Head | charset (elsőként), viewport, beszédes title, description. |
| Body | Csak egy van; helyes beágyazás: amit utoljára nyitsz, azt zárod elsőként. |
| Megjegyzés | <!-- … -->; nem titkos, nem ágyazható egymásba. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Miért index.html a főoldal neve?
Mert a szerver ezt mutatja, ha a webcímben nincs fájlnév.
Mi történik, ha lemarad a doctype?
A böngésző kompatibilitási (quirks) módba kapcsol.
Mit látsz a telefonon, ha hiányzik a viewport?
Egy kicsinyített, apró betűs asztali nézetet.
Hol jelenik meg a title tartalma?
A böngészőfülön, a könyvjelzőben és a keresőtalálatban.
Miért nem szabad jelszót megjegyzésbe írni?
Mert a forráskódban bárki elolvashatja.
Gyorsfeladatok
Fejből
Emmet nélkül, fejből írd le egy szabályos weboldal vázát (doctype, html, head a három fontos elemmel, body). Utána hasonlítsd össze a puskával!
Fájlnév-javítás
Javítsd ki ezeket a fájlneveket: Főoldal.HTML, kedvenc filmjeim.html, galéria2.htm.
Megoldás
index.html (vagy fooldal.html), kedvenc-filmjeim.html, galeria.html
Fa
Rajzold le a puskában lévő dokumentum fáját (html, head, body és a gyerekeik), majd ellenőrizd a böngésző fejlesztői eszközeinek Elemek fülén.
Vegyes hibavadászat
A
<html lang="hun">
Mi a baj?
A magyar nyelv kódja hu.
B
<p>Ez <strong>fontos.</p></strong>
Mi a baj?
Kereszteződő címkék: előbb a strong-ot kell lezárni.
C
Szép napot!
Mi a baj?
Hiányzik vagy nem elöl van a <meta charset="utf-8">.
D
Mi a baj?
Az index.html.txt szövegként nyílik meg: a rejtett kiterjesztést kell eltávolítani.
Záróprojekt: digitális névjegyoldal
Készíts egy egyoldalas, szabályos „névjegyoldalt” egy kitalált szereplőnek (például egy regényhősnek vagy egy kitalált sportolónak) egy új nevjegy mappában.
- A fájl neve
index.html, a mappában legyencss,jséskepekmappa is. - Teljes, szabályos váz: doctype, magyar nyelv, charset, viewport, beszédes cím és leírás.
- A body-ban főcím és két bekezdés, egy kiemeléssel és egy idegen nyelvű, jelölt idézettel.
- Legalább két értelmes megjegyzés, személyes adat nélkül.
Kész vagy, ha…
…a W3C validátor (validator.w3.org, fájlfeltöltéssel) nem talál hibát az oldaladon, és egy társad a forráskód alapján el tudja mondani, melyik sor mire jó.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …hogyan nyitok meg egy projektmappát, és hogyan készítem el a vázat a VS Code-ban. (1.1)
- …miért index.html a főoldal, és hogyan nevezem el szabályosan a fájlokat. (1.2)
- …mit csinál a doctype és a lang. (1.3)
- …mi kerül a head-be, és mire jó a charset, a title és a viewport. (1.4)
- …hogyan ágyazom egymásba helyesen a címkéket, és mi a DOM-fa. (1.5)
- …mire jó a megjegyzés, és miért nem titkos. (1.6)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra (a gyorsabban haladók egy óra alatt átveszik a modult), ismétlésre, dolgozat előtti összefoglalásra és érettségi-felkészítésre. A záróprojekt új helyzetben kéri a tudást, és a W3C validátorral önellenőrzést is ad.
Időterv (45 perc)
Puska és villámkérdések: 12 perc. Gyorsfeladatok: 15 perc. Hibavadászat: 5 perc. Záróprojekt elkezdése: 13 perc.
Értékelés
A „Tudom, hogy…” lista önértékelésre, a záróprojekt a validátor eredménye és a „Kész vagy, ha…” szempont szerint értékelhető.