Ebben a cikkben a HTML nyelv alapjait ismerjük meg, kezdve a szó jelentésével, a környezettel, valamint első oldalunk létrehozásával.
Mit jelent a HTML?
A HTML egy angol mozaik szó, jelentése: Hyper Text Markup Language = hiperszöveges jelölőnyelve. Az érthetőség kedvéért magyarul szebben úgy nevezik ezt és a hasonló nyelveket, hogy leírónyelv.
Ez mint a neve is mutatja még nem programozás, hanem lényegében leírjuk a böngészőnek, hogyan adjon külsőt és dolgozza fel a megjeleníteni kívánt fájlunkat.
Futtató környezet:
A futtató környezettel szerencsére nem kell foglalkoznunk (telepíteni, beállítani), ugyanis feltételezem, ha olvasod ezt a blogot már rendelkezel valamilyen böngészővel, a célnak bármelyik megfelel (IE, FF, Opera, stb.). És ha jól gondolom egy Jegyzettömb (Notepad) vagy hasonló szövegszerkesztő is megtalálható a gépeden. Kezdetnek ennyi bőven elég lesz, viszont a későbbiekben nem árt egy rendesebb szövegszerkesztő beszerzése, mely már kiemeléseket és autómatikus tördelést is végez.
Ilyenek például:
- HTML-Kit Tools, igyenes, sok plugin tölthető le hozzá www.chami.com/html-kit/
- PHP Designer, fizetős, viszont nagyon sok funkciója van www.mpsoftware.dk/phpdesigner.php
- Notepad 2, ingyenes, kompakt, kisebb kódokhoz tökéletes www.notepad2.com/
Figyelmeztetés: sajnos a böngészők a mai napig nem jutottak el arra a szintre, hogy ugyanúgy jelenítsék meg a html lapunkat ezért más-más böngészővel megnyitva a html fájlodat eltérő kinézetet kaphatsz.Szintaktika:
Igazából sokat nem kell beszélni róla, ugyanis a html nyelv valamelyest WYSIWYG típusú, azaz azt kapod amit látsz. Viszont leíró nyelv mivolta miatt elég sok formázási lehetőséget tartogat. Ezeket tag-oknak nevezzük és kacsacsőrök közé tesszük (<b>) és legtöbbjüket le is zárjuk (</b>).
Kód: <b>ez egy tag</b>A megjelenítésre, formázásra szánt elemek, mint ahogy a példából is látszik a tag-ok közé kerülnek.
Megjelenítés: ez egy tag
A tag-okban léteznek előre meghatározottak, de többségüket mi ruházhatjuk fel opciókkal.
Kód: <font size="3">ez egy tag opcióval</font>Általános kinézet: <tag opció="érték"></tag>
Megjelenítés: ez egy tag opcióval
Egy tag-nak több opció is adható.
Egy HTML oldal szerkezeti felépítése:
Most már nyugodtan nyiss meg egy jegyzettömböt és kezd el megírni első HTML oldalad.
A már megismert két tag-et is használni fogjuk, de először nézzük meg, hogy épül fel egy html fájl. A gépelési hibákra és a tag-ek lezárására ügyelj mindenképp, mert a html fordító betűről-betűre, sorról-sorra értelmezi a dokumentumunkat.
<!-- Amit ezek közé a jelek köző írsz nem fogja a böngésző megjeleníteni, kommentnek nevezzük -->Most már csak mentsd el a fájlodat index.html néven mondjuk az asztalra. (Ne felejtsd el a jegyzettömben átállítani a "fájl típusát" "minden fájlra".)
<html><!-- tudatjuk a böngészővel hogy elkezdjük a html dokumentumunkat -->
<head><!-- ezzel definiáljuk a fejlécet, ezek közé a tag-ek közé kerülő információkat nem jeleníti meg a böngésző, a későbbiekben tárgyaljuk mik is kerülnek ide -->
<title>Első honlapom</title><!-- ez már egy fejléc információt tartalmazó tag, ezek közé kell a honlapunk címét írni, melyet a böngészők legfelül bal oldalt jelenítenek meg -->
</head><!-- itt zárjuk le a fejlécet a záró tag-el -->
<body><!-- és elérkeztünk ahhoz a részhez, amit a lapunk törzsének nevezünk, az ezen tag-ek közé kerülő adatok megjelenítésre kerülnek a honlapunkon -->
<font size="3"><b>első oldalam</b></font><!-- itt alkalmazzuk a már előbbiekben bemutatásra szánt tag-eket, opcióval együtt, a font tagel megmondjuk a fordító programnak, hogy ez karakter lesz, a size opcióval 3-as értéket adunk neki, a b tag-el pedig félkövérré varázsoljuk a közé kerülő karaktereket, ez egyébként egy előre meghatározott működésű tag -->
</body><!-- itt lezárjuk a dokumentum törzsünket -->
</html><!-- itt pedig az egész html dokumentumunkat -->
Most nyisd meg, és ha minden jól ment akkor kapsz egy oldalt melyen az a szöveg található, hogy "első oldalam", aránylag nagy és vastag betűkkel, a böngésző felső csíkjában pedig, hogy "Első honlapom".
Ha nem ezt látod valamit elgépeltél, nézd át mégegyszer.
Ha ezt látod sikeresen elkészítetted első honlapodat.
Összefoglalás
Az első cikkben megismerkedtünk a HTML jelentésével, a futtatói környezettel egy kis szintaktikával és elkészítettük első honlapunkat.
Remélem sikerült érthetően bemutatnom a html nyelv alapjait, ha valami mégsem érthető kommentben jelezd és szívesen segítek.
A biztonság kedvéért gyorsan összefoglalom a ma tanultakat:
- HTML = hyper text markup language = hiperszöveges jelölőnyelv ≈ leírónyelv
- kell egy böngésző és egy jegyzettömb
- WYSIWYG, egyszerű szintaktika, tag-ek használata
- első oldal elkészítése, <html></html> dokumentum elkezdése, lezárása, <head></head> fejléc kezdése lezárása, a közötte lévő információk nem jelennek meg a böngészőben, <title></title> címet ad az oldaladnak, fejlécinformáció, <body></body> html dokumentumunk törzse, a közé kerülő adatok megjelennek a böngészőben, <font size="3"></font> tag, opcióval társítva, <b></b> előre meghatározott működésű tag
- megnézzük, hogy mit is alkottunk
Ahogy időm engedi elkészítem a második cikket melyben a leggyakrabban használt html tag-ekkel és annak opcióival fogunk megismerkedni. Addig is jó próbálkozást!
