Kataporta webdesign, webhosting

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 dokumentum neve:<title>rövid és frappáns :-)</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 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.
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
Néhány paraméter:
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 elozo mintájára
BGCOLOR = háttérszín kódja vagy neve
DATAFORMATAS = text/html - adatformátum - sima szöveg/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épbol.
HSPACE = "n" - Mekkora legyen a HTML-tag mellett a szabad hely vízszintesen?
VSPACE = "n" - Mekkora legyen a HTML-tag mellett a hely függolegesen?
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.
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="help.php#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, illetve a menügombok, 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.


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.)
Vissza a lap tetejére



KATAPORTA - HONLAPKÉSZÍTÉS, WEBDESIGN, WEBHOSTING
0670 261 2135


kata@kataporta.net
Site MeterGoogle PageRankMegosztás
Copyright © kataporta.net 2017 | web: KataPorta.net