Egyedi honlap és webáruház készítés Győr

A weboldal készítés alapjai

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 weboldal készítés alapjai

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:

Weboldal vázának elkészítése

Ezzel el is készültünk weboldalunk fő vázszerkezetével.

Készült: 2013-02-09

Kapcsolódó hírek, hasznos tippek


Kérjen egyedi árajánlatot!

Az ajánlatkérés kötelezettségektől mentes, csapatunk maximum 48 órán belül válaszol minden beérkező üzenetre. Munkáinkra szerződéses garanciát vállalunk, nem tűnünk el, ügyfeleink bízhatnak bennünk és számíthatnak ránk.

Bízza ránk Ön is webes ügyeinek intézését!

További elérhetőségeink

Kérjük, jelölje be az alábbi négyzetet: