[[:oktatas:web:html|< HTML]]

====== HTML5 nyelv ======

  * **Szerző:** Sallai András
  * Copyright (c) 2009, Sallai András
  * 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 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.


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 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. 


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?

===== A HTML elemek =====

{{:oktatas:web:html:html_tag_elem.png|}}

{{:oktatas:web:html:html_elem_attributuma.png|}}


==== Beépített elemek ====

<code html>
<p>Az almás kertben van egy <strong>nagy fa</strong> a kerítés mellett.</p>

</code>

==== Üres elemek ====

<code html>
<img src="kep.png" alt="a kép leírása">

</code>
===== 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 html>
<meta charset="utf-8" />
</code>



Átirányítás ennyi idő múlva:
<code html>
<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|}}

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 =====

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 |
| <nowiki><s></nowiki> | elavult, pontatlan, nem fontos szöveg  |
| <nowiki><mark></nowiki> | megjelölt szöveg  (2015-től minden böngészőben) |
| <nowiki><u></nowiki> | aláhúzott |

<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:
<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;">
<abbr>stb.</abbr>
<abbr>u.</abbr>
<abbr>dec.</abbr>
<abbr title="február">feb.</abbr>
</div>
</html>




<html>
<div style="margin:2% 10%; background-color: #eeeeee; padding: 5px;">
<address>Nagy József<br />
06(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>

<code html>
<!-- 
Lehetséges típusok:
a, A, i, I, 1 

-->
<ol type="A">
  <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 a 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 ====

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>


<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 \\ Definition List|
| <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 \\ Definition Description |



===== 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 html5>
<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 html5>
<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>

==== 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 =====
==== 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>



==== Oszlopnyú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>

==== Sornyú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 oszlopnyú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>



{{: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">
  </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>


<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">
</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>


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>


===== 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 src="hangfajl.mp3" controls></audio>
</code>


<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">https://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">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 =====

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:

Az input elemek csoportosíthatók a fieldset elemmel, de egyetlen 
csoport esetén is használhatjuk. 

<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>

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 ====

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 html>
<form id="form1">

</form>

<button form="form1">
</code>



<code html>
<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 html>
<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>


===== Részletek =====

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. 

<code html>
<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 ====

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>

===== 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|}}


===== 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, 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.

| <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 ===


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>

==== 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>



===== Á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>

Vagy:
<code html>
<link rel="icon" href="ikon.png" />
</code>


A kép mérete eredetileg 16x16-os méret, de a böngészők betöltik nagyobb méretű képet is.


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>

{{:oktatas:web:html:favicon_bongeszobe.png|}}

Gykorláshoz:

  * https://szit.hu/download/oktatas/web/favicon1.png
  * https://szit.hu/download/oktatas/web/favicon2.png
===== 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; |
|  <nowiki>|</nowiki>  |  &vert  |  ???  |
|  _  |  ???  |  &#95  | alulvonás |


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>











===== Viewport =====

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. 

A viewport bevezetését szükségessé tette a **telefonok és táblagépek
megjelenése**. 

A HTML5 a meta elemmel bevezetett egy beállítást a
különböző eszközök számára. 



Tegyük weboldalunk fejrészébe az alábbi sort:

<code html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</code>


A mai böngészők fejlesztői felületei lehetőséget kínálnak a kisebb képernyős
felületen a weblap megtekintésére. 

Készítsünk egy egyszerű weblapot, ahol egy szöveget tartalmazó doboz méretét beállítjuk, például 200px szélesre. Nnézzük meg a fenti viewport beállítás nélkül és a beállítással együtt is telefonon, vagy böngészőben, telefonnézetben.


Minta:
  * https://szit.hu/m/viewport/



===== Fogd és húzd =====

<code html>

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#div2 {
    width:70px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>


<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

<img id="drag1" src="lib/images/notify.png" draggable="true"
ondragstart="drag(event)" width="69" height="69">

</body>
</html>
</code>



<html>


<style type="text/css">
#div2 {
    width:70px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
</style>

<script>
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>


<p>Húzd a képet a téglalapra:</p>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

<br>

<img id="drag2" src="lib/images/notify.png" draggable="true" ondragstart="drag(event)" width="69" height="69">

</html>




===== Gyakorlatok =====

  * Keressen olyan HTML elemeket, az alábbi oldalon, amik nem szerepelnek ezen az oldalon:
    * https://www.w3schools.com/tags/ (2020)
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element (2024)


===== Szerkesztők =====

  * Visual Studio Code
  * Brackets
  * Atom
  * Bluefish



===== Függelék =====

==== 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>


===== 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)