Bevezető

Az oldalról

Az oldal alapvetően azoknak szól akik meg akarnak tanulni honlapot készíteni, de még sose csináltak, ill. akik már csináltak de meg akarnak tanulni valamit ezzel kapcsoltaban amit még nem tudnak. Egyszóval azoknak akik kezdőknek érzik magukat vagy nem érzik magukat kezdőknek pedig azok. Néhány tudnivaló: én sem tudok mindent. Elképzelhető, sőt valószínű, hogy nem találsz meg ezen az oldalon mindent amire éppen szükséged van ez leginkább a PHP oldalnál jellemző. Egy oldal szerkesztése és a HTML kódolás megtanulása sok munka! Aki lusta az zárja is be az oldalt és használjon egyszerű tanulást nem igénylő E-oldalt amit én azért nem használok mert a megadott sémák közül nekem egyik sem tetszik, így inkább saját témát készítek. A HTML alapjai egyszerűek 1 hét alatt megtanultam, de a formázás, hogy csinálj egy oldalt mint ez nekem évekbe tellett megtanulni. Neked annyiban van szerencséd, hogy mindent amit tudok azt itt leírom és te megtalálhatod. Ezen kívül itt megtalálkod azt is amit én egyik ilyen tanító oldalon nem láttam, hogy hogyan tudod az oldaladat közzétenni az interneten.

Mi az a HTML-kódolás?

A HTML tulajdonképpen egy nyelv, egy nyelv amit meg kell tanulnod beszélni ahhoz, hogy csinálj egy web oldalt. Megtanulása hosszú idő, de egyszerűbb ha tudod kezelni a Microsoft Office Word-öt vagy ehhez hasonló szövegszerkesztő programokat. Előnyt jelent ha beszélsz angolul mivel minden kód egy angol szó vagy egy angol szó rövidítése. Hogy mire is jó? Ezzel a kódolással lehet először és nem utolsó sorban honlapot készíteni. Ha egy filmhez subtitle-t csinálsz a szöveget ugyanígy HTML kódolással tudod kisebbé nagyobbá döltté stb. tenni. És végül a HTML nem csak egy kódolás hanem egy formátum is (*.html) méghozzá egy olyan formátum amit mindenki meg tud nézni, hiszen nincs hozzá szükség különleges programokra csak egy böngészőre amit nem is kell letölteni hiszen ha más nem az Internet Explorer ingyen le van töltve minden gépre. És nézzük is meg hogyan épül fel ez a "nyelv".

A HTML-kódolás alapjai

Nos kezdjük az elején. Hogy csináljunk egy *.html formátumú fájlt. Jegyzettömb. Megnyitod a jegyzettömböt belírsz valami zagyva szöveget és elmented bármilyen néven *.html formátumban (Hyper text marup language = HTML) akkor onnantól ezt kénytelen vagy böngészővel megnyitni. Én személy szerint a Notepad+ ingyen letölthető programot használom még később vissza térek rá, hogy ez nekem miért jó:). De ahhoz h lássad mit is írtál oda nem elég a zagyva szöveg, komoly szabályoknak, előírásoknak kell megfelelni.
A nyelv alapjai:

A HTML-t ún. TAG-ek építik fel. Úristen! Nem nem olyan durva. A tag egy parancs ami azt parancsolja az oldalnak, amit akarsz, hogy parancsoljon. Jó példa erre, "legyen a szöveg dőlt betűs". Ezt egy taggel éred el. A taget leírod a szövegrész elé és onnantól minden ami a tag után van dőlt betűvel lesz írva. Akit már most érdekel egyébként a dőlt betű tagje az "i". A tageket minden esetben relációs jelek közé írjuk amelyeket úgy használjuk mint a zárójeleket.
"<" ezzel kezdődik minden tag és ">" ezt rakjuk minden tag végére. Ez azért kell mert természetesen az nem működik, hogy leírom az "i" betűt a szövegben és máris dőlttel lesz minden. <tag> így néz ki egy parancs. Ez az oldal alapvetően ezeket a tageket fogja leírni, hogy mit melyikkel tudsz elérni. A tagek természetesen nem látszanak az oldalon csak a hatásuk.

A legtöbb tagnek van egy nyitó és egy záró tagja. Ez arra való, hogy leírod, hogy <i> és onnantól minden dőlt betűvel lesz írva. De azért legtöbb esetben nem akarjuk, hogy egy egész oldal dőlt betűvel legyen, ilyenkor szükség van egy záró tagre. A záró tag minden esetben ugyanaz mint a nyitó viszont egy / jelet kell elhelyezni a relációs jelek között. <tag> a szöveg itt meg van formázva a tagnek megfelelően </tag> és itt vége is van a formázásnak.

Na akkor mégegyszer röviden, nyitó tag: <tag>, </tag> záró tag, és fontos, hogy a / mindig éppen a nyitó relációs jel után jöjjön!. Léteznek ezen kívül az "al-tagek" melyek mint nevük is mutatja a tagek alatt vannak. Az altagekhez egy paraméter tartozik amely a tag tulajdonságait változtatgatja. Az altageket a tagek után egy szóközzel elválasztva írjuk be, az altag paramétereit egyenlőségjellel kapcsolva idézőjelek közé írjuk. Kicsit érthetőbben:
<tag altag="paraméter"> formázott szöveg vagy valami más formázott dolog </tag>.
És, hogy mire is jók az altagek? A legtöbb taghez tartoznak altagek. Mint például van egy tag ami arra specializálódott, hogy a szöveg minden formai dolgát megadja (ez a "font"). De ha leírod ezt a taget csak kiadsz egy parancsot, hogy változzon meg a szöveg formája. De azt, hogy miben változzon meg azt az altag parancsolja és azt, hogy ez a tulajdonsága mire változzon meg ez a paraméter. Konkrét példával leírom a "font" parancsot majd a "color" altaget és ha hiszitek, hanem ez a szöveg színét fogja megváltoztatni és a paraméterrel megadhatom, hogy white amivel a szövegünk fehér lesz. Hogy miért nem képesek kitalálni egy olyan taget, hogy "color" és nem kell az altagekkel szórakozni? Nem tudom. De később egy kép beszúrásánál az altagek nagyon megkönnyítik majd az életünket (az altagekkel adható például meg, a beszúrandó kép mérete).

Hogyan épül fel egy HTML weboldal?

Ha egy HTML oldalt kezdesz felépíteni meg kell nyitni az oldalt, majd le kell zárni. Ez a parancs pedig a <html> amely mindig az oldal kezdő "szava" a végszó pedig a </html>. Ha ez megvan, akkor elkezdtél egy weboldalt szerkezteni. Menjünk is tovább, a következő két tagünk az oldal feje és teste. A feje a <head> paranccsal adható meg, ezzel "gondolkodik" az oldal, ide kell majd az összes CSS formázást megadni. Ezt nem szeretném tovább kifejteni, legyen elég az, hogy itt adható meg az összes HTML-lel nem szerkeszthető különleges formázás. Amire mi tudjuk HTML-lel használni a "head"et az az oldal elnevezése. Az oldalnak egy címet lehet megadni a headben amiket a <title> és a </title> közé kell írni. Ez fog megjelenni a böngésződ "fülein". Ezen kívül Ide kerülhet a <bgsound> tag is amely az oldalad alatt menő háttér zenét adja meg. Egy kicsit bonyi úgyhogy az egyébben nézd meg ha érdekel. A "title" tagek után bezárjuk a headet is </head> és megnyitjuk az oldal legfontosabb részét a "body"-t.

<body></body> így néz ki a HTML oldal teste. Amit a két tag közé írsz, az megjelenik majd a weboldalon, ha táblázatokat képeket stb. akartok az oldalatokra rakni akkor ezt a bodyban tehetitek meg. És íme az első tag amihez altagek tartoznak, most ebből kettőt szeretnék megmutatni. Először is a "text" aminek a paramétere valamilyen szín. Ez a szín lesz az oldal szövegének az alapértelmezett színe, ami persze megváltoztatható egyes bekezdésekre. A színeket meg lehet adni angol szavakként (purple, brown...) de HTML színkódokként amivel bizonyára találkoztál már, ez egy # után 6 karakter betűk és számok. Figyelmedbe ajánlom a http://users.atw.hu/vitt1c3ps/htmlszinkod.php weboldalt amnellyel könnyen megkeresheted egy szín HTML színkódját (ez a HEX utáni karaktersor). A másik tag ami igazából kettő az oldalad háttere. Ehhez használhatod a "bgcolor" altaget amihez egy egyszerű szín tartozik ill. a "background" altaget amihez egy kép fájlneve tartozik. FONTOS!! A kép egy fájlnévből és egy kiterjesztésből áll. Ha képet akarsz háttérnek a kép neve például hatter.jpg és nem csak hatter. Másik fontos dolog, hogyha a kép nem ugyanabba a mappába van elmentve mint a html oldalad a HTML nem fogja megtalálni a képedet kivéve ha leírod a teljes elérési útvonalat, pl. file:///C:/Users/Ádám/Desktop/hatter.jpg.
Pl.

És ennyi is volna a HTML kódolás alapjai, már létre tudsz hozni egy weboldalt, amiben szöveget akár színes szöveget tudsz írni és hátteret tudsz beállítani ill. címet adni az oldaladnak:). Az áttekintés kedvéért nézzünk egy gyors példát egy egyszerű weblapra.: