|
Ebben a fejezetben a dokumentumok fejrészével (<HEAD> ... </HEAD>ismerkedünk meg. Témák:
Amint azt már olvashattad, a dokumentumok fejrészében elhelyezkedő adatokat a böngésző nem jeleníti meg, azok szerepe:
- hogy a böngésző címsorát megjelenítsék,
- hogy a böngészőt a dokumentum olvasásához beállítsák (karakterkészlet, nyelv...),
- hogy a internetes keresőrobotoknak lapunkról összefoglaló információt nyújtsanak,
- valamint itt helyezhetjük el a dokumentum egészére vonatkozó stílusutasításainkat.
Az alábbiakban sorravesszük a főbb elemeket:
Ide írjuk a dokumentum címét, így:
<TITLE> ez lesz a cím </TITLE>
A cím szövege fog megjelenni a böngészőablak címsorában (fent), valamint a windows-tálcán a böngészőablak aktiváló gombján. A TITLE elemről bővebben itt olvashatsz... fel...
Sokszor elhanyagolt, de fontos elemek. Több is lehet belőlük, mindegyik egy-egy utasítást ad. Segítségükkel lehet a látogató böngészőjét beállítani a dokumentum nyelvére, a használandó karakterkészletre. Itt lehet a kívánt kulcsszavakat megadni a keresőknek, valamint utasíthatják a keresőrobotokat a webhelyen további keresésre. Számos további információt is tartalmazhatnak, amelyeket csak a forráskód elolvasásával lehet megtudni. Mindenképpen ajánlott legalább a karakterkészletre vonatkozó utasítást megadni, ez magyar nyelvű lapoknál a következő:
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> vagy <META http-equiv="Content-Type" content="text/html; charset=windows-1250"> lehet. A többi META elem használata opcionális. A META elemekről bővebben itt olvashatsz... Saját lapod meta elemeinek elkészítéséhez használhatod META GENERÁTORunkat. fel...
A többi itt használatos elem opcionális, csak szükség szerint alkalmazzuk.
- Beágyazott stílusok
<STYLE> </STYLE> A dokumentumunkba beágyazott stíluslap HTML kódja. Ennek az elemnek a tartalmával lehet - CSS (Cascading Style Sheet) parancsnyelven - dokumentumunknak a HTML lehetőségeinél szélesebb lehetőségekkel bíró formázási utasításokat adni. Itt fontos tudni, hogy beágyazott CSS stílus esetén az elem tartalmát "comment" jelek közé kell foglalni, különben a régi kiadású böngészők, amelyek még nem értik a CSS nyelvet, tévesen HTML utasításnak értelmeznék azt. Egy példa stílus használatára:
<STYLE type=text/css>
<!--
A { text-decoration: none }
-->
</STYLE>
Erre a lapon szereplő a linkeket aláhúzás nélkül fogja a böngésző megjeleníteni. A STYLE elemekről bővebben itt olvashatsz... Saját lapod stílusainak elkészítéséhez használhatod STÍLUS VARÁZSLÓnkat.
- Kapcsolódás külső fájlhoz
<LINK > Hozzáfüzhetünk a lapunkhoz más fájl-t, például stíluslapot vagy javascript parancsfájl-t. Ezeket a böngésző a LINK elem utasítására a dokumentumunk betöltődésekor lekéri a szerverről. A LINK elemben meghatározhatjuk a dokumentumunk és a külső fájl kapcsolatának irányát is. Egy példa: igy lehet az azonos könyvtárban található stilusok.css stílusfájl-t a LINK elemmel meghívni:
<LINK href="stilusok.css" type="text/css" rel="StyleSheet">
A LINK elemekről bővebben itt olvashatsz...
- Beágyazott scriptek
<SCRIPT> A kliens oldali javascriptek a weblapokat a HTML lehetőségein messze túlmenően dinamikusabbá, interaktívabbá teszik. HTML oldalba általában a HEAD részbe kell beilleszteni a <SCRIPT> elem nyitó és zárótagja közé a beágyazott scripteket. Külső scriptek itt is a LINK elem segítségével hívhatók meg. Beágyazott script használata esetén - a STYLE elemhez hasonlóan - el kell rejteni azt a régebbi böngészők elől. Fontos, hogy a beágyazott script mindig a dokumentum azon része előtt szerepeljen a forráskódban, amire vonatkozik. A SCRIPT elemekről bővebben itt olvashatsz...
A fejezet zárásaként egy képzeletbeli weblap forráskódján tanulmányozható a fejrész elemeinek elhelyezése:
<HTML>
<HEAD>
<TITLE> ez a cím </TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<META name="Keywords" content=" kulcsszó1, kulcsszó2 ">
<META name="Description" content=" ide kerül a lap rövid leírása. ">
<LINK href="stilusok.css" type="text/css" rel="StyleSheet">
</HEAD>
<BODY>
ide kerül a dokumentum tartalma
</BODY>
</HTML>
|
|