Kiss Honlapkészítés elérhetőség ikoninfo@kisshonlapkeszites.hu

Kiss Honlapkészítés telefon ikon + 36 70 252 4759

Egyedi honlapkészítés Győr

weboldal-keszites

Weboldal készítés,
Webdesign készítés,
Honlap karbantartás
latogatottsag-noveles
Látogatottság növelés,
Keresőoptimalizálás (SEO),
Bevételt termelő honlapkészítés

webaruhaz-keszites

Webáruház készítés,
Webshop készítés,
Webshop karbantartás

A weboldal készítés alapjai

Olvasóink értékelése: 5 / 5

Csillag aktívCsillag aktívCsillag aktívCsillag aktívCsillag aktív
 

 

A weblap fejlesztés alapjaiA 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:

<strong>vastag szöveg</strong>

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.

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional/xhtml1-transitional.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head>
<body>
<div id="keret"></div>
</body>
</html>

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:

body {
margin: 10px 0 20px 0;}

#keret {padding: 0px; height: auto; width: 986px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}

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:

<link href="/stiluslap.css" rel="stylesheet" type="text/css" />

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.

<div id="fejlec">Fejléc</div>
<div id="menu">Menü</div>
<div id="bal">Bal Bal Bal Bal Bal Bal Bal Bal Bal Bal Bal Bal Bal Bal </div>
<div id="jobb">Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb Jobb </div>
<div id="lablec">Lábléc</div>

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:

body {margin: 10px 0 20px 0; background-color: #819EAD;}
#keret {background-color: #FFF; width: 986px; border: 1px solid #FFF; margin: 0px auto;}
#fejlec {background-color: #33454D; margin: 0px; padding: 0px; height: 150px; width: auto; color: #FFF;}
#menu {background-color: #33454D; margin: 0px; height: 44px; width: auto; padding-left: 30px; color: #FFF;}
#bal {width: 200px; float: left; padding-top: 10px; padding-right: 10px; padding-left: 10px; background-color: #FFF;}
#jobb {border-left: 1px solid #2b363a; margin: 0 0 0 220px; padding: 20px; width: auto;}
#lablec {background-color: #33454D; clear: both; margin: 0px; height: 70px; color: #FFF; font-size: 16px; vertical-align: middle; padding-top: 8px 10px 1px 10px;}

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.


<< A legfontosabb szám az online marketingben

Blog címlap

A sikeres webáruház titkai >>

 

 


Tippek röviden

  • Mit nevezünk minőségi tartalomnak? 2016-02-06

    A minőségi tartalom egy blog, vagy bármilyen weboldal esetében rendkívül fontos, hiszen ez elsődleges rangsorolási szempont a különböző...

  • Google Webmester Eszközök - azaz GWT 2016-01-16

    A GWT, vagyis Google Webmaster Tools, magyarul Google Webmester Eszközök egy rendkívül jó eszköz, amely teljesen ingyenes, és integrálni tudja...

  • Weboldal ereje számokban 2015-12-10

    A PageRank értéke az a mérőszám, amit már 1998-tól egy oldal erősségével kapcsolatos legfontosabb értékként kezelnek az internetezők, hiszen Larry...

Kapcsolat

KISS HONLAPKÉSZÍTÉS GYŐR
info@kisshonlapkeszites.hu
Tel: +36 70 / 252 4759

Korábbi bejegyzések

  • Mit nevezünk minőségi tartalomnak? 2016.02.06.

    A minőségi tartalom egy blog, vagy bármilyen weboldal esetében rendkívül fontos, hiszen ez elsődleges rangsorolási szempont a különböző...

  • Google Webmester Eszközök - azaz GWT 2016.01.16.

    A GWT, vagyis Google Webmaster Tools, magyarul Google Webmester Eszközök egy rendkívül jó eszköz, amely teljesen ingyenes, és integrálni tudja...

  • Weboldal ereje számokban 2015.12.10.

    A PageRank értéke az a mérőszám, amit már 1998-tól egy oldal erősségével kapcsolatos legfontosabb értékként kezelnek az internetezők, hiszen Larry...

  • AdWords vagy keresőoptimalizálás? 2015.11.16.

    A látogatók vonzásának több módszere is van, a legnépszerűbbek közé tartoznak a különböző fizetett hivatkozások, mint például az AdWords, valamint a...

  • Mobilra optimalizált weboldalak 2015.10.28.

    Jelenleg az internetezők egyik legnagyobb kategóriáját azok képezik, akik valamilyen okos készülékről böngésznek (telefon, tablet, stb.), ezt pedig...

honlapkeszites-arajanlat-keres-tablet

KÉRJEN EGYEDI ÁRAJÁNLATOT!

Nincs értelme tovább várnia! Vegye fel velem a kapcsolatot az alábbi űrlap segítségével, vagy hívjon a +36 70 252 4759-es telefonszámon.

Powered by ChronoForms - ChronoEngine.com