Honlapkészítés

Honlap tervezés és készítés

Ezt az oldalt azért hoztuk létre, hogy a honlapkészítés és weboldal készítés szolgáltatásunkkal tökéletesen ki tudjuk szolgálni a honlapunkra látogatókat, így ha valaki honlapot akar készíttetni, akkor a legtökéletesebb helyen jár.

Webdesign

Webdesign, tervezés kivitelezés

Másodlagos tevékenységünk a honlapkészítés után a webdesign, hiszen a két webes kifejezés szoros kapcsolatban áll egymással az internetes tervezés másszóval design és web készítés területén.

WEBDESIGN - Tippek és Trükkök, kezdéshez

Hogyan kezdjem? (honlapkészítés házilag 1. rész)

Honlapunkon cikksorozatot indítunk kezdő honlap készítőknek. A cikksorozattal az a célunk, hogy segítsünk azoknak, akik önállóan szeretnének honlapot készíteni saját maguknak. A cégünk támogatja a kezdőket, hiszen ezzel az információ áramlást biztosítjuk partnereink felé és nem veszítünk potenciális vevőket.

vágjunk is bele az első saját honlap elkészítésébe. Azért, hogy az egyszerűséget megtartsuk, sok technikai információt csak a későbbiekben fogunk megtárgyalni. Ez segít a későbbi megértésben is és jelenleg ezekre az információkra nincs is szüksége.

Az első lecke végig fogja vinni egy nagyon egyszerű honlap készítésében, amely tartalmaz szöveget, képet, hivatkozást másik oldalakra és e-mail küldési lehetőséget. Amire jelenleg szüksége van az nem más, mint egy egyszerű szövegszerkesztő, bármilyen megfelel, akár a sima jegyzettömb is. Ha windows XP-t használ, akkor ezt megtalálja a 'START' menü -> 'Programok' -> 'Kellékek' -> 'Jegyzettömb' útvonalon.

1. Először is gépeljük be a honlap első sorát

<HTML>

majd gépejük be ezt

</HTML>

A kis és nagybetű itt nem számít. Azért írtuk nagybetűvel, hogy könnyen lehessen olvasni. Ezzel még nem tettünk semmit, csak megmondtuk a böngészőknek, (Netscape, Internet Explorer, FireFox, stb.) hogy ez a dokumentum egy HTML dokumentum . Az első <HTML> kód megmondja a böngészőnek, hogy itt kezdődik a HTML kód, a másik </HTML> pedig, hogy itt van vége. Eközé a két kódelem közé kell elhelyezni a weboldal tartalmát.

Miért is kell kettő ebből az elemből (<HTML> and </HTML>). Ez a módszer arra, hogy megkülönböztessük a nyitó és záró elemeket egymástól. A záró elem mindig ilyen formátumú </.....>. A legtöbb esetben, az elemeket ilyen módon KELL lezárni, melyeket megnyitunk.

2. Nézzük meg hogyan is néz ki a dokumentum fejrésze.

<HTML>
<HEAD>
<TITLE>Az első oldalam...</TITLE>
</HEAD>

</HTML>

A <HEAD> elem jelenti a dokumentum fejrészének kezdetét és a </HEAD> pedig a végét.
A <TITLE> elem azt modnja meg a böngészőnek, hogy mi az oldalam címe, jelen esetben "Az első oldalam...". Ez a szöveg fog megjelenni a böngésző legfelső sávjában. Hogy hol?? Nézzen fel az ablak legfelső sorára, amelyiket éppen most olvassa, ott ezt látja "VargaBetű.hu - Honlapok, honlapkészítés, webdesign, minőség", na erről van szó.

3. Most tegyük be az első kifejezést amit a böngészők ki is írnak a képernyőre.

<HTML>
<HEAD>
<TITLE>Az első oldalam...</TITLE>
</HEAD>
<BODY>
<H1>HELLÓ VILÁG</H1>
</BODY>

</HTML>

Betettük a <BODY> tagot, ami megmondja a böngészőnek, hogy honnan kezdődik a dokumentum "test" része. <H1> jelenti a fejléc típust (header 1), ami alap esetben a legnagyobb betűfajtát jelenti (ez lent látható is). Kipróbálhatja <H1>-től egészen <H6>-ig. A különböző számok a betűk különböző méreteit jelenti.

Lássunk egy példát:

h1

h3

h5

Térjünk vissza a saját oldalhoz. Nos ez a rész így fog kinézni a böngészőben:

HELLÓ VILÁG

Mentsük el az eddig készített dokumentumot és tekintsük meg egy böngészőben. Elmenteni a Fájl menüpontban a mentés másként paranccsal lehet, nevezze a fájlt kedve szerint. A lényeg, hogy "htm" vagy "html" legyen a kiterjesztése. Jegyezze meg a helyét a gépen ahová a dokumentumot mentette. Nyisson egy böngészőt és nyissa meg benne az elmentett fájlt.

Egy nagy "HELLÓ VILÁG" feliratot kell látnia.

4. Most pedig irassunk ki egy mondatot és rendezzük a pozícióját:

<HTML>
<HEAD>
<TITLE>Az első oldalam...</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLÓ VILÁG</H1>
<P ALIGN="LEFT">Ez egy mondat balra rendezve.
<P ALIGN="RIGHT">Ez egy mondat jobbra rendezve.

</BODY>
</HTML>

A <P> bekezdést jelent. Nen szükséges minden esetben lezáró tag a <P> taghoz, de jónéhányan használják már csak az emlékeztetés miatt. A <P> tag megmondja a böngészőnek, hogy új bekezdés következik. Betettük az ALIGN kódszót a <P> tag után. Ezt attribútumnak, tulajdonságnak hévják és ez egy opcionális jelző. Néhány tulajdonság értékét idézőjelek közé kell tenni van amelyiket nem szükséges. Ha mindenhová használjuk nem fogunk hibázni :-).

Így néz ki most a lapunk:

HELLO

Ez egy mondat balra rendezve.

Ez egy mondat jobbra rendezve.



5. Következőnek adjunk egy képet az oldalunkhoz.

A kép hozzáadása az <IMG SRC="....a neve és az elérési útvonala a képfájlnak...."> taggal lehetséges. Nézzük hogyan is kell ezt:

<HTML>
<HEAD>
<TITLE>Az első oldalam...</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLÓ VILÁG</H1>
<P ALIGN="LEFT">Ez egy mondat balra rendezve.
<P ALIGN="RIGHT">Ez egy mondat jobbra rendezve.
<P ALIGN="CENTER"><IMG SRC="kep.gif">
</BODY>
</HTML>

HELLO

Ez egy mondat balra rendezve.

Ez egy mondat jobbra rendezve.


A <IMG SRC="kep.gif"> megmutatja a böngészőnek a megjelenítendő képfájl helyét. Ha a képfájl ne ugyanazon a helyen van ahol a honlap fájl (ahova a honlapot mentettük), akkor máshogyan kell megadni a helyet. Például, ha a c meghajtó képek könyvtárában van akkor: <IMG SRC="c:\képek\kep.gif">, vagy ha egy internetes helyen van: <IMG SRC="http://www.your_name.com/image.gif">.
Lehet, hogy van egy kérdése jelenleg? Honnan veszem a képet? Nagyon sok lehetőség van: szkennelt kép egyenesen a szkennerből, letöltve valamilyen ingyenes képletöltő oldalról, saját maga csinálta, stb. Mindegyik megoldásnak megvan a maga folyamata, a szkenneléshez szkenner kell, a letöltéshez egy jó internetes oldal, ha magunk csináljuk akkor pedig egy jó grafikai szoftver. A grafikai programokról a későbbi részekben lesz majd szó.

6. A következőkben hivatkozást teszünk az oldalunkra, ami egy másik oldalra mutathat.

Ezt a funkciót az <A> tag használatával csinálhatjuk. Nézzük hogyan: <HTML>
<HEAD>
<TITLE>Az első oldalam...</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">HELLÓ VILÁG</H1>
<P ALIGN="LEFT">Ez egy mondat balra rendezve.
<P ALIGN="RIGHT">Ez egy mondat jobbra rendezve.
<P ALIGN="CENTER"><IMG SRC="kep.gif">
<P ALIGN="LEFT"><A HREF="http://www.vargabetu.hu">Kattintson ide a főoldalra lépéshez"</A>
<P ALIGN="LEFT"><A HREF="mailto:posta@email.hu">Küldjön nekem e-mail-t</A>

</BODY>
</HTML>

Az oldalnak most így kell kinéznie:

HELLO

Ez egy mondat balra rendezve.

Ez egy mondat jobbra rendezve.

Kattintson ide a főoldalra lépéshez
Küldjön nekem e-mail-t

Ez a kód <A HREF="http://www.vargabetu.hu">........</A> megmondja a böngészőnek, hogy milyen címre mutasson a hivatkozás az idézőjelek között megadva. E-mail küldésre is használható a hivatkozás ha a "mailto:posta@email.hu" formátumot használjuk (mint a fenti mintában láthattuk).
Az első leckének ezzel vége is. Mentse el a dokumentumot a megfelelő helyre és tesztelje böngészőben.
Tudjuk, hogy valakinek ez az információ kevésnek bizonyul, de van aki számára viszont így elsőre is nehezen érthető, használja mindenki a maga tempójában.
A következő leckében át fogjuk tekinteni a táblázatok használatát.

Jó tanulást mindenkinek!

Legutóbbi munkáink

Honlapkészítés

www.elmenyek.hu

honlapkészítés referencia képekMonty Programszervező Iroda honlapjának tervezése és készítése.

további referenciák...

Honlap felületterv készítés, RTML

www.h2oproshop.com

honlapkészítés referencia képek - h2oproshop.comAmerikai Yahoo! StoreTM oldal vágása, HTML konvertálása és RTML programozása.

további referenciák...
© VargaBetű Bt. Minden jog fenntartva. Honlapkészítés, webdesign

websas.hu
Google PageRank
Magyar Honlap Linkek Hun-Web Linkek