A weboldal készítés alapjait viszonylag gyorsan el lehet sajátítani. Az egyszerűbb weboldalak készítéséhez csupán két programnyelvet kell megtanulnunk. A HTML és a CSS leíró programnyelvek az egyszerűbb programnyelvek közé tartoznak, egy kis szorgalommal ezek a programnyelvek gyorsan megtanulhatóak. A honlapkészítés tanulását akár egy jegyzettömb használatával is el tudjuk kezdeni.
A HTML nyelv
Hypertext Markup Language, azaz a HTML programozási nyelv az internet alapvető programnyelve. Minden weboldal tartalmaz HTML programkódot.
A HTML építőelemei a tag-ek (ejtsd "teg")
A HTML nyelvet tag-ek használatával képezzük. Egy szövegrész előtt a nyitótag, a szövegrész után a zárótag található. A tag-eket értelmezik a böngészők, és a közéjük foglalt szövegrészt a tag jelentésének megfelelően jelenítik meg.
Egy egyszerű példa:
A kód eredménye a félkövérrel szedett vastag szöveg.
A HTML weboldal fő részei
A HTML weboldal három részből áll. Az első rész a weboldal html típusát definiálja. A második rész a fej, más néven "head", amely a böngészők és a keresők számára tartalmaz információkat. Ennek a résznek a tartalma nem jelenik meg a weboldalon. A harmadik rész a törzs, azaz a "body". Ebben a részben található tartalmat jelenítik meg a böngészők.
A következő kódot másoljuk be egy jegyzettömbbe, és a megnevezésnek adjuk meg az index.html nevet. Ezzel létre is hoztuk első weboldalunkat.
A keret azonosítójú div lesz a weboldalunk külső kerete. A div-et egy tárolóként képzeljük el, melyet tudunk formázni, méretét és tulajdonságait meghatározni. Alap esetben a div mindig akkora, hogy a benne lévő elemek elférjenek.
A CSS nyelv
A CSS leíró nyelv (Cascading Style Sheets) azaz a lépcsőzetes stíluslapok tartalmazzák a weboldalak formázási leírásait. Korábban ezeket a formázó elemeket közvetlenül a HTML weboldalba írták bele, azonban ez a weboldal kódját nehezen átláthatóvá tették.
A másik oka a CSS bevezetésének a weboldalak formázásának a rugalmasabbá tétele volt. Ha egy honlap sok weboldalból állt, akkor egy elem formázásának a módosításához az összes weboldalt módosítani kellett. Mivel egy stíluslap a hozzá tartozó összes weboldal elemeit formázza, ezért ezzel a megoldással elég egyetlen fájlt, a CSS stíluslapot módosítani, melynek hatására az összes weboldal formázása módosul.
Ma már a HTML dokumentumok egyáltalán nem tartalmaznak formázási elemeket, ezzel is rugalmasabbá és kereső barátabbá téve a weboldal készítést. A css nyelvben három fajta kiválasztót különböztetünk meg:
- azonosító alapú kiválasztó, amikor a HTML taggal azonosítjuk az elemeket
- id alapú kiválasztó, melyet egyedi elemek formázására használunk, a css-ben "#"-el jelöljük.
- osztály (azaz class) alapú kiválasztó, melyet a css-ben "."-al jelölünk. Általában ezt használjuk a leggyakrabban.
Ismét jegyzettömbben dolgozunk. Nyissunk meg egy új fájlt, majd gépeljük be a következő kódot:
A fájlt mentsük el stiluslap.css néven. Ezzel el is készítettük első stíluslapunkat.
A weboldal készítéshez a HTML és a CSS leíró nyelvek megismerése után bele is kezdhetünk.
A HTML fájl és a CSS fájl összekapcsolása
Visszatérünk a korábban elkészített index.html fájlunkhoz. A head részbe gépeljük be a css fájlunkra a hivatkozást:
Ezzel össze is kapcsoltuk az index.html fájlunkat a stiluslap.css fájllal. Ez a gyakorlatban azt fogja jelenteni, hogy a stílusfájlban történő formázások megadása szerint fog megjelenni a böngészőben a weboldalunk.
A weboldal vázának elkészítése
A weboldalunk felülről lefelé egy fejlécet, egy menüsávot, egy bal oldali keskenyebb oldalsávot, egy jobb oldali szélesebb tartalmi oszlopot és egy láblécet fog tartalmazni. Ehhez létre kell hoznunk további 5 div-et a az öt különálló rész számára. Ehhez másoljuk be a következő kódot a keret nevű div-ünkbe.
Fontos, hogy a programozásban csak angol karaktereket használhatunk, ezért a magyar speciális karaktereket kénytelenek vagyunk mellőzni. Azonban ez már nem vonatkozik a tag-ek közötti szövegekre, hiszen a megadott UTF-8 karakterkódolás miatt itt használhatjuk a speciális magyar karaktereket is.
A létrehozott div-eket formázzuk a következő kódokkal a stíluslapunkban:
Ha mindent jól csináltunk, akkor a böngészőnkben megnyitva a weboldalunkat a következő eredményt látjuk:
Ezzel el is készültünk weboldalunk fő vázszerkezetével.
