A Wezzpage honlapszerkesztője minden lehetőséget megad, hogy egyszerűen és gyorsan a magad képére alakítsd a honlapod, és ne kelljen a programozók felségterületének tartott „kóddal” foglalkoznod. Most ördögűzést tartunk, és megmutatjuk, a HTML egyáltalán nem az ördögtől való. Tarts velünk, és nézd meg, ahogy a kód misztikus szörny-árnyéka kisnyúllá szelídül!
Először is eloszlatunk egy tévhitet: nem kell programozónak lenned, hogy legyenek a honlapkészítéssel kapcsolatos ismereteid. A HTML alapjait anélkül is megtanulhatod, hogy informatikus lennél.
És mikor lesz hasznodra ez a tudás? Például amikor a szerkesztőfelület nem akarja elhelyezni a linket, vagy például ha Youtube-videót szeretnél beágyazni valahová. A Wezzpage-nél ezek a hibák elkerülnek téged – de ha volt már dolgod másmilyen weboldalszerkesztővel (pl. WordPress, Joomla vagy más), akkor találkozhattál már olyan esettel, amikor a szerkesztő a világ minden kincséért sem akart rád hallgatni. És abban a pillanatban lehet, bármit megadtál volna, hogy értsd a misztikus fórráskód titkait.
A HTML alfája és omegája – az elem (avagy címke) és az attribútum
A Wezzpage-nél úgy tekintünk a honlapfejlesztésre, mint a felnőttlegó egyik legjobb és legkreatívabb változatára. Csakhogy itt kettes, négyes, téglalap és lapos darabok helyett elemekből (más néven címkékből) és attribútomokból építkezünk. Az előnye a Legóhoz képest: több eséllyel hoz neked pénzt, mint a kalózkirály legohajója. És ami ennél is jobb: ha szanaszét hagyod az elemeket, rálépve nem fogod a pokolra kívánni a weboldalad...
A HTML tehát alapvetően elemekből és attribútumokból épül fel.
Az elemek felcímkézik a szöveg egyes részeit, az attribútomok pedig megadják ezen címkék tulajdonságait. Például jelzik, hogy adott szöveg egy címsor.
Lássuk végre az ördögűzést
Az egyes példák bemutatására a CodePen nevű eszközt használjuk. Az alább látható ábrán interaktívan változtathatod, hogy a kódot szeretnéd látni vagy annak az eredményét, hogy hogyan fog kinézni. Ha a jobb felső sarokban lévő logóra kattintasz, a CodePen saját felületén is megnézheted a megírt kódot, sőt, akár szerkesztheted, próbálgathatod is!
Az elemek esetében van egy kezdő címke és egy záró címke, míg a szöveg a címkék közé kerül. Ez így néz ki.
Amint látod, a címkéket “kacsacsőrök” közé kell tenni, és a záró címke esetében egy perjel is bekerül. Egyéb esetben nem történik meg a címke lezárása, és a további szöveg is például félkövér lesz! (Pro tipp: a kacsacsőrök jellemzően az alt gr+í illetve az alt gr+y billentyűkombinációval csalogathatók elő.)
Címkékkel tudsz például új bekezdést létrehozni
Az attribútumokkal a címkék viselkedését határozhatod meg. Például, ha egy szövegrészt felcímkéztél, hogy az egy bekezdés, felruházhatod azzal a tulajdonsággal, hogy balra, középre vagy jobbra zárt legyen (ez az attribútum). Amit az attribútomokról tudni érdemes:
egy címkéhez több attribútum is tartozhat.
az attribútumok csak a kezdő címkében jelennek meg
kötelező elemei az egyenlőségjel és az idézőjel, ezek nélkül nem fognak működni
Apró betűs rész a nagyon kíváncsiaknak: ez az elméleti forma: <címke attribútum1=”érték1″>Szöveg.</címke>
Az attribútomok használata:
Így készítesz félkövér és dőlt szöveget
Dőlt és félkövér szedésre viszonylag gyakran van szükség, így érdemes megjegyezni azt a két HTML-címkét, amelyekkel elő lehet csalogatni ezt a formázást (már ha a CTRL+I, illetve a CTRL+B) nem működik.
A kettőt használhatod egyszerre is, egy bekezdésen belül, de akár mondatonként váltogatva és még számtalan kombinációban. A formázni kívánt szöveget a kezdő és záró címke közé írd be!
Hozz létre hivatkozást
Ez az a pont, amikor a misztikus szörnynek látszó árny kisnyúllá szelídül, és te előrántod a kalapból – mindenki megrökönyödésére.
Ha például szeretnéd megoldani, hogy az olvasóid megnézzék az előző, igen izgalmas és hasznos cikkedet, de valamiért nem akar működni a link elhelyezése funkció, néhány perc alatt áthidalhatod a problémát az anchor/horgony <a></a> címke használatával, amely segíti az egyes oldalak közötti hiperlinkelés megvalósítását.
A nyitó és a záró címke között szerepel az a szöveg, amely a weboldaladon megjelenik, míg a href attribútumnál adod meg azt a címet, ahová az olvasód a hivatkozással ugorhat.
Amit még tudni érdemes:
érdemes foglalkoznod a title attribútummal, amely az a szöveg lesz, amelyet a felhasználó akkor lát, amikor az egeret a hivatkozás fölé viszi. Ez az ún. tooltip. (Próbáld ki a lenti, beágyazott linknél!)
a target attribútummal azt is magad alakíthatod, hogy az olvasó új ablakban nyissa meg a hivatkozást. Erre érdemes figyelni, hiszen ha egy külső oldalra hivatkozol, de ez a hivatkozás ugyanabban az ablakban nyílik meg, mint amelyben az olvasód addig is böngészett, akkor, ha vissza akar térni a honlapodra, pluszmunkát kell végeznie (a vissza gomb használatával, esetleg a honlapod címének újbóli begépelésével). És jegyezd meg: a felhasználók nem szeretnek pluszmunkát végezni. Akkor inkább nem térnek vissza a honlapodra…
Ezek azok az alapbető HTML-tippek és megoldások, melyek ismeretével csak nyerhetsz. Egyiket sem nehéz megjegyezni, de egy-egy alkalommal sok bosszúságtól kímélheted meg magad a használatukkal.
Ha pedig olyasmivel találkoznál, ami itt nem szerepel, de szívesen olvasnál róla, szükséged lenne pár tippre, vagy az egészhez hozzá szeretnél szólni, akkor írj kommentet ide alább, szívesen válaszolunk és segítünk.
