Ez a cikk egy cikksorozat bevezető része. Ha nem érdekel a felvezető szöveg, akkor katt ide, hogy azonnal a HTML részhez kerülj. Ha a cikksorozat összes eddigi cikkére vagy kíváncsi, akkor nézd meg „A honlap mögött” címkéhez tartozó cikkeket.
„Mamaaaa, én nem akartam programozó is lenniiii!” (ismeretlen vállalkozó)
Eltökélted, hogy lesz honlapod. Valamilyen módon eljutottál a WordPress-hez, és tökre örültél, hogy jeee, ezt mindenki tudja használni, még te is. Aztán jöttek az első szemráncolások: „Telepítésnél MySQL-izéket kér?! Mivaaaan?!”
De végül sikerült, és úgyis csak egyszer kell átesni ezen az elején, utána ezek már nem fognak kelleni.
És akkor meg akarsz valamit csinálni, és egy cikkben azt olvasod, hogy a sablon egyik php file-jába nyúlj bele, és valami HTML kódot illessz be vagy írj át. Kezd nagyon eleged lenni, de hát már van blogod, honlapod, ki tudod írni magadból, amit adni akarsz az emberiségnek. Így fogcsikorgatva, de megoldod. Esetleg egy ismerősöd csinálja meg, vagy egy programozó.
Ismerős? Te is olyan vagy, akinek már attól is borsódzik a háta, ha csak szóba kerülnek a honlap mögötti dolgok? Tudod, minél jobban megismersz valamit, az annál kevésbé lesz rejtélyes és hátborzongató. Itt az ideje, hogy megtudd, mi is van a WP-d mögött!
Pár mondat, ami most talán még kínai, de pár cikk múlva már érteni fogod
WP honlapod működése egyszerűsítve: A szerveren PHP fut, és MySQL-ben van az adatbázis. Amikor megnézel egy honlapot, akkor a lekérésed alapján lefut a PHP, kinyeri az adatot az adatbázisból, és ezek alapján egy HTML kódot generál. A böngésző ezt a HTML kódot kapja meg, ami a CSS-sel és a JavaScripttel válik teljessé.
Vegyük végig az összes fura programozóknak való szót, és nézzük meg, hogy hogyan kapcsolódnak egymáshoz. Az első cikkben a HTML-ről beszélünk.
HTML
A HTML kódban van a honlapoknak a tartalmi része. Ha egy cikket olvasol, akkor a szöveg a HTML kódban van. A képek a HTML kód segítségével jelennek meg. Vessünk egy pillantást a következő pár sorra, és utána megnézzük a jellegzetességeket.
<div id="fce01" class="friendly code example">
<ul class="common-list">
<li>Ez egy példa szöveg, csak Neked.</li>
<li>Hogy lásd, a HTML jó lehet.</li>
<li>És barátként sokra képes Veled.</li>
</ul>
</div>
Kacsacsőrök tömkelege
Az egyik első dolog, amit észlelhetsz, hogy ennyi kacsacsőrt általános iskola alsóban nem láttál összesen. A második, hogy azért van benne „emberi beszéd” is – az, amit majd végül ténylegesen látsz a honlapon. A HTML kód alapvető eleme az úgynevezett „html tag” (kiejtve „html teg„). Maga az egész html kód is egy <html> és </html> között van. Gondolom észrevetted, hogy e kettő tag között csak egy karakter különbség van: egy perjel.
Alapvetően kettő féle html tag van: nyitó tag, és lezáró tag. Nemes egyszerűséggel onnan tudod, hogy melyik melyik, hogy a lezáró tag-ben a kezdő kacsacsőr után azonnal egy perjel következik. Ha ilyet látsz, akkor biztosra veheted, hogy a html kódban valahol előrébb lesz egy ahhoz tartozó nyitó tag is. A fenti példában láthatod, hogy az első sorban egy div tag kezdődik, és a példa legvégén egy </div> van, ami azt zárja le.
De a nyitó tag-ben volt még id=”fce01″ meg ilyesmik… azok mik?
Jó meglátás. A html tag-eknek lehetnek úgynevezett attribútumai. Ezekben lehet megadni az adott tag-hez tartozó egyéb információkat. Például ha egy képet illesztesz be, akkor az src attribútummal adod meg, hogy hol található a kép file. Manapság a leggyakoribb az id és a class attribútum, mert ezeknek a segítségével lehet a legalkalmasabban CSS-t írni a HTML kódhoz. (A CSS-ről egyelőre csak annyit röviden, hogy az tudja megmondani, hogy hogyan is nézzen ki egy adott HTML elem, pl. legyen piros kerete, és sárga háttere, mindezen kék betűk.)
Az attribútumok mindig a nyitó HTML tag-ben vannak, attól (és egymástól) szóközzel elválasztva. Először mindig magát az attribútumot írod le, majd egy egyenlőségjel után meg tudod adni az értékét. Az értéket idézőjelek közé szokás tenni. Egy html tag-nek több attribútuma is lehet, ne lepődj meg, ha pl. ilyesmit látsz valahol:
<img src="images/coolpic.png" id="smiley-man" class="general-pic nosub fancy-border" alt="egy smiley emberke, ahogy mosolyog" title="Szép napot!" width="300" height="200" >
Ez csak egy példa volt, nem elemezzük ki, hogy mi mit jelent benne. Ha érdekel, majd utánanézel később. A lényeg az, hogy sok attribútuma is lehet egy-egy tag-nek, de az is lehet, hogy egy sincs. Akármennyi is van, ne ijedj meg tőlük, mindegyiknek van valami funkciója. A magyar nyelv is nagyon-nagyon sok szóból áll, mégsem ijedsz meg, ha meglátsz egy összetett mondatot 🙂
A honlap felépítése HTML szemszögből
Minden honlapnak van egy meghatározott HTML felépítése. Mint már említettük, az egész honlapod egy <html> tag-ben van benne. Ezen belül kettő nagy egység van: a <head> és a <body>.
<head>
A head más néven a honlap „fejléce”. Ez alatt azt értjük, hogy olyan információk vannak benne, amik az oldalhoz tartoznak, de a képernyődön nem feltétlenül jelennek meg. Itt vannak azok az információk, amiket a keresők kiírnak a honlapodról a találati oldalon, itt vannak betöltve egyes külső file-ok (pl. css), és számos egyéb dolog lehet itt.
<body>
A body a honlap „teste”, vagyis a tartalmi része, ami a képernyőn is megjelenik. Itt láthatod a html tag-ek tömkelegét, ahogy egymásba ágyazva tornyosulnak előtted.
További tag-ek
Nem fogom részletezni a html tag-eket, és hogy melyik pontosan mire jó. Jelenleg nem az a célom, hogy HTML szakértő legyél, hanem csak annyi, hogy képbe kerülj, és ne félj tőle. Ha érdekel, akkor utána már könnyen utána tudsz nézni, hogy mik is vannak, kicsit lejjebb ajánlok is oldalt, hogy hol érdemes elkezdeni a tanulást.
HTML szerkesztése
A HTML kódot szerkesztheted akár egy egyszerű szövegszerkesztőben (pl. Jegyzettömb) is, de ajánlom, hogy inkább olyan szerkesztőt használj, ami képes felismerni a programnyelveket, és színekkel jelölni, hogy mi micsoda. Én például a Komodo Edit-et használom. Az ingyenes verziója nekem elég, ezzel is lehet szerkeszteni file-okat.
Fontos megjegyzés: Az ilyen editorokat főleg mankónak ajánlom. Esélyes, hogy Te nem fogsz nulláról készíteni honlapot. Viszont az lehet, hogy egy-egy cikkedbe bele kell nyúlnod a WordPress adminján, a HTML szerkesztőben. Ilyenkor néha kényelmesebb kimásolni az adminból a dolgokat egy szerkesztőbe, ott elkészíteni a változásokat, és visszamásolni az adminba. Így kisebb eséllyel lesz benne olyan elírás/hiba, amit utána akár órákon át keresnél, hogy miért is nem úgy jelenik meg, ahogy te akartad.
Ha szeretnéd jobban megismerni a HTML alapjait
- …és tudsz angolul: http://www.w3schools.com/
- …és nem tudsz angolul: egy magyarra fordított cikk a HTML alapjairól
Az első link egy tutorial oldalra vezet, ahol nem csak a HTML, de a honlapod mögötti több programnyelv (pl. CSS) alapjait is megtanulhatod. Az egyik legjobb oktatóanyag az alapokhoz, és ki is próbálhatod, amiket megtanultál.
Ha jobban meg akarod ismerni a honlapod mögötti dolgokat, akkor rövid időn belül rájössz, hogy a legtöbb információ angol nyelven található meg. Őszintén megmondom, hogy én nem is szoktam magyarul rákeresni ilyenekre, tehát nem tudom, hogy így milyen leírásokat lehet találni. (Ha Te tudsz ilyet, akkor írd meg kommentbe a cikk alá!)
Összefoglalás
- Ha WordPress honlapod van, előbb-utóbb lehet, hogy tágítanod kell a kényelmi zónádat pár programozási dolog megismerésével.
- Nyugi, ezek nem vészesek! Ha nyitottan állsz hozzá, már fél óra ismerkedés után nem fogsz félni tőlük. (de az alapos megismerés időt vesz igénybe)
- A HTML kódban van a megjelenített honlapod tartalmi része, a kinézetért alapvetően nem ő a felelős.
- A HTML kód úgynevezett html tag-ekből áll, ezek fogják közre a tartalmat. A tag-eknek lehetnek attribútumai, amik további információkkal szolgálnak az adott tag-ről.
- Ha jobban érdekel, keress rá bátran akármire, ami érdekel. Angol nyelven több infó van, de azért magyarul is találhatsz leírásokat.
