Tamás Ferenc: Weblapkészítés HTML alapokon
Bevezető
Jelen írásom az interneten több éve megtalálható "HTML-könyv" mintájára készült, annak szerves újragondolása. Ez a bizonyos HTML könyv még tisztán a 4-es szabványú HTML-lel foglalkozik és 5-6 éve biztos első helyezett a Google "HTML könyv" találati listáján, továbbá igen sok helyen (érettségire, illetve ECDL-vizsgára készülve) tanítják.
Jelen írás már csak terjedelmi korlátai miatt sem térhet ki a teljes HTML 5-ös szabványra, bár igen sokat ismertet belőle. Az alapokat a legegyszerűbben megtanulható HTML 4-es szabványokon fogom ismertetni, majd később kerül bevezetésre a CSS, aztán szépen lassan bejön a HTML 5. Az írás végén megtalálható egy egész terjedelmes referencia-tár.
Tisztelt Olvasó!
Ha Ön ezt az írást végigolvassa és tisztességesen megcsinálja a benne lévő feladatokat, akkor elegendő gyakorlatot szerez akár egy emelt szintű (szakmai és hagyományos) informatika érettségire, akár egy ECDL-vizsgára való felkészülésre; de jól megértheti a HTML-alapú weblapkészítés logikáját és gyakorlatát is.
Jogvédelem!
Jelen mű teljes vagy részleges másolata, annak bárminemű (elektronikus, írásbeli vagy nyomtatott) terjesztése a szerző előzetes írásbeli engedélye nélkül tilos!
Minden további vita elkerülése végett kérem, keressen meg a http://tferi.hu/kapcsolat oldalon leírtak alapján!
Tartalomjegyzék
(Megjegyzés: az eddig elkészült részekkel)
1. fejezet: A HTML logikája
A megszokott programozási nyelveken a parancssorok bizonyos logika szerint követik egymást; ráadásul csaknem minden szó valamilyen angol kifejezés rövidített verziója. Szerencsére a HTML esetében sincs másképpen. Nem kötelező az angol nyelv tudása, de mindenképpen előny!
Maga a HTML egy angol mozaikszó. Eredetiben: HyperText Markup Language. (kb. hipertextes kijelölő nyelv). Eredeti verzióját a World Wide Web Consortium. (címük: www.w3.org) adta ki és a hivatalos szabványt ma is ez a szervezet írja tovább - a gyakorlati technikák alapján. Ezen könyv eleje a HTML 4.01-es szabványát tárgyalja, amely az egyik legkönnyebben tanulható nyelv. Bár a mai weblapok többsége már HTML 5-ben készül, de az 5-ös verzió nem érthető jól a 4-es verzió alapos ismerete nélkül.
Szóval a régi, 4.01-es szabványt még 1999.dec.24-én véglegesítették. Erről szól többek között a https://www.w3.org/TR/html401/ oldal is.
A HTML nyelven való szerkesztéshez nem kell semmilyen különös fordító, csak egy sima jegyzettömb. Ez lehet például a Windows beépítettje (Notepad – az angol nyelvű Windows-nál), de célszerűbb egy kicsit komolyabb támogatással bíró, de ugyanúgy ingyenes programot telepíteni, ami megfelelő segítséget nyújt. Ilyen például a NotePad++, ami elég gyors és igen szerteágazó a tudása, ráadásul a szerkesztő felülete kiválóan beszél magyarul is. Jelen írásban az összes példát ezzel a szerkesztővel mutatom be.
A HTML használatához sem kell semmi különös program, hiszen a weblap megírása után egyszerű (dupla) kattintással már el is indul az alapértelmezett böngésző, ami Chrome, Firefox, Opera lehet, esetleg MS Edge.
A nem Windows alapú rendszerekkel dolgozóknak is óriási lehetőség, hogy mindenhol fellelhető több hasonló tudású kódszintű szerkesztő, illetve bárhol ingyenesen hozzáférhető ingyenesen bármelyik böngésző.
A HTML nyelv alapja, mint oly' sok minden informatikai apróságnak, a hétköznapi angol nyelv kifejezései. Maga a nyelv "TAG"-ekbõl áll. (kiejtése: "teg"!) Minta:
<EzEgyTag> Ez a közbülsõ szöveg, amire vonatkozik. </EzEgyTag>
Figyelem! Ez még nem működik!
Látható, hogy a tag maga két zárójel között van. Ezek a magyar nyelvű billentyűzeteken az ALT GR+Í (<), valamint az ALT GR+Y (>) billentyűkkel írhatóak le. Nem véletlen, hogy ez a „kisebb, mint”, illetve a „nagyobb, mint” karakter. A zárótag általában megismétli az alaptag elejét, de előbb kirak egy „per” (/) jelet.
Most már nézzünk egy valóban működő HTML-lapot! Legyen ez a máshol megszokott „Helló, világ” felirat. Nyissuk meg egy új szerkesztő-lapot (például a Notepad++ segítségével), majd írjuk be a következőt: (Lásd: htmlpelda1.html)
<HTML> Helló, világ! </HTML>
Ha a fent emlegetett szerkesztőt használjuk, akkor ez a szerkesztőablakban így néz ki:
Jól látható, hogy a program kék színnel kiemelte a HTML-tag kezdő és zárórészét, amivel igen komoly segítséget ad. A friss lapot legegyszerűbben a Futtatás parancsot megkeresve tudjuk működésre bírni, de természetesen a megszokott módon is megkereshetjük az Intézőben, hogy ott (dupla) kattintással elindítsuk.
A dolog lényege, hogy nem kell tagolni a szöveget, nem kell semmi különös formátumos trükköt ismerni, csak a kész anyagot megnézni és már működik is a weblap. Ráadásul egyszerűbb lapok esetén ez minden egyes gépen ugyanígy néz ki. Nem szabad elfelejteni, hogy egy weblapot mindig <HTML> és </HTML> tagek közé kell tenni. Ami viszont fontos, hogy a HTML-nyelvben lényegtelen a kisbetű-nagybetű különbsége. Tehát a <HTML>, <html>, <Html> és <HtmL> ugyanazt jelentik!
Mivel a HTML alapvetően szöveg-alapú nyelv, így problémát okozhat, hogy a szöveget nem túl egyszerű formázni. Például próbáljuk ki a következő file-t: (Lásd: htmlpelda2.html)
<HTML>
Egyes sor.
Kettes sor.
Harmas sor.
</HTML>
Ez sima logikával azt jelentené, hogy a képernyőn három sor jelenik meg, de a böngészőben ezek egymás után jelennek meg!
Ennek a logikával ellentétel megjelenésnek történelmi okai vannak. Mivel a HTML alapvetően szöveges nyelv, ezért mindig minden szöveg alapú. Ráadásul a korai gépeken (amelyeken az alapvető HTML-szabvány kialakult) még igen komolyan kellett spórolni a megjelenéssel, ezért a sortörésnek külön tagje lett. Ez a <BR>, azaz break (kb. törés). Érdekes, hogy ennek a szokásossal ellentétben nincsen záró eleme. Tehát a helyes formázás immár a következő: (Lásd: htmlpelda3.html)
<HTML>Egyes sor.<br>Kettes sor.<br>Harmas sor.</HTML>
Itt már három egymás utáni sor jelenik meg a böngészőben!
Még egy lehetőség: sokan szeretik az előre formázott szövegeket. Erre a <PRE> (preformatted = kb. előreformázott) tag szolgál, ezúttal van záróelem is: </PRE>. Ha ezek között írunk egy szöveget, akkor nem kell törődni a bekezdésekkel, a behúzásokkal, illetve az üres sorokkal, mivel a böngésző pontosan az eredeti formában írja ki a szöveget. (Lásd: htmlpelda4.html)
<HTML><PRE>
Név:
Születésnap:
Lakhely:
Telefonszám:
</PRE></html>
1. feladat: Hozzon létre olyan szöveget, amely tartalmazza a legfontosabb adatait és legyen jól formázott.
2. feladat: Ugyanezt a szöveget alakítsa át úgy, hogy NE használjon PRE taget, csak BR-t. Ezúttal tekintsen el a jól formázottságtól.
2. fejezet: Betűk formázása
A dolog igen egyszerű, hiszen lehet egy betű félkövér (Bold = B), aláhúzott (Underlined = U), illetve döntött (Italic = I). A megfelelő tagek ezek szerint: <B>Bold</B>,<U>Underlined</U>, illetve <I>Italic</I>. Az előbbi parancsok persze kombinálhatók is: <B><I>Félkövér és Dőlt </I></B>. Egyetlen dologra kell vigyázni csupán: A sorrendet mindig be kell tartani. Gyakorlatban ez azt jelenti, hogy mindig a legutoljára kinyitott tag zárótagját kell leírni. Nézzük a következő példát: (lásd: htmlpelda5.html)
<html>
Sima szöveg.<br>
<b>Ez félkövér.</b><br>
<i>Ez döntött</i><br>
<u>Ez aláhúzott</u><br>
<b>Ez félkövér és döntött.</i></b>
</html>
Kicsit pontosabban fogalmazva: ez olyan, mint egy csomó, egymásba csomagolt doboz. Mivel minden dobozt be akarunk zárni, ezért nyilvánvalóan a legkisebbel kell kezdenünk, majd csak utána haladhatunk fokozatosan a nagyobbak felé. Persze, egy nagyobb dobozban lehet több, kisebb doboz is, de itt is érvényes, hogy előbb a kicsiket kell lezárni és csak utána a nagyot. Röviden: be kell tartani a dobozlogikát!
3. feladat: Írjon olyan fájlt, amelyben vegyesen van döntött, aláhúzott, illetve félkövér betű, majd keverje ezeket vegyesen!
Most nézzük a betűk formázását! Az alapméret itt a 0-s, amit nem kell kiírni. Ezt mutatja a következő példa: (Lásd: htmlpelda6.html)
<html>
<font size=0>Alapméret</font>
</html>
A skála alapértelmezésben -7-től +7-ig terjedhet. Vegyük észre, hogy itt használtunk először paramétert, mégpedig a méretre. Maga a paraméter arra szolgál, hogy az alap HTML-tag funkcióját pontosítsa, illetve finomítsa.
4. feladat: Írjon egy olyan fájlt, melyben a betűméret egyesével növekszik! (Lásd: htmlpelda7.html) Apró „súgás”: sokat alkalmazza a másolás-beillesztés parancsokat!
Jogosan felmerül a kérdés, hogy ez milyen méretskála szerint van. Nos, ez a minden böngészőbe beépített alapértelmezett skála szerint értendő. Persze megengedett a betűméret szabályozása pl. képpontban vagy centiméterben, de ez nem szerencsés, mivel így nem lesz megfelelően rugalmas a képernyő átméretezése.
Bár nem szerencsés, de a betűk típusa is változtatható. Ehhez szintén a <FONT> tagre van szükség, de ezúttal a paramétere a SIZE helyett a FACE-re lesz szükség, de szeretném kihangsúlyozni, hogy ez nem minden esetben szerencsés, mivel lehet, hogy a honlap készítőjének gépen éppen megvan az a betűtípus, de a leendő felhasználóén nincsen! Mintapélda legyen a következő: (Lásd: htmlpelda8.html)
<html>
<font face="Arial">Arial</font>
<font face="Times New Roman">Times New Roman</font>
</html>
Ahhoz, hogy a betűformázás alapjait tisztán lássuk kellenek a színek is! Ehhez még mindig a megszokott FONT-ot használjuk, de ezúttal a COLOR paraméterrel. A színek nevei a legegyszerűbb angol szavak, pl.: black=fekete, blue=kék, green=zöld, red=piros, purple=lila, yellow=sárga, …
A színek nevei helyett használhatjuk azon RGB-kódjait is. Minden kódra a hagyományos 0-től 255-ig terjedő skála szolgál, de a számokat át kell írni 16-os számrendszerbe. Némi segítséget ad eme írás referenciája a kódok tekintetében. Link: ITT!
A fenti paraméterek keverhetők és össze is vonhatók. Nézzük például a következő fájlt: (Lásd: htmlpelda9.html)
<html>
<font face="Arial"><font size=4><font color="red">
Hosszabb megoldás</font></font></font><br>
<font face="Arial" size=4 color="red">Rövid megoldás</font>
</html>
5. feladat: Készítsen meghívót saját szülinapi bulijára, melyben legalább 5 betűtípus szerepeljen, legalább 5 különböző szín és legalább 5 eltérő méret is legyen! A lényeg: minél rikítóbb legyen!