logó INFORMATIKA
Ingyenes elektronikus tananyag

HTML gyakorlat

Programozott tananyag:


Alapcimkék
Egy HTML dokumentum egy közönséges szöveges állomány. Egy egyszerű szövegszerkesztővel például jegyzettömbbel is létrehozható.

A weboldal fejezetei, címei T1
Feladat

Alapcimkék T1
Feladat

Alapcimkék F1
Feladat

Weblap kódolása
Ahhoz, hogy a weblapunk a böngészőkben karakterhelyesen jelenjenek meg meg kell adnunk, hogy annak szerkesztésekor milyen karakterkódolást használtunk.

Weblap kódolása T1
Feladat

Weblap kódolása F1
Feladat

Weblap kódolása F2
Feladat

Weblap kódolása F3
Feladat

A weboldal fejezetei, címei
A weblapunk címét h1, h2, h3, h4, h5 vagy h6 címkék közzé helyezzük. A „h" után megadott számmal tehát a fejezetszintet is megadjuk. A h6 adja a legkisebb betűméretet.

A weboldal fejezetei, címei F1
Feladat

A weboldal fejezetei, címei F2
Feladat

A weboldal fejezetei, címei F3
Feladat

Bekezdés, sortörés
Ha a weblap csak fejezetcímekből áll még mindig nincs tartalom. A tartalmat az egyes fejezetcímek után adjuk meg egy vagy több bekezdésben.

Bekezdés, sortörés T1
Feladat

Bekezdés, sortörés F1
Feladat

Az oldal színei
A HTML-ben a színeket az úgynevezett RGB kódolással adjuk meg. Az RGB az angol Red, Green és Blue szavak kezdőbetűi, jelentésük piros, zöld és kék.

Az oldal színei T1
Feladat

Az oldal színei F1
Feladat

Az oldal színei F2
Feladat

Az oldal színei F3
Feladat

A szöveg önálló formázása T1
Feladat

A szöveg önálló formázása
A body címkében az egész oldalra vonatkozó formázást tudjuk megadni. Előfordul azonban, hogy egyes szövegrészeknek más színt szeretnénk. Esetleg az alapértelmezett nagyságon is szeretnénk változtatni.

A szöveg önálló formázása F1
Feladat

A szöveg önálló formázása F2
Feladat

A szöveg önálló formázása F3
Feladat

Betűk stílusa, hatások
A szövegeket különféle stílusban formázhatjuk. Ilyen stílus a betűk kissé vastagabb írásmódja, amelynek elterjedt neve „félkövér", angolul bold. A másik ilyen stílusbeli átalakítás a betűk dőlt írásmódja, angolul italian.

Betűk stílusa, hatások T1
Feladat

Betűk stílusa, hatások T2
Feladat

Betűk stílusa, hatások F1
Feladat

Betűk stílusa, hatások F2
Feladat

Betűk stílusa, hatások F3
Feladat

Igazítás
Alapértelmezetten a szövegszerkesztőkhöz hasonlóan a böngészők a szöveget balra igazítják. A HTML többféle lehetőséget biztosít a szövegek igazítására.

Igazítás T1
Feladat

Igazítás F1
Feladat

Igazítás F2
Feladat

Igazítás F3
Feladat

Háttérkép és képek beillesztése
A háttérkép beillesztése a „body" címke és a „background" tulajdonság segítségével lehetséges. A „background" értéke egy kép útvonallal együtt.

Háttérkép és képek beillesztése T1
Feladat

Háttérkép és képek beillesztése T2
Feladat

Háttérkép és képek beillesztése F1
Feladat

Háttérkép és képek beillesztése F2
Feladat

Háttérkép és képek beillesztése F3
Feladat

Listák
Felsorolás esetén a felsorol elemek előtt a böngészők alapértelmezésben nagyobb pontokat jelenítenek meg, de CSS segítségével akár képeket is megjeleníthetnek a felsorolt szövegek előtt.

Listák T1
Feladat

Listák F1
Feladat

Listák F2
Feladat

Listák F3
Feladat

Táblázatok
Táblázatot a „table" címkék segítségével hozhatjuk létre. A táblázatok sorait a „tr" címkével határozzuk meg az angol „table row" szavakból. A táblázat egyes adatokat tartalmazó tábláit a „td" címkékkel adjuk meg.

Táblázatok T1
Feladat

Táblázatok F1
Feladat

Táblázatok F2
Feladat

Táblázatok F3
Feladat

Linkek
Ha egy szövegben elhelyezünk egy hiperhivatkozást egy másik weblapra „link" néven szoktuk emlegetni. Amire hivatkozunk a másik lapon horgonynak hívjuk.

Linkek T1
Feladat

Linkek F1
Feladat

Linkek F2
Feladat

Linkek F3
Feladat

Logikai formázás
A szöveget tartalmi szempontok alapján csoportosítjuk. A szöveghez tulajdonképpen egy típust rendelünk. A kinézetet az böngésző határozza meg.

Logikai formázás T1
Feladat

Logikai formázás F1
Feladat

Logikai formázás F2
Feladat

Logikai formázás F3
Feladat

Különleges karakterek
A különleges karaktereknek van egy kódjuk, ami egy szám. A legtöbbnek azonban neve is van.

Különleges karakterek T1
Feladat

Különleges karakterek F1
Feladat

Különleges karakterek F2
Feladat

Gyakorló Feladat
Feladat

Visszatekintő Feladat
Feladat