Ahogy a nyomtatott dokumentumokban kialakítunk egy struktúrát, ugyanígy szükség van valamilyen rendezettség kialakítására a HTML dokumentumokban is. Egy nyomtatott dokumentummal szemben egy weboldalnak nem csak az olvashatóság miatt kell bizonyos formai követelményeknek megfelelni. Bár kétség kívül a legfontosabb a tartalom emberi fogyasztásra való alkalmassá tétele.
A XXI. század modern eszközei olykor még a „mesterséges intelligencia” felhasználásával is fürkészik minden egyes másodpercben viselkedésünket, és az általunk fogyasztott tartalmakat. Talán mindenki hallotta már a keresőrobot kifejezést, de ha nem, az biztos hogy senkinek sem kell bemutatni a Google-t az egyik legismertebb internetes keresőprogramot. Nem a Google az egyetlen keresőprogram az interneten, ott van még mellette a Bing, a Yahoo és a Yandex, hogy csak az ismertebbeket említsük, vagy ott a különc DuckDuckGo is.
Keresőrobotok a XXI. században
Mit várunk mi a keresőrobotoktól, és hogy lehetséges ez?
Nekem kicsi koromban mindig azt mondta az édesanyám, hogy az a jó számítógép, amelyik minden kérdésre tudja a választ. Ha csak ennyi lenne az elvárásunk a modern keresőprogramokkal, és az internet segítségével már nagyon sok „jó számítógépet” el lehetne adni a boltokban.
Amikor elromlott a közel húsz éves autóm rákerestem a hibákra az interneten és azt vártam a Google majd megmondja mit kell csinálnom. Majd amikor egy pár hét múlva még valami elromlott, már a gondolataimat is kitalálta és néhány szó begépelése után kiegészítette velük a keresőkifejezést…
– Hogy lehetséges ez?
Azt, aki valami titkos összeesküvést sejt a jelenség hátterében, ki kell ábrándítanom nem történt csoda, és nem az UFO-nauták ültettek telepatikus képességekkel rendelkező halacskát a fülünkbe, hogy lehallgassák a gondolatainkat. Egyszerűen az adatok világméretű feldolgozásának eredményét, strukturált értelmezését látjuk viszont egy weboldalon megjelenítve a mi igényeinkre szabva.
Strukturált tartalom és egy kis SEO
Azt a munkát, amit azért végzünk, hogy egy webhely minél jobb pozíciót foglaljon el a keresőmotorok találatai között keresőoptimalizálásnak, vagy idegen szóval SEO-nak (Search Engine Optimization) hívjuk. Ezen belül is megkülönböztetünk on-site és off-site SEO-t. Ennek a cikksorozatnak nem célja hogy a SEO eszközeit tárgyalja, de időnkét említést teszünk majd egy-egy eleméről, ha az szorosan kapcsolódik a tanult anyaghoz. Ám fontos tudni hogy a technika villámgyors fejlődésével a keresőoptimalizálás külön szakmává vált a weboldalkészítésen belül. Egy modern mobiltelefonra optimalizált weboldalnál még az is szempont, hogy a felhasználó hol érinti meg a képernyőt, miközben az általunk gyártott tartalmat fogyasztja. A jövőben valószínűleg a tartalom által kiváltott érzelmi reakció is egy szempont lesz (pl. iphone 3d face recognition) a keresők által készített rangsorban ugyanazon keresőkifejezésre.
A címek hierarchiája
Ahhoz hogy a keresőmotorok is tudják mit tartalmaz az oldalunk, mik a kulcsfontosságú információk, illetve az olvasók is könnyen áttekinthessék a szöveget, elengedhetetlen valamiféle ügyesen megtervezett hierarchia kialakítása. Szerencsére a HTML mindkettőre szinte egyetlen lépésben ad lehetőséget. Az egyik ilyen elem a Címsor.
A HTML5 dokumentum alapvető felépítéséről az előző óra anyagában már volt szó, de ott még csak egyetlen címsort használtunk. Ahogy a szövegszerkesztőben úgy a HTML dokumentumokban is lehetőségünk van címek és alcímek segítségével hierarchia kialakítására az oldalon. A szabvány szerint a HTML hat különböző cím jelölésére ad lehetőséget, ezeket az elemeket szokás szerint nyitó és záró tag-ekkel jelöljük.
<h1>Legnagyobb és legfontosabb cím</h1>
<h2>nagyobb és fontosabb</h2>
<h3>nagy és fontos</h3>
<h4>kicsi és kevésbé fontos</h4>
<h5>még kisebb és kevésbé fontosabb</h5>
<h6>legkisebb és legkevésbé fontosabb címsor</h6>
Ennek ellenére nagyon ritka az, hogy mind a hat tag-et felhasználjuk egy weboldalon. A Dongó PC webhelyén legtöbbször a h1 és h2 címsorokat használjuk, néha h3 is előfordul, de ennél kisebb kiemelésre még nem volt szükség. A címsorok a keresőmotorok számára is fontos információt hordoznak az oldal tartalmáról.
Bekezdések a weblapon
Miután kigondoltuk a figyelemfelhívó címsorokat, ki is kell fejtenünk azokat. A könyebb olvashatóság érdekében gondolatainkat érdemes bekezdésekre tagoltan megjeleníteni. Erre az angol paragraph (bekezdés, cikkecske) szó rövidítéséből a <p> tag szolgál. A bekezdéseket nyitó és zárótagok közé kell helyeznünk valahogy így:
<p>Ide kerül az új bekezdés szövege…</p>
Megfigyelhetjük, hogy egy HTML dokumentumban az internetböngésző csak azokat a formázásokat hajtja végre, amire mi utasítást adunk. A sortörést automatikusan elvégzi a képernyő széléhez érve, hacsak valami más parancsot nem adtunk. Ha mi magunk szeretnénk sortörést beszúrni, akkor erre egy üres elem a <br> szolgál. Az üres elemeket HTML5 szabványban nem szükséges bezárni, ha valamiért mégis szükségünk lenne rá (XML kompatibilis dokumentum), rögtön a nyitó tag-ben kell megtennünk: <br />.
A HTML dokumentumok nem szabványos A4 papírméretre készülnek, hanem a különböző méretű és felbontású monitorok képernyőjére. Ráadásul a mobilinternet elterjedésével nem csak számítógép monitorára, hanem az okostelefon apró kijelzősére is gondolnunk kell. Erről még sokat fogunk beszélni a CSS résznél a HTML alapok után.
Lista és a felsorolás
A háziasszonyok biztosan néztek már receptet az interneten. A hozzávalókat nem biztos hogy könnyű lenne megtalálni egy bekezdésen belül folyó szövegben. Szerencsére erre is van megoldása a HTML két fajta lista megjelenítésére is lehetőséget ad, az egyik a rendezetlen (unordered), a másik pedig a számozott rendezett (ordered) lista. A listák készítése eltér az eddigi gyakorlattól, mert nem csak a lista kezdetét és végét kell jelölnünk tag-ekkel, hanem a listán belüli listaelemek kezdetét és végét. Ezek a tag-ek szintén az angol szavak rövidítéséből származnak. Rendezett listát jelölő tag: <ol>, a rendezetlen listáé <ul>, a listaelemeket pedig <li> tag-gel kezdjük. A HTML elemek egymásba ágyazhatók, de mindig figyelni kell arra hogy a belső elemet még a külső elem lezárása előtt zárjuk.
Hivatkozások és attribútumok
A weboldalakon a navigáció megkönnyítése érdekében linkeket (hivatkozások) helyezhetünk el. Alapvetően megkülönböztethetünk külső és belső linkeket az alapján hogy az a mi webhelyünkre, vagy egy másik külső helyre mutat. A link jelölésére a HTML-ben az <a> tag szolgál. A link célját a href attribútum határozza meg, értéke pedig a hivatkozás címe lesz, ahova a link mutat, kattintáskor ide viszi az olvasót. az attribútumot a nyitó tag-en belül kell elhelyezni, plusz információval egészíti ki a különböző elemeket. Az értéket idézőjelek között kell megadni. A HTML5 nem kis-nagybetű érzékeny, de ajánlott minden a tag-eket kisbetűvel írni. Az alábbi példa egy olyan linket tartalmaz ami külső hivatkozásként a zagyva szövegek oldalára visz.
<a href=”https://hu.lipsum.com/”>Lorem ipsum</a>
Természetesen a böngésző csak a Lorem ipsum feliratot jeleníti meg, a tag-eket nem. A hivatkozások mutathatnak ugyanabban a mappában egy másik HTML dokumentumra is, vagy egy másik mappában lévő fájlra is, de akkor az elérési utat is meg kell adnunk.
<a href=”/pictures/pictures.html„>Képek</a>
Ezzel viszont legyünk óvatosak, mert bár a Windows nem tesz különbséget a kis- és nagybetűk között, más operációs rendszereknél /pictures/pictures.html és a /pictures/Pictures.html két különböző fájlt jelent. Nem biztos hogy beállították ennek a kiküszöbölését a webszerveren.
Még egy gondolat: ha elvittük a látogatót egy oldalra a webhelyünkön belül érdemes abban is segíteni, hogy visszataláljon. Erre is készítsünk neki egy linket. Legyen a példa kedvéért a kezdőoldalunk neve index.html (szabványos kezdőoldal), ahol egy listában soroljuk fel a receptekre mutató linkeket. Amikor az olvasó egy ilyen hivatkozást követve elolvasta a pörkölt receptet gondoskodnunk kell arról, hogy visszajusson a receptlistát tartalmazó oldalunkra, ha meggondolta volna magát és valami mást főzne.
<a href=”/index.html”>Vissza a főoldalra</a>
Képek a weblapon
A fenti példákat követve tegyük fel, hogy szeretnénk egy szakácskönyvet készíteni. Tudjuk már hogy adhatunk címet neki, azt is tudjuk hogyan adhatjuk meg a különböző ételek alcímeit, és a hozzávalókat szépen listában felsorolva. De szeretnénk az elkészült ételekről fotókat is közzé tenni a honlapon.
A képek dokumentumba ágyazására az <img> tag szolgál. A képeknek több attribútuma is van ezeket illik mind megadni.
<img src=”dongo.jpg” alt=”rovar” width=”100″ height=”150″>
- src – a kép forrása, ha ugyanabban a mappában van mint az oldal akkor elég csak a kép neve, egyébként viszont az elérési út is kell,
- alt – egy alternatív szöveg, ha a kép nem jelenik meg valamilyen oknál fogva (letiltották a képeket, vagy át lett helyezve máshova), vagy ha a látogató felolvasó programot használ,
- width – a kép szélességét határozza meg képpontban,
- height – a kép magassága szintén képpontban.
Ennyi fért bele a mai leckébe, az oldal alján pedig a gyakorlatról készült videót láthatjátok. Érintőlegesen végigmentünk néhány alapelemen, a későbbiekben még részleteiben is beszélni fogunk a paraméterekről. Tanulni csak úgy lehet, ha eleget gyakorolunk. A <!DOCTYPE html> nevű Facebook-csoportban várunk benneteket a feladatokkal, és ha elakadnátok, vagy valami nem működne nálatok, ott a kérdéseiteket is feltehetitek.
A videóban, és gyakorlaton mi a Notepad++ programot használtuk, amely ingyenes és a linkre kattintva letölthető.