HTML haladóknak | Stílusok használata
HTML haladóknak | Stílusok használata
Bevezetés a HTML-beDave Raggett, átdolgozva 2005. május 24-én.
Jelen dokumentum egy rövid bevezető a HTML fejlesztésbe. Mi az a HTML? Egy különleges szöveges dokumentumtípus, amit a webböngészők használnak szövegek és grafikák megjelenítésére. A szöveg olyan jelölőcímkéket tartalmaz, mint például a bekezdések kezdetét jelölő <p> és azok végét jelölő </p>. A HTML dokumentumokat gyakran hívják "weblapoknak" is. A böngészők a weblapokat webszerverektől kérik le, melyek az internetnek köszönhetően gyakorlatilag bárhol lehetnek a Földön.
Sokan még mindig olyan egyszerű kézi eszközökkel írnak HTML dokumentumokat, mint a Windows Jegyzettömb vagy a Mac gépeken a SimpleText. Ez az ismertető ezek számára készült. Mégha nem is akarunk HTML-t közvetlenül szerkeszteni, és inkább HTML-szerkesztőt használunk (mint például a Netscape Composer vagy a W3C Amaya), ezen ismertető lehetővé teszi elegendő ismeret megszerzését ahhoz, hogy jobban ki tudjuk használni az ilyen eszközöket és HTML dokumentumainkat a böngészők szélesebb körében tegyük elérhetővé. Ha már biztos tudással rendelkezünk a HTML-szerkesztés alapjairól, megtanulhatjuk a stílusok használatát a CSS felhasználásával, valamint a HTML haladóknak című résznél további lehetőségeket is.
u.i. az egyik jó tanulási mód az, ha megnézzük, mások hogyan kódolják HTML oldalakaikat. Ehhez kattintsunk a "Nézet" menüre, majd a "Forrás"-ra (egyes böngészőkön a "Fájl" menü "Forrás megtekintése" menüpontra). Próbáljuk ki jelen oldallal, és látható válik, hogy a későbbiekben taglalásra kerülő ötletek hogyan kerültek alkalmazásra. Mindeközben azon kaphatjuk magunkat, hogy kritikai vénánk is fejlődik, hiszen számos oldal meglehetősen rendetlen forráskódú.
A Mac felhasználóknak a fájlok ".html" kiterjesztéssel való mentése előtt meg kell győződniük róla, hogy a dokumentumok egyszerű szövegként vannak-e formázva. A TextEditben ez a "Format" [=Formázás] menü "Make Plain Text" [=Egyszerű szöveg készítése] opciójával állítható be.
Jelen dokumentumból megtanulható, hogyan kell
Ha nem ezekre kíváncsi, tekintse meg a HTML haladóknak c. oldalt.
Minden HTML dokumentumnak szüksége van egy címre. Ennek megadása az alábbi módon történik:
<title>Első HTML dokumentumom</title>
Az "Első HTML dokumentumom" szöveget igényeiknek megfelelően módosíthatjuk. A cím szövegét egy <title> akezdő tag előzi meg és egy </title> lezáró tag követi. A címet a dokumentumunk elején kell elhelyezni.
Ennek kipróbálásához a fenti példát gépeljük be egy szövegszerkesztőbe, mentsük az állományt "teszt.html" néven, majd tekintsük meg egy webböngészőben. Ha az állomány kiterjesztése ".html" vagy ".htm", a böngésző felismeri, hogy HTML dokumentummal van dolga. A legtöbb böngésző a címet a böngészőablak címeként jeleníti meg. Ha csak a cím van megadva, a böngésző egy üres oldalt jelenít meg. Nem kell aggódni, a következő részből azt is megtudjuk, hogy lehet megjelenítendő tartalmat megadni.
Ha ön már használt Microsoft Wordöt, akkor ismeri a különböző fontosságú címsorok beépített stílusait. A HTML-ben hat címsor-szint létezik. A H1 a legfontosabb, a H2 kissé kevésbé fontos, és így tovább, egészen H6-ig, a legkevésbé fontosig.
Egy fontos címsor megadása:
<h1>Egy fontos címsor</h1>
és egy kicsit kevésbé fontos címsor:
<h2>Egy kicsit kevésbé fontos címsor</h2>
Minden bekezdés a <p> taggel kezdődik. A </p> elhagyható, ellentétben más elemek, például a címsorok lezáró tagjeivel [a napjainkban használatos XHTML jelölőnyelvekben ez már nem megengedett – a ford.]. Például:
<p>Ez az első bekezdés.</p> <p>Ez a második bekezdés.</p>
Egy vagy több szavat is kiemelhetünk az <em> taggel, például:
Ez egy valóban <em>érdekes</em> téma!
Képekkel weblapjaink jellegzetessé tehetők és nagy mértékben elősegítik mondanivalónk kifejezését. A képek egyszerűen beilleszthetők az <img> tag használatával. Tegyük fel, hogy van egy "peter.jpg" nevű fájlunk ugyanabban a mappában/könyvtárban, mint a HTML fájl. A kép 200 képpont széles és 150 képpont magas.
<img src="peter.jpg" width="200" height="150">
Az src attribútum a képfájlt nevezi meg. A szélesség és a magasság megadása nem feltétlenül szükséges, de segítségükkel a weblap gyorsabban jelenhet meg. Valami azonban még hiányzik! Azoknak, akik nem látják a képet, szükségük van egy leírásra, melyet a kép megtekintése helyett elolvashatnak [ez a napjainkban egyre népszerűbb akadálymentesség alkalmazása esetén például – sok más előírás betartása mellett – alapkövetelmény – a ford.]. A következőképpen adhatunk egy rövid leírást a képhez:
<img src="peter.jpg" width="200" height="150" alt="Barátom, Péter">
Az alt attribútum egy rövid leírás megadására használható, ami ebben az esetben: "Barátom, Péter". Összetettebb képeknél hosszabb leírásra is szükség lehet. Ha feltételezzük, hogy ez a leírás a "peter.html" fájlban van, a következő megadási módot alkalmazhatjuk, a longdesc attribútumot felhasználva:
<img src="peter.jpg" width="200" height="150" alt="Barátom, Péter" longdesc="peter.html">
Képeket sokféleképpen készíthetünk, például digitális fényképezőgéppel, szkennerrel, esetleg egy festő- vagy rajzolóprogrammal. A legtöbb böngésző értelmezni tudja a GIF és JPEG formátumú képeket, az újabbak pedig a PNG formátumot is ismerik. A hosszú idejű hálózati letöltés elkerülése érdekében célszerű a nagyméretű képfájlok használatának mellőzése [olyan esetekben, amikor a kis felbontás nem elegendő (pl. online albumok esetén), bevett szokás minden képhez egy kis felbontású, gyorsan letölthető előnézeti változatot is készíteni, melyek egy-egy hivatkozást tartalmaznak nagy felbontású változataikhoz – a ford.].
Általánosságban elmondható, hogy a JPEG a legjobb a fényképekhez és más, egyenletesen változó képekhez, míg a GIF és a PNG az egyszínű felületeket, egyenes- és szövegfelületeket tartalmazó grafikák tárolására alkalmasabb [a PNG formátumot használjuk továbbá áttetsző hátterű fényképek tárolására is (pl. egy arckép így folyatható körbe az aktuális háttérszínnel) – a ford.]. Mindhárom formátum támogatja a progresszív renderelési opciókat, melyeknél a kép nyers változata jelenik meg először, majd fokozatosan finomodik.
A webet az a képesség teszi ilyen hatákonnyá, hogy egyik oldalról a másikra mutató hivatkozásokat definiálhatunk, melyek egyetlen gombnyomással követhetők. Egy egyszerű kattintás akár a világ másik végére is vihet minket!
A hivatkozások (linkek) az <a> taggel adhatók meg. Definiáljunk egy hivatkozást arra az oldalra, amely az éppen szerkesztett "peter.html" fájlban van megadva:
Ez egy link <a href="peter.html">Péter honlapjára</a>.
Az<a> és a </a> közötti szöveg a hivatkozás szövege, mely gyakran kék színű és aláhúzott.
Ha az állomány, melyre hivatkozunk, a szülőmappában/szülőkönyvtárban van, a "../"-nek kell megelőznie a fájlnevet, például:
<a href="../mari.html">Mari honlapja</a>
Ha egy alkönyvtárban levő fájlra hivatkozunk, annak nevét is meg kell adni, egy "/" karakterrel egyetemben, például:
<a href="baratok/zsuzsi.html">Zsuzsi honlapja</a>
A relatív elérési utak használatával a könyvtárak fastruktúrájában igény szerint navigálhatunk felfelé és lefelé. Például a
<a href="../fosuli/baratok/jani.html">Jani honlapja</a>
kód először a szülőkönyvtárban megkeresi a "fosuli" könyvtárat, majd annak "baratok" alkönyvtárában a "jani.html" fájlt.
Egy másik weblapon levő oldalra történő hivatkozáshoz meg kell adni a teljes webcímet (gyakran URL-nek is mondjuk). A www.w3.org-ra való hivatkozáshoz például az alábbit kell írnunk:
Ez egy hivatkozás a <a href="http://www.w3.org/">W3C</a>-re.
Kép is lehet hiperhivatkozás. A következő megoldás például lehetővé teszi, hogy egy cég logójára kattintva annak nyitóoldalára jussunk:
<a href="/"><img src="logo.gif" alt="Nyitóoldal"></a>
Itt a "/" a könyvtár-faszerkezet gyökérkönyvtárára hivatkozik, vagyis a nyitóoldalra.
A HTML háromféle listát támogat. Az első a felsorolás, amit gyakran rendezetlen listának is hívnak. Ez az <ul> és <li> tageket használja:
<ul> <li>az első listaelem</li> <li>a második listaelem</li> <li>a harmadik listaelem</li> </ul>
Megjegyzendő, hogy a listát mindig a </ul> tag zárja, a </li> lezáró tag viszont opcionális, tehát elhagyható [a napjainkban használatos XHTML jelölőnyelvekben ez már nem megengedett – a ford.]. A második listatípus a számozás, amit gyakran rendezett listának is hívunk. Az <ol> és <li> tageket használja. Példa:
<ol> <li>az első listaelem</li> <li>a második listaelem</li> <li>a harmadik listaelem</li> </ol>
A felsorolásokhoz hasonlóan a számozást is mindig le kell zárni a </ol> lezáró taggel, de a </li> lezáró tag opcionális, tehát elhagyható [csak HTML-ben, XHTML-ben nem – a ford.].
A harmadik és egyben utolsó listatípus a definíciós lista. Ez kifejezések és azok definícióinak felsorolását teszi lehetővé. A <dl> taggel kezdődik és a </dl> taggel végződik. Minden szakkifejezés egy <dl> taggel, minden definíció egy <dd>-vel kezdődik. Például:
<dl> <dt>az első szakkifejezés</dt> <dd>meghatározása</dd> <dt>a második szakkifejezés</dt> <dd>meghatározása</dd> <dt>a harmadik szakkifejezés</dt> <dd>meghatározása</dd> </dl>
A lezáró </dt> és </dd> tagek opcionálisak, tehát elhagyhatók [csak HTML-ben, XHTML-ben nem – a ford.]. Megjegyzendő, hogy a listák egymásba is ágyazhatók. Például:
<ol>
<li>az első listaelem</li>
<li>
a második listaelem
<ul>
<li>az első beágyazott elem</li>
<li>a második beágyazott elem</li>
</ul>
</li>
<li>a harmadik listaelem</li>
</ol>
Hosszabb listaelemekhez bekezdések, címsorok stb. is használhatók.
Ha webböngészőnk forrás megtekintésére alkalmas funkcióját használjuk (a Nézet vagy Fájl menüben), a HTML oldalak szerkezete is láthatóvá válik. A dokumentum általában az alkalmazott HTML verzió deklarációjával kezdődik, melyet egy <html>, egy <head> és a legvégén egy </html> tag követ. A <html> ... </html> páros szolgál a dokumentum befogadására. A <head> ... </head> rész tartalmazza a címet, a stíluslapok és szkiptek információit, míg a <body> ... </body> részben van a megjelenítendő (vizuális) tartalom. Az alábbi sablon kimásolható és egy szövegszerkesztőbe illeszthető saját weblapok létrehozásához:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> helyettesítsük saját dokumentumunk címével </title>
</head>
<body>
helyettesítsük dokumentumunk tartalmával
</body>
</html>
A jelölősi hibák automatikus javításának kényelmes módja a HTML Tidy alkalmazása, mely a jelölés "kitisztítása" révén könnyebben olvashatóbbá és szerkeszthetőbbé is teszi a forráskódot. A Tidy nagyon hatékony a helytelen kódot generáló szerkesztőeszközök jelöléseinek "tisztításában". A program az operációs rendszerek széles skálájára elérhető a TidyLib Sourceforge oldalról, és számos HTML szerkesztőeszközbe is beépítették.
Ha készen áll rá, hogy többet is tanuljon a HTML-ről, tanulmányozza a on HTML haladóknak és stílusok használata című írásaimat.
A W3C HTML 4.0 verziójának ajánlása a HTML hiteles specifikációja. Ez azonban egy szakmai specifikáció. Kevésbé szakmai specifikációkhoz vásárolhat a HTML-ről készült számos könyv közül, mint amilyen például a "Raggett on HTML 4" (Addison Wesley, 1998). Már az XHTML 1.0 is W3C ajánlás. [Sőt az 1.1 is. Többek között ezért is hangsúlyoztam az XHTML-ben nem elhagyható lezáró tageket. A fordító megjegyzése.]
Sok szerencsét és jó szerkesztést!