A HTML Stuktúra
Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja.
A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!)
Tehát a következőkben a következő szerkezetet fogjuk használni:
<HTML>
<HEAD>
<TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE>
</HEAD>
<BODY>
Ide jön a dokumentumtörzs.
</BODY>
</HTML>
A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni.
A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú.
() Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. notepad, joe, pico) megírhatod a kódot, amit el kell mentened, majd a böngésződbe be kell olvasnod.
Betűtípusok, stílusok <b> <i> <u> <tt>
Ha ezt a kódot beírod a dokumentumtörzsbe
ez lesz az eredménye
<b>
Kövér betűk (bold) </b>
Kövér betűk (bold)
<i>
Dőlt betűk (italic)</i>
Dőlt betűk (italic)
<u>
Aláhúzott betűk (underlined) </u>
Aláhúzott betűk (underlined)
<tt>
Írógép betűk (teletype) </tt>
Írógép betűk (teletype)
Fejléc <h1> ... <h6>
(A fejlécek - mint ahogy a szövegszerkesztésnél is megszokhattuk - a html oldalak logikai felosztását teszik lehetővé. pl. h1 az oldal címe, h2 egy alcím, h3 annak az alcíme és így tovább. A HTML oldalak esetén 6 fejlécet használhatunk)
<h1>1-es fejléc </h1>
1-es fejléc
<h2>2-es fejléc </h2>
2-es fejléc
<h3>3-as fejléc </h3>
3-as fejléc
<h4>4-es fejléc </h4>
4-es fejléc
<h5>5-ös fejléc </h5>
5-ös fejléc
<h6>6-os fejléc </h6>
6-os fejléc
Ha nem az alapértelmezett (balra) igazítást szeretnénk használni, megadhatjuk az igazítás típusát az align paraméter segítségével. (left=balra, center=középre, right=jobbra) pl.
<h1 align="center"> Ez egy középre igazított 1-es fejléc </h1>
Ez egy középre igazított 1-es fejléc
<h3 align="right"> Ez egy jobbra igazított 3-as fejléc </h3>
Ez egy jobbra igazított 3-as fejléc
Betűméret <font size=" ">
A betűméretet kétféleképpen állíthatjuk be: abszolút és relatív módon.
Az abszolút méretmegadásban 1 és 7 között állíthatjuk be a méretet, ahol a 7-es a legnagyobb az 1-es a legkisebb...
<font size ="4"> 4-es betűméret </font>
4-es betűméret
<font size ="7"> 7-es betűméret </font>
7-es betűméret
A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk.
Azt, hogy mihez képest legyen nagyobb vagy kisebb az adott betűméret a <basefont size="méret"> tag segítségével állíthatjuk be.
<font size ="+2"> Kettővel nagyobb betűméret </font>
Kettővel nagyobb betűméret
<font size ="-1"> Eggyel kisebb betűméret </font>
Eggyel kisebb betűméret
Az alábbi ablakban módosíthatod a kódot, és kipróbálhatod a méretmegadások közti különbségeket. pl. megváltoztathatod a basefont beállításokat is...
<HTML> <HEAD> <TITLE>Meret megadasok</TITLE> </HEAD> <BODY> <basefont size="3"> <font size="2"> 2-es méret </font> <font size="4"> 4-es méret </font> <font size="7"> 7-es méret </font> <font size="+2"> 2-el növel méret </font> <font size="-1"> 1-el csökkentett méret </font> <font size="-2"> 2-vel csökkentett méret </font> </BODY> </HTML>
Betűtípus <font face=" ">
A Face paraméter segítségével állítható be a kívánt betűtípus.
Figyelem! Ne használj különleges, egyedi betűtípusokat, mert nagy valószínűséggel a látogatók semmit sem vesznek észre belőle. (ugyanis azon betűtípusok esetében, amelyek nincsenek az adott gépre felinstallálva, a böngésző a hagyományos betűtípusokat jeleníti meg.)
<font face ="Arial">Arial betűtípus. </font>
Arial betűtipus.
<font face ="Courier">Courier betűtípus. </font>
Courier betűtipus.
Betűszín <font color=" ">
A betűk színét is többféleképpen lehet beállítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl. red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be.
<font color=red> Piros </font>
Piros
<font color=#898134> Kevert </font>
Kevert
#898134 a szín úgynevezett RGB kódja. Az első két karakter a vörös (R=red) szín erősségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legerősebb az FF. A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue)
A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az RGB picker segítségével online módon is megtudhatod a színek kódját.
Vízszintes vonal <hr>
Ha a dokumentumon belül valamilyen szakaszt el szeretnénk különíteni a többitől, használhatunk vízszintes elválasztó vonalat a <hr> tag használatával.
Ez egy vízszintes vonal (horizontal rule) <hr>
Az elválasztó vonal szélességét (width) és vastagságát (size) is megadhatjuk. Az igazítás (align) balra (left), jobbra (right), középre (center) történhet.
pl. <hr size="3" align="center" width="150">
A vonal szélességét megadhatjuk képpontokban (ahogy a fenti példa mutatja), vagy pedig a rendelkezésre álló hely százalékában.
pl. <hr size="3" align="center" width="80%">
Bekezdések <p>
A <p> elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a <p> és </p> elemek közé kell tenni. A bekezdést az align paraméterrel balra, középre, jobbra igazíthatjuk.
A böngészők az egyes bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak.
Igazítás (align): left(balra), center(közép), right(jobbra)
<P align="left"> Ez egy balra igazított bekezdés </P>
Ez egy balra igazított bekezdés
<P align="center"> Ez egy középre igazított bekezdés </P>
Ez egy középre igazított bekezdés
<P align="right"> Ez egy jobbra igazított bekezdés </P>
Ez egy jobbra igazított bekezdés
Sortörés <br>
Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a <br> taget kell használnunk.
Ez az első sor<br>Ez pedig a második
Ez az első sor
Ez pedig a második
Hiperlinkek <a href="URL"> szöveg </a>
A hiperlinkekkel hozhatunk létre kapcsolatot szövegrészek, illetve dokumentumok között. A böngészők a linkeket aláhúzással illetve eltérő színnel jelölik, persze ezek a beállítások megváltoztathatóak.
Az URL (Uniform Resource Locator, egységes dokumentum meghatározó rendszer) a következő lehet:
Ha a saját gépünkön lévő dokumentumra szeretnénk hivatkozni, akkor az URL megadásánál a file:// "előtagot" kell használnunk. Ha pl. a c:\web\iskola\palyazat.html oldalra szeretnénk linket, akkor a file://C|WEB/ISKOLA/PALYAZAT.HTML URL-t kell használni. A c:\ megadás helyett használjuk a c| formát.
file://
dokumentum a kliens számítógépen
file://C|WEB/ISKOLA/PALYAZAT.HTML
Jól gondoljuk meg, hogy valóban erre a megadási módra van-e szükségünk. (ha ugyanezt az oldalt másik gépről néznénk, akkor a link az azon a gépen lévő web alkönyvtárban keresné az iskola alkönyvtárat és abban a palyazat.htm oldalt...)
Ha egy FTP szerveren elhelyezkedő állományt akarunk belinkelni, akkor az ftp:// protokolt kell használni.
ftp://
file átviteli protocol
ftp://ftp.c3.hu/Utilities/winzip70.exeHa egy másik weboldalra akarunk linket, használjuk a következőt:
http://
hypertext transfer protocol
http://www.elte.hu/Ha a link segítségével be szeretnék jelentkezni (telnet segítségével) egy gépre, használjuk a következőt:
telnet://
bejelentkezés egy távoli gépre
telnet://ludens.elte.hu/
Ha a mailto:email cím formát használjuk, az adott linkre kattintva betöltődik az alapértelmezett levelezőprogram, amellyel emailt küldhetünk a megadott email címre.
mailto:
email cím megadása
mailto:abonyita@freemail.hu
(A levél tárgya is megadható a ?subject=szöveg elemmel, sőt az is hogy ki kapjon másolatot (?cc=cimzett) Ha több opciót akarunk megadni, akkor az &jelet kell alkalmazni. pl. mailto:abonyita@freemail.hu?CC=gipszjakab@freemail.hu&Subject=Proba)
Példák:
<a href="
http://www.elte.hu/">Ez az ELTE honlapja</a>
Ez az ELTE honlapja
<a href="
ftp://ftp.c3.hu/Utilities/Winzip70.exe ">A winzip letölthető erről a címről</a>
A winzip letölthető erről a címről
<a href="mailto:abonyita@freemail.hu?subject=Üdvözlet">Itt írhat nekem levelet</a>
Itt írhat nekem levelet
A következőkben (pl. a frameknél) még foglalkozunk a hiperlinkek megadási módjaival.
Felsorolások
A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre.
Egyszerű felsorolás
Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl.
<ul>
<li>első elem
<li>második elem
<li>harmadik elem
</ul>
első elem
második elem
harmadik elem
Sorszámozott lista
Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl
<ol>
<li>első elem
<li>második elem
<li>harmadik elem
</ol>
első elem
második elem
harmadik elem
Meghatározás lista
Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak.
<dl>
<dt>1. fogalom <dd>az első fogalom magyarázata
<dt>2. fogalom <dd>a második fogalom magyarázata</dd>
</dl>
1. fogalom
az első fogalom magyarázata
2. fogalom
a második fogalom magyarázata
Speciális karakterek, ékezetes betűk
Előfordulhat, hogy az oldalon speciális jeleket szeretnénk megjeleníteni. (Speciális jelnek számít már a < és a > jel is, hiszen gondoljunk bele, ha a forráskódban használjuk ezeket a jeleket, akkor a böngésző úgy értelmezi, hogy valamilyen taget akarunk megadni, és nem fogja megjeleníteni. Ebben az esetben speciális karaktereket kell használnunk.
Ugyanez a helyzet az ékezetes betűkkel is. Ha ékezetes betűket szeretnénk használni akkor a következő kódokat kell "megjegyeznünk":
á= á
Á= Á
ö= ö
Ö= Ö
é= é
É= É
ü= ü
Ü= Ü
í= í
Í= Í
õ= ő
Õ= Ő
ó= ó
Ó= Ó
û= ű
Û= Ű
ú= ú
Ú= Ú
Tehát ha pl. az árvíztűrő tükörfúrógép szöveget akarjuk megjeleníteni, akkor a következőket kell a kódba elhelyeznünk:
árvíztûrõ tükörfúrógép
Mielőtt teljesen elkoptatnátok a billentyűzeteteket és elmenne a kedvetek a magyar ékezetes betűk használatától, megnyugtatok mindenkit, hogy van egyszerűbb módja az ékezetes betűk megadásának. Az alternatívát a META tagek lehetőségei jelentik, amelyről egy külön fejezetben is foglalkozunk. Most elég csak annyit tudnunk, hogy a következő sorok valamelyikét be kell illesztenünk az oldal forráskódjába (mégpedig a <head> </head> tagek közé) és innentől kezdve bátran használhatjuk hagyományos módon az ékezetes betüket.
Tehát a megoldás:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
vagy
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
sor használata a <HEAD> részben.
Speciális karakterek összefoglaló táblázata
HTML kód
Unicode
HTML kód
Unicode
 
D
Ð
Ð
!
¡
¡
N
Ñ
Ñ
c
¢
¢
O
Ò
Ò
?
£
£
Ó
Ó
Ó
¤
¤
¤
Ô
Ô
Ô
Y
¥
¥
O
Õ
Õ
|
¦
¦
Ö
Ö
Ö
§
§
§
×
×
×
¨
¨
¨
O
Ø
Ø
C
©
©
U
Ù
Ù
a
ª
ª
Ú
Ú
Ú
<
«
«
U
Û
Û
?
¬
¬
Ü
Ü
Ü
­
­
Ý
Ý
Ý
R
®
®
?
Þ
Þ
?
¯
¯
ß
ß
ß
°
°
°
a
à
à
?
±
±
á
á
á
2
²
²
â
â
â
3
³
³
a
ã
ã
´
´
´
ä
ä
ä
?
µ
µ
a
å
å
?
¶
¶
a
æ
æ
.
·
·
ç
ç
ç
¸
¸
¸
e
è
è
1
¹
¹
é
é
é
o
º
º
e
ê
ê
>
»
»
ë
ë
ë
?
¼
¼
i
ì
ì
?
½
½
í
í
í
?
¾
¾
î
î
î
?
¿
¿
i
ï
ï
A
À
À
?
ð
ð
Á
Á
Á
n
ñ
ñ
Â
Â
Â
o
ò
ò
A
Ã
Ã
ó
ó
ó
Ä
Ä
Ä
ô
ô
ô
A
Å
Å
o
õ
õ
A
Æ
Æ
ö
ö
ö
Ç
Ç
Ç
÷
÷
÷
E
È
È
o
ø
ø
É
É
É
u
ù
ù
E
Ê
Ê
ú
ú
ú
Ë
Ë
Ë
u
û
û
I
Ì
Ì
ü
ü
ü
Í
Í
Í
ý
ý
ý
Î
Î
Î
?
þ
þ
I
Ï
Ï
y
ÿ
ÿ
Ennyi.
