Dokumentum struktúra és az alapelemek – 3. óra

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.

 

Figura nagyítoval
Kattints a figurára!

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.

 

érintések egy weboldalon
Érintéstérkép a heatmap oldalán

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>

H1-H6-ig tag

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.

html5 paragraph
Bekezdés a HTML-ben

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.

lista
HTML lista

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″>
Az attribútumok pedig:
  • 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ő.

Ez az oldal az Akismet szolgáltatást használja a spam csökkentésére. Ismerje meg a hozzászólás adatainak feldolgozását .

%d bloggers like this: