A head elemről előző cikkünkben is szót ejtettünk — ez a HTML-dokumentum része, melyet a weboldal látogatói nem látnak. Ide kerülnek a kulcsszavak, az oldal címe (<title>), a CSS-linkek és más metaadatok. Mai cikkünkben bemutatjuk a head elem részeit, valamint megismerkedünk néhány HTML-elemmel is.
A head elem tartalma
A head elem tartalmazhat néhány egyszerű sort, de lehet ennél sokkal bonyolultabb is, tele mindenféle metaadattal. Kezdjük a legfontosabbakkal!
A cím
A címet, azaz a <title> elemet gyakran tévesztik össze a <h1> elemmel, pedig két különböző dologról van szó. A <h1> elem a böngészőben megnyitott weboldalon jelenik meg. Ez jelöli a cikk címét, a legfontosabb bekezdés címét, a termék nevét vagy bármi mást, amit fontos kiemelni. A <title> elem olyan metaadat, mely a teljes HTML-dokumentum címét jelöli.
A metaadat
A metaadat nem más, mint adat a weboldalról. Metaadatot a <meta> elem segítségével tudunk a HTML dokumentumhoz hozzáadni. Számos különféle metaadat létezik — ez lehet a dokumentum karakterkészlete, a weboldal tartalmának a szerzője, a tartalom rövid leírása, a Facebook által meghatározott OG-jelölések, melyeknek köszönhetően szépen fognak megjelenni az oldalunkra mutató linkek ezen a közösségi oldalon, és még sok más.
A favicon
A favicon a favorites icon rövidítése. Ez a weboldalhoz tartozó ikon, mely több helyen is megjelenik — a böngészőfülön vagy akkor, ha az oldalt a könyvjelzők vagy a kedvencek közé illesztjük. A favicon képecskéjét az index oldal mappájába mentjük el, majd a head elemben hivatkozunk rá.
CSS és JavaScript
A mai modern weboldalak nagy része alkalmazza őket — a CSS-t a weboldal kinézetének felturbózására, a JavaScriptet pedig az interaktív elemek megjelenítésére, mint amilyenek a videók, térképek, játékok stb. Leggyakrabban a <link> és <script> elemek segítségével illesztjük be őket a weboldalba.
A <link> elem mindig a head részbe kerül. Két attribútuma van: a rel=”stylesheet”, ami jelzi, hogy a dokumentum stíluslapjáról van szó, valamint a href, mely a stíluslap fájlhoz vezető utat tartalmazza.
A <script> elemnek nem kell kötelezően a headbe kerülnie. Sőt, leggyakrabban az a legmegfelelőbb, ha a dokumentum body részének legvégén helyezzük el, mert így a böngésző előbb olvassa be a tartalmat, és csak azután alkalmazza rá a JavaScriptet.
A nyelv beállítása
Végül, de nem utolsósorban a weboldal nyelvének beállítása is egy fontos feladat. Ezt a lang attribútum által tudjuk megtenni, melyet a head részbe helyezünk. A lang attribútum így fest:
<html lang="en-US">
Minden nyelvnek más a jelölése, így például a magyar "hu", a szerb pedig "sr".
Ezzel a HTML-head gyorstalpalójának a végére értünk. Természetesen számos más elem is létezik, de a legfontosabbakat érintettük. Most nézzük, hogyan használjunk néhány olyan HTML-elemet, amellyel szövegeket jeleníthetünk meg a weboldalakon.
A legfőbb HTML-elemek
A HTML fő feladata, hogy a szövegnek struktúrát adjon, és elérje, hogy a böngésző megfelelően jelenítse meg a tartalmat. Kezdjük az alapokkal!
Címek és bekezdések
Attól függetlenül, hogy újságcikkről, sztoriról, magazinról vagy tankönyvről van-e szó, a legtöbb strukturált szöveg címekből, alcímekből és bekezdésekből áll. A jól meghatározott struktúra könnyíti és élvezhetőbbé teszi az olvasási élményt.
A HTML-ben a bekezdést a <p> elem keretezi:
<p>Ez itt egy bekezdés.</p>
A címeket a heading elembe foglaljuk:
<h1>Ez pedig a cikk címe.</h1>
A heading elemeknek hat szintjük van, a <h1> a főcím, a <h2> az alcím, a <h3>, <h4>, <h5> és <h6> jelöléssel pedig az alacsonyabb szintű címeket jelöljük. Általában bőven elegendő, ha egy oldalon három szintet használunk.
Listák
A listák az élet számos területén jelen vannak — a bevásárlólistától a weboldalakig. Ami a webfejlesztést illeti, kétféle listát kell szem előtt tartanunk.
Az első a rendezetlen lista, itt a tételek sorrendje nem fontos. Ennél a listánál az elemek előtt pontokat fogunk látni. A listát az <ul> elemmel keretezzük, minden egyes tételt pedig az <li> elemmel.
A második a rendezett lista, ahol fontos a sorrend. Itt az elemek előtt számokat fogunk látni. A listát az <ol> elemmel keretezzük, a tételeket pedig az előző listához hasonlóan az <li> elemmel.
Hangsúlyos és fontos elemek
Az emberi beszéd fontos része a hangsúly, mely gyakran teljesen megváltoztatja a mondatok értelmét. A HTML-ben is találhatunk olyan szemantikus elemeket, amelyek segítségével hangsúlyozhatunk, kiemelhetünk bizonyos dolgokat.
A hangsúlyos szavakat az <em> elem segítségével emelhetjük ki. Ez érdekesebbé teszi a dokumentumot, a képernyőolvasók pedig képesek más hangsúllyal felolvasni a szavakat. Az <em> jelölést a böngészők leggyakrabban dőlt betűkkel jelölik.
A fontos dolgokat a <strong> elemmel keretezhetjük — ezek a szavak vastag betűkkel lesznek kiírva.
Ezzel a mai leckénk végére érkeztünk! Megtanultad a kezdő lépéseket a HTML-jelöléseket illetően, már csak annyi maradt hátra, hogy magad is kipróbáld őket a gyakorlatban!
NYEREMÉNYJÁTÉK!
Örömmel tölt el bennünket, hogy cikksorozatunk ennyi olvasó érdeklődését felkeltette, és hogy az első kérdésünkre sok helyes válasz érkezett, hiszen azok között, akik beküldik a helyes választ, a sorozat végén egy laptopot sorsolunk ki! Minden beküldött helyes válasz növeli a nyerési esélyeket, hiszen mindegyik egy szelvényt fog érni.
Második heti kérdésünk:
Melyik elemmel állíthatjuk be a HTML-dokumentum címét?
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
Néhány szó rólunk:
Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.
