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
2. fejezet Betűk formázása
3. fejezet Fejezetek és formázásuk
4. fejezet Kapcsolatok
5. fejezet Listák
6. fejezet Ékezetek
7. fejezet Táblázatok
8. fejezet Kép beszúrása
9. fejezet Videó beszúrása
10. fejezet Keretek (frame)
11. fejezet Keretek újszerű módon - Iframe
12. fejezet

Egyéb formázási lehetőségek
Marquee, Basefont, Bgsound

13. fejezet Body és Meta
14. fejezet Térképek
15. fejezet Kérdőív
16. fejezet Egyéb elemek
17. fejezet HTML színkiosztás
18. fejezet HTML karakterek
matematikai, görög és egyéb karakterek
19. fejezet Nyelvi kódok
20.1. fejezet CSS alapismeretek
20.2. fejezet A CSS három alapvető formája
20.3. fejezet Írjunk egyszerű stíluslapot!
21.1. fejezet CSS Betűformázások
21.2. fejezet CSS Szövegformázások
21.3. fejezet CSS Színek
21.4. fejezet CSS Hátterek
21.5. fejezet CSS Keretek
21.6. fejezet CSS Margók
21.7. fejezet CSS Helyhagyás (Padding)
21.8. fejezet CSS Magasság és szélesség
22.1. fejezet CSS Dobozmodell
22.2. fejezet CSS Körvonalak (Outline)
22.3. fejezet CSS Betűtípusok
22.4. fejezet CSS Ikonok
22.5. fejezet CSS Linkek
22.6. fejezet CSS Listák
23.1. fejezet CSS Táblázatok
23.2. fejezet CSS Pozíciók
23.3. fejezet CSS Túlcsordulás
23.4. fejezet CSS Lebegés és tisztítás
23.5. fejezet CSS Pszeudó-osztályok
23.6. fejezet CSS Átlátszóság
23.7. fejezet CSS Navigációs eszköztár
23.8. fejezet CSS Legördülő menük
23.9. fejezet CSS Egérfeliratok
24.1. fejezet CSS Képek használata
24.2. fejezet CSS Elemek kitöltése
24.3. fejezet CSS Nyomógombok
24.4. fejezet CSS Oldalszámozás
25.1. fejezet HTML5 bevezetés
25.2. fejezet Új HTML5 elemek áttekintése
25.3. fejezet Szemantikus HTML5 elemek
25.4. fejezet HTML migráció (4-ből 5-be)
25.5. fejezet HTML5 stílusajánló
26.1. fejezet HTML5 Canvas bevezetés
26.2. fejezet HTML5 Canvas kör
26.3. fejezet HTML5 Canvas szöveg
26.4. fejezet HTML5 Canvas kitöltés
27.1. fejezet HTML5 SVG bevezetés
27.2. fejezet HTML5 SVG téglalap
27.3. fejezet HTML5 SVG kör és ellipszis
27.4. fejezet HTML5 SVG egyenes, sokszög és törött vonal
27.5. fejezet HTML5 SVG útvonalak
27.6. fejezet HTML5 SVG szöveg
27.7. fejezet HTML5 SVG stroke
27.8. fejezet HTML5 SVG effektusok
27.9. fejezet HTML5 SVG színátmenetek
28.1. fejezet Bootstrap keretrendszer alapismeretek
28.2. fejezet Hogyan szerezzük be
28.3. fejezet A legelső Bootstrap 4-es oldal összeállítása
28.4. fejezet A Konténerek tulajdonságai (Container)
28.5. fejezet Konténer helyhagyás, vastagság, színek
28.6. fejezet Bootstrap Rácsozás (grid)
28.7. fejezet Bootstrap betűk és szövegek
28.8. fejezet Bootstrap 4 színek
29.1. fejezet Bootstrap táblázatok
29.2. fejezet Képek és keretek
29.3. fejezet Bootstrap Jumbotron
29.4. fejezet Bootstrap figyelmeztetések
29.5. fejezet Bootstrap nyomógombok
29.6. fejezet Nyomógomb csoportok
29.7. fejezet Bootstrap kitűzők
29.8. fejezet Haladásjelző sáv
29.9. fejezet Bootstrap Oldalszámozás
29.10.fejezet Bootstrap legördülő menü

 


 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:

HTML Példa Notepad++

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!

HTML példa több sor

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.