HTML (Hypertext Markup Language) a weboldalak alapvető építőköve, amely a weboldal
szerkezetét és tartalmát definiálja. Az HTML használatával lehetőséged van
szövegek, képek, linkek és egyéb elemek elhelyezésére egy weboldalon.
1. HTML Dokumentum Alapstruktúra
Minden HTML dokumentumnak rendelkeznie kell egy alapstruktúrával. Az alábbi
példa bemutatja egy egyszerű HTML dokumentum szerkezetét:
<!DOCTYPE
html>
<html
lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Oldal Címe</title>
</head>
<body>
<h1>Üdvözlet a Weboldalon!</h1>
<p>Ez egy alapvető HTML dokumentum
példa.</p>
</body>
</html>
- <!DOCTYPE
html>: Jelzi, hogy HTML5 dokumentumról van szó.
- <html>:
Az egész HTML dokumentum gyökéreleme.
- <head>:
A dokumentum metaadatokat tartalmazó része.
- <body>:
A weboldal látható tartalmát tartalmazza.
2. HTML Elemei
- Fejléc
Elemei: <h1>, <h2>, ..., <h6> – Fejlécek különböző
szinteken.
- Szövegelemek: <p>
– Bekezdés, <a> – Hiperhivatkozás, <strong> – Sűrített szöveg.
- Lista
Elemei: <ul> (rendezett lista), <ol> (számozott lista),
<li> (listaelem).
- Formázás:
<b>, <i>, <u> – Szöveg kiemelés, stb.
JavaScript Integráció
A JavaScript lehetővé teszi dinamikus és interaktív elemek hozzáadását a
weboldalakhoz. A JavaScript kódot általában a <script> tag-en keresztül
illesztjük be az HTML dokumentumba.
1. JavaScript Kód Beillesztése
1.1. Beágyazott JavaScript
A JavaScript kódot közvetlenül az HTML dokumentumban is elhelyezhetjük:
<!DOCTYPE
html>
<html
lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>JavaScript
Integráció</title>
<script>
function sayHello() {
alert('Helló, világ!');
}
</script>
</head>
<body>
<button
onclick="sayHello()">Kattints ide!</button>
</body>
</html>
1.2. Külső JavaScript Fájl
A JavaScript kódot külön fájlba is helyezhetjük, ami tisztább és
karbantarthatóbb kódot eredményez:
index.html:
<!DOCTYPE
html>
<html
lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>JavaScript
Integráció</title>
<script src="script.js"
defer></script>
</head>
<body>
<button
onclick="sayHello()">Kattints ide!</button>
</body>
</html>
script.js:
function
sayHello() {
alert('Helló, világ!');
}
2. Alapvető DOM Műveletek
A DOM (Document Object Model) az HTML dokumentum strukturált
reprezentációját biztosítja, amely lehetővé teszi az elemeken végzett
műveleteket JavaScript segítségével.
2.1. DOM Elem Kiválasztása
Az elem kiválasztása az document.getElementById() vagy document.querySelector()
metódusokkal történhet:
let element
= document.getElementById('myElement');
let
firstParagraph = document.querySelector('p');
2.2. Elem Tartalmának Módosítása
Az elem tartalmát a innerHTML vagy textContent tulajdonságokkal lehet
módosítani:
document.getElementById('myElement').innerHTML
= 'Új Tartalom!';
2.3. Eseménykezelés
Az eseménykezelők lehetővé teszik a felhasználói interakciók kezelését:
document.getElementById('myButton').addEventListener('click',
function() {
alert('Gombot kattintottak!');
});
Források
- Mozilla
Developer Network (MDN) - HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
- Mozilla
Developer Network (MDN) - JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- W3Schools
- HTML Tutorial: https://www.w3schools.com/html/
- W3Schools
- JavaScript Tutorial: https://www.w3schools.com/js/
Feladat:
Dinamikus Üdvözlés
Készíts egy egyszerű weboldalt, amely
tartalmaz egy szöveges beviteli mezőt (input), egy gombot és egy üdvözlő
szöveget. Amikor a felhasználó beír egy nevet az input mezőbe és rákattint a
gombra, az oldal frissíti az üdvözlő szöveget, hogy tartalmazza a beírt nevet.
Feladat Lépései:
HTML Fájl Készítése: Készítsd el az index.html
fájlt a megadott kóddal.
JavaScript Fájl Készítése: Készítsd el a script.js
fájlt a megadott kóddal.
Tesztelés: Nyisd meg a index.html
fájlt a böngészőben. Írj be egy nevet az input mezőbe és kattints a gombra,
hogy lásd az üdvözlő szöveg változását.
Célok:
Gyakorolni a HTML és JavaScript integrációját.
Megérteni a DOM manipuláció alapjait.
Készségeket fejleszteni az
eseménykezelésben.
Házi feladat: az órai megoldás alapján kérj be két adatot a felhasználtól, olvasd ki az input mezők értékét, és fűzd össze, majd írasd ki egy paragrafusba.
Ha lesz kréta Hanának, Gergőnek, Tamásnak, Gabinak órai feladat megoldásra 5-öt beírni! :-)
1 csoport 2024.09.03
2 csoport 2024.09.04
