www.w3c.hu Open in urlscan Pro
193.6.200.94  Public Scan

Form analysis
0 forms found in the DOM

Text Content

BEVEZETÉS A HTML-BE - HTML ALAPOK


Az eredeti dokumentum: Getting started with HTML
http://www.w3.org/MarkUp/Guide/ A lefordított dokumentum:
www.w3c.hu/forditasok/sikos/bevezet/start.htm) Magyar fordítás (Hungarian
translation): Dr. Sikos László (leslie [kukac] lesliesikos [pont] com)
A fordítás státusa: A W3C dokumentum fordítása a Szerző, Dave Raggett írásbeli
engedélyével, a fordításokra előírt formai szabályok szerint, lelkiismeretes
szakfordítói munkával készült. Ennek ellenére nem lehet kizárni, hogy hibák
maradtak a fordításban. Emellett a magyar fordítás nem is követi feltétlenül az
eredeti angol nyelvű dokumentumon végrehajtott jövőbeli változtatásokat. Ezért a
fordítás nem tekinthető normatív W3C dokumentumnak. Megjegyzések a fordításhoz:
1.) A fordítással kapcsolatos olvasói észrevételeket a fordító e-mail címére
továbbíthatja.
2.) A fordító a saját megjegyzéseit feltűnően elkülöníti a dokumentum
szövegében.
3.) A fordítás során az eredeti dokumentum forráskódja nem lett megváltoztatva.


HTML haladóknak | Stílusok használata


  BEVEZETÉS A HTML-BE

Dave 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

 * címet adni a dokumentumoknak
 * címsorokat és bekezdéseket megadni
 * szövegrészeket hangsúlyozni
 * képeket elhelyezni a dokumentumokban
 * más oldalakra mutató hivatkozásokat megadni
 * különböző típusú listákat készíteni

Ha nem ezekre kíváncsi, tekintse meg a HTML haladóknak c. 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 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.


CÍMSOROK ÉS BEKEZDÉSEK MEGADÁSA

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 KIS KIEMELÉS

Egy vagy több szavat is kiemelhetünk az <em> taggel, 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 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.


MÁS OLDALAKRA TÖRTÉNŐ HIVATKOZÁSOK

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.


HÁROMFÉLE LISTA

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.


A HTML DOKUMENTUMOKNAK EGY FEJRÉSZE ÉS EGY SZÖVEGTÖRZSE VAN

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 FORRÁSKÓD "TISZTÍTÁSA"

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.


TOVÁBBI INFORMÁCIÓ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!

Dave Raggett <dsr@w3.org>

Copyright © 1994-2003 W3C® (MIT, ERCIM, Keio), Minden jog fenntartva. A
dokumentumra a W3C jogi, védjegy-, dokumentum-használati és szoftver-lincensz
szabályai érvényesek. Az oldallal kapcsolatos tevékenységeire a our publikus és
a tagokra előírt adatvédelmi nyilatkozatok vonatkoznak.