Segédlet a HTML nyelv megismeréséhez

Alapfogalmak:

A HTML dokumentum
Egy egyszerû szövegfájl,
amit bármilyen szövegszerkesztõ programmal meg tudunk nyitni.
Tartalmazhat szöveget, képeket,
hivatkozásokat táblázatokat és sok egyéb összetevõt.
A fájlban található utasításokat a böngészõprogram hajtja végre,
nincs szükség -általában- semmiféle külsõ programra se.

1

Az állományokról
A HTML dokumentumban számos olyan elemet használhatunk,
melyeknél egy másik állományra hivatkozunk
(pl.: Képek, letölthetõ fájlok, stb.), vagyis használjuk azt.
Ilyen esetben mindig meg kell határozni a böngészõ számára,
hogy az adott elem hol található a számítógépen, hiszen
azzal csak így képes dolgozni.
Ezt a mûveletet nevezzük útvonal megadásnak.
Kétfajta útvonal megadásról beszélhetünk:
- Abszolút (Teljes megadás) ;
- Relatív (A merevlemez valamely helyéhez képest adjuk meg)

Abszolút útvonal megadás: A használandó állomány helyét pontosan meghatározzuk úgy,
hogy az adott merevlemez gyökérkönyvtárából indulunk ki
(pl.: "C:\Dokumentumok\Kepek\nyitokep.jpg" , "D:\Web\Letoltesek\jatek.rar" , stb.).
Ezt a megadási módot merevsége miatt inkább kerüljük, ha lehet.

Relatív útvonal megadás: Ennél a megadási módnál ahhoz a webfájlhoz képest
adjuk meg az állomány helyét, amibõl
arra hivatkozunk (pl.: "nyitokep.jpg" ,"Letoltesek\jatek.rar" , stb.).

1

A TAG-ek fogalma
A HTML nyelv úgynevezett TAG-ekbõl (ejtsd:teg) épül fel,
amely a HTML nyelv egy-egy elemére utal.
(Ezek felfoghatók tulajdonképpen utasításoknak is)

-Egyszerû TAG elem: "<"TAG">", vagyis:
"<"+"TAG elem neve"+">" (Például: ,
, stb.)
-Beállítható TAG elem:"<"TAG"+tulajdonságok+">",
ahol a tulajdonságok az adott TAG elemre vonatkozó beállítási lehetõségeket
jelentik.(Például: A TAG,
amivel formázott szöveget készíthetünk.)

Többségében olyan TAG elemekkel találkozhatunk,
amik rendelkeznek nyitó és záró elemmel is,
és a közrefogott szövegen
érvényesül az adott TAG hatása.
Ilyen például a -páros,
ami az egész webfájlunkat fogja közre.
(?: Látható, hogy a záró TAG elem abban különbözik nyitó párjától,
hogy "/" jellel kezdõdik.)
Emellett léteznek olyan elemek is,
melyek nem rendelkeznek záró elemmel.(Ilyen például a
soremelõ TAG)

1

Színek használata
A HTML nyelvben a színértéket kétféleképpen adhatjuk meg:
- Angol megfelelõjével, a Color="szín" formában, ahol a szín értékei a következõk lehetnek:

- Egy hexadecimális (16-os számrendszer-beli) érték segítségével,
melynél saját színeket keverhetünk ki.
Egy szín három alapszínbõl,
a Red- piros, a Green- zöld és a Blue- kék színbõl épül fel.
Mindhárom összetevõ értéke 0-255
között lehet, attól függõen,
hogy az adott színrész milyen mértékben befolyásolja a kikeverendõ színt.
(Pl. Ha Red=255; Green=0, Blue=0 értékeket vesz fel,
akkor a színtiszta piros színt kapjuk értékül.)
A HTML nyelvben az egyes színek értéket
(pl. Red) nem 0-255 alakban kell megadni, hanem e tartomány 16-os számrendszerbeli
megfelelõjét kell venni,
tehát a 00-FF tartományt
(ahol 00- a 0 ,az FF pedig a 255 hexadecimális megfelelõje), így a kapott színérték
egy 6 számjegyû színkód lesz, hiszen három alapszínünk van.

Aranyszabályok, jótanácsok
- A böngészõk nem mutatnak egynél több,
egymás mellett lévõ szóközt (Megoldás)
- Ajánlatos a webdokumentumjaikat mindig ".html" kiterjesztéssel menteni.
(A másik, ".htm" kiterjesztést a régebbi operációs rendszerek
(pl. Microsoft Windows 3.1) használták.)
- Amennnyiben olyan TAG-ot használunk,
amelynél több tulajdonságot állíthatunk be,
akkor az egyes tulajdonságokat szóköz
billentyûvel (SPACE) kell elválasztanunk.(például: Font, Img elemek)
- A HTML nyelvben mindig az a formázási beállítás érvényesül,
ami a legközelebb van a formázandó elemhez.
Tételezzük fel egy példa kedvéért,
hogy egy táblázatnak meghatároztuk a szövegszínét stílus segítségével.
Átmenetileg azonban ezt felülírhatjuk,
ha például egy cellában található szöveget
TAG közé teszünk, vagy
a cella nyitó tagjában (td) hivatkozunk egy másik stílusra
(például: ).

1

Egy HTML oldal felépítése:

Egy webfájlt HTML TAG-el kell kezdeni, így tudatjuk a böngészõvel, hogy a fájl webfájl

Fejléc nyitó TAG

Fejléc záró TAG
Dokumentum törzsének nyitó TAG-je,
ahol néhány dokumentumra vonatkozó beállításokat is megadhatunk.
Dokumentum törzsének záró TAG-je

A webdokumentum végének jelzésére szolgáló záró TAG

A fejlécben megadható fõbb tulajdonságok:

Az a szöveg,
ami a böngészõ ablakának címsorában megjelenik

A dokumentumban használható stílusok létrehozása

A webfájl nyelvének megadása a böngészõ számára

A BODY TAG beállítási lehetõségei

BgColor="színérték" A webfájl háttérszínét határozza meg

BackGround="képfájl" A webfájl háttere nem egy színérték lesz,
hanem a megadott képfájl

Text="színérték" A dokumentum alap szövegszíne.
(? A - TAG-el átmenetileg felülírhatjuk)

Link="színérték" A hivatkozások szövegszíne. (De pl. - II -)

VLink="színérték"
A meglátogatott (már rákattintottunk) hivatkozások szövegszíne. (De pl. -II-)

Link="színérték"
Az éppen kiválasztott hivatkozás szövegszíne. (De pl. - II -)

Megjelenést befolyásoló elemek

Mindre jellemzõ, hogy a begépelt szövegekre fejtik ki hatásukat

Sortörés elhelyezésre.
A
elem után a szöveg a következõ sor elején folytatódik

"szöveg"
A "szöveg" a böngészõben ugyan úgy jelenik meg,
mint a HTML kódban (pl.soremelések,szóközök)

  Törhetetlen szóköz,
egymás mellett több szóköz is látszódni fog böngészõnkben

"abc" Törhetetlen sorok.
A közrezárt sorokat a böngészõ nem törheti meg sortörésekkel (ha túl hosszú)

Elemek igazítása

Nyitó- és záró elemmel is rendekeznek, hatásuk nem csak a írott szövegre,
hanem számos egyéb HTML elemre is kiterjed,
addíg amíg azt egy másik igazítási mód felül nem írja,
vagy a lezáró TAG (

) nem hatástalanítja

HTML elemek: A HTML elemeket balra igazítja

HTML elemek: A HTML elemeket jobbre igazítja

HTML elemek: A HTML elemeket középre igazítja

Ezen kívûl létezik egy soremelés nélküli középre igazítási mód is:

"szöveg"
:
Középre igazítja az elemeket a
TAG hatása nélkül

Szöveg stílusok

Közös jellemzõjük, hogy nyitó és záró elemekkel is rendekeznek,
valamint egymásra épûlõen is használhatjuk õket

"szöveg" : B - Bold) E TAG között a szöveg félkövér stílusú lesz.

"szöveg" : I - Italic) A közrezárt szöveg dõlt lesz.

"szöveg" : U - Underline) A közrezárt szöveg aláhúzott lesz.

"szöveg" : A közrezárt szöveg áthúzott lesz.

Egyszerû szöveg formázó eszközök

"szöveg" Alsó index lesz a közrezárt szöveg.
(Hasznos például képleteknél az indexek jelölésére)

"szöveg" A szöveg felsõ indexként fog látszani( - II - )

(? A TAG-ek utolsó betûjének "hasa" jellemzi az index helyét.
P-Felsõ index; b-alsó index)

"szöveg" Megnagyobbított betûket eredményez

"szöveg" Összenyomott betûket eredményez

"szöveg" Fejléc. A 'szam' értéke 1-6ig lehet,
ahol 1-a legnagyobb, 6-a legkisebb betûnagyság

"szöveg" Villogó szöveg.
Figyelem! Csak Netscape böngészõben mûködik !

A Marquee TAG

elem

Elemmozgatás. Figyelem!Csak Internet Explorerben mûködik jól!

A tulajdonságokat nem közelezõ megadni.
Csak akkor kell, ha a szabványos beállításoktól eltérõ értékeket szeretnénk.)

A mozgatást a következõ tulajdonsággal szabályozhatjuk

Direction : A mozgás irányát határozza meg.

Direction="Left" Jobbról balra mozgás

Direction="Right" Balról jobbra mozgás

Behavior : Itt adhatjuk meg, hogy mi történjen akkor,
amikor elértük a mozgási tartomány szélét

Behavior="Slide" Amint elérte a mozgó szöveg a szélesség értéket,
megáll (Beúszás)

Behavior="Scroll" Amint elérte a mozgó szöveg a szélesség értéket,
újra kezdi a mozgást (Fényújság)

Behavior="Alternate" Amint elérte a mozgó szöveg a szélesség értéket,
irányt vált (Ide-oda mozgás)

ScrollDelay : A mozgási sebességet határozza meg

ScrollDelay="számérték" A számérték egy konkrét szám

ScrollMount : Lépésszám megadása. Azt jelenti,
hogy mekkora egységgel mozgatunk

ScrollMount="számérték" A számérték egy konkrét szám

Width : Azt határozza meg, hogy a mozgás milyen széles tartományban történjék

Width="számérték" Az számérték lehet konkrét szám,
vagy a gazdaterület egy százalékértéke

Height : Megadja, hogy a mozgatás milyen magas tartományban történjék

Height="számérték" Az számérték lehet konkrét szám,
vagy a gazdaterület egy százalékértéke

(?: Az utóbbi két értékbõl kiderül,
hogy a mozgás egy téglalapnak megfelelõ területen megy végbe)

A Font TAG

szöveg Formázott szöveg készítése

A szöveg kinézetét az alábbi tulajdonsággal állíthatjuk be

Face : A betûtípus megadása. Ajánlatos,
hogy ellenõrizzük több böngészõben is, a kinézetét!

Face="betûtípus" A betûtípus egy,
a böngészõ által támogatott típus (Például: 'Arial')

Color : A szöveg színe. Lehet egy szín angol megfelelõje, vagy általunk kikevert érték

Color="szín" A szín 18 alapszín lehet, angolul. A kód pedig egy hexadecimális érték

Size : A betûk mérete. Ha nem adjuk meg, akkor a böngészõ az alap betûnagyságot használja

Size="számérték" Ahol a számérték 1-7 közötti tartományban lehet,
ahol 1 a legkisebb, 7 a legnagyobb méret

Stílusok használata

A stílusokat a webfájl HEAD részében kell megadni.

A 'nev' a stílus neve, amely kétféle típusú lehet:
Egy HTML elemre vonatkozó. például:

(?: Itt a H1-es méretû fejlécre vonatkozó stíluselemeket adhatjuk meg)

Általános. például:

(?: Itt egy olyan stílust adtuk meg,
amire a Class='stilusnev' módon hivatkozhatunk, bármely stílust támogató HTML elemben)

Látható, hogy a beállítandó stílus-tulajdonságokat pontosvesszõvel(;) kell elválasztani egymástól
Az elsõ esetben egy HTML TAG stílusát változtattuk meg úgy, hogy a 'nev'-hez egy TAGnevet írtunk.
A második esetben egy saját, általános célû stílust készítünk, amit bármely olyan HTML elem nyitó TAG-jában elhelyezhetünk,
ahol ennek hatása érvényesülhet. (Pl. ... , ...)
Általános stílus megadása esetén, a stílusnév elé pontot kell elhelyeznünk. (Példánkban: .stilusnev)

Nézzük a megadható stíluselemeket kategóriájuk szerint csoportosítva

Szöveg megadása

text-align : A szöveg víszintes igazítása

text-align:left Balra igazítás

text-align:center Középre igazítás

text-align:right Jobbra igazítás

text-align:justify Sorkizárás Csak Netscape 6, Internet Explorer 6, vagy újjabb böngészõkben

vertical-align A szöveg függõleges igazítása

vertical-align:baseline Alapvonal (Normál magasság)

vertical-align:sub Alapvonal alá

vertical-align:super Alapvonal fölé

vertical-align:top Felüre

vertical-align:middle Középre

vertical-align:bottom Alura

vertical-align:text-top A szöveg tetejéhez

vertical-align:text-bottom A szöveg aljához

text-decoration Vízszintes vonalak elhelyezése a szövegben, illetve villogó szöveg készítése

text-decoration:none Nincs semmi sem. Ez az alapértelmezés

text-decoration:underline Aláhúzott szöveg

text-decoration:overline A szöveg fölé húzott

text-decoration:line-through Áthúzott szöveg

text-decoration:blink Villogó szöveg Csak Netscape 4-es böngészõben használható

text-transform Kis-, és nagybetûk használatát teszi lehetõvé

text-transform:capitalize Az összes szó kezdõbetûjét nagybetûre cseréli

text-transform:uppercase Az összes betût nagybetûsre alakítja

text-transform:lowercase Az összes betût kisbetûsre alakítja

text-indent A bekezdések és más elemek behúzásának mértékét szabályozhatjuk

text-indent:"számérték" A számérték egy konkét szám

letter-spacing A betûk közötti távolságot állíthatjuk

letter-spacing:"számérték" A számérték egy konkét szám

line-height A sor eleje és a következõ sor teteje közti távolság megadása

line-height:"számérték" A számérték egy konkét szám

Betûkészletek megadása

font-family A betûtípus megadása. Ajánlatos, hogy ellenõrizzük több böngészõben is, a kinézetét!

font-family:"betûtípus" Biztosan elérhetõ betûtípusok: 'Serif', 'Sans-serif', 'Cursive', 'Fantasy', 'Monospace'

font-size A betûk méretét határozza meg

font-size:"szám+mértékegység" Lásd a Stílusok mértékegysége résznél

font-style A betûstílus megadása

font-style:normal Normál kinézetû

font-style:italic Dõlt

font-style:oblique Ferde

font-variant Kiskapitális betûk használata

font-variant:normal A kisbetûk a hagyományos módon jelennek meg

font-variant:small-caps A kisbetûk, kisméretû nagybetûkként jelennek meg (kiskapitálisság

font-weight A szöveg vastagságát határozza meg

font-weight:normal Hagyományos megjelenés

font-weight:bold Félkövér beállítás

Színek és háttérképek megadása

color A szövegszín beállítása

color:"szín" Lehet egy szín angol megfelelõje, vagy általunk kikevert érték (A színek)

background-color Az elem hátterének színét határozza meg

background-color:"szín" Lehet egy szín angol megfelelõje, vagy általunk kikevert érték (A színek)

background-image Az elem hátterének kívánt kép megadása

background-image:"elérési út" Az elérési út mutatja meg, hogy hol található a kép a számítógépen

background-repeat Itt adható meg, hogy a háttérkép ismétlõdjön-e (mozaik) vagy sem

background-repeat:"repeat" Ismétlõdik, ha a kép kisebb,
mint az elem hátterének felülete

background-repeat:"repeat-x" Csak vízszintesen ismétlõdik

background-repeat:"repeat-y" Csak függõlegesen ismétlõdik

background-repeat:"no-repeat" Csak egy példányban mutatja a háttérképet,
nem ismétli

background-attachment Itt állíthatjuk be,
hogy a dokumentum görgetésekor a háttérképet is görgessük-e

background-attachment:fixed A háttérkép mozdulatlan marad,
miközben a webdokumentumot görgetjük

background-attachment:scroll A háttérkép a webdokumentummal együtt mozog görgetéskor

background-position A háttérkép helyzetét állíthatjuk be

Margók és keretek
Ezen tulajdonságok a margók, keretek,
valamint a dokumentumban szereplõ elemek magasságát és szélességét állítják be

margin Az dokumentum mind a négy oldalán található margó egyszerre állíthatjuk be

margin:"számérték" A számérték egy konkrét szám

margin-left Az dokumentum bal oldali margóját állítja be

margin-left:"számérték" A számérték egy konkrét szám

margin-right A jobb oldali margót állítja be

margin-right:"számérték" A számérték egy konkrét szám

margin-top A felsõ margót állítja be

margin-top:"számérték" A számérték egy konkrét szám

margin-bottom Az alsó margót állítja be

margin-bottom:"számérték" A számérték egy konkrét szám

width Egy HTML elem (például egy kép) szélességét adja meg

width:"számérték" A számérték egy konkrét szám

float Egy HTML elem szöveggel történõ körbefuttatásának lehetõsége
(például egy képnél)

clear Egy HTML elem szöveggel történõ körbefuttatását
ezzel tudjuk lezárni

Stílusok mértékegysége

pt Pont. A betûkészletek szabványos mértékegysége,
mely a monitorral van összhangban (például: 12pt)

px Képpontnyi méretezést tesz lehetõvé. Hasznos pl. számológépeknél,
ahol ez a legkisebb egység (például: 20px)

% A gazdterület egy százalékértéke (például: 200%)

Megjegyzések elhelyezése a kódban

A "zárójelek" közötti kódot,
a böngészõ figyelmen kívûl hagyja

A böngészõk a elemek közötti rész nem veszik figyelembe.
Ez jól jöhet magyarázó szövegként, vagy éppen
hibakeresésnél, ahol a problémát úgy is megtalálhatjuk,
hogy egy-egy kódrészt átmenetileg "kiszedünk

Hivatkozások használata

HTML elemek A HTML elemre kattintva
egy megadott helyre illetve fájlra ugrunk

A hivatkozás viselkedését befolyásoló tulajdonságok:

Href Megadja, hogy a hivatkozás hova mutat, hova lépünk ha rákattintunk

Href="webcím" A webcím "http://"-el kezdõdik, és egy Internetes oldalra,
vagy fájlra hivatkozik

(Ha a webcím nem egy webdokumentum állomány (pl. jatek.rar),
akkor ez a hivatkozás annak a fájlnak a letöltését eredményezi)

Href="horgonynév" Egy megadott horgonyra ugrik.
(Ha az az aktuális webfájlban van, akkor "#" jellel kezdõdik)

Target Megadja, hogy a böngészõ melyik ablakban nyissa meg ,
a hivatkozott címen található állományt

Target="_self" Abban az ablakban, ahonnan hivatkoztak az állományra

Target="_blank" Egy új ablakban nyitja meg

Target="_parent" A szülõablakban nyitja meg

Képek használata

 Kép elhelyezése a webfájlban, megadott tulajdonságok szerint

A képet az alábbi tulajdonságok határozzák meg:

Src Megadja, hogy hol található a megjelenített kép a merevlemezen

Src="elérési út" Az elérési út lehet abszolút, vagy a befogadó webfájlhoz képest relatív (Az állományokról)

Width A kép szélességét határozza meg

Width="számérték" A számérték egy konkrét szám

Height A kép magasságát határozza meg

Height="számérték" A számérték egy konkrét szám

Border A kép körül keretet lehet kialakítani

Border="számérték" A számérték egy konkrét szám, mely megadja a keret vastagságát

Alt Itt adhatjuk meg, hogy milyen szöveg jelenjen meg az egér mellett, amikor azt a kép fölé húzzuk

Alt="szöveg" Ahol a szöveg a megjelenõ megjegyzés

Usemap Ha a képet képtérképként kívánjuk használni, akkor itt lehet megadni a tulajdonos térkép nevét

Usemap="térképnév" A térképnév a MAP Tag által meghatározott térkép neve

Longdesc Az Src-ben megadott kép letöltéséig egy kisebb méretû (felbontású) képet jeleníthetünk meg

Longdesc="elérési út" Az a kép helye, amit a böngészõ csak ideinglenesen (amíg az Srcben megadott töltõdik) mutat

Táblázatok használata

BackGround Vagy a táblázat hátterének egy képállományt is megadhatunk

BackGround="elérési út" Az állomány elérési útja

(?: Egy táblázatnak vagy csak háttérszínt vagy csak háttérként megadott képállományt adhatunk meg,
mindkettõt nem lehet)

Width A táblázat szélességét határozza meg

Width="számérték" A számérték lehet konkrét, vagy a gazdaterület egy százalékértéke

Height A táblázat magasságát határozza meg

Height="számérték" A számérték lehet konkrét, vagy a gazdaterület egy százalékértéke

Border A táblázat celláinak keretvastagságát határozza meg

Border="számérték" A számérték egy konkrét szám (Pl.: Ha Border="0", akkor nincsenek rácsvonalak)

NoWrap Ez a kapcsoló a a cellák szövegének tördelését tiltja le

CellPadding Meghatározza a cellák tartalma és a cellák kerete közötti távolságot

CellPadding="számérték" A számérték egy konkrét szám

CellSpacing Segítségével a cellák egymástól való távolságát állíthatjuk be

CellSpacing="számérték" A számérték egy konkrét szám

A táblázat sorai:

 
cellák
Új sort a  elem beírásával tudunk kezdeni

Nézzük a táblázat sorait meghatározó tulajdonságokat

Align A sort tartalmazó cellák vízszintes igazítását állíthatjuk be ezzel

Align="Left" A cellaelemeket balra igazítja

Align="Center" A cellaelemeket középre igazítja

Align="Right" A cellaelemeket jobbra igazítja

vAlign A sort tartalmazó cellák függõleges igazítását állíthatjuk be ezzel

vAlign="Top" A cellaelemeket a cella tetejéhez igazítja

vAlign="Center" A cellaelemeket függõlegesen középre igazítja

vAlign="Bottom" A cellaelemeket a cella aljához igazítja

(?: Mindkét igazítási módot együttesen is használhatjuk)

A táblázat cellái:

 HTML elem Új cellát a  elem beírásával nyithatunk

Következzenek a cella tulajdonságok:

Align , vAlign Az igazítási módok ugyanazok, mint a sornál megismertek

Rowspan Sorok egyesítése

Rowspan="számérték" Az aktuális sortól a számértékben megadott sort nyit egybe

Colspan Cellák egyesítése

Colspan="számérték" Az aktuális cellától a számértékben megadott cellát nyit egybe