Első HTML oldalunk

A HTML utasítás a szabvány szerint lehet kisbetűs és nagybetűs is, vagyis elvileg mi magunk dönthetünk, hogy hogyan írjuk a különböző tageket. Azonban mi azt javasoljuk, hogy - a fejlettebb, XHTML szabványra történő átállás megkönnyítése miatt - a tagek neve mindig csupa kisbetűvel szerepeljen a kódban.

A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a utasítás jelzi. A fejlécelemek között szokás a lap címét megadni, mely címet a és a utasítások közé kell zárni. Szintén a fejlécben helyezhetünk el különböző kliens oldali scripteket is, illetve a stílusdefiníciók is itt kaphatnak helyet. A fejlécet a utasítás zárja le.

A dokumentumtörzsnek a és utasítások közötti részt nevezzük. Ezen elemek között kell elhelyeznünk a lap tényleges tartalmát, a szövegeket, hivatkozásokat, képeket, táblázatokat, űrlapokat, stb.Természetesen tetszőleges szövegszerkesztőt is használhatsz a kód megírásához, amit aztán el kell mentened, majd a böngészőbe be kell olvasnod.

374288

Figyeljünk arra, hogy a szövegszerkesztő ne tegyen a dokumentumhoz semmilyen többlet információt, ezért ha például WinWord-öt használunk, akkor a Mentés másként utasításnál ne felejtsük el megadni a Csak szöveg elnevezésű fájl típust. A fájl kiterjesztése legyen HTML vagy HTM, attól függően, hogy 32 vagy 16 bites operációs rendszert használunk. Ezek után, ha meg szeretnénk nézni, mit is csináltunk, indítsuk el kedvenc Web böngésző programunkat és nyissuk meg az előbb kimentett fájlt.


Lássuk, hogyan néz ki a HTML kód!

374289

A fenti kód így jelenik meg a böngészőben.

A legelső sor egy főcímet definiál, ami alapesetben nagyobb betűvel, vastagon szedve jelenik meg a böngészőben. Az egész- ' h1 Ez egy főcím /h1'-sort nevezzük elemnek. A -h1-a nyitó címke (tag), a -/h2-pedig a záró címke. A főcím szövege a nyitó- és a záró címke között áll. Egycímke tehát a kisebb () jelek között áll. A zárócímkét úgy tudjuk jelezni, hogy rögtön a kezdő < jel után egy / (perjelet) teszünk.

Az -ul-...-/ul- címkék egy listát definiálnak a -li-...-/li- címkék pedig egy listaelemet fognak közre. A lista definiálásából látható, hogya címkék egymásba ágyazhatók. Arra figyeljünk, hogy mindig azt a címkét kell előbb lezárni, amelyiket legutoljára nyitottunk ki.

Az -a-...-/a- címkék közé írt szöveg linkként fog viselkedni, azaz a böngésző kék színnel aláhúzza, és a rajta való kattintáskor egy másik weboldalra tudunk eljutni.Azonban ehhez azt is meg kell mondanunk, hogy pontosan melyik weboldalra mutasson a link, különben honnan tudná a böngésző, hogy melyik oldalt kell betöltenie? Erre való a href nevű attribútum. Az attribútumokat mindig a kezdő címkébe kell írni, ha több attribútum van, akkor szóközzel választjuk el őket egymástól.

Az attribútum áll a nevéből, ez most a href, és az értékéből, a név és az érték közé egyenlőségjelet kell tenni. Az attribútum értékét pedig írógépi idézőjelek (" ") közé kell írni.

Az -a- címke tartalmaz egy másik attribútumot is, ezért a két attribútum szóközzel van elválasztva egymástól. A title attribútum értéke egy szöveg, ami akkor fog megjelenni, ha az egérmutatót alink felett pihentetjük; ez egyfajta segédszöveg, hogy merre is mutat a link.
Ezután következik a -br- címke, ami egy sortörést okoz. Ez egy úgynevezett üres elem, mert nem kell közé semmilyen szöveget írni. A -h1-...-/h1- címkék egy szövegre vonatkoztak, míg a -br-egyszerűen csak van, nem vonatkozik semmilyen szövegre, ezért hívjuk üres elemnek. Ilyenkor a címke úgy viselkedik, mint egy nyitó címke, és nincsen lezáró párja.

Az üres elemeknek is lehetnek attribútumaik, ezeket ugyanúgy kell megadni, mint a nyitó címkéknél. Ezt rögtön láthatjuk is az

A tageket egymásba is ágyazhatjuk, de ekkor fontos, hogy mindig azt a taget zárjuk le először, amelyet utoljára nyitottunk meg. Hasonlóan ahhoz, ahogy mondjuk a matematikai kifejezéseket zárójelezzük( a + [ b * c ] ).

Valójában nem kötelező használni sem a html, sem a head, sem a body elemet, ezek elhagyhatók. Azonban praktikus kiírni őket, így áttekinthetőbb lesz az oldalunk.
Sőt HTML-ben nem is kell lezárni mindig a címkéket, illetve nagybetűvel is írhatjuk őket, továbbá nem kell mindig idézőjelbe tenni az attribútumok értékét. Szintén érdemes azonban ezeket a lehetőségeket elkerülni, és úgy használni a nyelvi elemeket, ahogyan ebben a cikkben látjuk!

A megjelenő Weboldal bizony nem nyerne szépségversenyt, de méltán büszkék lehetünk, hogy minden segédeszköz nélkül készítettük.

Biztosan észrevette már internetezés közben, hogy a legtöbb honlap címe mellett a böngészőben egy kis ikon jelenik meg, ami kifejezi a honlap tartalmát, stílusát. A Wikipedia például egy „W"-t ábrázoló ikont választott:

374227
Ezt hívják faviconnak is. Az ikonnak a favicon.ico nevet kell adni, ésegy 16×16-os méretű képfájlból kell létrehozni, valamilyen konvertáló programmal. A favicon.ico fájlt a honlapunkat tároló webszerver gyökérkönyvtárába kell elhelyezni. Ezt így tudjuk ellenőrizni: Írjuk be a böngészőnkbe ahttp://www.sajatoldalam.hu/favicon.ico címet, ahol cseréljük le awww.sajatoldalam.hu domaint az igazi domain nevünkre! Ha megjelent a favicon képe a böngészőben, akkor jó helyre tettük. Ezután a következő sort kell felvennünk a head, az az fejrészbe legalább a kezdőoldalunkban, de inkább minden oldalunkban:

374290

Egy kis szépítés

Egy Web oldal akkor éri el célját, akkor hatásos, ha megfelelően fel tudja hívni magára a figyelmet. Erre manapság persze vannak olyan csoda eszközök, mint a keretek használata, háttérzene alkalmazása vagy izgo-mozgó Java appletek beszúrása. Ezeknek a technikáknak az elsajátításáról számos vastag könyvet írtak már, nem egy néhány oldalas kedvcsináló feladata ezek leírása. Ráadásul vannak olyan programok (MicrosoftFrontPage, Adobe PageMill, Corel Web.Master), amelyek segítségével, a HTML dokumentum szerkezetéről mit sem sejtve, vizuálisan készíthetjük el szebbnél szebb Web lapjainkat. A látványos eszközök használata természetesen a HTML dokumentum méretét és ezzel együtt az Inteneten keresztüli letöltés idejét is jócskán megnöveli.

A honlapkészítés igen fontos részét jelentik a felhasználó reakcióit figyelő utasítások. Ezeket általában különféle, úgynevezett script nyelvek ismeretével és használatával kezelhetjük. Mint az előző mondatból már kiderült, a Java Script egy script nyelv, amely leegyszerűsítve azt jelenti, hogy egy másik, önálló programozás egyszerűsített mása.Ez egy külső értelmezőt használ a futásához, ezzel szemben a Java Scriptet a gépünkre telepített böngésző képes futtatni. Így a JavaScript parancsnyelvnek is nevezhető.

Legelőször a Netscape 2.0 támogatta, majd a Hot Java és a 3.0-s verziójától kezdve a Microsoft Internet Explorer is.

382751

Ennek a nyelvnek az ismerete elsősorban arra tesz képessé bennünket, hogy oldalainkat interaktívvá tegyük. Dinamikusan kezelhetjük vele oldalaink hátterét, link- és betűszínét, keretrendszereit. Lekérhetjük a pontos időt, a dátumot stb.

Remélem sikerült meggyőződni arról, hogy érdemes a Java Scripttel mélyebben is foglalkozni.

Ezzel az oldallal még nem kiálthatjuk ki magunkat webfejlesztőnek, addig még sokat kell tanulni, de aki megizlelte a siker izét, és kedvet kapott hozzá, már csak szorgalom és akarat kérdése, hogy mennyire ássa be magát a témába. Lehet hátteret beállitani, szöveget formázni, képeket beszúrni, táblázatot létrehozni,a kész müvet pedig publikálni.

A hozzászólás csak a regisztrált és bejelentkezett tagok számára engedélyezett!

Oldalainkat 29 vendég böngészi
Látogatóink száma: 2010.07.10 -től