Valami nem működik?                         Nézd át a gépelést mégegyszer!                 Hiányzik egy KACSACSŐR!           Hiányzik egy BETŰ!                Hiányzik egy SZÓKÖZ !!!                          Egyik sem?!!!                             Akkor tényleg én hiányzom?!!!

Segítség
1.lecke  2.lecke  3.lecke  4.lecke  5.lecke  6.lecke  7.lecke  8.lecke  9.lecke

+
fényújság     vonalak     kapcsolat egy lapon belül     frames (haladóknak!)














Az 1. leckéhez:
Névadás:
A dokumentum neve legyen rövid, "beszédes". Egy honlap első oldalának címe általában index.html.A parancs:<title>index</title>

Alapértelmezés:
  • A HTML alapértelmezésben azt a betűtípust használja, amelyik a webböngészőben, alapértelmezésben be van állítva; normál (nem vastagított, vagy aláhúzott) 2-es méretben és fekete színnel. A szöveg balra zárva rendeződik.
    Ezeket csak a <font> ill. pl: <center> utasítással lehet megváltoztatni. Érvényessége addig tart, míg a parancsot le nem zárod.
    . . .
  • A háttér fehér színű és (igaz nem látható) margó vesz körül. Ez akkor válik láthatóvá, amikor tapasztaljuk, hogy a gépelés nem egészen a lap szélén kezdődik. Frame-es (szegélyezett) oldalak esetében ez zavaró lehet. A margót is lehet szabályozni a következő paranccsal:
    marginwidth=0 marginheight=0 leftmargin=0 topmargin=0
    . . .
  • A linkek:A hivatkozási linkek alapértelmezésben olyan színűek, ahogyan a böngészőben be lettek állítva. Általában kék és aláhúzott, rákattintáskor pedig liláspiros.
    A <body után folyamatosa kell kiadni azt a paranccsort, amivel ezt is meg lehet változtatni:
    <body alink=#33ff88 vlink=#ff0000
    az eredmény: zöld link ráklikkelve piros.
    . . .
  • A target parancs:A hivatkozással jelölt új lap ott fog megnyilni, ahová a target parancs mutat. Alapértelmezésben új ablakban nyílik meg az új oldal. A böngésző a meglévő ablak helyére tölti be az oldalt a következő paranccsal:
    target=_self
    Frame-es oldalnál nagyon fontos a target utasítás, hiszen éppen abban van a lényege, hogy a képernyő mely részében nyíljon meg az új lap. (Pl. ne valamelyik keskeny keretrészben.)Erről részletesebben olvashatsz a +-ban a frame-nél!

    Vissza a lap tetejére


    A 2. leckéhez:
    Hátterek:
    • Az egész dokumentumnak, de azon belül táblázatoknak és azon belül a celláknak is lehet más-más színük. (Csak óvatosan kell bánni a színekkel!!!)
      . . .
    • A neked tetsző színekről készíts magadnak egy kis táblázatot, (mondjuk Exelben) és nyomtatsd ki, tartsd a gép közelében!
      A színkódok begépelésénél ne feledd a # -jelet!
      . . .

    • Háttérkép beillesztéséhez, a kevés árnyalatot tartalmazó, apró mintás képek az alkalmasak. A nagymintásak zavaróak lehetnek a szöveg és a képek alatt!!!


    Vissza a lap tetejére



    A 3. leckéhez:
    A betűk:
    • Az igénybe vehető betűtipusok nevét megtalálod a vezérlőpult beállításainál. Olyan betűket használj, amiben van ékezet az ó, ű, ő, betűkön is! (ezt így illik!)

      . . .
    • A betűtípus nevét pontosan úgy kell begépelni, ahogy az a listában van megírva.

      . . .
    • A betűnagyságra is ügyelni kell: a túl apró betű olvasásakor hamar elfárad a szem, az óriási, viszont gusztustalan!

      . . .
    • A döntés, aláhúzás, vastagítás lehetőségét ne alkalmazd túl sűrűn, mert akkor nem lesz megfelelő a kiemelő szerepre!

      . . .
    • A betű színe jól üssön el a háttértől, azaz világos háttérhez sötét betű és fordítva.

      . . .
    • A betű típusát elég egyszer megadni a dokumentum elején, a <body> után valamikor, a színt, vagy döntést, vastagítást, stb. elég közvetlenül a beirandó szöveg elé gépelni, csak azután el ne felejtsd a parancsot lezárni, mert tudod...? Egy parancs addig van érvényben, amíg azt le nem zárják!!!


    Vissza a lap tetejére



    A 4.leckéhez
    A szöveg:
    • Igazán jól tagolt szövegtömböt csak táblázat segítségével lehet kialakítani. (7. - 8. lecke)
      . . .
    • A fejezet-címeket, bekezdés-címeket középre, vagy balra rendezve, kissé nagyobb, vagy más módon kiemelve írjuk a szövegrészek fölé. A szöveg és a cím között nagyobb legyen a sortávolság, mint egyébként.
      . . .
    • A felsorolás alkalmazása is szépen tagolja a szöveget. Legalább az <ul><li>...<li>...<li>...</ul> parancsot alkalmazd! (jelen esetben is ezt láthatod)
      . . .
    • A jobbra (right), balra (left), középre (center) rendezést az egész testben, a táblázat belsejében, de az egyes cellákban is végezheted! (a cellákban egy kicsit másképp kell kiadni a parancsot, erre ügyelj!)


    Vissza a lap tetejére



    Az 5. leckéhez:
    Háttereket, webes elemeket(csíkok, gombok, stb.), képeket, mozgó gifeket az internetről is letölthetsz, magad is készíthetsz rajzoló-képszerkesztő programok segítségével, beszkennelhetsz könyvekből, vagy saját fényképalbumodból, digitális fényképezőgéppel, magazinok mellékleteként található CD-kről, stb.
    Jól válogatsd össze a képeket, méretük, színviláguk, tartalmuk és hangulatuk alapján csoportosítsd azokat.
    A felhasználni kívánt képfájlokat mindig MÁSOLD BE abba a mappába, amelyikben a HTML dokumentumot készíted!

    Vissza a lap tetejére



    A 6. leckéhez:
    A felsorolások (listák) készítésénél leginkább a sorrendre kell ügyelni.
    A készítendő listát tervezd meg papíron. Ahová számozásokat terveztél, egyszerűen gépelj <ol> utasítást, ahová csak bekezdéseket, vagy a bekezdések alá újabb bekezdéseket, mindig <ul> parancsot. A kiadott parancsokat akkor kell lezárni, amikor az adott felsorolásrésznek vége van.
    Az egyes sorokat pedig a <li> parancs után gépelheted. (ezt a parancsot nem kell lezárni.)

    Vissza a lap tetejére



    A 7. és 8. leckéhez:

    A táblázat készítésnél is figyelni kell a logikai sorrendre. A legtöbbet gyakorlással érheted el. Elég egy 3 x 2 - es táblán jól kigyakorolni a következőket:
    • A teljes tábla méretezése
    • A teljes tábla helyzete (jobb, közép, bal)
    • A tábla celláinak méretezése (a parancs:
      <td width=100 height=50>)
    • A cellabélések, cellatávolságok állítgatása (cellpadding, cellspacing). Ezt csak akkor teheted láthatóvá, ha írsz valamilyen adatot a cellákba!
    • Az egész táblázat színezése
    • A cellák színezése külön-külön
    • Cellák összevonása vízszintesen, vagy függőlegesen
    • A bordűrök (keretek) méretezése.
    • Ha a tábla hátterét nem módosítod, a border-t 0-ra állítod, akkor az így kapott táblázat "láthatatlan", leginkább szöveg rendezésére alkalmas.


    Vissza a lap tetejére



    A 9. leckéhez:
    A hangfájlok beillesztésével azért kell óvatosan bánni, mert nagyon lelassítják az oldal letöltését az Internetről.

    A legkisebb méretű (ám nem valami nagyszerű minőségű) wav fájl előállítására a Windows hangrögzítő eszköze is képes. A program indítását követően be lehet állítani a hangrögzítés tulajdonságait.
    Vannak hangszerkesztő programok is, amelyek - hasonlóan a képszerkesztőkhöz - át tudják alakítani más-más formátumba a hangokat, zenéket. A Web a wav formátumot támogatja.

    A képeknél ugyanaz az eljárás szükséges, mint a hangoknál. A Webhez megfelelő formátumba kell konvertálni (alakítani) a képfájlokat. Például az elérhetőbb Paint, vagy Photoeditor programokban megnyitott, WMF, BMP-s képeket GIF, ill. JPG-s formátumra lehet alakítani.
    Mentéskor meg kell figyelni azt, hogy mennyire romlik a kép minősége a tömörítés által. Ezután el lehet dönteni, hogy melyik formátumú képet illesszük be a dokumentumunkba.
    Példa:   
    A noci.jpg és a noci.gif összehasonlítása.
    58 Kb ill. 38 Kb méretűek, ebben a méretben a minőségük közel azonos, így most érdemesebb a GIF formátumot választani.

    v é g e


    Vissza a lap tetejére







    Fényújság:
    Azaz futó szöveg a dokumentumban. A parancsa a következő:
    <marquee> S Z Ö V E G</marquee>

    S Z Ö V E G



    A kutyus: puppy.gif
    __________________________


    Vissza a lap tetejére






    Vonalak: amelyek az egyes szövegrészeket, témákat szépen elkülönítik egymástól.
    A HTML nyelvben erre van lehetőség a <hr></hr> paranccsal
    Alapértelmezésben egy középre rendezett, árnyékolt 100% (teljes képernyő) szélességű vonal adott:

    Parancsa nagyon egyszerű: <hr></hr>

    További formázási parancsok:
    • shade       árnyék
    • noshade       árnyék nélkül
    • size       vonalvastagság
    • width       vonalhosszúság (meg lehet adni százalékban és konkrét számokkal is)
    • left, right, center       a már ismert elrendezési utasítások


    Példák:

    Középre rendezett 50% hosszú, 5-ös szélességű, zöld vonal
    (<hr width=50% align=center width=5 color=#33ff88></hr>)


    Balra zárt 200-as hosszúságú, 10-es vastagságú, színtelen, árnyékolt vonal.
    <hr width=200 align=left size=10></hr>)

    Jobbra zárt, 400 hosszú, 3-as vastagságú, nem árnyékolt, piros vonal
    (<hr align=right width=400 size=3 color=#ff0000 noshade></hr>)


    Ám te magad, képként bármilyen mintázatú vonalat beilleszthetsz. Ilyen vonalakat az Internetről is letölthetsz, de egyébként nagyon egyszerű előállítani bármely háttérképből;
    Például a noci.jpg-ből is lehet csíkor csinálni, csak a hosszúságát és a szélességét kell megfelelően megadni:





    <center><img src=noci.jpg width=400 height=10 border=0></center>

    Igaz nem lehet felismerni a képet és nem is igazán szép, de most nem ez a lényeg, hanem, hogy lássuk, hogyan lehet egy képből elválasztó vonalat csinálni.

    Ezen kívűl vannak mozgó vonalak: Ilyeneket GIF formátumban találunk az Interneten is. A beillesztésük a képek beillesztésével azonos, legtöbbször semmilyen méret - átalakítást nem igényelnek.
    Példa:

    izgi.gif


    Vissza a lap tetejére




    Kapcsolat a lapon belül:
    Itt a "Segítség" lapon is ezt a módszert alkalmaztam. Ezzel lehet azt megoldani, hogy egy kiválasztott szótól egy másik szóhoz "ugorjon" az oldal (és esetleg vissza).
    A parancsa hasonlatos a hivatkozási parancséhoz
    <a href= . . . >
    A lépések a következők:
    1. Készítsük el a teljes oldal szövegét.
    2. Válogassuk ki a megjelölendő szavakat. (Ezek általában fontosabb bekezdések.)
    3. A kiválasztott szó elé adjuk ki a következő parancsot:<a name=#kiskutya</a>
      . . .
    4. Ezt a folyamatot tegyük meg a kijelölt szavak mindegyikével. Közben egy lapra jegyezzük le, milyen nevet adtunk a bekezdéseknek.)
    5. A lap tetején helyezzünk el olyan szavakat, jeleket, amelyek a kiválasztott szavakhoz mutatnak.
    6. Ezek elé pedig ki kell adni a hivatkozási parancsot.<a href=#kiskutya</a>

    Nézzük a példát:
    Ugorjunk ezen a lapon a futkosó kutyushoz.
    Akkor előbb a feljebb található puppy szó elé a következő parancsot kell kiadni:
    <a name=kutyus>puppy.gif</a>
    Nos a kutyus meg van címezve. Ezek után, innen, ugorjunk a kutyushoz a KUTYUSHOZ! szótól. Írjuk a szó elé:
    <a href=#puppy>KUTYUSHOZ</a>

    Igen ám, de onnan valahogy vissza is kell jutni ide.

    A feladat megcsinálni ugyanezt visszafelé.
    Én megcsináltam, nézd meg, működik-e? A KUTYUSHOZ!
    Visszajutni ide a futó kutyus alatt látható zöld vonalról lehet.

    Vissza a lap tetejére




    Frames (frémek, vagy keretek):

    Ha a képernyőre nézel, akkor láthatod, hogy amikor az oldalak közt váltasz a HTML felirat a földgömbbel, illetve a számozott menügombok, a három oldalsó nagyobb menügomb mindig a helyén marad, csupán az oldal "középső" része változik tartalomban.
    Talán a "frame" ezt fejezi ki: Képet lehet cserélni a keretben.

    Frame-s Web oldal elkészítéséhez, minimum két HTML dokumentum szükséges, amelyből elkészítjük a harmadikat a "frame"-est, (általában) FŐOLDALT.



    Tegyük fel, hogy létezik egy kati.html és egy másik gabi.html oldalunk. Ebből fogjuk összeállítani a harmadik:luci.html-t, amelynek felső része kati.html, az alsó (a változó)gabi.html:
    luci.html:


    A teljes parancs a következő:
    (A </head>után!!!)

    <html>
    <head>
    <title>luci</title>
    </head>
    <frameset rows=100,* frameborder=0>
       <frame src=kati.html name=felso scrolling=no>
       <frame src=gabi.html name=also>
    </frameset>
    <noframe>
    <body>
    </body>
    </html>

    Ha függőlegesen szeretnéd a képernyőt felosztani a "rows" szó helyett "cols"-t kell írni.

    A szómagyarázat a következő:

    frameset rows     a keret felosztása sorokra (azaz vízszintesen)
    (100,*)     a felső részre 100 pixel jut, az alsó részre *=maradék
    frame src=    keret beillesztése
    name=    keretrész neve
    scrolling=no    ne legyen görgető sáv (a felső részben nincs is szükség rá!)
    /frameset    a keretfelosztás vége
    noframe    azok számára, akiknek a böngészője nem jelenít meg kereteket.(nem kötelező beírni)

    (Három résznél akkor sem érdemes több részre osztani a képernyőt, ha tuti vagy már benne.)