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!