Ajánlott honlapok, jegyzetek:
w3schools
Szabványkövető statikus honlapok szerkesztése
standardsmode.hu
ECDL feladatok, online teszt
Összefoglaló letöltése: CSS összefoglaló
A weboldal felépítése
HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki, és mára már internetes szabvánnyá vált a W3C (World Wide Web Consortium) támogatásával.
Egy weblap tulajdonképpen egy szöveges dokumentum, amely tartalmazza azokat a szimbólumokat, amelyek a megjelenítő programnak leírják, hogyan is kell megjeleníteni illetve feldolgozni az adott állomány tartalmát. Megjelenítő program például egy webböngésző. (Chrome, Edge, Opera…)
Egy HTML állomány három fő részre bontható:
- A Dokumentum Típus Definíció az állomány legelején, pl:
<!DOCTYPE html> - a HTML fejléc <head></head>, ami technikai és dokumentációs adatokat tartalmaz, amelyeket az internet böngésző nem jelenít meg, tehát átlag felhasználó ezeket nem látja
- HTML törzs <body></body>, amely a megjelenítendő információkat tartalmazza.
Egy html fájl így néz ki:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>első bekezdés</p> <p>második bekezdés</p> </body> </html> |
A html nyelv tag-ekből áll, van egy nyitó tag és egy záró tag, de vannak kivételek, amelyeknek csak nyitó tagük van. pl: <br> ami a sortörést jelenti
<!DOCTYPE html>Deklaráció, ez egy html5-ös fájl<html>ez a tag jelzi, hogy itt kezdődik a html oldalunk. Szokták nyelvvel együtt is megadni <html lang=”hu”><head>az oldalhoz tartozó információk, pl: karakterkódolás, kereső kifejezésel, szerző stb…<title>dokumentumunk címe, ez jelenik meg a böngésző címsorában<body>ez az oldalunk tartalma, ezt látjuk a böngészőben<h1>címsor 1, egyfajta szöveg kiemelés<p>bekezdés
Weblapok elnevezésénél használjunk ékezetmentes, kisbetűs fájlneveket! Kezdő oldalunk neve legyen index.html, ezt keresik és jelenítik meg alapértelmezetten a böngészők. A weboldalunk tartalmát pakoljuk egy könyvtárba, azon belül pedig a képeket külön mappába, meg az egyéb „alkatrészeket”.
Head (fejléc elemei)
<meta charset=”UTF-8″> – karakterkódolás
<meta name=”description” content=”Gyakorlás”> – az oldal leírása
<meta name=”keywords” content=”HTML, CSS, JavaScript”> -kulcsszavak, helyette már a description használatos!
<meta name=”description” content=”Tanuld meg a modern webfejlesztés alapjait: HTML5, CSS3, reszponzív design és biztonságos űrlapok.”>
<meta name=”author” content=”Teszt Elek”> – szerző
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> – képernyő szélesség, és zoom kezdeti értéke
<link rel=”stylesheet” href=”stilus.css”> – CSS fájl megadása
<script src=”sajatJavascript.js”></script> – javascript fájl megadása
Html nyelv, alapelemek
Szöveg formázása
<b>– félkövér szöveg<strong>– félkövér szöveg<i>– dőlt<em>– dőlt<mark>– kiemelt szöveg<small>– kisebb betűs, mint a környező szöveg<del>– áthúzott<ins>– aláhúzott<sub>– alsó index<sup>– felső index- <br> új sor
- Vízszintes vonal: <hr>
Fejlécek – Headings
<h1>…<h6> Az egyes a legnagyobb, a hatos a legkisebb méretű. Címek formázására használjuk.
Bekezdés
Használata nagyon egyszerű: <p>Bekezdés szövege… </p> A html nyelv nem érzékeny az enterre, szóközre, nem fogja külön bekezdésnek venni, ha entert ütünk egy szövegben! A sortörés tag-e a <br>
Hivatkozások (linkek)
Egy hivatkozás mutathat másik oldalra, vagy egyéb fájlra. (pl: pdf-re is) Használhatunk abszolút és relatív hivatkozásokat. Az abszolút hivatkozás, amikor a teljes url címet megadjuk: http://informatikaora.hu/index.html
Honlapunk összetevőit, (oldalak, képek) célszerű egy mappában tárolni. Ilyenkor nem szükséges az abszolút elérési utat megadni, elég a fájl nevét. Ékezeteket lehetőleg ne használjunk, illetve ügyelni kell a fájl kiterjesztésére is, nem mindegy, hogy jpg vagy jpeg.
Hivatkozás megadása:
A fájl ugyanabban a könyvtárban van: (ha nem akkor a mappa nevét is elé kell tenni)
<a href=”fajl.kiterjesztes”>Felirat</a>
Külső weblap:
<a href=”https://informatikaora.hu”>Honlapom</a>
Ha új lapon szeretnénk, hogy megnyiljon a hivatkozás:
<a href=”fajl.kiterjesztes” target=”_blank”>Felirat</a>
Linkek alapértelmezett színei:
Link alapesetben aláhúzott, kék színű
Már meglátogatott link: lila, aláhúzott
Aktív link: piros
Hivatkozások – horgonyok
A horgony segítségével az oldal egy adott pontjára ugorhatunk. Oldalon belülről, vagy másik oldalról is lehet rá hivatkozni.
<p id=”azonosito”>Ez egy példa cím</p>
<a href=”#azonosito”>Ugrás a példa címhez</a>
Másik weboldalról: <a href=”index.html#azonosito”>
Képek
Kép beillesztése az <img> tag-el történik.
<img src=”képneve.kiterjesztése” alt=”kép jellemzője” title=”kép jellemzője” width=”szélessége” height=”magassága”>
Ha nem adunk meg neki szélességet és magasságot, akkor a képet teljes máretben jeleníti meg. Az ‘alt’ szövegét akkor mutatja, ha valamiért nem tudja megjeleníteni a képet a böngésző, title-be írt szöveget pedig akkor, ha a kép fölé visszük az egeret.
Listák
Számozott és rendezetlen listák. <ol> illetve <ul> Ezek a World-ből már ismerősek lehetnek. Természetesen össze is fűzhetjük őket. A listelemeket <li> tag-gel jelöljük.
Definíciós lista
|
1 2 3 4 5 6 7 |
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> <dd>2. sor</dd> </dl> |
A definíciós lista <dl> taggel kezdődik, a <dt> a tagjait definiálja. <dd> a tagok jellemzése
Táblázatok
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>Basic HTML Table</h2> <table style="width:300px"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> |
A táblázat kezdő tag-e: <table> záró tag-e </table>
sor: <tr>
cella: <td>
tábla fejléc: <th>
colspan: oszlopok összevonása
rowspan: sorok összevonása
caption: felirat
|
1 2 3 4 5 6 7 8 9 10 11 |
<table style="width:300px"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table style="width:300px"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> |
Űrlapok
Kezdő tag: <form> záró tag: </form>
<input type=”text”> Egysoros szövegbeviteli mező
<input type=”radio”> Rádió gomb, csak egy lehet egyszerre kijelölve
<input type=”checkbox”>Jelölő négyzet, többet is ki lehet választani
<input type=”submit”> Elküldés gomb
Van még több lehetőség is, a teljes lista a W3School weblapján elérhető.
<form action=”/action_page.php” target=”_blank”> Ezzel lehet megadni, milyen oldal dolgozza fel az űrlap adatait.
<fieldset> Csoportosíthatjuk az elemeket az adott űrlapon
<legend> felirat a <fieldset> mezőnek
<select> legördülő lista
<textarea> többsoros szövegbeviteli mező, megadható a mérete
|
1 2 3 4 5 6 7 8 9 |
<form action="/action_page.php"> Vezetéknév:<br> <input type="text" name="veznev" value="Teszt"> <br> Keresztnév:<br> <input type="text" name="kernev" value="Elek"> <br><br> <input type="submit" value="Submit"> </form> |
|
1 2 3 4 5 6 7 |
<h2>Textarea</h2> <p>Ide több sornyi szöveget is be lehet írni.</p> <form action="/action_page.php"> <textarea name="message" rows="10" cols="30">Ez egy többsoros szövegbeviteli mező.</textarea> <br> <input type="submit"> </form> |
Blokk szintű és soron belüli elemek
Blokkszintű (block-level) elemek
- Jellemzői:
- Tipikus tag-ek:
Inline (soron belüli) elemek
- Jellemzői:
- Tipikus tag-ek:
DIV és SPAN
A <div> és <span> elemek alapvető HTML építőkövek.
<div> – Blokkszintű elem
- Jellemzői:
- Tipikus használat:
<span> – Soron belüli elem
- Jellemzői:
- Tipikus használat:
HTML5 Szemantikus elemek
Szemantikus elemek: Az egyik jelentős előrelépés a HTML5-ben a szemantikus elemek bevezetése volt, amelyek lehetővé teszik a tartalom megfelelő jelentésének és strukturálásának meghatározását. Ilyen elemek például a <header>, <nav>, <article>, <section>, <footer> amelyek megkönnyítik a weboldalak hozzáférhetőségét és keresőoptimalizálását.
Biztonsági beállítások űrlapoknál
HTTPS használata kötelező: minden adatátvitel titkosított legyen. Űrlapoknál:
- Ne küldj adatokat HTTP-n keresztül.
- Használj
method="post"az érzékeny adatokhoz.
Adatvédelem:
- Minimalizáld a bekért adatokat (csak ami szükséges).
- Adj tájékoztatást az adatkezelésről (GDPR).
Jelszavak:
- Soha ne tárold plain textben, használj hash-elést (pl. bcrypt).
Hibakezelés és validálás az űrlapoknál
HTML5 beépített validáció használható pl. email cím bekérése esetén.
required,type="email",pattern,minlength,maxlength.
<input type=”email” name=”email” required placeholder=”Add meg az email címed”>
Mindig figyelni kell, milyen típusú adatot kezelünk! (szöveg, szám, email, dátum stb. ) Célszerű megadni a minimum, maximum értékeket, és azt is, hogy kötelező-e az adott űrlap elem kitöltése.
Egyéb tudnivalók
Multimédia támogatás: Az HTML5 bevezette az audio és video elemeket, amelyek lehetővé teszik a böngészőkben a multimédiás tartalmak lejátszását anélkül, hogy külső böngészőkiegészítőket (pl. Flash) kellene használni.
Canvas elem: Az HTML5 tartalmazza a <canvas> elemet, amely lehetővé teszi a dinamikus rajzolást és animációt a böngészőben JavaScript segítségével.
Geolokáció és tárolás: Az HTML5 bevezette a geolokációs API-t, amely lehetővé teszi a felhasználók fizikai helyzetének meghatározását, valamint a helyi adattárolási lehetőségeket, mint a localStorage és a sessionStorage.
WebSockets és Web Workers: Az HTML5 része a WebSockets és Web Workers, amelyek segítenek az interaktív és aszinkron webalkalmazások fejlesztésében.
Frissítve: 2025.11.11.