2. 1. Alap c鱈mk辿k
Egy HTML dokumentum egy k旦z旦ns辿ges sz旦veges 叩llom叩ny. Egy egyszer撤 sz旦vegszerkesztvel
p辿ld叩ul jegyzett旦mbbel is l辿trehozhat坦. Minden HTML dokumentumot egy olyan sorral kezd端nk ami le鱈rja a milyen dokumentumot
hozunk l辿tre. Ezt sort dokumentum t鱈pus defin鱈ci坦nak nevezz端k. Egy tipikus dokumentum t鱈pus defin鱈ci坦 鱈gy n辿z ki:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN> Az egyek kifejez辿sek jelent辿se:
Kifejez辿s Jelent辿s
!DOCTYPE Egy dokumentumt鱈pus defin鱈ci坦 k旦vetkezik
HTML Ez egy HTML t鱈pus炭 dokumentum
PUBLIC A dokumentum ny鱈lt
-//W3C//DTD A W3C sz旦vets辿g 叩ltal kiadott HTML verzi坦t haszn叩lunk
HTML 4.01 HTML verzi坦t haszn叩lunk, azon bel端l 4.01 verzi坦t
Transitional Az elavult c鱈mk辿ket is szeretn辿nk haszn叩lni
//EN A c鱈mk辿k az angol 叩b辿c辿 bet撤k辿szlet辿bl ker端lnek ki
A dokumentumt鱈pus defin鱈ci坦 mondja meg a b旦ng辿sznek, hogy a HTML-nek melyik verzi坦j叩t
fogjuk haszn叩lni. Ez biztos鱈tja sz叩munkra, hogy a k端l旦nb旦z gy叩rtm叩ny炭 辿s verzi坦j炭 b旦ng辿szkben a weblapunk l叩tv叩nya
min辿l ink叩bb hasonl坦 legyen. A t鱈pusdefin鱈ci坦 ut叩n k旦vetkezik a dokumentum tartalma.
A webes dokumentum tartalm叩t egy <html> c鱈mk辿vel kezdj端k 辿s egy </html> c鱈mk辿vel z叩rjuk. A
tartalmi r辿szt k辿t r辿szre osztjuk:
fejr辿sz (angolul: head)
t旦rzs (angolul: body)
A dokumentum fejr辿sz辿t a <html> c鱈mk辿ken bel端l <head> 辿s a lez叩r坦 </head> c鱈mk辿k k旦zz辿
tessz端k. A dokumentum t旦rzs辿t a <html> c鱈mk辿ken bel端l a <head></head> c鱈mk辿k ut叩n k旦vetkeznek, amit a <body> kezd 辿s a </body>
lez叩r坦 c鱈mk辿k k旦zz辿 tessz端k. Ezek ut叩n egy HTML dokumentum v叩za 鱈gy n辿z ki:
3. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
</head>
<body>
<body>
2. A weblap k坦dol叩sa
Ahhoz, hogy a weblapunk a b旦ng辿szkben karakterhelyesen jelenjenek meg meg kell adnunk,
hogy annak </html>
szerkeszt辿sekor milyen karakterk坦dol叩st haszn叩ltunk. A Windows XP
alap辿rtelmezetten (magyar nyelv撤 ) ISO-8859-2 karakterk坦dol叩s haszn叩lja.
Ha Jegyzett旦mbben, ment辿skor ezt ANSI k坦dol叩sk辿nt l叩tjuk viszont. A Jegyzett旦mbben azonban be叩ll鱈that坦 az Unicode karakter k辿szlet is,
amely m叩r a vil叩g 旦sszes nyelv辿nek jelk辿szlet辿t egyetlen k坦dol叩ssal k辿pes megjelen鱈teni.
Az Unicode k坦dol叩snak t旦bb megval坦s鱈t叩sa van, elterjedt egyike az UTF-8. Sz旦veg 辿s HTML szerkesztkben az Unicode-ot ebben a
form叩ban tal叩ljuk meg. A kor叩bbi ANSI eset辿n minden nyelvter端leten k端l旦n k坦dol叩st kellett be叩ll鱈tani.
Ha Jegyzett旦mb旦t haszn叩lunk, ment辿skor alap辿rtelmezetten az ANSI k鱈n叩lja fel vagyis a HTML dokumentumunk ISO-8859-2 k坦dol叩s炭 lesz.
Ha ment辿skor UTF-8 k坦dol叩st v叩lasztjuk a HTML dokumentumban 辿rtelemszer撤en az UTF-8 k坦dol叩st kell megadni. A k旦vetkez sorok k辿t
ilyen lehets辿ges p辿ld叩t mutatnak:
<meta http-equiv=Content-type Content=text/html; cahrset=iso-8859-2>
<meta http-equiv=Content-type Content=text/html; cahrset=UTF-8>
A meta c鱈mk辿ket a head c鱈mk辿k k旦zz辿 kell elhelyezni. A meta c鱈mk辿k http-equiv 辿s Content
tulajdons叩g叩val adjuk meg a lap k坦dol叩s叩t. A text/html annyit jelent, hogy egy szemmel is j坦l olvashat坦 html dokumentumot 叩ll鱈tunk el. A
karakterk坦dol叩shoz szorosan nem kapcsol坦dik a title c鱈mek: <title> ...</title>, de a meta c鱈mk辿k altt szok叩s megadni. A title c鱈mk辿k k旦zz辿
鱈rt sz旦veg a b旦ng辿szk c鱈msor叩ban jelenik meg, az oldal c鱈m辿t szok叩s ide 鱈rni.
4. A HTML v叩zunk ezek ut叩n 鱈gy fog kin辿zni:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<title>Az oldal c鱈me</title>
<meta http-equiv=Content-type Content=text/html; cahrset=iso-8859-2>
</head>
<body>
Tartalom
</body>
</html>
Vegy端k 辿szre, hogy a meta c鱈mk辿nek nincs lez叩r坦 r辿sze. A HTML verzi坦k ezt megengedik az
XHTML verzi坦k azonban nem. Az XHTML-ben egy a c鱈mke v辿gre egy perjelet kell tenni:
3. A weboldal fejezetei, c鱈mei
A weblapunk c鱈m辿t h1, h2, h3, h4, h5 vagy h6 c鱈mk辿k k旦zz辿 helyezz端k. P辿ld叩ul ha weboldalunk
c鱈me a P叩rduc akkor 鱈gy n辿zhet ki:
A h1 h6 c鱈mk辿k k旦z旦tt a k端l旦nbs辿g a bet撤k nagys叩g叩ban van. Legnagyobb bet撤t a h1 c鱈mke
produk叩lja, 鱈gy ezt szoktuk haszn叩lni az oldal c鱈m辿nek megad叩s叩ra. Ennek megfelelen a k旦vetkez alc鱈mek, p辿ld叩ul Sz鱈nv叩ltozatok,
T叩pl叩l辿k, Alfajok h2-es c鱈mk辿k k旦zz辿 ker端l:
<meta http-equiv=Content-type Content=text/html; cahrset=iso-8859-2/>
<h2>Sz鱈nv叩ltozatok</h2>
<h2>T叩pl叩l辿k</h2>
<h2>Alfajok</h2>
A h ut叩n megadott sz叩mmal teh叩t a fejezetszintet is
megadjuk. A h6 adja a legkisebb bet撤m辿retet. A h az angol head sz坦b坦l
sz叩rmazik, amely magyarul fejnek vagy fejezetnek ford鱈that坦. gy is
mondjuk fejezetc鱈mnek adunk meg valamit. A p辿ld叩ban a P叩rduc egyes
fejezetc鱈m. A Sz鱈nv叩ltozatok, T叩pl叩l辿k 辿s az Alfajok kettes fejezetc鱈m.
Ezek ut叩n a body c鱈mk辿k k旦z旦tti r辿sz 鱈gy fog kin辿zni:
1. 叩bra: Fejezetc鱈mek
<h1>P叩rduc</h1>
<h2>Sz鱈nv叩ltozatok</h2>
<h2>T叩pl叩l辿k</h2>
<h2>Alfajok</h2>
<h1>P叩rduc</h1>
5. 4. Bekezd辿s, sort旦r辿s
Ha a weblap csak fejezetc鱈mekbl 叩ll m辿g mindig nincs tartalom. A tartalmat az egyes fejezetc鱈mek
ut叩n adjuk meg egy vagy t旦bb bekezd辿sben. Egy bekezd辿st a p c鱈mk辿k k旦zz辿 helyez端nk
P辿ld叩ul a p叩rduc t叩pl叩lkoz叩s叩r坦l sz坦l坦 fejezet 鱈gy n辿zhet ki:
el.
<h2>T叩pl叩lkoz叩s</h2>
<p>
A leop叩rd t旦bbf辿le
叩llatot elejt.
Valamilyen magas
helyrl figyeli
叩ldozatit, azt叩n oda
lopakodik, majd
hirtelen ugr叩ssal
t叩mad.
</p>
Ha t旦bb bekezd辿st is k辿sz鱈t端nk az 炭jabb bekezd辿sek 炭j sorban fognak kezddni.
<h2>T叩pl叩lkoz叩s</h2>
<p>
A leop叩rd t旦bbf辿le 叩llatot elejt. Valamilyen magas helyrl figyeli 叩ldozatit,
azt叩n oda lopakodik, majd hirtelen ugr叩ssal t叩mad.
</p>
<p>
Emberlakta ter端leteken
sajnos a h叩zi 叩llatokat
is megt叩madja.
</p>
A p az angol paragraph sz坦b坦l sz叩rmazik, amelyet paragrafusnak vagy bekezd辿snek
ford鱈thatunk.
A sort旦r辿seket hozhatunk l辿tre a br c鱈mk辿kkel. A br c鱈mk辿nek nincs lez叩r坦 r辿sze, hiszen a sort旦r辿sen nincs mit lez叩rni. Az
XHTML pedig megk旦veteli a c鱈mk辿k lez叩r叩s叩t, mit tesz端nk ilyenkor? XHTML eset辿n a <br /> vagy <br/> alakot haszn叩ljuk (Kett
k旦z旦tt k端l旦nbs辿g egy sz坦k旦z). HTML-ben viszont egyszer撤en: <br> Ha t旦bb br c鱈mk辿t haszn叩lunk egym叩s ut叩n, akkor 端res sorokat
tudunk
l辿trehozni.
2. 叩bra: Bekezd辿sek
6. 5. Az oldal sz鱈nei
A HTML-ben a sz鱈neket az 炭gynevezett RGB k坦dol叩ssal adjuk meg. Az RGB az angol Red,
Green 辿s Blue szavak kezdbet撤i, jelent辿s端k piros, z旦ld 辿s k辿k. E h叩rom sz鱈n kever辿s辿bl 叩ll鱈tjuk 旦ssze a megjelen鱈tend sz鱈nt. A piros, z旦ld
vagy k辿k sz鱈n mennyis辿g辿t egy hexadecim叩lis sz叩mmal adjuk meg. A hexadecim叩lis sz叩m hat jegy撤 辿s egy # karakter vezeti be.
P辿ld叩ul: #32fcca. Az els k辿t sz叩mjegy a v旦r旦s, a k旦vetkez k辿t sz叩mjegy a z旦ld 辿s az utols坦 k辿sz sz叩mjegy a k辿k mennyis辿g辿t hat叩rozza
meg. Tiszta piros sz鱈t 叩ll鱈thatunk el p辿ld叩ul a k旦vetkez k坦ddal: #ff0000. A z旦ld sz鱈n: #00ff00. K辿k sz鱈n: #0000ff. Ha k辿k 辿s piros sz鱈n
旦sszekeverj端k valamilyen lil叩s sz鱈nt kapunk: #ff00ff. Minden sz鱈nt hasonl坦an 叩ll鱈tunk 旦ssze.
L辿teznek olyan sz鱈nek, amelyeket az angol nev端kkel adhatunk meg. Ezt a HTML 4/VGA (16 sz鱈n)
nev撤 szabv叩ny adja meg.
3. 叩bra: Sz鱈nek nevei
Ezen fel端l m撤k旦dhetnek m叩s angol sz鱈nnevek is, azonban nem lehet端nk biztosak abban, hogy
minden b旦ng辿sz ismeri. T旦bb program is seg鱈t sz叩munkra, olyan sz鱈nek kiv叩laszt叩s叩ban amelyek nem adhat坦k meg angol neveikkel. Ilyen
p辿ld叩ul a GIMP. Ha CSS-el dolgozunk a nev端kkel megadhat坦 sz鱈nek sz叩ma 140.
Egy weboldal h叩tt辿rsz鱈n辿t a body c鱈mke bgcolor tulajdons叩g叩val 叩ll鱈tjuk. P辿ld叩ul a silver sz鱈n be叩ll鱈t叩sa:
<body bgcolor=silver>
vagy RGB k坦ddal megadva:
<body bgcolor=#c0c0c0>
A weboldal sz旦veg辿nek a sz鱈n辿t szint辿n a body c鱈mke egy tulajdons叩ga adja, ez a text tulajdons叩g.
A sz旦veg sz鱈n辿t navy sz鱈nre szeretn辿nk 叩ll鱈tani:
7. vagy
<body text=navy>
<body text=#000080>
Egyszerre persze t旦bb tulajdons叩g is megadhat坦:
vagy
<body text=navy bgcolor=silver>
<body text=#000080 bgcolor=#c0c0c0>
4. 叩bra: Az oldal 辿s a sz旦veg sz鱈ne
6. A sz旦veg 旦n叩ll坦 form叩z叩sa
A body c鱈mk辿ben az eg辿sz oldalra vonatkoz坦 form叩z叩st tudjuk megadni. Elfordul azonban,
hogy egyes sz旦vegr辿szeknek m叩s sz鱈nt szeretn辿nk. Esetleg az alap辿rtelmezett nagys叩gon is
szeretn辿nk v叩ltoztatni. Erre szolg叩l a <font> c鱈mke. A <font> c鱈mk辿nek van lez叩r坦 r辿sze is: </font>. A <font> 辿s a </font> c鱈mk辿k k旦zz辿
azokat a sz旦vegeket tessz端k, amelynek szeretn辿nk megv叩ltoztatni a sz鱈n辿t, m辿ret辿t, stb. A p辿lda kedv辿辿rt vegy端k a k旦vetkez sz旦veget:
Ezek a h鱈m sz叩rnyas, nst辿ny sz叩rnyas 辿s sz叩rnyatlan munk叩s.
A fenti sz旦veget az oldalon fekete sz鱈nnel jelen鱈tj端k meg:
<body text=#000000>
A sz旦vegben a sz叩rnyatlan sz坦t szeretn辿nk kiemelni s旦t辿tk辿k sz鱈nnel. Ehhez a <font> c鱈mk辿t
haszn叩ljuk a color tulajdons叩ggal. A fentiek t端kr辿ben a HTML k坦dr辿sz 鱈gy n辿zhet ki:
<body text=#000000>
...
Ezek a h鱈m sz叩rnyas, nst辿ny sz叩rnyas 辿s
<font color=#000080> sz叩rnyatlan</font> munk叩s.
5. 叩bra: Egyedileg sz鱈nezett sz旦veg
8. Ha m辿g a sz旦veg nagys叩g叩t is szeretn辿nk megv叩ltoztatni akkor size tulajdons叩got haszn叩ljuk:
<body text=#000000>
...
Ezek a h鱈m sz叩rnyas, nst辿ny sz叩rnyas 辿s
<font color=#000080 size=5> sz叩rnyatlan</font> munk叩s.
A sz旦veg m辿ret辿t 1-tl 7-ig 叩ll鱈thatjuk. A legkisebb m辿retet a size tulajdons叩g 1-es 辿rt辿ke
szolg叩ltatja, a legnagyobbat a 7-es 辿rt辿k.
6. 叩bra: Bet撤 nagys叩ga
A weboldal alapesetben a b旦ng辿szben be叩ll鱈tott 辿s az oper叩ci坦s rendszerben rendelkez辿sre 叩ll坦
fontk辿szlettel jelen鱈ti meg a sz旦veget. Ha haszn叩ljuk a face tulajdons叩got akkor figyelemmel kell len端nk arra, hogy a weblapot olvas坦
felhaszn叩l坦 oper叩ci坦s rendszer辿n milyen bet撤t鱈pusok 叩llnak rendelkez辿sre.
A k辿t legn辿pszer撤bb oper叩ci坦s rendszeren ez 叩ltal叩ban m叩s. A face tulajdons叩g viszont megenged mag叩nak t旦bb 辿rt辿ket is, amit vesszvel
elv叩lasztva 叩ll鱈thatunk be. Egy ilyen be叩ll鱈t叩s 鱈gy n辿zhet ki:
A sans, serif 辿s mono nem konkr辿t bet撤t鱈pusok, de nem minden b旦ng辿sz ismeri.
sans talpatlan
serif talpas
mono 鱈r坦g辿p
<font face=Ariel, Veranda, Sans, FreeSans, Helvetica>
Sz旦veg
</font>
9. 7. 叩bra: Font csal叩dok
Ha r坦g辿p bet撤t鱈pus szeretn辿nk Linuxos rendszerek sz叩m叩ra el辿gs辿ges lehet a Mono be叩ll鱈t叩sa. Windowsos rendszereken a Courier
ugyan 鱈r坦g辿p bet撤t鱈pus, viszont nagyon pixeles. Ez辿rt haszn叩ljuk helyette a Courier New be叩ll鱈t叩st. A font c鱈mk辿t csak a HTML
Transitonal verzi坦j叩ban haszn叩lhatjuk. A W3C sz旦vets辿g nem elavultnak 鱈t辿li, 辿s azt mondja haszn叩ljuk helyette a HTML Strict verzi坦j叩t,
ahol CSS-el form叩zzuk meg a sz旦veg eg辿sz辿t vagy r辿szeit.
7. Bet撤k st鱈lusa, hat叩sok
A sz旦vegeket k端l旦nf辿le st鱈lusban form叩zhatjuk. Ilyen st鱈lus a bet撤k kiss辿 vastagabb 鱈r叩sm坦dja,
amelynek elterjedt neve f辿lk旦v辿r, angolul bold. A m叩sik ilyen st鱈lusbeli 叩talak鱈t叩s a bet撤k dlt 鱈r叩sm坦dja, angolul italian. Ezt szokt叩k
kurz鱈v n辿ven is emlegetni. Megjegyzend, hogy a nyomtatott bet撤kkel foglalkoz坦 tudom叩ny, a tipogr叩fia megk端l旦nb旦zteti a dlt 辿s a kurz鱈v
hat叩st. Ut坦bbihoz formai v叩ltoz叩s is tartozik. Lehets辿ges bet撤hat叩sok m辿g az al叩h炭zott, az 叩th炭zott 辿s az 鱈r坦g辿p t鱈pus. Az 鱈r坦g辿p
st鱈lus alatt itt fleg arra kell gondolnunk, hogy a minden bet撤 sz辿less辿ge egyenl. A HTML nyelvvel ellent辿tben a sz旦vegszerkesztk
叩ltal叩ban ezt csak a megfelel bet撤t鱈pus kiv叩laszt叩s叩val teszik lehetv辿.
Tov叩bbi lehets辿ges hat叩s a bet撤k nagyobb叩 vagy kisebb辿 t辿tele, a fels 辿s als坦 indexes 鱈r叩sm坦d. A k旦vetkez t叩bl叩zat azt mutatja be,
melyik hat叩shoz milyen HTML c鱈mk辿t kell haszn叩lnunk.
Hat叩s C鱈mke alkalmaz叩sa Angol eredete Eredm辿ny
F辿lk旦v辿r <b>sz旦veg</b> Bold sz旦veg
Dlt <i>sz旦veg</i> Italian sz旦veg
Al叩h炭zott <u>sz旦veg</u> Underline sz旦veg
r坦g辿p <tt>sz旦veg</tt> TeleType sz旦veg
th炭zott <strike>sz旦veg</strike> STRIKE through sz旦veg
Nagyobb <big>sz旦veg</big> BIG sz旦veg
Kisebb <small>sz旦veg</small> SMALL sz旦veg
Fels index sz旦veg1<sup>sz旦veg2</sup> SUPerscript sz旦veg1sz旦veg2 Als坦 index sz旦veg1<sub>sz旦veg2</sub> SUBscript sz旦veg1sz旦veg2
10. A k端l旦nb旦z hat叩sok persze vegyesen is alkalmazhat坦k, azaz egym叩sba 叩gyazhat坦k. P辿ld叩ul az
alma sz坦t ha egyszerre f辿lk旦v辿r 辿s dlt hat叩st is elszeretn辿nk 辿rni:
<b><i>alma</i></b>
A p辿ld叩ban a b c鱈mk辿t k鱈v端lre tett端k. Ez meg is cser辿lhetj端k:
<i><b>alma</b></i>
Az egym叩sba 叩gyaz叩s sor叩n viszont nem keverj端k nyit坦 辿s z叩r坦 c鱈mk辿k sorrendj辿t! Ha az i nyit坦
c鱈mke volt elbb, akkor ez legyen az i z叩r坦 legyen a v辿g辿n. Helytelen p辿ld叩ul a k旦vetkez:
<b><i>alma</b></i>
Az XHTML nyelvtan叩ban ez egyenesen megengedhetetlen. A b旦ng辿sz gy叩rt坦k persze
megengedhetik a helytelen haszn叩latot, de ragaszkodjunk a szabv叩nyhoz a k端l旦nb旦z b旦ng辿szk min辿l egys辿gesebb megjelen鱈t辿se miatt.
K旦vetkez p辿ld叩ban n辿gy az 旦t旦dik hatv叩nyon kifejez辿st szeretn辿nk le鱈rni sz叩mokkal, nagyobb bet撤kkel, a kitev dlt hat叩s炭 鱈r叩sm坦dja
mellett:
<big>4<sup><i>5</i></sup></big>
Az eredm辿ny ehhez hasonl坦:
45
8. Igaz鱈t叩s
A sz旦veget n辿gyf辿le k辿pen igaz鱈thatjuk, balra, k旦z辿pre,
jobbra 辿s sorkiz叩rhatjuk. Alap辿rtelmezetten a
sz旦vegszerkesztkh旦z hasonl坦an a b旦ng辿szk a sz旦veget
balra igaz鱈tj叩k. A HTML t旦bbf辿le lehets辿get biztos鱈t a
sz旦vegek igaz鱈t叩s叩ra. Konkr辿t html c鱈mk辿t azonban csak
a k旦z辿pre <center>igaz鱈t叩shoz Alma</tartalmaz, center>
a jobbra igaz鱈t叩st
tulajdons叩gok megad叩s叩val 辿rhetj端k el. K旦z辿pre z叩r叩s a
center c鱈mk辿vel 辿rhet el. Ha p辿ld叩ul az Alma sz坦t
k旦z辿pre szeretn辿nk igaz鱈tani, akkor 鱈gy tehetj端k meg:
A center c鱈mk辿nek van mint l叩tjuk van lez叩r坦 r辿sze is. A c鱈mke azonban az elavult kateg坦ri叩ba
tartozik, mint a font c鱈mke, vagyis haszn叩lat叩t nem aj叩nlj叩k. Az egyes bekezd辿sek igaz鱈t叩sa a p
c鱈mke align tulajdons叩g叩val is meghat叩rozhat坦.
Adott p辿ld叩ul a k旦vetkez bekezd辿s:
Speci叩lis fel辿p鱈t辿s撤 t端dej端knek k旦sz旦nheten fejlett, hat辿kony ketts l辿gzrendszer端k van. A ketts l辿gycsere l辿nyege, hogy nem csak
bel辿gz辿skor t旦rt辿nik g叩zcsere, hanem kil辿gz辿skor is. A hangk辿pz辿s nem a g辿g辿ben, hanem a h旦rgkben t旦rt辿nik, ez叩ltal 辿nekl辿s k旦zben is
tudnak levegt venni.
11. A p c鱈mk辿k k旦z旦tt jobbra igaz鱈t叩s a HTML forr叩sba 鱈gy n辿z ki:
<p align=right>
Speci叩lis fel辿p鱈t辿s撤 t端dej端knek k旦sz旦nheten fejlett,
hat辿kony ketts l辿gzrendszer端k van. A ketts l辿gycsere
l辿nyege, hogy nem csak bel辿gz辿skor t旦rt辿nik g叩zcsere,
hanem kil辿gz辿skor is. A hangk辿pz辿s nem a g辿g辿ben, hanem
a h旦rgkben t旦rt辿nik, ez叩ltal 辿nekl辿s k旦zben is tudnak
levegt venni.
Az align tulajdons叩gnak n辿gy 辿rt辿ke lehet:
</p>
left
right
center
justify
A balra, jobbra 辿s k旦z辿pre igaz鱈t叩s az angol szavak ut叩n egy辿rtelm撤 lehet. A left a balra igaz鱈t叩s,
a, right a jobbra igaz鱈t叩s, a center a k旦z辿pre igaz鱈t叩s 辿s a justify 辿rt辿k val坦 a sorkiz叩r叩sra. A
sorkiz叩r叩s alatt 辿rtj端k a sz旦veg mind a k辿t oldali egyenesre igaz鱈t叩s叩t.
A fenti bekezd辿s sorkiz叩r叩sa:
<p align=justify>
Speci叩lis fel辿p鱈t辿s撤 t端dej端knek k旦sz旦nheten fejlett,
hat辿kony ketts l辿gzrendszer端k van. A ketts
l辿gycsere l辿nyege, hogy nem csak bel辿gz辿skor
t旦rt辿nik g叩zcsere, hanem kil辿gz辿skor is. A
hangk辿pz辿s nem a g辿g辿ben, hanem a h旦rgkben
t旦rt辿nik, ez叩ltal 辿nekl辿s k旦zben is tudnak levegt
venni.
</p>
9. H叩tt辿rk辿p 辿s k辿pek beilleszt辿se
Term辿szetes ig辿ny a dokumentumokban k辿pek elhelyez辿se. Ez 叩ltal叩ban vagy h叩tt辿rk辿pnek a
sz旦veg m旦g辿 tessz端k, vagy a sz旦veg mell辿 illesztj端k be.
H叩tt辿rk辿pk辿nt val坦 beilleszt辿sn辿l az oldal tartalma k旦r端l mindenhol megjelenik. Ha egy k辿pet
h叩tt辿rk辿pnek illeszt端nk be 辿s az nem t旦lti ki az eg辿sz b旦ng辿szt, akkor csempeszer撤en
ism辿tldik. A h叩tt辿rk辿p beilleszt辿se a body c鱈mke 辿s a background tulajdons叩g seg鱈ts辿g辿vel
lehets辿ges. A
background 辿rt辿ke egy k辿p 炭tvonallal egy端tt. A k辿p 炭tvonala nem k旦telez, 辿s nem is szoktuk megadni, ha az a HTML 叩llom叩nnyal
egyez k旦nyvt叩rban van.
A beillesztett <body k辿peket background=mindig hetter.mell辿keln端nk jpg>
kell a HTML 叩llom叩ny mell辿, mivel azok sosem 辿p端lnek be mag叩ba a html 叩llom叩nyba. A
html 叩llom叩nyban csak hivatkozunk r叩. Ha adott p辿ld叩ul a hatter.jpg nev撤 k辿pf叩jl, azt a k旦vetkez m坦don illeszthetj端k be h叩tt辿rnek:
12. 叩bra 8: H叩tt辿rk辿p csempeszer撤en
A h叩tt辿rk辿pek beilleszt辿s辿n辿l 端gyelj端nk arra, hogy a sz旦veg sz鱈n辿tl jelentsen elt辿rjenek a k辿pe sz鱈nei, m叩sk辿nt az sz旦veg olvashatatlan
lesz. Megjegyz辿s: CSS seg鱈ts辿g辿vel enn辿l finomabb form叩z叩si lehets辿gek is rendelkez辿s端nkre 叩llnak.
A h叩tt辿rk辿p mellett a sz旦vegbe is 叩gyazhatunk k辿peket az img c鱈mke seg鱈ts辿g辿vel, amely az angol image sz坦b坦l sz叩rmazik.
M撤k旦d辿shez egy, szabv叩ny betart叩s叩hoz minimum k辿t tulajdons叩got kell megadni. Az egyik az src, ami az angol source sz坦b坦l
sz叩rmazik. Itt adjuk meg a k辿p nev辿t 辿s 炭tvonal叩t, teh叩t n辿lk端l旦zhetetlen. A m叩sik tulajdons叩g az alt c鱈mke, az angol
alternate sz坦b坦l. Itt a k辿p tartalm叩nak sz旦veges le鱈r叩s叩t adjuk meg, aminek akkor van jelents辿ge, ha a b旦ng辿szben nem jelenik
meg a k辿p. A k辿p helyett alternat鱈vak辿nt a sz旦veg jelenik meg. A k辿p t旦bb okn叩l foga nem jelenhet meg: nincs meg a k辿p, ki van kapcsolva
a b旦ng辿szben vagy a b旦ng辿sz karakteres. Egy paprika.jpg nev撤 k辿p beilleszt辿se a k旦vetkez m坦don tehet meg:
A k辿p sz旦vegbe 叩gyaz叩sa eset辿n a paprik叩r坦l sz坦l坦 HTML 叩llom叩nyunk t旦rzs r辿sze 鱈gy n辿zhet ki:
<h1>Paprika</h1>
A ma termesztett paprik叩k messze 叩llnak a vadpaprik叩t坦l. A nemes鱈tk azonban ma is felhaszn叩lj叩k a vadpaprik叩t
alapanyagk辿nt. <img src=/slideshow/html-szerkesztes-gyakorlat/38462634/"paprika.jpg" alt="paprika"> Meleg ig辿nyess辿ge miatt termeszt辿se Magyarorsz叩gonak
csak a d辿li r辿sz辿n ide叩lis. A fagyra nagyon 辿rz辿keny, ez辿rt az els hidegek megjelen辿sekor fagy叩si s辿r端l辿seket
szenvedhet. A sz叩razs叩got igen j坦l t撤ri.
叩bra 9: Paprika a sz旦vegben
<img src=paprika.jpg alt=paprika>
13. A paprika a sz旦vegben nem a legide叩lisabb. A sz旦veg nem folyik k旦rbe. Az img c鱈mke align
tulajdons叩g叩val megadhatjuk a sz旦veg igaz鱈t叩s叩t balra vagy jobbra a left vagy a right 辿rt辿kkel. A tulajdons叩g haszn叩lata eset辿n a sz旦veg
k旦rbefolyik a k辿p k旦r端l. A p辿ld叩ban a parprika.jpg k辿pet igaz鱈tsuk balra, hogy a sz旦veg jobbr坦l k旦rbe folyjon.
<h1>Paprika</h1>
A ma termesztett paprik叩k messze 叩llnak a vadpaprik叩t坦l. A nemes鱈tk azonban ma is felhaszn叩lj叩k a vadpaprik叩t
alapanyagk辿nt. <img src=/slideshow/html-szerkesztes-gyakorlat/38462634/"paprika.jpg" alt="paprika" align=left> Meleg ig辿nyess辿ge miatt termeszt辿se
Magyarorsz叩gonak csak a d辿li r辿sz辿n ide叩lis. A fagyra nagyon 辿rz辿keny, ez辿rt az els hidegek megjelen辿sekor
fagy叩si s辿r端l辿seket szenvedhet. A sz叩razs叩got igen j坦l t撤ri.
叩bra 10: A k辿p k旦rbefolyat叩sa
A rendelkez辿sre 叩ll坦 k辿p
megjelen鱈t辿si m辿rete megv叩ltoztathat坦 az img c鱈mke width 辿s height tulajdons叩g叩val. A
width tulajdons叩ggal a k辿p sz辿less辿g辿t, a height tulajdons叩ggal annak magass叩g叩t 叩ll鱈thatjuk be. A k辿p eredeti m辿ret辿nek
megv叩ltoztat叩sakor vigy叩znunk kell az ar叩nyokra. Ha ar叩nytalanul m辿retezz端k 叩t a k辿pet az torzulni fog. A nagy鱈t叩s pedig nem rossz
k辿pmins辿get ad.
A p辿ld叩ban szerepl paprika.jpg k辿p eredeti m辿rete 70x70. Ha szeretn辿nk kisebb m辿retet, p辿ld叩ul
50x50, akkor <img a html src=k坦d paprika a k旦vetkez alt=paprika lehet:
align=left width=50 height=50>
K辿rd辿s, hogy milyen k辿pet illeszthet端nk be html dokumentumunkba. Minden b旦ng辿sz ismeri a
k旦vetkez h叩rom k辿pt鱈pust:
JPEG kiterjeszt辿se jpeg vagy jpg
14. PNG kiterjeszt辿se png
GIF kiterjeszt辿se .gif
A b旦ng辿szk m叩s k辿pf叩jlokat is ismerhetnek, azonban azok haszn叩lata egy叩ltal叩n nem javasolt. M叩s k辿pt鱈pusok vagy nem jelennek meg m叩s
b旦ng辿szkben, vagy t炭l nagyok ahhoz, hogy az Interneten haszn叩lhassuk.
JPEG f叩jlokat haszn叩lunk ha f辿nyk辿peket szeretn辿nk megjelen鱈teni. A JPEG form叩tumot 炭gy alkott叩k meg, hogy min辿l t旦bb sz鱈n
t叩rolhasson, min辿l kisebbre t旦m旦r鱈tett m辿retben. A GIF t鱈pus kevesebb sz鱈nt k辿pes megjelen鱈teni, grafik叩k megjelen鱈t辿s辿re aj叩nlott. A GIF
form叩tumban l辿trehozhatunk mozg坦k辿peket is, amit b旦ng辿szk helyesen jelen鱈tenek meg. A PNG form叩tumot a k辿t t鱈pus kiv叩lt叩s叩ra hozt叩k
l辿tre. A mozg坦k辿p lehets辿get azonban nem tett辿k bele, mondv叩n, hogy annak k端l旦n form叩tumban kell lennie. Ez az MNG.
Az MNG haszn叩lata viszont egy叩ltal叩n nem terjedt el (ezen dokumentum 鱈r叩s叩nak pillanat叩ig). Nem aj叩nlott a BMP k辿pek
haszn叩lata html oldalak eset辿n. Ezek ugyanis nem jelennek meg minden b旦ng辿szben 辿s hatalmas a m辿ret端k. A m辿retre m辿g a
fenti h叩rom k辿p eset辿ben is figyeln端nk kell. Ha nagyon nagy k辿peket illeszt端nk a weblapunkba, a l叩togatok nem fogj叩k megv叩rni
am鱈g let旦ltdik, ott hagyj叩k az weblapunkat.
K辿pek elhelyez辿s辿n辿l vigy叩znunk kell a kis 辿s nagybet撤kre. Ha weboldalunkon az img c鱈mke
src tulajdons叩g叩n叩l kisbet撤vel adtuk meg a k辿p f叩jl neve pedig val坦j叩ban nagy, egy Windows oper叩ci坦s rendszeren ez m撤k旦dhet.
Azonban a weblap webkiszolg叩l坦 helyre val坦 felt旦lt辿se ut叩n ezek nem m撤k旦dnek.
10. List叩k
H叩rom fajta list叩t tudunk l辿trehozni:
Felsorol叩s
Sz叩mozott lista
Defin鱈ci坦s lista
Felsorol叩s eset辿n a felsorolt elemek eltt a b旦ng辿szk alap辿rtelmez辿sben nagyobb pontokat jelen鱈tenek meg. HTML seg鱈ts辿g辿vel nem
lehet rajtuk v叩ltoztatni, webmesterek azonban CSS seg鱈ts辿g辿vel ak叩r k辿peket is megjelen鱈thetnek a felsorolt sz旦vegek eltt.
Az eg辿sz felsorol叩st az ul c鱈mk辿k k旦zz辿 tessz端k, az egyes elemek pedig az az li c鱈mk辿k z叩rnak. P辿ld叩ul a madarak, h端llk,
k辿t辿lt撤ek 辿s a halak felsorol叩sa a k旦vetkez m坦don t旦rt辿nik:
15. <ul>
<li>madarak</li>
<li>h端llk</li>
<li>k辿t辿lt撤ek</li>
<li>halak</li>
</ul>
叩bra 11: Felsorol叩s
Sz叩mozott list叩kat az ol c鱈mk辿k k旦z旦tt jelen鱈tj端k meg. Az egyes elemeket a felsorol叩shoz
hasonl坦an az li c鱈mk辿kkel adjuk meg. A felsorolt elemek eltt a b旦ng辿szk sorsz叩mokat jelen鱈tenek meg. A sz叩moz叩s egyessel
kezddik az els elemn辿l.
叩bra 12: Sorsz叩moz叩s
<ol>
<li>madarak</li>
<li>h端llk</li>
<li>k辿t辿lt撤ek</li>
<li>halak</li>
</ol>
Defin鱈ci坦s lista eset辿n az egyes elemek eltt semmi sem jelenik meg, ellenben a k旦vetkez sorban
kiss辿 beljebb kezdve, vagyis beh炭zva, az elem magyar叩zat叩t tal叩ljuk. A defin鱈ci坦s list叩kat az dl c鱈mk辿k k旦zz辿 z叩rjuk. Az egyes elemek a
dt c鱈mk辿k k旦z旦tt helyezz端k. Az elemekhez tartoz坦 le鱈r叩sokat, illetve defin鱈ci坦kat pedig a dd c鱈mk辿k k旦z旦tt adjuk meg.
16. <dl>
<lt>madarak</lt>
<dd>mells v辿gtagjai sz叩rnyakk叩 alakult gerincesek</dd>
<lt>h端llk</lt>
<dd>valamennyi magzatburkos 叩llat, a k辿t辿lt撤ek 辿s az emls旦k kiv辿tel辿vel</dd>
<lt>k辿t辿lt撤ek</lt>
<dd>a v鱈zben 辿s a sz叩razf旦ld旦n egyar叩nt 辿letk辿pes gerincesek</dd>
<lt>halak</lt>
<dd>v鱈zi 辿letm坦dhoz szokott gerincesek</dd>
</dl>
叩bra 13: Defin鱈ci坦s lista
Ha a list叩kat egym叩sba 叩gyazzuk, akkor t旦bbszint撤 list叩t kapunk.
<ul>
Egym叩sba 叩gyazott sz叩mozott list叩k:
<li>Hazai
<ul>
<li>k旦rte</li>
<li>barack</li
>
<li>szilva</li
>
</ul>
</li>
<li>K端lf旦ldi
</li>
</ul>
18. 11. T叩bl叩zatok
T叩bl叩zatot a table c鱈mk辿k seg鱈ts辿g辿vel hozhatjuk l辿tre. A t叩bl叩zatok sorait a tr c鱈mk辿vel hat叩rozzuk meg az angol table row
szavakb坦l. A t叩bl叩zat egyes adatokat tartalmaz坦 t叩bl叩it a
td c鱈mk辿kkel adjuk meg. A td az angol table data szavakb坦l sz叩rmazik. Az al叩bbi t叩bl叩zat p辿ld叩ul a n辿h叩ny merevlemezt 叩rait
tartalmazza:
<tr>
<td>Samsung</td><td>12250</td>
</tr>
<tr>
<td>Hitachi</td><td>11900</td>
</tr>
<tr>
<td>Seagate</td><td>16450</td>
</tr>
</table>
叩bra 16: T叩bl叩zat
<table>
A t叩bl叩zat alap辿rtelmezetten nem tartalmaz keretet. Keretet a border tulajdons叩ggal hat叩rozhatjuk
meg. A border 辿rt辿ke egy sz叩m ami meghat叩rozza a keret vastags叩g叩t. A fenti p辿lda kerettel:
<table border=1>
<tr>
<td>Samsung</td><td>12250</td>
</tr>
<tr>
<td>Hitachi</td><td>11900</td>
</tr>
<tr>
<td>Seagate</td><td>16450</td>
</tr>
</table>
19. 叩bra 17: T叩bl叩zat kerettel
A t叩bl叩zat oszlopainak c鱈msorokat is meghat叩rozhatunk.
<table border=1>
<tr>
<th>Gy叩rt坦</th><th>r</th>
</tr>
<tr>
<td>Samsung</td><td>12250</td>
</tr>
<tr>
<td>Hitachi</td><td>12250</td>
</tr>
<tr>
<td>Seagate</td><td>12250</td>
</tr>
</table>
叩bra 18: T叩bl叩zat fejl辿ccel
A t叩bl叩zat sz鱈n辿t be叩ll鱈thatjuk a bgcolor tulajdons叩ggal. rt辿kei mindig egy RGB sz鱈nk坦d.
20. 叩bra 19: T叩bl叩zat sz鱈nnel
Az egyes sorok vagy adatcell叩kra szint辿n alkalmazhat坦 a k端l旦n sz鱈n. A t叩bl叩zat fejl辿c sor叩nak
#aaaaaa sz鱈nre 叩ll鱈t叩sa p辿ld叩ul a k旦vetkez m坦don t旦rt辿nhet.
<tr bgcolor=#aaaaaa>
A fenti t叩bl叩zat teljes forr叩sa:
<table border=1 bgcolor=#e5e5e5>
<tr>
<th>Gy叩rt坦</th><th>r</th>
</tr>
<tr>
<td>Samsung</td><td>12250</td>
</tr>
<tr>
<td>Hitachi</td><td>12250</td>
</tr>
<tr>
<td>Seagate</td><td>12250</td>
</tr>
</table>
21. A eg辿sz t叩bl叩zat 辿s az egyes sorok mellett egy cella sz鱈ne 旦nmag叩ban is megadhat坦:
叩bra 20: A t叩bl叩zat fejl辿c m叩s
sz鱈nnel
A t叩bl叩zat c鱈m辿t is meghat叩rozhatjuk a caption c鱈mke seg鱈ts辿g辿vel. A caption c鱈mk辿t a table
c鱈mk辿t k旦veten az els tr c鱈mke el辿 tessz端k.
<table border=1 bgcolor=#e5e5e5>
<caption>Merevlemez</a>
<tr bgcolor=#aaaaaa><th>Gy叩rt坦</th><th>r</th> </tr>
<tr><td>Samsung</td><td>12250</td></tr>
<tr><td>Hitachi</td><td>12250</td></tr>
<tr><td>Seagate</td><td>12250</td></tr>
</table>
<td bgcolor=yellow>
<table border=1 bgcolor=#e5e5e5>
<tr bgcolor=#aaaaaa>
<th>Gy叩rt坦</th><th>r</th>
</tr>
<tr>
<td>Samsung</td><td>12250</td>
</tr>
<tr>
<td>Hitachi</td><td>12250</td>
</tr>
<tr>
<td>Seagate</td><td>12250</td>
</tr>
</table>
22. 叩bra 21: T叩bl叩zatfelirat
A t叩bl叩zat tartalm叩nak igaz鱈t叩sa megadhat坦 a tr, a th 辿s a td c鱈mk辿k align tulajdons叩g叩val.
rt辿k端k a szok叩sos: left, center 辿s right lehet.
A t叩bl叩zat sorai 辿s oszlopai 旦sszevonhat坦k. Tegy端k fel, hogy a fenti merevlemez p辿ld叩ban a
Merevlemez sz坦t szeretn辿nk a t叩bl叩zat r辿szek辿nt megadni, a Gy叩rt坦 辿s az r feliratok felett. Ehhez a els sor oszlopait 旦ssze kell
vonnunk. Oszlopok 旦sszevon叩sa a td c鱈mke colspan
tulajdons叩g叩val
lehet. rt辿ke egy sz叩m, amely megmondja, hogy h叩ny oszlopot akarunk
旦sszevonni.
<table border=1 bgcolor=#e5e5e5 align="center">
<tr><th colspan=2>Merevlemez</th></tr>
<tr bgcolor=#aaaaaa><th>Gy叩rt坦</th><th>r</th> </tr>
<tr><td>Samsung</td><td>12250</td></tr>
<tr><td>Hitachi</td><td>12250</td></tr>
<tr><td>Seagate</td><td>13250</td></tr>
</table>
叩bra 22: sszevont oszlop
23. sszevonhat坦k a sorok is. A td c鱈mke rowspan tulajdons叩g叩val adhatjuk meg h叩ny sort vonjunk
旦ssze. Tegy端k fel, hogy a Segate merevlemeznek k辿t 叩rat szeretn辿nk megadni.
<table border=1 bgcolor=#e5e5e5 align="center">
<caption>Merevlemez</caption>
<tr bgcolor=#aaaaaa><th>Gy叩rt坦</th><th>r</th> </tr>
<tr><td>Samsung</td><td>12250</td></tr>
<tr><td>Hitachi</td><td>12250</td></tr>
<tr><td rowspan=2>Seagate</td><td>13250</td></tr>
<tr><td>13900</td></tr>
</table>
叩bra 23: sszevont sor
A table c鱈mke width tulajdons叩g叩val be叩ll鱈thatjuk egy t叩bl叩zat sz辿less辿g辿t pixelben megadva.
Ha a megadott sz辿less辿gben a tartalom nem f辿r el a b旦ng辿sz nagyobb sz辿less辿get enged a t叩bl叩zatnak. ppen akkor叩t amelyben elf辿r a
tartalom. A t叩bl叩zat sz辿less辿g辿t megadhatjuk sz叩zal辿kos form叩ban is. Ilyenkor a t叩bl叩zat m辿rete mindig az b旦ng辿sz ablak m辿ret辿hez
k辿pest lesz kisz叩m鱈tva. Ha a t叩bl叩zatot k旦z辿pre igaz鱈tjuk, a sz辿less辿g辿t pedig 80%-ra akkor a t叩bl叩zat mindk辿t oldal叩n 10%, 10% marad.
Ezzel a m坦dszerrel 10%-os marg坦t hozhatunk l辿tre jobb 辿s bal oldalon. Ezt a 10%-os marg坦t a k旦vetkez m坦don 叩ll鱈thatjuk be:
<table width=80% align=center>
24. 12. Linkek
Minden form叩z叩s keveset 辿r hipersz旦vegek n辿lk端l. Ha
egy sz旦vegben elhelyez端nk egy hiperhivatkoz叩st egy
m叩sik weblapra link n辿ven szoktuk emlegetni. Amire
hivatkozunk a m叩sik lapon horgonynak h鱈vjuk. A linket
a m叩sik lapon elhelyezett horgonyhoz ir叩ny鱈tjuk. Ha a
hivatkozott lapon nem helyez端nk el horgonyt a link
akkor is haszn叩lhat坦. Akkor a hivatkozott lap eleje,
illetve teteje jelenik meg.
A p辿lda kedv辿辿rt legyen egy weblap amely index.html n辿ven van elmentve,
Alma sz坦t. Ezt a sz坦t szeretn辿nk hipersz旦vegg辿 azaz link辿 alak鱈tani.
ami tartalmaz egy
叩bra 24: Hipersz旦veg
Lineket a c鱈mk辿vel hat叩rozunk meg:
<a>Alma</a>
Ettl azonban link端nk m辿g nem m撤k旦dik, mert nem mutat sehova. Meg kell adnunk hova
hivatkozzunk. Ezt az a c鱈mke href tulajdons叩g叩val tudjuk meghat叩rozni. Legyen a p辿lda
kedv辿辿rt egy m叩sik weblap, amire hivatkozni szeretn辿nk, a neve alma.html. A hivatkoz叩sunk ekkor a k旦vetkez m坦don n辿zhet ki:
<a href=alma.html>Alma</a>
Ha egy html oldalban hipersz旦vegg辿 alak鱈tunk egy sz旦vegr辿szt, akkor annak megv叩ltozik a sz鱈ne 辿s
a st鱈lusa. Alapesetben b旦ng辿sztl f端ggen valamilyen k辿k sz鱈nt fog kapni 辿s al叩h炭zott lesz. A b旦ng辿szk 叩tszokt叩k sz鱈nezni a linket, ha m叩r
egyszer megl叩togattuk, vagy 辿ppen most n辿zegetj端k. gy besz辿lhet端nk 辿ppen l叩togatott linkek sz鱈n辿rl, 辿s a m叩r megl叩togatott linkek
sz鱈n辿rl. A fenti p辿ld叩ban az Alma sz坦t hipersz旦vegg辿 alak鱈t叩sa ut叩n, azon egyet kattintva az alma.html oldal elej辿n tal叩ljuk
magunkat.
Term辿szetsen megtehetj端k, hogy az alma.html oldalr坦l k辿sz鱈t端nk egy visszafele hivatkoz叩st az
25. index.html-re:
<a href=index.html>Foldal</a>
Ha a m叩sik weblapnak nem a tetej辿re szeretn辿nk hivatkozni, hanem valahol lejjebb a sz旦vegben,
adott sz旦vegr辿szben horgonyt kell elhelyezn端nk.
叩bra 25: A hipersz旦veg egy horgonyra mutat
Horgony elhelyez辿se szint辿n az a c鱈mke val坦. Az a c鱈mke name tulajdons叩g叩val adhatunk
meg egy horgonyt, a hivatkozott r辿sznek mintegy nevet adva ezzel:
<a name=horgonyneve>
A p辿lda kedv辿辿rt egy videk n辿ven szeretn辿nk horgonyt elhelyezni. Legyen a hivatkozott oldal
most is alma.html. Az alma.html f叩jlban a a sz旦veg megfelel hely辿re a k旦vetkez horgonybejegyz辿st tessz端k:
<a name=vedek>
26. 叩bra 26: Horgony
Az index.html weblapon amiben szeretn辿nk erre a horgonyra mutatni a linket a k旦vetkez m坦don
adjuk meg:
<a href=alma.html#videk>Az almaf叩k term辿szetes helye</a>
Megjegyz辿s: A <a name=videk> horgony az alma weblapon nem jelenik meg. Megtehetj端k azt is
hogy valamilyen sz旦veget z叩runk az a c鱈m辿k k旦zz辿:
<a name=videk>Hazai viszonyok</a>
Ez viszont az alma.html weboldalon meg fog jelenni.
Az eddigi p辿ld叩kban a hiperhivatkoz叩s egy sz旦veg volt. Megtehetj端k azt is, hogy egy k辿pet tesz端nk
meg linknek. Adott p辿ld叩ul az alma.jpg, amit szeretn辿k hiperhivatkoz叩sk辿nt megjelen鱈teni:
<a href=alma.html><img src=/slideshow/html-szerkesztes-gyakorlat/38462634/alama.jpg alt=alma></a>
27. 13. Logikai form叩z叩s
A sz旦veget tartalmi szempontok alapj叩n csoportos鱈tjuk. A sz旦veghez tulajdonk辿ppen egy t鱈pust rendel端nk. A kin辿zetet az b旦ng辿sz
hat叩rozza meg.
27. 叩bra: Logikailag form叩zott sz旦veg
14. K端l旦nleges karakterek
Az UTF-8 karakterk坦dol叩s eltt voltak olyan karakterek amelyek a t旦bbf辿le
k坦drendszer miatt nem miden b旦ng辿szben ugyan炭gy jelentek meg. Ma ha
weblapunkat UTF-8 k坦dol叩ssal k辿sz鱈tj端k biztosak lehet端nk abban, hogy az
b旦ng辿szkben azt l叩tj叩k a felhaszn叩l坦k amit szeretn辿nk. Mindezek mellett
tov叩bbra is vannak olyan karakterek amelyeket ha szeretn辿nk megjelen鱈teni
akkor a k端l旦nleges karakterk坦dokhoz kell ny炭lnunk. Ilyenek p辿ld叩ul azok a
karakterek amellyel tagolunk egy weboldalt. Gondolok itt a kisebb mint jel:
<. Nagyobb mint jel: >, de elfordulhatnak m叩s karakterek is amit
valami辿rt szeretn辿nk k端l旦nleges karakterk辿nt megadni.
A k端l旦nleges karaktereket a & karakter vezeti be, 辿s ; karakter z叩rja. A k端l旦nleges karaktereknek van egy k坦djuk, ami egy sz叩m. A
legt旦bbnek azonban neve is van. A & 辿s a ; karakterek k旦zz辿 ezt a k坦dot vagy nevet kell 鱈rnunk. A < karakter ASCC k坦dja 60. A
sz叩mmal megadott k坦dot mindig egy kettskereszttel kell megadnunk. Ezek ut叩n ha egy HTML oldalon szeretn辿nk ezt a karaktert
megjelen鱈teni a k旦vetkezt kell 鱈rjuk a html k坦dba:
<
C鱈mke Mikor haszn叩ljuk Angol eredet
<em> </em> Kiemel辿s (叩ltal叩ban dlt lesz) EMphasize
<strong> </strong> Hangs炭lyoz叩s (叩ltal叩ban f辿lk旦v辿r) STRONG
<cite></cite> K旦zbez叩rt sz旦vegr辿sz: id辿zet CITE
<code> </code> Programk坦d CODE
<var> </var> Valamilyen programv叩ltoz坦 VARiable
<kbd> </kbd> Billenty撤zetrl v叩rt bemenet KeyBoarD
<samp> </samp> Program kimenet辿nek r辿szlete SAMPle
28. A nagyobb mint jel > sz叩ma 62. A nagyobb mint jel megjelen鱈t辿se:
>
P辿ld叩ul ha egy C nyelv撤 k坦d fejr辿sz辿t szeretn辿nk megjelen鱈teni, amely 鱈gy n辿z ki:
#include <stdio.h>
akkor a k旦vetkezket 鱈rjuk a htmlbe:
#include <stdio.h>
A sz叩mok helyett k旦nnyebb neveket megjegyezni. A kisebb mint jel < ilyen neve lt, a nagyobb
mint jel neve gt. Ha a k坦dot n辿vvel azonos鱈tjuk a kettskereszt nem sz端ks辿ges. A k旦vetkez v叩ltoztat叩sokat tehetj端k a p辿ld叩ban:
#include <stdio.h>
A fentiekhez hasonl坦an minden karakter aminek gondot okozhat a megjelen鱈t辿se le鱈rhat坦
sz叩mmal vagy n辿vvel. Az al叩bbiakban egy ilyen k坦dt叩bl叩zatot l叩tunk a teljess辿g ig辿nye n辿lk端l.
egy
A HTML vez辿rlelemeket nem tekintve ha k辿pesek vagyunk UTF-8 k坦dol叩ssal k端l旦nleges
karaktereket bevinni a billenty撤zetrl, akkor nem kell haszn叩lnunk az elbbi htmlk坦dol叩st.
A HTML k坦dokat ha 叩tsz叩m鱈tjuk hexadecim叩lis sz叩mokk叩 akkor azt l叩tjuk, hogy azok
29. megegyeznek az UTF-8 k坦dokkal. A htmlk坦dol叩ssal is megadhatunk hexadecim叩lis sz叩mot is egy
x karakter besz炭r叩s叩val jelezve, hogy htmlk坦dr坦l van sz坦. Az Eur坦 jel辿t p辿ld叩ul 鱈gy 鱈rhatjuk:
Ĩ
A fentiekbl k旦vetkezik, hogy a UTF-8 k坦dol叩ssal az Eur坦 jele: 0128. Ma m叩r minden b旦ng辿sz
k辿pes az b叩rmely UTF-8 k坦dol叩ssal megadott megadott k坦dot megjelen鱈teni. P辿ld叩ul pikk jel辿nek
UTF-8 k坦dja: 2660. HTML k坦ddal be鱈rva:
pikk: ♠
Vagy a szigma 辿s az integr叩l jele:
szigma: Σ 裡
integr叩l: ∫
