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