Warning: session_set_cookie_params(): Cannot change session cookie parameters when headers already sent in /www/html/info/auth.php on line 92

Warning: session_start(): Cannot start session when headers already sent in /www/html/info/auth.php on line 93

Warning: Use of undefined constant MY_NONE - assumed 'MY_NONE' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 2

Warning: Use of undefined constant MY_STR - assumed 'MY_STR' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 4

Warning: Use of undefined constant MY_VAR - assumed 'MY_VAR' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 5

Warning: Use of undefined constant MY_ARR - assumed 'MY_ARR' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 6

Warning: Use of undefined constant MY_FN - assumed 'MY_FN' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 8

Warning: Use of undefined constant MY_FNH - assumed 'MY_FNH' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 9

Warning: Use of undefined constant MY_TMPL - assumed 'MY_TMPL' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 10

Warning: Use of undefined constant MY_TMPLH - assumed 'MY_TMPLH' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 11

Warning: Use of undefined constant MY_DROP - assumed 'MY_DROP' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 13
HTML szerkesztés 1

Notice: Undefined index: main in /www/html/info/template.php on line 221

HTML szerkesztés

A legtöbb dolog, amit itt leírok csak egyszerűsített, néha pongyola megfogalmazása a valóságnak. Az igazság odaát van.

Első lépés

A HTML fájljainkat kétféleképpen fogjuk megnyitni:

Böngészőben
pl. Firefox (ennek a Web developer kiegészítője sokat segíthet), Opera. (Esetleg jobb híján a M$ Internet Explorer, de az nem jeleskedik a szabványok tiszteletében, úgyhogy sok jót ne várj tőle!)
Szövegszerkesztőben
Mármint "text editor" típusú sima szövegszerkesztőben (pl. Jegyzettömb) — nem "word processor" típusúban (pl. OpenOffice Writer, M$ Word). Ha Window$t használsz, és még nincs kedvenc szövegszerkesztőd, akkor javaslom a notepad++t, melyet ha ZIP formátumban töltesz le, akkor rendszergazda jogosultság nélkül is használhatod. (Ha nem Window$t használsz, akkor valószínűleg eleve tudod, mit csinálsz, de Linux alatt kipróbálhatod a SciTE-t.) Amit a szövegszerkesztőben látunk, azt úgy fogom hívni, hogy a HTML oldal forrása.

Akkor most indítsd el a szövegszerkesztőt, írd bele (vagy másold bele) ezt:

<b>Hello World!</b> (azaz "Szia Világ!")

Mentsd el, mondjuk 'elso.html' néven, és nyisd meg a böngészőben! (Ha az "á" betű helyett fura karaketerk jelennek meg, akkor se izgulj, majd arról is lesz szó.) A fájlnevekkel vigyázz, mert bizonyos karakterek használata sok esetben elérhetetlenné teszi őket. A legbiztonságosabb, ha csak az angol ABC kisbetűit, számokat és az aláhúzáskaraktert használod, no meg persze a pontot a kiterjesztés elválasztására.

Minden bizonnyal azt látod, hogy a böngészőben a <b> és a </b> nem látszódik, cserébe viszont a Hello World! vastag betűkkel jelenik meg. A < és > karakterek közé fogott rész egy HTML tag (néhányan magyarul címkének hívják): ezt a böngésző nem jeleníti meg, hanem megpróbálja értelmezni. Esetünkben a <b> azt jelenti, hogy mostantól a szöveget félkövéren kell megjeleníteni, egész a </b> záró tagig.

Tehát amikor a böngésző < karaktert talál, akkor a következő > karakterig nem ír ki semmit — akkor sem, ha eme karakterek közötti rész nem is HTML tag. Ezért, ha azt akarjuk megjeleníteni, hogy "1 < 2", akkor azt így kell tennünk: 1 &lt; 2. & és ; közt megadva sokféle karaktert írathatunk ki, ezek közül most a következők érdekesek:

szerkesztőbenböngészőben
&lt; <
&gt; >
&amp; &

De most írjuk meg ugyanezt tisztességesebben!

<html>
<head>
  <title>Első</title>
</head>
<body>
<b>Hello World!</b> (azaz "Szia Világ!")
</body>
</html>

Az egész HTML dokumentumunkat a <html> </html> tag pár fogja közre: a <html> előtt és a </html> után semmi nem lehet. A böngészőben megjelenítendő rész kerül a <body> </body> közé. A <head> </head> közt egyéb információk adhatók meg, a leggyakoribb a <title> </title>, melyek közt a dokumentum címét írhatjuk be — a cím többek közt a böngészőablak címsorában és az internetes keresők találatában fog megjelenni. Ezekből a tag-ekből mindig pontosan egy-egy pár legyen az oldalunkon, ilyen sorrendben!

És most gyorsan még egy formázó tag: a <i> és </i> közé írt szöveg italic (dőlt) típussal fog megjelenni. És jegyezd meg, hogyha egy tag-et egy másik tag-en belül írsz, akkor a belső tag-et le kell zárnod, mielőtt a külsőt lezárnád. Lássunk egy ROSSZ példát:

egy <b>kettő <i>három</b> négy</i> öt

Tehát így ne csináljuk, még ha egyes böngészők meg is értik, mit akarunk. Mivel az <i>-vel a dőlt betűs részt a <b>-n belül kezdtük, le is kell zárni a </b> előtt. Utána újra kezdhetjük a dőlt betűket egy újabb <i>-vel — persze ezt se felejtsük el lezárni!

egy <b>kettő <i>három</i></b> <i>négy</i> öt

Akkor most lássuk a HTML dokumentumok felépítését más irányból megközelítve! Mostanra a szövegszerkesztőben nézve a fájl legelején ennek kell állnia:

<html>
<head>
  <title>Első</title>
</head>
<body>

Ha van valami a <html> előtt, akkor azt most helyezd át a <body> mögé! A fájl legvégén ennek kell állnia:

</body>
</html>

Ha van valami ez után, akkor azt helyezd át a </body> elé! Továbbaikban is mindent a <body> és a </body> tag-ek közé írjál! Ne legyen az oldaladon egynél több <body> </body>!

Szóköz, sortörés

Írjuk tovább a példánkat így:

<b>Hello World!</b> (azaz "Szia Világ!")
Egy kismalac röf   röf     röf

A böngészőben ez így néz ki:

Hello World! (azaz "Szia Világ!") Egy kismalac röf röf röf

A böngésző az egymás utáni szóközöket, sortöréseket és tabulátorokat egyetlen szóközként jeleníti meg — akkor kezd új sort, amikor a böngészőablak széléhez ér. Ha valahol mindenképp új sort akarunk kezdeni, ott helyezzük el a <br /> tag-et! Újdonság, hogy a > elé teszünk egy szóközt és a / jelet: ennek a tag-nek ugyanis nincsen záró párja (azaz nincsen </br>), ezért így kell jelezni a böngészőnek, hogy ne is várjon rá.

Ha éppenséggel több egymás melletti szóközre van szükségünk, akkor a &nbsp;-t használhatjuk. Ez a nem törhető sorköz, alapvetően akkor jön jól, ha például szeretnénk elkerülni, hogy a "75 Ft" kiírásakor a "75" egy sor végére, a "Ft" pedig a következő sor elejére kerüljön. Ilyenkor azt írjuk, hogy 75&nbsp;Ft, és ha a böngészőben a "Ft" már épp nem férne a sorba, akkor a "75"-tel együtt kerül a következő sorba.

Ezek alapján a példánk:

<b>Hello World!</b> (azaz "Szia Világ!")<br />
Egy kismalac röf&nbsp;&nbsp;&nbsp;röf&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;röf
Hello World! (azaz "Szia Világ!")
Egy kismalac röf   röf     röf

Láthatóan ez a &nbsp; nem néz ki túl jól a forrásban, de nem is nagyon van rá szükség. A tabulátorok helyett pedig majd táblázatot fogunk használni.

Struktúrált szöveg

"Word processor"-nek nevezett komolyabb szövegszerkesztőkben a <br /> az — általában Shift+Enter kombinációval beszúrható — egyszerű sortörésnek felel meg. Szövegeinket ehelyett érdemes bekezdésekbe tagolni. Egy bekezdést a <p> </p> tag párral közrefogva írhatunk be.

Címsorokat (ne keverjük össze az egész dokumentumra vonatkozó <title> tag-gel!) <h1> - <h6> tag-ek (és persze a lezáró párjaik) segítségével adhatunk meg, lásd a példát:

szerkesztőbenböngészőben
<h1>Első rész</h1>

<h2>Első fejezet</h2>

<p>Egy bekezdés.</p>
<p>Másik bekezdés.</p>

<h2>Második fejezet</h2>

<p>További szöveg.</p>
<p>Amíg meg nem unjuk.</p>

<h1>Második rész</h1>

<p>... Ezt még nem írtuk meg, 
úgyhogy fejezetek sincsenek.</p>

Első rész

Első fejezet

Egy bekezdés.

Másik bekezdés.

Második fejezet

További szöveg.

Amíg meg nem unjuk.

Második rész

... Ezt még nem írtuk meg, úgyhogy fejezetek sincsenek.

Felsorolás

Felsorolásunk elemeit <li> </li> tag párok közé írjuk. Az egész felsorolást <ol> </ol> vagy <ul> </ul> tag párokkal vegyük körbe attól függően, hogy számozott, vagy számozatlan felsorolást szeretnénk!

szerkesztőbenböngészőben
<ol>
  <li>Nyissuk ki a hűtőt!</li>
  <li>Tegyük be az elefántot!</li>
  <li>Csukjuk be a hűtőt!</li>
</ol>

<ul>
  <li>krumpli</li>
  <li>olaj</li>
  <li>só</li>
</ul>
  1. Nyissuk ki a hűtőt!
  2. Tegyük be az elefántot!
  3. Csukjuk be a hűtőt!
  • krumpli
  • olaj

A fenti példa forrásában a felsorolás elemeit két-két szóközzel beljebb kezdtem. Ez nem szükséges — akár az egész forrást egy sorba írhatjuk — de átláthatóbb lesz a forrás, ha a beágyazott tag-eket mindig beljebb kezdjük.

Táblázat

A táblázat egy fokkal összetettebb, mint a felsorolás: egy táblázat (<table> ... </table>) sorokból áll (<tr> ... </tr>), a sorok pedig cellákból (<td> ... </td>). Csináljunk most egy három soros, két oszlopos táblázatot!

  1. Legyen egy táblázat!
    <table>
    </table>
  2. Legyen benne három sor!
    <table>
    	<tr></tr>
    	<tr></tr>
    	<tr></tr>
    </table>
  3. Minden sorban legyen két-két cella!
    <table>
    	<tr> <td></td> <td></td> </tr>
    	<tr> <td></td> <td></td> </tr>
    	<tr> <td></td> <td></td> </tr>
    </table>
  4. Töltsük ki a cellákat!
    <table>
    	<tr> <td>név</td> <td>magasság</td> </tr>
    	<tr> <td>Béla</td> <td>175cm</td> </tr>
    	<tr> <td>Gedeon</td> <td>180cm</td> </tr>
    </table>

Már volt róla szó, hogy a HTML forrásban több egymás utáni szóköz/sortörés/tabulátor egyetlen szóközként jelenik meg, ezért a forrást tetszőlegesen tördelhetjük, például így:

szerkesztőbenböngészőben
<table>
  <tr> 
    <td>név</td>
    <td>magasság</td>
  </tr>
  <tr>
    <td>Béla</td>
    <td>175cm</td>
  </tr>
  <tr>
    <td>Gedeon</td>
    <td>180cm</td>
  </tr>
</table>
név magasság
Béla 175cm
Gedeon 180cm

Attribútumok

A tag-eket attribútumokkal állíthatjuk be. Például egy táblázatnak a border attribútummal adhatunk keretet:

szerkesztőbenböngészőben
<table  border='3'>
  <tr> 
    <td>42</td>
    <td>negyvenkettő</td>
  </tr>
</table>
42 negyvenkettő

Egy attribútum megadása tehát így néz ki:
attribútum neve, egyenlőségjel, az érték aposztrófok vagy macskakörmök közt.

Az atríbútumokat a tag-en belül, a tag neve után, de még a > előtt kell megadni. Az attribútumokat a tag nevétől és egymástól szóközzel (vagy akár sortöréssel) kell elválasztani. Az érték aposztrófok és macskakörmök közt is lehet — mindegy melyiket használod, annyi a különbség, hogy ha aposztrófokat használsz, akkor az értékben nem lehet aposztróf, macskakörmökkel körülzárt értékben pedig macskaköröm nem lehet.

Lássunk még egy példát többféle attribútummal:

szerkesztőbenböngészőben
<table border='1' cellspacing='4'>
  <tr> 
    <td valign='top'>fent</td>
    <td valign='middle'>középen</td>
    <td valign='bottom'>lent</td>
    <td>
    	így<br />
    	lesz<br />
    	magas<br />
    	a cella
    </td>
  </tr>
</table>
fent középen lent így
lesz
magas
a cella

Biztos kitaláltad már, hogy a <td> valign attribútumával a cellán belüli függőleges igazítást, a <table> cellspacing attribútumával pedig a cellák közti távolságot lehet megadni.

Hivatkozás (link, horgony)

Elérkeztünk a HTML lényegéhez, a hivatkozásokhoz — ettől lesz HT, azaz HyperText ez a Markup Language. Mentsd el az 'elso.html'-t és kezdj egy új fájlt! Hogy ne kelljen annyit gépelned, itt van a HTML fájl kerete:

<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

Írj be valami találó címet a <title> </title> tag-ek közé (pl. "Második"), és mentsd el a fájlt a saját neveden ugyanabba a mappába, ahová az 'elso.html'-t is mentetted! Ne feledd: csak semmi nagy betű, ékezet és szóköz, viszont ".html" kiterjesztés legyen! (pl. prim_andras.html)

A <body> </body> tag-ek közt kezdd el írni az oldal tartalmát: egy bekezdésbe (<p> </p>) egy idézetet, ami eszedbe jut! A bekezdés után írd be: Első oldal.!

És most megoldjuk, hogy a böngészőben erre a szövegre kattintva valóban az első oldalra jussunk: egyszerűen a hivatkozássá alakítandó szöveget <a> és </a> tag-ek közé tesszük. Az <a> tag href attribútumával adhatjuk meg, hogy melyik oldalra vezessen ez a hivatkozás:

<a href="elso.html">Első oldal.</a>

URI / URL

A href attribútum értékeként egy URI-t kell megadni. (Ne lepődj meg, hogy gyakran inkább URL-t írnak URI helyett: valójában az URL egyfajta URI.) Az URI gyakorlatilag egy cím — a fenti példában egy fájl neve. Ha ilyen egyszerű formában adjuk meg, akkor ez egy relatív hivatkozás, amit a böngésző ugyanabban a mappában fog keresni, ahol a hivatkozást tartalmazó fájlunk is van.

Most pedig következzék egy abszolút hivatkozás! Kezdj egy új sort (<br />), írd be kedvenc művészed nevét, tedd köré a <a href=""> és </a> tag-eket, majd keress az Interneten egy róla szóló oldalt! Másold be a böngészőből az oldal címét a href értékének fenntartott macskakörmök közé! Valami ilyen lesz:

<a href="http://hu.wikipedia.org/wiki/Jean-Pierre_Jeunet">Jean-Pierre Jeunet</a>

Itt az URI elején a http:// jelzi, hogy most egy teljes cím következik: ha ezt kifelejtjük, akkor a böngésző relatív hivatkozásként fogja értelmezni, és nem fog a megfelelő oldalra vezetni.

Kép

Dobjuk fel az oldalunkat képekkel! Másolj egy képet a HTML fájljaid mappájába, és illeszd be az <img /> tag segítségével! Ennek a tag-nek két attribútuma van, amit mindenképp meg kell adni:

szerkesztőbenböngészőben
Egy kép: <img src='cica.jpg' alt='cica' />
Egy kép: cica

Négy megjegyzés:

  1. Vegyük észre, hogy az <img /> tag-nek sincsen záró párja, ezért itt is a > elé teszünk egy szóközt és a / jelet.
  2. A kép maga nem kerül a HTML fájlba, csak egy hivatkozás, hogy hol található meg. Ezért, ha egy HTML fájlt átmásolunk valahova, akkor a benne megjelenítendő képfájlokat is át kell másolni.
  3. Ne keverd össze az src és a href attribútumokat!
  4. A képfájl nevében is csak ékezet nélküli kisbetűk, számok és az aláhúzás karakter legyen! Ha eredetileg nem így volna, akkor nevezd át a képfájlt!

Most pedig készíts a HTML fájljaid mappájában egy "img" nevű mappát! Töltsd le oda az alább látható "hopp" képet! Nyisd meg a szövegszerkesztőben az 'elso.html'-t, és illeszd be a végére az előbb letöltött képet! Az src attribútumban most meg kell adni azt is, hogy hol van a HTML fájlhoz képest a képfájl, hiszen nem ugyanabban a mappában vannak:

szerkesztőbenböngészőben
<img src='img/hopp.png' alt='hopp' />
hopp

Végül ebből a képből csinálj hivatkozást, melyre kattintva a "masodik.html" fájlt érhetjük el!

Ha nem sikerül egyedül, akkor kattints ide!

Karakter kódolás

Hogy a magyar ékezetes betűk is rendesen megjelenjenek a böngészőben (ne û legyen ű helyett), még egy kicsit dolgoznunk kell. A <head> </head> közé helyezzük el ezt a sort is:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />

Talán még jobb, ha inkább UTF-8 kódolást használunk — persze csak, ha ezt a szövegszerkesztőnkben is be tudjuk állítani: a notepad++ esetén pl. a Formátum menüben a Convert to UTF-8 menüponttal tehető ez meg — akkor az előbbi sor így módosul:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Egy lépés a jövőbe

Ha igazán követni szeretnéd a modern technológiát, akkor használj UTF-8 karakter kódolást, és XHTML-t. Ez nem lesz túl nehéz, mert ezen az oldalon csak olyat írtam, ami kompatibilis az XHTML szabvánnyal, csupán a dokumentumaid elején ne egyszerűen azt írd, hogy <html>, hanem ezt:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">

Bár ezt csak akkor javaslom, ha érdekel annyira, hogy hajlandó vagy utánanézni, hogy mit is jelentenek ezek.

Ha ellenőrizni akarod, hogy ez az oldal tényleg megfelel az XHTML szabványnak, akkor bökj az alábbi linkre:

Valid XHTML 1.0 Strict


Nagyjából ennyi kezdetnek. Az oldalak csili-vili formázását majd CSS-sel fogjuk végezni.