1. Web-lap készítés Jegyzettömb segítségével.
a.) Az egér jobb fülével kattintsunk valamely mappában vagy az asztalon és válasszuk az "Új" menüpontot, majd a "HTML dokument"-et. Nevezzük át a leendő tartalomnak megfelelően az új dokumentumot. Indítsuk el róla az Internet Explorer-t. A várakozásnak megfelelően egy üres HTML oldalt látunk.b.) A Nézet menüben válasszuk a Forrás menüpotot. A Jegyzettömb nevű egyszerű szövegszerkesztő segítségével olvashatjuk és szerkeszthetjük a Web-lap forráskódját. Ha a forráskódba belejavítunk, mentjük, majd az Explorerben Frissítést kérünk, akkor a változtatás hatását megfigyelhetjük. Vigyázni kell azonban arra, hogy csak egyetlen Jegyzettömb legyen nyitva, és a mentésről sem szabad elfelejtkezni. Mivel a Jegyzettömb a Web-lap teljes kódját képes megjeleníti, így elvileg bármely Web-lap csak ennek segítségével is megírható. Ehhez viszont ismerni kell a különböző megjelenési formák leírását, a HTML nyelv elemeit. Ha ezt a módszert választjuk, akkor egyrészt megértjük a Web-lap felépítését, kódolását, másrészt ha ügyelünk arra, hogy minél egyszerübben írjuk le a tulajdonságokat, akkor a lehető legkisebb terjedelmű forráskódot állítjuk elő, amely a letöltési időt jelentősen csökkentheti.
c.) Egy szabályos HTML-fájl felépítése:
<HTML> A HTML dokumentum kezdete.
<HEAD> A fej kezdete.
<TITLE> A cimke kezdete.
Ez jelenik meg a böngésző (Explorer) címsorában.
</TITLE> A cimke vége.
</HEAD> A fej vége.
<BODY> A fő rész kezdete.
Ide kerül a HTML-dokumentum szöveges és képi tartalma a formátumot
megadó tag-ekkel együtt.
</BODY> A fő rész vége.
</HTML>A HTML dokumentum vége.
d.) A HTML kódjában található '<>' jeleket a közéjük írt karakterekkel együtt tag-eknek nevezzük. A tag-ek tartalma határozza meg a HTML dokumentum megjelenését és "működését". A legtöbb tag párosával létezik, a tag zárótagjának belseje megegyezik a nyitó tag-gel, csak '/' jellel kezdődik. A párosával elhelyezett tag-eg egy szakasz kezdetét és végét jelzik, és a legtöbb esetben valamely formátum hatáskörét is megadják.
e.) A szöveg böngészőben való megjelenésének sajátosságai:
- A szövegben legfeljebb csak egy Space-t vesz figyelembe,
- Egyetlen Enter-t sem vesz figyelembe,
- A szöveg szélessége a megjelenítő ablak méretéhez igazodik,
- A szöveg soronkénti igazítása a megjelenítő ablakhoz igazodik,
- A bekezdést a <P> </P> tag-pár határolja, a bekezdések között egy sor üresen marad,
- Ha a szöveget egy bekezdésen belül új sorba szeretnénk megjeleníteni, akkor a <br> tag-et
kell alkalmazni, amely tag-nek nincs befejező párja.
f.) A szöveg formáját meghatározó tag-ek.
- A Web böngészők különböző nemzeti karakterkészletekkel dolgozhatnak. A HTML dokumentum fejében
(<HEAD>-ben) le kell írni, hogy dokumentumunk milyen kódtábla segítségével készült,
így a magyar ékezetes kis és nagy betük helyesen fognak megjelenni. Ezt egy <META> tag-ben
kell megadni: <META http-equiv='content-type' content='text/html; charset=iso-8859-2'>
Az idézőjel lehet egy vagy két vonalas.
- A dokumentum bekezdéseit címekkel láthatjuk el. Erre a HTML nyelv főcim tag-eket használ, 6 félét.
Formájuk: <H1> ... <H6>, illetve záró tag-ük: </H1> ... </H6>
Az 1-es a legnagyobb, a 6-os a legkisebb méretű karaktereket jelenti. Minta:
A FONT beállítása a következő bekezdésre is hatással van, így azt célszerű újra definiálni.
- A szövegszekesztőkben megszokott további betűformázások tag-jei:
kövér: <b>, (Bold) vagy <STRONG> (Erős kiemelés)
aláhúzott: <u> (UnderLine)
dőlt: <i>. (Italic) vagy <EM> (kiemelt) vagy <CITE> (idézet)
áthúzott: <s>
villogó: <blink>
nagyobb: <big>
kisebb: <small>
felső index: <sup>
alsó index: <sub>
Relatív méretmegadás az alapértelmezett mérethez képest:
egy méretszámmal nagyobb: <FONT size=+1>
egy méretszámmal kisebb: <FONT size=-1>
Mindezek bemutatása:
Ez egy kövér betükkel írt szöveg.
Ez egy aláhúzott szöveg.
Ez dőlt betükkel írt szöveg.
Ez pedig 5-ös betümérettel mind a három.
Ez a szöveg át van húzva.
Most egy méretszámmal nagyobb lett mint volt.
Most egy méretszámmal kisebb lett mint volt.
Most pedig az indexek: Ez itt a felső index.És a másik: Ez pedig az alsó index.
Mivel az index-eltolás relatív, a felső index záró teg-jét feltétlen használni kell.
Ez az alapmérettől eggyel kisebb.
Ez az alapmérettől kettővel nagyobb.
- A betű típusát megadó tag: <FONT face='Courier'>. Alkalmazva:
Ez a courier betűtípus. (Ez a hatás érhető el a <TT> tag-el is.)
Ez a Times New Roman, mint alapértelmezett típus.
Ez a Modern típus.
Ez az 5-ös méretű Franklin Gothic Medium típus aláhúzással.
- Szövegeinket színesíthetjük színes betükkel. Az ezt meghatározó tag: <FONT color=#77AADD>,
ahol a 6 jegyű hexadecimális szám a szín RGB összetevőit adja meg. Vagyis:
Ez a most beállított szín, 5-ös betűméret mellett.
g.) A szöveg igazítását meghatározó tag-ek. Ez a szöveg középre került. Figyeld meg, hogy az ablak közepére! Ez a szöveg viszont jobb oldalon van mindig. Ha pedig elég hosszú szöveget írok és az ablak elég keskeny, akkor ez
a szöveg úgy jelenik meg, hogy az ablak két szélénél a betük mindig egymás felett jelentkeznek.
Magyarul ezt az igazítást sorkizártnak nevezzük. Lehet, hogy ez most a szöveg rövídsége miatt
csak fél képernyő széles ablak esetén látszódik igazán. Ez pedig már az alapértelmezett balra zárt igazítás.
- Ha a szövegünket a megjelenített ablakhoz képest igazitani szeretnénk, akkor a
<P align='center'> tag-et kell használnunk. További beállítási lehetőségek:
right, left (mint alapértelmezett), justify. A 'P' tag bővítését láthatjuk, s ebből az is következik,
hogy ezek a beállítások paragrafusra (bekezdésre) vonatkoznak. Lássunk néhány példát:
Harminckét éves lettem én,
A versben, a csecse- és a becse, sorok előtt nem törölhető space-ek vannak, melyet  -vel
adhatunk meg.
Meglepetés e költemény,
csecse-
becse,
- Szövegrészeinket vizszintes vonallal tagolhatjuk, az ezt beállító tag:
<HR size=5 width=80% color='red' align='center'>, ahol a vastagságát,
pixelben számított vagy az ablakhoz viszonyított méretét, színét és igazítását állíthatjuk be.
Például:
A HR tag-nek nincs lezáró párja.
h.) Felsorolások, listák.
Gyakran előfordul, hogy szögünkben felsorolást kell elhelyeznünk. Ennek megjelítését szolgálják
a listák. Ennek három fajtáját ismerjük, ezek:
- Jelölés nélküli lista.
Ennek beállító tag-e: a<UL> a lista elemek pedig <LI>.
Ez itt egy lista
Elemei előtti jelölések lehetnek: disc (korong), square (négyzet) vagy circle (kör), melyet a lista
vagy egy sorára nézve típusaként kell megadni:
<U type=square>, azaz:
A szivárvány színei:
A listák egymásba ágyazhatók:
A hét napjai:
- Sorszámozott lista.
Ennek beállító tag-e: <OL>, a liste elemei mint az előzőekben: <LI>.
A sorszámokat type segítségével adhatjuk meg, a kezdősorszámot pedig: start=5 formában.
Lehetőségek:
Lássunk egy példát:
A törpék:
- Meghatározásokat megjelenítő lista.
Ennek beállító tag-e: <DL>.
A lista elemei két félék:
<DT>-vel a definiálandót,
<DD>-vel a definiciót kell megadni.
Lássunk erre is egy példát:
Informatika szótár:
i.) Táblázatok.
Adataink elhelyezésének igen gyakori módja a táblázatok. A táblázat <TABLE> tag-el kezdődik,
és </TABLE>-vel fejeződik be. Sorok kezdetét a <tr> tag, cella kezdetét a <td>
tag jelzi. Fejlécben a cellákat <th> tag-gel kezdjük. Ez utóbbiaknak is van záró tag-jük,
melyet mindig ki is kell írni. Lássunk akkor egy táblázatot:
Erről a táblázatról még nem is nagyon látszik, hogy az. Hiányzanak a méretmeghatározások,
keretvonalak és egyéb megjelenést meghatározó részletek.
Óra/Gép
Első gép
Második gép
8 óra
12 darab
21 darab
9 óra
11 darab
14 darab
10 óra
23 darab
22 darab
A teljes táblázatra vonatkozó kulcsszavak a következők:
BORDER=keretszélesség (képpontokban megadva),
BORDERCOLOR=szín (keretszín),
WIDTH=szélesség (képpontokban, vagy az ablakszélesség százalékában),
HEIGHT=magasság (képpontokban),
CELLSPACING=cellaköz,
CELLPADDING=cellamargó (a cella tartalma és a kerete közötti távolság minden oldalról),
ALIGN=center (vagy a további szokásos elhelyezés, csak a fejlécre hat).
Cellákon belüli formázási lehetőségek:
ROWSPAN=magasság sorokban számolva, mintha több sort összevonnánk,
COLSPAN=szélesség oszlopokban számolva, mintha több oszlopot összevonnánk,
NOWRAP: egysoros cella, sortörés tiltása,
WIDTH=szélesség (képpontban),
HEIGHT=magasság (képpontban),
ALIGN=vizszintes igazitás (left, center, right),
VALIGN=függőleges igazitás (up vagy top, center vagy middle, bottom).
Nézzük hogyan néz ki az előző táblázat ezek használatával:
Óra/Gép
Első gép
Második gép
8 óra
12 darab
21 darab
9 óra
11 darab
14 darab
10 óra
23+20 darab
j.) Mozgó szövegek.
Web-lapjainkon mozgó szövegeket helyezhetünk el. A szöveket a <MARQUEE> tag és záró tag-je közé
helyezzük el. A mozgási típusát a BEHAVIOR tulajdonsággal, a mozgatás szélességét a WIDTH,
a mozgás kezdő irányát a DIRECTION (left-alapértelmezés, right, up, down), míg a sebességet a SCROLLDELAY-el adhatjuk meg. További tulajdonságok: BGCOLOR (szöveg háttérszín), HEIGHT (magasság), LOOP (ismétlési szám, hiányzása esetén vagy loop=-1 értékre végtelen), SCROLLAMOUNT (ugrási távolság pixelben).