E weboldal egy W3C dokumentum alapján készült.
Az eredeti dokumentum az alábbi címen található: http://www.w3.org/MarkUp/Guide/.

HTML haladóknak | Stílusok használata

A HTML programozás alapjai

Ez egy rövid bevezető a HTML programok (weblapot megjelenítő html fájlok) írásáról. Sokan még mindig olyan egyszerű kézi eszközökkel írnak HTML dokumentumokat, mint a Windows Jegyzettömb vagy a Mac gépeken a SimpleText. Még ha nem is akarunk HTML-t közvetlenül szerkeszteni, és ahelyett, hogy egy HTML-szerkesztő (pl. a Netscape Composer vagy a W3C Amaya programja) használatát fontolgatnánk, ezen ismertető lehetővé teszi, hogy eleget tudjunk ahhoz, hogy jobban ki tudjuk használni az ilyen eszközöket, valamint HTML dokumentumainkat a böngészők szélesebb körének tegyük elérhetővé. Ha már biztos tudással rendelkezünk a HTML-szerkesztés alapjairól, megtanulhatjuk a stílusok használatát a CSS felhasználásával, valamint a HTML haladóknak című résznél megtekinthetünk néhány különlegesebb megoldást is.

Ugyanakkor - nem szentségtörés - sőt a tanulás egy jó módja, ha megnézi, mások hogyan kódolták html oldalaikat. Ehhez kattintson a "Nézet" menüre, majd annak "Forrás" menüpontjára és nézze meg, ezen oldalakon hogyan alkalmaztam az itt leírt megoldásokat.

• mi a HTML programozási nyelv funkciója és lényege
• hogyan kell címet adni a dokumentumunknak
• milyen módon kell a honlap főbb részeit megadni a HTML fájlban
• miképp lehet címsorokat és szakaszokat (bekezdéseket) megadni
• hogyan lehet kiemelni, hangsúlyozni a szövegben
• hogyan kell képeket elhelyezni a dokumentumban
• miképp lehet más oldalakra mutató hivatkozásokat (un. linkeket) megadni
• milyen módon lehet háttérzenét, háttérhangokat adni a dokumentumnak
• hogyan lehet fényújságot (Marquee) készíteni
• hogyan kell a különböző típusú felsorolásokat elkészíteni

Ha a komolyabb megoldások is érdeklik, tekintse meg a HTML haladóknak oldalt. Ott foglalkozunk többek között azzal, hogyan lehet:

• sortörést kikényszeríteni
• nem törhető szóközöket bevezetni
• különleges karaktereket használni
• oldalak közepére hivatkozni
• előformázott szövegeket használni
• képeket körülfuttatni szöveggel
• képeken belül klikkelhető részeket definiálni
• táblázatokat létrehozni
• egérérzékeny felületeket létrehozni és egyéb trükköket alkalmazni

Végül ha honlapja stílusát igazán jó minőségűvé kívánja tenni, és mindezt szakszerűen, akkor tekintse meg a Stílusok használata című oldalt. Ott megismerheti:

• hogyan használhatjuk a style elemet
• milyen módon hivatkozhatunk különálló stíluslapokra
• hogyan állíthatunk be oldalmargókat
• hogyan készíthetünk bal, jobb és első soros behúzásokat
• hogy állíthatjuk be a whitespace (üreshely) karakterek mennyiségét
  lent és fent
• miképp állíthatjuk be a betűtípust, -stílust és -méretet
• hogyan használhatunk kereteket és háttereket
• milyen módon állíthatunk színeket névvel és numerikus értékekkel
• miképp használhatunk stílusokat olyan böngészőkben, melyek nem tudják
  értelmezni a CSS-t

Most azonban - ha kezdők vagyunk - lássuk előbb az alapokat!

Ehhez azonban először végezzünk el egy egyszerű kisérletet. Azaz: az egérrel jelöljük ki (bal egérgombot nyomvatarva, "bekékítjük" a szövegrészt) és másoljuk le az oldal főcímét ("A HTML programozás alapjai") és az azt követő két bekezdést - egyszerre -, majd ezt illesszük be egy pl. a Jegzettömbbel megnyitott "txt" kiterjesztésű szövegfájlba. A beillesztett szövegrész a textfájlban nagyjából így fog kinézni:

                     A HTML programozás alapjai

Ez egy rövid bevezető a HTML programok (weblapot megjelenítő html 
fájlok) írásáról. Sokan még mindig olyan egyszerű kézi eszközökkel
írnak HTML dokumentumokat, mint a Windows Jegyzettömb vagy a Mac 
gépeken a SimpleText. Még ha nem is akarunk HTML-t közvetlenül 
szerkeszteni, és ahelyett, hogy egy HTML-szerkesztő (pl. a Netscape 
Composer vagy a W3C Amaya programja) használatát fontolgatnánk, 
ezen ismertető lehetővé teszi, hogy eleget tudjunk ahhoz, hogy 
jobban ki tudjuk használni az ilyen eszközöket, valamint HTML 
dokumentumainkat a böngészők szélesebb körének tegyük elérhetővé. 
Ha már biztos tudással rendelkezünk a HTML-szerkesztés alapjairól, 
megtanulhatjuk a stílusok használatát a CSS felhasználásával, 
valamint a HTML haladóknak című résznél megtekinthetünk néhány 
különlegesebb megoldást is.

Ugyanakkor - nem szentségtörés - sőt a tanulás egy jó módja, ha 
megnézi, mások hogyan kódolták html oldalaikat. Ehhez kattintson a 
"Nézet" menüre, majd annak "Forrás" menüpontjára és próbálja ki 
ezen oldalakkal, hogyan alkalmaztam az itt leírt megoldásokat.

Ha most e szövegfájlt elmentjük pl. "teszt" névvel, de nem "txt", hanem "html" kiterjesztéssel - a fájl teljes neve ekkor "teszt.html" lesz - és duplán klikkelünk a fájlnévre, akkor a fájl tartalmát a telepített alapértelmezett böngésző valahogy így fogja megjeleníteni:

Hát, ismerjük el, ez így nem egy csodálatos látvány. Amint azt látjuk, ez egy teljesen formázatlan megjelenítése a tesztfájlba bemásolt szövegünknek. Formája nem hasonlít sem arra az oldalrészre ahonnan a tartalmat kimásoltuk, sem a szövegfájlba másoltra. A böngésző ugyan megjelenítette a szöveget, ámde egybefolyóan, minden formázás nélkül!

A HTML programozási nyelv funkciója és lényege éppen az, hogy szövegeink és képeink, stb. valamilyen előre eltervezett és rendezett formátumban, áttekinthető, könnyen olvasható és esztétikus kinézettel jelenjenek meg, csakúgy mint ezen és más honlapokon az látható.
Ismerjük tehát meg a HTML programozási nyelv funkcióját és lényegét:

A HTML programozási nyelv funkciója és lényege
röviden

Ha valamely büngészőprogrammal az interneten is megtekinthető weblapot akarunk létrehozni, akkor a HTML programnyelvek egyikével egy speciális textfájlt (szövegfájlt) kell létrehoznunk - ebbe írva bele a honlapon megjelenítendő szövegünket és ebben elhelyezve pl. a honlapon megjelenítendő képek fájlneveire való hivatkozást. E szövegfájl kiterjesztése azonban nem "txt", hanem "htm" vagy "html", illetve újabban pl.: "xhtml", mert e kiterjesztésről ismeri fel a böngésző, hogy neki kell e fájl tartalmát a képernyőn megjeleníteni, és azt is, hogy hogyan, milyen formában. Például a "honlapom" nevű fájl teljes neve ez lehet:

  honlapom.html

Azt, hogy a böngésző hogyan, milyen formátumban, milyen elrendezésben és színekkel, stb. jelenítse meg a fájl tartalmát, azt a "<" és ">" jelek közé zárt szabvány szerinti parancskarakterrel, illetve parancsszöveggel kell közöljük a böngésző számára.

Jelöljön "X" valamely parancsjelet vagy parancsszöveget, amely megszabja a böngészőnek, hogy pl. a "Szép időnk van." mondat milyen formájú legyen a képernyőn. Ekkor a kezdő parancs így néz ki: "<X>", míg a záró parancs pedig így: "</X>". Az ilyen kezdő "<X>" és záró "</X>" parancselemeket "tag"-nek (ejtsd: teg-nek) nevezzük. E "parancsolás" működésére lássuk a következő egyszerű példákat. Ha a "Szép időnk van." mondatot önálló bekezdésben (P=Paragrafusban) kívánjuk megjeleníteni a képernyőn, akkor azt így jelöljük a html fájlban:

  <P>Szép időnk van.</P>

ahol "P" a bekezdés (más néven: a paragrafus) jele. (Megjegyzendő, hogy a parancskarakterek egyaránt írhatóak kis vagy nagy betűvel!), azaz a következő két jelölés egyenértékű az előzővel:

  <p>Szép időnk van.</p>
  <P>Szép időnk van.</p>

A képen a mondat ekkor kb. így fog látszani:
   Szép időnk van.

És ha, mondjuk félkövér betűkkel akarjuk megjeleníteni a képernyőn e mondatot, akkor a html fájlban ezt a következőképpen kell leírni:

  <P><B>Szép időnk van.</B></P>

Ez a honlapon így fog kinézni:
   Szép időnk van.

A "<B>" tag közli a böngészővel, hogy az őt követő szöveg, egészen a </B> zárótagig félkövéren jelenítendő meg. Ha még e mondatot pl. dölt betűkkel is akarnánk megjeleníteni, akkor azt vagy így tudatjuk a böngészővel:

  <P><I><B>Szép időnk van.</B></I></P>

vagy így

  <P><B><I>Szép időnk van.</I></B></P>

Ezek egyenértékű megadások. Az "I" a dölt betűt (italic) jelzi a böngésző számára.

Ez a lapon így fog látszani:
   Szép időnk van.

S ha még a sor középére is szeretnénk kiíratni e mondatot, akkor erre így utasítjuk a böngészőt:

  <CENTER><P><I><B>Szép időnk van.</B></I></P></CENTER>

Ez az oldaon így fog mutatni:

Szép időnk van.

A parancsok "egymásbaágyazásának" sorrendje természetesen most is felcserélhető.

A HTML programnyelv további elemeit és alkalmazási szabályait, illetve a rájuk vonatkozó forrásmunkák fellelhetőségét a következőkben nagy vonalakban ismertetjük.

A honlap címének formázása

Minden HTML dokumentumnak szüksége van egy címre. Formájának megadása az alábbi módon történik:

  <title>Első HTML dokumentumom</title>

Az "Első HTML dokumentumom" szöveget az igényeinknek megfelelően módosíthatjuk. A cím szövegét egy <title> kezdő tag előzi meg és egy </title> lezáró tag követi. A címet a dokumentumunk elején kell elhelyezni.

Ennek kipróbálásához a fenti példát gépeljük be egy szövegszerkesztőbe, mentsük az állományt "teszt.html" néven, majd tekintsük meg egy webböngészőben. Ha az állomány kiterjesztése ".html" vagy ".htm", a böngésző azt HTML dokumentumként értelmezi. A legtöbb böngésző a címet a böngésző ablakának felirataként annak címsorában jeleníti meg.

Pl. ennek az oldalnak az ablak legfelső címsorában megjelenő "GIN Professional Kft: Webkikötő - Bevezetés a HTML programozásba" szöveg képezi a <title>...</title> tagpárba illesztett címszöveget. A forrásban ez így néz ki:

  <title>GIN Professional Kft: Webkikötő - Bevezetés 
  a HTML programozásba</title>

A honlap főbb részeinek megadása
a HTML fájlban

Egy szabványos weboldal három fő részből áll:

A <HEAD>...</HEAD><BODY...>...</BODY> részt egy nyitó <HTML> és egy záró </HTML> tag között kell elhelyezni, míg a már említett <TITLE>...</TITLE> rész a HEAD>...</HEAD> részben kap helyet, és itt helyezhetünk el olyan további tag-eket, mint pl. a <META...> és a <LINK...> tag, vagy a <STYLE...>...</STYLE> tagpár.

Mindezek figyelembe vételével egy weboldal váza nagyjából így néz ki a forrásfájlban:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <HTML>
 <HEAD>
  <TITLE>Tesztoldal</TITLE>
  <META...>
   .
  <LINK...>
   .
  <STYLE...>...</STYLE>
   .
 </HEAD>
 <BODY...> 
  <P...>A képernyőn látható, a weblap tartalmát adó szövegek, 
  képek, stb. és a megjelenítő HTML tag-ek helye</P>
 </BODY>
 </HTML>

A <BODY...>...</BODY>-n belüli tag-ek
és használatuk módja

* * *

A szövegbeli címsorok és szakaszok (bekezdések vagy másképp: paragrafusok) megadása

Ha Ön már használt Microsoft Word-öt, akkor ismeri a különböző fontosság jelölésére szolgáló címsorok és szakaszok beépített stílusait. A HTML-ben hat címsor-szintet használhatunk. A H1 a legfontosabb, a H2 kissé kevésbé fontos stb., egészen H6-ig, a legkevésbé fontosig.

Egy fontos címsor megadása:

  <h1>Egy fontos címsor</h1>

és egy kicsit kevésbé fontos címsor:

  <h2>Egy kicsit kevésbé fontos címsor</h2>

E honlapon a "A HTML alapjai" főcím H1 szintű, míg a többi - kék színű címsor - mind H2 szintű.

Minden bekezdés (szakasz), amit írunk, a <p> tag-gel kezdődik. A </p> elhagyható, ellentétben a címsorok lezáró tag-jeivel. Például:

  <p>Ez az első bekezdés.</p>

  <p>Ez a második bekezdés.</p>

Kiemelés

Egy vagy több szót is kiemelhetünk a <em> tag-gel, például:

  Ez egy valóban <em>érdekes</em> téma!

Ez a honlapon - az "<em>" stílusbeállításától függően - így fog látszani:
   Ez egy valóban érdekes téma!

Oldalaink képekkel érdekesebbek, informatívabbak

Egy jó kép többet ér mint száz szó - a mondás szerint. Képekkel tehát weblapjaink jellegzetessé tehetők és a képek nagyban segítenek közlésünk sikeres megértésében. A képek beillesztésének egyszerű módja az <img> tag használata. Tegyük fel, hogy van egy "peter.jpg" nevű fájlunk ugyanabban a könyvtárban/mappában, mint a HTML fájl. A kép 200 képpont széles és 150 képpont magas.

  <img src="peter.jpg" width="200" height="150">

Az src attribútum a képfájlt nevezi meg. A szélesség és a magasság megadása nem feltétlenül szükséges, de segíthet a weblap megjelenítési sebességének javításában. Valami még mindig hiányzik! Azoknak, akik nem láthatják a képet, szükségük van egy leírásra, melyet a kép megtekintése helyett elolvashatnak. A következőképpen adhatunk egy rövid leírást a képhez:

  <img src="peter.jpg" width="200" height="150" 
  alt="Barátom, Péter">

Az alt attribútum egy rövid leírás megadására használható, ebben az esetben "Barátom, Péter". Komplex képeknél szükség lehet egy hosszabb leírásra is. Ha feltételezzük, hogy ez a leírás a "peter.html" fájlban van, a következő megadási módot alkalmazhatjuk, a longdesc attribútumot felhasználva:

  <img src="peter.jpg" width="200" height="150" 
  alt="Barátom, Péter" longdesc="peter.html">

Képeket sokféleképpen készíthetünk, például digitális fényképezőgéppel, szkennerrel, esetleg egy festő- vagy rajzolóprogrammal. A legtöbb böngésző meg tudja jeleníteni a GIF és JPEG formátumú képeket, az újabb böngészők pedig a PNG formátumot is értelmezni tudják. A hosszú hálózati letöltést elkerülendő, mellőzzük a nagyméretű képfájlok használatát.

Általánosságban elmondható, hogy a JPEG a legjobb a fényképekhez és egyéb egyenletesen változó képekhez, míg a GIF és a PNG az olyan grafikákhoz jó, amely egyenletes szín-, egyenes- és szövegfelületeket tartalmaz. Mindhárom formátum támogatja a progresszív renderelési opciókat, ahol a kép nyers változata jelenik meg először, majd progresszíven finomodik.

Egy kép lehet statikus (azaz állókép), pl.:

De egy kép lehet animált (azaz mozgókép) is, pl.:

A képek weblapon történő további elhelyezési és felhasználási lehetőségét és módszereit a HTML haladóknak című weboldalon itt , illetve a itt láthatjuk.

Más oldalakra történő hivatkozások

A webet az teszi igen hatákonnyá, hogy hivatkozásokat definiálhatunk, melyek egyik oldalról a másikra, vagy egy oldal egyik helyéről egy másik helyére hivatkoznak, és ezek a hivatkozások egyetlen gombnyomással követhetők. Néhány egyszerű kattintás körülvihet minket nemcsak egy honlapon, hanem a világon is!

Szöveg, mint hiperhivatkozás

A hivatkozások (linkek) az <a> tag-gel definiálhatók. Definiáljunk egy hivatkozást arra az oldalra, amely a "peter.html" fájlban van megadva. Ehhez azonban ki kell egészítenünk az <a> tag-et a "href" paramméterrel és "=" jel után annak "peter.html" értékével. A "href" paraméter értéke adja meg a böngészőnek, hogy ha a linkre kattintunk, melyik elnevezésű HTML oldalt kell elérni és az hol található. A hivatkozás tehát a forrásszövegben így fog kinézni:

  Ez egy link <a href="peter.html">Péter honlapjára</a>.

Az <a ... > és a </a> közötti szöveg a hivatkozás felirataként szolgál. A felirat általában kék színű és aláhúzott szöveg.

Ez a honlapunkaon így fog mutatni:
Ez egy link Péter honlapjára.

(Ez a "peter.html" nevű honlap valójában nem létezik, csak a példa kedvéért adtunk meg egy fiktív lapnevet.)

Egy - általában - másik, távoli számítógépen (szerveren) levő weboldalra történő hivatkozáshoz meg kell adni az oldal teljes webcímét, azaz az oldal elérési útvonalát (ezt gyakran URL-nek is mondjuk). Például a www.w3.org-ra történő hivatkozáshoz ezt kell írnunk:

  Ez hivatkozás a <a href="http://www.w3.org/">W3C</a>-re.

Ezt honlapunkaon így fogjuk látni:
Ez hivatkozás a W3C-re.

Kép, mint hiperhivatkozás

Egy kép is lehet hiperhivatkozás, például a következő megoldás lehetővé teszi, hogy egy cég logójára kattintva annak honlapjára jussunk:

  <a href="http://www.w3.org/"><img src="w3c.png" alt="w3c honlap"></a>

Ezt a honlapon így fogjuk látni:

(Ha az egérkurzort a kép fölé visszük mutató kézzé változik, klikkelés után pedig kapcsolódhatunk a w3c oldalhoz.)

És egy másik e portálról származó példa:

Itt az <a> tag a "HREF" paraméter mellett ki van egészítve a style="text-decoration: none; " és a target="_blank" paraméterekkel az idézőjelek közötti értékkel megadva. Előbbi eredményezi azt, hogy nincs keret a kép körül, az utóbbi pedig azt, hogy az új oldal új ablakban jelenik meg.

Háttérzene, háttérhangok

Internet Explorer böngészők számára egyszerűen tudunk pl. háttérzenét biztosítani. (Erre is példát hallunk az alábbi "GIN Professional Kft" linkre klikkelve - feltéve, hogy van a számítógépünkben konfigurált hangkártya, és van a számítógéphez illesztett hangszóró!).
Ehhez elég egy <BGSOUND SRC="copacabana.mid" LOOP="-1"> felépítésű tag-et elhelyeznünk a dokumentum <HEAD>...</HEAD> ún. "fej"-részében, ahol az "SRC="copacabana.mid" a hangfájl forrását adja meg - itt most épp "copacabana.mid" a lejátszandó hangfájl -, míg a 'LOOP="-1"' vagy ami ezzel egyenértékű a 'LOOP="INFINITE"' azt jelzi a böngészőnek, hogy végtelen sokszor kell lejátszania a hangfájl tartalmát - ami bármi lehet, pl: zene, beszéd, zörej és más effekt. (Nyilván, ha kétszer akarjuk lejátszatni a hangokat, akkor loop="2"-őt kell megadni.)
A háttérhangfájl lehet wav, mid vagy cd kiterjesztésű (típusú) hangfájl.

FONTOS! Ha a hangfájl forrását csak így adjuk meg: SRC="copacabana.mid", akkor a hangfájlnak egy könyvtárban kell lennie az őt hívó HTML fájllal!

Más böngészők (pl.: Netscape, Mozilla, Firefox, stb.) számára háttérhangot a <BODY>...</BODY> részen belül egy <EMBED SRC="copacabana.mid" HIDDEN="TRUE"> felépítésű tag-ben helyezhetünk el (ahol a HIDDEN="TRUE" az objektum rejtett voltát jelöli). Azonban - ha a BGSOUND-ot is alkalmaztuk a fejrészben, a zavaróan keveredő dupla hangzás elkerülésére - ezt egy <script language="JavaScript1.2">...</script> tagpáron belüli (JavaScript) feltételes "if" utasításban kell elhelyeznünk. Ennek egy módja - további kommentár nélkül - az alábbi lehet:

<script language="JavaScript1.2">
<!--   
if (navigator.appName == "Netscape") 
{
 document.write('<EMBED SRC="copacabana.mid" HIDDEN="TRUE">');
}
-->
</script>

Ez az utasítás csak egyszer fogja a zenét lejátszani!
FONTOS! A forrásfájlba beírt utasítások leírásának pontosan így kell kinézniük, különben a kód nem fog végrehajtódni!

Így alkalmazva együtt (egy html fájlon belül) a BGSOUND és az EMBED tag-ben a háttérhangot, az csak az egyikkel fog - a böngésző típusának megfelelővel - hallatszani, s nem zavaró "visszhangzással".
Persze annak semmi akadálya, hogy csak az egyik tag-et (csak BGSOUND-ot vagy csak EMBED-et, utóbbit ekkor a <script>... if {...}...</script> nélkül!) használjunk, ám akkor - értelem szerűen - csak a neki megfelelő böngészőtípus fogja tudni a háttérhangot lejátszani (az EMBED-et mind, a BGSOUND-ot csak az MSIE).

Fényújság (Marquee)

Érdekes hatású a szövegek, képek, linkek fényújságszerű mozgatása reklám- vagy más figyelemfelkeltést szolgáló szövegek és/vagy képek és/vagy linkek folyamatosan mozgó megjelenítésével. Ez a mozgás lehet bal vagy jobb, le vagy fel irányú, avagy alternáló.

Ezt a hatást a <MARQUEE>...</MARQUEE> tag-pár között megadott mozgatandó kép- és vagy szöveg- ill. link elemekkel lehet megvalósítani, különböző előtér és háttérszínekkel. Voltaképpen tehát a MARQUEE tag-pár között nem csak egyszerű szöveg, hanem hagyományos HTML kódolású szöveg és kép, ill. link is szerepelhet, és az effektus többnyire akkor látványos eléggé, ha az ablak nagyobb részében látható a mozgás, amint ez a következő példákban megtekinthető:

Első példa:

** ** ** Bővülő NASA kép- és videóadatbázis letölthető elemekkel az univerzumról, a naprendszerről, a Földről és az űrhajósokról itt! ** ** ** A HTML programozásról kezdőknek és haladóknak itt! ** ** ** Szeretnél Smile-t? Választhatsz kedvedre valót itt! ** ** ** e-NYENYI bejelentő lap vm. használati leírás letöltése és ügyfélkapus belépés itt! ** ** ** 2008.01.01-től cégadatok, székhely, tulajdonosok, képviselők, stb., INGYENES lekérdezése az IRM-ből itt! ** ** ** TEÁOR'03-ról '08-ra itt! ** ** ** FORDÍTOTT ÁFA '08 január 1-től és május 1-től, magyarázattal, példákkal itt! ** ** ** A FOGLALKOZTATOTTAK 2008.01.01-TŐL KÖTELEZŐ APEH BEJELENTÉSÉNEK LETÖLTHETŐ NYOMTATVÁNYA (08T1041) ÉS MÓDOSULT HASZNÁLATI ÚTMUTATÓJA itt! ** ** ** FOGYASZTÓVÉDELMI FEKETELISTÁK ** ** ** TEAOR ** ** ** FEOR ** ** ** WEBKAMERÁK itt! ** ** ** ÁRESŐ! ** ** ** Adók minimalizálása. ** ** ** Mikor, mit kell bevallani, fizetni? Adónaptár itt! ** ** ** Magánszemélyek, egyéni vállalkozók, társaságok, EVA alanyok részére könyvelés, adóbevallás, bér- és járulékelszámolás, beszámoló készítése - visszamenőleg is! ** ** ** Ellenőrzik vállalkozását? Netán meg akarják bírságolni? Ne aggódjon! Képviseletét hatékonyan ellátjuk az APEH, a TB, az önkormányzat és a cégbíróság előtt. ** ** ** Pénztár- és bankkezelő szoftver kihelyezése ügyfelünkhöz, igénye szerint. ** ** ** Adózási és gazdasági tanácsadás. ** ** ** Weblapok készítése, karbantartása - teljes ügyintézéssel. ** ** **

Ez e portál kezdőlapján fut alsó-felső keretben, s futásiránya megfordul, amíg az egérmutatót fölötte tartjuk. Linket és képet is tartalmaz. Eredeti helyén megtekinthető itt!

Egy másik példa:

Parkolás:

Ez pedig szintén ezen a portálon fut, az elérhetőség lapon (a háttér átlátszó!). A felette tartott egérkurzorral megállítható. Megtekinthető itt!
Érdemes e példák forrását a "Nézet" menüben megtekinteni!

A Marquee nyitótag néhány paramétere és adható értékének jelentése:

BEHAVIOR = alternate/scroll/slide - mozgásirány = balra-jobbra/átlapozás (scroll) a direction által meghatározott irányba/a szöveg levágása az előző mintájára
BGCOLOR = háttérszín kódja vagy neve
DATAFORMATAS = text/html - adatformátum - sima szöveg/html; Alapértelmezés: html
DIR = ltr/rtl - szöveg olvasási irányának meghatározása; ltr=balról jobbra (alapértelmezés); rtl = jobbról balra
DIRECTION = left/right/up/down - scrollozás iránya - bal/jobb/fel/le; Alapértelmezés: left
HEIGHT= "n" - Hány %-ot, vagy képpontot foglalhat el a HTML-tag a képből.
HSPACE= "n" - Mekkora legyen a HTML-tag mellett a szabad hely vízszintesen?
VSPACE= "n" - Mekkora legyen a HTML-tag mellett a hely függőlegesen?
LOOP= "n" - Hány ismétlés után álljon le a mozgatás. (Végtelen = -1)
SCROLLAMOUNT= "n" - Hány pixel elcsúszással rajzoljon ismét a MARQUEE.
SCROLLDELAY = "n" - Hány millimásodperc után rajzolja újra a HTML-taget.
TITLE= "cím" - Mi jelenjen meg, ha az egeret fölé visszük?
WIDTH= "n" - Az ablak hány százalékában jelenjen meg a MARQUEE.

A tag két eseménykezelője és lehetséges értéke:

onMouseOver="direction='right'" - Ha az egérmutató a fényújság fölé kerül a mozgás iránya balról jobbra vált.
onMouseOut="direction='left'" - Ha az egérmutató a fényújság fölül lekerül a mozgás iránya jobbról balra vált.
Vagy:
onMouseOver="direction='left'" - Ha az egérmutató a fényújság fölé kerül a mozgás iránya jobbról balra vált.
onMouseOut="direction='right'" - Ha az egérmutató a fényújság fölül lekerül a mozgás iránya balról jobbra vált.
Továbbá:
onMouseOver="stop();" - Ha az egérmutató a fényújság fölé kerül a mozgás megáll.
onMouseOut="start();" - Ha az egérmutató a fényújság fölül lekerül a mozgás elindul.

A két eseménykezelőt (onMouseOver="..."; onMouseOut="...") - így párban - szintén a nyitó tag-ben kell elhelyezn, pontosan az itt leírt formában (szintaxis szerint) - a sorrend lényegtelen.

Egy példa a két eseménykezelő alkalmazásának szintaxisára:

<Marquee bgcolor="#00ff00" loop=-1 width="75%" title="reklám" 
onMouseOver="direction='right'" onMouseOut="direction='left'">
Szappan * * Mosópor * * Fogkrém * * Parfűm * * Festékek * * sportcikkek
</marquee>

s ez így működik:

Szappan * * Mosópor * * Fogkrém * * Parfűm * * Festékek * * sportcikkek

(Ha az egérmutatót a zöld sáv fölé visszük, a fényújság jobbfelé kezd mozogni, ha elvisszük onnan, akkor újból balra mozog.)

Az előbbi példa, csak felfelé-lefelé mozgással:

Szappan * * Mosópor * * Fogkrém * * Parfűm * * Festékek * * sportcikkek

s ez így néz ki a HTML fájlban leírva:

<Marquee direction="up" bgcolor="#00ff00" loop=-1 width="120" height="100" 
title="reklám" onMouseOver="direction='down'" onMouseOut="direction='up'">
Szappan * * Mosópor * * Fogkrém * * Parfűm * * Festékek * * sportcikkek
</marquee>

A linkelt szöveget felfelé mozgató fényújságra, megállítással, egy élő példa itt látható a hivatkozott honlap bal alján!

A "visszafelé mozgatás" akkor lehet praktikus, ha hosszú vagy sok a megjelenítendő szöveg ill. kép, stb. - ekkor ugyanis, ha egy részt nem tudtunk elolvasni, az "visszahozható", míg pl. a rövidebb, de alternáló mozgású fényújsánál a megállítás-újraindítás lehet a jó megoldás.

Három felsorolás-típus

A HTML három felsorolás-típust támogat. Az első típust gyakran rendezetlen listának nevezik. Ez a <ul> és <li> tag-eket használja, például:

  <ul>
    <li>az első listaelem</li>

    <li>a második listaelem</li>

    <li>a harmadik listaelem</li>
  </ul>

Ez a képernyőn megjelenő weblapon így néz ki:

• az első listaelem
• a második listaelem
• a harmadik listaelem

Megjegyzendő, hogy a listát mindig a </ul> lezáró tag-gel kell befejezni, de a </li> opcionális, tehát elhagyható.

A második felsorolás-típus a számozott lista, melyet gyakran rendezett listának is neveznek. Ez az <ol> és <li> tag-eket használja. Például:

  <ol>
    <li>az első listaelem</li>

    <li>a második listaelem</li>

    <li>a harmadik listaelem</li>
  </ol>

Ez a honlapon a valóságban így mutat:

1. az első listaelem
2. a második listaelem
3. a harmadik listaelem

A rendezetlen listákhoz hasonlóan a felsorolást mindig le kell zárni a </ol> lezáró tag-gel, de a </li> lezáró tag opcionális, tehát elhagyható.

A harmadik és egyben utolsó felsorolás-típus a definíciós lista. Ez kifejezések és azok definícióinak felsorolását teszi lehetővé számunkra. Ez a felsorolás-típus a <dl> tag-gel kezdődik és a </dl> tag-gel végződik. Minden kifejezés egy <dt> tag-gel, minden definíció egy <dd>-vel kezdődik. Például:

  <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>

Ez a valóságban így látható:

az első kifejezés

ennek definíciója

a második kifejezés

ennek definíciója

a harmadik kifejezés

ennek definíciója

A lezáró </dt> és </dd> tag-ek opcionálisak, tehát elhagyhatók. Megjegyzendő, hogy a felsorolások egymásba ágyazhatók. 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>

Ez a valóságban ilyen:

1. az első listaelem
2. a második listaelem
   • az első beágyazott elem
   • a második beágyazott elem
3. a harmadik listaelem

Hosszabb listaelemekhez szakaszok és címsorok stb. is használhatók.

További ismeretek helye

Ha kész arra, hogy még többet tudjon meg a HTML-ről, nézze meg a HTML haladóknak és a stílusok használata című részeket.

A W3C HTML 4.0 ajánlása a HTML szerzői specifikációja is elérhető. Egy kevésbé technikai információforrás lehet, ha beszerez egyet a sokféle HTML-ről szóló könyv közül.

Jó munkát!