"A hópehely a természet egyik legtörékenyebb dolga, de nézd meg mit történik, ha sokat egybe gyúrsz belőle." - / Vista M. Kelly /

"A siker egyszerűen csak szerencse kérdése. Kérdezz meg egy sikertelent!" - / Earl Wilson /

A weboldal és ami mögötte van

2021.08.25.

Ha a barna színnel szedett szövegek fölé viszi az egér mutatóját, (nem kell kattintatni) akkor ott néhány szavas segítséget kaphat az adott kifejezést illetően.

Frei Tamás is megirigyelhetné cikkünk címét. Ebben az írásban rövid áttekintést szeretnénk nyújtani azok számára, akik szeretnének kicsit mögé látni egy színpompás, izgő-mozgó weboldal felületének. Ha megnéz egy weboldalt (pld.: szimbol.hu), akkor amit ön a böngészőjében lát (bal oldalon), az valójában így néz ki a szerveren (jobb oldal):

Ha nyom egy jobb gombot a weboldal egy semleges területén, és kiválasztja az forrás megtekintése* opciót, akkor megnézheti az adott oldalt, hogyan látja egy böngésző vagy egy kereső(!).

*Különböző böngészőkben, különböző néven érhető el a jobb gomb lenyomása után a HTML forráskód:

Google Chrome: „Oldal forrásának megtekintése”

Internet Explorer: „Forrás megtekintése”

Mozilla Firefox: „Oldal forrása”

Opera: „Forráskód”

A weblap felépítését és tartalmát leíró nyelv (HTML) kódját látjuk. Nem kell megijedni, a sok zagyvaságtól. Ugyan úgy kell elképzelni, mint egy Word dokumentumot (.doc), vagy text állományt (.txt). A weblap nyitóoldaláért felelős fájl formailag jellemzően így néz ki: index.html vagy index.htm.

(Speciális esetekre most nem térünk ki – pld. dinamikus tartalmak).

A legtöbb kódrész arra hivatott szolgálni, hogy minden elem (képek, szövegek, linkek) a megfelelő helyre kerüljön és úgy nézzen ki, ahogy azt a készítője eltervezte. Illetve nagyon fontos információkat nyújtanak a keresők számára az oldal tartalmát illetően. Ez utóbbiról egy másik cikkben bővebben is írunk.

A HTML alapjai

Elöljáróban tisztázzunk egy fogalmat: tag (ejtsd: teg).

A tag-ek mindig párban járnak, mint a lányok wc-re. Mindig azt a tartalmat fogják közre amelyikre vonatkoznak:

<zöld>zöld lettem</zöld>de én már nem vagyok zöld <zöld>jajj már megint zöld lettem</zöld> de már elmúlt…

Sajnos ilyen HTML tag azonban nem létezik (zöld), viszont nagyon jól demonstrálja, hogy mikor és hogyan kezdődik illetve végződik egy tulajdonság.

Valójában így néz ki HTML-ben egy szín meghatározása:

<font color=”green”>zöld lettem</font>

font: vagyis angolul betű (fogjuk rá)

color: szín

green: zöld

Legyen most ennyi elég kóstolónak. (Nem akarom a lelkes olvasót elkedvetleníteni azzal, hogy senki sem használja már ezt tag-et a szövegrészek stílusának meghatározására.

Itt az ideje, hogy megismerkedjünk egy weboldal jellemző felépítésével:

<html>

</html>

Ez egy teljesen üres weblap elégséges szerkezete.

<html> -el kezdődik </html> -el záródik

<head> </head> között található a legtöbb olyan információ amely elsősorban a böngészőnek (megjelenítés) és a keresőknek (oldal tartalma) nyújt fontos információkat.

<body> </body> rész: itt található a weblapra látogatók számára is látható rész.

Három királyok

Title, Description, Keywords

Végül vessük egy pillantást 3 nagyon fontos tag-re, amelyek a <head> részben helyezkednek el.

Jellemzően a keresők számára nyújtanak támpontot a weboldal tartalmát illetően általában és az egyes aloldalakra vonatkozóan is.

<title>Weboldalunk címsora</title>
<meta name=”description” content=”Az oldal tartalmának rövid leírása” />
<meta name=”keywords” content=”kulcsszó1, kulcsszó2, kulcsszó3, macska” />

Title tag

A címsor szövege nagyon fontos információt hordoz a keresők számára. Többek között ez alapján ítéli meg, hogy miről szól az adott oldal. A böngészőkben ez a szöveges tartalom látszik a legfelső kék sávban (sárga nyilak) és a keresési találatok kék címszövege is ez.

Description

Az oldal rövid leírása. A keresési találatok között gyakran a description tag-ben található szöveg jelenik meg a cím alatt (zöld nyíl).

Keywords

Kulcsszavak, az oldal tartalmára jellemző kifejezések. Hajdanában hajlamosak voltak a weboldalak készítői telezsúfolni ezt a részt mindenféle populáris kifejezéssel, amelyre egy ideig rá is harapott néhány bugyuta webes kereső program. Ma már a Google égre-földre esküdözik, hogy sem a kulcsszavakat, sem az oldalleírást (description) nem veszi figyelembe a találati lista kialakításakor. Ez annyiban igaz csak, hogy sokkal kevesebb hangsúlyt helyez az itt található kifejezésekre.

A weboldalak felépítésébe az átlagos internet felhasználóknak ennél talán nem is szükséges sokkal mélyebben belemerülni. Reméljük hasznosnak találta az olvasottakat.