Alaptanfolyam

Webfejlesztés: HTML

A tanfolyam leckéi, leckéinek anyaga

A tanfolyam leckéi egymásra épülnek, ezért célszerű "libasorban" megküzdeni velük!

(A nyers szövegek a mintaoldalról vágólap segítségével kimásolhatók, és a HTML5 vázba illeszthetők.)



0. lecke - HTML5 fájl váza

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Webes tanfolyam</title>
</head>


<body>

</body>
</html>


1. lecke - címsorok, bekezdések, sortörés

  • h1,..., p, br
  • webes alapfogalmak
  • szövegek: címsorok (h1,h2,...,h6), bekezdések (p), sortörés (br)
  • Notepad++ (vagy más egyszerű szövegszerkesztő) használata - weboldal elkészítése
  • "Google Chrome" vagy "Mozilla Firefox" böngésző használata - weboldal megtekintése
  • Feladat: készítsük el az (inet0.html) "Fogalmak" feletti részét! (Aláhúzás az <u> </u> tag-párral készíthető)
  • (nyers szöveg - szövegkódolás: unicode)     (inet0) (inet1) (inet2)


2. lecke - listák (számozott és számozás nélküli)

  • ol,ul, li
  • felsorolás, sorszámozott lista
  • Kompozer használata - weboldal elkészítése
  • "Internet Explorer" böngésző használata - weboldal megtekintése
  • Feladat: készítsük el a Gesztenyekocka (gkocka.html) oldalt (kép nélkül)!


3. lecke - képek

  • img
  • Kompozer letöltése
  • mentés weboldalról (böngészőben - jobb egérgomb)
  • Feladat: készítsük el a "Védett és mérgező gombák" képgyűjteményt (gombak.html)!
  • (gombak.html)     (miskolcigombasz.hu)


4. lecke - linkek

  • a
  • Total Commander használata
  • feltöltés webre
  • Feladat: készítsük el a "Szomszéd községek, városok" linkgyűjteményt (varosok.html)!
  • (varosok.html)     (http://ajka.lap.hu)


5. lecke - táblázatok



Gyakorló feladatok és megoldásuk témánként

Szövegek
Listák
Képek
Linkek
Táblázatok
Erdőm. *
KRESZ *
Feladat Feladat Feladat Feladat: szöveg  kép Feladat: szöveg  kép Feladat: szöveg  kép Feladat
Megoldás Megoldás Megoldás Megoldás Megoldás Megoldás Megoldás