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.
- Előző
- Következő >>