Honlapszerkesztés
Tartalomjegyzék |
Ez egy fontos címsor
Ez már nem annyira
Ez pedig a legkevésbé fontos
</pre> </blockquote>
Minden bekezdést a <p> paranccsal kezdünk, és a </p> paranccsal zárunk le.
<p>Ez egy bekezdés.</p> <p>Ez itt egy másik.</p>
Sortörés
Ha szövegünkben sortörést szeretnénk kikényszeríteni, használhatjuk a <br/> parancsot. (Ügyeljünk arra, hogy - mivel ennek a parancsnak sincs lezáró tagja, ne felejtsük el a "/"-jelet!)
Ebben a sorban itt<br/> egy sortörés lesz.
Kiemelés
A HTML-ben egyszerûen úgy végezhetjük el a kiemelést, ha a hangsúlyozni kívánt szövegrészt a <em> és </em> parancsok közé írjuk.
Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.
Képek beillesztése
Képeket az <img> paranccsal illeszthetünk be. Az "src" nevû parancs után írjuk a kép pontos nevét (ha nem a saját public_html mappánkban van, akkor az elérési utat is), a kép szélességét, magasságát (képpontokban mérve), és egy "alt" nevû parancs után adjunk egy rövid címet a képünknek. Ez utóbbi azért fontos, mert így azok is kapnak információt a képrõl, akik nem látják (mert pl. mobilon böngésznek).
Íme egy példa a saját mappánkban lévõ, 300x150 képpontú kutya.jpg nevû fájl beillesztésére:
<img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>
(Megjegyzés: a parancs végén lévõ /-jel azért szükséges, mert az "img" parancsnak - a szokásostól eltérõen - nincs lezáró tagja.)
Hivatkozások
A honlapunkon alapvetõen kétféle hivatkozástípust különböztetünk meg. Hivatkozhatunk:
- külsõ webhelyre
- weblap közepére
Hivatkozás külsõ webhelyre
Ezt a <a> kezdetû paranccsal végezhetjük el. Ha egy, a saját mappánkban lévõ weblapra hivatkozunk, elég a fájl nevét feltüntetnünk, de ha egy másik weblapra, meg kell adnunk a teljes webcímet. A <a>, </a> parancsok közé pedig a hivatkozás feliratát írjuk a következõképpen (ez, mint látni fogjuk, nem csak szöveg, hanem kép is lehet):
Ez egy link <a href="teszt.html>egy belsõ honlapra</a> mutat. Ez pedig egy <a href="http://www.kulso.hu>másik weblapra</a>. Erre a képre kattintva <a href="http://www.bme.hu><img src="bme.gif" alt="bme"></a> a BME honlapjára jutsz.
Elõformázott szöveg
Ha azt szeretnék, hogy pontosan úgy jelenjen meg a szöveg, ahogy azt mi beírtuk, érdemes a <pre>...</pre> parancsok közé írnunk. Például akkor, ha egy ehhez hasonló programkód-mintát szeretnénk megjeleníteni:
HAT := proc(x) if type(x, numeric) then if x<=0 then 0; elif x<=1 then x; elif x<=2 then 2-x; else 0; fi; else 'HAT'(x); fi; end:
Táblázat készítése
Táblázatot a<table border="1" cellpadding="10" cellspacing="10" width="80%"> <tr><th>Év</th><th>Eladások</th></tr> <tr><td>2000</td><td>18M Ft</td></tr> <tr><td>2001</td><td>25M Ft</td></tr> <tr><td>2002</td><td>36M Ft</td></tr> </table>
A "border" attribútum a keretszélességet adja meg pixelben. A "tr" elemmel a táblázat sorait különíthetjük el egymástól, a "th" a címsorok, a "td" az adatcellákat különbözteti meg. A "cellpadding" attribútummal a cella tartalma és a cellák széle közti, míg a "cellspacing"-gel az egyes cellák közti távolságot adhatjuk meg. A "width" paranccsal a cellák méreteit arányosan tudjuk változtatni.
Ez egy fontos címsor
Ez már nem annyira
Ez pedig a legkevésbé fontos
</pre> </blockquote>
Minden bekezdést a <p> paranccsal kezdünk, és a </p> paranccsal zárunk le.
<p>Ez egy bekezdés.</p> <p>Ez itt egy másik.</p>
Sortörés
Ha szövegünkben sortörést szeretnénk kikényszeríteni, használhatjuk a <br/> parancsot. (Ügyeljünk arra, hogy - mivel ennek a parancsnak sincs lezáró tagja, ne felejtsük el a "/"-jelet!)
Ebben a sorban itt<br/> egy sortörés lesz.
Kiemelés
A HTML-ben egyszerûen úgy végezhetjük el a kiemelést, ha a hangsúlyozni kívánt szövegrészt a <em> és </em> parancsok közé írjuk.
Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.
Képek beillesztése
Képeket az <img> paranccsal illeszthetünk be. Az "src" nevû parancs után írjuk a kép pontos nevét (ha nem a saját public_html mappánkban van, akkor az elérési utat is), a kép szélességét, magasságát (képpontokban mérve), és egy "alt" nevû parancs után adjunk egy rövid címet a képünknek. Ez utóbbi azért fontos, mert így azok is kapnak információt a képrõl, akik nem látják (mert pl. mobilon böngésznek).
Íme egy példa a saját mappánkban lévõ, 300x150 képpontú kutya.jpg nevû fájl beillesztésére:
<img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>
(Megjegyzés: a parancs végén lévõ /-jel azért szükséges, mert az "img" parancsnak - a szokásostól eltérõen - nincs lezáró tagja.)
Hivatkozások
A honlapunkon alapvetõen kétféle hivatkozástípust különböztetünk meg. Hivatkozhatunk:
- külsõ webhelyre
- weblap közepére
Hivatkozás külsõ webhelyre
Ezt a <a> kezdetû paranccsal végezhetjük el. Ha egy, a saját mappánkban lévõ weblapra hivatkozunk, elég a fájl nevét feltüntetnünk, de ha egy másik weblapra, meg kell adnunk a teljes webcímet. A <a>, </a> parancsok közé pedig a hivatkozás feliratát írjuk a következõképpen (ez, mint látni fogjuk, nem csak szöveg, hanem kép is lehet):
Ez egy link <a href="teszt.html>egy belsõ honlapra</a> mutat. Ez pedig egy <a href="http://www.kulso.hu>másik weblapra</a>. Erre a képre kattintva <a href="http://www.bme.hu><img src="bme.gif" alt="bme"></a> a BME honlapjára jutsz.
Hivatkozás weblap közepére
Ahhoz, hogy a saját weblapunkon belüli hivatkozást létrehozzunk, elõbb meg kell jelölnünk a szövegben egy helyet, ahova szeretnénk, hogy a link mutasson. Ezt úgy tehetjük meg, hogy az adott részt a <a name="azonosító">...</a> parancs közé zárjuk. Pl.:
Ebben a szövegben a <a name="tartalom">tartalom</a> szót jelöltük meg.
Késõbb, a weblap tetszõleges részén elhelyezhetünk egy linket a "href" paranccsal, ami az azonosítóval ellátott szövegrészre mutat:
Ha kíváncsi vagy a tartalomjegyzékre, kattints <a href="#tartalom">ide</a>!
Ha ez a célszövegrész nem ugyanazon a weblapon van, akkor a parancsot ki kell egészíteni az azonosító elérési útjával:
Ha <a href="http://www.valaki.hu/#tartalom">ide</a> kattintasz, megtekitheted egy honlap tartalmát.
Felsorolás-típusok
Alapvetõen háromféle típust különböztethetünk meg:
- rendezett (ordered),
- rendezetlen (unordered) és
- definíciós lista (definition list).
A rendezetlen listát <ol>...</ol>, a rendezetlent <ul>...</ul>, továbbá egy adott lista elemeit a <li>...</li> parancsok közé zárjuk. A definíciós listát <dl>-lel kezdjük, </dl>-lel zárjuk le, és a kifejezéseket <dt>...</dt>, a definíciókat <dd>...<dd> környezetbe foglaljuk:
Ez egy rendezett lista: <ol> <li>az elsõ listaelem</li> <li>a második listaelem</li> <li>a harmadik listaelem</li> </ol>
Ez egy rendezetlen lista: <<ul> <li>az elsõ listaelem</li> <li>a második listaelem</li> <li>a harmadik listaelem</li> </ul>
Ez pedig egy definíciós lista: <dl> <dt>az elsõ kifejezés</dt> <dd>ennek definíciója</dd> <dt>a második kifejezés</dt> <dd>ennek definíciója</dd> <dt>a harmadik kifejezés</dt> <dd>ennek definíciója</dd> </dl>
Persze a különbözõ listatípusokat kedvünk szerint egymásba is ágyazhatjuk. Például:
<ol> <li>az elsõ listaelem</li> <li> a második listaelem <ul> <li>az elsõ beágyazott elem</li> <li>a második beágyazott elem</li> </ul> </li> <li>a harmadik listaelem</li> </ol>
Elõformázott szöveg
Ha azt szeretnék, hogy pontosan úgy jelenjen meg a szöveg, ahogy azt mi beírtuk, érdemes a <pre>...</pre> parancsok közé írnunk. Például akkor, ha egy ehhez hasonló programkód-mintát szeretnénk megjeleníteni:
HAT := proc(x) if type(x, numeric) then if x<=0 then 0; elif x<=1 then x; elif x<=2 then 2-x; else 0; fi; else 'HAT'(x); fi; end:
Táblázat készítése
Táblázatot a<table border="1" cellpadding="10" cellspacing="10" width="80%"> <tr><th>Év</th><th>Eladások</th></tr> <tr><td>2000</td><td>18M Ft</td></tr> <tr><td>2001</td><td>25M Ft</td></tr> <tr><td>2002</td><td>36M Ft</td></tr> </table>
A "border" attribútum a keretszélességet adja meg pixelben. A "tr" elemmel a táblázat sorait különíthetjük el egymástól, a "th" a címsorok, a "td" az adatcellákat különbözteti meg. A "cellpadding" attribútummal a cella tartalma és a cellák széle közti, míg a "cellspacing"-gel az egyes cellák közti távolságot adhatjuk meg. A "width" paranccsal a cellák méreteit arányosan tudjuk változtatni.
Érvényesítés
Fontos, hogy miután elkészítettük honlapunkat, ellenõriztessük a W3C hivatalos oldalán tehetjük meg úgy, hogy megadjuk a weblapunk hivatalos elérési útját. Az esetleges hibák kijavítása után büszkén kitehetjük a cég logóját a honlapunkra (a validátor segít ebben).
Egyéb weboldalak
Ha felkeltette az érdeklõdésed a honlapszerkesztés, látogass el a következõ honlapokra:
- http://www.w3schools.com (angol)
- http://www.w3c.hu/forditasok/sikos/bevezet/start.htm (magyar - nagyjából ez e cikk forrása is...)
- http://www.w3c.hu/forditasok/sikos/bevezet/advanced.htm (haladóbb megoldások)
- http://www.w3c.hu/forditasok/sikos/bevezet/style.htm (a stílusok használatáról)
--Szabov 2006. december 10., 17:12 (CET)