Ahogy az előző alapozásban mondtam, az első cikk a HTML-ről fog szólni. Ehhez elhagyjuk a Bloggert, de előbb még nézzünk körül a Sablon menüben, és menjünk a HTML-kód szerkesztése pontra. Megnyílik a HTML-szerkesztő, és mindenhol színes kódok sorakoznak. (Ez az említett szintaxis kiemelés. Na, ezt veszítjük el most egy időre.) Nem kell belenyúlni semmibe, csak nézzük. Szokjunk hozzá, hogy kis gyakorlással mi is ilyeneket fogunk készíteni. Érezzük át a feladat súlyát, görgessünk a kód végére, nézzük meg a sorszámot, majd egy hirtelen mozdulattal zárjuk be az oldalt.
Az Első lépések
Nyissunk meg egy Jegyzettömböt, és kezdjünk neki az első HTML-weboldalunknak. Először mentsük el a semmit, méghozzá UTF-8 karakterkódolással (ez fontos! nélküle az ékezetes karakterek helyett mindenféle rondaság jelenne meg). Tegyük a kedvenc mappánkba, vagy akár az Asztalra, szóval ahol tárolni szeretnénk. Én javaslok egy külön mappát a HTML-kódoknak, hogy egy helyen tartsuk őket. A fájl neve lehet akármi, az ékezetek, biztonsági okokból, kerülendőek. Tegyük fel, legyen a neve elsoweboldalam, a kiterjesztés pedig .html, vagy .htm (ez azokból az időkből származó maradvány, amikor a Windows nem kezelte a hárombetűsnél hosszabb kiterjesztéseket). Nem .txt, különben a böngésző nem fogja felismerni!
 |
| Fájl .html-ként mentése |
HTML-váz
Ha készen vagyunk, jöhet a lényeg. Minden HTML-oldalnak van egy váza, ami lényegében nem változik. Ez könnyen tesztelhető, megnyitjuk a böngészőt, felmegyünk egy tetszőleges weboldalra (tényleg bárhová, nem kell blognak lennie), és Ctrl + U betűkombinációval előhívható az oldal mögötti kód. Ez néha kifejezetten ronda (rondább, mint amilyen a Blogger HTML-je volt, egy ömlesztett katyvasz), máskor szép, sok sorközzel, de nem ez érdekel minket. A lényeg az első sor eleje. Nagy valószínűséggel találunk ott egy ilyet:
<!DOCTYPE html>
Ez lehet kisbetűs, lehet az első nagy, csupa nagy stb. A legelterjedtebb forma a fenti. Néha a záró kacsacsőr előtt van még más is, ezek régebbi HTML-szabványokra jellemző dolgok. Ha csak ennyi van, az a HTML5.1-et jelöli. Az eggyel régebbi (még mindig sok helyen használt változat) a HTML 4.01, illetve annak egy szigorúbb verziója az XHTML 1.0. Nekünk a legújabb szabvány tökéletesen megfelel, a Blogger is ebben íródott. Illetve... nem. Az a HTML5 egy szigorúbb, XML-alapú verzióját használja, az XHTML5.1-et. (Nem sok különbség van, használhatnánk bármelyiket.)
No, ez az első sor. Írjuk is be! A HTML az ilyen, úgynevezett „tag”-ekre (angol, ejtsd: teg) épül, vagyis kacsacsőrök közé zárt kulcsszavakra. Ezek fogják meghatározni az elemek elrendezését, tulajdonságait. Az első sor mindig ugyanaz: ez a „doctype deklaráció” (nem, erre nincs jobb magyarítás... a programozás nyelve az angol, sajnos), ami meghatározza a böngésző számára, hogy milyen HTML-szabványt használjon. Ennek segítségével írható ki a tartalma. Megkülönböztetett szerepe van.
A következő két sor az oldalt magát adja:
<html>
</html>
Mint látható, különböznek az előző sortól: párban állnak. A legtöbb HTML-tag páros, közrefogják a köztük található dolgokat. Az első a nyitó tag (nem „teg”, ez tényleg tag, magyarul), a második a záró. A záró tag megismétli a nyitót, csak egy perjellel az elején. Közéjük ékelődnek a továbbiak, így nyugodtan üthetünk pár Entert. Ha a záró html tag (igen, most „teg”; a magyar nyelv csodája) után következik valami, akkor gyanús, hogy a kódot elrontottuk. Az mindig az utolsó.
A két html tag közé most egy rakás más dolog jön: a head és a body (fej és test) deklarációk.
<head>
</head>
<body>
</body>
Írhatnánk persze mindet egy sorba is, a HTML-ben a „whitespace” karaktereknek (szóköz, sorköz, a szöveget tagoló, de nem látható jelek) nincs jelentősége. Annyi Entert ütünk, amennyi jól esik, hogy átlássuk a kódot.
A fej speciális funkcióval bír: itt kapnak helyet azok a kódrészek, amik nem jelennek meg a weboldalon, de szükségesek hozzá, például az oldal leírása (a keresőmotorok számára olvasható), az oldal címe (ami a felső csíkon látható), külső kódok importálása stb. Ne vacakoljunk sokat vele, határozzunk meg egy címet a weboldalunknak! Tehát a
head-ek közé tegyük be a következőket:
<title>Első oldalam</title>
Megint egy páros tag: a
title, mint a neve is mondja, a címet határozza meg. A HTML nem olyan nehéz, a legtöbb tag neve magáért beszél. Minden, ami a kettő között van, a címbe kerül. Ha ez a cím nem tetszik, írj mást! A HTML-hez tartozó kulcsszavak fixek, de a szöveg a tied.
A body fogja meghatározni mindazt, amit a weboldalon látunk. Legyen mondjuk egy cím és egy bekezdés. A címek a h1-6 tagekkel kerülnek meghatározásra, attól függően, mekkora címre van szükség. Cseles, mert minél kisebb a szám, annál elsődlegesebb a cím, tehát a legnagyobb cím a h1, a legkisebb pedig a h6. Mi legyünk nagyvonalúak: használjunk elsődleges címet!
<h1>Főcím</h1>
A bekezdés az angol paragraph szóból a
p kulcsszót használja.
<p>Ez az első weboldalam!</p>
Összefoglalva, eddig ezt írtuk be (sorközök és behúzások változhatnak):
<!DOCTYPE html>
<html>
<head>
<title>Első oldalam</title>
</head>
<body>
<h1>Főcím</h1>
<p>Ez az első weboldalam!</p>
</body>
</html>
Persze a szöveg nem feltétlenül egyezik, nem is kell neki. A tagek egyezzenek. Ha nagyjából így néz ki, nincs elütés, mentsük, és nyissuk meg a böngészőben. Több út van erre:
Ha mindent jól csináltunk, ez fog megjelenni a böngészőben:
Sikerült? Egy vállveregetést megérdemelsz! Azért ez nem kis teljesítmény, még ha nem is tűnik annak. Megtanultad az alapokat, innentől kezdve mindössze pár óra memóriagyakorlat, és akármilyen HTML-fájlt összeraksz. Nem viccelek, ennyi! Minden más csak a kulcsszavak variálása, attól függően, mire van szükségünk.
- a .html kiterjesztésű fájlokat a Windows az alapértelmezett böngészőben nyitja meg, tehát duplakattintás;
- a fájl nevére jobb katt, Megnyitás;
- megnyitjuk a böngészőt, új lap, az URL helyére bírjuk, hogy „file://”, majd a fájl teljes elérési útja.
 |
| Megnyitás |
 |
| A kész HTML-oldal |
Bekezdések és sortörések
Mivel már van egy kész drótvázunk, érdemes ezen belül dolgozni, vagyis az újabb és újabb sorokat a bekezdésünk után szúrjuk be. (Persze a
Visszatérve a mi tempónkhoz, készítsünk egy újabb sort a bekezdésünkhöz. Készíthetünk újabb bekezdést is, próbáljuk ki először ezt. Egyszerűen írjunk alá valamit szintén
body bezárása előtt.) Innentől kezdve kicsit repetitív és unalmas lehet a dolog, ezért gyorsan ajánlok két kiváló oldalt, ahol lehet gyakorolni és tanulni. Mindkettő angol. Az egyik a W3Schools, ami a W3 Konzorcium (a web hivatalos szabványának szervezete, lényegében ők felelősek a HTML-ért) oktató oldala. Sok példa, sok gyakorlófeladat vár arra, aki végigszalad a tutorialokon. Nem csak HTML van itt, minden, ami a webhez kellhet. A másik a Codecademy, ami inkább a feladatokra épít, kevesebb az elméleti anyag. Szintén nem csak HTML, érdemes ezeket a feladatokat is megcsinálni.
Visszatérve a mi tempónkhoz, készítsünk egy újabb sort a bekezdésünkhöz. Készíthetünk újabb bekezdést is, próbáljuk ki először ezt. Egyszerűen írjunk alá valamit szintén
p tagek közé zárva. Milyen lesz? Egy kis sorköz is megjelenik. Ha erre nincs szükségünk, hát írjuk egy bekezdésen belül!
És mindez hogy néz ki? A fene vinné! Hiszen ott az Enter! Ahogy mondtam korábban: a HTML nem veszi figyelembe a soremeléseket, látható, hogy még tageken belül sem. Soremelést egy speciális taggel tehetünk:
br a neve, a line break (sortörés) kifejezésből ered. Itt válik fontossá, hogy HTML5 vagy XHTML5 az, amit a Blogger használ! (Aki elment a W3Schools oldalára, most egy fontos részről marad le.) A br nem páros tag, nincs záró tagja, önmagában áll. A HTML5 szabványa szerint ilyenkor nem kell lezárni, simán <br>, és kész. Nem így az XHTML! Az XML alapok miatt az sokkal szigorúbb. (Hogy mi az az XML? Igazából mindegy, Extensible Markup Language, kiterjeszthető jelölőnyelv, mindenféle adatstruktúrák leírásához használatos. Ugyanígy amúgy a HTML meg a HyperText Markup Language, vagyis hipertext jelölőnyelv. Nem programozási nyelv, hanem csak jelölőnyelv, vagyis ez, amit most csinálunk, technikailag nem programozás.) Mindent le kell zárni, akár van záró tagja, akár nincs. Az önálló tageket így jelölik: <br />, és ugyanígy azoknál a további tageknél, ahol nincs záró pár. Vagyis a kódunk így módosul:
Na, így már jobb.
További elemek
Mik azok az alapvető struktúrák, amikre még szükségünk lehet? Linkek. Azok adják a hipertext lényegét. Képek, hiszen képekre mindig szükség van. Listák, táblázatok: a pontosabb adatmegjelenítésért. Nem vállalkozom arra, hogy minden felmerülő részletről írok, mert akkor a cikk sosem érne véget, így is bőven elég hosszú. Kihagyom a kevésbé használt módszereket (iframe, area map, idézetek), amit lehet, átrakok a CSS alá (stílusok mindenestül), épp csak megemlítem a HTML-entitásokat, nem beszélek az űrlapokról.
Linkek
A linkek ugyan páros tagek, de az első speciális. Különféle attribútumok csatlakoznak hozzá, ezek némelyike szükséges, mások opcionálisak. A legrövidebb forma a következő:
Ez a link nem csinál semmit. Hogy hová mutasson, azt a
href attribútum segítségével tudjuk megadni. Külső hivatkozásnál a teljes URL-t adjuk meg, belsőnél lehet egy csonkább verziót. Egy fontos attribútum, amit gyakran kell használni, ez a target, ami azt jelzi, hogy a linket hogyan nyissa meg a böngésző. Általában akkor van rá szükség, ha azt szeretnénk, hogy másik lapon jelenjen meg, ezt a következőképpen érhetjük el:
Ez a Google keresőt egy új lapon fogja megnyitni.
A linkeket könyvjelzőkként is lehet használni, erre jó a kettőskereszt. Abból következik, hogy minden HTML-tag felcímkézhető, méghozzá két módszerrel: class (osztály) és id (azonosító) attribútumokkal. Egy tagnek egy azonosítója lehet, de több osztályba is tartozhat. Egyik sem kötelező, eddig is elhagytuk. Ha megcímkézzük őket, később lehet rájuk hivatkozni, akár linkeken keresztül, akár, majd látni fogjuk, CSS-sel. Így készülnek a könyvjelzők: egy szekciónak adunk egy azonosítót, majd egy linkkel hivatkozunk erre. A kettőskereszt után jöhet az azonosítónév. (Osztályokra .osztálynév formában hivatkozunk, de ez a linkeknél nem használható.) Ettől lesz olyan „hiper” a hipertext. Remek módszer például tartalomjegyzék készítésénél.
Képek
A képekhez egyedülálló tag tartozik, tehát speciális zárásra van szüksége. A kulcsszava az
img, ami az image szóból jön. Szintén hivatkoznunk kell egy URL-re, amelyen a képünk található. Ez lehet külső, belső.
<img src="kép_url" alt="leírás"
width="szélesség"
height="magasság" />
Mindig adjuk meg a kép dimenzióit! Pixeleket szokás használni,
px rövidítéssel. Elhagyható, de akkor a kép az eredeti méretében fog megjelenni. Bloggernél egy felugró ablakban változtatható, illetve a blogmotor eleve kicsinyíti a képet, máshol viszont fontos, hogy mi formázzuk. A másik lényeges attribútum az alt, ami egy leírást csatol a képhez. Nem jelenik meg a képernyőn, viszont ezáltal kereshetőek lesznek a képeink (egy jó leírás sokat számít!), illetve a képernyőolvasó programok számára is értelmezhetővé válik (a vakok és gyengén látók számára). Az akadálymentesség a weben sem hanyagolható el.
Beágyazott elemek
Mi történik akkor, ha egy képet kattinthatóvá szeretnénk tenni? Nem zseniális, ha egy kritika elején a blogról készített képernyőkép egyben egy link is a szóban forgó bloghoz?
Képet és linket is tudunk készíteni, már csak egy trükk van hátra: az egymásba ágyazás. A cikk elején, mikor a HTML-oldal vázát néztük, láttunk, hogy pl. a
html tagek mindent körbevesznek, a többi elem köztük helyezkedik el. Ugyanezt a módszert kell alkalmaznunk minden beágyazott elemnél. Olyan, mint a hagyma: a külső „héjak” körbeveszik a belsőket, és beburkolják a saját tulajdonságaikkal. Így egy linkként funkcionáló kép egy linkbe ágyazott img tag. Akármilyen szintig elmehetünk, nincs határ, ami fölött már nem ágyazhatóak egymásba az elemek. Egyre figyeljünk: mindig a belső elemet kell előbb lezárni!
Egy apró Blogger-specifikus furcsaság adódik, ha a szövegszerkesztővel dolgozunk, és beszúrunk egy képet. Ez automatikusan átalakítódik egy linkké, ami a kép teljes méretéhez vezet, vagyis ha rákattintunk, csak a képnézegetőt láthatjuk. Ha kicseréljük a link célját a nekünk megfelelő címre, máris megváltozik a helyzet: a kép egy új oldalra vezet. Cserébe nem nézhetjük meg teljes állapotában, de ha egy blogról írt kritikáról van szó, általában erre nincs is szükség.
div és span elemek és megjegyzések
Néha általános szekciókra is szükségünk van, hogy különféle elemeket egy csoportba rendezhessünk. Erre szolgál a
div tag, amely önmagában nem látható. Bármit tartalmazhat, akár más div-eket is. Nézzük meg, hogy néz ki a gyakorlatban!
Látható, hogy a
div nem sokat tesz, csak összefogja a három paragrafust, hogy egy keretet rajzolhassunk köré (Ezekről majd a CSS alapozásban lesz szó.)
Na és mi az a furcsa az első sorban? Az egy HTML-megjegyzés, más néven komment. A megjegyzések, ahogy látszik is, nem jelennek meg a képernyőn, csak a kódban. Így a fejlesztő üzeneteket hagyhat akár önmagának, akár másoknak, akik az oldalon dolgoznak. Ezzel a módszerrel már megírt szakaszokat, sorokat lehet eltüntetni anélkül, hogy ténylegesen ki kéne törölni bármit is (hátha később még szükség lesz rá). Egy jól kommentezett kód nagy segítség a munka során. A jelzése <!-- a kommentezni kívánt sor elején, és --> a végén. A szóközök, mint mindig, itt is opcionálisak, érdemes tenni egyet-egyet a jobb olvashatóság kedvéért.
A másik „láthatatlan elem” a span tag, amely a div-vel ellentétben nem egy külön blokkot jelöl, hanem a szövegen belül egy szakaszt. Ha csak egy rövid résznek kell más formát adni, nagyon hasznos.
Listák
A listák rendkívül széles körű alkalmazással bírnak, a Bloggeren a menük nagyja listákból áll. (Ritkán, de megoldható mással is.) Ha valaha egyedi menüpontokat akarunk, kénytelenek leszünk listákat szerkeszteni, ehhez pedig tudnunk kell használni azokat. Két megjelenési formájuk van: számozott és számozatlan listák. Az angol rendezett (ordered list,
ol) és rendezetlen (unordered list, ul) listáknak hívja ezeket. Ez csak a fő megjelenést szabályozza, a listatagok beágyazott elemek (list item, li). Nézzünk kettőt!
Táblázatok
A táblázatok a weboldalak mumusai. Régen ('90-es évek derekáig) gyakorlatilag az egyetlen jól működő elrendezés-vezérlés elemei voltak, minden HTML-elemet táblázatokba ágyaztak be, hogy a megfelelő helyre pozicionálják. A világ azóta megváltozott, és ez egy régi, elavult technikának számít manapság. (Ha egyszer egy táblázat-alapú sablont látsz, gondold meg, hogy attól a designertől akarsz-e rendelni.) Ellenben még mindig vannak táblázatos adataink, amiket, bármily meglepő, táblázatban szeretnénk megjeleníteni. Több tagre van szükségünk: a
table az egész táblázatot jelöli, a th a table heading, azaz a fejléc, a tr a table row, vagyis az egyes sorok és végül a cellák a td a table data (táblázatos adat) szóból. Az egész végül a teljes táblázatban az egyes sorokba beágyazott cellák összessége lesz. Egy példa:
HTML-entitások
Most már tényleg ez a vége. Így, a hatodik oldal felé már bőven elég. (És még nem is beszéltünk mindenről!) A HTML-entitások fontos részét képezik a legtöbb leírásnak, amiben kódokról esik szó. Hiszen mi történik, ha egy leírást akarunk adni a HTML-nyelvről, mint ez itt? Vegyünk például egy paragrafus tagekről szóló paragrafust! Hogy írnánk le? Természetesen beágyazzuk!
Nos... nem az igazi, fogalmazzunk úgy. Mivel a kúpos zárójelek a tagek részei, és, mint volt róla szó, akármit be lehet ágyazni egy másik elem alá, a böngésző nem fogja tudni, hogy mi ott valami másra gondoltunk, mint két paragrafusra. Ugyanígy, ha csak egy nyitó taget akarsz megjeleníteni, a Blogger még hibát is jelez, mivel nem lezárt elemként értelmezi. Erre a problémára találták ki a HTML-entitásokat, amelyek lényegében a létező karakterek „HTML-esített” változatai. A legtöbb karakter megjelenítésével nincs sok gond, legtöbbször a két kúpos zárójelre, esetleg az és-jelre (ampersand, &) lehet szükségünk, illetve, ha mindenképpen tabulátor kell a szóközök helyett, néhány nem törhető szóközre. Utóbbiak megmaradnak mindig és minden körülmények között, nem úgy, mint a szóközök (amik halmozás esetén egyre redukálódnak).
A fontos kódok tehát:
(Látjátok, hogy ampersanddal kezdődnek? Na, emiatt kell az ampersand kódja is, nehogy az entitástól szóló leírás átváltozzon az entitássá.)
Ha nagyon csinosak akarunk lenni, és nagyobb kódblokkot szeretnénk megjeleníteni, úgy, hogy a formázások, behúzások megmaradjanak, használjuk a
pre elemet.
Összefoglalás
Ebben a cikkben röviden végignéztük a HTML legfontosabb elemeit. Nagyon sok kimaradt, majd a tutorialokban szó lesz ezekről is. Ha a formázás érdekel lépj tovább a CSS alapok felé!
Megjegyzések
Megjegyzés küldése