A HTML szerkesztés alapjai

Ez a leírás nem minősül se dokumentációnak, se referenciának, már csak azért sem mert nemtom mi a különbség a kettő között. Célja mindössze annyi, hogy ennek alapján mindenki fel tudjon készüni egy emelt szintű érettségire, tehát messze nem számít teljes leírásnak, szakmailag nincsen lektorálva.

Alapok

A honlap egy szöveges fájl, melyet akár jegyzettömbben (szerintem ebben érdemes) vagy akármilyen más egyszerű szövegszerkesztőben megírhatunk. A formázási és egyéb parancsokat < és > jelek közé írjuk és tageknek (címkéknek) nevezzük őket. A tagekben a kis és nagybetűket nem kell megkülönböztetni, bár hagyományosan csupa nagybetűvel írjuk mindegyiket. A tagek nagy részéhez tartozik záró tag, a nyitó és záró tag között érvényes a html parancs. Pl <font> - </font>.A fájl első sora minden esetben ez: <html>

A második sor pedig a legtöbb esetben a <body> tag. Ezen a tagen belül több formázási paramétert is megadhatunk:

* BGCOLOR - a honlap háttérszíne

* LINK - a link szövegének színe

* ALINK - a link szövegének színe akkor, mikor rákattintunk

* VLINK - link szövegének színe, miután rákattintottunk

(a linkekről - hiperhivatkozásokról - majd később lesz szó)

A szöveget a <font> tagben formázhatjuk, ennek paraméterei:

* size - a betűméret 1-től 7-ig

* face - a betűtípus

* color - a betűszín

* align - a szöveg igazítását állítja (lehet left, center vagy right)

A szöveg stílusát más tagekkel állítjuk:

* <u> és </u> között: aláhúzott a szöveg

* <i> és </i> között: dőlt a szöveg

* <b> és </b> között: félkövér a szöveg

Tehát a fentiek alapján egy olyan honlap, mely kék alapon sárga betűkkel kiír középre, aláhúzottan egy szöveget:

<html>

<font color="blue" align=center> <u>Ide jön a szöveg </u></font>

</body>

</html>

Egyéb alap tag-ek:

* <br>: ez a sortörés

* <title> és </title> közti szöveg kerül a böngésző fejlécébe, ez a tag a <html> és a <body> tag között helyezkedik el

* <hr>: ez egy vízszintes vonalat rajzol ki, paraméterei:

align: ez az igazítás, lehet left, center vagy right

width: ez a szélesség, %-ban adjuk meg általában (pl width="70%")

Képek

Ha az oldal hátterének egy képet akarunk beállítani, akkor azt a body tag background paraméterével tehetjük meg. A képnek egy jpg, gif vagy bmp fájlnak kell lennie. A fájlnév meghatározása relatív hivatkozással történik, ami a következőt jelenti:

Ha pl. a fájlnév pelda.jpg és ugyanabban a mappában van, mint a html fájl, akkor background="pelda.jpg". Ha a fájl a html fájl mappájának egyik alkönyvtárában van, pl a "képek" almappában, akkor background="kepek/pelda.jpg". A kép forrása URL-el is törénhet, pl background="http://www.freeweb.hu/ebenceweb/pic/Lens_orbit.jpg".

A honlapunkra bárhova beilleszthetünk képet az <img> taggel, melynek paraméterei:

* src: ennek értéke lesz a kép forrása, az értékadás szintén relatív hivatkozással történik, a fentiekben leírtaknak megfelelően.

* alt: ennek értéke látszik a böngészőben, ha a kép fölé visszük az egeret, ill. szöveges böngészőkben ez a szöveg jelenik meg.

* align: ez a kép igazítását állítja, értéke left, center és right lehet.

* border: a kép kerete, képpontokban megadva. Érettségin szokott szerepelni, amúgy ritkán használjuk.

Linkek

a linkeket a <a> taggel jelöljük, a <a> és </a> közti szöveg lesz a link szövege.

a <a> tag paraméterei:

* href: az oldalnak a címe, amire mutat a link. Ezt is relatív hivatkozással adjuk meg.

* target: ezt a paramétert frame-es szerkezetű honlapoknál használjuk, de olyan még soha nem volt érettségin, ezért itt nem is tárgyaljuk részletesen. Elég annyi, hogy ha azt akarjuk, hogy a link által mutatott oldal új böngészőablakban jelentjen meg, akkor ennek a paraméternek az értéke "blank".

Ha a link egy másik honlapra mutat (nem olyan oldalra, melyre relatívan lehet hivatkozni), akkor mindig be kell írni a http://-t. A href paraméternek egy speciális alkalmazása a mailto parancs. Pl az hogy <a href="mailto:gyilkoskaralabe@skizo.hu"> email küldése </a> azt jelenti, hogy ha rákattintunk az "email küldése" szövegre (a link szövegére), akkor elindul az outlook és a címzett mezőben a "gyilkoskaralabe@skizo.hu" lesz. Ez a funkció majdnem minden érettségi feladatban kell.

Példák:

* <a href="http://www.prog.hu"> prog.hu </a> eredménye: prog.hu

* <a href="http://www.google.hu" target="blank"> google </a> eredménye: google

* <a href="mailto:gyilkoskaralabe@skizo.hu"> Email küldése </a> eredménye: Email küldése

* <a href="pic/Lens_orbit.jpg"> <img src="pic/small/Lens_orbit.jpg"> </a> eredménye:

Táblázatok

A táblázat a <table> taggel kezdődik. Ennek paraméterei:

* align: a táblázat igazítása, szintén left, center vagy rigth lehet.

* width: a táblázat szélessége, %-ban vagy képpontban megadva.

* border: a táblázat kerete képpontban megadva.

* bgcolor: a táblázat háttérszíne.

A táblázat sorainak tartalma <tr> (table row) és </tr> tagek között helyezkedik el, a cellák tartalma pedig a <td> (table data) és </td> tagek között. Ennek illusztrálására egy egyszerű példa:

<tr>

<td> 1. sor 1. cella </td>

<td> 1. sor 2. cella </td>

<td> 1. sor 3. cella </td>

</tr>

<tr>

<td> 2. sor 1. cella </td>

<td> 2. sor 2. cella </td>

<td> 2. sor 3. cella </td>

</tr>

<tr>

<td> 3. sor 1. cella </td>

<td> 3. sor 2. cella </td>

<td> 3. sor 3. cella </td>

</tr>

</table>

Eredmény:

1. sor 1. cella 1. sor 2. cella 1. sor 3. cella

2. sor 1. cella 2. sor 2. cella 2. sor 3. cella

3. sor 1. cella 3. sor 2. cella 3. sor 3. cella