HTML Iskola


   Itt vagyok megint a második résszel. A második rész előtt megtalálod az első részt is, olvassd el mégegyszer, hiszen ismétlés a tudás mamája :) Az új második kötet tartalmazza, hogy hogyan kell táblázatot létrehozni, adunk majd a képeknek térképet/'map'-ot, és belekukkantunk a Java-Script-ek bonyolult világába. Lehet, hogy ez nem igazán érdekes, de vonalat is fogunk rakni.

I. Fejezet


Most megtanulod, hogy hogyan kell HTML-es fájlba bármit is írni. Először a legalapvetőbbet tanuljuk meg, azt, hogy hogyan írsz ki szöveget a képernyőre. Sajnos nem írhatom be úgy i-de, ahogy kell, és éppen ezért, a < jelek helyett, [ jeleket fogok írni. Azt semmiképpen se fe-lejtsd el, hogy neked majd < ilyen, és > ilyen jeleket kell írnod. Szóval térjünk vissza a lé-nyegre!
Ha csak úgy beírsz a fájlba egy szöveget, akkor az a Windows alapméretezett betűkkel, és színekkel jelenik meg a bal oldalhoz zárva. Adjuk meg a szöveg paramétereit is, például a betűtipust.
[font face="BETŰTIPUS"]Ide utána pedig a beállított betűtipusú szöveg
A 'BETŰTIPUS' helyére írj be valamilyen ténylegesen létező betűtipust, ezeket megnézheted a Paint Shop Pro-ban, vagy a Word-ben. Pl.:Arial, Verdana, Westminster, Amaze, de ezek min-den gépen különbözők, mert ezek a feltelepített programoktól függenek.

II. Fejezet


Következzék a szöveg színnének megadása. Ezzel nem fogsz boldogulni Paint Shop Pro nél-kül, mert a színek HEX-esen vannak kódolva. :)
[font face="Arial" color="193a83"]
Biztos észrevetted az új összetevőt a COLOR-t. Ez után, macskakörmökbe zárva kell megadni a színt. Majd ha átjössz akkor megbeszéljük ezt. Segítségképpen így előre: be lehet írni angol szavakkal színeket is, de csak 16-ot. Ezek: black, white, red, blue, green... + ilyesmik. A HEX-ben kódolt színek valahogy így néznek ki: 000000=fekete ,ffffff=fehér. Egyébként az alapmére-tezett szín általában a fekete. Ennyi elég is a színekből.

III. Fejezet


Az iratokat bizony méretezni is lehet. A méret nem dpi-ben mérődik, ahogy a Word,ben Paint Shop Pro-ban, hanem egy HTML-es mértékegységben. Ez minimum 1, maximum 7 lehet. Így néz ki:
[font face="Arial" color="000000" size=4]
Gondolom egyértelmű volt, hogy a méretet a 'SIZE' jelöli, hisz ez angolul méretet jelent.
Ez még a szövegekhez tartozik, de nem változtatja a kinézetük. Ha véget akarsz vetni egy sornak, hogy megformázd a szöveget, akkor írd be: [br] Ezzel új sort kezdessz.

IV. Fejezet


Lassan áttérünk a bonyolultabb műveletekhez is, most következik a dolgok elhelyezése. A dolgok alatt ezeket értem: szövegek, képek, táblázatok és még minden ami a HTML-ben benne van. Három irányba lehet zárni a dolgokat: balra, középre, és jobbra. Az alapmérete-zett, vagyis az, amelyik autómatikusan beáll, az a bal, vagyis left. Rakjunk középre valamit:
[center][font face="Arial"]Középre zárt szöveg szöveg[/center]Alapméretezett helyen lévő szö-veg
Ezzel zárod közére a szöveget, vagy képet vagy akármit. Mivel mondtam, hogy jobbra is lehet igazítani/zárni a sorokat, ezért azt is megmutatom. Ez sokban fog különbözni a középre zárás-tól.
[p align="right"]Jobbra zárt szöveg[/p]Alapméretezett helyen lévő szöveg
Ennyi. A balra helyezénél is ugyan ez, csak a 'right' helyett left-et kell írni. A balra zárást csak akkro éri meg használni, ha az előtt valamilyen zárást(középre, jobbra) nem csuktál be, mivel ez az alapméretezett, de ezt már említettem.

V. Fejezet


Nagyot lépünk, és megtanulunk képeket rakosgatni a lapra. Egyszerűbb lesz mint gondolnád:
[img src="A képneve.a kép kiterjesztése"]
A 'kép neve' helyére írd be a fájl nevét, a 'kép kiterjesztése' helyére pedig a kiterjesztését. A-jánlom a JPG, és GIF fájlformátumokat. Mivel a képnek van magassága és szélessége, ezért azt is meg lehet adni, ha netán át akarod méretezni a képet.
[img src="név.kit" width="X" height="Y"]
A 'width' a szélessége, a 'height' a magasság. Az x és y helyére írd be a megfelelő koordi-nátákat, méreteket. Ezt én nem tarom felettéb fontosnak, de a képnek lehet keretet is adni, angolul border-t.
[img src="név.kit" width="X" height="Y" border=2]
A kép kerete így 2 pixel vastag lett. Ha a kép amit beraksz a page-re, nem igazán tükrözi, hogy mit jelent, vagy mit akar jelenteni, akkor írj egy Alt-ot. Az alt akkor jelenik meg, ha a kurzor a kép felett van. Így kell használni:
[img src="név.kit" width="X" height="Y" border=2 alt="Vmi. szöveg"]
Az alt után írd be azt a szöveget amit meg akarsz jeleníteni. Oké is. Ezeket a dolgokat azért raktam egy fejezetbe, mert szorosan egyméshoz kapcsoldnak, és a késöbbiekben is így fogok tenni. És ha megnézed, a kép megjelenítése fele annyira sem bonyolult mint a szövegé, na meg sokkal rövidebb is.

VI. Fejezet


Igaz, hogy a filmek az oldalon való megjelenítése nem éppen gyors dolog a net-en, és éppen ezért nem is alkalmazzák, de helyi oldalakon jól mutat. Nem sokban különbözik a kép megj-től, de mások a változók, és a filmet el is lehet indítani:
[img dynsrc="név.avi"]
Így a film eredeti méretében jelenik meg, és a fájl elindításakor csak egyszer játsza le. Megta-nuljuk a filmet akkor lejátszani amikor akarjuk.
[img dynsrc="név.avi" start="mouseover"]
A film most csak akkor indul el, ha egerecske rá mászik. Én csak ezt szoktam használni, mert ha a fájl indításakor a film is elindul, és mondjuk netről futtatjuk az oldalt, akkor semmit nem látunk az egyszer történő lejátszásból. Ha viszont ezt is beírjuk, akkor majd csak akkor jelenik meg a film ha az egér fölötte van. Természetesen itt is alkalmazható a "width="X" és height="Y", ebben megadható a szélesség és a magasság, ha esetleg az animáció mérete nem megfelelő.

VII. Fejezet


Mivel elég sok helyen lehet hallani, hogy hangokat is megszólaltatnak. Mi is megtanuljuk az ilyesmi dolgot. Nem lehet túl sok dolgot kezdeni a hangal, csak elindítani, meg ismételni. Saj-nos a HTML-es fájlban történő hangok megszólaltatására még elég 'fejlelen', ezért csak WAV-ot, és MID-et lehet lejátszani.
[bgsound src="név.wav/mid"]
Ezen a sima megszólaltatáson kívül lehet a hangot ismételni is:
[bgsound src="név.wav/mid" loop="Szám/infinite"]
A 'loop' után vagy beírsz egy számot ahányszor ismételni akarod a hangot, vagy beírod, hogy infinite, és úgy végtelenszer ismétli.

Remélem ez a hét fejezet alaposan kimeríti a témát, majd még írok erről. Egyébként ha nem nézted eddig meg, akkor ez azért fontos lehet: írtam egy kis e-mail-t a címedre, igaz, hogy nem sokat, ezzel a fájlal szeretném kipótolni a levelet. Egyébként ma megpróbálok csinálni egy olyan HTML-es Magyarország-térképet, ahol a városra klikkelve megjelennek nevezetességei, képek meg ilyesmi :)) Ráadálus ne lepődj meg, ha legközelebb is megkapod ezt a fájl, legalábbis a mostani tartalom mellett sok-sok mással kibővítve.



Itt kezdődik a régi levél kibővítése, először a táblázatokról lesz szó, utána a képeknek adunk úgynevezett 'map'-ot, és egy kicsit beletekintünk a JavaScriptek bonyolult világába. Igaz, hogy még nem említettem, hogy milyen egy új HMTL-es fájl, mert túl könnyűnek találtam, de most azt is leírom, hogy mégis tudj valamit kezdeni magaddal. Kezdjük is el:

VIII. Fejezet


Kétfajta táblázatról szoktunk beszélni, egyik a szöveges táblázat egy sorban, amilyenben ezt a szöveget is látod, a másiknak van kerete, és több oszlopból áll. Lássuk az előbbit:
[table width="X"]
Természetesen az X helyére egy szám kerül, ami a táblázat szélességét jelöli pixelben. Az a táblázat előnye, hogy egy nagyon hosszú sorba írt szöveget úgy tagol, hogy a leghosszabb sor is csak X pixel lehessen. A táblázatnak itt is lehet keretet, vagyis 'border'-t adni. Ugyanúgy kell mint a képnél.
[table width="X" border="Y"]
Az Y-ban adjuk meg, hogy igen/'yes', vagy nem/no kell a keret. Egy valami nagyon fontos még: ha meg akarod jeleníteni a keretet, akkor a [table] után írni kell egy [td]-t is. Nézzük meg, hogy olyan táblázatot, hogy lehet csinálni, ahol oszlopok is vanak:
[table width="X" border="Yes/No"]
[tr]
[td] [/td]
[td] [/td]
[/tr]


[tr]
[td] [/td]
[td] [/td]
[/tr]
A 'tr'-ek új oszlopokat, a 'td'-k meg új sorokat jelölnek. A td-k közé írd be a dolgokat, ha betűti-pust akarsz váltani a táblázaton belűl, akkor minden új td-ben be kell írnod a betűtipust. Ter-mészetesen itt is lehet használni a border komponenst. E mellé tartozik még a 'bordercolor', amiben megadható a keret színe. Ezt nem részletezem.

IX. Fejezet


Még nem akarom a JavaScript-eket ismertetni, mert azok elég bonyolultak, a használatukkal együtt. Az előtt még nézzük meg a vonalat, vagyis a HR kompit.
[hr]
Ez a legegyszerűbb' hr', maga után kihagy egy, vagy két sort, ez egy, vagy két br-nek felel meg. A vonalnak színe, és természetesen szélessége is van:
[hr color="X"]
A colorban, mint már megszokhattuk a színt állítjuk, természetesen HEX-es kódolásban. Kövekezzék a szélesség:
[hr color="X" width="Y"]
Az Y helyére beírunk egy számot, és annyi pixel széles lesz a vonal.

X. Fejezet



Most áttérek a legbonyolultabb tudni való HMTL-es dologhoz a Javascripthez. Ha akarnám se tudnám felsorolni az összes script-et, mert ilyet bárki írhat. Mi csak a legfontosabb, alapscript-eket tanuljuk meg, és analizáljuk, mint például az egérérzékelő képváltó, a Browser, és fel-bontásfelismerő, és még sokminden. Ha minden igaz a fejezet végén írok neked egy olyan progit, ami megmondja, hogy mit kéne csinálnod magaddal, és mindezt a súlyod, és magas-ságod alapján :))
Kezjük el a leggyakrabban előforduló script-el, a képváltóval. Ez a program megfelel arra, hogy gombokat nyomogathassunk. Megrajzoljuk a képet amikor a gomb kinnt, és bennt van, aztán berakjuk a két képet, és ha rávisszük a kinnti gombra az egeret akkor az besüpped. A script-eket nem érdemes megírni inkább csak másolni, mert ha saját magad írod meg akkor úgy sem megy, nekem még nem sikerült. A lényeg, hogy ezeket mindig a HTML-fájl HEAD részébe kell írni.

[script LANGUAGE="Javascript"]

function be(n)
{
document.images[n].src=document.images[n].src.replace("név01.kit","név02.kit");
}

function ki(n)
{
document.images[n].src=document.images[n].src.replace("név02.kit","név01.kit");
}
[/script]

A 'név'-vel helyettesített dolgok helyére beírod a kép nevét, a 'kit'-ek helyére meg a kiter-jesztést. Fontos: egy scriptben csak egyfajta kiterjesztésű kép lehet, és lehetőleg ahova én ugyanolyan nevket írtam, oda te se írj mást. Pár dolgot azért elmagyarázok, bár ebben a scriptben még minden érthető lehet. A 'be' funkció a kinnt lévő gombot/képet váltja a bennt lévőre, a 'ki' funkció pedig fordíva, a kinti képet váltja a bentire. A script előhívása sem egy-szerű, de ezt egybe kell kötnöm valami mással:
Vannak az oldalakon linkek, amivel átjuthatunk egy másik oldalra(-akra). E tényező mellet lehet csak előhívni a scriptet(ket), és ezért meg kell előtte tanulnunk azt is:
[a href="URL"]Ide be kell rakni egy szöveget, egy képet, vagy akármit amire kattintani aka-runk, hogy elérjük a megnevezett oldalt.[/a]
Az URL helyére írd be egy másik HMTL fájl nevét, vagy egy internetes címet. Na! A linkekről még talán annyit, hogy majd késöbb megtanuljuk a szöveges linkeket szinezgetni. Folyas-  suk tovább a scriptekkel, mert még nem olvastuk be. Nézzük is meg a nagy csodát:
[a href="URL" onmouseover="be(0)" onmouseout="ki(0)"]Ide meg a kép nevét, vagyis->> [img src="név01.kit"]
Természetesen ha több script, vagyis több gomb, vagy ilyesmi van a lapon ami a scriptet használja, akkor számozni kell a scriptek 'használóit'.
[a href="URL" onmouseover="be(0)" onmouseout="ki(0)"]Ide meg a kép nevét, vagyis->> [img src="név01.kit"]
[a href="URL" onmouseover="be(1)" onmouseout="ki(1)"]Ide meg a kép nevét, vagyis->> [img src="név01.kit"]
Itt látod feljebb egy-két sorral. Kivétlesen ezt a scriptet meg is mutatom a valóságban, hogy tudd miről van szó. Klakknts ide az indításhoz!
Ennyi lenne az első Script, megtalálod a Script01.html fájlban.

XI. Fejezet


Biztos észrevetted azt az újítást a site-on, hogy alúl van egy kis óra, ami nem mozog együtt a betűkkel. Ez az óra is egy javasript, mégpedig nem is olyan egyszerű és rövid mint az előbbi. Valahogy így néz ki:

[SCRIPT LANGUAGE="JavaScript"]

var timerID = null;
var timerRunning = false;

function stopclock ()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}

function showtime ()
{
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()

var timeValue = "" + ((hours >23) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours > = 12) ? " D.u." : " D.e."
document.clock.face.value = timeValue;

timerID = setTimeout("showtime()",1000);
timerRunning = true;
}

function startclock ()
{
// Make sure the clock is stopped
stopclock();
showtime();
}

[/SCRIPT]

Ezt a fajta órát, így máshol nem fogod megtalálni csak 12 órás időjárásban, és angol jelölé-sekkel, én alakítottam át, mert így tényleg jobb. Ezt a scriptet is be kell valahogy olvasni. Elő-ször betöltjük a BODY-ban majd megjeleíntjük:

[body onLoad="startclock(); timerONE=window.setTimeout"]
[form]
[input type="text" name="timer" size=10 value="X"]
[/form]

Az X helyére beírsz valami szöveget, mondjuk TIMER, hogy tudjad miről van szó. Megtalálha-tod a  Timer.html fájlban.  Mondtam, hogy írok egy  olyan scriptet, ami megmondja, hogy mit kéne csinálnod magaddal. Itt megtalálod.

XII. Fejezet