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 [2019/05/03 22:12]
+++ oktatas:web:html:html5_nyelv [2020/10/15 22:13]
admin [Blokkszintű és inline elemek]
@@ Sor 1: / Sor 1: @@
+[[:oktatas:web:html|< HTML]]
+====== HTML5 nyelv ======
+  * **Szerző:** Sallai András
+  * Copyright (c) Sallai András, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016
+  * Licenc: GNU Free Documentation License 1.3
+  * Web: https://szit.hu
+===== Bevezetés =====
+A **HTML** a **HyperText Makeup 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.
+A jelenlegi legújabb HTML verzió a HTML5. A böngészők a HTML5 nyelvet nem ismerik
+százszázalékosan, de folyamatosan megvalósítják az újabb verzióikban.
+A böngészőnk HTML5 képességét ellenőrizzük itt: http://html5test.com
+===== A nyelvekről =====
+==== Nyelvek szerkezete ====
+Mivel nyelvről beszélünk, ezért nézzük meg hogyan épül fel egy nyelv. Egy bármilyen nyelv
+szerkezetileg három részből áll: ábécé, szintaktika, szemantika.
+{{:oktatas:web:html:kodolas01.png|}}
+Az ábécé a nyelv jelkészlete. A HTML esetén ez azok a karakterek, amelyekkel
+elkészíthetünk egy weboldalt.
+A szintaktika a helyesírási szabályok. A HTML esetén a weblap leírásának szabályai.
+A szemantika a nyelv jelentéstana. Ha szintaktikailag helyes mondatokat hozunk létre,
+de a jelentés értelmetlen, vagy nem az amit vártunk, akkor szemantikai hibáról
+beszélünk. A HTML esetén, nem azt a kinézetet, vagy tartalmat kapjuk amit vártunk, de szintaktikailag
+helyes.
+==== Nyelvek osztályozása ====
+A nyelveket feloszthatjuk természetes és mesterséges nyelvekre.
+^  Természetes  ^  Mesterséges  ^^
+^ ::: ^ Kommunikációra szánt ^ Formális ^
+| magyar  | Eszperantó  | C  |
+| angol  | Eurolatin  | C++  |
+| német  | Egyszerű angol  | Python  |
+| francia  | Gestuno  | Perl  |
+| olasz  | Volapük  | HTML  |
+| spanyol  | Intal  | XHTML  |
+| görög  | Ido  | HTML5  |
+A formális nyelvek osztályozása
+^  Formális nyelvek   ^^^^^
+|  lekérdező  |  dokumentumleíró  |  programozási  |  matematikai  |  logikai  |
+| SQL  |  HTML  |  C  |
+| [[wp>xBase|xBase]]   |  XHTML  |  C++  |
+| [[wp>ECL_(data-centric_programming_language)|HPCC ECL]]  |  SGML  |  Pascal  |
+|    |  XML  |  Java  |  |
+===== Eredet (SGML, XML) =====
+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.
+Az XML az SGML (Standard Generalized Markup Language) alapján készült.
+Az SGML nyelven egy dokumentumot több részre tagolunk általunk meghatározott elemekkel.
+Ezen elemek neveit a "<" és ">" jelek között helyezzük el, hogy elkülönüljön a
+dokumentum tartalmától. Az elemek neveit mi magunk találhatjuk ki. Például
+tárolni szeretnénk egy gépjármű adatait akkor az egész dokumentum tartalmát
+közrefoghatjuk egy gépjármű nevű elemmel:
+<code xml>
+<gepjarmu>
+</gepjarmu>
+</code>
+Egy gépárműről szeretnénk tárolni a rendszámát, űrtartalmát és színét.
+<code xml>
+<gepjarmu>
+    <rendszam>ASG-843</rendszam>
+    <urtartalom>1800</urtartalom>
+    <szin>piros</szin>
+</gepjarmu>
+</code>
+A dokumentumot a gépjármű elem kezdi és zárja, ezért ezeket gyökér elemeknek nevezzük.
+Vegyük észre, hogy a záró elem nevét mindig "/" karakter előzi meg.
+XML
+<code xml>
+<?xml version="1.0"?>
+<gepjarmu>
+    <rendszam>ASG-843</rendszam>
+    <urtartalom>1800</urtartalom>
+    <szin>piros</szin>
+</gepjarmu>
+</code>
+===== Gyakorlat 01 =====
+  - Mi az SGML?
+  - Mi az XML?
+  - Hogyan osztályozzuk a nyelveket?
+  - Hogyan épül fel egy nyelv?
+  - Milyen dokumentumleíró nyelv alapján készült a HTML5?
+  - Készítsen egy SGML dokumentumot, amely dolgozók adatait tárolja.
+===== HTML szabályok (helyesírás) =====
+==== DTD ====
+Úgynevezett DTD-ékben definiáljuk az SGML és az XML alapján alkalmazni kívánt szintaxist.
+A DTD a Document Type Definition szavakból alkotott betűszó, magyarul Dokumentum Típus Definíció néven fordítható.
+Egy DTD egyetlen sora általánosan így írható le:
+<code dtd>
+<!DOCTYPE root-elem [elem-deklarációk]>
+</code>
+A felkiáltó jel és root elem után megadhatunk egyéb deklarációt is, de az nem kötelező.
+==== DTD példák ====
+Járművekről általános szöveges leírást szeretnék tárolni. Az eltárolandó szöveg például:
+  A járművek a közlekedés eszközei.
+A DTD így nézhet ki:
+jarmu.dtd:
+  <!DOCTYPE jarmu [
+  <!ELEMENT jarmu (#PCDATA)>
+  ]>
+A példában egyetlen elemet deklaráltunk. Ez a gyökérelem, ami bármilyen szöveget tartalmazhat.
+A dokumentum ekkor így nézhet ki:
+<code xml>
+  <!DOCTYPE jarmu SYSTEM "jarmu.dtd">
+  <jarmu>
+    A járművek a közlekedés eszközei.
+  </jarmu>
+</code>
+Járművekről szeretnék információt tárolni egy dokumentumban.
+A PCDATA a "parsed charachter data" szavakból alkotott betűszó. Az SGML vagy XML parszer
+átvizsgálja az ilyen adatot, és markup-okat és entity-ket keres benne. Ha ilyet talál,
+azokat visszakódolja (kifejti). Ilyen kód lehet az &lt; vagy &gt;
+A CDATA a "character data" szavakból alkotott betűszó. Ilyen tartalomban az XML parszer nem végez
+entitáskeresést, ha van benne egy &lt; akkor azt négy önálló karakterként értelmezi.
+A CDATA tartalmazt a <![CDATA[ nyitó és ]]> bezáró jelek közzé tesszük.
+==== XML Schema ====
+Az XML Schema-át a W3C a DTD utódaként definiálta. Dokumentációja és használata igen bonyolult.
+A DTD pedig nem teljesen fedi le az XML lehetőségeit.
+===== A HTML nyelvről =====
+Az Internet az **ARPANET**-el kezdődött **1969**-ben. Ekkor és még ez után több mint 20 évig webről szó sem volt.
+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-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.
+A HTML nem kis és nagybetűérzékeny. A kezdetekben a HTML elemeket nagybetűvel írtuk, hogy azok jól
+elkülönüljenek a tartalomtól. Idővel a HTML nyelv átalakítása XML alapokra szülte az XHTML nyelvet.
+Mivel ez XML-en alapszik az elemeket csak kisbetűvel lehetett írni.
+{{:oktatas:web:html:html_tortenete.png|}}
+Most a HTML5 nyelvben a kis és nagybetű újra lényegtelen. A HTML5 elemeket azonban ajánlott mégis
+kisbetűvel írni, mert a böngésző úgyis átalakítja.
+**Tim Berners Lee** egy szövetséget hozott létre a webes szabványok kidolgozására, amelynek neve W3C lett. Az első HTML verzió után további verziók jelentek meg.
+{{:oktatas:web:html:sgm_html_osszefugges.png|}}
+^  HTML verziók  ^^
+| első | 1991 |
+| 2.0  | 1995 |
+| 3.2  | 1997 |
+| 4.0  | 1997 |
+| 4.01 | 1999 |
+^  XHTML verziók ^^
+| 1.0 | 2000 |
+| 1.1 | 2001 |
+| 2.0 | 2009 |
+^  HTML5  ^^
+| első | 2008 |
+A HTML5-öt nem a W3C konzorcium hozza létre. A böngészőgyártók nem voltak hajlandóak igazodni a szigorú XHTML szabványhoz. Úgy döntöttek meg kell jeleníteni a szemetet is. 2007-ben a **Mozilla Foundation**, **Apple**, és **Opera Software** létrehoztak egy munkacsoportot **WHATWG** néven,
+azaz **Web Hypertext Application Technology Working Group**. A csoport létrehozta a HTML5 nyelvet. A W3C konzorciummal való együttműködést azonban nem zárták ki, maga a konzorcium kénytelen hozzájuk igazodni, mivel az alternatív böngészők egyre nagyobb részesedést szereznek a böngészőpiacon. A W3C konzorciumra vár végül a feladat, hogy kidolgozza a HTML5 szabványt, miközben a böngésző gyártók megvalósítják azt.
+A böngészők HTML5 képességét pontozással mérjük 1 -- 555-ös skálán, amelyen 2013 áprilisában a következő pontszámok érvényesek:
+^  2013 április  (ekkor a max. pont: 500)  ^^^
+^  Böngésző  ^  Pont  ^  Bónusz  ^
+| Chrome 26 | 468 | 13 |
+| Opera 12.10 | 419 | 9 |
+| Firefox 20 | 394 | 10 |
+| Safari 6.0 | 378 | 8 |
+| Internet Explorer 10 | 320 | 6 |
+  * http://html5test.com/
+A web talán a leggyorsabban változó technológia. Amióta van -- a gyors változásoknak köszönhetően --
+mindig más és más volt a népszerű a webmesterek között. Az első időszakban ha valakinek volt
+saját honlapja, az menő volt. Később képekkel tarkították a hiperszöveget. Ez után jött a
+CGI, amely által a weboldalak interaktívak lettek.
+A következő ábrán megpróbáltam összeszedni a teljesség igénye nélkül a fontosabb mérföldköveket.
+Az ábra a teljesség igénye nélkül készült és szubjektív ítéleteken alapszik.
+{{:oktatas:web:html:nepszerusegi_tortenet.png|}}
+===== Gyakorlat 02 =====
+  * Milyen nyelvből ered a HTML nyelv?
+  * Mi az SGML?
+  * Mi a HTML?
+  * Mi a DTD?
+  * Ki találta ki a HTML nyelvet?
+  * Ki készítette el az XML nyelvet?
+  * Szerkezetileg hogyan épül fel egy nyelv?
+  * Sorolja fel a HTML fontosabb verzióit.
+  * A HTML5 verziót kik találták ki?
+  * Mi a W3C konzorcium?
+  * Mondjon egy magyar intézményt, amely tagja a W3C konzorciumnak.
+  * Mi az ARPANET?
+  * Mikortól létezik az ARPANET?
+  * Mikor alkották meg az első weboldalt?
+  * Az XHTML-nek melyik az utolsó verziója?
+  * Mikor definiálták az XML 1.0 verziót?
+===== Helló Világ =====
+==== Kezdés ====
+A következő példa egy végtelenül egyszerű weblapot jelenít meg,
+amelynek van egy cím és egy bekezdése.
+<code html index.html>
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+<title>Cím</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Weblap címe</h1>
+<p>Egy bekezdés</p>
+</body>
+</html>
+</code>
+A HTML oldalt egy doctype sorral kezdek, majd a html elemek jönnek.
+A html elemek közé egy head és egy body elem jön. A head részbe
+a weblaphoz hozzáadott járulékos információkat adjuk meg, mint
+az oldal címe ami a böngészőfüleken jelenik, meg a karakter
+kódolása, stb. A body elemek között adjuk meg magát a weboldalt,
+azt aminek a böngészőben meg kell jelennie.
+==== DOM ====
+A HTML oldal leírható egy dokumentum objektum modellel (DOM):
+{{:oktatas:web:html:dokumentumfa.png|}}
+{{:oktatas:web:html:html_dom_pelda01.png|}}
+==== Dokumentum típus definíció ====
+Egy HTML oldal első sora mindig a dokumentum típusát és verzióját leíró sor. Ezek mindig egy "!DOCTYPE"
+karaktersorozattal kezdődnek.
+Elsőként lássuk a HTML5 előtt használatos DOCTYPE sorokat:
+<code html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+</code>
+<code html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+</code>
+<code html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+</code>
+<code html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+</code>
+<code html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+</code>
+A HTML5 definíciója:
+<code html>
+<!DOCTYPE html>
+</code>
+==== Dokumentum ====
+A HTML dokumentum két részre osztható egy fejrészre és egy törzsre.
+|  Fejrész  |
+|  Törzs  |
+A fejrész a "head" elemek között van. A törzs pedig a "body" elemek között.
+A fej és a törzsrészt a "html" gyökérelem fogja közre:
+<code html>
+<html>
+<head>
+Fejrész
+</head>
+<body>
+Törzs
+</body>
+</html>
+</code>
+A gyökérelem számára megadhatunk egy tulajdonságot, amely az oldal nyelvét fogja tartalmazni:
+<code>
+<html lang="hu">
+</code>
+Ez a "lang" tulajdonság.
+Értéke a nemzetköz nyelvi szabványban megadott egyik nyelv lehet (iso-639).
+==== Fejrész ====
+A fejrész a "head" eleme között helyezkedik el és tartalmazhat újabb elemeket.
+A fejrész tartalma nem jelenik meg a böngészőben, viszont hasznos információkat
+tartalmaznak a weboldalról.
+Kötelező elem a "title". A "title" elemmel mondjuk meg a böngésző számára,
+mit írjon ki a címsorban, vagy ha fülekkel dolgozunk a böngészőfülön.
+Nem kötelező elem a "meta". Ilyen elemet egyet vagy többet is tartalmazhat
+egy weboldal. Mindenképpen ajánlott megadni a karakterkódolást.
+===== Gyakorlat 03 =====
+  - Mire való a DOCTYPE sor?
+  - Mik a gyökérelemek?
+  - Milyen részekre osztható egy HTML forrás?
+  - Mi a szerepe a title elemnek?
+  - Írjon példát egy HTML5 előtti DOCTYPE sorra.
+===== Meta elemek =====
+A meta szót a magyarban összetett szavakban szoktuk használni és valaminek a
+módosulását jelöli.
+A HTML-be is hasonló a szerepe. A weboldalnak vannak olyan tulajdonságai
+amik közvetlenül nem jelennek meg a weblapon, de hatással vannak arra,
+módosítják. Ezeket a tulajdonságokat a meta elemmel adjuk meg.
+A meta elemet mindig a head elemek között adjuk meg.
+Több dologra is használjuk, ezért a meta elemnél attribútumokkal adjuk
+meg éppen mire szeretnénk használni.
+A meta elemek a "meta" névvel kezdődnek:
+<code html>
+<meta ... >
+</code>
+<code html>
+<meta name=“érték“ content=“érték” />
+</code>
+Általában két tulajdonságot adunk meg, egy "name" vagy egy "http-equiv" és egy
+"content" tulajdonságot. Ez alól kivétel lehet a karakterkódolás, amelyet a HTML5 megenged rövidebb formában.
+<code>
+<meta charset="utf-8" />
+</code>
+Átirányítás ennyi idő múlva:
+<code>
+<meta http-equiv="Refresh" content="0; URL="masikweblap.html">
+</code>
+Még több meta elem:
+<code html>
+<meta name="generator" content="Bluefish">
+<meta name="author" content="Sallai András">
+<meta name="date" content="2009-01-01">
+<meta name="copyright" content="© 2009, Sallai András">
+<meta name="keywords" content="web, html, css">
+<meta name="description" content="Weboldal készítése">
+<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta http-equiv="expires" content="0">
+</code>
+  * A weboldalt készítő program
+  * A weboldal írója, szerzője -- Lehet bő felsorolás is.
+  * A készítés dátuma
+  * Terjesztési feltételek
+  * Kulcsszavak
+  * Leírás
+  * A keresőrobotok indexeljék-e a weboldalt
+  * Weboldal kódolása
+  * A weblap lejár
+Még több meta tag:
+<code html>
+<meta name="contact" content="nagyontitkospostafiok@gmail.com" />
+<meta http-equiv="last-modified" content="YYYY-MM-DD@hh:mm:ss TMZ" />
+<meta http-equiv="cache-control" content="no-cache" />
+<meta http-equiv="content-language" content="hu,en" />
+<meta http-equiv="pragma" content="no-cache" />
+</code>
+  * A weboldal tulajdonosának elérhetősége (A spammerek botjai figyelik!)
+  * Utolsó módosítás
+  * Az oldal legyen tárolva a böngésző tárolójában (cache).
+  * 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 ====
+Fentebb már említettük a robots kulcsot, nem néztük meg milyen értékeket vehet fel.
+<code html>
+<meta name="robots" content="NOINDEX, NOFOLLOW">
+</code>
+  * All
+  * Index, follow - ugyanaz, mint az all
+  * NoIndex
+  * NoFollow
+  * NoIndex, NoFollow
+===== Megjegyzés =====
+<code html>
+<!-- megjegyzés -->
+</code>
+A megjegyzéseket a böngészők figyelmen kívül hagyják, így hasznos
+megjegyzéseket helyezhetünk el magunk számára a forráskódban.
+A megjegyzéske tesztelés esetén is jól jönnek. A kód működő, vagy
+a teszt szempontjából lényegtelen kódokat megjegyzésbe téve tesztelhetjük
+a weblapunkat.
+A megjegyzések nem egymásba ágyazhatók, és nem tartalmazhatnak "<nowiki>--</nowiki>" és "<nowiki>-></nowiki>" részeket.
+===== Fejezetcímek meghatározása =====
+Fejezet címeket h1, h2, h3, h4, h5 és h6-os elemekkel határozunk meg.
+A példa kedvéért a tigrisről szeretnénk weblapot csinálni és szeretnénk
+írni az elterjedéséről, az alfajairól, a megjelenéséről, az életmódjáról
+és a szaporodásáról. Ekkor a következő módon határozzuk meg fejezetcímeknek:
+<code html>
+<h2>Elterjedése</h2>
+<h2>Alfajok</h2>
+<h2>Megjelenése</h2>
+<h2>Életmód</h2>
+</code>
+==== A különböző méretek ====
+<code html>
+<h1>H1 fejezetcím</h1>
+<h2>H2 fejezetcím</h2>
+<h3>H3 fejezetcím</h3>
+<h4>H4 fejezetcím</h4>
+<h5>H5 fejezetcím</h5>
+<h6>H6 fejezetcím</h6>
+</code>
+{{:oktatas:web:html:fejezetcimek.png|}}
+===== Bekezdések =====
+==== A bekezdés ====
+A bekezdéseket a p elemek közzé tesszük.
+<code html>
+<p>
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum. Vinum regum rex vinorum.
+Vinum regum rex vinorum.
+</p>
+</code>
+==== Szerkeszthető bekezdés ====
+A tartalmat szerkeszthetővé tehetem a contenteditable tulajdonsággal:
+<code html>
+<p contenteditable="true">
+Lorem ipsum
+</p>
+</code>
+A contenteditable bármely elemmel használható, nem csak a p elemmel.
+A következő szöveg szerkeszthető:
+<html>
+<p contenteditable="true" style="border-style: solid; border-width: 1px; border-color: blue; padding: 3px; border-radius: 3px;">
+Lorem ipsum
+</p>
+</html>
+===== Blokkszintű és inline elemek =====
+A blokk elemek a böngésző egyik szélétől a böngésző másik széléig tartanak.
+Ha blokkszintű elemből kettőt helyezünk el a kódban, a weboldalon a második elem
+tartalma már újabb sorban jelenik meg.
+Az inline elemek egy sorban (soron belül) jelennek meg, ha az kifér.
+Blokkszintű elemek
+  * div
+  * p
+  * h1
+  * h2
+  * h3
+  * h4
+  * h5
+  * h6
+  * stb.
+Inline szintű
+  * span
+  * b
+  * i
+  * a
+  * stb.
+Jelöljük a "Lorem", "ipsum" és "dolor" szavakat, először blokk elemmel.
+Például p elem:
+<code xml>
+<p>Lorem</p>
+<p>ipsum</p>
+<p>dolor</p>
+</code>
+Az ábrán látható, hogy egy blokk elem önmagában, kitölti a rendelkezésre álló helyet
+vízszintesen. Hogy ez látható legyen, a dobozt alkotó blokk elemet egy szegéllyel
+ábrázolok.
+{{:oktatas:web:html:blokk_elemek.png?200|}}
+Most jelöljük ugyanezeket a szavakat inline elemmel:
+<code xml>
+<span>Lorem</span>
+<span>ipsum</span>
+<span>dolor</span>
+</code>
+Az ábrán láthatjuk, hogy az inline elemek, a tartalomhoz igazodnak, ha
+vízszintesen elférnek, akkor egymás mellett jelennek meg.
+{{:oktatas:web:html:inline_elemek.png?200|}}
+===== Sortörés, elválasztás =====
+Sortörés:
+<code>
+<br />
+</code>
+Nem törhető szóköz:
+<code>
+&nbsp;
+</code>
+Feltételes elválasztójel ( soft hyphen):
+<code>
+&shy;
+</code>
+Ha egy szóban elhelyezzük és az ablak mérete megkívánja a sorok tördelését, a sortörés az elválasztó jel mentén is megtörténhet.
+<code html>
+Az a har&shy;cos aki csak az ö&shy;lés&shy;hez
+ért na&shy;gyon se&shy;bez&shy;hető. Az
+i&shy;ga&shy;zán nagy sza&shy;mu&shy;rá&shy;jok
+na&shy;gyon szép ha&shy;i&shy;ku&shy;kat í&shy;rtak.
+</code>
+A teszteléshez méretezzük kisebbre az ablakot:
+<html>
+<div style="margin: 2% 10%; background-color: #eeeeee; padding: 5px;">
+Az a har&shy;cos aki csak az ö&shy;lés&shy;hez ért na&shy;gyon se&shy;bez&shy;hető. Az i&shy;ga&shy;zán nagy sza&shy;mu&shy;rá&shy;jok na&shy;gyon szép ha&shy;i&shy;ku&shy;kat í&shy;rtak.
+</div>
+</html>
+===== Szöveg kiemelése =====
+==== HTML kiemelő tagek ====
+^ Tag ^ Leírás ^
+| <b> | félkövér szöveg |
+| <em> | kiemelt szöveg |
+| <i> | dőlt szöveg |
+| <small> | kis szöveg |
+| <strong> | erős szöveg |
+| <nowiki><sub></nowiki> | alsó index |
+| <nowiki><sup></nowiki> | felső index |
+| <nowiki><ins></nowiki> | beszúrt szöveg |
+| <nowiki><del></nowiki> | törölt szöveg |
+<html>
+<b>félkövér</b> szöveg
+<br />
+<em>kiemelt</em> szöveg
+<br />
+<i>dőlt</i> szöveg
+<br />
+<small>kis</small> szöveg
+<br />
+<strong>erős</strong> szöveg
+<br />
+</html>
+<sub>alsó</sub> index és <sup>felső</sup> index
+<html>
+<ins>beszúrt</ins> szöveg
+</html>
+<del>törölt</del> szöveg
+==== HTML Számítógép kimeneti tagek ====
+^ Tag ^ Leírás ^
+| <nowiki><code></nowiki> | számítógépes kód |
+| <kbd> | billentyűzet |
+| <samp> | mintakód |
+| <var> | változó |
+| <pre> | előreformázott szöveg |
+<html>
+Kódszöveg: <code>printf("alma\n");</code>
+</html>
+<html>
+Billentyűkombinációs: <kbd>Ctrl + D</kbd>
+</html>
+<html>
+Minta: <samp>^a.*</samp>
+</html>
+Másik minta:
+<code>
+Ha mentés során hiba keletkezett akkor kiírjuk a <samp>Hiba a mentés során!</samp> szöveget a képernyőre.
+</code>
+<html>
+Ha mentés során hiba keletkezett akkor kiírjuk a <samp>Hiba a mentés során!</samp> szöveget a képernyőre.
+</html>
+<html>
+Változó: <var>$PATH</var>
+</html>
+<html>
+Előreformázott szöveg: <pre>    printf("Behúzással\n");</pre>
+</html>
+A következő példa egy szerkeszthető pre elemet mutat be:
+<code html>
+<pre contenteditable="true">
+#include &lt;stdio&gt;
+main()
+{
+    printf("Kezdés\n");
+}
+</pre>
+</code>
+<html>
+<div style="margin: 2% 10%; background-color: #eeeeee; padding: 5px;">
+<pre contenteditable="true">
+#include &lt;stdio&gt;
+main()
+{
+    printf("Kezdés\n");
+}
+</pre>
+</div>
+</html>
+==== HTML idézet és definíciós tagek ====
+^ Tag ^ Leírás ^
+| <abbr> | egy rövidítés |
+| <address> | cím \\ egy dokumentum tulajdonosának elérhetősége |
+| <bdo> | szöveg iránya |
+| <blockquote> | hosszú idézet |
+| <q> | rövid idézet |
+| <cite> | cím idézése |
+| <dfn> | egy kifejezés meghatározása |
+A HTML 4.01 verzióban létezett még a <acronym> elem, amely mozaikszavak megadására lett kitalálva, de a HTML5 már nem támogatja.
+Rövidítések:
+<html>
+<div style="margin:2% 10%; background-color: #eeeeee; padding: 5px;">
+<abbr>stb.</abbr>
+<abbr>u.</abbr>
+<abbr>dec.</abbr>
+<abbr>feb.</abbr>
+</div>
+</html>
+<html>
+<div style="margin:2% 10%; background-color: #eeeeee; padding: 5px;">
+<address>Nagy József<br />
+(30) 123-4567
+<br />
+nagy.jozsef@valahol.tld
+</address>
+</div>
+</html>
+A szöveg irányának megváltoztatása:
+Normál szöveg
+<code html>
+<bdo dir="ltr">Valami szöveg</bdo>
+</code>
+Fordított irány:
+<code html>
+<bdo dir="rtl">Valami szöveg</bdo>
+</code>
+Normál szöveg:
+<html>
+<div style="margin:2% 10%; background-color: #eeeeee; padding: 5px;">
+<br /><br />
+<bdo dir="ltr">Valami szöveg</bdo>
+</div>
+</html>
+A fordított szöveg megjelenítve:
+<html>
+<div style="margin:2% 10%; background-color: #eeeeee; padding: 5px;">
+<br /><br />
+<bdo dir="rtl">Valami szöveg</bdo>
+</div>
+</html>
+==== Gyakorlat 04 ====
+  * Milyen elemmel határozunk meg fejezetcímeket?
+  * Hány fejezetcímet szintet tudunk meghatározni?
+  * Milyen elemmel adunk meg címeket?
+===== Lista =====
+==== Számozatlan lista ====
+<code html>
+<ul>
+  <li>Kávé</li>
+  <li>Tea</li>
+  <li>Tej</li>
+</ul>
+</code>
+==== Számozott lista ====
+<code html>
+<ol>
+  <li>Kávé</li>
+  <li>Tea</li>
+  <li>Tej</li>
+</ol>
+</code>
+<code html>
+<ol start="50">
+  <li>Kávé</li>
+  <li>Tea</li>
+  <li>Tej</li>
+</ol>
+</code>
+<code html>
+<ol reversed="reversed">
+  <li>Kávé</li>
+  <li>Tea</li>
+  <li>Tej</li>
+</ol>
+</code>
+Egymásbaágyazás:
+<code html>
+<ol>
+  <li>Kávé</li>
+  <li>Tea
+    <ol>
+      <li>víz</li>
+      <li>fű</li>
+      <li>édesítő</li>
+    </ol>
+  </li>
+  <li>Tej</li>
+</ol>
+</code>
+<html>
+<ol>
+  <li>Kávé</li>
+  <li>Tea
+    <ol>
+      <li>víz</li>
+      <li>fű</li>
+      <li>édesítő</li>
+    </ol>
+  </li>
+  <li>Tej</li>
+</ol>
+</html>
+==== Böngésző támogatottság ====
+A legtöbb jelentős böngésző támogatja az <ol> taget.
+==== Definíció és használat ====
+Az <ol> tag egy számozott listát definiál.
+Használd az <li> taget a lista elemeinek meghatározásához.
+==== Különbség a HTML 4.01 és a HTML5 között ====
+A "start" attribútum elavult a HTML 4.01-ben de újra támogatott a HTML5-ben.
+A "reversed" új a HTML5-ben.
+A "compact" és a "type" attribútum elavult a HTML 4.01-ben és nincs támogatva a HTML5-ben.
+==== Tippek és megyjegyzések ====
+Tipp: Számozatlan listához használd az <ul> taget.
+Tipp: Használj CSS a stílus meghatározásához.
+==== Attribútumok ====
+(Új) : Új a HTML5-ben.
+^ Attribútum ^ Érték ^ Leírás ^
+| reversed (Új) | reversed | Csökkenő sorrend meghatározása (9,8,7...) |
+| start | szám	| Kiindulási érték maghatározása a listában |
+| type | 1 \\ A \\ a \\ I \\ i | Listajelző megadása |
+==== Global Attributes ====
+Az  <ol> tag támogatja az globális attribútumokat a HTML5-ben.
+==== Eseményattribútum ====
+Az <ol> tag támogatja az esemény attribútumokat a HTML5-ben.
+==== Definíciós lista ====
+<code html>
+<dl>
+  <dt>Kávé</dt>
+    <dd>feket forró ital</dd>
+  <dt>Tej</dt>
+    <dd>Fehér hideg ital</dd>
+</dl>
+</code>
+HTML elemek:
+| <dl> | Egy definíciós lista definiálása |
+| <dt> | Egy definíciós lista egy elemét definiálja |
+| <dd> | Egy definíciós lista egy elemének leírása |
+===== Képek beillesztése =====
+==== Az img elem ====
+Képek beillesztésénél ügyeljünk arra, hogy  megmutassuk a szöveg és a beillesztett kép
+közötti kapcsolatot.
+A weblapra illeszthető képtípusok:
+  * .jpg (Fényképek beillesztése)
+  * .gif (Rajzok beillesztése)
+  * .png (Vegyes felhasználásra)
+<code html>
+<img src="fajlneve.jpg" alt="A Kép leírása">
+</code>
+A képnek és a html állománynak egy könyvtárban kell lenniük.
+Még több attribútum:
+<code html>
+<img src="fajlneve.jpg"
+     alt="A Kép leírása"
+     title="A kép leírása"
+     width="100"
+     height="100"
+     >
+</code>
+Attribútumok:
+  * alt - Ha képek nem jeleníthetők meg, ez a szöveg jelenik meg
+  * width - szélesség
+  * height - magasság
+  * title - Ha kép felé visszük az egeret, ez a szöveg jelenik meg.
+A title nem az img elem saját attribútuma. A title egy globális
+attribútum, bármely HTML elemmel használható.
+==== A figure elem ====
+A figure elem, egy új elem a HTML5-ben.
+Képek és ábrákat vehetünk vele közre.
+A figure elem mellett rendelkezésünkre áll a figcaption, amellyel egy kép számára feliratot határozhatunk meg.
+<code html5>
+<figure>
+  <img src="kep.png" alt="A kép leírása" />
+  <figcaption>Felirat<figcaption>
+</figure>
+</code>
+<code>
+<figure style="
+	border-style: solid;
+	border-width: 1px;
+	display: inline-block;
+	padding: 10px;
+	">
+	<img src="majom.jpg" alt="Majom" style="width: 200px;">
+	<figcaption>
+		A kép felirata
+	</figcaption>
+</figure>
+</code>
+A figure elemmel, természetesen több kép is leírható:
+<code html>
+<figure>
+  <img src="kep01.jpg" alt="Első">
+  <img src="kep02.jpg" alt="Második">
+  <img src="kep03.jpg" alt="Harmadik">
+  <figcaption>A képek leírása</figcaption>
+</figure>
+</code>
+===== Táblázat =====
+==== Alap ====
+<code html>
+<table border="1">
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</code>
+<html>
+<table border="1">
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</html>
+==== Felirat ====
+<code html>
+<table border="1">
+  <caption>Költségvetés</caption>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</code>
+<html>
+<table border="1">
+  <caption>Költségvetés</caption>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</html>
+==== Összefoglaló ====
+A böngészők nem jelenítik meg, de felolvasóprogram esetén hasznos.
+<code html>
+<table border="1" summary="Ez a táblázat bemutatja a család spórolásának eseményeit">
+  <caption>Költségvetés</caption>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</code>
+<html>
+<table border="1" summary="Ez a táblázat bemutatja a család spórolásának eseményeit">
+  <caption>Költségvetés</caption>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</html>
+==== Cella nyúlás ====
+<code html>
+<table border="1">
+  <tr>
+    <th colspan="2">Költségek</th>
+  </tr>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</code>
+<html>
+<table border="1">
+  <tr>
+    <th colspan="2">Költségek</th>
+  </tr>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</html>
+==== Sor nyúlás ====
+<code html>
+<table border="1">
+  <tr>
+    <th rowspan="2">Adatok</th>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</code>
+<html>
+<table border="1">
+  <tr>
+    <th rowspan="2">Adatok</th>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</html>
+==== Sor és cellanyúlás ====
+A rowspan tulajdonsággal sorokat vonhatunk össze.
+<code html>
+<table border="1">
+  <tr>
+    <th rowspan="3">Adatok</th>
+    <th colspan="2">Költségek</th>
+  </tr>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</code>
+<html>
+<table border="1">
+  <tr>
+    <th rowspan="3">Adatok</th>
+    <th colspan="2">Költségek</th>
+  </tr>
+  <tr>
+    <th>Hónap</th>
+    <th>Spórolás</th>
+  </tr>
+  <tr>
+    <td>Január</td>
+    <td>1000 Ft</td>
+  </tr>
+</table>
+</html>
+==== Oszlopok külön stílusan====
+Az első két oszlop sárba, az utána következő egy oszlop kék.
+<code html>
+<table>
+  <colgroup>
+    <col span="2" style="background-color:yellow">
+    <col style="background-color:blue; color:white">
+  </colgroup>
+  <tr>
+    <th>No.</th>
+    <th>Név</th>
+    <th>Település</th>
+  </tr>
+  <tr>
+    <td>1</td>
+    <td>Nagy József</td>
+    <td>Szolnok</td>
+  </tr>
+  <tr>
+    <td>2</td>
+    <td>Peres Ferenc</td>
+    <td>Szeged</td>
+  </tr>
+</table>
+</code>
+===== Hiperhivatkozás =====
+Horgony:
+<code>
+<a name="alul">
+</code>
+Hivatkozás:
+<code>
+<a href="masik.html">Másik</a>
+</code>
+Kép hivatkozásként:
+<code>
+<a href="masik.html"><img src="masik.png"></a>
+</code>
+===== Videó =====
+Videókat a "video" elemmel építhetünk weboldalunkba.
+A video elem a következő attribútumokkal rendelkezik:
+  * src
+  * crossorigin
+  * poster
+  * preload
+  * autoplay
+  * mediagroup
+  * loop
+  * muted
+  * controls
+  * width
+  * height
+<code html>
+<video src="sample3.ogg" width=”300” height=”300”></video>
+</code>
+  * Működik Firefox, Opera, Chrome alatt
+  * IE8 nem jelenít meg semmit
+Többféle formátumban felrakva
+<code html>
+<video  width=”300” height=”300”>
+    <source src="sample3.ogg">
+    <source src="sample1.mp4">
+</video>
+</code>
+Típusok megadása
+<code html>
+<video width="….." height="….." controls>
+<source src="….mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+<source src="…...webm" type='video/webm; codecs="vp8, vorbis"'>
+<source src="…….ogv" type='video/ogg; codecs="theora, vorbis"'>
+</video>
+</code>
+<html>
+<video width="320" height="240" controls="controls">
+  <source src="http://w3schools.com/html/movie.mp4" type="video/mp4">
+  <source src="http://w3schools.com/html/movie.ogg" type="video/ogg">
+  A böngésződ nem támogatja a video elemet.
+</video>
+</html>
+A következő kódekekkel kell számolnunk:
+  * MPEG-4
+  * H.264
+  * Ogg Theora/Vorbis/Opus
+  * WebM - VP8
+  * WebM - VP9
+A konvertáláshoz ajánlott program:
+  * [[https://www.ffmpeg.org/|ffmpeg]]
+    * http://www.wikihow.com/Install-FFmpeg-on-Windows
+    * http://ffmpeg.zeranoe.com/builds/
+===== Hang =====
+<code html>
+<audio controls="controls">
+  <source src="hangfajl.ogg" type="audio/ogg">
+  <source src="hangfajl.mp3" type="audio/mpeg">
+A böngésződ nem támogatja az audio elemet.
+</audio>
+</code>
+<html>
+<audio controls="controls">
+  <source src="http://w3schools.com/html/horse.ogg" type="audio/ogg">
+  <source src="http://w3schools.com/html/horse.mp3" type="audio/mpeg">
+A böngésződ nem támogatja az audio elemet.
+</audio>
+</html>
+===== Beépített weblap =====
+==== Egy weblap beépítve ====
+<code html>
+<iframe src="https://szit.hu/download/doboz.html" width="300" height="200"></iframe>
+</code>
+<html>
+<iframe src="https://szit.hu/download/doboz.html" width="300" height="200"></iframe>
+</html>
+Szegély:
+  frameborder="0"
+==== Egy link céljaként ====
+<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>
+</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>
+</html>
+===== Űrlap =====
+Az űrlapokkal valósítjuk meg az interaktív weblapokat. Egy weblap nem
+attól interaktív, hogy különböző dolgok mozognak rajta. Attól lesz interaktív,
+hogy a felhasználó adatokat küld a szerver felé. Ezt pedig űrlapok
+segítségével lehet megtenni. Az űrlap mindig adatokat kér
+tőlünk, amit egy "Elküldés" gombbal el kell küldenünk a szervernek.
+==== Űrlap létrehozása ====
+Űrlapot a form elemmel tudunk beszúrni. Van két kötelező tulajdonsága,
+az action és a method. Az action értékeként adjuk meg, hogy milyen
+szerveroldali script fogja feldolgozni az űrlapot. A method
+értékeként adjuk meg, hogy milyen metódussal küldjük az űrlapelemet:
+<code html urlap.html>
+<form action="akcio.php" method="POST">
+<fieldset>
+  <legend>Teljesnév</legend>
+  <label for="vnev">Vezetéknév:</label>
+  <input type="text" name="vnev" value="" id="vnev" /><br />
+  <label for="knev">Keresztnév:</lable>
+  <input type="text" name="knev" value="" id="knev" /><br />
+  <input type="submit" value="Elküld" />
+</fieldset>
+</form>
+</code>
+<html>
+<div style="border-style:solid; border-width:1px; padding: 5px;">
+<form action="akcio.php" method="POST">
+  <fieldset>
+  <legend>Teljesnév</legend>
+  <label for="vnev">Vezetéknév:</label>
+  <input type="text" name="vnev" value="" id="vnev"/><br />
+  <label for="knev">Keresztnév:</label>
+  <input type="text" name="knev" value="" id="vnev" /><br />
+  <input type="submit" value="Elküld" />
+  </fieldset>
+</form>
+</div>
+</html>
+Kétféle metódussal küldhetjük el űrlapjainkat:
+  * GET
+  * POST
+=== A GET metódus ===
+Az adatokat a meghívó URL paramétereként adjuk át.
+=== A POST metódus ===
+Az adatok egy adatként kerülnek átadásra a szerver számára.
+==== Text típus - szöveges mező ====
+  * size - méret
+  * maxlength - hány karakter hosszú
+<code html>
+<input maxlength="10" size="10">
+</code>
+==== Űrlap elemek ====
+=== Beviteli mező ===
+<code html>
+<input type="text">
+</code>
+<html>
+<input type="text">
+</html>
+Az input tag-el többféle űrlapelem is meghatározható. Hogy melyik jelenik meg
+az mindig a type tulajdonságtól függ. A text értékkel egy beviteli mezőt
+jeleníthetünk meg. Kötelező tulajdonság még a name. Ezzel adjuk meg,
+milyen néven hivatkozhat a beviteli mező tartalmára a feldolgozó program.
+Nem kötelező tulajdonság a value. Ezzel kezdőértéket írhatunk a bevitelimezőbe.
+<code html>
+<input type="text" name="nev" value="Névtelen">
+</code>
+<html>
+<input type="text" name="nev" value="Névtelen">
+</html>
+=== A for tulajdonság ===
+A for tulajdonsággal egy label elemet összerendelhetünk egy input elemmel.
+A fort a label attribútumaként kell megadnunk:
+<code html>
+<label for="nevaz"></label><input type="text" name="nev" value="Névtelen" id="nevaz">
+</code>
+<html>
+<label for="nevTextElemIntro">Teljes név: </label><input type="text" name="nev" value="Névtelen" id="nevTextElemIntro">
+</html>
+Ennek hatására, ha kattintok a label elem tartalmára, aktiválódik az input elemünk. A for használatához
+az input elemben lenni kell egy id tulajdonságnak, amelynek értékére hivatkozunk a forban.
+=== Elküldés gomb ===
+<code html>
+<input type="submit">
+</code>
+<html>
+<input type="submit">
+</html>
+=== Törlés gomb ===
+<code html>
+<input type="reset">
+</code>
+<html>
+<input type="reset">
+</html>
+Még egy gomb
+<code html>
+<button type="button">Klikkelj ide!</button>
+</code>
+<html>
+<button type="button">Klikkelj ide!</button>
+</html>
+==== Rádiógombok ====
+<code html>
+<form action="feldolgoz.php" method="POST">
+  <input type="radio" name="nem" value="ferfi" id="ferfi"/>
+  <label for="ferfi">Férfi</label><br />
+  <input type="radio" name="nem" value="no" id="no"/>
+  <label for="no">Nő</label><br />
+  <input type="submit" value="Mehet" />
+</form>
+</code>
+<html>
+<div style="border-style: solid; border-width:1px; padding:5px; ">
+<form action="feldolgoz.php" method="POST">
+<input type="radio" name="nem" value="ferfi" id="ferfi"/><label for="ferfi">Férfi</label><br />
+  <input type="radio" name="nem" value="no" id="no"/><label for="no">Nő</label><br />
+  <input type="submit" value="Mehet" />
+</form>
+</div>
+</html>
+A rádiógomboknál nagyon fontos, hogy name tulajdonság azonos
+értékkel legyen kitöltve az egy csoportba tartozó radiógomboknál.
+A böngésző ebből tudja, hogy mely rádiógombok tartoznak egy csoportba.
+Ha kattintunk egyik rádiógombra, az előzőleg aktív rádiógomb jelöltségének
+meg kell szűnnie, ha az egy csoportban van az újonnan kattintottal.
+==== Jelölőnégyzet ====
+<code html>
+<form>
+<input type="checkbox" name="jarmu" value="kerekpar" id="kerekpar" />
+<label for="kerekpar">Van kerékpárom</label><br />
+<input type="checkbox" name="jarmu" value="kocsi" id="kocsi" />
+<label for="kocsi">Van kocsim</label><br />
+<input type="submit" value="Mehet" />
+</form>
+</code>
+<html>
+<div style="border-style: solid; border-width: 1px; padding: 5px;">
+<form>
+<input type="checkbox" name="jarmu" value="kerekpar" id="kerekpar" /><label for="kerekpar">Van kerékpárom</label><br />
+<input type="checkbox" name="jarmu" value="kocsi" id="kocsi" /><label for="kocsi">Van kocsim</label><br />
+<input type="submit" value="Mehet" />
+</form>
+</div>
+</html>
+==== Szöveghely ====
+<code html>
+<textarea rows="3" cols="20">
+Lorem ipsum dolor sit amet.
+</textarea>
+</code>
+<html>
+<textarea rows="3" cols="20">
+Lorem ipsum dolor sit amet.
+</textarea>
+</html>
+==== Legördülő listadoboz ====
+=== Egyszerű kombóbox ===
+<code html>
+<select>
+  <option>Opel</option>
+  <option>Ford</option>
+  <option>Volvo</option>
+  <option>Saab</option>
+  <option>Mercedes</option>
+  <option>Audi</option>
+</select>
+</code>
+<html>
+<select>
+  <option>Opel</option>
+  <option>Ford</option>
+  <option>Volvo</option>
+  <option>Saab</option>
+  <option>Mercedes</option>
+  <option>Audi</option>
+</select>
+</html>
+=== Alcsoportok ===
+<code html>
+<select>
+  <optgroup label="Svéd kocsik">
+    <option value="volvo">Volvo</option>
+    <option value="saab">Saab</option>
+  </optgroup>
+  <optgroup label="Német kocsik">
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </optgroup>
+</select>
+</code>
+<html>
+<select>
+  <optgroup label="Svéd kocsik">
+    <option value="volvo">Volvo</option>
+    <option value="saab">Saab</option>
+  </optgroup>
+  <optgroup label="Német kocsik">
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+  </optgroup>
+</select>
+</code>
+</html>
+=== Attribútumok ===
+<code html>
+<select name="tipus">
+  <option value="opel">Opel</option>
+  <option value="ford">Ford</option>
+  <option value="volvo" selected="selected">Volvo</option>
+  <option value="saab">Saab</option>
+  <option value="mercedes">Mercedes</option>
+  <option value="audi">Audi</option>
+</select>
+</code>
+=== Listadoboz ===
+<code html>
+<select name="tipus" miltiple size="3">
+  <option value="opel">Opel</option>
+  <option value="ford">Ford</option>
+  <option value="volvo" selected="selected">Volvo</option>
+  <option value="saab">Saab</option>
+  <option value="mercedes">Mercedes</option>
+  <option value="audi">Audi</option>
+</select>
+</code>
+<html>
+<select name="tipus" miltiple size="3">
+  <option value="opel">Opel</option>
+  <option value="ford">Ford</option>
+  <option value="volvo" selected="selected">Volvo</option>
+  <option value="saab">Saab</option>
+  <option value="mercedes">Mercedes</option>
+  <option value="audi">Audi</option>
+</select>
+</html>
+Azonosítók:
+<code html>
+<select name='jarmuvek'>
+  <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 ====
+A form számára létrehozhatunk keretet, keretfeliratot, csak a jobb vizuális megjelenés érdekében.
+<code html>
+<form>
+<fieldset>
+<legend>Személyes:</legend>
+Név: <input type="text" size="30" /><br />
+Email: <input type="text" size="30" /><br />
+Születés dátuma: <input type="text" size="10" />
+</fieldset>
+</form>
+</code>
+<html>
+<form>
+<fieldset>
+<legend>Személyes:</legend>
+Név: <input type="text" size="30" /><br />
+Email: <input type="text" size="30" /><br />
+Születés dátuma: <input type="text" size="10" />
+</fieldset>
+</form>
+</html>
+===== Új űrlap elemek =====
+==== Színválasztó ====
+  * Chrome, Opera
+<code html>
+<form action="feldolgoz.php">
+Válassz színt: <input type="color" name="favcolor"><br>
+<input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+Válassz színt: <input type="color" name="favcolor"><br>
+<input type="submit">
+</form>
+</html>
+==== Naptár ====
+  * Chrome, Safari, Opera
+<code html>
+<form action="feldolgoz.php">
+Születésnap: <input type="date" name="bday">
+<input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+Születésnap: <input type="date" name="bday">
+<input type="submit">
+</form>
+</html>
+==== E-mail ellenőrző ====
+  * Firefox, Chrome, Opera
+<code html>
+<form action="feldolgoz.php">
+E-mail: <input type="email" name="usremail">
+<br>
+<input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+  E-mail: <input type="email" name="usremail"><br>
+  <input type="submit">
+</form>
+</html>
+==== Léptetődoboz ====
+  * Chrome, Safari, Opera
+<code html>
+<form action="feldolgoz.php">
+Terjedelem (1 és 5 között): <input type="number" name="quantity" min="1" max="5">
+<input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+Terjedelem (1 és 5 között): <input type="number" name="quantity" min="1" max="5">
+<input type="submit">
+</form>
+</html>
+==== Nagyság beállítása ====
+  * Chrome, Safari, Opera
+<code html>
+<form action="feldolgoz.php" method="get">
+Pontok: <input type="range" name="points" min="1" max="10"><input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php" method="get">
+Pontok: <input type="range" name="points" min="1" max="10"><input type="submit">
+</form>
+</html>
+==== URL ====
+  * Firefox, Chrome, Opera
+<code html>
+<form action="feldolgoz.php">
+Add meg a weblapod címét: <input type="url" name="homepage"><br>
+<input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+Add meg a weblapod címét: <input type="url" name="homepage"><br>
+<input type="submit">
+</form>
+</html>
+==== Titkosítás ====
+  * Firefox, Chrome, Safari, Opera
+<code html>
+<form action="feldolgoz.php" method="get">
+Felhasználónév: <input type="text" name="usr_name">
+Titkosítás: <keygen name="security">
+<input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php" method="get">
+Felhasználónév: <input type="text" name="usr_name">
+Titkosítás: <keygen name="security">
+<input type="submit">
+</form>
+</html>
+==== Kimenet ====
+  * Firefox, Chrome, Safari, Opera
+<code html>
+<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
+<input type="range" name="a" value="50">100 +
+<input type="number" name="b" value="50">=
+<output name="x" for="a b"></output>
+</form>
+</code>
+<html>
+<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
+<input type="range" name="a" value="50">100 +
+<input type="number" name="b" value="50">=
+<output name="x" for="a b"></output>
+</form>
+</html>
+==== Automatikus fókusz ====
+  * Firefox, Chrome, Safari, Opera
+<code html>
+<form action="feldolgoz.php">
+  Vezetéknév:<input type="text" name="vnev" autofocus="autofocus"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  <input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+  Vezetéknév:<input type="text" name="vnev"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  <input type="submit">
+</form>
+</html>
+===== Új form és input attribútumok =====
+A HTML5 form és input elemei néhány új attribútumot tartalmaz.
+==== <form> / <input> autocomplete attribútum ====
+Az automatikus kiegészítés ki vagy bekapcsolása.
+Néhány böngészőben aktiválni kell ezt a lehetőséget.
+Lehetséges értékek:
+  * on
+  * off
+<code html>
+<form action="feldolgoz.php" autocomplete="on">
+  Vezetéknév:<input type="text" name="vnev"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  E-mail: <input type="email" name="email" autocomplete="off"><br>
+  <input type="submit">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php" autocomplete="on">
+  <fieldset>
+  Vezetéknév:<input type="text" name="vnev"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  E-mail: <input type="email" name="email" autocomplete="off"><br>
+  <input type="button" value="Mehet">
+  </fieldset>
+</form>
+</html>
+Az opera nem támogatja.
+==== A <form> novalidate Attribútuma ====
+A novalidate attribútum egy logikai típus.
+Ha be van állítva a form elküldésekor nem kér megerősítést.
+A Safari nem támogatja.
+<code html>
+<form action="feldolgoz.php" novalidate>
+  E-mail: <input type="email" name="email">
+  <input type="button" value="Mehet">
+</form>
+</code>
+==== Az <input> autofocus attribútuma ====
+Az autófókusz attribútum egy logikai típus.
+Ha be van állítva, az oldal betöltődése után ez az elem kapja meg a fókuszt.
+<code html>
+Név:<input type="text" name="nev" autofocus>
+</code>
+==== Az <input> form attribútum ====
+Egy input elem melyik formhoz tartozik.
+Az IE nem támogatja.
+Akkor hasznos, ha egy input mező azon a formon kívül van, amelyhez tartozik.
+<code>
+<form action="feldolgoz.php" id="form1">
+  Vezetéknév: <input type="text" name="vnev"><br>
+  <input type="submit" value="Mehet">
+</form>
+Keresztnév: <input type="text" name="knev" form="form1">
+</code>
+Újabb példa:
+<code html>
+<form action="feldolgoz.php" id="form1">
+Vezetéknév: <input type="text" name="vnev"><br>
+<input type="submit" value="Submit"></form>
+<p>The "Keresztnév" mező a formon kívül van, de mégis része a formnak. </p>
+Keresztnév: <input type="text" name="knev" form="form1">
+</code>
+<html>
+<form action="feldolgoz.php" id="form1">
+Vezetéknév: <input type="text" name="vnev"><br>
+<input type="submit" value="Submit"></form>
+<p>The "Keresztnév" mező a formon kívül van, de mégis része a formnak. </p>
+Keresztnév: <input type="text" name="knev" form="form1">
+</html>
+==== Az <input> formaction attribútum ====
+A formaction segítségével alternatív feldolgozó script adható meg.
+A submit típusú elküldőgomboknál használjuk.
+<code html>
+<form action="reg.php">
+  NÉv: <input type="text" name="nev"><br>
+  <input type="submit" value="Regisztrál"><br>
+  <input type="submit" formaction="check.php" value="Ellenőriz">
+</form>
+</code>
+Újabb példa:
+<code html>
+<form action="feldolgoz.php">
+  Vezetéknév: <input type="text" name="vnev"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  <input type="submit" value="Küldés"><br>
+  <input type="submit" formaction="feldolgozAdmin.php" value="Küldés adminként">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php">
+  Vezetéknév: <input type="text" name="vnev"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  <input type="submit" value="Küldés"><br>
+  <input type="submit" formaction="feldolgozAdmin.php" value="Küldés adminként">
+</form>
+</html>
+==== formenctype attribútum az input elem számára ====
+  * Firefox, Chrome, Safari, Opera
+Az küldött adatok multipart (fájlfeltöltésnél használjuk) formában kódolása.
+<code html>
+<form action="feldolgoz.php" method="post">
+  First name: <input type="text" name="fname"><br>
+  <input type="submit" value="Submit">
+  <input type="submit" formenctype="multipart/form-data"
+      value="Küldés Multipart/form-data adatként">
+</form>
+</code>
+<html>
+<form action="feldolgoz.php" method="post">
+  Vezetéknév: <input type="text" name="fname"><br>
+  <input type="submit" value="Küldés">
+  <input type="submit" formenctype="multipart/form-data"
+      value="Küldés Multipart/form-data adatként">
+</form>
+</html>
+==== Az <input> formmethod attribútuma ====
+A submit gomb számára megadhatjuk milyen metódussal küldjük az adatokat.
+A formmethod felülírja a form elem method attribútumát.
+Használható submit és image típus esetén.
+<code>
+<form action="demo_form.asp" method="get">
+  Vezetéknév: <input type="text" name="vne"><br>
+  Keresztnév: <input type="text" name="knev"><br>
+  <input type="submit" value="Küldés">
+  <input type="submit" formmethod="post" formaction="feldolgoz.php"
+  value="Küldés POST-al">
+</form>
+</code>
+==== Az input elem formnovalidate attribútuma ====
+A novalidate attribútuma egy logikai típus.
+Ha be van állítva, az input elem érvényessége nem lesz ellenőrizve küldéskor.
+A formnovalidate attribútum felülírja a form elem novalidate attribútumát.
+A formnovalidate a submit típus esetén használható.
+<code html>
+<form action="feldolgoz.php">
+  E-mail: <input type="email" name="email"><br>
+  <input type="submit" value="Mehet"><br>
+  <input type="submit" formnovalidate value="Küldés ellenőrzés nélkül">
+</form>
+</code>
+==== Az input elem formtarget attribútuma ====
+A formtarget attribútummal kulcsszavakat adhatunk meg, szabályozzák a küldés után hol jelenjen meg a válasz.
+A formtarget attribútum felülírja a form elem target attribútumát.
+A formtarget attribútum a használható a következő attribútumokkal:
+  * submit
+  * image
+Egy másik ablak megadása:
+<code html>
+<form action="feldolgoz.php">
+  Teljesnév: <input type="text" name="nev"><br>
+  <input type="submit" value="Küldés">
+  <input type="submit" formtarget="_blank" value="Küldés másik ablakba">
+</form>
+</code>
+==== Az input elem height és width attribútuma ====
+Egy input elem szélességének és magasságának megadása.
+Csak a következő input típus esetén használható:
+  image
+<code html>
+<input type="image" src="kuldokep.gif" alt="Mehet" width="48" height="48">
+</code>
+==== Az input elem list attribútuma ====
+A list attribútum kapcsolódik a <datalist> elemhez.
+Ha beírunk egy karaktert, felkínálja a listából az azonos kezdőbetűjelűeket.
+A Safari nem támogatja.
+Egy input elem datalistával:
+<code html>
+<input list="gyumolcsok">
+<datalist id="gyumolcsok">
+  <option value="alma">
+  <option value="körte">
+  <option value="barack">
+  <option value="szilva">
+  <option value="málna">
+</datalist>
+</code>
+<html>
+Gyümölcs: <input list="gyumolcsok">
+<datalist id="gyumolcsok">
+  <option value="alma">
+  <option value="körte">
+  <option value="barack">
+  <option value="szilva">
+  <option value="málna">
+</datalist>
+</html>
+==== Az input elem min és max attribútumai ====
+Egy input elem minimum és maximum értékét adhatjuk meg vele.
+A következő input típusokkal használható:
+  * number
+  * range
+  * date
+  * datetime
+  * datetime-local
+  * month
+  * time
+  * week
+Legkésőbbi dátum 2005-05-01:
+<code html>
+<input type="date" name="bday" max="2005-05-01">
+</code>
+Csak ez utáni dátum 2008-01-01:
+<code html>
+<input type="date" name="bday" min="2008-01-01">
+</code>
+Terjedelem 1 és 10 között:
+<code html>
+<input type="number" name="quantity" min="1" max="10">
+</code>
+==== Az input multiple attribútuma ====
+A multiple attribútum logikai típusú adatot tartalmazhat.
+Ha be van állítva, akkor több értéket is megadhat egy input elemben.
+A következő input típusoknál használható:
+  * email
+  * file
+A file upload field that accepts multiple values:
+<code html>
+Fájlok kiválasztása: <input type="file" name="fajl" multiple>
+</code>
+==== Az <input> pattern attribútuma ====
+A pattern attribútummal megadható egy szabályos kifejezés, amellyel ellenőrizhető az elem tartalma.
+A pattern a következő típusú input attribútumokkal használható: text, password, url, tel, email, és search.
+A mindenhol használható title attribútumban érdemes leírni a felhasználó számára egy segítséget.
+A Safari nem támogatja.
+A példa kedvéért készítsünk egy olyan szabályos kifejezést, amely 4 számot
+fogad el irányítószámként:
+<code html>
+Irányítószám: <input type="text" name="iranyitoszam" pattern="[0-9]{4}"
+    title="Négy szám adható meg.">
+</code>
+<html>
+Irányítószám: <input type="text" name="iranyitoszam" pattern="[0-9]{4}"
+    title="Négy szám adható meg.">
+</html>
+==== A <input> placeholder attribútum ====
+A placeholder attribútum egy rövid leírás arról, mit írhatunk az inputmezőbe.
+A következő típusú input elemekkel működik: text, password, url, tel, email, és search.
+<code html>
+<input type="text" name="nev" placeholder="Teljesnév">
+</code>
+<html>
+<input type="text" name="nev" placeholder="Teljesnév">
+</html>
+==== A <input> required attribútum ====
+A required attribútum egy logikai típust tartalmazhat.
+Ha be van állítva, kötelező kitölteni az elem tartalmát elküldés előtt.
+A required attribútum a következő típusokkal működik: text, password, url, tel, email, search, date pickers, number, checkbox, radio, és file.
+A safari nem támogatja.
+<code html>
+Teljesnév: <input type="text" name="nev" required>
+</code>
+<html>
+Teljesnév: <input type="text" name="nev" required>
+</html>
+==== Az <input> step attribútum ====
+A step attribútummal megadható a legális számok intervalluma egy input elem esetén.
+Ha például step="4", akkor elfogadható a -8, -4, 0, 4, 8 stb.
+A max és min attribútumokkal a leghatékonyabb.
+A következő típusú input elemekkel használható: number, range, date, datetime, datetime-local, month, time és a week.
+A firefox nem támogatja!
+<code html>
+<input type="number" name="pontok" step="4">
+</code>
+Step 4-es értékkel:
+<html>
+<input type="number" name="pontok" step="4">
+</html>
+Min 2, max 22:
+<html>
+<input type="number" name="pontok" step="4" min="2" max="22">
+</html>
+===== Jelölő elemek =====
+A 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 ====
+A div elem a division, ejtsd: [dɪˈvɪʒən] szóból van, amelynek több jelentése is van:
+csoport, elválasztás, közfal, megoszlás, szakasz, tanács stb.
+A div elemmel blokk szintű dobozokat hozhatunk létre.
+==== span ====
+A span angol szó, ejtsd: [spæn] jelentései: arasz, átfog, átível, fesztáv, ív stb.
+A span elemmel inline szintű elemet hozunk létre.
+Például egy szövegrészletet külön szeretnék formázni.
+<code html>
+Lorem ipsum <span>dolores</span> sit amet.
+</code>
+<code css>
+span {
+    text-decoration: undrline;
+}
+</code>
+Vagy
+<code html>
+Lorem ipsum <span class="dol">dolores</span> sit amet.
+</code>
+<code css>
+span.dol {
+    text-decoration: undrline;
+}
+</code>
+===== Tároló elemek =====
+==== 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
+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 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.
+IE-hez javítás JavaScriptben és CSS-ben:
+<code javascript>
+document.createElement("header");
+document.createElement("footer");
+document.createElement("hgroup");
+document.createElement("section");
+document.createElement("article");
+document.createElement("nav");
+</code>
+<code css>
+header, footer, hgroup, section, article, nav  {
+   display: block;
+}
+</code>
+==== Tárolóelem példa ====
+<code html>
+<article>
+    <header>
+        <h1>A macskák élete</h1>
+    </header>
+    <p>Első bekezdés</p>
+    <aside>
+        <q>A nagymacskák azok másféle állatok</q>
+    </aside>
+    <p>A macskák élete</p>
+</article>
+</code>
+<html>
+<div style="margin: 2% 10%; background-color: #eeeeee; padding: 5px;">
+<article>
+    <header>
+        <h1>A macskák élete</h1>
+    </header>
+    <p>Első bekezdés</p>
+    <aside>
+        <q>A nagymacskák azok másféle állatok</q>
+    </aside>
+    <p>A macskák élete</p>
+</article>
+</div>
+</html>
+==== Fejrészcsoport ====
+<code html>
+<header>
+        <h1>Programozás</h1>
+        <h2>Objektum orientált megvalósítások</h2>
+</header>
+</code>
+<html>
+<div style="margin: 2% 10%; background-color: #eeeeee; padding: 5px;">
+<header>
+        <h1>Programozás</h1>
+        <h2>Objektum orientált megvalósítások</h2>
+</header>
+</div>
+</html>
+===== Átirányítás =====
+<code html>
+<meta http-equiv="refresh" content="0; url=http://masikdomain.valahol">
+</code>
+Esetleg 10 másodpercre állítjuk, így 10 másodperc múlva átirányítunk:
+<code html index.html>
+<html>
+<head>
+<!-- A felhasználó átirányítása másik webhelyre -->
+<title>redirect</title>
+<meta http-equiv="refresh" content="10; URL=http://www.masikdomain.valahol">
+</head>
+<body>
+Ez az oldal el lett távolítva. 10 másodpercen belül új oldalra irányítunk át.
+Ha ez nem történik meg, kattints a következő linkre:
+<a href="http://www.masikdomain.valahol">Másik tartománynév</a>.
+</body>
+</html>
+</code>
+===== A favicon =====
+A favicon (favorites icon, vagyis kedvenc ikon) egy weboldalhoz vagy weblaphoz tartozó ikon.
+A böngészők különböző helyeken jelenítenek meg. Ilyen például a böngésző címsora, a böngészőfül eleje, a könyvjelzők előtt.
+Ha nincs semmi beállítva, akkor a webszerver gyökérkönyvtárában elhelyezett favicon.ico nevű fájl kerül megjelenítésre.
+A böngészők ma már az ICO mellett már GIF és PNG fájlokat is tudnak kezelni (akár animáltakat is).
+A fájlnak nem kell az adott szerveren lenni.
+Mérete 16x16.
+A HTML5-ben elég ennyi:
+<code html>
+<link rel="icon" href="ikon.ico" />
+</code>
+Korábbi HTML verziók:
+<code html>
+<link rel="shortcut icon" type="image/png" href="/utvonal/image.png" />
+</code>
+<code html>
+<link rel="shortcut icon" href="/utvonal/images/favicon.ico" />
+</code>
+<code html>
+<link rel="icon" type="images/gif" href="http://domain.com/image.gif" />
+</code>
+<code html>
+<link rel="icon" type="images/vnd.microsoft.icon" href="http://zold.and/ikon.ico" />
+</code>
+===== Speciális karakterek =====
+Vannak olyan karakterek, amelyeknek speciális szerepük van HTML,
+vagy egyszerűen csak nem szerepelt a korábbi kódtáblákban. Az ilyen
+karakterek megjelenítéséhez úgynevezett entitásokat használhatunk.
+Az entitásnak lehet neve és mindig van egy kódja is. A következő
+táblázat az entitások listáját tartalmazza az teljesség igénye nélkül.
+^  Karakter  ^  Kódnév  ^  Számkód  ^
+|  <  |  &lt;  |  &#60;  |
+|  >  |  &gt;  |  &#62;  |
+|  &  |  &amp;  |  &#38;  |
+|  "  |  &quot;  |  &#34;  |
+|     |  &nbsp;  |  &#160;  | nem törhető szóköz |
+|     |  &shy;   |  &#173;  | elválasztó jel |
+|  §  |  &sect;  |  &#167;  |
+|  ©  |  &copy;  |  &#169;  |
+|  ®  |  &reg;   |  &#174;  |
+|  ™  |  &trade;  |  &#8482;  |
+|  €  |  &euro;  |  &#8364;  |
+|  ¢  |  &cent;  |  &#162;  |
+|  £  |  &pound;  |  &#163;  |
+|  ¥  |  &yen;  |  &#165;  |
+|  °  |  &deg;  |  &#176;  |
+|  ×  |  &times;  |  &#215;  |
+|  ¼  |  &frac14;  |  &#188;  |
+|  ½  |  &frac12;  |  &#189;  |
+|  ¾  |  &frac34;  |  &#190;  |
+|  ∞  |  &infin;  |  &#8734;  |
+|  ≠  |  &ne;  |  &#8800;  |
+|  ≤  |  &le;  |  &#8804;  |
+|  ≥  |  &ge;  |  &#8805;  |
+|  ±  |  &plusmn;  |  &#177;  |
+|  ÷  |  &divide;  |  &#247;  |
+|  µ  |  &micro;  |  &#181;  |
+|  ƒ  |  &fnof;  |  &#402;  |
+|  ∏  |  &prod;  |  &#8719;  |
+|  ∑  |  &sum;  |  &#8721;  |
+|  ∗  |  &lowast;  |  &#8727; |
+|  √  |  &radic;  |  &#8730;  |
+|  ∫  |  &int;  | &#8747;  |
+|  ≡  |  &equiv;  |  &#8801;  |
+|  ¹  |  &sup1;  |  &#185;  |
+|  ²  |  &sup2;  |  &#178;  |
+|  ³  |  &sup3;  |  &#179;  |
+|  ¦  |  &brvbar;  |  &#166;  |
+|  «  |  &laquo;  |  &#171;  |
+|  ´  |  &acute;  |  &#180;  |
+|  ·  |  &middot;  |  &#183;  |
+|  ¨  |  &uml;  |  &#168;  |
+|  »  |  &raquo;  |  &#187;  |
+|  ¶  |  &para;  |  &#182;  |
+|  …  |  &hellip;  |  &#8230;  |
+|  ←  |  &larr;  |  &#8592;  |
+|  ↑  |  &uarr;  |  &#8593;  |
+|  →  |  &rarr;  |  &#8594;  |
+|  ↓  |  &darr;  |  &#8595;  |
+|  ↔  |  &harr;  |  &#8596;  |
+|  ⇐  |  &lArr;  |  &#8656;  |
+|  ⇑  |  &uArr;  |  &#8657;  |
+|  ⇒  |  &rArr;  |  &#8658;  |
+|  ⇓  |  &dArr;  |  &#8659;  |
+|  ⇔  |  &hArr;  |  &#8660;  |
+|  #  |  &num;   |  &#35; |
+Még több:
+  * http://dev.w3.org/html5/html-author/charref
+  * http://www-archive.mozilla.org/newlayout/testcases/layout/entities.html
+===== Rajzvászon =====
+==== Vászon ====
+<code html>
+<canvas id="vaszon1" width="200" height="100" style="border:1px solid #000000;">
+A böngésződ nem támogatja a HTML5 rajzvászont.
+</canvas>
+</code>
+<html>
+<canvas id="vaszon1" width="200" height="100" style="border:1px solid #000000;">
+A böngésződ nem támogatja a HTML5 rajzvászont.
+</canvas>
+</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>
+<script>
+var c=document.getElementById("vaszon2");
+var ctx=c.getContext("2d");
+ctx.fillStyle="#0000ff";
+ctx.fillRect(10,10,150,75);
+</script>
+</html>
+==== Vonalhúzás ====
+<code html>
+<canvas id="vaszon3" 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("vaszon3");
+var ctx=c.getContext("2d");
+ctx.moveTo(0,0);
+ctx.lineTo(300,150);
+ctx.stroke();
+</script>
+</code>
+<html>
+<canvas id="vaszon3" 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("vaszon3");
+var ctx=c.getContext("2d");
+ctx.moveTo(0,0);
+ctx.lineTo(300,150);
+ctx.stroke();
+</script>
+</html>
+==== Kör ====
+<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>
+<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>
+</html>
+==== Több rajz ====
+<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();
+</script>
+</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();
+</script>
+</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>
+var c=document.getElementById("vaszon6");
+var ctx=c.getContext("2d");
+ctx.font="30px Arial";
+ctx.strokeText("Hello World",10,50);
+</script>
+</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");
+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>
+</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");
+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>
+==== Színátmenet 2 ====
+<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
+  * [[wp>Kompozer|Kompozer]]
+  * [[wp>Microsoft_FrontPage|FrontPage]]
+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 ====
+<code>
+<object data="azenallomanyom.pdf" type="application/pdf" width="100%" height="100%">
+<p>A böngésződ nem képes megjeleníteni a PDF dokumentumot.</p>
+</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>
+===== Linkek és Irodalom =====
+  * Richard Clark, Oli Studholme, Divya Manian, Christopher Murphy: **Beginning HTML5 and CSS3**
+    * http://thewebevolved.com
+  * Bruce Lawson and Remy Sharp: **INTRODUCING HTML5**
+    * http://introducinghtml5.com/
+  * Mark Pilgrim: **DIVE INTO HTML5**
+    * http://diveintohtml5.info
+  * Bruce Lawson,  Remy Sharp: **Bemutatkozik a HTML 5**
+    * http://www.libri.hu/konyv/bruce_lawson.bemutatkozik-a-html-5.html
+    * http://www.kiskapu.hu/index.php?BODY=BookInfo&OP=details&ID=120344
+  * http://www.whatwg.org/specs/web-apps/current-work/multipage/ (A HTML5)
+  * http://www.w3.org/TR/2012/CR-html5-20121217/ (HTML5)
+  * http://www.w3.org/TR/2012/CR-2dcontext-20121217/ (Canvas 2D)
+  * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html (Canvas)
+  * http://www.sgmlsource.com/ (SGML történet)
+  * http://en.wikipedia.org/wiki/Favicon (A favikon)
+Hasznos:
+  * http://modernizr.com/ (JavaScript könyvtárak)

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon