A head elem tartalma és a HTML-szöveg alapjai

A head elem tartalma és a HTML-szöveg alapjai

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?

1. <title>
2. <h1>
3. <head>
 

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.

Szeretne értesülni, ha új cikk jelenik meg Számtek rovatunkban? Iratkozzon fel értesítőnkre!

E-mailben értesíteni fogjuk Önt az új cikkekről. Feliratkozáshoz kérjük adja meg a nevét és az e-mail címét.

Hozzászólások

Kapcsolódó cikkek

A head elem tartalma és a HTML-szöveg alapjai
Számtek
A head elem tartalma és a HTML-szöveg alapjai
Számtek
  • Erdsoft
  • 2019.10.17.
  • LXXIV. évfolyam 42. szám
Facebook

Támogatóink