[[: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: Egy gépárműről szeretnénk tárolni a rendszámát, űrtartalmát és színét. ASG-843 1800 piros 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 ASG-843 1800 piros ===== 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: 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: ]> 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: A járművek a közlekedés eszközei. 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 < vagy > 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 < akkor azt négy önálló karakterként értelmezi. A CDATA tartalmazt a 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 ====

Az almás kertben van egy nagy fa a kerítés mellett.

==== Üres elemek ==== a kép leírása ===== 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. Cím

Weblap címe

Egy bekezdés

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: A HTML5 definíciója: ==== 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: Fejrész Törzs A gyökérelem számára megadhatunk egy tulajdonságot, amely az oldal nyelvét fogja tartalmazni: 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: Á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. Átirányítás ennyi idő múlva: Még több meta elem: * 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: * 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. * All * Index, follow - ugyanaz, mint az all * NoIndex * NoFollow * NoIndex, NoFollow ===== Megjegyzés ===== 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 "--" és "->" 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:

Elterjedése

Alfajok

Megjelenése

Életmód

==== A különböző méretek ====

H1 fejezetcím

H2 fejezetcím

H3 fejezetcím

H4 fejezetcím

H5 fejezetcím
H6 fejezetcím
{{:oktatas:web:html:fejezetcimek.png|}} ===== Bekezdések ===== ==== A bekezdés ==== A bekezdéseket a p elemek közzé tesszük.

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.

==== Szerkeszthető bekezdés ==== A tartalmat szerkeszthetővé tehetem a contenteditable tulajdonsággal:

Lorem ipsum

A contenteditable bármely elemmel használható, nem csak a p elemmel. A következő szöveg szerkeszthető:

Lorem ipsum

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

Lorem

ipsum

dolor

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: Lorem ipsum dolor 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:
Nem törhető szóköz:   Feltételes elválasztójel ( soft hyphen): ­ 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. Az a har­cos aki csak az ö­lés­hez ért na­gyon se­bez­hető. Az i­ga­zán nagy sza­mu­rá­jok na­gyon szép ha­i­ku­kat í­rtak. A teszteléshez méretezzük kisebbre az ablakot:
Az a har­cos aki csak az ö­lés­hez ért na­gyon se­bez­hető. Az i­ga­zán nagy sza­mu­rá­jok na­gyon szép ha­i­ku­kat í­rtak.
===== Szöveg kiemelése ===== ==== HTML kiemelő tagek ==== ^ Tag ^ Leírás ^ | | félkövér szöveg | | | kiemelt szöveg | | | dőlt szöveg | | | kis szöveg | | | erős szöveg | | | alsó index | | | felső index | | | beszúrt szöveg | | | törölt szöveg | | | elavult, pontatlan, nem fontos szöveg | | | megjelölt szöveg (2015-től minden böngészőben) | | | aláhúzott | félkövér szöveg
kiemelt szöveg
dőlt szöveg
kis szöveg
erős szöveg
alsó index és felső index beszúrt szöveg törölt szöveg ==== HTML Számítógép kimeneti tagek ==== ^ Tag ^ Leírás ^ | | számítógépes kód | | | billentyűzet | | | mintakód | | | változó | |
 | előreformázott szöveg |



Kódszöveg: printf("alma\n");



Billentyűkombinációs: Ctrl + D



Minta: ^a.*


Másik minta:

Ha mentés során hiba keletkezett akkor kiírjuk a Hiba a mentés során! szöveget a képernyőre.



Ha mentés során hiba keletkezett akkor kiírjuk a Hiba a mentés során! szöveget a képernyőre.




Változó: $PATH



Előreformázott szöveg: 
    printf("Behúzással\n");
A következő példa egy szerkeszthető pre elemet mutat be:
#include <stdio>
main()
{
    printf("Kezdés\n");

}

#include <stdio>
main()
{
    printf("Kezdés\n");

}

==== HTML idézet és definíciós tagek ==== ^ Tag ^ Leírás ^ | | egy rövidítés | |
| cím \\ egy dokumentum tulajdonosának elérhetősége | | | szöveg iránya | |
| hosszú idézet | | | rövid idézet | | | cím idézése | | | egy kifejezés meghatározása | A HTML 4.01 verzióban létezett még a elem, amely mozaikszavak megadására lett kitalálva, de a HTML5 már nem támogatja. Rövidítések: stb. u. dec. feb.
stb. u. dec. feb.
Nagy József
06(30) 123-4567
nagy.jozsef@valahol.tld
A szöveg irányának megváltoztatása: Normál szöveg Valami szöveg Fordított irány: Valami szöveg Normál szöveg:


Valami szöveg
A fordított szöveg megjelenítve:


Valami szöveg
==== 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 ====
  • Kávé
  • Tea
  • Tej
==== Számozott lista ====
  1. Kávé
  2. Tea
  3. Tej
  1. Kávé
  2. Tea
  3. Tej
  1. Kávé
  2. Tea
  3. Tej
  1. Kávé
  2. Tea
  3. Tej
Egymásbaágyazás:
  1. Kávé
  2. Tea
    1. víz
    2. édesítő
  3. Tej
  1. Kávé
  2. Tea
    1. víz
    2. édesítő
  3. Tej
==== Böngésző támogatottság ==== A legtöbb jelentős böngésző támogatja az
    taget. ==== Definíció és használat ==== Az
      tag egy számozott listát definiál. Használd az
    1. 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
        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
          tag támogatja a globális attribútumokat a HTML5-ben. ==== Eseményattribútum ==== Az
            tag támogatja az esemény attribútumokat a HTML5-ben. ==== Definíciós lista ==== A definíciókat általánosan így használjuk:
            fogalom
            leírás
            fogalom2
            leírás
            alternatív leírás
            másik alternatív leírás
            Kávé
            feket forró ital
            Tej
            Fehér hideg ital
            HTML elemek: |
            | Egy definíciós lista definiálása \\ Definition List| |
            | Egy definíciós lista egy elemét definiálja \\ Definition Term | |
            | 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) A Kép leírása A képnek és a html állománynak egy könyvtárban kell lenniük. Még több attribútum: A Kép leírása 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.
            A kép leírása
            Felirat
            Majom
            A kép felirata
            A figure elemmel, természetesen több kép is leírható:
            Első Második Harmadik
            A képek leírása
            ==== 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 ====
            Hónap Spórolás
            Január 1000 Ft
            Hónap Spórolás
            Január 1000 Ft
            ==== Felirat ====
            Költségvetés
            Hónap Spórolás
            Január 1000 Ft
            Költségvetés
            Hónap Spórolás
            Január 1000 Ft
            ==== Oszlopnyúlás ====
            Költségek
            Hónap Spórolás
            Január 1000 Ft
            Költségek
            Hónap Spórolás
            Január 1000 Ft
            ==== Sornyúlás ====
            Adatok Hónap Spórolás
            Január 1000 Ft
            Adatok Hónap Spórolás
            Január 1000 Ft
            ==== Sor- és oszlopnyúlás ==== A rowspan tulajdonsággal sorokat vonhatunk össze.
            Adatok Költségek
            Hónap Spórolás
            Január 1000 Ft
            Adatok Költségek
            Hónap Spórolás
            Január 1000 Ft
            {{: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.
            No. Név Település
            1 Nagy József Szolnok
            2 Peres Ferenc Szeged
            A tag, egy elem gyermek kell legyen. A , , és elemek előtt. {{:oktatas:web:html:table_colgroup.png?300|}} ==== A táblázat részeinek csoportosítása ====
            elemek után kell állnia, és
            Név Fizetés
            Nagy János 3850000
            Kemény Ferenc 2870000
            Összesen 6720000
            {{: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: Hivatkozás: Másik Kép hivatkozásként: 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.

            1

            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

            2

            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

            3

            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

            4

            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

            A weblap tetejére, helyezzünk el két hivatkozást az horgonyokra. Harmadik bekezdés Negyedik bekezdés A teljes kód: Harmadik bekezdés Negyedik bekezdés

            1

            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

            2

            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

            3

            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

            4

            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

            Nézzük meg, hogyan jelenik meg a böngészőben a hiperhivatkozás, a következő ábrán.
            {{:oktatas:web:html:hiperhivatkozas.png|}} Hiperhivatkozás
            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. 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: Második welap
            Második weblap, negyedik bekezdése

            Első weblap

            Az masodik.html tetején: Vissza az első weblapra

            Második weblap

            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: ===== 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 * Működik Firefox, Opera, Chrome alatt * IE8 nem jelenít meg semmit Többféle formátumban felrakva Típusok megadása 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 ===== ===== Beépített weblap ===== ==== Egy weblap beépítve ==== Szegély: frameborder="0" ==== Egy link céljaként ====

            https://szit.hu/doku.php?id=oktatas

            https://szit.hu/doku.php?id=oktatas

            ==== 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. Engedélyek: * allow-forms * allow-pointer-lock * allow-popups * allow-same-origin * allow-scripts * allow-top-navigation Példa két engedélyre: ===== Ű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.
            Teljesnév
            Teljesnév

            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ú ==== Űrlap elemek ==== === Beviteli mező === 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. === 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: 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 === === Törlés gomb === Még egy gomb ==== Rádiógombok ====




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




            ==== Szöveghely ==== ==== Legördülő listadoboz ==== === Egyszerű kombóbox === === Alcsoportok === === Attribútumok === === Listadoboz === Azonosítók: Egyéb ==== Vizuális elemek ==== A form számára létrehozhatunk keretet, keretfeliratot, csak a jobb vizuális megjelenés érdekében.
            Személyes: Név:
            Email:
            Születés dátuma:
            Személyes: Név:
            Email:
            Születés dátuma:
            ===== Új űrlap elemek ===== ==== Színválasztó ==== * Chrome, Opera
            Válassz színt:
            Válassz színt:
            ==== Naptár ==== * Chrome, Safari, Opera
            Születésnap:
            Születésnap:
            ==== E-mail ellenőrző ==== * Firefox, Chrome, Opera
            E-mail:
            E-mail:
            ==== Léptetődoboz ==== * Chrome, Safari, Opera
            Terjedelem (1 és 5 között):
            Terjedelem (1 és 5 között):
            ==== Nagyság beállítása ==== * Chrome, Safari, Opera
            Pontok:
            Pontok:
            ==== URL ==== * Firefox, Chrome, Opera
            Add meg a weblapod címét:
            Add meg a weblapod címét:
            ==== Titkosítás ==== * Firefox, Chrome, Safari, Opera
            Felhasználónév: Titkosítás:
            Felhasználónév: Titkosítás:
            ==== Kimenet ==== * Firefox, Chrome, Safari, Opera
            0 100 + =
            0 100 + =
            ==== Automatikus fókusz ==== * Firefox, Chrome, Safari, Opera
            Vezetéknév:
            Keresztnév:
            Vezetéknév:
            Keresztnév:
            ===== Új form és input attribútumok ===== A HTML5 form és input elemei néhány új attribútumot tartalmaz. ====
            / 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 Vezetéknév:
            Keresztnév:
            E-mail:
            Vezetéknév:
            Keresztnév:
            E-mail:
            Az opera nem támogatja. ==== A
            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. E-mail:
            ==== Az 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. Név: ==== Az 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.
            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 ==== 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'); Olvasás 2 function mehet() { const source = this.event.target; console.log(source.getAttribute('data-city')) } Olvasás 3: function mehet(source) { console.log(source.getAttribute('data-city')) } Olvasás 4: function mehet(source) { console.log(source.dataset.city) } ==== Olvasás írás jQuery-ben ==== var az = $('#torlesgomb').attr('az'); var id = $('#torlesgomb').attr('nev'); $('#torlesgomb') .attr('data-az', '2') .attr('data-nev', 'Pál'); ==== Elérés dataset API-n keresztül ==== var button = document.getElementById('torlesgomb'); var az = button.dataset.az; var nev = button.dataset.nev; button.dataset.az = '2'; button.dataset.nev = 'Pál'; ==== Hozzáférés CSS-ből ==== [data-telepules='Szolnok'] { background-color: red; } li[data-telepules='Szolnok'] { background-color: red; } ===== 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:
            , ,
            . A nem szemantikus elemek:
            , Tartalmuk akármi lehet. Néhány szemantikus elem: *
            * *
            *
            *