Jelen dokumentum egy W3C dokumentum fordítása.
Az eredeti dokumentum az alábbi címen található: http://www.w3.org/MarkUp/Guide/
A fordítás az eredeti dokumentum szerzője, Dave Raggett írásbeli engedélyével készült.
Minden jog fenntartva! A dokumentumra vonatkozó felhasználási jogok megegyeznek az eredeti dokumentum felhasználási jogaival. A dokumentum fordítási hibákat tartalmazhat.
A fordítást Sikos László (sikos kukac leslie-sikos pont net) készítette.

Bevezetés a HTML-be

Dave Raggett, átdolgozva 2002. február 13-án

Ez egy rövid bevezető a HTML írásába. 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ő felébresztheti Önt. Mégha nem is akarunk HTML-t közvetlenül szerkeszteni, és ahelyett, hogy egy HTML-szerkesztő (pl. a Netscape Composer vagy a W3C Amaya programja) használatát fontolgatnánk, ezen ismertető lehetővé teszi, hogy eleget tudjunk ahhoz, hogy jobban ki tudjuk használni az ilyen eszközöket, valamint HTML dokumentumainkat a böngészők szélesebb körének 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 megtekinthetünk néhány különlegesebb megoldást is.

Egy kényelmes megoldás a jelölési hibák automatikus javítására a HTML Tidy nevű alkalmazás. Mintegy "kitakarítja" a jelöléseket, könnyebbé téve ezzel az olvasást és a szerkesztést. Ajánlom a Tidy program rendszeres futtatását minden olyan kód esetében, melyet szerkesztünk. A Tidy nagyon hatékony olyan jelölések kipucolásában, melyeket hanyag jelölési formákat használó szerkesztőeszközökkel készítettünk.

u.i. a tanulás egy jó útja, ha megnézzük, mások hogyan kódolták html oldalaikat. Ehhez kattintsunk a "Nézet" menüre, majd a "Forrás"-ra. Próbáljuk ki ezzel az oldallal, hogyan alkalmaztam a lent taglalt ötleteket. Rögtön fejlődik kritikus szemünk, ahelyett, hogy elámulnánk a látványtól!

Ezen oldalról megtanulhatjuk, hogyan kell:

címet adni a dokumentumunknak
címsorokat és szakaszokat megadni
hangsúlyozni a szövegben
képeket elhelyezni a dokumentumban
más oldalakra mutató hivatkozásokat megadni
különböző típusú felsorolásokat készíteni

Ha más jellegű dolgok érdeklik, tekintse meg a HTML haladóknak oldalt.

Kezdjük a címmel

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 az igényeiknek megfelelően módosíthatjuk. A cím szövegét egy <title> kezdő 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ő azt HTML dokumentumként értelmezi. A legtöbb böngésző a címet a böngésző ablakának felirataként annak címsorában jeleníti meg.

Címsorok és szakaszok megadása

Ha Ön már használt Microsoft Word-öt, akkor ismeri a különböző fontosság jelölésére szolgáló címsorok és szakaszok beépített stílusait. A HTML-ben hat címsor-szintet használhatunk. A H1 a legfontosabb, a H2 kissé kevésbé fontos stb., 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 szakasz, amit írunk, a <p> tag-gel kezdődik. A </p> elhagyható, ellentétben a címsorok lezáró tag-jeivel. Például:

<p>Ez az első szakasz.</p>

<p>Ez a második szakasz.</p>

Egy kis kiemelés

Egy vagy több szavat is kiemelhetünk a <em> tag-gel, például:

Ez egy valóban <em>érdekes</em> téma!

Tegyük érdekessé oldalainkat képekkel

Képekkel weblapjaink jellegzetessé tehetők és nagyban segítenek közlésünk sikeres megértésében. A képek beillesztésének egyszerű módja az <img> tag használata. Tegyük fel, hogy van egy "peter.jpg" nevű fájlunk ugyanabban a könyvtárban/mappában, 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íthet a weblap megjelenítési sebességének javításában. Valami még mindig hiányzik! Azoknak, akik nem láthatják a képet, szükségük van egy leírásra, melyet a kép megtekintése helyett elolvashatnak. 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ó, ebben az esetben "Barátom, Péter". Komplex képeknél szükség lehet egy hosszabb leírásra is. 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ő meg tudja jeleníteni a GIF és JPEG formátumú képeket, az újabb böngészők pedig a PNG formátumot is értelmezni tudják. A hosszú hálózati letöltést elkerülendő, mellőzzük a nagyméretű képfájlok használatát.

Általánosságban elmondható, hogy a JPEG a legjobb a fényképekhez és egyéb egyenletesen változó képekhez, míg a GIF és a PNG az olyan grafikákhoz jó, amely egyenletes szín-, egyenes- és szövegfelületeket tartalmaz. Mindhárom formátum támogatja a progresszív renderelési opciókat, ahol a kép nyers változata jelenik meg először, majd progresszíven finomodik.

Más oldalakra történő hivatkozások

A webet az a képesség teszi ilyen hatákonnyá, hogy hivatkozásokat definiálhatunk, melyek egyik oldalról a másikra hivatkoznak, és ezek a hivatkozások egyetlen gombnyomással követhetők. Egy egyszerű kattintás körülvihet minden a világon!

A hivatkozások (linkek) az <a> tag-gel definiálhatók. Definiáljunk egy hivatkozást arra az oldalra, amely a "peter.html" fájlban van megadva:

Ez egy link <a href="peter.html">Peter honlapjára</a>.

Az <a> és a </a> közötti szöveg a hivatkozás felirataként szolgál. A felirat általában kék színű és aláhúzott szöveg.

Egy másik weblapon levő oldalra történő hivatkozáshoz meg kell adni a teljes webcímet (gyakran URL-nek is mondjuk), például a www.w3.org-ra történő hivatkozáshoz ezt kell írnunk:

Ez egy hivatkozás a <a href="http://www.w3.org/">W3C</a>-re.

Egy kép is lehet hiperhivatkozás, például a következő megoldás lehetővé teszi, hogy egy cég logójára kattintva annak honlapjára jussunk:

<a href="/"><img src="logo.gif" alt="honlap"></a>

Három felsorolás-típus

A HTML három felsorolás-típust támogat. Az első típust gyakran rendezetlen listának nevezik. Ez a <ul> és <li> tag-eket használja, például:

<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> lezáró tag-gel kell befejezni, de a </li> opcionális, tehát elhagyható. A második felsorolás-típus a számozott lista, melyet gyakran rendezett listának is neveznek. Ez az <ol> és <li> tag-eket használja. Például:

<ol>
  <li>az első listaelem</li>

  <li>a második listaelem</li>

  <li>a harmadik listaelem</li>
</ol>

A rendezetlen listákhoz hasonlóan a felsorolást mindig le kell zárni a </ol> lezáró tag-gel, de a </li> lezáró tag opcionális, tehát elhagyható.

A harmadik és egyben utolsó felsorolás-típus a definíciós lista. Ez kifejezések és azok definícióinak felsorolását teszi lehetővé számunkra. Ez a felsorolás-típus a <dl> tag-gel kezdődik és a </dl> tag-gel végződik. Minden kifejezés egy <dt> tag-gel, minden definíció egy <dd>-vel kezdődik. Például:

<dl>
  <dt>az első kifejezés</dt>
  <dd>ennek definíciója</dd>

  <dt>a második kifejezés</dt>
  <dd>ennek definíciója</dd>

  <dt>a harmadik kifejezés</dt>
  <dd>ennek definíciója</dd>
</dl>

A lezáró </dt> és </dd> tag-ek opcionálisak, tehát elhagyhatók. Megjegyzendő, hogy a felsorolások egymásba á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 szakaszok és címsorok stb. is használhatók.

További információk

Arra az esetre, ha készen állna arra, hogy még többet tanuljon a HTML-ről, készítettem egy mellékelt anyagot a HTML haladóknak és a stílusok használata című részekben.

A W3C HTML 4.0 ajánlása a HTML szerzői specifikációja, bár ez egy technikai specifikáció. Egy kevésbé technikai információforrás lehet, ha beszerez egyet a sokféle HTML-ről szóló könyv közül, például a "Raggett on HTML 4" címűt, melyet az Addison Wesley adott ki 1998-ban. Az XHTML 1.0 jelenleg egy W3C Ajánlás.

Sok szerencsét és jó írást!

Dave Raggett <dsr@w3.org>