Kuat - G-Portál

HTML

HTML

Bevezetés: A HTML(Hypertext Markup Language) a webes honlapépítés alapnyelve.Ennek a nyelvnek a segítségével tudunk képeket,szövegeket megjeleníteni,formázni.De ezenkívül még mást is tehetünk,viszont ezt meghagynám későbbre.:) HTML-t bármilyen szövegszerkesztővel írhatunk.Legyen az egy jegyzettömb,egy Notepad++ vagy épp a G-portál FCK vagy CK Editorának Forráskód blokkja.A HTML parancsokat mindig < és > jelek közé írjuk,így:<parancs>.Ezeket hívjuk TAG-eknek.Minden TAG párban áll(nyitótag és zárótag)Más webes programozási nyelvben is lesznek majd TAG-ek,de ezekről,majd még később írok.Egyenlőre még csak az alapokról van szó.De ne húzzuk tovább az időt.Vágjunk bele!

1.lecke(<p> és<br>)

Az első leckében a legalapabb parancsról a <p> és</p> elemről fogok írni valamit.A p az angol bekezdés szó(paragraph) rövidítése.Ezzel kezdünk meg és zárunk le minden egyes bekezdést.De egy bekezdés nem csak szöveg lehet,hanem pl. egy kép is(bár nem muszáj kiírni a kép parancs elé,attól még a böngésző úgy értelmezi,hogy az ott van).
Két bekezdés között viszont a <p>-nél egy nagyobb köz marad,ezért van a szimpla sortörés,azaz a <br>.Többen írnak helytelenül utána </br>-t.De ilyen NINCS!(bár a böngésző attól még néha értelmezi)
A <br> egy kivételes parancs,ami egyedül önmagában áll.Még meglehetne csinálni az általam "gyors-módszernek" hívott gyors megoldással,amikor egy tagen belül zárjuk le a parancsot.Tudom,hogy most többen várják,hogy ezt a módszert elmagyarázzam,de bocsánatot kérek mindenkitől,mert ezt nem írom ki.Egyrészt azért,mert ez nem túl elegáns megoldás,másrészt pedig azért,mert nem teljesen szabályos.De ne térjünk el a tárgytól a sortörésről még annyit kell tudni,hogy mint amire már előbb is céloztam,nem hagy közt két bekezdés vagy szövegrész között.(vagy csak nagyon kicsit)Kb. ennyi lenne az első lecke,nem túl bonyolult,de indulásnak a nehézségi szintje pont megfelel.

!Figyelmeztetés: A <br> megjelenítésileg tud elég veszélyes lenni és egy összefolyt masszát csinálni a szövegünkből,szóval legyünk vele nagyon óvatosak.

2.lecke(text vs. span)

Itt kicsit elgondolkoztam,hogy pontosan,hogy folytassam,mert sok lehetőségem volt és mindegyiknek kb. most kéne jönnie.Végül a szövegformázás mellett döntöttem.Ezt kétféleképpen tehetjük meg.A <text> és </text> elemmel vagy a <span>,</span>-nal.
Kezdjük a <text>-tel.Mondhatni a <text> szinte a legrégebbi szövegfomázási módszer(HTML-ben).Már a HTML korábbi verzióban is használható volt.
Mivel elég rugalmatlan kód mára már csak kevesen használják.De attól még leírom,mert ez a HTML régi szövegformázója.:)
Egy gyakorlati példával fogom bemutatni a használatát:
<text color="#0000FF" size="2">Ide jön a szöveg.</text>
A példában beállítottuk a szöveg színét és méretét.A színt a color elemmel és a színkóddal adtuk meg.Itt épp kékre állítottuk a szöveg színét.Ezután jön a size,ami a méretet szabályozza.Azonban nem pixelben értelmezi és ha utána írunk px-et vagy pt-t akkor sem lesz pixel.Ráadásul láthatjuk a példából,(ha kipróbáljuk)hogy mekkora a változás,mondjuk az egyes és a kettes méret között.Szóval a text nem az igazi.
A <span> már kicsit másabb tészta.Sokkal több lehetőség rejlik benne és szinte közvetlenül lehet benne CSS-t is használni.Innentől pedig a szöveg szinte összes tulajdonságát beállíthatjuk.Szóval a <span>-é a jövő.Végül,hogy ne csak beszéljek(írjak) lássunk egy példát is:

3.lecke(betűstílusok)

Ez egy elég rövid lecke lesz,de nem is akarom nagyon elhúzni.Itt csupán a szövegformázás egyéb lehetőségeit fogom bemutatni egy táblázatban összefoglalva.

Félkövér	<b>Szöveg</b>
Dőlt	<i>Szöveg</i> vagy <em>Szöveg</em>
Aláhúzott	<u>Szöveg</u>
~~Áthúzott~~	<strike>Szöveg</strike>

Ezen kívül még sok féle hasonló stílus létezik,ezek csupán a legáltalánosabbak.

+Kiegészítés: Ne mondjátok,hogy túl keveset írok,ezért itt van még kettő:

^{Felső index}	<sup>Szöveg</sup>
_{Alsó index}	<sub>Szöveg</sub>

4.lecke(képek: az img tag)

Képeket az <img> és </img> tag-ek segítségével tudunk beszúrni az oldalunkba.Először a megnyitás után az alt="szöveg" rész következik.Itt megadhatjuk,hogy mit írjon ki a böngésző,ha esetleg nem lenne elérhető a kép.
Ezután a kép szélességét és magasságát kell megadnunk a width(szélesség) és height(magasság),így: width="érték" és height="érték".Az értéke egy természetes szám vagy auto lehet.Ha egyik értéket sem adjuk meg akkor az auto a teljes szélességet és hosszúságot jelenti.Ha az egyik értéket számként megadjuk,a másikat pedig auto-ra állítjuk az auto értékű paraméter(a szélesség vagy a hosszúság) a másikhoz fog igazodni.A szélesség és hosszúság alapértelmezett értéke auto.(ha nem adjuk meg auto lesz)
A méret meghatározása után meg kell adnunk a kép forrását.Ez a kép beillesztésénél az egyetlen kötelező parancs,amit meg kell adnunk.(már,ha a célunk az,hogy képet szúrjunk be és ne csak csináljunk valamit) Ezt az src="eléréi/út" részlettel tehetjük meg.Ezt követően pedig már csak le kell zárnunk a tag-et és a tagpárost.
És akkor végül lássuk,hogy néz ki ez összerakva:

A kód az oldal fejlécét ágyazza be.Próbáljátok ki!;)

5.lecke(hivatkozások: a elem+href)

HTML-ben hivatkozásokat az <a>,</a> elem href tulajdonságának segítségével gyárthatunk.Először is elemezzünk egy példát:

<a href="//e-world.gportal.hu">Ide jöhet a szöveg,ha nem az oldal címet akarod megjeleníteni.</a>

Az "a" a hivatkozás alapja.(az kezdi meg a tag-et)Ezután jön a href="webcím",ami a hivatkozott tartalom címét vagy más néven elérési útvonalát adja meg.Aztán ezt követi a szöveg,ami a felhasználó előtt meg fog jelennni és,amire kattintva megnyílik a hivatkozott tartalom.Ha a közvetlen címet akarjuk megjeleníteni a felhasználó előtt,akár üresen is hagyhatjuk ezt a részt.De én azt javaslom,hogy inkább másoljuk legalább be ilyenkor a címet,mert egyes gyengébb felfogású böngészők nem fogják megjeleníteni.Végül a lezáró tag következik.
A tag pár első részében lehetőségünk van még megadni,azt is,hogy a hivatkozott tartalom,hogy nyíljon meg.Csupán a target="_megjelnítési mód" részt kell beírnunk az "a" és a "href" rész közé.
Azthiszem, hogy egyenlőre elég két megjelenítési mód a "blank' és a "parent".De igazából a "parent"-et ki se kell írni,mert az az alapértelmezett megjelenítési mód.A kettő közül a "parent" a jelenleg használt ablakban nyitja meg a hivatkozást,míg a "blank" új ablakban vagy fülön(a böngészőtől függ).

!Tipp: Linket nemcsak szövegből,hanem képből vagy akár más típusú tartalomból is lehet készíteni,csupán annyit kell tenni,hogy a szöveg helyett a tartalom kódját szúrjuk be.

6.lecke(igazítás)

Igazítani általánosan HTML-ben a <div>,</div> elemek align tulajdonságával tudunk.Ennek értéke lehet left(bal),center(közép),right(jobb).De a <div>-et nemcsak erre használhatjuk,viszont ez csak később lesz érdekes.
A <div>-en kívül létezik mégegy igazítási mód,ez a már szövegformázásból megismert <span> tulajdonság.Itt is CSS-en kersztül formázunk,viszont kicsit másképp.Példával így:

A példában középre igazítunk,de én ezt nem ajánlom,mert egyrészt lassítja a betöltést,másrészt nem tiszta HTML,harmadszor nem olyan biztos,mint a <div>.Szóval én azt javaslom,hogy maradjunk a <div>-nél.
Végül egy <div>-es példa:

Ez ugyanazt teszi,mint az előző példa,csak jobban és egyszerűbben.

7.lecke(felsorolások)

Felsorolásokat az <ul> vagy néha <ol> elemek <li> elemével tudunk gyártani,valahogy így:

<ul>
<li>Első felsorolás</li>
<li>Második felsorolás
</ul>

Ugyanez <ol>-lal is müködik,csak számokkal,úgyhogy maradjunk inkább az <ul>-nál.Az <ul>-lal nyitjuk meg a felsorolást és a </ul>-lal zárjuk le.A felsorolás <li> elemkből áll.A <li>-k a felsorolt pontokat jelölik.Ezeket nem muszáj lezárni,de szabályosabb.Felsorolásban nem csak szöveget lehet felsorolni,hanem más tartalmat,pl. képet is.

8.lecke(táblázatok)

A táblázatok egy nagyon kicsit bonyolultabbak lesznek,mint az eddigi leckék,de nem sokkal.
Először is a <table> és </table> tag-ekkel nyitjuk meg,illetve zárjuk le a táblázatot.
Ezután lehetőségünk van szétbontani a táblázatot fejlécre és tartalmi részre(nem kötelező).A fejlécet a <thead> és </thead> parancsokkal tudunk készíteni.A tartalmi részt a <tbody>,</tbody> tag-ekkel tudjuk megadni.
Ha nem adjuk meg egyiket sem az alapértelmezett a <tbody> lesz.
Ezután következnek a sorok,amiket már kötelező megadnunk(néhány kivétellel).Ezeket a <tr>,</tr> tag-ekkel készíthetjük el.
A sorokba be kell szúrnunk cellákat.A táblázatoknak a nyitó és záró elemen kívül ez az egy kötelező parancsa.Cellákat a <td> és </td> tag-ek segítségével szúrhatunk be táblázatunkba.
Készítsünk egy példa táblázatot:

<table>
<thead>
<tr>
<td>Próba</td>
</tr>
</thead>
<tbody>
<tr>
<td>Próba</td>
</tr>
</tbody>
</table>
Ezenkívül megadhatunk még tulajdonságokat is a táblázatunk különböző részeinek.Kezdjük a legelsővel,a <table> elemmel.Ennek megadhatjuk a border(keret) értékét,cellspacing(cellaköz) és cellpadding(cellamragó).
Az értékük egy pozitív szám lehet,illetve 0.Ha valamelyik értéke nulla,az el fog tünni.Ez például akkor lehet hasznos,ha egymás alá akarunk pl. képeket tenni,de nem bízunk meg a sortörésben és új bekezdést nem akarunk létrehozni.Ilyenkor elég,ha a keretet,a cellamargót és a cellaközt levesszük nullára és mindegyik elemet külön sorba tesszük.Így a böngészők egységesen és biztosan fogják megjeleníteni(a br-ről ez nem mondható el),ez a kinézeten nem változtat.
Még megadhatjuk a class tulajdonságát is.Ennek nagyrészt a CSS formázásnál van jelentőssége,de néhány más nyelv is használhatja.Ez határozza meg a táblázat típusát és általában CSS formázását.
Aztán jön a <thead>.Ezzel nem szeretnék most foglalkozni és nem is célszerű neki értéket adni,úgyhogy hagyjuk békén,úgyanúgy,mint a <tbody>-t.
Majd a <tr> és a <td> következik.Nekik ugyanazt adhatjuk meg,mint a <table> parancsnak.Ez akkor jó,ha nem az egész táblázatra szeretnénk használni a tulajdonságokat,hanem csak egy cellájára vagy sorára.Egyszerre több különböző sorra vagy cellára is alakalmazhatjuk ugyanazt a beállítást.Ráadásul több sornál(vagy cellánál) több fajta meghatározást is alkalmazhatunk,így különböző sorok vagy cellák jöhetnek létre.

9.lecke(űrlapok)

Elérkeztünk idáig és eddig már több dolgot is megtanultunk vagy legalábbis megtanulhattunk.Már tudunk szöveget írni és formázni,képeket beilleszteni,hivatkozásokat készíteni,igazítani,felsorolni,táblázatot készíteni.
Ez nem is rossz,de még van mit tanulni.Ebben a leckében kicsit jobban kell figyelni,mint eddig,mert ez már kicsit össztettebb az eddigieknél,de hát csak nem futunk el egy bonyolultabb feladat miatt.
Egy űrlapot a <form>,</form> tag-ekkel tudunk elindítani.Ezen belül hozzuk létre az űrlap elemeit az <input> parancs segítségével.Viszont az inputtal egymagában semmit sem érünk,hacsak meg nem adjuk neki a type tulajdonságot.A type értéke lehet text(egysoros szövegbeviteli mező),radio(választási lista,egy kiválasztható lehetőséggel),checkbox(választási lista,több kiválasztható lehetőséggel),password(egysoros csillagozott szövegbeviteli mező) és button(gomb).
Részletesebben a text egy szimpla mező,amelybe egysoros szöveget lehet írni.Pl. ilyen az a mező,ahova belépéskor a felhasználónevet bírjuk.
Ezután a radio jön,amit pl. szavazásoknál is láthatunk.Itt bejelölhetjük az egyik választási lehetőséget,de csakis az egyiket.Ezzel ellenben a checkbox több választást is engedélyez.
Aztán jött a password.A szó magyarra lefordítva szó szerint jelszót jelent.Ebbe a mezőbe írhatjuk be általában a jelszavunkat.Valójában ez ugyanolyan,mint a text,csak a szöveg,amit beírunk csillagok,vagy körök formájában jelenik meg.
Végül a gomb,azaz a button-t láthattuk.Ezt is ha magyarra fordítanánk gombot jelent.És nincs ez másképp az űrlapokon sem.
A gombokat általában hátra szokták tenni,hogy elküldje az űrlapot,vagy törölje a mezőket,azonban ezen két esetben a type-nak a reset vagy a submit értéket kell megadnunk.
Ezenkívül léteznek olyan űrlapelemek is,amelyek külön tag-et igényelnek,ilyen a <textarea> és a <select>.
A <textarea> a text-hez hasonóan szövegdoboz,csak több sorba lehet bele írni.A beleírható maximális karakterszámot a maxlength tulajdoság szabályozza.
A <select> egy lenyíló listát készít,amelyben az <option></option> tag segítségével adhatjuk meg az opciókat.
Az űrlapunk még így sincs kész,hiszen vannak pl. gombjaink,de azok csak gombok,ha megnyomjuk nem történik semmi.Ha egy sima gombot müködésre akarunk bírni akkorértéket kell adnunk az onclick tulajdonságát,amihez viszont Java Scriptet kell használnunk,de a Java Script bonyolult dolog,így ebben a cikkben nem foglalkozunk vele.
Ezenkívül müködésre bíratjuk a gombot a type tulajdonságán keresztül.Ha a reset értéket adjuk meg neki törölni fogja a mezők értékét.Ha submit-ot adunk neki elküldi az űrlapot a feldolgozónak.
Igen,nem véletlen a feldolgozó szó.Ez az,ami tulajdonképpen müködőképessé teszi az űrlapot.Feldolgozó nélkül az űrlap minössze egy dísz,egy üres test.Ha kezdeni is akarunk vele valamit egy másik nyelvre van szükségünk.Ilyenek a parancsnyelvek,mint pl. a Java Script vagy a PHP.Ezekről később fogunk tárgyalni.
A <form> parancsnak,ha fel is szereténk dolgozni az űrlapot a method-ot,azaz a feldolgozás módját is meg kell adnunk.Ez lehet GET vagy POST.Ha a GET-et használjuk,akkor a böngésző a címsorban fogja kinyerni az információkat,azaz amiket a címsorban láthatunk gyakran,hogy pl. a=2(elég gyatra példa),akkor tudhatjuk,hogy űrap van az oldalon és az GET-tel van feldolgozva.A másik lehetőség a POST.Ő a háttérben fogja elküldeni az adatokat,a felhasználó pedig nem láthat belőlük semmit,csakis az eredményt.Én inkább ezt ajánlanám,mert egyrészt biztonságosabb,másrészt,ha túlsok dolgot kell elküdeni az űrlapról,akkor a címsor túl hosszúra nyúlhat és ez egyes böngészőkben hibát eredményezhet.
Ezenkívül még megadhatjuk az action tuljadoságot is.Ennek az értéke egy elérési út,név szerint a feldolgozó elérési útja.
Még ami kimaradt,hogy az inputjainknak megadhatjuk a value-t,ami a gomboknál a feliratot adja meg.Más inputnál is használhatjuk,csak felesleges.
Aztán még az input-ok kaphatnak nevet is.Ezt a name tulajdonság értékével adhatjuk meg.Ez bármi lehet,ami nem számmal vagy írásjellel kezdődik.De,hogy legyenk kivételek,van egyetlen írásjel,amivel egy név kezdődhet,ez a _(alsószóköz vagy aláhúzás) jel.A nevekre akkor lesz szükség,mikor később meghívjuk majd az űrlapelemeket.
Igaz,hogy ezt csak később fogjuk alkalmazni,de akkor nagyon fontos lesz.Bár most még használni se tudjuk jó ha megtanuljuk,mert később már nem akarom ezzel húzni az időt és ez,amúgyis a HTML része.
A lecke méltó lezárásaként lássunk egy példát a tanultakra:
<form>
<input type="text" name="text1"><br>
<input type="password" value="password" name="password1"><br>
<input type="radio" name="radio1">Első választás<br>
<input type="radio" name="radio2">Második választás<br>
<input type="radio" name="radio3">Harmadik választás<br>
<input type="radio" name="radio4">Negyedik választás<br>
   <select>
<option>Első választás
   <option>Második választás
   <option>Harmadik választás
   <option>Negyedik választás
   <option>Ötödik választás
</select><br>
<input type="checkbox" name="checkbox1">Első választás<br>
<input type="checkbox" name="checkbox2">Második választás<br>
<input type="checkbox" name="checkbox3">Harmadik választás<br>
<input type="checkbox" name="checkbox4">Negydik választás<br>
<input type="checkbox" name="checkbox5">Ötödik választás<br>
<input type="checkbox" name="checkbox6">Hatodik választás<br>
</form>
Mint láthatjuk a form-nak nem adtunk meg method vagy action értéket,mivel az űrlapot nem akarjuk müködtetni,mert ez csak egy példa.

!Kiegészítés: Az űrlap elemeink-nek megadhatunk egyéb speciális beállításokat is,ilyen például a text-nek és a textarea-nak readonly,ami csak olvashatóvá teszi az elemet.Sajnos mivel ezeket hosszú ideig lehetne sorolni úgy döntöttünk,hogy inkább kiihagyjuk őket a cikkből.

!Kiegészítés: Ahogy egyre frissebb HTML verziók jönnek létre,egyre több típusú <input> elem jelenik meg.Mivel ezt a cikk-et nem szeretnénk annyira gyakran frissíteni,ezért csak néhány példát említenék,de a többi megtalálásában segít a Google.;)
Néhány példa: hidden,color,number.

10.lecke(egy HTML dokumentum felépítése)

Eddig megtanulhattuk hogyan készítsünk különféle HTML kódokat.Most megtanuljuk,hogy hogyan készítsünk ezekből egy egész dokumentumot(azaz weblapot).Először is bár HTML weboldalként mentjük el meg kell adnunk a <html> és </html> tageket.Az előbbit legelőre,az utóbbit leghátra.
Ezek után következik a <head> és </head> rész.Ebben adhatunk meg az oldalhoz szükséges adatokat,mint például a <title>,</title> elemek,amik az oldal nevét adják meg.(amit felül a böngésző kiír)Ha nem adunk meg neki semmit helyette vagy a böngésző neve vagy általában az oldal elérési útvonala fog megjelnni.(ez böngészőfüggő)A <head>-ben adjuk meg például még a bizonyos <meta>-kat,de ezekre egyenlőre nincs szükségünk.
A <head> után jöhet a <body> és</body>,amibe tulajdonképpen az oldalon megjelenítendő tartalom kerül,tehát azok a kódok,amikről eddig beszéltünk,mert ezeket a kódokat össze lehet vonni,azaz pl. egy <div>-et párosíthatunk egy <p>-vel.És így születik a HTML dokumentum.
Szándékosan hagytam a felépítést a vége környékére,mert azt szerettem volna,ha először azt beszéljük meg,amit "beleteszünk",mert különben ezt a leckét többen nem értenék.

11.lecke(munka HTML-ben más nyelvekkel)

A végére márcsak a további munka bevezetése marad,azaz megmutatom,hogy hogyan vonjuk össze HTML-t más nyelvekkel.Ezalatt azt értem,hogy például egy HTML dokumentumba kell tennünk egy CSS-t,azt hogyan tehetjük meg.
Mivel úgyis a CSS volt a példa kezdjük azzal.A CSS stílusleírónyelv,így a beágyazását a <style> tulajdonsággal fogjuk kezdeni.Ezután jön a type,ami megadja a típusát.Ez jelen esetben a CSS.
Ha befejezzük a CSS kódot le kell zárnunk a <style> tulajdonságot a </style> tulajdonsággal.
CSS-t írhatunk más tag-ekbe,például div-be is a style tulajdonság segítségével.
Ezután jöhetnek a script nyelvek,amiket a <script> elem segítségével tudunk HTMl-be tenni.Ezt a type vagy a language vagy mindkét elem követi.Általában a language-t alkalmazzuk.Ez adja meg a script nyelvét.Pl.:
<script language="JavaScript"></script>
De a language-el,pl. Java Scriptnél megadhatunk veriószámot is,de ez nem tanácsos,mert lehet,hogy az adott böngésző pont azt a verziót nem támogatja(bár ez nem valószínű,de előfordulhat).Aztán ugyanígy megadhatjuk a PHP-t is,de annak van ezenkívül még 3 fajta kezdési módszere és mi nem ezt,hanem a hagyományos <?php és?> módszert fogjuk alkalmazni.Ezenkívül még PHP-t <? elemmel indíthatunk és ?> elemmel zárhatunk le.Illetve van még a <% és a %> jelölés,de ezeket a PHP-nál úgyis megbeszéljük.
Ha még valamit itt megemlítenék az a frame,bár ez nem nyelv,csupán egy tartalomtípus.Ezt nem beleírjuk,hanem beleágyazzuk a kódba.Pontosan így néz ki:
<iframe width="500" height="500" scrolling=yes frameborder="0"
marginwidth="0" marginheight="0" noresize ></iframe>
Az elején megnyitjuk a frame-t az <iframe> paranccsal.Ezután megadjuk neki a szélességét és a magasságát.Ezt követően a scrolling-gal megjuk,hogy legyen-e csúszka a beágyazott tartalomnál.A csúszka után megadjuk neki,hogy ne legyen kerete és ne legyen margója(ezt két tulajdonságként).Végül azt mondjuk neki,hogy ne legyen méretezhető.Természetesen,ha pl. flash-t akarunk beszúrni nem teszünk hozzá csúszkát és a méretetét,illetve néha a keretét is beállítjuk,de ez csak egy példa.Frame-mel nemcsak valamilyen tartalmat,hanem akár egy egész weblapot is beágyazhatunk az oldalunkba.
De van még valami,ami az előző példából kimaradt.Hogy mi az?Ez az src="elérési/útvonal",ami megadja,hogy a böngésző hol keresse a tartalmat.
Nagyjából ennyit a "külső munkáról".
És ezzel egyenlőre be is fejeztük HTML tanulmányainkat.