I. Bevezetés

Bevezetés a HTML nyelvbe

Az első HTML kód (file) létrehozása

<html>
<head>
	<title>I.1. kód</title>
</head>
<body>
<div id="azonosito" class="osztaly">
  <p>Az első HTML oldal létrehozása</p>
</div>
</body>
</html>

Teendő: a fenti kódot bemásoljuk egy jegyzettömbe, elmentjül pl. elso.html néven, majd dupla kattintás az így készített filera.

Magyarázat:

  • A HTML állomány egyszerű szövegállomány, amely rövid jelölő tagokat tartalmaz
  • <tagnév> -vel kezdődik egy tag és </tagnév> zárul
  • <html> tag az első és </html> az utolsó
  • A <head> és </head> tagok közötti rész a fejléc információ. Az itt leírt szöveget a böngésző nem jeleníti meg közvetlenül.
  • A <body> tagok közötti tartalom jelenik meg a böngészőben.
  • A <div> a weboldal egy nagyobb szekciója.
  • A <p> a weboldal egy bekezdése.
  • Egy tag tulajdonságai: attribútumok
    id: a tag egyedi azonosítója (ugyanazon érték nem fordulhat elő többször)
    class: a tag osztálya, több tagnak lehet ugyanaz az értéke. Célja, hogy több elemet is azonos kinézetűre formázhassunk.
    Tetszőleges attribútum hozzáadható egy taghez, pl. <div kiscica="fekete">.

Szülő-testvér-gyermek kapcsolat

<html>
<head>
	<title>I.2. kód</title>
</head>
<body>
<div id="elso">
	<div id="negyedik">
		<div id="otodik">
			<p>Első szöveg<p>
		</div>
    </div>
</div>
<div id="masodik">
	<div id="hatodik">
		<p>Második szöveg<p>
	</div>
</div>
<div id="harmadik">
	<div id="hetedik">
		<div id="nyolcadik">
			<div id="kilencedik">
				<p>Harmadik szöveg<p>
			</div>
		</div>
    </div>
</div>
</body>
</html>

Nagyon fontos szemléletmód a fejletebb (objektumorientált) programozási nyelvekben, illetve az adatstruktúrák tervezésében.

Kérdés 1: Mi(k) a <div id="masodik"> testvére(i)?

<div id="elso"> és <div id="harmadik">

Kérdés 2: Mi(k) a <div id="negyedik"> gyermeke(i)?

<div id="otodik">

Kérdés 3: Mi(k) a <div id="nyolcadik"> testvére(i)?

Nincs testvére

Kérdés 4: Mi a <div id="hatodik"> szülője?

A <div id="masodik">

Végre javascript

<html>
<head>
	<title>I.3. kód</title>
	<script>
	alert("Hello világ");
	</script>
</head>
<body>
<div id="azonosito" class="osztaly">
  <p>Az első HTML oldal létrehozása</p>
</div>
</body>
</html>

Magyarázat:

  • <script> -vel kezdődik és </script> -tel zárul a javascript program
  • Tradicionálisan a head-ben vannak a javascript utasítások, de mára ez már idejét múlt szemlélet: bárhol lehetnek (csak <script> -ben legyenek) 

<html>
<head>
	<title>I.4. kód</title>
</head>
<body>
<div id="azonosito" class="osztaly">
  <p>A script akkor is lefut, ha nem a head-ben van</p>
</div>

<script>
	alert("Hello világ");
</script>
</body>
</html>

Sőt: a javascript parancsok a böngésző fordítása közben azonnal lefutnak, így a sorrendezés nagyon nagyon fontos:

<html>
<head>
	<title>I.5. kód</title>
</head>
<body>
<div id="demo"></div>

<script>
	document.getElementById('demo').innerHTML = "Hello világ";
</script>
</body>
</html>

A HTML oldal tartalmazza majd a 'Hello világ' kifejezést, uis a <div id="demo"> tag már létrejött az oldalon, ám ha

<html>
<head>
	<title>I.6. kód</title>
	<script>
	document.getElementById('demo').innerHTML = "Hello világ";
	</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

a 'Hello világ' kifejezés nem lesz oldalon, hiszen a <div id="demo"> tag még nem jött létre, így a javascript utasítás nem találja!!