Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:html:html5_nyelv [2020/10/15 22:13]
admin [Blokkszintű és inline elemek]
+++ oktatas:web:html:html5_nyelv [2024/03/23 09:42]
admin [HTML5 nyelv]
@@ Sor 4: / Sor 4: @@
   * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016
+  * Copyright (c) 2009, Sallai András
-  * Licenc: GNU Free Documentation License 1.3
+  * Szerkesztve: 2009-2024
+  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
   * Web: https://szit.hu
 ===== Bevezetés =====
-A **HTML** a **HyperText Makeup Language** szavakból alkotott betűszó. Jelentése Hiperszöveget leíró nyelv.
+A **HTML** a **HyperText Markup Language** szavakból alkotott betűszó. Jelentése Hiperszöveget leíró nyelv.
 Tulajdonképpen weboldalak készítésére lett létrehozva. A HTML5-ig hosszú "kanyargós út vezetett.
-A HTML oldalak megjelenítése sosem volt egy egzakt, minden részében pontosan meghatározott művelet.
+A **HTML oldalak megjelenítése sosem volt egy egzakt**, minden részében pontosan meghatározott művelet.
-Ez természetesen a böngészőkön múlik. Azokon belül is mindig a legnépszerűbb böngészők alakítják a szabványokat, amelyeket más böngészőgyártók, kisebb-nagyobb sikerrel szintén megvalósítanak. A böngészők mindig más képességekkel rendelkeztek, holott mindig ugyanazt a weboldalt kellett megjeleníteni. Ha egy weboldal például Firefoxra lett optimalizálva, elkerülhetetlenül lesz aki a weboldalt Chrome-mal, Operával vagy más böngészővel nézi majd meg. A böngészők a nem ismert dokumentum elemeket egyszerűen figyelmen kívül hagyják, de mellette az ismerteket megjelenítik, saját tudásuk szerint. A webmestereknek így nehéz dolguk van, amikor azt szeretnék elérni, hogy minden böngészőben egységes legyen a weboldal megjelenése.
+Ez természetesen a böngészőkön múlik. Azokon belül is mindig a legnépszerűbb böngészők alakítják a szabványokat, amelyeket más böngészőgyártók, kisebb-nagyobb sikerrel szintén megvalósítanak. A böngészők mindig más képességekkel rendelkeztek, holott mindig ugyanazt a weboldalt kellett megjeleníteni. Ha egy weboldal például Firefoxra lett optimalizálva, elkerülhetetlenül lesz aki a weboldalt Chrome-mal, Operával vagy más böngészővel nézi majd meg. A **böngészők a nem ismert dokumentum elemeket egyszerűen figyelmen kívül hagyják**, de mellette az ismerteket megjelenítik, saját tudásuk szerint. A webmestereknek így nehéz dolguk van, amikor azt szeretnék elérni, hogy minden böngészőben egységes legyen a weboldal megjelenése.
@@ Sor 190: / Sor 191: @@
 Ezek szerint az Internet a korai időszakban kb. 20 évig weboldalak nélkül létezett. Meg kell jegyezzük, az Internet ma sem egyenlő a Webbel (nem úgy, mint ahogy azt sokan gondolják). Az Interneten sok más szolgáltatás is van, de kétségtelen, hogy legnépszerűbb a web, ha nem is a legfontosabb.
-A HTML a HyperText Makeup Language szavakból alkotott betűszó. Jelentése **Hiperszöveget** leíró nyelv.
+A HTML a HyperText Markup Language szavakból alkotott betűszó. Jelentése **Hiperszöveget** leíró nyelv.
 A HTML-t **Tim Berners Lee** találta ki 1990-ben, majd **1991**-ben közzé tette. Eredeti célja szerint a HTML csak az oldal szerkezetét határozta volna meg, és egy másik leírónyelv kell meghatározza az oldal kinézetét, stílusát. Az SGML általános célú dokumentumleíró nyelvet választotta a nyelv alapjául.
@@ Sor 431: / Sor 432: @@
 "content" tulajdonságot. Ez alól kivétel lehet a karakterkódolás, amelyet a HTML5 megenged rövidebb formában.
-<code>
+<code html>
 <meta charset="utf-8" />
 </code>
@@ Sor 438: / Sor 439: @@
 Átirányítás ennyi idő múlva:
-<code>
+<code html>
 <meta http-equiv="Refresh" content="0; URL="masikweblap.html">
 </code>
@@ Sor 479: / Sor 480: @@
   * A content-language a tartalma a [[wp>List_of_ISO_639-1_codes|ISO 639-1]] alapján meghatározott két betű.
   * A pragma csak egy másik lehetőség a weblap tárolásának megakadályozására.
 ==== Keresőrobotok ====
@@ Sor 643: / Sor 645: @@
 {{:oktatas:web:html:inline_elemek.png?200|}}
+A CSS segítségével blokk elemekből inline elemet, az inline elemekből blokk
+elemet készíthetünk a "display" tulajdonsággal. A két típus között
+CSS segítségével, állítható inline-blokk elem is. Egy inline-blokk elem
+nem töltik ki vízszintesen a rendelkezésre álló helyet, ahogy az inline
+elem sem, viszont állítható a szélessége.
 ===== Sortörés, elválasztás =====
@@ Sor 695: / Sor 703: @@
 | <nowiki><ins></nowiki> | beszúrt szöveg |
 | <nowiki><del></nowiki> | törölt szöveg |
+| <nowiki><s></nowiki> | elavult, pontatlan, nem fontos szöveg  |
 <html>
@@ Sor 802: / Sor 811: @@
 Rövidítések:
+<code html>
+<abbr>stb.</abbr>
+<abbr>u.</abbr>
+<abbr>dec.</abbr>
+<abbr title="február">feb.</abbr>
+</code>
 <html>
 <div style="margin:2% 10%; background-color: #eeeeee; padding: 5px;">
@@ Sor 807: / Sor 824: @@
 <abbr>u.</abbr>
 <abbr>dec.</abbr>
-<abbr>feb.</abbr>
+<abbr title="február">feb.</abbr>
 </div>
 </html>
@@ Sor 979: / Sor 996: @@
-Az  <ol> tag támogatja az globális attribútumokat a HTML5-ben.
+Az <ol> tag támogatja a globális attribútumokat a HTML5-ben.
 ==== Eseményattribútum ====
@@ Sor 988: / Sor 1005: @@
 ==== Definíciós lista ====
+A definíciókat általánosan így használjuk:
+<code html>
+<dl>
+  <dt>fogalom</dt>
+    <dd>leírás</dd>
+  <dt>fogalom2</dt>
+    <dd>leírás</dd>
+    <dd>alternatív leírás</dd>
+    <dd>másik alternatív leírás</dd>
+</dl>
+</code>
@@ Sor 1004: / Sor 1034: @@
 HTML elemek:
-| <dl> | Egy definíciós lista definiálása |
+| <dl> | Egy definíciós lista definiálása \\ Definition List|
-| <dt> | Egy definíciós lista egy elemét definiálja |
+| <dt> | Egy definíciós lista egy elemét definiálja \\ Definition Term  |
-| <dd> | Egy definíciós lista egy elemének leírása |
+| <dd> | Egy definíciós lista egy elemének leírása \\ Definition Description |
@@ Sor 1067: / Sor 1097: @@
-<code>
+<code html5>
 <figure style="
 	border-style: solid;
@@ Sor 1084: / Sor 1114: @@
 A figure elemmel, természetesen több kép is leírható:
-<code html>
+<code html5>
 <figure>
   <img src="kep01.jpg" alt="Első">
@@ Sor 1092: / Sor 1122: @@
 </figure>
 </code>
+==== Egyéb képformátumok ====
+Vannak más képformátumok is amit webre szántak:
+  * WebP
+  * AVIF
+  * HEIC
+Használatuk azonban jelenleg nem ajánlott az eltérő támogatottság okán.
 ===== Táblázat =====
@@ Sor 1128: / Sor 1169: @@
 ==== Felirat ====
 <code html>
@@ Sor 1199: / Sor 1236: @@
-==== Cella nyúlás ====
+==== Oszlopnyúlás ====
@@ Sor 1239: / Sor 1273: @@
 </html>
-==== Sor nyúlás ====
+==== Sornyúlás ====
@@ Sor 1274: / Sor 1308: @@
-==== Sor és cellanyúlás ====
+==== Sor- és oszlopnyúlás ====
 A rowspan tulajdonsággal sorokat vonhatunk össze.
 <code html>
@@ Sor 1316: / Sor 1349: @@
-==== Oszlopok külön stílusan====
-Az első két oszlop sárba, az utána következő egy oszlop kék.
+{{:oktatas:web:html:tablazat.png?350|}}
+==== Oszlopok külön stílusban====
+A colgroup és a col elem segítségével beállíthatjuk az oszlopok háttérszínét.
+Az első két oszlop sárga, az utána következő egy oszlop kék.
 <code html>
+<!-- Bootstrap mellett nem működnek -->
 <table>
   <colgroup>
     <col span="2" style="background-color:yellow">
-    <col style="background-color:blue; color:white">
+    <col style="background-color:blue">
   </colgroup>
   <tr>
@@ Sor 1343: / Sor 1384: @@
 </table>
 </code>
+<nowiki>A <colgroup> tag, egy <table> elem gyermek kell legyen. A <caption> elemek után kell állnia, és <thead>, <tbody>, <tfoot> és <tr> elemek előtt.</nowiki>
+{{:oktatas:web:html:table_colgroup.png?300|}}
+==== A táblázat részeinek csoportosítása ====
+<code html>
+<table>
+  <thead>
+    <tr>
+      <th>Név</th>
+      <th>Fizetés</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Nagy János</td>
+      <td>3850000</td>
+    </tr>
+    <tr>
+      <td>Kemény Ferenc</td>
+      <td>2870000</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Összesen</td>
+      <td>6720000</td>
+    </tr>
+  </tfoot>
+</table>
+</code>
+{{:oktatas:web:html:tablazat_pelda.png|}}
 ===== Hiperhivatkozás =====
+A **HTML** hivatkozások miatt lett **Hyper Text Markup Language**.
+Egy szöveg azért hypertext, mert vannak benne hivatkozások.
+A hivatkozásokra kattintva, valamilyen másik szövegbe jutunk,
+egy pillanat alatt.
+A hivatkozás célja lehet egy másik weboldal. Lehet a helyi
+weboldalon egy adott pont, vagy a másik weboldalon egy adott pont.
+Utóbbihoz meg kell valahogy jelölni, hol van az ugrás célja.
+A weblapon belüli célokat úgynevezett horgonnyal jelöljük.
+{{:oktatas:web:html:hiperhivatkozas_02.png|}}
+Az alábbiakban megnézzük, hogyan kell horgonyokat és hivatkozásokat
+elhelyezni.
 Horgony:
+<code>
+<a id="alul">
+</code>
 <code>
 <a name="alul">
@@ Sor 1359: / Sor 1464: @@
 <a href="masik.html"><img src="masik.png"></a>
 </code>
+Adott az alábbi HTML oldal, négy bekezdéssel.
+Horgony helyezünk el a harmadik és negyedik bekezdéshez.
+Ehhez valamilyen nevet kell adnunk a bekezdés számára.
+Egy hivatkozással, az adott horgonyhoz ugorhat a felhasználó,
+böngészőből, egyetlen kattintással.
+<code html negybekezdes.html>
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<h2>1</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+<h2>2</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+<a name="harmadik"></a>
+<h2>3</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+<a name="negyedik"></a>
+<h2>4</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+</body>
+</html>
+</code>
+A weblap tetejére, helyezzünk el két hivatkozást az horgonyokra.
+<code html>
+<a href="#harmadik">Harmadik bekezdés</a>
+<a href="#negyedik">Negyedik bekezdés</a>
+</code>
+A teljes kód:
+<code html negybekezdes.html>
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<a href="#harmadik">Harmadik bekezdés</a>
+<a href="#negyedik">Negyedik bekezdés</a>
+<h2>1</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+<h2>2</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+<a name="Harmadik"></a>
+<h2>3</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+<a name="Negyedik"></a>
+<h2>4</h2>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ull
+</p>
+</body>
+</html>
+</code>
+Nézzük meg, hogyan jelenik meg a böngészőben a hiperhivatkozás, a következő ábrán.
+<figure>
+{{:oktatas:web:html:hiperhivatkozas.png|}}
+<caption>Hiperhivatkozás</caption>
+</figure>
+A még meg nem látogatott hiperhivatkozásokat, a legtöbb böngésző
+kék színnel jelöli, aláhúzva.
+A hiperhivatkozásokat az alábbi beépített weblapon kipróbálhatja.
+<html>
+<iframe src="/download/peldak/html5/negybekezdes.html" width="350" height="400" sandbox>
+</iframe>
+</html>
+A hiperhivatkozás mutathat másik weblapra is, illetve azon a weblapon
+belüli is hivatkozhatunk egy horgonyra.
+Készítsünk két weblapot, elso.html és masodik.html néven, a tartalmuk,
+lehet a fenti mintának megfelelően a négy bekezdés. Az weboldalak tetejét
+a következőre változtassuk:
+Az elso.html tetején:
+<code html>
+<a href="masodik.html">Második welap</a><br>
+<a href="masodik.html#negyedik">Második weblap, negyedik bekezdése</a>
+<h1>Első weblap</h1>
+</code>
+Az masodik.html tetején:
+<code html>
+<a href="elso.html">Vissza az első weblapra</a>
+<h1>Második weblap</h1>
+</code>
+Az elso.html weblapon két link (hivatkozás) mutat a masodik.html
+weblapra. Az első hivatkozás a masodik.html tetejére mutat.
+A második hivatkozás a masodik.html negyedik bekezdésére mutat.
+Próbáljuk ki a működést az alábbi beépített weblapon:
+<html>
+<iframe src="/download/peldak/html5/elso.html" width="350" height="400" sandbox>
+</iframe>
+</html>
@@ Sor 1427: / Sor 1685: @@
     * http://ffmpeg.zeranoe.com/builds/
 ===== Hang =====
+<code html>
+<audio src="hangfajl.mp3" controls></audio>
+</code>
 <code html>
@@ Sor 1445: / Sor 1708: @@
 </audio>
 </html>
 ===== Beépített weblap =====
 ==== Egy weblap beépítve ====
 <code html>
@@ Sor 1477: / Sor 1732: @@
 <code html>
 <iframe src="https://szit.hu/download/doboz.html" name="iframe_a" width="500" height="200"></iframe>
-<p><a href="https://szit.hu/doku.php?id=oktatas" target="iframe_a">http://szit.hu/doku.php?id=oktatas</a></p>
+<p><a href="https://szit.hu/doku.php?id=oktatas" target="iframe_a">https://szit.hu/doku.php?id=oktatas</a></p>
 </code>
@@ Sor 1483: / Sor 1738: @@
 <html>
 <iframe src="https://szit.hu/download/doboz.html" name="iframe_a" width="500" height="200"></iframe>
-<p><a href="https://szit.hu/doku.php?id=oktatas" target="iframe_a">http://szit.hu/doku.php?id=oktatas</a></p>
+<p><a href="https://szit.hu/doku.php?id=oktatas" target="iframe_a">https://szit.hu/doku.php?id=oktatas</a></p>
 </html>
+==== Sanbox ====
+Ha van egy index.html weboldalunk, amelybe beágyazzuk a belso.html
+weblapot, a belso weblap műveletei automatikusan érvényesek
+a index.html weblapra is. Ha például van belso.html egy "a" elemmel
+létrehozott horgony, amihez kattintással ugrunk, az index.html weblap
+is görgetésre kerül. Az index.html head elemei között megadott
+beállítások is érvényesek a belso.html oldalon. Ha ezeket
+szeretnénk elkerülni, használjunk sandbox-ot.
+<code html>
+<iframe src="belso.html" width="500" sandbox></iframe>
+</code>
+Engedélyek:
+  * allow-forms
+  * allow-pointer-lock
+  * allow-popups
+  * allow-same-origin
+  * allow-scripts
+  * allow-top-navigation
+Példa két engedélyre:
+<code html>
+<iframe src="belso.html" width="500"
+sandbox="allow-same-origin allow-scripts"
+></iframe>
+</code>
 ===== Űrlap =====
@@ Sor 1495: / Sor 1784: @@
 ==== Űrlap létrehozása ====
 Űrlapot a form elemmel tudunk beszúrni. Van két kötelező tulajdonsága,
@@ Sor 1501: / Sor 1789: @@
 szerveroldali script fogja feldolgozni az űrlapot. A method
 értékeként adjuk meg, hogy milyen metódussal küldjük az űrlapelemet:
+Az input elemek csoportosíthatók a fieldset elemmel, de egyetlen
+csoport esetén is használhatjuk.
 <code html urlap.html>
@@ Sor 1510: / Sor 1801: @@
   <label for="knev">Keresztnév:</lable>
   <input type="text" name="knev" value="" id="knev" /><br />
   <input type="submit" value="Elküld" />
 </fieldset>
 </form>
 </code>
@@ Sor 1822: / Sor 2115: @@
 </code>
+Egyéb
+<code html>
+<select value="" selected disabled hidden>
+  <option value='1'>Opel</option>
+  <option value='2'>Ford</option>
+  <option value='3'>Volvo</option>
+  <option value='4'>Saab</option>
+  <option value='5'>Mercedes</option>
+  <option value='6'>Audi</option>
+</select>
+</code>
 ==== Vizuális elemek ====
@@ Sor 2453: / Sor 2755: @@
+===== Részletek =====
-===== Jelölő elemek =====
+A details a HTML5 egy új eleme. Segítségével
+egy szöveghez tartozó részletes leírás nyitható le,
+vagy zárható be, igény szerint.
-A jelölő elemekkel a többi elemet vagy tartalmat csoportosítjuk, megjelöljük, hogy azokat
+<code html>
-önálló egységként tudjuk formázni CSS-ben.
+<details>
+  <summary>Lorem ipsum</summary>
+  <p>Lorem ipsum dolor est amet</p>
+</details>
+</code>
+Élőben:
+<html>
+<details>
+  <summary>Lorem ipsum</summary>
+  <p>Lorem ipsum dolor est amet</p>
+</details>
+</html>
+A böngészők támogatása:
+^  Goog Chrome  ^  IE/Edge  ^  Firefox  ^  Safari  ^  Opera  ^
+|  12.0  |  79.0  |  49.0  |  6.0  |  15.0  |
+===== Általános jelölő elemek =====
+Az általános jelölő elemekkel a többi elemet vagy tartalmat csoportosítjuk, megjelöljük, hogy azokat önálló egységként tudjuk formázni CSS-ben.
 ==== div ====
@@ Sor 2497: / Sor 2824: @@
 }
 </code>
+===== A data attribútum =====
+A HTML5 bevezette az egyéni attribútumokat, különböző adatok tárolására. Az egyéni attribútumokat a data- előtaggal
+kezdjük, amit egy leírónév követ. Egy elem tetszőleges számú egyéni attribútumot tartalmazhat.
+<code html>
+<div data-magas="35" data-kor="37">János</div>
+</code>
+<code html>
+<button
+    data-az="1"
+    data-nev="János"
+    data-telepules="Szolnok"
+    id="torlesgomb"
+    >Törlés</button>
+</code>
+Az adatattribútumokban csak szöveget lehet tárolni, objektumokat nem tárolhatunk. Az objektumok esetleg szérializálással tárolhatók.
+==== Olvasás és írás JavaScriptben ====
+<code javascript>
+var button = document.getElementById('torlesgomb');
+var az = button.getAttribute('data-az');
+var nev = button.getAttribute('data-nev');
+button.setAttribute('data-az', '2');
+button.setAttribute('data-nev', 'Pál');
+</code>
+Olvasás 2
+<code html>
+    <button
+        data-city="Szeged"
+        onclick="mehet()"
+        >
+        Mehet
+    </button>
+</code>
+<code javascript>
+function mehet() {
+    const source = this.event.target;
+    console.log(source.getAttribute('data-city'))
+}
+</code>
+Olvasás 3:
+<code html>
+    <button
+        data-city="Szeged"
+        onclick="mehet(this)"
+        >
+        Mehet
+    </button>
+</code>
+<code javascript>
+function mehet(source) {
+    console.log(source.getAttribute('data-city'))
+}
+</code>
+Olvasás 4:
+<code html>
+    <button
+        data-city="Szeged"
+        onclick="mehet(this)"
+        >
+        Mehet
+    </button>
+</code>
+<code javascript>
+function mehet(source) {
+    console.log(source.dataset.city)
+}
+</code>
+==== Olvasás írás jQuery-ben ====
+<code javascript>
+var az = $('#torlesgomb').attr('az');
+var id = $('#torlesgomb').attr('nev');
+$('#torlesgomb')
+    .attr('data-az', '2')
+    .attr('data-nev', 'Pál');
+</code>
+==== Elérés dataset API-n keresztül ====
+<code javascript>
+var button = document.getElementById('torlesgomb');
+var az = button.dataset.az;
+var nev = button.dataset.nev;
+button.dataset.az = '2';
+button.dataset.nev = 'Pál';
+</code>
+==== Hozzáférés CSS-ből ====
+<code css>
+[data-telepules='Szolnok'] {
+    background-color: red;
+}
+</code>
+<code css>
+li[data-telepules='Szolnok'] {
+    background-color: red;
+}
+</code>
+===== Szemantikus elemek =====
+A szemantikus elemek egyértelműen
+megmondják a böngésző és a fejlesztő
+számára is, hogy mit tartalmaznak.
+Néhány szemantikus elemek:
+  <form>, <table>, <article>.
+A nem szemantikus elemek:
+  <div>, <span>
+Tartalmuk akármi lehet.
+Néhány szemantikus elem:
+  * <table>
+  * <form>
+  * <section>
+  * <article>
+  * <nav>
+  * <header>
+  * <footer>
+  * <figure>
+  * <figcaption>
+  * <details>
+  * <main>
+  * <mark>
+  * <summary>
+  * <time>
+==== Az oldal szerkezetét leíró elemek ====
+  * section
+  * aside - érintőlegesen kapcsolódó tartalom((https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside))
+  * header
+  * nav
+  * footer
+  * article - tartalmi egységek tárolása - post, egy írás
+  * main - az oldal főbb része
+==== Példa 01 ====
+<code html5>
+    <article>
+        <header>
+            <h1>Python</h1>
+        </header>
+        <p>A Python nyelv Guido van Rossum kezdte</p>
+        <footer>
+            <p>Programási nyelvekről - Nagy János</p>
+        </footer>
+    </article>
+</code>
+<code html5>
+    <article>
+        <h1>Python</h1>
+        <p>A Python nyelv Guido van Rossum kezdte</p>
+    </article>
+</code>
+<code html5>
+    <section>
+        <header>
+            <h1>Programozási nyelvek</h1>
+        </header>
+        <p>Lorem ipsum dolor est amet.</p>
+    </section>
+</code>
+<code html5>
+    <nav>
+        <ul>
+            <li><a href="#">Python</a></li>
+            <li><a href="">Java</a></li>
+            <li><a href="">JavaScript</a></li>
+            <li><a href="">PHP</a></li>
+        </ul>
+    </nav>
+</code>
+==== article ====
+<code html5>
+<article class="prog">
+    <h1>Programozási nyelvek</h1>
+    <article class="lang">
+        <h2>Python</h2>
+        <p>Bevezetéshez</p>
+    </article>
+    <article class="lang">
+        <h2>Java</h2>
+        <p>Asztali alkalmazásokhoz</p>
+    </article>
+    <article class="lang">
+        <h2>PHP</h2>
+        <p>Webes szerverekhez</p>
+    </article>
+</article>
+</code>
+{{:oktatas:web:html:article_element.png|}}
+<tabbox index.html>
+<code html5>
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prog</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<article class="prog">
+    <h1>Programozási nyelvek</h1>
+    <article class="lang">
+        <h2>Python</h2>
+        <p>Bevezetéshez</p>
+    </article>
+    <article class="lang">
+        <h2>Java</h2>
+        <p>Asztali alkalmazásokhoz</p>
+    </article>
+    <article class="lang">
+        <h2>PHP</h2>
+        <p>Webes szerverekhez</p>
+    </article>
+</article>
+</body>
+</html>
+</code>
+<tabbox style.css>
+<code css>
+* {
+    margin: 0;
+    padding: 0;
+}
+html {
+    font-family: Arial, Helvetica, sans-serif;
+    color: navy;
+}
+.prog {
+    width: 250px;
+    background-color:aqua;
+    padding: 6px;
+    margin: 30px;
+}
+.prog h1 {
+    font-size: 1.3rem;
+    text-align: center;
+}
+.lang {
+    border: solid 2px skyblue;
+    margin: 10px;
+    padding: 0 8px;
+}
+.lang h2 {
+    font-size: 1.2rem;
+}
+</code>
+</tabbox>
+==== aside ====
+<code html5>
+    <aside>
+    A HTML5 nyelvet az XML alapján alkották meg,
+    amely egy általános célú dokumentum leíró
+    nyelv. A HTML5 „laza” szabályzata miatt
+    ugyanakkor nem teljesíti százszázalékosan
+    az XML követelményeit.
+    </aside>
+    <p>
+    A HTML a HyperText Markup Language szavakból
+    alkotott betűszó. Jelentése Hiperszöveget leíró
+    nyelv. Tulajdonképpen weboldalak készítésére lett
+    létrehozva. A HTML5-ig hosszú „kanyargós út vezetett.
+    A HTML oldalak megjelenítése sosem volt egy egzakt,
+    minden részében pontosan meghatározott művelet.
+    Ez természetesen a böngészőkön múlik. Azokon belül
+    is mindig a legnépszerűbb böngészők alakítják a
+    szabványokat, amelyeket más böngészőgyártók, kisebb-nagyobb
+    sikerrel szintén megvalósítanak. A böngészők mindig más
+    képességekkel rendelkeztek, holott mindig ugyanazt a
+    weboldalt kellett megjeleníteni. Ha egy weboldal például
+    Firefoxra lett optimalizálva, elkerülhetetlenül lesz aki
+    a weboldalt Chrome-mal, Operával vagy más böngészővel nézi
+    majd meg. A böngészők a nem ismert dokumentum elemeket
+    egyszerűen figyelmen kívül hagyják, de mellette az
+    ismerteket megjelenítik, saját tudásuk szerint. A
+    webmestereknek így nehéz dolguk van, amikor azt
+    szeretnék elérni, hogy minden böngészőben egységes
+    legyen a weboldal megjelenése.
+    </p>
+</code>
+{{:oktatas:web:html:aside_element.png|}}
@@ Sor 2502: / Sor 3169: @@
 ==== A tárolóelemekről ====
-A tároló elemeket a HTML5-ben hozták létre, az oldal tartalmainak felosztására. Korábban erre csak a div elemek áltak
+A tároló elemeket a HTML5-ben hozták létre, az oldal tartalmainak felosztására, csoportosítására. Korábban erre csak a div elemek álltak rendelkezésre, amelyeket mindig egy azonosítóval vagy osztállyal jelöltünk meg, hogy jelezzük mi a szerepük. A HTML5-től a következő elemek is rendelkezésre állnak.
-rendelkezésre, amelyeket mindig egy azonosítóval vagy osztállyal jelöltünk. A HTML5-től a következő elemek is
-rendelkezésre állnak.
+| <header > | A weboldal vagy egy szakasz felső része. |
+| <nav>     | Navigációs rész. Linkek egy \\ csoportja nem elég indok használni.  |
+| <article> | Független, önálló tartalom. \\ Használat előtt tegyük fel a következő kérdést: \\ Ami az article elemmel jelölök, önmagában is értelmes? |
+| <section> | A weboldal egy része. Nem használjuk burkoló elemként! \\ Tematikusan kapcsolódó tartalmakat csoportosítunk vele. \\ Használat előtt tegyük fel a kérdést: \\ Az összes tartalom kapcsolódik egymáshoz? |
+| <aside>   | Oldaljegyzet. Érintőlegesen kapcsolódó tartalomhoz. |
+| <footer>  | A weboldal, vagy egy szakasz alsó része |
+| <main> | A fejrész és a lábléc között használatos elem. \\ A main elemnek a szülője a body elem kell legyen. \\ Ettől függetlenül több main elem is lehet egy weblapon. |
+Találkozhatunk olyan weboldallal, ahol a section elem article elemeket tartalmaz, és olyannal is, ahol az article elem section elemeket tartalmaz.
+=== header ===
+A header elemek nem csak a weblap fejrészét, de egy szakasz fejrészét is jelölhetik.
+Az oldal fejrészeként olyan tartalmak szokásos jelölője, mint:
+  * címsorok
+  * logó
+  * szerzői adatok
+=== Internet Exploler ===
-| <header > | A weboldal felső része |
-| <nav>     | Navigációs része       |
-| <article> | Független, önálló tartalom |
-| <section> | A weboldal egy része. Nem használjuk burkoló elemként! |
-| <aside>   | Oldaljegyzet |
-| <footer>  | A weboldal alsó része |
 Az Internet Exploler nem ismeri ezeket az elemeket, ezért JavaScript és CSS segítségével szokás az oldalt kompatibilissé tenni.
@@ Sor 2541: / Sor 3222: @@
     <p>Első bekezdés</p>
     <aside>
-        <q>A nagymacskák azok másféle állatok</q>
+        <q>A nagymacskák, azok másféle állatok</q>
     </aside>
     <p>A macskák élete</p>
@@ Sor 2583: / Sor 3264: @@
 </div>
 </html>
+==== A main elem ====
+<code html>
+<header>Madarak</header>
+<main>
+   <p>A madár szárnyakkal rendelkező állat.</p>
+   <p>A madarak között találunk ragadozókat és nem ragadozókat.</p>
+</main>
+</code>
+<code html>
+<main>
+  <h1></h1>
+  <p></p>
+  <article>
+     <h2></h2>
+     <p></p>
+     <p></p>
+     <p></p>
+  </article>
+  <article>
+     <h2></h2>
+     <p></p>
+     <p></p>
+     <p></p>
+  </article>
+</main>
+</code>
@@ Sor 2719: / Sor 3436: @@
 |  ⇔  |  &hArr;  |  &#8660;  |
 |  #  |  &num;   |  &#35; |
+|  <nowiki>|</nowiki>  |  &vert  |  ???  |
+|  _  |  ???  |  &#95  | alulvonás |
@@ Sor 2743: / Sor 3462: @@
 </html>
-==== Rajzolás JavaScripttel ====
-<code html>
-<canvas id="vaszon2" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon2");
-var ctx=c.getContext("2d");
-ctx.fillStyle="#0000ff";
-ctx.fillRect(10,10,150,75);
-</script>
-</code>
-<html>
-<canvas id="vaszon2" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
+===== Viewport =====
-<script>
+A **viewport** a weboldalnak a **felhasználó által látható területe**.
+A nézet eszköztől függően változik. Számítógépen és mobiltelefon
+különbözik, utóbbin kisebb lesz.
-var c=document.getElementById("vaszon2");
+A viewport bevezetését szükségessé tette a **telefonok és táblagépek
-var ctx=c.getContext("2d");
+megjelenése**.
-ctx.fillStyle="#0000ff";
-ctx.fillRect(10,10,150,75);
-</script>
+A HTML5 a meta elemmel bevezetett egy beállítást a
+különböző eszközök számára.
-</html>
-==== Vonalhúzás ====
+Tegyük weboldalunk fejrészébe az alábbi sort:
 <code html>
-<canvas id="vaszon3" width="200" height="100" style="border:1px solid #000000;">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon3");
-var ctx=c.getContext("2d");
-ctx.moveTo(0,0);
-ctx.lineTo(300,150);
-ctx.stroke();
-</script>
 </code>
-<html>
+A mai böngészők fejlesztői felületei lehetőséget kínálnak a kisebb képernyős
-<canvas id="vaszon3" width="200" height="100" style="border:1px solid #000000;">
+felületen a weblap megtekintésére.
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
+Készítsünk egy egyszerű weblapot és nézzük meg a fenti viewport beállítás nélkül
-<script>
+és a beállítással együtt is.
-var c=document.getElementById("vaszon3");
-var ctx=c.getContext("2d");
-ctx.moveTo(0,0);
-ctx.lineTo(300,150);
-ctx.stroke();
-</script>
-</html>
-==== Kör ====
+===== Fogd és húzd =====
 <code html>
-<canvas id="vaszon4" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon4");
-var ctx=c.getContext("2d");
-ctx.beginPath();
-ctx.arc(95,50,40,0,2*Math.PI);
-ctx.stroke();
-</script>
-</code>
+<!DOCTYPE html>
 <html>
-<canvas id="vaszon4" width="200" height="100" style="border:1px solid #000000;">
+<head>
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
+<style type="text/css">
+#div2 {
+    width:70px;
+    height:70px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+</style>
-<script>
-var c=document.getElementById("vaszon4");
+<script type="text/javascript">
-var ctx=c.getContext("2d");
+function allowDrop(ev)
-ctx.beginPath();
+{
-ctx.arc(95,50,40,0,2*Math.PI);
+    ev.preventDefault();
-ctx.stroke();
+}
-</script>
-</html>
+function drag(ev)
+{
-==== Több rajz ====
+    ev.dataTransfer.setData("Text",ev.target.id);
+}
-<code html>
-<canvas id="vaszon" width="600" height="220"></canvas>
-<script>
-var v = document.getElementById("vaszon").getContext("2d");
-v.fillStyle="rgba(0,0,123,1.0)";
-v.fillRect(50, 10, 150, 50);
-v.strokeStyle="rgba(0,0,123,1.0)";
-v.strokeRect(50, 80, 240, 120);
-v.beginPath();
-v.arc(450, 110, 100,  Math.PI * 2/2, Math.PI * 4/2);
-v.lineWidth = 10;
-v.lineCap = 'round';
-v.strokeStyle = 'rgba(255, 127, 0, 1.0)';
-v.stroke();
+function drop(ev)
+{
+    ev.preventDefault();
+    var data=ev.dataTransfer.getData("Text");
+    ev.target.appendChild(document.getElementById(data));
+}
 </script>
+</head>
+<body>
-</code>
+<div id="div1" ondrop="drop(event)"
+ondragover="allowDrop(event)"></div>
-<html>
+<img id="drag1" src="lib/images/notify.png" draggable="true"
-<canvas id="vaszon" width="600" height="220"></canvas>
+ondragstart="drag(event)" width="69" height="69">
-<script>
-var v = document.getElementById("vaszon").getContext("2d");
-v.fillStyle="rgba(0,0,123,1.0)";
-v.fillRect(50, 10, 150, 50);
-v.strokeStyle="rgba(0,0,123,1.0)";
-v.strokeRect(50, 80, 240, 120);
-v.beginPath();
-v.arc(450, 110, 100,  Math.PI * 2/2, Math.PI * 4/2);
-v.lineWidth = 10;
-v.lineCap = 'round';
-v.strokeStyle = 'rgba(255, 127, 0, 1.0)';
-v.stroke();
-</script>
+</body>
 </html>
-==== Szöveg ====
-<code html>
-<canvas id="vaszon5" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon5");
-var ctx=c.getContext("2d");
-ctx.font="30px Arial";
-ctx.fillText("Helló Világ",10,50);
-</script>
 </code>
-<html>
-<canvas id="vaszon5" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon5");
-var ctx=c.getContext("2d");
-ctx.font="30px Arial";
-ctx.fillText("Helló Világ",10,50);
-</script>
-</html>
-==== Szöveg 2 ====
-<code html>
-<canvas id="vaszon6" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon6");
-var ctx=c.getContext("2d");
-ctx.font="30px Arial";
-ctx.strokeText("Hello World",10,50);
-</script>
-</code>
 <html>
-<canvas id="vaszon6" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
+<style type="text/css">
+#div2 {
-var c=document.getElementById("vaszon6");
+    width:70px;
-var ctx=c.getContext("2d");
+    height:70px;
-ctx.font="30px Arial";
+    padding:10px;
-ctx.strokeText("Hello World",10,50);
+    border:1px solid #aaaaaa;
+}
-</script>
+</style>
-</html>
-==== Színátmenet ====
-<code html>
-<canvas id="vaszon7" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
 <script>
-var c=document.getElementById("vaszon7");
+function allowDrop(ev)
-var ctx=c.getContext("2d");
+{
+    ev.preventDefault();
+}
-// Átmenet
+function drag(ev)
-var grd=ctx.createLinearGradient(0,0,200,0);
+{
-grd.addColorStop(0,"blue");
+    ev.dataTransfer.setData("Text",ev.target.id);
-grd.addColorStop(1,"white");
+}
-// Kitöltés
-ctx.fillStyle=grd;
-ctx.fillRect(10,10,150,80);
+function drop(ev)
+{
+    ev.preventDefault();
+    var data=ev.dataTransfer.getData("Text");
+    ev.target.appendChild(document.getElementById(data));
+}
 </script>
-</code>
+<p>Húzd a képet a téglalapra:</p>
-<html>
+<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
-<canvas id="vaszon7" width="200" height="100" style="border:1px solid #000000;">
+</div>
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
+<br>
-<script>
+<img id="drag2" src="lib/images/notify.png" draggable="true" ondragstart="drag(event)" width="69" height="69">
-var c=document.getElementById("vaszon7");
-var ctx=c.getContext("2d");
-// Átmenet
-var grd=ctx.createLinearGradient(0,0,200,0);
-grd.addColorStop(0,"blue");
-grd.addColorStop(1,"white");
-// Kitöltés
-ctx.fillStyle=grd;
-ctx.fillRect(10,10,150,80);
-</script>
 </html>
@@ Sor 3046: / Sor 3596: @@
-==== Színátmenet 2 ====
+===== Gyakorlatok =====
+  * Keressen olyan HTML elemeket, az alábbi oldalon, amik nem szerepelnek ezen az oldalon:
+    * https://www.w3schools.com/tags/ (2020)
-<code html>
-<canvas id="vaszon8" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon8");
-var ctx=c.getContext("2d");
-// Átmenet
-var grd=ctx.createRadialGradient(75,50,5,90,60,100);
-grd.addColorStop(0,"blue");
-grd.addColorStop(1,"white");
-// Kitöltés
-ctx.fillStyle=grd;
-ctx.fillRect(10,10,150,80);
-</script>
-</code>
-<html>
-<canvas id="vaszon8" width="200" height="100" style="border:1px solid #000000;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon8");
-var ctx=c.getContext("2d");
-// Átmenet
-var grd=ctx.createRadialGradient(75,50,5,90,60,100);
-grd.addColorStop(0,"blue");
-grd.addColorStop(1,"white");
-// Kitöltés
-ctx.fillStyle=grd;
-ctx.fillRect(10,10,150,80);
-</script>
-</html>
-==== Kép ====
-<code html>
-<p>A kép használata:</p>
-<img id="sikoly" src="sikoly.jpg" alt="A sikoly" width="220" height="277">
-<p>Vászon:</p>
-<canvas id="vaszon9" width="250" height="300" style="border:1px solid #d3d3d3;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-var c=document.getElementById("vaszon9");
-var ctx=c.getContext("2d");
-var img=document.getElementById("sikoly");
-ctx.drawImage(img,10,10);
-</script>
-</code>
-<html>
-<p>A kép használata:</p>
-<img id="sikoly" src="http://w3schools.com/html/img_the_scream.jpg" alt="A sikoly" width="220" height="277">
-<p>Vászon:</p>
-<canvas id="vaszon9" width="250" height="300" style="border:1px solid #d3d3d3;">
-A böngésződ nem támogatja a HTML5 rajzvászont.
-</canvas>
-<script>
-window.onload = function() {
-  var c=document.getElementById("vaszon9");
-  var ctx=c.getContext("2d");
-  var img=document.getElementById("sikoly");
-  ctx.drawImage(img,10,10);
-};
-</script>
-</html>
-==== Más példa ====
-<code html>
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8" />
-<title></title>
-</head>
-<body>
-<canvas id="canvas1" width="200" height="100" style="border:1px solid #000000;"></canvas>
-<script>
-var can=document.getElementById("canvas1");
-var ctx=can.getContext("2d");
-ctx.fillStyle="#00FF00";
-ctx.fillRect(30,30,50,50);
-</script>
-</body>
-</html>
-</code>
-<code html>
-<canvas id="canvas1" width="200" height="100"style="border:1px solid #000000;"></canvas>
-<script>
-var can=document.getElementById("canvas1");
-var ctx=can.getContext("2d");
-var grd=ctx.createLinearGradient(0,0,200,0);
-grd.addColorStop(0,"blue");
-grd.addColorStop(1,"white");
-ctx.fillStyle=grd;
-ctx.fillRect(30,30,100,50);
-</script>
-</code>
-<html>
-<canvas id="canvas1" width="200" height="100"style="border:1px solid #000000;"></canvas>
-<script>
-var can=document.getElementById("canvas1");
-var ctx=can.getContext("2d");
-var grd=ctx.createLinearGradient(0,0,200,0);
-grd.addColorStop(0,"blue");
-grd.addColorStop(1,"white");
-ctx.fillStyle=grd;
-ctx.fillRect(30,30,100,50);
-</script>
-</html>
-<code javascript>
-var can=document.getElementById("canvas1");
-var ctx=can.getContext("2d");
-ctx.moveTo(0,0);
-ctx.lineTo(200,100);
-ctx.stroke();
-</code>
-A moveTo() -tól a lineTo()-ig húzunk vonalat.
-<code javascript>
-//arc(x, y, r, start, stop)
-var can=document.getElementById("canvas1");
-var ctx=can.getContext("2d");
-ctx.beginPath();
-ctx.arc(55, 50, 40, 0, 2 * Math.PI);
-ctx.stroke();
-</code>
-<html>
-<canvas id="canvas3" width="200" height="100"style="border:1px solid #000000;"></canvas>
-<script>
-var can=document.getElementById("canvas3");
-var ctx=can.getContext("2d");
-ctx.beginPath();
-ctx.arc(55, 50, 40, 0, 2 * Math.PI);
-ctx.stroke();
-</script>
-</html>
-==== Viewport ====
-Ahhoz, hogy telefonon is megfelelő méretben jelenjen meg a weblapunk, állítsuk be
-a viewportot.
-<code html>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-</code>
 ===== Szerkesztők =====
-WYSIWYG szerkesztők
+  * Visual Studio Code
-  * [[wp>Kompozer|Kompozer]]
+  * Brackets
-  * [[wp>Microsoft_FrontPage|FrontPage]]
+  * Atom
+  * Bluefish
-Szerkesztők
-  * Bluefish
-  * Notepad2
-  * Scite
-  * [[http://www.screem.org|Screem]]
 ===== Függelék =====
-==== HTML5 sablon ====
-<code html>
-<!DOCTYPE html>
-<html lang="hu">
-<head>
-<meta charset="utf-8">
-<title>Névtelen</title>
-<!--[if lt IE 9]>
-     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
-</head>
-<body>
-</body>
-</html>
-</code>
 ==== PDF beépítése ====
@@ Sor 3301: / Sor 3623: @@
 </object>
 </code>
-==== Szemantikus elemek ====
-A szemantikus elemek egyértelműen
-megmondják a böngésző és a fejlesztő
-számára is, hogy mit tartalmaznak.
-Szemantikus elemek:
-  <form>, <table>, <article>.
-A nem szemantikus elemek:
-  <div>, <span>
-Tartalmuk akármi lehet.
-Néhány szemantikus elem:
-  * <table>
-  * <form>
-  * <section>
-  * <article>
-  * <nav>
-  * <header>
-  * <footer>
-  * <figure>
-  * <figcaption>
-  * <details>
-  * <main>
-  * <mark>
-  * <summary>
-  * <time>

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon