Google Chrome
Google Chrome egy ingyenes, nyílt forráskódú böngésző, melyet a Google fejlesztett ki, 2008-ban.
Melyik elemet mire, hogyan és hól alkalmazzuk, saját részre HTML elemek teszt oldal.
Az itt leírtakat, mindenki szabadon felhasználhatja.
Kezdőknek és haladóknak.
Jó ha tudjuk:
Ez az oldal html5 és UTF-8 kódolás BOM nélküli formátumban készült.
HTML elemek teszteléséhez, nem feltétel a html5 fájl formátum, de fontos mindig a legújabb böngésző verziókkal dolgozni.
A leggyakrabban használt böngészők közül w3schools is, a következőket ajánlja: Firefox; Chrome; IE-11 és Edge; Safari; Opera;
Megjegyzés:
Otthoni teszteknél, APACHE szerver htdocs mappájában lévő html fájlokat, ne a megszokott módon nyissuk meg böngészőnkkel,
hanem a böngésző keresősávjába beírt localhost címen keresztül lépjünk be.
<!DOCTYPE> | Nem HTML-elem. Böngészőknek tájékoztató, milyen HTML-verziót alkalmazunk az oldalhoz. |
<!-- ........ --> | Elrejtett megjegyzéseinkhez, melyeket böngészők, nem jelenítenek meg. |
<a> | Hivatkozási elem.
Az <a> elem (címke) lehetővé teszi: - Webhelyünkön kívüli, egy teljesen más weblapra történő navigálást. - Webhelyünkön belül, másik weblapunkra történő navigálást. - Egy weblapon belül, az általunk kijelölt helyekre (pontokra, azaz horgonyokra) történő navigálást. Több hivatkozásunk is van, és azok egymás mellett helyezkednek el, akkor azokat egymástól értelemszerűen el kell választani. Erre használjuk a függőleges elválasztó vonalat: "Alt" billentyű lenyomása mellett, írjuk be a 0124 számsort, vagy "Alt Gr" + "W" billentyű lenyomásával. Legfontosabb attribútuma a href, mely jelzi, azaz, meghatározza a hivatkozási hely, útvonalát, (URL-t). A HTML 4.01-ben lehet hiperhivatkozás vagy horgony. A HTML5-ben mindig hiperhivatkozás, de ha nincs href attribútuma, akkor ez csak a hiperhivatkozás helyőrzője. Másik, kiválasztott weboldalra, hiperhivatkozás: Példa: <a href="https://www.wpaulina.hu/asztali/cd_tartalom/hivatkozasok/hivatkozasok.html">Hivatkozasok.</a>Eredmény: Hivatkozasok. Példa: Weboldalunkon belüli navigálás, Kettős kereszt "#" után, sorszámozással vagy szöveggel: <a href="#6"> Hivatkozás.</a> <!-- Elhelyezése: Dokumentumunk elején, de tetszőleges helyén is, lehet.--> <a name="6" id="6"></a> <!-- Elhelyezése: Dokumentumunkban, a kiválasztott témakör elé. -->Eredmény: Hivatkozás. HTML5 elvárja, belső hivatkozásokra is, a hiperhivatkozás alkalmazását. (Oka: Keresőmotorok segítése.) Példa: <a href="https://www.wpaulina.hu/asztali/cd_tartalom/hivatkozasok/hivatkozasok.html#6">Belső hivatkozás.</a>Eredmény: Belső hivatkozás. Megjegyzés: Az <a> elemnél megjelenő szöveg stílusát, CSS-fájlban meghatározhatjuk. Az <a> elemnél szöveg helyett, fotót is, elhelyezhetünk. Hivatkozási linkre kattintást követően, külső weboldalra jutunk, visszalépéshez használjuk a böngésző navigációs sávjában lévő, vissza nyilat. |
||||||||||||
<abbr> | Rövidítés kijelölése, és értelmezésének megjelenítése.
A rövidítések megjelölése hasznos információkkal szolgál:
Felhasználók, böngészők, fordítási rendszerek és a keresőmotorok számára. A globális title attribútum, használható a <abbr> címkében, rövidítés / betűszó teljes verziójának megjelenítéséhez, amikor az egeret az <abbr> elem fölé mozgatásával mutatjuk be. Példa: Megkaphatom a <abbr title="Magyar Országos Horgász Szövetség">MOHOSZ</abbr> tagszervezeti név- és címlistáját.Eredmény: (Mozgasd az egeret, rövidítés fölé.) Megkaphatom a MOHOSZ tagszervezeti név- és címlistáját. | ||||||||||||
<acronym> | Mozaikszó kijelölése, és értelmezésének megjelenítése. Nem támogatott HTML5-ben.
Nem támogatott HTML5-ben. Használjuk helyette, az <abbr> elemet. A betűszó és értelmezése, a következőképpen kerül megjelölésre: Megkaphatom a <acronym title="Magyar Országos Horgász Szövetség">MOHOSZ</acronym> tagszervezeti név- és címlistáját.Eredmény: (Mozgasd az egeret, rövidítés fölé.) Megkaphatom a MOHOSZ tagszervezeti név- és címlistáját. |
||||||||||||
<address> | Külső címek, szerzők kiemelése, és információ megjelenítése.
Meghatározza a dokumentum vagy a cikk szerzőjének / tulajdonosának elérhetőségi adatait. Ha a <address> (cím) elem a <body> elem belsejében található, akkor ez a dokumentum elérhetőségi adatait tartalmazza. Ha a <address>(cím) elem egy <cikk> elem belsejében található, akkor az a cikkhez tartozó kapcsolattartási adatokat tartalmazza. A <address>(cím) elem szövege általában dőlt betűkkel jelenik meg. A legtöbb böngésző hozzáad egy sortörést az <address> elem előtt és után. Megírás a szerző elérhetőségi adatairól. Példa: <address> Írta: <a href="mailto:webmaster@example.com">Zöld Elefánt</a>.<br> Látogasson el hozzánk:<br> Example.com<br> 0888 Város, Valami ú 12<br> Hungary </address>Eredmény: Írta: Zöld Elefánt. Látogasson el hozzánk: Example.com 0888 Város, Valami ú 12 Hungary |
||||||||||||
<applet> | Beágyazott Java-kisalkalmazási elem. Nem támogatott HTML5-ben.
Az <applet> elem, nem támogatott a HTML5-ben. Használja helyette az <embed> vagy az <object> elemeket. Megjegyzés: Nem támogatott, de egyes böngészőkben még mindig van valamilyen támogatás az <applet> elemhez, de ehhez további plug-inek / telepítések szükségesek. A Java applet egy kis application, melyhez telepíteni kell egy bővitményt, és ismerni kell alkalmazását. Nem összekeverendő a JavaScript programmal. Az <applet> elemet, Internet Explorer 11 és korábbi verziók támogatják egy plug-in használatával. Példa: Külső Java applet, azaz, egy kis application fájl meghívása. <applet code="HeloApplet.class" width="350" height="350"> Java-applet, mely üdvözlő HeloApplet animációt jelenít meg. </applet> |
||||||||||||
<area> | Kijelöli a kattintható területet, rajzlapon / képen / térképen.
Az <area>(terület jelölő) elem. Kijelöli <map> elem területén, a kattintható területeket úgy, hogy láthatatlan, azaz, rajzokat / fotókat nem változtatja meg. Felhasználó sem tud róla, csak akkor, ha véletlen odamozgatja az egeret, vagy előre tájékoztatjuk a kattintható lehetőségekről. A shape attribútum meghatározza, kijelölő formátumát. A coords attribútum meghatározza, kijelölő parametereit. A href attribútum meghatározza, kattintáskor hová jutunk. A title attribútum, információt ad felhasználónak, ha az egeret kattintható területre mozgatta. Kattintható területekkel rendelkező rajzlap, kép vagy térkép: Példa: <img src="alakzatok.gif" width="160" height="119" alt="Szemléltető rajz" usemap="#rajzmap"> <map name="rajzmap"> <area shape="rect" coords="0,0,60,80"" href="#.htm" alt="Kilátó" title="Kilátó! Bővebben, katt ide!"> <area shape="circle" coords="100,58,8" href="#.htm" alt="Hold" title="Hold! Bővebben, katt ide!"> <area shape="circle" coords="124,58,10" href="#.htm" alt="Mars" title="Mars! Bővebben, katt ide!"> </map>Eredmény: ( Teszteléshez, egeret mozgasd az alakzatokra.) |
||||||||||||
<article> | Dokumentumban szereplő, egy cikket határoz meg.
A <article> (cikk) elem független, önálló tartalmat, azaz, cikket tartalmazó területet határoz meg. A cikknek önmagában van értelme, és lehetővé kell tenni, hogy azt függetlenül kezelje, a webhely többi részéről. A div elemekkel ellentétben, hasznos információkkal szolgál: Böngészők, fordítási rendszerek és a keresőmotorok számára. Az <article> elemhez meghatározhatunk stílust: Nevével vagy id és class azonosítóval. Megjelenési formája, megegyezik a div elemekével. Az <article> elem, lehetséges tartalmai, forrásai: - Fórum hozzászólás. - Blog bejegyzés. - Hírek. - Megjegyzés. Példa: <style> article{width: 90%; border: 2px solid #fc3; margin-left: 5px; padding:5px;} </style> <article> <h1>Google Chrome</h1> <p>Google Chrome egy ingyenes, nyílt forráskódú böngésző, melyet a Google fejlesztett ki, 2008-ban.</p> </article>Eredmény: Google ChromeGoogle Chrome egy ingyenes, nyílt forráskódú böngésző, melyet a Google fejlesztett ki, 2008-ban. |
||||||||||||
<aside> | Oldal tartalmától eltekintve, új tartalmakat határoz meg. Új a HTML5-ben. A <aside>(féloldal, félretett) címke bizonyos tartalmakat határoz meg, a behelyezett tartalom mellett. A félretett tartalomnaknak, a környező tartalomhoz kell kapcsolódnia. A div elemekkel ellentétben, hasznos információkkal szolgál, böngészők, fordítási rendszerek és a keresőmotorok számára. Az <aside> elemhez meghatározhatunk stílust: Nevével vagy id és class azonosítóval. Megjelenési formája, megegyezik a div elemekével. Tipp: Oldallábként többet, de egy <article> cikkben, egy <aside> tartalmat lehet elhelyezni. Példa:Eredmény: A családommal ellátogattunk a MÁV Vasúttörténeti Parkjába. |
||||||||||||
<audio> | Meghatározza a hangot, például a zenét vagy egyéb hangfolyamokat.
Jelenleg 3 támogatott fájlformátum található az <audio> elemhez: MP3 type="audio/mpeg" WAV type="audio/wav" OGG type="audio/ogg" 1.Példa, hang lejátszása: <audio controls> <source src="zene.ogg" type="audio/ogg"> <source src="zene.mp3" type="audio/mpeg"> <p>Ön böngészője, nem támogatja az audió elemet.</p> </audio>Eredmény: 2. Példa: Elhelyezünk egy <embed> elemet is, az audio elemet nem támogató böngészőknek. Az audio elemet ismerő böngészők, az embed elemet, nem veszik figyelembe <audio controls> <source src="zene.ogg" type="audio/ogg"> <source src="zene.mp3" type="audio/mpeg"> <p>Ön böngészője, nem támogatja az audio elemet.</p> <embed src="zene.mp3" autostart="false" height="40" width="300"> </audio>Eredmény: |
||||||||||||
<b> | Félkövér szöveg.
Vizuális megjelenítéshez alkalmazzuk. Kihangsúlyozott jelentősége nincs, a felolvasó programoknál.
Példa: <p>Normál szöveg, melyben <b>ez, félkövér szöveg.</b></p>Eredmény: Normál szöveg, melyben ez, félkövér szöveg.. |
||||||||||||
<base> | Célzást egy oldalon, az összes linkre.
Nem eltejedt alkalmazás, de még használható link célzásra. A <base> elem, megadja az alapértelmezett URL-t és az alapértelmezett célzást az összes linkre, egy oldalon. A megjelenítendő képnek, csak a viszonylagos címét adjuk meg. Miután megadtunk egy alap URL-t a fejrészben, böngésző a "https://www.example.com/images/madarak.gif" címen, keresni fogja a képet. Ilyen linkeknél, figyelembe kell venni, hogy a kapcsolat új ablakban nyílik meg, még akkor is, ha nincs cél = "_ blank" attribútum. Ennek az az oka, hogy a bázis elem cél-attribútuma, "_blank" -ra van állítva. Az új ablakból visszalépni az eredeti oldalra, böngésző ablakában lévő vissza nyíllal tudunk. Példa: <head> <base href="https://www.example.com/images/" target="_blank"> </head> <body> <img src="madarak.gif" width="75" height="96" alt="Madarak"> <a href="https://www.example.com">Madarak</a> </body> |
||||||||||||
<basefont> | Alapértelmezett szín és betűméret a dokumentum szövegéhez.
A <basefont> elemet, nem támogatja a HTML5, és nem minden böngésző. Szövegek formázására, használja helyette a CSS fájlt. Példa: <head> <basefont color="red" size="12"> </head> <body> <h1>Ez egy címsor</h1> <p>Ez egy bekezdés szövege.</p> </body> Eredmény: Ez egy címsorEz egy bekezdés szövege. |
||||||||||||
<bdi> | Elkülöníti a szöveg egy részét, amely más irányba formázható kívülről, más szövegből
A <bdi> elem hasznos akkor, ha a felhasználó által generált tartalmakat, ismeretlen irányba ágyazza, és ezt a szöveget vagy csak egy részét, meg akarjuk fordítani. Hasznos akkor is, ha más irányba formázott cikkből idézetet, szövegrészt másolunk, és meg akarjuk fordítani a szövegirányt. Példa: Szövegirány visszafelé olvasható. ( <----- Jobbról-balra) Ezt a szöveget olvassa Fehér Egér, az állatvilág ritka fajtája. Teljes szöveg, vagy csak egy részének megfordítása. (Balról-jobbra) az állatvilág ritka fajtája.<bdi>olvassa Fehér Egér,</bdi> Ezt a szöveget Eredmény: Ezt a szöveget olvassa Fehér Egér, az állatvilág ritka fajtája. |
||||||||||||
<bdo> | Meghatározza a szövegirányt.
A <bdo> elem, felülbírálja az aktuális szövegirányt. (Jelentése: Bi-Directional Override.) Jobbról balra írás olvasás, az arab területere jellemző. Szövegirányok: - Balról-jobbra olvasható: <bdo dir="ltr"> - Jobbról-balra olvasható: <bdo dir="rtl"> Példák: <bdo dir="ltr">Balról-jobbra olvasható szöveg.</bdo> <bdo dir="rtl">Jobbról-balra olvasható szöveg.</bdo> Eredmények: Balról-jobbra olvasható szöveg. Jobbról-balra olvasható szöveg. |
||||||||||||
<big> | Gyors betűméret növelés. Nem támogatja a HTML5.
Nem támogatja a HTML5. Használja helyette a CSS fájlt.
Példa: <p>Normál szöveg, <big>bigger szöveg.</big></p>Eredmény: Normál szöveg, bigger szöveg. |
||||||||||||
<blockquote> | Idézetblokk más forrásból. Kiemelt bekezdésekhez, melynek sorai beljebb kezdődnek.
A <blockquote> elem, egy másik forrásból idézett szakaszt határoz meg. A böngészők általában <blockquote> elemmel azonosítják az idézeteket. A HTML 4.01-ben a <blockquote> elem hosszú idézetet határoz meg. A HTML5-ben a <blockquote> elem egy másik forrásból idézett szakaszt határoz meg. Idézhetünk: Könyvekből, újságcikkből, másik weboldalról, filmekről, stb. A cite után határozzuk meg, az idézet származási helyét, címét. A cite, valójában a címhivatkozások kiemelésére szolgál. Példa: (Egy másik forrásból idézett szakasz:) <blockquote cite="http://www.mese.valami/mondoka.html"> Aki nem lép egyszerre <br /> Nem kap rétest estére. </blockquote>Eredmény: (Szövegsorok, beljebb kezdődnek.) Aki nem lép egyszerre |
||||||||||||
<body> | Kijelöli azon területet, melynek tartalma a böngészőben megjelenhet.
A <body> elem határozza meg, a dokumentum testét. A <body> elem tartalmazza a HTML dokumentum összes tartalmát: Például: Szöveget, hivatkozásokat, képeket, táblázatokat, listákat stb. A <body> elem összes elrendezési attribútuma, eltávolításra került a HTML5-ben, elrendezéshez használja az elem / id / class azonosítást, és a CSS meghatározást. <!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> </head> <body> Dokumentum összes tartalma. </body> </html> |
||||||||||||
<br> <br /> |
Szövegsor lezáró. (Sortörés.) Egyetlen sortörést ad meg.
A <br> elem üres tag, ami azt jelenti, hogy: HTML-ben a <br> elemnek nincs végcímkéje. XHTML-ben a <br> elemet megfelelően le kell zárni, például: <br />. Hosszabb, szövegsorok, címek vagy versek írásához. Segítségével sortöréseket adhat meg, de nem különíti el, a bekezdéseket. Példa: <p>HTML szöveg.<br>Itt egy szöveg,<br>itt egy szöveg.</p> <p>XHTML szöveg.<br />Itt egy szöveg,<br />itt egy szöveg.</p>Eredmény HTML szöveg. XHTML szöveg. |
||||||||||||
<button> | Kijelöl egy kattintásí területet, általunk megadott szöveggel. |
||||||||||||
<canvas> | Kijelöli az egyedi rajzok területét. Új a HTML5-ben.
Csak grafikus terület, és scriptet kell használni a rajzoláshoz.(Általában JavaScriptet.) Rajzolhatunk: Vonalat, derékszöget, háromszöget, tetszőleges sokszöget, kört, oválist, és szöveget is elhelyezhetünk. A <canvas>(vászon) elemein belüli tartalom, olyan böngészőkben jelennek meg, melyek nem támogatják a <canvas> lehetőséget. Példa: (Rajzoljunk egy vörös négyzetet, a <canvas> területén.) <canvas id="negyzet"> <p>Ön böngészője, nem támogatja a canvas elemet!</p></canvas> <script> var id = document.getElementById("negyzet"); var rajz = id.getContext("2d"); rajz.fillStyle = "#FF0000"; rajz.fillRect(0, 0, 80, 80); </script>Eredmény |
||||||||||||
<caption> | Kijelöli a táblázat elnevezését, nevét. |
||||||||||||
<center> | Kijelölt területet és tartalmát, középre igazítja.
A <center> elemet, nem támogatja a HTML5. Használja helyette a CSS meghatározást. Példa: <p>Normál szöveg.<br>Itt egy szöveg,<br>itt egy szöveg.</p> <center><p>Szöveg középre.<br />Itt egy szöveg,<br />itt egy szöveg.</p></center>Eredmény Normál szöveg. Szöveg középre. |
||||||||||||
<cite> | Referencia anyagokból történő idézetekhez, és címhivatkozásokhoz.
A <cite> elem, meghatározza a mű címét (pl. Könyv, dal, film, TV-műsor, festmény, szobor stb.). A kezdő <cite > címke és a záró </cite > címke közé írt szavak, dőlt betűvel jelennek meg. Megjegyzés: A személy neve, nem a mű címe, elkülönítésükre alkalmazzuk a <cite> elemet. Jelöljük meg, a mű vagy munka címét, a <cite> elem segítségével: Példa: <p><cite> Anyám tyúkja </cite>: Vác, Petőfi Sándor 1848. február.</p>Eredmény Anyám tyúkja : Vác, Petőfi Sándor 1848. február. |
||||||||||||
<code> | Szöveges programkód formázása, egy dokumentumban:
A <code> elem, kifejezés tag. Meghatároz egy darab számítógépes kódot. Ez a címke nem elavult, de lehetőség van CSS-vel, gazdagabb hatás elérésére. Vagy ezekkel: <em> <strong> <samp> <kbd> <var> stb. elemekkel. Példa: Programkód megjelenítése felhasználó számára. <code>for (i=1; i<20; i++;)</code>Eredmény for(i=1; i<20; i++;)
|
||||||||||||
<col> | Kijelöli a táblázat oszlopait.
A <col> elem, a <colgroup> elem területén, a táblázat oszlopainak tulajdonságait határozza meg . A <col> elem, hasznos a stílusok egész oszlopokra történő alkalmazásakor, az egyes cellák stílusainak megismétlése helyett, minden sorhoz. Minden oszlophoz tartozhat, egy col elem. Egymás melletti oszlopoknál, egy col elem a span meghatározással, több oszlopra is, vonatkozhat. A col stílusait, felülírják a thead tbody tfoot meghatározások. A HTML 4.01 legtöbb attribútumát, nem támogatja a HTML5. Három oszlop háttérszínének beállítása, a <col> elemekkel: Példa: <table> <caption>Tábla neve.</caption> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>1. ISBN</th> <th>2. Címe</th> <th>3. Értéke</th> </tr> <tr> <td>1. 666669</td> <td>2. Kezdőknek HTML</td> <td>3. 2325 Ft</td> </tr> </table>Eredmény
|
||||||||||||
<colgroup> | Kijelöli a táblázathoz tartozó <col> elemeket.
A <colgroup> elem, a táblázatban egy vagy több oszlopot határoz meg, a formázáshoz. Hasznos a stílusok teljes oszlopokra történő alkalmazásához, az egyes cellák stílusainak megismétlése helyett, minden sorhoz. A <colgroup> elemnek, egy <table> elem gyermekének kell lennie, <caption> elem után, és bármely <thead>, <tbody>, <tfoot> és <tr> elem előtt. A HTML 4.01 legtöbb attribútumát, nem támogatja a HTML5. Egy <colgroup> oszlopon lévő különböző tulajdonságok meghatározásához használja a <col> elemet a <colgroup> elemmel határolt területen. Példa: <table> <caption>Tábla neve.</caption> <colgroup> <col span="2" style="background-color:lime"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Címe</th> <th>Értéke</th> </tr> <tr> <td>666669</td> <td>Kezdőknek HTML</td> <td>2325 Ft</td> </tr> </table>Eredmény
|
||||||||||||
<data> | Adott tartalmat, gépi olvasható fordítással köti össze.
Géppel olvasható értéket biztosít, az adatfeldolgozók számára, valamint egy ember által olvasható adatot a böngészőben történő megjelenítéshez. Ha a tartalom idővel vagy dátummal kapcsolatos, akkor, inkább a <time> elemet kell használni. A következő példa, termékneveket jeleníti meg, és minden egyes nevet, egy termékszámhoz, azonosítóhoz társít, azEredmény:
|
||||||||||||
<datalist> | Egy <input> elem, előre meghatározott lehetőségeinek, listáját adja meg.
A <datalist> elemet, egy "automatikus kiegészítésre" funkció biztosítására használják, az <input> elemeknél. Felhasználók az előre meghatározott lehetőségek, legördülő listáját fogják látni, mivel ezek, előre bevitt adatok. Felhasználó az előre beírt adatoktól eltérő adatot is, beírhat. Használja a <input> elem lista attribútumát, hogy egy <datalist> elemhez kösse. Böngészői megjegyzések: Némelyeknél az input ablakba kattintást követően, még egyszer kattintani kell, a lista megjelenéséhez. Némelyeknél az input ablakba történő mozgáskor, megjelenik egy lefelé mutató nyíl, és erre kell kattintani, a lista megjelenéséhez. Egy <input> elem előre meghatározott értékekkel, egy <datalist> elemben: Példa: Kedvenc böngésződ: <input list="bongeszok"> <datalist id="bongeszok"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>Eredmény: (Infóhoz: Kurzort mozgasd az ablakba, vagy kattints kétszer az ablakba.) Kedvenc böngésződ: |
||||||||||||
<dd> | Kijelöli a meghatározáslisták, tartalmi területét.
A <dd> elem, egy kifejezés / név leírására szolgál, a leírási listában. A <dd> elemet, <dl> és <dt> meghatározásával együtt használják. Belsejében elhelyezhetünk bekezdéseket, sortöréseket, képeket, linkeket, listákat stb. A HTML 4.01-ben a <dd> elemet, a definíciós listában szereplő elemek leírására használták. A HTML5-ben a <dd> elem egy kifejezés / név leírására szolgál, a leírás listájában. Leírások listája, kifejezésekkel és leírással: Példa: <dl> <dt>Kávé</dt> <dd>Fekete forró ital.</dd> <dt>Tej</dt> <dd>Fehér hideg ital.</dd> </dl>Eredmény:
|
||||||||||||
<del> | Áthúzza az elavult, módosult tartalmat.(Ajánlott az ins elemmel együtt alkalmazni.)
Dokumentumból törölt szöveget határozza meg. Lásd az <ins> elemet is, a beillesztett új szöveg jelöléséhez. Például a <del> és az <ins> segítségével jelölje meg, a dokumentum frissítéseit és módosításait. A böngészők általában a törölt módosult szöveget áthúzzák, és aláhúzzák az új beillesztett szöveget. Törölt részből álló szöveg, és egy új beillesztett rész: Példa: <p>Kedvenc színem a <del>kék</del> <ins>piros</ins>!</p>Eredmény: Kedvenc színem a |
||||||||||||
<details> | További részleteket határoz meg, melyeket felhasználó megtekinthet vagy elrejthet. Új a HTML5-ben.
A <details> elem, további részleteket határoz meg, melyeket a felhasználó igény szerint, megtekinthet vagy elrejthet. Használható olyan interaktív widget létrehozására, amelyet a felhasználó megnyithat és bezárhat. Bármilyen tartalomnál, el lehet helyezni a <details> elemet. Tartalma csak akkor jelenhet meg, ha a nyitott attribútum nincs beállítva. A <summary> elem segítségével, részleteket adhat meg a <details> elemhez. A címhez tartozó tartalom, megtekinthető / elrejthető. Megjegyzés: 2018, nem minden böngésző támogatja.Nem támogató böngészőknél, megjelenik a teljes tartalom, és nincs elrejt/felfed lehetőség.A <details> elem használata: Példa: <details> <summary>Találmányi jog 2015-2030.</summary> <p> - a Hold Izzó Zrt által. Minden jog fenntartva.</p> <p>Az energiatakarékos holdizzó technológiája és gyártása, a Hold Izzó Zrt cég tulajdonát képezik.</p> </details>Eredmény: Kattints a baloldali nyílra! ( Megnyitásra / bezárásra. Ha böngészője támogatja.) Találmányi jog 2015-2030. - a Hold Izzó Zrt által. Minden jog fenntartva. |
||||||||||||
<dfn> | Kifejezés elsődleges vagy meghatározó példánya.
A <dfn> elem a HTML meghatározó példányát jelöli. A definiáló példány, gyakran egy kifejezés első használata egy dokumentumban. A <dfn> elem legközelebbi szülőjének tartalmaznia kell a <dfn> kifejezés definícióját / magyarázatát is. A <dfn> elemen belüli kifejezés, a következő lehet. Példák: Jelölje meg, a kifejezés meghatározó példányát. 1. A <dfn> elem tartalma, title attribútum nélkül. <p><dfn>HTML</dfn> a szabványos jelölőnyelv, weboldalak létrehozásához.</p> 2. A <dfn> title attribútuma: <p><dfn title="HyperText Markup Language">HTML</dfn> a szabványos jelölőnyelv, weboldalak létrehozásához.</p> 3. A <dfn> elemen belüli, <abbr> title attribútuma: <p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> a szabványos jelölőnyelv, Eredmények: (Mozgasd az egeret, a HTML szövegekre, és várj.) 1. HTML a szabványos jelölőnyelv, weboldalak létrehozásához. <!-- Nincs kifejezés definíció. --> 2. HTML a szabványos jelölőnyelv, weboldalak létrehozásához. <!-- Van kifejezés definíció. --> 3. HTML a szabványos jelölőnyelv, weboldalak létrehozásához. <!-- Van kifejezés definíció. --> "Id" azonosítót is hozzáadhatunk, a <dfn> elemhez. Amikor egy kifejezést használunk, az <a> elemmel is hivatkozhatunk a definícióra: |
||||||||||||
<dialog> | Megadja a párbeszédpanelt vagy ablakot. Új a HTML5-ben.
A <dialog> párbeszédablak, nem támogatott az Edge / Internet Explorer programban. A <dialog>(párbeszédpanel) elem, meghatároz egy párbeszédpanelt vagy ablakot. Könnyűvé teszi, a felbukkanó párbeszédpanelek és modulok létrehozását, egy weboldalon. A dialog open megadja, hogy a párbeszédelem aktív, és a felhasználó kölcsönhatásba léphet vele Támogatja az eseménytulajdonságok attribútumait, és a globális attribútumokat is, a HTML-ben. A <dialog> elem használata: Példa. <table> <tr> <th>Január <dialog open> Január az év első hónapja,<br /> és mindig 31 napot tartalmaz.</dialog></th> <th>Február</th> <th>Marcius <dialog open> Március a harmadik hónap,<br />Augustus császár idején, az év első hónapja.</dialog></th> </tr> <tr> <td>31</td> <td>28</td> <td>31</td> </tr> </table> Eredmény: (Ha böngészője támogatja a dalóg elemet, akkor, párbeszédablak jelenik meg.)
Eredmény: (Ha böngészője nem támogatja a dalóg elemet, régebbi böngészőkben, és Edge / Internet Explorer programban, párbeszédablak nem jelenik meg
|
||||||||||||
<dir> | A könyvtári címek felsorolására szolgál. Nem támogatott HTML5-ben.
Használja helyette az <ul> elemet vagy a CSS fájlt. A könyvtárlista: Példa: <dir> <li>html</li> <li>xhtml</li> <li>css</li> </dir>Eredmény: |
||||||||||||
<div> | Kijelöl egy adott területet, tartalmával együtt.
A <div> elem, egy HTML-dokumentumban lévő szakasz vagy szakasz meghatározását határozza meg. Gyakran más HTML-elemek tárolójaként használják, hogy CSS formátumban készítsék el őket, vagy bizonyos JavaScript feladatok végrehajtásának megjelenítési területére. A <div> elemet gyakran használják weboldal elrendezéséhez, a CSS-vel együtt. Alapértelmezés szerint a böngészők mindig sorszünetet helyeznek el, a <div> elem előtt és után. Ez azonban megváltoztatható a CSS-vel. HTML5-ben nem támogatott, az illesztési attribútum. Dokumentum egy része, mely világoskék háttérszínnel fog, megjelenni: Példa: <style>.divelem{padding:5px; background-color: lightblue;}</style> <div class="divelem"> <h3>Ez egy címsor</h3> <p>Ez egy paragrafus, azaz, bekezdés.</p> </div>Eredmény: Ez egy címsorEz egy paragrafus, azaz, bekezdés. |
||||||||||||
<dl> | Kijelöli a meghatározáslista területét.
A <dl> elem, meghatározza a leírási listát. A <dl> elemet, a <dt> és <dd> kifejezés elemekkel együtt használjuk. A leírások listája, kifejezésekkel és leírással: Példa: <dl> <dt>Kávé</dt> <dd>Fekete forró ital.</dd> <dt>Tej</dt> <dd>Fehér hideg ital.</dd> </dl>Eredmény:
|
||||||||||||
<dt> | Kijelöli a meghatározáslisták címsorait.
A <dt> elem, meghatározza a kifejezést / nevet a leíráslistában. A <dt> elemet, a <dl> (meghatározza a leírás listáját) és a <dd> kifejezéssel együtt használjuk (minden kifejezést / nevet ír le). A HTML 4.01-ben <dt> elem, definiál egy elemet a definíciós listában. HTML5-ben a <dt> elem, meghatározza a kifejezést / nevet a leíráslistában. A leírások listája, kifejezésekkel és leírással: Példa: <dl> <dt>Kávé</dt> <dd>Fekete forró ital.</dd> <dt>Tej</dt> <dd>Fehér hideg ital.</dd> </dl>Eredmény:
|
||||||||||||
<em> | Kihangsúlyozott dőlt szöveg.
Az <em> elem, egy kifejezéscímke. (Hasznos a képernyőfelolvasok számára.) Kihangsúlyozza a dőlt szöveget, ellentétben az <i> elemmel, mely csak formai megjelenést ad. Lehetőség van, CSS-vel gazdagabb hatás elérésére. Szöveg formázása egy dokumentumban: Példa: <p>Normál szöveg, és <em>kihangsúlyozott dőlt szöveg.</em></p>Eredmény: Normál szöveg, és kihangsúlyozott dőlt szöveg. |
||||||||||||
<embed> | Egy külső alkalmazást vagy interaktív tartalmat (plug-in) tartalmaz.
Az <embed> elem, újból bevezetésre került, a HTML5-ben. Sok web böngésző, hosszú ideig támogatta az <embed> címkét. Az <embed> elem, azonban nem tartozott a HTML 4 specifikációhoz. Az <embed> elem, új a HTML5-ben, és érvényesíteni fogja a HTML5-s oldalon. Ha azonban HTML 4 oldalon használja, akkor az oldal nem érvényes. Az <embed> tartalom és médiák némely típusa, nem minden böngészőben támogatott. A modern böngészők jó támogatásával, audio és videó elem nagyon gyorsan elterjedt, a HTML5 bevezetésével, és itt a YouTube audio és videó lehetőség is. HTML5 támogatott bővítményei a beágyazott videó elemhez: .swf - által készített Macromedia Flash .wmv - Microsoft Windows Media Video .mov - Quick Time Movie, az Applehez tartozik .mpeg - a Moving Pictures Expert Group által létrehozott. Leggyakrabban használt az .mpeg és .swf a kompakt formátum miatt. Megjegyzés: Az Adobe 2020 végén megszünteti a Flash támogatását. Csak megbízható webhelyeken engedélyezze a Flash futtatását. Előfordulhat, hogy egyes webhelyek az Adobe Flash Player használatával kárt okoznak a számítógépében. <embed> példa: Flash animáció beágyazására: <embed src="flashanimate.swf"> <embed> példa: mp4 videó beágyazására: <embed src="mosas.mp4" width="300" height="400"/> Megjegyzés: Szintén videofájlt lehet csatolni egy hivatkozással. Ez, teljes képernyős megjelenítési formátumot ad. Visszatérni a kiindulási oldalhoz, böngészőablak vissza nyílra kattintásával történik. Megjegyzés: Itt is előfordulhat, hogy némely böngészőnél engedélyezni kell a Flash, Quich Time vagy DivX Movies stb. futtatását. Példa: <a href="bemutato.mp4" title="Videó betöltése.">Film neve, mosás.</a> Eredményhez, kattints e linkre: Film neve, mosás. Megjegyzés: <embed> Otthoni teszteléséhez, telepíteni kell az APACHE szervert, és annak htdocs mappájából! Böngészövel a localhost-ról kell belépni, mert normál belépésnél nem minden böngésző játsza le! |
||||||||||||
<fieldset> | Kijelöli az űrlap mezőcsoportjainak területét.
A <fieldset> elem, a kapcsolódó űrlapelemek egy formában történő csoportosítására szolgál. Kapcsolódó elemeket körülvevő keretet húz. <fieldset> elem feliratát, a <legend> elem határozza meg. Csoporthoz kapcsolódó elemek formában: Példa: <form> <fieldset> <legend>Fontos adatok. Personalia:</legend> Neve: <input type="text"><br> Email: <input type="text"><br> Születési dátum: <input type="text"> </fieldset> </form>Eredmény: HTML5 új attribútumokat adott, a <fieldset> számára. |
||||||||||||
<figcaption> | Képleírást definiál. Új a HTML5-ben. |
||||||||||||
<figure> | Önálló tartalom, grafika, meghatározása. Új a HTML5-ben.
A <figure> elem, önálló tartalmat határoz meg, például illusztrációkat, diagramokat, fotókat, kódlistákat stb. Bár az <figure> elem tartalma a főáramhoz kapcsolódik, pozíciója független a fő áramlástól, és ha eltávolításra kerül, akkor az, nem befolyásolja a dokumentum áramlását. <figure> elemhez tartozhat egy <figcaption> elem, melyet képinformáció hozzáadására használnak. Dokumentumban <figure> elem használatával, jelölje ki a fotót vagy fotókat. Példa: <figure> <img src="Fotó-URL.jpg" alt="Villany" width="75" height="75"> </figure>Eredmény: |
||||||||||||
<font> | Meghatározza a betűtípus családot, betűméretet, szöveg színét. Nem támogatott HTML5-ben.
Szöveg formázásához, használjuk helyette a CSS stílus meghatározást. Példák: <font size="3" color="red">Ez egy rövid szöveg!</font> <br /> <font size="2" color="blue">Ez egy rövid szöveg!</font> <br /> <font face="verdana" color="green">Ez egy rövid szöveg!</font> Eredmények: Ez egy rövid szöveg! Ez egy rövid szöveg! Ez egy rövid szöveg! |
||||||||||||
<footer> | Dokumentum vagy szekció lenyomatait határozza meg. Új a HTML5-ben. |
||||||||||||
<form> | Kijelöli az űrlap területét.
A <form> elemet, HTML-űrlap létrehozásához használhatjuk. Elsősorban felhasználói adatbevitelhez. Ekkor a submit gombot alkalmazzuk továbbításra, a szerveren lévő action után meghatározott, feldolgozófájlhoz. Használhatjuk saját részre is. (Matematika, mértan, fizika, kémia, stb. feladatokra.) Ekkor az action meghatározás nem kell, és a button gombot alkalmazzuk továbbításra, a számítógépünkön lévő JavaScript feldolgozófájlhoz. A "name" és "id" form azonosítók, lehetőleg egyformák legyenek. Ha több form űrlapunk is van a dokumentumban, akkor minden form elemnek, más és más name és id azonosítója legyen. A method (Továbbítás) értéke lehet: GET vagy POST; Megjegyzés: XHTML-ben a "name" név-attribútum elavult. Használja a globális "id" attribútumot. Ha a számítógépünkre telepítettük az APACHE szervert és PHP motort, akkor ugyanúgy tesztelhetjük, mint amikor külső szerverre küldenénk feldolgozásra a form adatokat. Alkalmazhatjuk a submit gombot és action útvonalmeghatározást is. Az <form> elem tartalmazhat egy vagy több alábbi elemet: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> Példa: HTML űrlap kettő beviteli mezővel és egy beküldési submit gombbal: <form name="urlap01" id="urlap01" action="/feldolgozo.php" method="get"> Utóneve: <input type="text" name="unev" id="unev"><br> Vezetékneve: <input type="text" name="vnev" id="vnev"><br> <input type="submit" value="Submit"> </form> Eredmény: |
||||||||||||
<frame> | Meghatározza a <frameset> keretek, tényleges tartalmát. Nem támogatja HTML5
A <frame> elem, egy adott ablakot (frame) határoz meg, egy <frameset> elemen belül. Olyan oldalnál alkalmazható, melyek nem div területekre, hanem keretes területekre van felosztva. Minden <frameset> <frame> különböző attribútumokkal rendelkezhet, mint például a területek, a görgetés, a méretezés képessége stb. Ha kereteket tartalmazó lapot szeretne érvényesíteni, győződjön meg róla, hogy a <! DOCTYPE> beállítása "HTML Frameset DTD" vagy "XHTML Frameset DTD". A HTML-ben a <frame> címke nem tartalmaz végcímkét. Az XHTML-ben a <frame> címkét megfelelően le kell zárni. Egy egyszerű három keretes oldal: Példa: <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>Eredményt, lásd a következő <frameset> elemnél. |
||||||||||||
<frameset> | Weblapot különálló területekre, azaz részekre oszthatjuk fel. Nem támogatja a HTML5
Kerethatároló vonalak, egér segítségével elmozdíthatók. Olyan oldalnál alkalmazható, melyek nem div területekre, hanem keretes területekre van felosztva. A <frameset> elem, frame-t (keretet) definiál. A <frameset> elem egy vagy több <frame> elemet tartalmaz. Minden <frame> elem, külön dokumentumot, fotót vagy filmet tartalmazhat. A <frameset> elem meghatározza, hogy hány oszlop vagy sor van a keretrendszerben, és hogy mennyi százalékos vagy pixelnyi helyet foglalhat el, mindegyike. Ha kereteket tartalmazó lapot szeretne érvényesíteni, győződjön meg róla, hogy a <! DOCTYPE> beállítása: "HTML Frameset DTD" vagy "XHTML Frameset DTD" legyen.
Példa, frameset elhelyezésére.
<html>
<head>
<title>Kettő vízszintes szakasz.</title>
</head>
<frameset rows="25%,75%">
<frame src="#.html" />
<frame src="#.html" />
</frameset>
<body> <!-- Keretkészletes oldal lezárása következik. -->
<noframes>
</noframes>
</body>
</html>>
Megírási minták, és azok megjelenési formátumának szemléltetése.
|
||||||||||||
<h1> - <h6> | Címsor elemek.
Oldalak, témakörök címsor szövege. Eltérő betűmérettel és margin top/bottom értékekkel jelennek meg. Példa: <h1>h1-es címsor szöveg</h1> <h2>h2-es címsor szöveg</h2> <h3>h3-as címsor szöveg</h3> <h4>h4-es címsor szöveg</h4> <h5>h5-ös címsor szöveg</h5> <h6>h6-os címsor szöveg</h6> Eredmény: h1-es címsor szövegh2-es címsor szövegh3-as címsor szövegh4-es címsor szövegh5-ös címsor szövegh6-os címsor szöveg
A CSS fájlban alapértelmezett értéktől eltérő, egyedi stílusokat határozhatunk meg.
|
||||||||||||
<head> | Kijelöli weblapot azonosító és formázó elemek területét.
A <head> elem, egy tároló az összes fej elem számára. Tartalmazhat címet a dokumentumhoz, szkriptekhez, stílusokhoz, metaadatokhoz és még sok minden mást. A következő elemek kerülhetnek, a <head> elem területére:A HTML 4.01-ben a <head> elemre, szükség van. HTML5-ben a <head> elem elhagyható, de ajánlott. |
||||||||||||
<header> | Dokumentum vagy szakasz fejlécét határozza meg. Új a HTML5-ben.
A <header>(fejléc) elem, kijelöli adott területhez tartozó bevezető tartalmat, vagy a navigációs hivatkozások készletének területéhez. Szövegfolyamot nem befolyásolja, de fontos a felderítő robotok számára. A <header> elem jellemzői: - egy vagy több fejléc elem (<h1> - <h6>) - logó vagy ikon - szerzői információk Egy dokumentumban, több <header>(fejléc) elem is szerepelhet.Megjegyzés: A <header>(fejléc) címkét nem lehet <footer>, <addres> vagy más <header> elemen belül elhelyezni. Egy <article> cikkhez tartozó, <header> fejléc elem: Példa: <article> <header> <h1>Ez a legfontosabb címsor</h1> <h3>Ez is, címsor</h3> <p>További információ itt.</p> </header> <p>Cikkhez tartozó, további leírás .......</p> </article> Eredmény: Ez a legfontosabb címsorEz is, címsorTovábbi információ itt. Cikkhez tartozó, további leírás ..... |
||||||||||||
<hr> | Vizuális témaelválasztó.
A <hr> elem, tematikus szünetet határoz meg, egy HTML oldalon (pl. Egy téma eltolása). A <hr> elemet, tartalom elkülönnítésre vagy változás meghatározására használják, HTML oldalon. A HTML5-ben a <hr> elem tematikus szünetet határoz meg. HTML 4.01-ben a <hr> elem vízszintes szabályt képvisel. A <hr> elem, azonban továbbra is vízszintes, azaz, vizuális szabályként jelenhet meg, a böngészőkben. Az összes közvetlen elrendezési attribútumát eltávolították, a HTML5-ben. Használja helyette a CSS-fájlt. Nem kötelező, de CSS-fájlban meghatározható: szélessége, magassága, színe, pozíciója. HTML-ben a <hr> elem, nem tartalmaz végcímkét. XHTML-ben a <hr> elemet, megfelelően le kell zárni, például: <hr /> vagy <hr> </hr> Tartalomban, használja a <hr> címkét, a tematikus változások meghatározásához, elválasztásához: Példa: <style>.hrelem{margin-left: 5px; width:80%; border: 2px solid red;} </style> <h1>HTML</h1> <p>HTML, a weboldalak leírása .....</p> <hr class="hrelem" /> <h1>CSS</h1> <p>CSS meghatározza, a HTML elemek megjelenítésének módját.</p>Eredmény: HTMLHTML, a weboldalak leírása ..... CSSCSS meghatározza, a HTML elemek megjelenítésének módját. |
||||||||||||
<html> | Megmondja a böngészőnek, hogy ez, egy HTML-dokumentum.
A <html> elem, a HTML dokumentum gyökere. Az összes többi HTML elem tárolója, kivéve a <! DOCTYPE> címkét. |
||||||||||||
<i> | Dőlt betűk.
Nem kihangsúlyozott, csak formai dőlt megjelenést produkál.
Példa: <p>Normál szöveg, <i>dől szöveg.</i></p> Eredmény: Normál szöveg, dől szöveg. |
||||||||||||
<iframe> | Egy HTML oldal beágyazása, egy másik HTML oldalról.
Az <iframe> elem egy inline keretrendszert határoz meg. Az <iframe> keret segítségével, beágyazható egy másik dokumentum, a jelenlegi HTML dokumentumba. Ha olyan böngészőket szeretne kezelni, amelyek nem támogatják az <iframe> szöveget, nyissa meg a szöveget, az <iframe> elem és a záró </iframe> elem között. A CSS használatával stílusosítsa az <iframe> ablakot,(akár a görgetősávokat is). A HTML5-ben, néhány új attribútumot hoztak létre, és több HTML 4.01 attribútumot eltávolítottak. XHTML esetén a name név-attribútum elavult, használja helyette a globális "id" attribútumot. Ha nem adunk meg ablakméretet, akkor, körülbelül egy 200x100 px méretű ablakban jelenik meg, a beillesztett oldal tartalma. Ha a beillesztett oldal tartalma szélesebb és magasabb mint az iframe ablak, akkor, görgetősávok jelennek meg. Az inline keret, az alábbiak szerint van megjelölve, ablak méretei nélkül: <iframe src="beillesztendő-fájlnév.html"></iframe> Eredmény: (Szélességi méretben elfér a beillesztett oldal tartalma, ezért az alsó görgetősáv, eltünik.) |
||||||||||||
<img> | Képet, fotót, jelenít meg.
Az <img> elem, két szükséges attribútummal rendelkezik: - src: Megadja a fotó elérési úrvonalát, annak kiterjesztésével. - alt: Megadja a képre jellemző leírást. Képek technikailag nem lesznek beillesztve egy HTML oldalba, a képek HTML oldalakra vannak kapcsolva. Az <img> elem, létrehoz egy birtokterületet, a hivatkozott képhez. A kép, egy másik dokumentumhoz való csatolásához, helyezze az <img> címkét, az <a> címkék közé. Következő attribútumok: align, border, hspace és vspace, nem támogatott a HTML5-ben. HTML-ben az <img> elem, nem tartalmaz végcímkét. XHTML-ben az <img> elemet, megfelelően le kell zárni, <img />. Kép beillesztése: (URL = Kép elérési útvonala.) Példa: <img src="Fotó-URL.jpg" alt="Villany" width="75" height="75"/>Eredmény: |
||||||||||||
<input> | Űrlapnál, beviteli mezőt jelenít meg.
A <input>(bemenet) elem, egy beviteli mezőt határoz meg, ahol a felhasználó megadhat adatokat. <form> elemen belül használatosak olyan bemeneti vezérlők deklarálására, melyek lehetővé teszik a felhasználók számára, az adatok bevitelét. A beviteli mező, a típus attribútumától függően, sokféleképpen változhat. Ha az <input> elem üres,(value értéke nincs.) akkor, csak attribútumokat tartalmaz. Az "align" attribútum, nem támogatott a HTML5-ben. - HTML-ben, nem tartalmaz végcímkét. - XHTML-ben, megfelelően le kell zárni, mint ez: <input />. Példa: Három beviteli <input> mezővel, kettő szövegmező, és egy submit(küldő) gomb: <form action="/feldolgozo-fajl.php"> Utó neve: <input type="text" name="utonev" id="utonev"/><br> Vezeték neve: <input type="text" name="vezeteknev" id="vezeteknev"/><br> <input type="submit" value="Submit"/> </form>Eredmény: |
||||||||||||
<ins> | Beágyazott új szöveget, aláhúzza.
A <ins> elem egy dokumentumba illesztett, új szöveget határoz meg. Lásd a <del> elemet, a törölt, elavult szöveg jelöléséhez. A böngészők általában vonallal áthúzzák a törlendő szöveget, és aláhúzzák a beillesztett új szöveget. Például az <ins>, együtt a <del> elemmel, jelölje meg a dokumentum frissítéseit és módosításait. Példa: Törölt részből álló szöveg, és egy új, beillesztett szöveg: <p>Kedvenc színem a <del>kék</del> <ins>piros</ins>!</p>Eredmény: Kedvenc színem a |
||||||||||||
<kbd> | Billentyűzetről beviendő utasítások, kombinációk megadása.
A <kbd> elem, egy kifejezéscímke, melynek szemléltető szerepe van. Meghatározza, a billentyűzet bemenetet. Ez a elem nem elavult, de lehetőség van a CSS-vel, gazdagabb hatás elérésére. Példa: Beviendő kombináció billentyűzetről. Másolás = <kbd> CTR+C </kbd> <br /> Beillesztés = <kbd> CTR+V </kbd>Eredmény: Másolás = CTR+C Beillesztés = CTR+V |
||||||||||||
<label> | Kijelöli űrlap bevitelimezők címét.
A <label> elem, egy <input> elem címkéjét határozza meg. Nem jelent különlegességet minden felhasználó számára. Egérhasználók számára használhatósági javulást eredményez, mert ha a felhasználó a <label> elemen lévő szövegre kattint, átkapcsolja a vezérlőt. (Kattinthat a szövegre vagy a rádió gombra is.) A <label> elem attribútumának meg kell egyeznie a kapcsolódó elem "id" attribútumával, hogy összerendezze őket. Egy cím meghatározást egy elemhez lehet kötni, vagy a "for" attribútum használatával, vagy az elem elhelyezésével, a <label> elembe. Három rádiógomb címkével: Példa: <form action="/feldolgozo_fajl.php"> <b>Cipők:</b><br /> <label for="ferfi">Férfi</label> <input type="radio" name="neme" id="ferfi" value="férfi"><br> <label for="noi">Női</label> <input type="radio" name="neme" id="noi" value="nöi"><br> <label for="mas">Más</label> <input type="radio" name="neme" id="mas" value="más"><br><br> <input type="submit" value="Submit"> </form>Eredmény: |
||||||||||||
<legend> | Kijelöli az űrlap mezőcsoportjainak elnevezését. (Felíratát, címsorát.)
A <legend> elem, meghatározza a <fieldset> elem feliratát. Az "align" attribútumok, nem támogatottak HTML5-ben. Példa: Csoporthoz kapcsolódó elemek, felíratozott formában. <form> <fieldset> <legend>Fontos adatok. Personalia:</legend> Neve: <input type="text" size="30"><br> Email: <input type="text" size="30"><br> Születési dátum: <input type="text" size="10"> </fieldset> </form>Eredmény: |
||||||||||||
<li> | Lista elem
A <li> elem, meghatározza a listaelemet. Használjuk, rendezett listákban ( <ol> ), rendezetlen listákban ( <ul> ) és menülistákban ( <dd> ). A "type" attribútum nem támogatott, a HTML5-ben. A "value" attribútum elavult, a HTML 4.01-ben, de a HTML5-ben támogatott. Egy rendezett (<ol>) és egy rendezetlen (<ul>) HTML lista:
|
||||||||||||
<link> | Meghatározza a dokumentum és külső erőforrás közötti kapcsolatot.
A <link> elemet használjuk, külső stíluslapokhoz való kapcsolódásra. Meghatározza a dokumentum és a külső erőforrás közötti kapcsolatot. Ez az elem, csak a <head> fejrészben alkalmazható, de megjelenhet több alkalommal. A <link> elem üres elem, akkor csak attribútumokat tartalmaz. Néhány HTML 4.01 attribútum, nem támogatott HTML5-ben. A "sizes" attribútum, új a HTML5-ben. HTML-ben a <link> elem, nem tartalmaz végcímkét. XHTML-ben a <link> elem, megfelelően lezárható. Példa: Külső stíluslapra mutató link. <head> <link rel="stylesheet" type="text/css" href="stílusfájlnév.css"/> </head> |
||||||||||||
<main> | Meghatározza a dokumentum fő tartalmát. Új a HTML5-ben.
A <main> elem, meghatározza a dokumentum fő tartalmát, melynek egyedinek kell lennie, a dokumentumhan. Fontos szerepe van, a keresőrobotok számára. Nem tartalmazhat olyan tartalmat, mely megismétlődik a dokumentumban, mint például: Oldalsávok, navigációs hivatkozások, szerzői jogi információk, webhely-logók és keresési formák. A dokumentumban nem lehet több, mint egy <main> elem. A <main> elem nem lehet egy <article>, <out of side>, <footer>, <header> vagy <nav> elem leszármazottja. Példa: <main> <h1>Web böngészők</h1> <p>A leggyakrabban használt böngészők: Google Chrome, Firefox, and Internet Explorer.</p> <article> <h1>Google Chrome</h1> <p>A Google Chrome egy ingyenes, nyílt forráskódú böngésző, melyet a Google fejlesztett ki, 2008-ban.</p> </article> <article> <h1>Internet Explorer</h1> <p>Az Internet Explorer egy ingyenes webböngésző a Microsofttól, 1995-ben.</p> </article> <article> <h1>Mozilla Firefox</h1> <p>A Firefox egy szabad, nyílt forrású web böngésző a Mozilla-ból, mely 2004-ben jelent meg.</p> </article> </main>Eredmény: Web böngészőkA leggyakrabban használt böngészők: Google Chrome, Firefox, és Internet Explorer. Google ChromeA Google Chrome egy ingyenes, nyílt forráskódú böngésző, melyet a Google fejlesztett ki, 2008-ban. Internet ExplorerAz Internet Explorer egy ingyenes webböngésző a Microsofttól, 1995-ben. Mozilla FirefoxA Firefox egy szabad, nyílt forrású web böngésző a Mozilla-ból, mely 2004-ben jelent meg. |
||||||||||||
<map> | Kliensoldali képmappát definiál, mely kattintható területekkel rendelkezik.
A <map> elem szükséges attribútuma, az img elem usemap attribútumával van összekötve, és kapcsolatot teremt a kép és kattintható területei között. A <map> elem, számos <area>(terület) elemet tartalmazhat, melyek meghatározzák a kattintható területeket rajzunkon, képen vagy térképen. - shape: Meghatározza kattintható terület alakzatát (négyszög vagy kör). - coords: Meghatározza kattintható terület pozícióját és nagyságát. - href: Meghatározza kattintáskor melyik oldalra jutunk. - alt: Szöveg, program készítőjének és a felderítő robotoknak hasznos. - title: Nem kötelező, de felhasználónak információval szolgál, mert a kijelölt kattintható terület nem jelenik meg, csak a mutató kézfej, ha felhasználó az adott terület fölé mozgatja az egeret. Példa: Kattintható területekkel rendelkező rajzlap, kép vagy térkép. <img src="alakzatok.gif" width="160" height="119" alt="Szemléltető rajz" usemap="#rajzmap"> <map name="rajzmap"> <area shape="rect" coords="0,0,60,80"" href="#.htm" alt="Kilátó" title="Kilátó! Bővebben, katt ide!"> <area shape="circle" coords="100,58,8" href="#.htm" alt="Hold" title="Hold! Bővebben, katt ide!"> <area shape="circle" coords="124,58,10" href="#.htm" alt="Mars" title="Mars! Bővebben, katt ide!"> </map>Eredmény: ( Teszteléshez, egeret mozgasd az alakzatokra.) |
||||||||||||
<mark> | Szöveg kiemelés sárga színnel. Új a HTML5-ben.
A <mark> elem, meghatározza a kijelölt szöveget, használatával kijelölhetők, a szöveg egyes részei. Támogatja a HTML attribútumokat, és globális attribútumokat is. Alapértelmezett megjelenési formája, sárga háttérszín és fekete betűk, melyet közvetlen vagy CSS-vel módosíthatunk. Példa: Jelölje ki, a szöveg egyes részeit. <p>Ne felejts el ma, <mark>tejet</mark> és <mark>kakaót</mark> vásárolni.</p>Eredmény: Ne felejts el ma, tejet és kakaót vásárolni. |
||||||||||||
<marquee> | Kijelöli mozgatandó szöveget és képet.
Kijelölt terület tartalma, reklám formátumban mozog. (Szöveg és fotó.) Mozgási irány, CSS-vel módosítható. Reklámszöveg és fotó: Példa: <marquee> <p>Mozgatandó szöveg és fotó.</p> <img src="foto.jpg" alt="Kutya" width="50" height="50" border="0"/> </marquee>Eredmény: |
||||||||||||
<meta> | A metaadatok (információk) a dokumentumhoz, mindig a <head> elem belsejébe kerülnek.
A <meta> elem, metaadatokat tartalmaz a HTML dokumentumról.
Körülbelül azt jelenti, hogy saját kategória. Például a metaadatok az adatokra vonatkozó adatok (ki hozta létre őket, mikor, milyen formátumban vannak az adatok stb.). A metaadatok nem fognak megjelenni az oldalon, de a gépek, robotok, elemezni fogják. Metaelemek általában az oldal leírását, a kulcsszavakat, a dokumentum szerzőjét, az utolsó módosított és más metaadatokat adják meg. Használhatja a böngészők (tartalom megjelenítésének vagy újratöltési oldal), a keresőmotorok (kulcsszavak) vagy más webes szolgáltatásokhoz. A HTML5 bevezette azt a módszert, mely lehetővé teszi, hogy a webes tervezők átvegyék a Viewport nézetablakot (a felhasználó weboldalának látható területét) a <meta> címke segítségével. A nézetablak a felhasználó látható webes oldala. Ez változik az eszközzel, és kisebb lesz a mobiltelefonon, mint a számítógép képernyőjén. Példa, a HTML5 karakterkészlet meghatározására: <meta charset="UTF-8"> Példa, Viewport beállítására. Példák: |
||||||||||||
<meter> | Megadja a skaláris mérést, egy ismert tartományon belül. Új a HTML5-ben.
A <meter> elem, egy aktuális értéket, skaláris mérést jelenít meg, a maximális értékből egy ismert tartományon belül . Az előrehaladási progress sávtól eltérően, mérősávot nem kell előreléptetni, ezért a <meter> elemet, nem szabad használni, az előrehaladás jelzésére. A <meter> elem, például megmutathatja a lemez tárolójában használt tárterületnél, hogy a tárhely mennyire van teli és mennyi a szabad hely. Vagy egy kémiai, vegyész kísérletnél a 100%-hoz képest, hól tart a műveleti eredmény. Példák: Használja <meter> elemet az adatok mérésére, egy adott tartományon belül(mint egy nyomtáv). <meter value="1" min="0" max="10"> 1 a 10-ből </meter> <br> <!-- 10 egységből, 1 egység. --> <meter value="2" min="0" max="10"> 2 a 10-ből </meter> <br> <!-- 10 egységből, 2 egység. --> <meter value="0.6"> 60% </meter> <!-- 0.6 * 100 = 60, azaz, 60 százalék -->Eredmények: |
||||||||||||
<nav> | Meghatározza a külső navigációs hivatkozásokat. Új a HTML5-ben. |
||||||||||||
<noframes> | Tartalék elem, keretkészletes oldalakhoz. Nem támogatott, HTML5-ben. Olyan böngészők számára, melyek nem támogatják a keretkészletes <frames> oldalakat. Tartalmazhat minden olyan HTML elemet, melyet a normál HTML oldal <body> elemén belül talál. A <noframes> elem használható a weboldal nem keretvázolt verzióihoz való kapcsolódásra a felhasználó számára, hogy keretet adjon a felhasználóknak. A <noframes> elem, a <frameset> elemen belülre kerül. Ha kereteket tartalmazó lapot szeretne érvényesíteni, győződjön meg róla, hogy a <! DOCTYPE> beállítása "HTML Frameset DTD" vagy "XHTML Frameset DTD" legyen. Példa: Oldal három kerettel, <noframes> címkével. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes>Sajnáljuk, böngészője nem kezeli a <frameset> kereteket!</noframes> </frameset> </html> |
||||||||||||
<noscript> | Script információs elem.
A <noscript> elem, alternatív tartalmat határoz meg azon felhasználók számára, melyek letiltották a böngészőjükben lévő szkripteket, vagy olyan böngészővel rendelkeznek, amely nem támogatja a szkriptet. A <noscript> elem használható, <head> és <body> elem területén. Ha a <head> elemen belül használjuk: <noscript> csak <link>, <style> és <meta> elemeket tartalmazhat. A <noscript> elemen belül megjelenő tartalom akkor jelenik meg, ha a szkriptek nem támogatottak vagy letiltásra kerülnek a felhasználó böngészőjében. Példa: <noscript> elem használata: <script> document.write("Hello World!") </script> <noscript>Ön letíltotta, vagy böngészője nem támogatja a JavaScriptet!</noscript> |
||||||||||||
<object> | Egy beágyazott objektumot definiál, egy HTML dokumentumban.
Használja <object> elemet, a multimédia beágyazásához weboldalain. Például: audio, videó, Java-kisalkalmazások, ActiveX, PDF és Flash Az <objekt> elemet is használhatja, egy másik weboldal beágyazásához a HTML dokumentumba. A <param> elemet, az <object> címkével beágyazott bővítmények paramétereinek átadásához használhatja. Megjegyzés: Az <object> elembe definiált formátum, nem minden böngészőben támogatott. Ha nem minden böngészőben támogatott, kérdés csak az, van értelme olyan elem elhelyezésére, melynek weboldali tartalmát egyik felhasználó megtekintheti, másik felhasználó, pedig nem? Az Adobe 2020 végén megszünteti a Flash támogatását. Csak megbízható webhelyeken engedélyezze a Flash futtatását. Előfordulhat, hogy egyes webhelyek az Adobe Flash Player használatával kárt okoznak a számítógépében. Példa: flash fájl beágyazása. <object width="400" height="400" data="flashuzenet.swf"> </object> Példa: mp3 hang fájl beágyazása. <object width="300" height="50" data="zene.mp3"> </object> Példa: mp4 film fájl beágyazása. <object width="300" height="400" data="film.mp4"> <param name="autoplay" value="true"/> </object> Film lejátszása.(Némely böngészőnél, bővítményt engedélyezni / aktiválni kell.) Figyelj! Otthoni teszteléshez, telepíteni kell az APACHE szervert! Például: Win8-on szerver nélkül nem megy. Böngészövel a localhost-ról kell belépni, mert nem játsza le! Némely böngészőnél engedélyezni kell a Flash, Quich Time vagy DivX Movies futtatását, ilyenkor a leállításhoz, videó képre kattintani. |
||||||||||||
<ol> | Kijelöli a számozott (rendezett) listaelemeket.
Az <ol> címke rendezett listát határoz meg. A rendezett lista numerikus vagy betűrendes lehet. Használja a <li> címkét a listaelemek meghatározásához. A "start" és a "type" attribútumok, elavultak a HTML 4.01-ben, de a HTML5-ben támogatják őket. A "reversed" fordított attribútum, új a HTML5-ben. A "compact" attribútum, nem támogatott a HTML5-ben. Példa: Három különböző rendezett listára:
|
||||||||||||
<optgroup> | Legördülő listában, kapcsolódó témakörök csoportosítására szolgál.
Amikor a lehetőségeknek hosszú listája van, felhasználó számára a kapcsolódó opciók csoportjai, könnyebben kezelhetők. Példa: Csoporthoz kapcsolódó opciók, <optgroup> címkékkel. <select> <optgroup label="Svéd autók"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="Német autók"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>Eredmény: (Kattints a lefelé mutató nyílra.) |
||||||||||||
<option> | Meghatározza az opciót, egy kiválasztott listán.
<option> elemek, egy <select> vagy <datalist> elemen belül helyezkednek el. Az <option> címke attribútumok nélkül használható, de általában a value ( érték) attribútumra szüksége van, mely jelzi, hogy mit küld a kiszolgálónak. Amikor hosszú listája van a lehetőségeknek, akkor a kapcsolódó opciókat, az <optgroup> címkével csoportosíthatja. Négy lehetőség közül választható, legördülő lista: Példa: <select> <option value="volvo"> Volvo </option> <option value="saab"> Saab </option> <option value="opel"> Opel </option> <option value="audi"> Audi </option> </select>Eredmény: (Kattints a lefelé mutató nyílra.) |
||||||||||||
<output> | Egy számítás eredményét jelöli. (Például: egy szkript által végrehajtott). Új a HTML5-ben.
Az <output> elem, űrlap-attribútuma nem támogatott az IE / Edge böngészőben. Végezzen el egy számítást, és jelenítse meg az eredményt, egy <output> elemben: Példa: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50"> = <output name="x" for="a b"></output> </form>Eredmény: (Kattints a skálázóra, majd mozgasd jobbra-balra.) |
||||||||||||
<p> | Paragrafus, azaz, bekezdés elem.
A <p> elem, meghatároz egy bekezdést. A böngészők automatikusan hozzáadnak egy kis helyet (margót) mindegyik <p> elem előtt és után. A margók CSS-vel módosíthatók. A bekezdés a következőképpen kerül megjelölésre: Példa: <p>Ez egy bekezdés, azaz, paragrafus szöveg.</p> <p>Ez egy másik bekezdés, azaz, paragrafus szöveg.</p>Eredmény: Ez egy bekezdés, azaz, paragrafus szöveg. Ez egy másik bekezdés, azaz, paragrafus szöveg. |
||||||||||||
<param> | Bővítmények paramétereinek meghatározására használható, <object> elemben.
A <param> elem, az <object> elembe ágyazott bővítmények paramétereinek meghatározására használható. A HTML5 két új elemet is tartalmaz, audio vagy video lejátszásához: az <audio> és <video> elemeket. További lehetőség a YouTube <audio> és <video>, melyet minden körszerű böngésző megjelenít. A YouTube lehetőséget, lásd a video elem leírásánál. A <param> elem, minden nagyobb böngészőben támogatott. Az <object> elemben definiált fájlformátum azonban, nem minden böngészőben támogatott. Állítsa "autoplay" paramétert "true" értékre, így az oldal betöltődésekor a hang lejátszása azonnal megkezdődik. Megjegyzés: Az Adobe 2020 végén megszünteti a Flash támogatását. Csak megbízható webhelyeken engedélyezze a Flash futtatását. Előfordulhat, hogy egyes webhelyek az Adobe Flash Player használatával, kárt okoznak a számítógépében. Példák: <object data="zene.mp3"> <param name="autoplay" value="false"> </object> -------------------------------------------------------------------------------------- <object data="film.mp4"> <param name="autoplay" value="false"> </object> --------------------------------------------------------------------------------------Példák megjelenése és azok megtekintése, tesztelése attól függ, hogy Ön, milyen operációs rendszert, bővitményt és milyen böngészőt használ. Figyelj! Otthoni teszteléshez, telepíteni kell az APACHE szervert! Böngészövel a localhost-ról kell belépni, mert normál belépésnél, nem minden böngésző játsza le! Némely böngészőnél engedélyezni kell valamelyik bővitményt, Flash, Quich Time vagy DivX Movies futtatását, ilyenkor a leállításhoz, videó képre kattintani. Az <object> elemnél HTML5-ben mindegy, hogy true vagy false, lejátszás azonnal indul, teljes hangerővel. <object> Audió/Videó kezelőgombok: Win8-on Audió/Videó megjelennek, melyekkel leállítható és újra indítható. XP-n nem jelennek meg, videónál a képre kattintva leállítható és újra indítható. Audió indítható, de nem leállítható. |
||||||||||||
<picture> | Kép címke, webfejlesztőknek nagyobb rugalmasságot biztosít, a képi erőforrások meghatározásában.
A <picture> elem leggyakoribb használata a művészi irányhoz fogható, megfelelő formában. Ahelyett, hogy a képnézet szélességén alapuló képeket fel vagy le kicsinyítenék, több képet lehet úgy tervezni, hogy jobban töltse ki, a böngésző nézetablakát. Különféle forrásokat állít be, és az első olyan forrás, amely megfelel a nézet referenciáknak. A <picture> elem, két különböző címkét tartalmaz: - Egy vagy több <source> címkét. - Egy <img> címkét. A <source> elem a következő attribútumokkal rendelkezik: - srcset: Kötelező. Meghatározza a megjeleníteni kívánt kép URL-jét. - média: Elfogad egy érvényes média lekérdezést, amelyet általában egy CSS-ben definiálnak. - méret: Egy szélességleíró, egyetlen médiakérdezés szélességleíróval, vagy egy szélességleíróval rendelkező média lekérdezések, vesszővel elhatárolt listája. - típus: Meghatározza a MIME típust.A <picture> elem, a <video> és az <audio> elemekhez hasonlóan működik. Böngésző, a media attribútumértékeket használja, a legmegfelelőbb kép betöltéséhez. Első megfelelő <source> elemet használja egy utalással, és figyelmen kívül hagy minden más <source> címkét. Az <img> elem, a <picture> deklarációs blokk, utolsó gyermekcímkéje. Kompatibilitást biztosít az olyan böngészők számára, amelyek nem támogatják a <picture> elemet, vagy ha egyik <source> forrásjelölő sem, egyezik meg. A böngészőablak átméretezésekor, a különböző méretű nézetek méretének megtekintéséhez, böngésző keresi az első olyan forráselemet, ahol a média lekérdezés megegyezik a felhasználó aktuális nézetablakának szélességével, és felveszi az srcset attribútumban megadott képet. A képelem nem támogatott az IE12 és korábbi verzióban, vagy a Safari 9.0 és korábbi verzióiban. Ön által használt, monitor méretei: 0 0 A következő négy kép lesz elhelyezve. Ezek közül felhasználó csak azt látja, melynek min-widt éréke, megfelel az általa nézett böngészőablak szélességi méretével. A <source> elemek sorrendjének meghatározása: Első legyen a legnagyobb min-width értékkel rendelkező kép, és a többiek csökkenő sorrendben kövessék. Megjegyzés: A legkisebb kép is rendelkezhet, a legnagyobb min-width értékkel. Ebben az esetben, ez legyen a <source> elemek között, az első helyen. Példa: <picture> elem használata. <picture> <source media="(min-width: 1100px)" srcset="fotozas.jpg"/> <source media="(min-width: 900px)" srcset="anyakonyv.jpg"/> <source media="(min-width: 650px)" srcset="gyuruk.jpg"/> <img src="villany.jpg" alt="Villany" style="width:auto;"/> </picture>Eredmény: Teszteléshez, kicsinyítsük a böngészőablakot, majd fokozatosan vegyük kisebbre vagy nagyobbra. Ön böngészőablakának méretei: 0 0 |
||||||||||||
<pre> | Szóköz, és ENTER billentyű leütéseinek megtartása.
Az <pre> elem, meghatározza az előformázott szöveget. Szövege egy fix szélességű betűtípussal (általában Courier) jelenik meg, és megőrzi mind a szóközöket, mind a sorokat. A <pre> elemet, szokatlan formázás vagy valamilyen számítógépes kód megjelenítésekor alkalmazzuk. Példák: <pre>1.Példa: Itt egy előre formázott szöveg</pre> Eredmények: 1.Példa: Itt egy előre formázott szöveg 2.Példa: Itt egy előre formázott szöveg |
||||||||||||
<progress> | A feladat előrehaladását jelenti. Új a HTML5-ben.
Felhasználók nyomon követhetik, a hosszas műveletek előrehaladását, és vizuálisan is jelezve van, hogy a betöltés folyamatban van. Használja a <progress> elemet, JavaScript függvényében, feladat előrehaladásának megjelenítéséhez akkor, ha a művelet befejezése öt másodpercet vagy többet is, igényel. Ehhez hasonlót látunk az audio és videó kezelő paneleken is, mely mutatja az előrehaladási irányt(időtartamot). A <progress> elem, nem alkalmas egy nyomtáv megjelenítésére (pl. Lemezterületnél vagy lekérdezés eredményének relevanciájára). De arra hasznos, hogy felhasználó ne hagyja el, idő előtt az oldalt. A nyomtáv megjelenítéséhez a <meter> elemet használja. A <progress> elem támogatja a HTML attribútumokat és Globális attribútumokat is.
Példa: Egyszerű betöltési folyamat szemléltetés felhasználó felé, amikor a "Betöltés" gombra kattint.
<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<style>#folyamat{display:none;}</style>
</head>
<body>
<progress value="22" max="100" id="folyamat"></progress><br />
<button id="progress">Betöltés</button>
<script>
$(document).ready(function(){
$("#progress").click(function(){
$("#folyamat").show();
$("#folyamat").delay(3600).fadeOut(); // Alapértelmezett milliseconds = 400
});
});
</script>
</body>
Eredmény:2.Példa:
Bővebben ismertetőt a progress sáv használatáról, itt olvashat: Microsoft windows progress.Katt ide! |
||||||||||||
<q> | Idézőjelekkel történő kijelölés.
A <q> elem, rövid idézetet határoz meg. A böngészőkben általában idézőjeleket alkalmaznak az árajánlat körül is. Nyomtatási formátumhoz, alkalmazhatjuk a magyar kezdő és záró idézőjeleket: Kezdő magyar nyomdai idézőjel: 8222; = „ vagy „ = „ Záró magyar nyomdai idézőjel: 8221; = ” vagy ” = ” Példa: Egy rövid idézetet kijelölése. <p>A WWF célja: <q>Emberek a természethez igazodva éljenek.</q> Reméljük, sikeresek lesznek.</p>Eredmény: A WWF célja: |
||||||||||||
<rp> | Mi jelenjen meg olyan böngészőkben, amelyek nem támogatják a ruby-n jegyzeteket. Új a HTML5-ben.
Az <rp> elem, arra használható, hogy zárójeleket készítsen rubin szöveg körül, és olyan böngészőkben jelenjenek meg, melyek nem támogatják a ruby-n jegyzeteket. Használja az <rp> elemet, a <ruby> és <rt> elemekkel együtt. A <ruby> elem egy vagy több karakterből áll, amely magyarázatot / kiejtést igényel, és tartalmaz egy <rt> elemet, mely megadja ezeket az információkat, valamint egy opcionális <rp> elem, amely meghatározza, hogy mit jelenítsenek meg olyan böngészők, melyek nem támogatják a rubyn jegyzeteket. Ruby-n jegyzet, "rp" kijelölővel:
Példa:
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
Eredmény:漢 |
||||||||||||
<rt> | Karakterek magyarázata / kiejtése. (Kelet-ázsiai tipográfia esetében.)
Az <rt> elem, a karakterek magyarázatát vagy kiejtését határozza meg (a kelet-ázsiai tipográfia esetében) egy rubyn jegyzetben.
A <ruby> és <rp> címkékkel együtt használja. A <ruby> elem, egy vagy több karakterből áll, melyek magyarázatot / kiejtést igényelnek, és egy <rt> elemből, amely megadja ezeket az információkat, valamint egy opcionális <rp> elem, amely meghatározza, hogy mit jelenítsen meg olyan böngésző, mely nem támogatja a ruby-n jegyzeteket.
Példa: Ruby-n jegyzet, "rt" kijelölővel.
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
Eredmény:漢 |
||||||||||||
<ruby> | Megjegyzést definiál. (Kelet-ázsiai tipográfia esetében.) Új a HTML5-ben.
A <ruby> elem, egy ruby-n jegyzetet ad meg. Egy kis extra szöveg, amely a fő szöveghez csatolva jelzi a megfelelő karakterek kiejtését vagy jelentését. Ezt a fajta megjegyzést gyakran használják a japán kiadványokban. A <ruby> elemet, az <rt> és / vagy <rp> címkékkel együtt használja. A <ruby> elem egy vagy több karakterből áll, mely magyarázatot / kiejtést igényel, és egy <rt> és opcionális <rp> elem, amely meghatározza, hogy mit jelenítsen meg az a böngésző, amelyik nem támogatja a ruby-n jegyzeteket.
Példa: Ruby-n jegyzet.
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
Eredmény:漢 |
||||||||||||
<s> | Áthúzza a nem helyes szöveget.
A <s> elem, olyan szöveget határoz meg, amely már nem helyes, pontos vagy releváns. Nem szabad használni a helyettesített vagy törölt szöveg definiálásához, <del> elemmel a kicserélt vagy törölt szövegek meghatározásához. Az <s> elem elavult a HTML 4.01-ben, és az áthúzott szöveg definiálásához használták. Az <s> elemet újra definiáljuk a HTML5-ben, és most használjuk a már nem megfelelő szöveg definiálására. A már nem megfelelő szöveg megjelölése: Példa: <p><s>Kedvenc színem a kék,</s> de mostantól, a piros.</p>Eredmény:
|
||||||||||||
<samp> | Egy program által megjelenített üzenet.
A <samp> elem, egy kifejezéscímke. Meghatározza számítógépes programból, a megjelenített üzenet kimenetét. Nem elavult, de lehetőség van a CSS-vel, gazdagabb hatás elérésére. Példa: Kimenet formázása egy dokumentumban.(Fájl betöltése folyamatban. Üdvözöllek kedves felhasználó.) <samp> Loading file is in progress. </samp> <samp> Üdvözöllek kedves felhasználó. </samp>Eredmény: Loading file is in progress. Üdvözöllek kedves felhasználó. |
||||||||||||
<script> | Kliensoldali (JavaScript) parancsfájlt definiálja.
A <script> elem vagy parancsfájlokat tartalmaz, vagy egy külső szkriptfájlt mutat az src attribútumon keresztül. A JavaScript leggyakoribb felhasználásai a képmódosítás, az űrlap érvényesítés és a tartalom dinamikus változásai. Példa: Külső script meghívására. <script language="JavaScript" type="text/javascript" src="fájlnév.js"></script> Nem szabályos, de megengedett rövíden így is: <script src="fájlnév.js"></script> Írás "Hello JavaScript!" JavaScript használatával, dokumentumon belül: Példa: <span id="bemutato"></span> <script> document.getElementById("bemutato").innerHTML = "Hello JavaScript!"; </script>Eredmény:
|
||||||||||||
<section> | Dokumentum egy szakaszát határozza meg. Új a HTML5-ben.
A <section>(szakasz) elem határozza meg, a dokumentumban lévő szakaszokat, például fejezeteket, fejléceket, lábléceket vagy a dokumentum bármely más részét. Példa: Dokumentum egy része, amely elmagyarázza, hogy mi a WWF: <section> <h1>WWF</h1> <p>Globális alap a természet számára, és....</p> </section>Eredmény: WWFGlobális alap a természet számára, és.... |
||||||||||||
<select> | Létrehoz egy legördülő listát, az űrlapon.
A <select> elem, egy űrlapvezérlő. Felhasználható egy adott formátumban, a felhasználói bevitelek összegyűjtéséhez. Az <option> elemek, a <select> elemben meghatározzák, a listában szereplő opciókat. A HTML5, hozzáadott néhány új attribútumot. Hozzon létre egy legördülő listát négy lehetőséggel: Példa: <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>Eredmény: (Kattints a nyílra.) |
||||||||||||
<small> | Szöveg vagy karakter kicsinyítés.
A <small> elem kisebb szöveget (és más oldaljegyzéseket) határoz meg. Támogatja a közvetlen és globális attribútumokat is. Példa: Adjon meg egy kisebb karakteres szöveget. <p>W3Schools.com - a világ legnagyobb angol nyelvű webes fejlesztőoldala.<br /> <small>Referencia adatok 1999-2050 szerzői joggal.</small></p>Eredmény: W3Schools.com - a világ legnagyobb angol nyelvű webes fejlesztőoldala. |
||||||||||||
<source> | Több médiaeszköz megadása. Új a HTML5-ben, és IE9-től kezdve.
A <source>(forrás) elem segítségével, több médiaeszközt adhat meg médiaelemekhez. Például <video>, <audio> és <picture> elemekhez. A <source> elem lehetővé teszi, hogy megadja az alternatív video / audio vagy képfájlokat, amelyekből a böngésző választhat médiatípust, a type / codecs támogatás vagy a média lekérdezés alapján. Megjegzés: A képelemek alkalmásához, lásd a <picture> elem ismertetését! Audio lejátszó két <source>, azaz, forrásfájllal. A böngészőnek ki kell választania, hogy melyik fájlhoz (ha van) támogatottság: 1.Példa: <audio controls> <source src="valami-hang.ogg" type="audio/ogg"> <source src="valami-hang.mp3" type="audio/mpeg"> Ön böngészője, nem támogatja az audio elemet. </audio>Eredmény: - audio controls = Megjelenik a lejátszókezelő, és felhasználó indítja. - audio autoplay = Nem jelenik meg lejátszókezelő, azonnal indul, leállítani nem lehet. |
||||||||||||
<span> | Területet vagy szövegrészt kijelölő elem.
A <span> elem, a dokumentumban lévő inline elemek csoportosítására szolgál. De, alkalmazhatjuk szövegrészek kiemeléséhez is, melyek megjelenését CSS-vel meghatározhatjuk. Önmagában nem biztosít, vizuális változást. <span> elem lehetőséget ad arra, hogy egy azonosítóval hozzáadjuk egy szövegrészhez, vagy egy dokumentum egy részéhez. Ha egy szöveget egy <span> elembe helyezünk, akkor megtervezhetjük CSS-vel vagy manipulálhatjuk JavaScript-el. JavaScript-el vagy jQery-vel történő manipuláláshoz, lehetőleg "id" azonosítót alkalmazzunk hozzá. Stílusát CSS-ben meghatározhatjuk: elemnév / id / class azonosítással. Példa: A szöveg egy részének kiemelése, színnel: <p>Kutyámnak <span style="color:blue">kék</span> szeme van.</p>Eredmény: Kutyámnak kék szeme van. |
||||||||||||
<strike> | Meghatározza az áthúzandó szöveget. Nem támogatott HTML5-ben.
Meghatározza az áthúzandó szöveget. Használja helyette a <del> vagy a <s> elemet. Példa: Áthúzott szöveg, az alábbiak szerint jelölhető. <p>Version 2.0 <strike>még nem elérhető!</strike> most elérhető!</p>Eredmény: Version 2.0 |
||||||||||||
<strong> | Kihangsúlyozott félkövér szöveg.
A <strong> elem, kifejezés tag. Fontos és kihangsúlyozott szöveget határoz meg. A HTML 4.01-ben a <strong> címke határozza meg az erős hangsúlyozott szöveget, de a HTML5-ben, fontos szöveget határoz meg. Nem elavult, de lehetőség van a CSS-vel, gazdagabb hatás elérésére. Kihangsúlyozott szöveg formázása, egy dokumentumban: Példa: <p>Normál szöveg, <strong>kihagsúlyozott strong szöveg.</strong></p>Eredmény: Normál szöveg, kihagsúlyozott strong szöveg. |
||||||||||||
<style> | Stílusinformációk meghatározására használható.
Az <style> elemen belül adja meg, hogy a HTML elemek hogyan jelenjenek meg a böngészőben. Minden HTML-dokumentum, tartalmazhat több <style> címkét: - A head szakaszban, lehetőleg egyet. - A body területén, több is megadható, lehetőleg közvetlen a formázandó terület vagy elemek, előtt. Példa: <style> h1 {color:red;} p {color:blue;} </style> Írhatjuk szövegfolyam formátumban is, így: <style> h1{color:red;} p{color:blue;} </style> <h1>Címsor szöveg</h1> <p>Bekezdés szöveg<p>Eredmény: Címsor szövegBekezdés szöveg.
|
||||||||||||
<sub> | Alsó index.
A <sub> elem, indexszöveget definiál. Az alsóbb szintű szöveg, fél karaktert tartalmaz a normál vonal alatt, és néha kisebb betűkkel jelenik meg. Az alsóbb szintű szöveg használható kémiai képletekhez, például a víz vegyjeléhez. Példa: <p>A víz vegyjele = H<sub>2</sub>O.</p>Eredmény: A víz vegyjele = H2O. |
||||||||||||
<summary> | Meghatározza látható elemmel, a <details> elem látható irányát. Új a HTML5-ben.
A <summary> elem meghatározza, a <details> elem látható címét, és a tartalom megtekintéséhez tartozó ábrát. A címhez tartozó tartalom, megtekinthető / elrejthető. A <summary> elemnek, a <details> elem első elemének (gyermekelemének) kell lennie. Megjegyzés: Új HTML elemként szerepel, és a table summary attribútum szerepe megszűnt, a HTML5-ben. Példa: <details> <summary>Találmányi jog 2015-2030.</summary> <p> - a Hold Izzó Zrt által. Minden jog fenntartva.</p> <p>Az energiatakarékos holdizzó technológiája és gyártása, a Hold Izzó Zrt cég tulajdonát képezik.</p> </details>Eredmény: Ha böngészője támogatja, kattintson a baloldali nyílra! ( Megnyitásra / bezárásra.) Találmányi jog 2015-2030. - a Hold Izzó Zrt által. Minden jog fenntartva. Megjegyzés: Ezen elem használatakor, probléma akkor sincs, ha a böngésző nem támogatja. Ekkor megjelenik a teljes tartalom, és nincs megjelenítés/elrejtés lehetőség. |
||||||||||||
<sup> | Felső index.
A <sup> elem, meghatározza a felsőbetűs szöveget. A felsőbetűs szöveg, fél karaktert tartalmaz a normál vonal felett, és néha kisebb betűkkel jelenik meg. A felsőbetűs szöveget, lábjegyzetekhez is használhatja, mint a WWW.valami. xxxxxx Példa: Felsőbetűs szuperscript szöveg jelölése. <p>A négyzetméter jele = m<sup>2</sup></p>Eredmény: A négyzetméter jele = m2 |
||||||||||||
<svg> | Egy területet definiál, az SVG grafika számára.
Az SVG számos módszert kínál az útvonalak, dobozok, körök, szövegek és grafikák rajzolásához.
Példa: Rajzolj egy kört. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>Eredmény: |
||||||||||||
<table> | Táblázati formátumot hoz létre.
A <table> elem, HTML-táblázatot határoz meg. Táblázat a <table> elemből, és egy vagy több <tr> , <th> és <td> elemből áll. - <tr> elem, egy táblázatsort határoz meg. - <th> elem, meghatároz egy táblázati fejlécet. - <td> elem, egy táblázatsor adatát határozza meg. A bonyolultabb HTML táblázatok tartalmazhatnak <caption>, <col>, <colgroup>, <thead>, <tfoot> és <tbody> elemeket. A táblázatokat nem szabad használni az oldal elrendezéséhez! Történelmileg egyes webes szerzők visszaéltek a HTML-táblázatokkal, a táblák elrendezésének ellenőrzésében. Vannak különböző alternatívák a HTML táblázatok elrendezéshez, elsősorban a CSS-fájl használatával. HTML5 nem támogatja a táblázati attribútumokat: "align", "bgcolor", "border", "cellpadding", "cellspacing", "border", "width" stb. Példa: Egyszerű HTML táblázat, amely kettő oszlopot és kettő sort tartalmaz. <table> <tr> <th>1.Oszlop fejléce</th> <th>2.Oszlop fejléce</th> </tr> <tr> <td>1.Oszlop, első adata</td> <td>2.Oszlop, első adata</td> </tr> </table> Írhatjuk, szövegfolyam formátumban is, így: <table> <tr> <th>1.Oszlop fejléce</th> <th>2.Oszlop fejléce</th> </tr> <tr> <td>1.Oszlop, első adata</td> <td>2.Oszlop, első adata</td> </tr> </table>Eredmény:
|
||||||||||||
<tbody> | Kijelöli a táblázat tartalmi elemeit.
A <tbody> elemet, HTML táblázatban a tartalom csoportosítására használjuk. A <tbody> elemet a <thead> és a <tfoot> elemekkel együtt használjuk, egy táblázat (test, fejléc, lábléc) minden egyes részletének meghatározásához. A böngészők használhatják ezeket az elemeket, hogy lehetővé tegyék a tábla testének görgetését, a fejléc és a lábléctől függetlenül. Ha egy nagyméretű táblát nyomtat, amely több oldalra is kiterjed, ezek az elemek engedélyezhetik a táblafejléc és a lábléc nyomtatását, minden oldal tetején és alján. A <tbody> elemet, a következő szövegkörnyezetben kell használni: A <table> elem gyermekeként bármely <caption>, <colgroup> és <thead> elemek után. A <tbody> elemnek, egy vagy több <tr> címkével kell rendelkeznie. A <thead>, a <tbody> és a <tfoot> elemek alapértelmezés szerint nem befolyásolják a táblázat elrendezését. Ezen elemeknek formázásához, használhatjuk a CSS stílusokat. (Közvetlen elemnév, id vagy class azonosítással.) Példa: HTML-táblázat <thead>, <tbody> és <tfoot> elemekkel. <style> .hsz_zold{background-color: lime;} </style> <table> <thead> <tr> <th>Hónap</th> <th>Megtakarítás</th> </tr> </thead> <tbody class="hsz_zold"> <tr> <td>Január</td> <td>10000 Ft</td> </tr> <tr> <td>Február</td> <td>8000 Ft</td> </tr> </tbody> <tfoot> <tr> <td>Összes</td> <td>18000 Ft</td> </tr> </tfoot> </table>Eredmény:
|
||||||||||||
<td> | Kijelöli a táblázat adatcelláit.
A <td> elem, szabványos adatcellát határoz meg, egy HTML táblázatban. A HTML táblának, kettő celatípusa van: 1. Fejléccella - fejléc információkat tartalmaz (létrehozva a <th> elemmel). 2. Adatcella - adatokat tartalmaz (létrehozva a <td> elemmel). A <th> elemek szövege alapértelmezés szerint, félkövér és középre van állítva. A <td> elemek szövege alapértelmezés szerint, középre és bal oldali igazítás. HTML5-ben, az összes elrendezési attribútum eltávolításra kerül, kivétel a colspan és a rowspan. Használja a colspan és a rowspan attribútumot, hogy a tartalom több oszlopra vagy sorra vonatkozzon! Példa: <table> <thead> <tr> <th>Hónap</th> <th>Megtakarítás</th> </tr> </thead> <tbody> <tr> <td>Január</td> <td>10000 Ft</td> </tr> <tr> <td>Február</td> <td>8000 Ft</td> </tr> </tbody> <tfoot> <tr> <td>Összes</td> <td>18000 Ft</td> </tr> </tfoot> </table>Eredmény:
|
||||||||||||
<template> | Tartalom, el van rejtve az ügyféltől. Új a HTML5-ben.
A <template> (Sablon)elemen belüli tartalom, nem jelenik meg. A tartalom láthatóvá és később megjeleníthető a JavaScript használatával. Használja a <template> elemet, ha újra és újra használni szeretné a HTML-kódot és tartalmát, de csak akkor, ha azt kéri. Ilyen művelethez a <template> elem nélkül, létre kell hozni HTML-kódot a JavaScript használatával, hogy megakadályozza böngészőnek a tartalom megjelenítését. A <template> tartalom mutatásához, használja a JavaScript vagy jQuery másolatot, és adja hozzá az oldal vagy szövegfolyam tetszőleges területéhez. Megjegyzés: Felhasználót szöveggel, jelképpel, vagy button gomb felíratával tájékoztatni kell, hogyan jelenítheti meg a tartalmat. Program készítője dönti el, mikor és milyen formában jelenik meg a tartalom. Például: Megjelenik ha egér a kiválasztott szöveg felett, és elrejt ha azt elhagyja, vagy kattintással. Példa: A <template> elem HTML adatot tartalmaz anélkül, hogy megjelenítené azt. <template> <h2>Izzó</h2> <p>Energiatakarékos izzó bemutatása.<br /> <img src="villany.jpg" alt="Villany" width="75" height="75"/></p> </template>
A <template> példa eredménye: <template> tartalom a kérésig, nem jelenik meg. Megtekintéshez, válaszd valamelyik lehetőséget. IzzóEnergiatakarékos izzó bemutatása. |
||||||||||||
<textarea> | Többsoros szövegbeviteli vezérlést határoz meg.
<textarea> elem elhelyezése, a form (űrlap) területén van. A szövegterület korlátlan számú karaktert tartalmazhat. A szöveg, egy rögzített szélességű betűtípussal (általában Courier) jelenik meg. Szövegablak méretét a cols (karakterek) és a rows (sorok) attribútumai határozzák meg. Meghatározhatjuk a CSS-vel, magasság és szélesség tulajdonságait. Felhasználó a megjelenő szövegfolyamot folytathatja, vagy törölheti, és új szöveget írhat. Az ablakba nem kötelező szöveget írni, üresen hagyható, és a felhasználó ír szöveget. Ekkor az ablak előtt helyezzünk el egy tájékoztató szöveget, hogy mit várunk el a felhasználótól. Példa: <textarea rows="5" cols="50"> A w3schools.com oldalon megtanulhatod, hogyan készíts egy honlapot. Ingyenes oktatóanyagokat kínálunk minden webfejlesztési technológiában. Jelezd felénk témával kapcsolatos javaslataidat, problémáidat, rövid leírással. </textarea>Eredmény: |
||||||||||||
<tfoot> | Kijelöli a táblázat lábléc, lenyomat, elemeit.
A <tfoot> elemet, a HTML táblázatban található csoporttagok tartalmának csoportosítására használják. <tfoot> elemet, <thead> és <tbody> elemekkel együtt használva adjuk meg, egy táblázat fő témáihoz (lábléc, fejléc, tartalom). A böngészők használhatják ezeket az elemeket, hogy lehetővé tegyék az tábla testének görgetését, fejléc és a lábléctől függetlenül. Ha egy nagyméretű táblát nyomtat, amely több oldalra is kiterjed, ezek az elemek engedélyezhetik a táblafejléc és a lábléc nyomtatását, minden oldal tetején és alján. A <tfoot> címkét a következő szövegkörnyezetben kell használni: <table> elem gyermekeként bármely <caption>, <colgroup>, <thead> és <tbody> elemek után. A <tfoot> elemnek, egy vagy több <tr> címkével kell rendelkeznie. A <thead>, a <tbody> és a <tfoot> elemek alapértelmezés szerint nem befolyásolják a táblázat elrendezését. Használhatja a CSS-t, ezeknek az elemeknek a stílusához. Példa: <style> .hsz_zold{background-color: lime;} </style> <table> <thead> <tr> <th>Hónap</th> <th>Megtakarítás</th> </tr> </thead> <tbody> <tr> <td>Január</td> <td>10000 Ft</td> </tr> <tr> <td>Február</td> <td>8000 Ft</td> </tr> </tbody> <tfoot class="hsz_zold"> <tr> <td>Összes</td> <td>18000 Ft</td> </tr> </tfoot> </table>Eredmény:
|
||||||||||||
<th> | Kiemeli a táblázat oszlopainak megnevezését.
A <th> elem, fejléccellát határoz meg egy HTML táblában. A HTML táblának kettő cellatípusa van: - Fejléccellák, információkat tartalmaznak (létrehozva a <th> elemmel) - Adatcellák, adatokat tartalmaznak (létrehozva a <td> elemmel) A <th> fejléc elemek szövege alapértelmezés szerint, félkövér és középre van állítva. A <td> adat elemek szövege alapértelmezés szerint, középre és bal oldali igazítás. Használja a colspan és a rowspan attribútumot, hogy a tartalom több oszlopra vagy sorra szóljon! HTML5-ben, összes elrendezési attribútum eltávolításra kerül. Példa: <table> <thead> <tr> <th> Hónap </th> <th> Megtakarítás </th> </tr> </thead> <tbody> <tr> <td>Január</td> <td>10000 Ft</td> </tr> <tr> <td>Február</td> <td>8000 Ft</td> </tr> </tbody> <tfoot> <tr> <td>Összes</td> <td>18000 Ft</td> </tr> </tfoot> </table>Eredmény:
|
||||||||||||
<thead> | Kijelöli a táblázat fejléc elemeinek tartalmát.
A <thead> elemet, HTML-táblázatban a fejléc tartalom csoportosítására használják. <thead> elemet a <tbody> és <tfoot> elemekkel együtt használva adjuk meg. Böngészők használhatják ezeket az elemeket, hogy lehetővé tegyék a tábla tartalom görgetését, a fejléc és a lábléctől függetlenül. Ha egy nagyméretű táblát nyomtat, amely több oldalra is kiterjed, ezek az elemek engedélyezhetik az táblafejléc és a lábléc nyomtatását minden oldal tetején és alján. A <thead> címkét a következő szövegkörnyezetben kell használni: A <table> elem gyermekeként bármely <caption> és <colgroup> elemek után és bármely <tbody>, <tfoot> és <tr> elemekkel. A <thead> elemnek, egy vagy több <tr> címkével kell rendelkeznie. <thead>, a <tbody> és a <tfoot> elemek alapértelmezés szerint nem befolyásolják a táblázat elrendezését. Használhatja a CSS-t, ezeknek az elemeknek a stílusához. Példa: <style> .hsz_zold{background-color: lime;} </style> <table> <thead class="hsz_zold"> <tr> <th>Hónap</th> <th>Megtakarítás</th> </tr> </thead> <tbody> <tr> <td>Január</td> <td>10000 Ft</td> </tr> <tr> <td>Február</td> <td>8000 Ft</td> </tr> </tbody> <tfoot> <tr> <td>Összes</td> <td>18000 Ft</td> </tr> </tfoot> </table>Eredmény:
|
||||||||||||
<time> | Megadja az általunk beírt, dátumot / időt. Új a HTML5-ben.
A <time> elem határozza meg, az ember által olvasható dátumot / időt. Ezt az elemet a dátumok és időpontok kódolására is használhatjuk gépileg olvasható módon, hogy a felhasználói ügyfelek felvehessenek születésnapi emlékeztetőket vagy ütemezett eseményeket a felhasználói naptárjukba, és a keresőmotorok intelligensebb keresési eredményeket tudnak felmutatni. Példa: Hogyan határozható meg az idő és a dátum. <p>Kinyitunk minden reggel <time>10:00</time> órakor.</p> <p>Van egy dátumom <time datetime="2008-02-14 20:00"> Valentin-napra</time>.</p>Eredmény: Kinyitunk minden reggel órakor. Van egy dátumom . |
||||||||||||
<title> | A <title> elem, minden HTML-dokumentumban kötelező, és meghatározza a dokumentum címét.
A <title> elem: - Meghatároz egy címet a böngésző eszköztárában - Megadja az oldal címét, amikor hozzáadja a kedvencekhez - Megjeleníti az oldal címét, a keresőmotor eredményei között. Példa: <head> <title>HTML alapismeretek</title> </head> |
||||||||||||
<tr> | Meghatároz egy táblázati sort.
A <tr> elem, egy táblázati cellasort határoz meg, egy HTML táblázatban. Egy vagy több <th> vagy <td> elemet tartalmaz. HTML5-ben, összes elrendezési attribútumot eltávolították. Példa: <table> <thead> <tr> <th>Hónap</th> <th>Megtakarítás</th> </tr> </thead> <tbody> <tr> <td>Január</td> <td>10000 Ft</td> </tr> <tr> <td>Február</td> <td>8000 Ft</td> </tr> </tbody> <tfoot> <tr> <td>Összes</td> <td>18000 Ft</td> </tr> </tfoot> </table>Eredmény:
|
||||||||||||
<track> | Média elemekhez, szöveges felírat. (<audio> és <video>). Új a HTML5-ben.
A <track> elem, feliratok, feliratfájlok vagy más szöveget tartalmazó fájlok kijelölésére szolgál, melyeknek a média lejátszásakor láthatónak kell lenniük. Otthoni tesztekhez: 2018, Firefox kivételével, APACHE szerver htdocs mappájában teszteljük, a felíratozást. A <track> elem, attributumai: src: Megadja a leírási fájl URL-jét. (Videó elemek felíratozásához, "vtt" kiterjesztésű fájlt használnak.) kind: Meghatározza a szövegsáv típusát.(Pl. kind="captions") - captions: Felirat azoknak, akik nem hallják a videó hangját. - chapters: Navigálási lehetőség a filmben. - descriptions: Azoknak, akik csak hallják, de nem látják a videót. - metadata: Videó lejátszási szakaszaihoz, időzített események. - subtitles: Felirat azoknak, akik nem értik az idegen nyelvet. srclang: Megadja a leírás, szöveges adatainak nyelvét. (Pl. srclang="hu") label: Megadja a szöveges tétel címét. (Pl. label="Hungarian") default: Megadja, melyik nyelvű felírat jelenjen meg, elsőre. Példa: Két felirattal rendelkező videó. <video width="320" height="240" controls> <source src="mosas.mp4" type="video/mp4"> <source src="mosas.ogg" type="video/ogg"> <track src="feliratok_hu.vtt" kind="captions" srclang="hu" label="Hungarian" default> <track src="feliratok_en.vtt" kind="subtitles" srclang="en" label="English"> </video>Eredmény:
Videó megjelenésnél, lehetséges hiba: Felhasználó böngészője nem támogatja a video elemet, vagy ismeri a videó elemet, de nincs támogatott formátúmú, vagy MIME típusú videó lejátszó. Film elérési útvonala hibás: Nem jelenik meg semmi, vagy a "Nnincs támogatott formátúmú, vagy MIME típusú videó lejátszó" felírat olvasható. A video elem MIME típusai: MP4 WebM, Ogg. Ezekhez szükséges codec internetről ingyenesen letölthető, és a böngészőkbe beépülő alkalmazás. Mivel nem tudhatjuk, hogy a felhasználó számítógépre mely codec van telepítve, ezért több formátumban is célszerű a videókat és hanganyagokat elérhetővé tenni. |
||||||||||||
<tt> | Írógépbetűknek megfelelő szöveg írása. Nem támogatott HTML5-ben.
Figyelem: - Ha <tt> a billentyűzet bemenet jelölésére használtuk, fontolja meg a <kbd> elemet; - Változók esetére fontolja meg a <var> elemet; - Számítógépes kód esetére vegye figyelembe a <code> elemet; - Számítógép kimenetére, fontolja meg a <samp> elemet, vagy használja helyette a CSS fájlt. Példa: Távkezelési szöveg definiálása: <p><tt>Telefax type text</tt></p> Eredmény: Telefax type text |
||||||||||||
<u> | Helytelen szöveg aláhúzása.
A <u> elem, olyan szövegeket jelenít meg, melyeknek stilisztikusan különbözniük kell a normál szövegtől, például a helytelen szavakat vagy a kínai főneveket. Ne használja az <u> elemet, hiperhivatkozáshoz, mert zavaró lehet. A HTML 5 specifikáció a fejlesztőket arra emlékezteti, hogy más elemek szinte mindig megfelelőbbek, mint az <u> elem. Az <u> elem elavult a HTML 4.01-ben. (az <u> elemet aláhúzott szöveg definiálására használták). Az <u> elemet újra definiáljuk a HTML5-ben, hogy olyan szövegeket jelenítsen meg, melyeknek stilisztikusan különbözniük kell a normál szövegtől, például a helytelen szavakat vagy a kínai főneveket. Példa: Helytelenített szó, aláhúzva az <u> elemmel. <p>Ez a <u>paragrafus</u> címsor.</p>Eredmény: Ez a paragrafus címsor. |
||||||||||||
<ul> | Kijelöli a nem számozott listaelemeket.Példa: Italok: <ul> <li>Kávé</li> <li>Tej</li> <li>Kakaó.</li> </ul>Eredmény: Italok:
|
||||||||||||
<var> | Változók jelölésére használhatjuk, szöveges környezetben.
A <var> elem, egy kifejezéscímke. Változót definiál. Programozási környezetben a "var" egy változó nevét jelenti, definiálja. HTML oldalon a <var> elem, egy matematikai kifejezést, vagy egy alkalmanként változó szöveget jelent. Jellemző rá, a dőlt betűtípus változat, font-style "italic", de ez a viselkedés böngészőfüggő. Ez a címke nem elavult, de lehetőség van a CSS-vel, gazdagabb hatás elérésére. Példa: Szöveg formázása egy dokumentumban. <p>Háromszög területétnek képlete: <var> t </var> = <var> a </var> * <var>m </var> / <var> 2 </var>.</p> <p>Ma, <var> felhős és szeles </var> az idő, hólnap milyen lesz, majd megírom.</p> Eredmény: Háromszög területétének képlete: t = a * m / 2. Ma, felhős és szeles az idő, hólnap milyen lesz, majd megírom. |
||||||||||||
<video> | Filmfájlt, vagy más videofolyamatot határoz meg.
2018. Jelenleg 3 támogatott videó formátum van, a <video> elemhez:
Példa, videó lejátszására: <video width="320" height="240" controls> <source src="film.mp4" type="video/mp4"> <source src="film.ogg" type="video/ogg"> <p>Ön böngészője, nem támogatja a video elemet.</p> </video>Eredmény: Videó megjelenésnél, lehetséges hiba: Felhasználó böngészője nem támogatja a video elemet, vagy ismeri a videó elemet, de nincs támogatott formátúmú, vagy MIME típusú videó lejátszó. Film elérési útvonala hibás: Nem jelenik meg semmi, vagy a "Nnincs támogatott formátúmú, vagy MIME típusú videó lejátszó" felírat olvasható. A video elem MIME típusai: MP4 WebM, Ogg. Ezekhez szükséges codec internetről ingyenesen letölthető, és a böngészőkbe beépülő alkalmazás. Mivel nem tudhatjuk, hogy a felhasználó számítógépre mely codec van telepítve, ezért több formátumban is célszerű a videókat és hanganyagokat elérhetővé tenni. Tetszőleges kiterjesztésű videónk megjelenítéséhez, jelenleg a legjobb megoldás, ha a meglévő videónkat feltöltjük a YueTub-ra, majd az onnan kapott kódot, illesztjük be oldalunkra. Vagy: Tetszőleges YouTube videó beillesztése. YouTube oldalán válasszuk ki azt a videót, melyet a weboldalra akarunk beilleszteni.
A YouTube többféle böngészővel is működik. Ám ha a legújabb és legjobb funkciókat szeretnéd használni, YouTube kéri, hogy frissíts egy modern és teljes mértékben támogatott böngészőre. |
||||||||||||
<wbr> | Megadja a lehetséges sortörést, ha egy szó, túl hosszú. Új a HTML5-ben.
A <wbr> elem nem úgy végez sortörést, mint a <br> elem. A <wbr> (Word Break Opportunity) elem határozza meg, hogy egy szövegben milyen oknál fogva lehet egy sortörést hozzárendelni. Ha egy szó túl hosszú, vagy attól fél, hogy a böngésző rossz sorban töri a szavakat, akkor a <wbr> elemet használhatja, szócsökkentési lehetőségek hozzáadására. Szövegminta: <p>Az AJAX megismeréséhez ismernie kell, az XMLHttpObjektum kérését.</p> Példa: (Szöveges szünettel rendelkező szöveg.) <p> Az AJAX megismeréséhez ismernie kell, az XML<wbr>Http<wbr>Objektum kérését. </p>Sortörési eredmények, a rendelkezésre álló terület szélességétől változnak: Van elegendő hely: Az AJAX megismeréséhez ismernie kell, az XML Rövídebb a hely: Az AJAX megismeréséhez ismernie kell, az XML Mégrövídebb a hely:
Az AJAX megismeréséhez ismernie kell, az XML |