A head tag
A HTML head tag bemutatása, beállítások leírása, szerepük, script-ek és css-ek betöltése.
- Főoldal
/
- Kurzusok
/
- Webfejlesztés
/
- HTML
/
- HTML alapok
A head tag
A HTML forráskód esetében a HEAD tag a böngészők számára nem létfontosságú, bár ha azt szeretnénk, hogy minden weboldalunk úgy működjön, ahogy elképzeltük, akkor ezt érdemes beállítani.
Ennek a tagnak a segítségével lehetőségünk adódik sokféle beállítást végrehajtani a látogató böngészőjében, mint pl: cím meghatározása, betűk kódolásának a típusát (erről majd később), stb.
Nem csak a látogatókra kell gondolni itt, hisz az interneten rengeteg kereső található, melyek rendelkeznek olyan automatizált rendszerekkel (botokkal) amelyek folyamatosan pásztázzák az internetet, naponta sok ezer, akár millió weboldalt megtekintve és elmentve. Ezen botok számára is a fejlécben (HEAD) tudunk megadni információkat, pl. hogy az aktuális oldal amelyet nézünk egy weboldalon belül, az számukra elmenthető, vagy nem, követhető, vagy nem, ezen kívül itt határozzuk meg az aktuális oldal címét, leírását, a stílus elemek betöltését stb.
A leggyakoribb beállítás az amikor a böngésző címét átírjuk, ehhez a "title" tagot kell használnunk a következőképpen:
<head>
<title>Wannacode.com</title>
</head>
A ma ismert közösségi oldalak is itt keresik a számukra tárolt információkat, amikor egy képet, egy weboldalt, egy videót osztunk meg, sajnos ebben az esetben is mindenik másképp keresi az adatokat. Pl. van ahol elegendő megadni a "title" tagot, van ahol be kell állítani egy "meta" tagon keresztül a title értékét, de a legbíztosabb, ha többfélét is beállítunk, és minden robot megkeresi a neki megfelelőt.
Továbbá szintén a HEAD tag segítségével tölthetjük be az oldalhoz tartozó CSS fájlokat (stílusokat), JavaScript fájlokat, de az oldalhoz tartozó tartozó ikont is, az alábbi formákban:
<head>
// css fájl betöltése
<link type="text/css" rel="stylesheet" href="fájlhoz vezető link"/>
// javascript fájl betöltése
<script type="text/javascript" href="fájlhoz vezető link"></script>
// headben megírt javascript, mely nincs külön fájlban
<script type="text/javascript">
// Ide írhatjuk a javascriptet
</script>
// headben megírt CSS style, mely nincs külön fájlban
<style type="text/css">
// Ide írhatjuk a css tulajdonságokat
</style>
// oldalhoz tartozó ikon
<link rel="shortcut icon" href="ikonhoz vezető link"></script>
</head>
Meta tagok beállításával adhatunk meg információkat az internetet böngésző botok számára, az alábbi módon:
<head>
// title meghatározása
<meta name="title" content="Wannacode.com" />
// leírás meghatározása
<meta name="description" content="HTML Head beállítása" />
// kulcsszavak beállítása
<meta name="keywords" content="Wannacode, html, head, tagok, stb" />
// botok megtekinthetőségének beállítása
<meta name="robots" content="index, follow" />
// oldal ikonjának beállítása
<link rel="shortcut icon" href="ikonhoz vezető link"></script>
</head>
Mivel a weboldalak általában tartalmaznak egy vagy több speciális vagy ékezetes karaktert, melyeknek más nyelvekben nincs megfelelőjük, pl. az "á" betű, ezért a böngészők számára meg kell mondanunk, hogy milyen kódolási algoritmust használjon, hogy az ékezetes karaktereink jól megjelenjenek. Ezt az alábbi módon tehetjük meg:
<head>
// betűk kódolásának beállítása
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
</head>
Jelentése, hogy az érkező oldal tartalmaz egy XHTML tartalmat, melyben a karakterek kódolása UTF-8 típusúak. Az UTF-8 kódolás segítségével megjeleníthetjük a világon előforduló összes karaktert olyan formában ahogy azok léteznek, pl. az "á" betű "á" betű marad, nem pedig "´" (ISO-8859-2 kódolás). Ezért minden esetben ajánlott ezt a karakter kódolást használnunk.
A mobilgyártóknak köszönhetően most már beköszöntött az okostelefonok világa, így a mobilról, tabletről, vagy egyéb eszközökről nagyon könnyen tudunk böngészni, mintha számítógépen interneteznénk. Ennek a technológiának köszönhetően a weboldalakat egyre jobban testre kell szabni, hogy a készülékek számára könnyebb legyen a megjelenítés, és a látogatók számára az oldal könnyen kezelhető legyen kis készülékeinken is. Ehhez a HEAD részben be kell állítanunk a készülékek számára, hogy az oldal milyen méretben jelenjen meg, lehet-e nagyítani, kicsinyíteni, stb. Ezt az alábbi módon tehetjük meg:
<head>
// Kis készülékek számára meg kell határozni az oldal méretét, nagyíthatóságát
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
Az értékek természetesen tőlünk függően változhatnak. A "width" az oldal szélességét határozza meg, értéke "device-width", ami azt jelenti, hogy az oldal maximum olyan széles lehet, mint az eszköz képernyője.
A "minimum-scale" meghatározza, hogy az oldalt minimálisan mennyire lehet lekicsinyiteni. A "maximum-scale" pedig, hogy maximum mennyire lehet kinagyítani. A "user-scalable" pedig meghatározza, hogy az eszközt kezelő személy nagyíthatja-e, kicsinyitheti-e az oldalt?
- Előző lecke: A HTML részei
- Következő lecke: HTML tagek
Részletek
- Megtekintve: 339
- Haszontalannak jelölve: 0
- Hasznosnak jelölve: 1
- Értékelés: