HTML - basic - Lecke száma 1
Bevezető
Ebben a leckében megtanuljuk, hogyan néz ki egy weboldal „belülről” és milyen alkalmazásokra illetve fájlokra lesz szükségünk a munka elkezdéséhez.
Egy weboldal fájljai:
A fenti képen láthatunk egy példát egy egyszerű weboldal mappájának tartalmára.
A files mappa tárolja a weboldal által felhasznált képeket, hangfájlokat.
Az index.html tárolja ennek a weboldalnak tartalmát és a szerkezetet/vázat, amit a tartalom felvesz: a szöveget és HTML címkéket (utasításokat). Mivel több html kiterjesztésű fájl is lehet egy ilyen mappában egyezményesen az index nevű indul el a böngészőben a weboldal Internetről való megnyitásakor.
A style.css tárolja a tartalomra vonatkozó formázásokat: színek, méretek stb. Ezeket külön fájlba tároljuk, mivel több HTML dokumentumra is vonatkozhat egy css fájl tartalma illetve így átláthatóbb és könnyebben megtaláljuk a formázásokat, ha módosítani szeretnénk valamit.
A functions.js fájl JavaScript kódot tartalmaz. Mint a css fájlok esetében itt is az átláthatóság és könnyebb alkalmazhatóság érdekében szoktuk létrehozni a js fájlokat.
A HTML nyelv:
a <h1>, </h1> a főcímet jelöli.
Szükséges programok:
Egy weboldal fájljai:
- A weboldal megnevezés félrevezető ugyanis egy weboldal tulajdonképpen több dokumentumot, fájlt jelent.
- Egy weboldalhoz tartozó fájlokat egy mappába szükséges tárolni/másolni, mivel „szükségük” van egymásra, és a fájlok utólagos elmozgatása gondot, plusz munkát okozhat.
- Egy weboldal fájljait tartalmazó mappában találkozhatunk html, css, js kiterjesztésű fájlokkal, illetve újabb mappákkal.
A fenti képen láthatunk egy példát egy egyszerű weboldal mappájának tartalmára.
A files mappa tárolja a weboldal által felhasznált képeket, hangfájlokat.
Az index.html tárolja ennek a weboldalnak tartalmát és a szerkezetet/vázat, amit a tartalom felvesz: a szöveget és HTML címkéket (utasításokat). Mivel több html kiterjesztésű fájl is lehet egy ilyen mappában egyezményesen az index nevű indul el a böngészőben a weboldal Internetről való megnyitásakor.
A style.css tárolja a tartalomra vonatkozó formázásokat: színek, méretek stb. Ezeket külön fájlba tároljuk, mivel több HTML dokumentumra is vonatkozhat egy css fájl tartalma illetve így átláthatóbb és könnyebben megtaláljuk a formázásokat, ha módosítani szeretnénk valamit.
A functions.js fájl JavaScript kódot tartalmaz. Mint a css fájlok esetében itt is az átláthatóság és könnyebb alkalmazhatóság érdekében szoktuk létrehozni a js fájlokat.
A HTML nyelv:
- Weboldal létrehozásakor elsősorban a HTML leíró nyelvet szükséges elsajátítani. Egy weboldal tartalmának rendszerezésére és formába öntésére használjuk a HTML-t. A HyperText Markup Language/hiperszöveg leíró nyelv rövidítése.
- A HTML nyelv címkéket (tageket) használ, amelyek legtöbbször párban fordulnak elő, a formázandó rész előtt és után. Tehát egy címke-pár az általa közrezárt szövegre van hatással, annak „jelentése” függvényében.
a <h1>, </h1> a főcímet jelöli.
Szükséges programok:
- A HTML dokumentumokat egyszerű szövegszerkesztő programmal is lehet szerkeszteni. Pl: Notepad vagy Notepad++.
- A HTML dokumentumok megjelenítését, értelmezését a böngésző programok oldják meg.
Letölthető fájlok
Feladatok
1. Keresd megszámítógépeden a Notepad++ programot .Ha nincs meg, akkor töltsd le a következő oldalról a legújabb verziót és telepítsd: : https://notepad-plus-plus.org/
2. Töltsd le az alap weboldalt, amelyre szükséged lesz a következő leckék során. A letöltött fájlok/a mappa csomagolva vannak, csomagold ki a mappát.
Kérdőív
1. Melyik fájl tartalmazza a weboldal struktúráját?
2. Mit jelent a hypertext?
3. Melyik program egy böngésző?
4. Melyik szimbólumot használják a HTML nyelv zárócímkéiben?
5. Az alábbi listában szereplő fájlok közül melyiknek kell benne lennie egy weboldal mappájában?
Kiegészítő információk
