Különbségek

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

--- oktatas:web:html:html_4.01 [2021/11/05 12:36]
admin [Bevezetés]
+++ — (aktuális)
@@ Sor 1: / Sor 1: @@
-[[:oktatas:web:html|< HTML]]
-====== HTML 4.01 ======
-  * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2009, 2010, 2011, 2015, 2018
-  * Licenc: GNU Free Documentation License 1.3
-  * Web: http://szit.hu
-===== Bevezetés =====
-A HTML nyelvet **Tem Berners Lee** alkotta meg 1990-ben. 1991-ben közzétette az [[http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html|első weblapot]]. Az ARPANET, amely tulajdonképpen az Internet
-alapja már 1969-ben elkészült. 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 (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.
-A HTML a HyperText Markup Language szavakból alkotott betűszó. Jelentése Hiperszöveget leíró nyelv.
-^  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 WHATWG (Web Hypertext Application Technology Working Group) csoport.
-A csoportot az alternatív böngésző gyártók (nem IE) hozzák létre. A szabványhoz igazodik a W3C szövetség és az MS is.
-===== 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|}}
-===== 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  | Basic  |
-| francia  | Gestuno  | Perl  |
-| olasz  | Volapük  | Python  |
-| spanyol  | Intal  | HTML  |
-| görög  | Ido  | XHTML  |
-A formális nyelvek osztályozása
-^  Formális nyelvek   ^^^^^
-|  lekérdező  |  dokumentumleíró  |  programozási  |  matematikai  |  logikai  |
-| SQL  |  HTML  |  C  |
-| xBase   |  XHTML  |  C++  |
-| HPCC   |  SGML  |  Pascal  |
-|    |  XML  |  Java  |  |
-===== Eredet (SGML) =====
-A HTML az SGML nyelv alapján alkották meg, amely egy általános célú **dokumentumleíró nyelv**.
-Az **SGML** a **Standard Generalized Markup Language** szavakból alkotott betűszó.
-Magyarul **Általános Szabványos Kijelölőnyelv** néven fordítható.
-Az SGML nyelven egy dokumentumot több részre tagolunk általunk meghatározott elemekkel.
-Ezen elemek neveit a "<" és ">" jelek között helyezzük el, hogy elkülönüljön a
-dokumentum tartalmától. Az elemek neveit mi magunk találhatjuk ki. Például
-tárolni szeretnénk egy gépjármű adatait akkor az egész dokumentum tartalmát
-közrefoghatjuk egy gépjármű nevű elemmel:
-<code xml>
-<gepjarmu>
-</gepjarmu>
-</code>
-Egy gépárműről szeretnénk tárolni a rendszámát, űrtartalmát és színét.
-<code xml>
-<gepjarmu>
-    <rendszam>ASG-843</rendszam>
-    <urtartalom>1800</urtartalom>
-    <szin>piros</szin>
-</gepjarmu>
-</code>
-A dokumentumot a gépjármű elem kezdi és zárja, ezért ezeket gyökér elemeknek nevezzük.
-Vegyük észre, hogy a záró elem nevét mindig "/" karakter előzi meg.
-===== XML =====
-Amikor már a HTML nyelvet elterjedten használták, kiderültek az SGML hiányosságai, hátrányai.
-A Tim Bray az SGML nyelvet egyszerűsítette, néhány helyen szigorításokat vezetett be, és
-létrehozta az SGML utódját az XML nyelvet. Az XML annyira jól sikerült, hogy ma már a
-legnagyobb szoftvergyártók is XML tárolják a dokumentumokat. Az MSO, a LibreOffice
-mind XML-ben tárolja a dokumentumait. Az XML 1.0-t 1998-ban definiálták.
-A W3C konzorcium látta, hogy az XML nagyszerű és sokan használják. Ezért a HTML
-nyelvet is áttervezték XML alapokra. Ezeknek a HTML verzióknak a neve az
-XHTML.
-<code xml>
-<?xml version="1.0"?>
-<note>
-    <to>Tibi</to>
-    <from>János</from>
-    <heading>Emlékeztető</heading>
-    <body>Ne felejtsd el a héten!</body>
-</note>
-</code>
-Mi az XML?
-  * XML az EXtensible Markup Language szavak rövidítése.
-  * XML egy jelölőnyelv, mint az SGML vagy a HTML.
-  * XML adatok szerkezetének megadására tervezték, nem megjelenítésére.
-  * XML tagek nemelőre definiáltak. Neked kell saját tagjeidet definiálnod.
-  * XML önleíró nyelvnek tervezték.
-  * XML egy W3C ajánlás
-<code xml>
-<?xml version="1.0" encoding="ISO-8859-2"?>
-<note>
-    <to>Tibi</to>
-    <from>János</from>
-    <heading>Emlékeztető</heading>
-    <body>Ne felejtsd el a héten!</body>
-</note>
-</code>
-Az XML minta első sora megadja a használt XML verziót és a karakterkódolást.
-A következő a **note** a gyökér elem. Ebből kötelezően van egy a dokumentum végén is.
-A gyökérelemből egy dokumentumban csak egy lehet.
-A következő négy sor a gyermekelemek:
-<code xml>
-    <to>Tibi</to>
-    <from>János</from>
-    <heading>Emlékeztető</heading>
-    <body>Ne felejtsd el a héten!</body>
-</code>
-Az XML dokumentumok ezt a tagoltságot követik. Általánosan:
-<code xml>
-<gyökér>
-  <gyermek>
-    <algyermek>.....</algyermek>
-  </gyermek>
-</gyökér>
-</code>
-Nagyobb XML példa:
-<code xml>
-<könyvesbolt>
-  <könyv kategória="Főzés">
-    <cím nyelv="hu">Olasz ételek</cím>
-    <szerző>Pók Géza</szerző>
-    <év>2004</év>
-    <ár>30.00</ár>
-  </könyv>
-  <könyv kategória="Gyerek">
-    <cím nyelv="hu">Harry Potter</cím>
-    <szerző>J K. Rowling</szerző>
-    <év>2001</év>
-    <ár>3500</ár>
-  </könyv>
-  <könyv kategória="Nyelv">
-    <cím nyelv="hu">Tanuljunk latint</cím>
-    <szerző>Véső Endre</szerző>
-    <év>1947</év>
-    <ár>4900</ár>
-  </könyv>
-</könyvesbolt>
-</code>
-===== DTD =====
-Ún. DTD-ékben definiáljuk az SGML (vagy később XML) alapján az alkalmazni kívánt szintaxist
-Document Type Definition
-Dokumentum Típus Definíció
-Egy DTD tartalma
-<code dtd>
-<!DOCTYPE root-elem [elem-deklarációk]>
-</code>
-==== DTD példák ====
-Járművekről általános szöveges leírást szeretnék tárolni. Az eltárolandó szöveg például:
-  A járművek a közlekedés eszközei.
-A DTD így nézhet ki:
-jarmu.dtd:
-  <!DOCTYPE jarmu [
-  <!ELEMENT jarmu (#PCDATA)>
-  ]>
-A példában egyetlen elemet deklaráltunk. Ez a gyökérelem, ami bármilyen szöveget tartalmazhat.
-A dokumentum ekkor így nézhet ki:
-<code xml>
-  <!DOCTYPE jarmu SYSTEM "jarmu.dtd">
-  <jarmu>
-    A járművek a közlekedés eszközei.
-  </jarmu>
-</code>
-Járművekről szeretnék információt tárolni egy dokumentumban.
-A PCDATA a "parsed charachter data" szavakból alkotott betűszó. Az SGML vagy XML parszer
-átvizsgálja az ilyen adatot, és markup-okat és entity-ket keres benne. Ha ilyet talál,
-azokat visszakódolja (kifejti). Ilyen kód lehet az &lt; vagy &gt;
-A CDATA a "character data" szavakból alkotott betűszó. Ilyen tartalomban az XML parszer nem végez
-entitáskeresést, ha van benne egy &lt; akkor azt négy önálló karakterként értelmezi.
-A CDATA tartalmazt a <![CDATA[ nyitó és ]]> bezáró jelek közzé tesszük.
-===== Gyakorlat =====
-  * Milyen nyelvből ered a HTML nyelv?
-  * Mi az SGML?
-  * Mi a HTML?
-  * Mi a DTD?
-  * Ki találta ki a HTML nyelvet?
-  * Ki készítette el az XML nyelvet?
-  * Szerkezetileg hogyan épül fel egy nyelv?
-  * Sorolja fel a HTML fontosabb verzióit.
-  * A HTML5 verziót kik találták ki?
-  * Mi a W3C konzorcium?
-  * Mondjon egy magyar intézményt, amely tagja a W3C konzorciumnak.
-  * Mi az ARPANET?
-  * Mikortól létezik az ARPANET?
-  * Mikor alkották meg az első weboldalt?
-  * Az XHTML-nek melyik az utolsó verziója?
-  * Mikor definiálták az XML 1.0 verziót?
-===== Helló Világ =====
-<code html>
-  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
-  <html>
-  <head>
-    <title></title>
-  <meta http-equiv="Content-type" Content="text/html; charset=utf-8">
-  </head>
-  <body>
-  <h1>Weblap címe</h1>
-  <p>Maga a weboldal.</p>
-  </body>
-  </html>
-</code>
-===== Fejezetcímek meghatározása =====
-Fejezet címeket h1, h2, h3, h4, h5 és h6-os elemekkel határozunk meg.
-A példa kedvéért a tigrisről szeretnénk weblapot csinálni és szeretnénk
-írni az elterjedéséről, az alfajairól, a megjelenéséről, az életmódjáról
-és a szaporodásáról. Ekkor a következő módon határozzuk meg fejezetcímeknek:
-<code html>
-<h2>Elterjedése</h2>
-<h2>Alfajok</h2>
-<h2>Megjelenése</h2>
-<h2>Életmód</h2>
-</code>
-==== A különböző méretek ====
-<code html>
-<h1>H1 fejezetcím</h1>
-<h2>H2 fejezetcím</h2>
-<h3>H3 fejezetcím</h3>
-<h4>H4 fejezetcím</h4>
-<h5>H5 fejezetcím</h5>
-<h6>H6 fejezetcím</h6>
-</code>
-{{:oktatas:web:html:fejezetcimek.png|}}
-===== Bekezdések =====
-A bekezdéseket a p elemek közzé tesszük.
-<code html>
-<p>
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum. Vinum regum rex vinorum.
-Vinum regum rex vinorum.
-</p>
-</code>
-===== Formázás =====
-==== HTML formázó tagek ====
-^ Tag ^ Leírás ^
-| <b> | félkövér szöveg |
-| <big> | nagy szöveg (A HTML5 nem támogatja) |
-| <em> | kiemelt szöveg |
-| <i> | dőlt szöveg |
-| <small> | kis szöveg |
-| <strong> | erős szöveg |
-| <nowiki><sub></nowiki> | alsó index |
-| <nowiki><sup></nowiki> | felső index |
-| <nowiki><ins></nowiki> | beszúrt szöveg |
-| <nowiki><del></nowiki> | törölt szöveg |
-<html>
-<b>félkövér</b> szöveg
-<br />
-<big>nagy</big> szöveg
-<br />
-<em>kiemelt</em> szöveg
-<br />
-<i>dőlt</i> szöveg
-<br />
-<small>kis</small> szöveg
-<br />
-<strong>erős</strong> szöveg
-<br />
-</html>
-<sub>alsó</sub> index és <sup>felső</sup> index
-<html>
-<ins>beszúrt</ins> szöveg
-</html>
-<del>törölt</del> szöveg
-==== HTML Számítógép kimeneti tagek ====
-^ Tag ^ Leírás ^
-| <nowiki><code></nowiki> | számítógépes kód |
-| <kbd> | billentyűzet |
-| <samp> | mintakód |
-| <tt> |teletype |
-| <var> | változó |
-| <pre> | előreformázott szöveg |
-<html>
-Kódszöveg: <code>printf("alma\n");</code>
-</html>
-<html>
-Billentyűkombinációs: <kbd>Ctrl + D</kbd>
-</html>
-<html>
-Minta: <samp>^a.*</samp>
-</html>
-<html>
-Parancs: <tt>ls -1 -F a*</tt>
-</html>
-<html>
-Változó: <var>$PATH</var>
-</html>
-<html>
-Előreformázott szöveg: <pre>    printf("Behúzással\n");</pre>
-</html>
-==== HTML idézet és definíciós tagek ====
-^ Tag ^ Leírás ^
-| <abbr> | egy rövidítés |
-| <acronym> | mozaikszó (A HTML5 nem támogatja) |
-| <address> | egy dokumentum tulajdonosának elérhetősége |
-| <bdo> | szöveg iránya |
-| <blockquote> | hosszú idézet |
-| <q> | rövid idézet |
-| <cite> | cím idézése |
-| <dfn> | egy kifejezés meghatározása |
-<html>
-<abbr>stb.</abbr>
-<abbr>u.</abbr>
-<abbr>dec.</abbr>
-<abbr>feb.</abbr>
-</html>
-<html>
-<acronym>HTML</acronym>
-<acronym>MÁV</acronym>
-<acronym>ELTE</acronym>
-<acronym>BKV</acronym>
-</html>
-<html>
-<address>Nagy József<br />
-(30) 123-4567
-<br />
-nagy.jozsef@valahol.tld
-</address>
-</html>
-A szöveg irányának megváltoztatása:
-Normál szöveg
-<code html>
-<bdo dir="ltr">Valami szöveg</bdo>
-</code>
-Fordított irány:
-<code html>
-<bdo dir="rtl">Valami szöveg</bdo>
-</code>
-Normál szöveg:
-<html>
-<br /><br />
-<bdo dir="ltr" style="border: 1px solid blue; padding: 10px;">Valami szöveg</bdo>
-</html>
-A fordított szöveg megjelenítve:
-<html>
-<br /><br />
-<bdo dir="rtl" style="border: 1px solid blue; padding: 10px;">Valami szöveg</bdo>
-</html>
-===== Gyakorlat =====
-  * Milyen elemmel határozunk meg fejezetcímeket?
-  * Hány fejezetcímet szintet tudunk meghatározni?
-  * Milyen elemmel adunk meg címeket?
-===== Lista =====
-==== Számozatlan lista ====
-<code html>
-<ul>
-  <li>Kávé</li>
-  <li>Tea</li>
-  <li>Tej</li>
-</ul>
-</code>
-==== Számozott lista ====
-<code html>
-<ol>
-  <li>Kávé</li>
-  <li>Tea</li>
-  <li>Tej</li>
-</ol>
-</code>
-<code html>
-<ol start="50">
-  <li>Kávé</li>
-  <li>Tea</li>
-  <li>Tej</li>
-</ol>
-</code>
-<code html>
-<ol reversed="reversed">
-  <li>Kávé</li>
-  <li>Tea</li>
-  <li>Tej</li>
-</ol>
-</code>
-Egymásbaágyazás:
-<code html>
-<ol>
-  <li>Kávé</li>
-  <li>Tea
-    <ol>
-      <li>víz</li>
-      <li>fű</li>
-      <li>édesítő</li>
-    </ol>
-  </li>
-  <li>Tej</li>
-</ol>
-</code>
-<html>
-<ol>
-  <li>Kávé</li>
-  <li>Tea
-    <ol>
-      <li>víz</li>
-      <li>fű</li>
-      <li>édesítő</li>
-    </ol>
-  </li>
-  <li>Tej</li>
-</ol>
-</html>
-==== Böngésző támogatottság ====
-A legtöbb jelentős böngésző támogatja az <ol> taget.
-==== Definíció és használat ====
-Az <ol> tag egy számozott listát definiál.
-Használd az <li> taget a lista elemeinek meghatározásához.
-==== Különbség a HTML 4.01 és a HTML5 között ====
-A "start" attribútum elavult a HTML 4.01-ben de újra támogatott a HTML5-ben.
-A "reversed" új a HTML5-ben.
-A "compact" és a "type" attribútum elavult a HTML 4.01-ben és nincs támogatva a HTML5-ben.
-==== Tippek és megyjegyzések ====
-Tipp: Számozatlan listához használd az <ul> taget.
-Tipp: Használj CSS a stílus meghatározásához.
-==== Attribútumok ====
-(Új) : Új a HTML5-ben.
-^ Attribútum ^ Érték ^ Leírás ^
-| reversed (Új) | reversed | Csökkenő sorrend meghatározása (9,8,7...) |
-| start | szám	| Kiindulási érték maghatározása a listában |
-| type | 1 \\ A \\ a \\ I \\ i | Listajelző megadása |
-==== Global Attributes ====
-Az  <ol> tag támogatja az globális attribútumokat a HTML5-ben.
-==== Eseményattribútum ====
-Az <ol> tag támogatja az esemény attribútumokat a HTML5-ben.
-==== Definíciós lista ====
-<code html>
-<dl>
-  <dt>Kávé</dt>
-    <dd>feket forró ital</dd>
-  <dt>Tej</dt>
-    <dd>Fehér hideg ital</dd>
-</dl>
-</code>
-HTML elemek:
-| <dl> | Egy definíciós lista definiálása |
-| <dt> | Egy definíciós lista egy elemét definiálja |
-| <dd> | Egy definíciós lista egy elemének leírása |
-===== Képek beillesztése =====
-Képek beillesztésénél ügyeljünk arra, hogy  megmutassuk a szöveg és a beillesztett kép
-közötti kapcsolatot.
-A weblapra illeszthető képtípusok:
-  * .jpg (Fényképek beillesztése)
-  * .gif (Rajzok beillesztése)
-  * .png (Vegyes felhasználásra)
-<code html>
-<img src="fajlneve.jpg" alt="A Kép leírása">
-</code>
-A képnek és a html állománynak egy könyvtárban kell lenniük.
-<code html>
-<img src="fajlneve.jpg" alt="A Kép leírása" width="800" height="600">
-</code>
-===== Táblázat =====
-<code html>
-<table border="1">
-  <tr>
-    <th>Hónap</th>
-    <th>Spórolás</th>
-  </tr>
-  <tr>
-    <td>Január</td>
-    <td>1000 Ft</td>
-  </tr>
-</table>
-</code>
-<html>
-<table border="1">
-  <tr>
-    <th>Hónap</th>
-    <th>Spórolás</th>
-  </tr>
-  <tr>
-    <td>Január</td>
-    <td>1000 Ft</td>
-  </tr>
-</table>
-</html>
-===== Hypertext =====
-A hypertext a tulajdonképpeni link. Linket az "a" elemmel hozunk létre:
-<code html>
-<a>A link tartalma</a>
-</code>
-Hova linkeljünk? Linkelhetünk egy másik weblapra, vagy az aktuális lap egy pontjára, vagy a másik lap egy adott pontjára.
-===== Beépített weblap =====
-==== Egy weblap beépítve ====
-<code html>
-<iframe src="https://szit.hu/download/doboz.html" width="300" height="200"></iframe>
-</code>
-<html>
-<iframe src="https://szit.hu/download/doboz.html" width="300" height="200"></iframe>
-</html>
-Szegély:
-  frameborder="0"
-==== Egy link céljaként ====
-<code html>
-<iframe src="https://szit.hu/download/doboz.html" name="iframe_a" width="500" height="200"></iframe>
-<p><a href="https://szit.hu/oktatas" target="iframe_a">szit.hu/oktatas</a></p>
-</code>
-<html>
-<iframe src="https://szit.hu/download/doboz.html" name="iframe_a" width="500" height="200"></iframe>
-<p><a href="https://szit.hu/doku.php?id=oktatas" target="iframe_a">szit.hu/doku.php?id=oktatas</a></p>
-</html>
-===== Űrlap =====
-Az űrlapokkal valósítjuk meg az interaktív weblapokat. Egy weblap nem
-attól interaktív, hogy különböző dolgok mozognak rajta. Attól lesz interaktív,
-hogy a felhasználó adatokat küld a szerver felé. Ezt pedig űrlapok
-segítségével lehet megtenni. Az űrlap mindig adatokat kér
-tőlünk, amit egy "Elküldés" gombbal el kell küldenünk a szervernek.
-==== Űrlap létrehozása ====
-Űrlapot a form elemmel tudunk beszúrni. Van két kötelező tulajdonsága,
-az action és a method. Az action értékeként adjuk meg, hogy milyen
-szerveroldali script fogja feldolgozni az űrlapot. A method
-értékeként adjuk meg, hogy milyen metódussal küldjük az űrlapelemet:
-<code html urlap.html>
-<form action="akcio.php" method="POST">
-  Vezetéknév: <input type="text" name="vnev" value="" /><br />
-  Keresztnév:<input type="text" name="knev" value="" /><br />
-<input type="submit" value="Elküld" />
-</form>
-</code>
-<html>
-<div style="border-style:solid; border-width:1px; padding: 5px;">
-<form action="akcio.php" method="POST">
-  Vezetéknév: <input type="text" name="vnev" value="" /><br />
-  Keresztnév:<input type="text" name="knev" value="" /><br />
-<input type="submit" value="Elküld" />
-</form>
-</div>
-</html>
-Kétféle metódussal küldhetjük el űrlapjainkat:
-  * GET
-  * POST
-=== A GET metódus ===
-Az adatokat a meghívó URL paramétereként adjuk át.
-=== A POST metódus ===
-Az adatok egy adatként kerülnek átadásra a szerver számára.
-==== Űrlap elemek ====
-=== Beviteli mező ===
-<code html>
-<input type="text">
-</code>
-<html>
-<input type="text">
-</html>
-Az input tag-el többféle űrlapelem is meghatározható. Hogy melyik jelenik meg
-az mindig a type tulajdonságtól függ. A text értékkel egy beviteli mezőt
-jeleníthetünk meg. Kötelező tulajdonság még a name. Ezzel adjuk meg,
-milyen néven hivatkozhat a beviteli mező tartalmára a feldolgozó program.
-Nem kötelező tulajdonság a value. Ezzel kezdőértéket írhatunk a bevitelimezőbe.
-<code html>
-<input type="text" name="nev" value="Névtelen">
-</code>
-<html>
-<input type="text" name="nev" value="Névtelen">
-</html>
-=== Elküldés gomb ===
-<code html>
-<input type="submit">
-</code>
-<html>
-<input type="submit">
-</html>
-=== Törlés gomb ===
-<code html>
-<input type="reset">
-</code>
-<html>
-<input type="reset">
-</html>
-Még egy gomb
-<code html>
-<button type="button">Klikkelj ide!</button>
-</code>
-<html>
-<button type="button">Klikkelj ide!</button>
-</html>
-==== Rádiógombok ====
-<code html>
-<form action="feldolgoz.php" method="POST">
-  <input type="radio" name="nem" value="ferfi" /> Férfi<br />
-  <input type="radio" name="nem" value="no" /> Nő<br />
-  <input type="submit" value="Mehet" />
-</form>
-</code>
-<html>
-<div style="border-style: solid; border-width:1px; padding:5px; ">
-<form action="feldolgoz.php" method="POST">
-  <input type="radio" name="nem" value="ferfi" /> Férfi<br />
-  <input type="radio" name="nem" value="no" /> Nő<br />
-  <input type="submit" value="Mehet" />
-</form>
-</div>
-</html>
-A rádiógomboknál nagyon fontos, hogy name tulajdonság azonos
-értékkel legyen kitöltve az egy csoportba tartozó radiógomboknál.
-A böngésző ebből tudja, hogy mely rádiógombok tartoznak egy csoportba.
-Ha kattintunk egyik rádiógombra, az előzőleg aktív rádiógomb jelöltségének
-meg kell szűnnie, ha az egy csoportban van az újonnan kattintottal.
-==== Jelölőnégyzet ====
-<code html>
-<form>
-<input type="checkbox" name="jarmu" value="kerekpar" /> Van kerékpárom<br />
-<input type="checkbox" name="jarmu" value="kocsi" /> Van kocsim<br />
-<input type="submit" value="Mehet" />
-</form>
-</code>
-<html>
-<div style="border-style: solid; border-width: 1px; padding: 5px;">
-<form>
-<input type="checkbox" name="jarmu" value="kerekpar" /> Van kerékpárom<br />
-<input type="checkbox" name="jarmu" value="kocsi" /> Van kocsim<br />
-<input type="submit" value="Mehet" />
-</form>
-</div>
-</html>
-==== Szöveghely ====
-<code html>
-<textarea rows="3" cols="20">
-Lorem ipsum dolor sit amet.
-</textarea>
-</code>
-<html>
-<textarea rows="3" cols="20">
-Lorem ipsum dolor sit amet.
-</textarea>
-</html>
-==== Legördülő listadoboz ====
-=== Egyszerű kombóbox ===
-<code html>
-<select>
-  <option>Opel</option>
-  <option>Ford</option>
-  <option>Volvo</option>
-  <option>Saab</option>
-  <option>Mercedes</option>
-  <option>Audi</option>
-</select>
-</code>
-<html>
-<select>
-  <option>Opel</option>
-  <option>Ford</option>
-  <option>Volvo</option>
-  <option>Saab</option>
-  <option>Mercedes</option>
-  <option>Audi</option>
-</select>
-</html>
-=== Alcsoportok ===
-<code html>
-<select>
-  <optgroup label="Svéd kocsik">
-    <option value="volvo">Volvo</option>
-    <option value="saab">Saab</option>
-  </optgroup>
-  <optgroup label="Német kocsik">
-    <option value="mercedes">Mercedes</option>
-    <option value="audi">Audi</option>
-  </optgroup>
-</select>
-</code>
-<html>
-<select>
-  <optgroup label="Svéd kocsik">
-    <option value="volvo">Volvo</option>
-    <option value="saab">Saab</option>
-  </optgroup>
-  <optgroup label="Német kocsik">
-    <option value="mercedes">Mercedes</option>
-    <option value="audi">Audi</option>
-  </optgroup>
-</select>
-</code>
-</html>
-=== Attribútumok ===
-<code html>
-<select name="tipus">
-  <option value="opel">Opel</option>
-  <option value="ford">Ford</option>
-  <option value="volvo" selected="selected">Volvo</option>
-  <option value="saab">Saab</option>
-  <option value="mercedes">Mercedes</option>
-  <option value="audi">Audi</option>
-</select>
-</code>
-=== Listadoboz ===
-<code html>
-<select name="tipus" miltiple size="3">
-  <option value="opel">Opel</option>
-  <option value="ford">Ford</option>
-  <option value="volvo" selected="selected">Volvo</option>
-  <option value="saab">Saab</option>
-  <option value="mercedes">Mercedes</option>
-  <option value="audi">Audi</option>
-</select>
-</code>
-<html>
-<select name="tipus" miltiple size="3">
-  <option value="opel">Opel</option>
-  <option value="ford">Ford</option>
-  <option value="volvo" selected="selected">Volvo</option>
-  <option value="saab">Saab</option>
-  <option value="mercedes">Mercedes</option>
-  <option value="audi">Audi</option>
-</select>
-</html>
-==== Vizuális elemek ====
-<code html>
-<form>
-<fieldset>
-<legend>Személyes:</legend>
-Név: <input type="text" size="30" /><br />
-Email: <input type="text" size="30" /><br />
-Születés dátuma: <input type="text" size="10" />
-</fieldset>
-</form>
-</code>
-<html>
-<form>
-<fieldset>
-<legend>Személyes:</legend>
-Név: <input type="text" size="30" /><br />
-Email: <input type="text" size="30" /><br />
-Születés dátuma: <input type="text" size="10" />
-</fieldset>
-</form>
-</html>
-==== Fájlfeltöltés ====
-=== Űrlap ===
-<code html>
-<form method="post" action="upload.php" enctype="multipart/form-data">
-  <input type="file" name="kep" />
-  <input type="submit" value="Feltöltés" />
-</form>
-</code>
-<html>
-<form method="post" action="upload.php" enctype="multipart/form-data">
-  <input type="file" name="kep" />
-  <input type="submit" value="Feltöltés" />
-</form>
-</html>
-===== Formázáshoz használt elemek =====
-==== div ====
-A div elemmel blokk szintű dobozokat hozhatunk létre.
-==== span ====
-A span elemmel inline szintű elemet hozunk létre.
-Például egy szövegrészletet külön szeretnék formázni.
-<code html>
-Lorem ipsum <span>dolores</span> sit amet.
-</code>
-<code css>
-span {
-    text-decoration: undrline;
-}
-</code>
-Vagy
-<code html>
-Lorem ipsum <span class="dol">dolores</span> sit amet.
-</code>
-<code css>
-span.dol {
-    text-decoration: undrline;
-}
-</code>
-===== Link tag =====
-===== A meta tag =====
-==== Újratöltés ====
-<code html>
-<head>
-<meta http-equiv="refresh" content="30">
-</head>
-</code>
-===== Átirányítás =====
-<code html>
-<meta http-equiv="refresh" content="0; url=http://masikdomain.valahol">
-</code>
-Esetleg 10 másodpercre állítjuk, így 10 másodperc múlva átirányítunk:
-<code html index.html>
-<html>
-<head>
-<!-- Send users to the new location. -->
-<title>redirect</title>
-<meta http-equiv="refresh" content="10;URL=http://www.masikdomain.valahol">
-</head>
-<body>
-This page has moved. You will be
-automatically redirected
-to its new location in 10 seconds.
-If you aren't forwarded
-to the new page,
-<a href="http://www.masikdomain.valahol">
-click here</a>.
-</body>
-</html>
-</code>
-===== Használható színek =====
-^  Szín  ^ Hex  ^  RGB  ^
-| AliceBlue | F0F8FF | 240,248,255 |
-| AntiqueWhite | FAEBD7 | 250,235,215 |
-| Aqua | 00FFFF | 0,255,255 |
-| Aquamarine | 7FFFD4 | 127,255,212 |
-| Azure | F0FFFF | 240,255,255 |
-| Beige | F5F5DC | 245,245,220 |
-| Bisque | FFE4C4 | 255,228,196 |
-| Black | 000000 | 0,0,0 |
-| BlanchedAlmond | FFEBCD | 255,235,205 |
-| Blue | 0000FF | 0,0,255 |
-| BlueViolet | 8A2BE2 | 138,43,226 |
-| Brown | A52A2A | 165,42,42 |
-| BurlyWood | DEB887 | 222,184,135 |
-| CadetBlue | 5F9EA0 | 95,158,160 |
-| Chartreuse | 7FFF00 | 127,255,0 |
-| Chocolate | D2691E | 210,105,30 |
-| Coral | FF7F50 | 255,127,80 |
-| CornflowerBlue | 6495ED | 100,149,237 |
-| Cornsilk | FFF8DC | 255,248,220 |
-| Crimson | DC143C | 220,20,60 |
-| Cyan | 00FFFF | 0,255,255 |
-| DarkBlue | 00008B | 0,0,139 |
-| DarkCyan | 008B8B | 0,139,139 |
-| DarkGoldenRod | B8860B | 184,134,11 |
-| DarkGray | A9A9A9 | 169,169,169 |
-| DarkGrey | A9A9A9 | 169,169,169 |
-| DarkGreen | 006400 | 0,100,0 |
-| DarkKhaki | BDB76B | 189,183,107 |
-| DarkMagenta | 8B008B | 139,0,139 |
-| DarkOliveGreen | 556B2F | 85,107,47 |
-| Darkorange | FF8C00 | 255,140,0 |
-| DarkOrchid | 9932CC | 153,50,204 |
-| DarkRed | 8B0000 | 139,0,0 |
-| DarkSalmon | E9967A | 233,150,122 |
-| DarkSeaGreen | 8FBC8F | 143,188,143 |
-| DarkSlateBlue | 483D8B | 72,61,139 |
-| DarkSlateGray | 2F4F4F | 47,79,79 |
-| DarkSlateGrey | 2F4F4F | 47,79,79 |
-| DarkTurquoise | 00CED1 | 0,206,209 |
-| DarkViolet | 9400D3 | 148,0,211 |
-| DeepPink | FF1493 | 255,20,147 |
-| DeepSkyBlue | 00BFFF | 0,191,255 |
-| DimGray | 696969 | 105,105,105 |
-| DimGrey | 696969 | 105,105,105 |
-| DodgerBlue | 1E90FF | 30,144,255 |
-| FireBrick | B22222 | 178,34,34 |
-| FloralWhite | FFFAF0 | 255,250,240 |
-| ForestGreen | 228B22 | 34,139,34 |
-| Fuchsia | FF00FF | 255,0,255 |
-| Gainsboro | DCDCDC | 220,220,220 |
-| GhostWhite | F8F8FF | 248,248,255 |
-| Gold | FFD700 | 255,215,0 |
-| GoldenRod | DAA520 | 218,165,32 |
-| Gray | 808080 | 128,128,128 |
-| Grey | 808080 | 128,128,128 |
-| Green | 008000 | 0,128,0 |
-| GreenYellow | ADFF2F | 173,255,47 |
-| HoneyDew | F0FFF0 | 240,255,240 |
-| HotPink | FF69B4 | 255,105,180 |
-| IndianRed | CD5C5C | 205,92,92 |
-| Indigo | 4B0082 | 75,0,130 |
-| Ivory | FFFFF0 | 255,255,240 |
-| Khaki | F0E68C | 240,230,140 |
-| Lavender | E6E6FA | 230,230,250 |
-| LavenderBlush | FFF0F5 | 255,240,245 |
-| LawnGreen | 7CFC00 | 124,252,0 |
-| LemonChiffon | FFFACD | 255,250,205 |
-| LightBlue | ADD8E6 | 173,216,230 |
-| LightCoral | F08080 | 240,128,128 |
-| LightCyan | E0FFFF | 224,255,255 |
-| LightGoldenRodYellow | FAFAD2 | 250,250,210 |
-| LightGray | D3D3D3 | 211,211,211 |
-| LightGrey | D3D3D3 | 211,211,211 |
-| LightGreen | 90EE90 | 144,238,144 |
-| LightPink | FFB6C1 | 255,182,193 |
-| LightSalmon | FFA07A | 255,160,122 |
-| LightSeaGreen | 20B2AA | 32,178,170 |
-| LightSkyBlue | 87CEFA | 135,206,250 |
-| LightSlateGray | 778899 | 119,136,153 |
-| LightSlateGrey | 778899 | 119,136,153 |
-| LightSteelBlue | B0C4DE | 176,196,222 |
-| LightYellow | FFFFE0 | 255,255,224 |
-| Lime | 00FF00 | 0,255,0 |
-| LimeGreen | 32CD32 | 50,205,50 |
-| Linen | FAF0E6 | 250,240,230 |
-| Magenta | FF00FF | 255,0,255 |
-| Maroon | 800000 | 128,0,0 |
-| MediumAquaMarine | 66CDAA | 102,205,170 |
-| MediumBlue | 0000CD | 0,0,205 |
-| MediumOrchid | BA55D3 | 186,85,211 |
-| MediumPurple | 9370D8 | 147,112,219 |
-| MediumSeaGreen | 3CB371 | 60,179,113 |
-| MediumSlateBlue | 7B68EE | 123,104,238 |
-| MediumSpringGreen | 00FA9A | 0,250,154 |
-| MediumTurquoise | 48D1CC | 72,209,204 |
-| MediumVioletRed | C71585 | 199,21,133 |
-| MidnightBlue | 191970 | 25,25,112 |
-| MintCream | F5FFFA | 245,255,250 |
-| MistyRose | FFE4E1 | 255,228,225 |
-| Moccasin | FFE4B5 | 255,228,181 |
-| NavajoWhite | FFDEAD | 255,222,173 |
-| Navy | 000080 | 0,0,128 |
-| OldLace | FDF5E6 | 253,245,230 |
-| Olive | 808000 | 128,128,0 |
-| OliveDrab | 6B8E23 | 107,142,35 |
-| Orange | FFA500 | 255,165,0 |
-| OrangeRed | FF4500 | 255,69,0 |
-| Orchid | DA70D6 | 218,112,214 |
-| PaleGoldenRod | EEE8AA | 238,232,170 |
-| PaleGreen | 98FB98 | 152,251,152 |
-| PaleTurquoise | AFEEEE | 175,238,238 |
-| PaleVioletRed | D87093 | 219,112,147 |
-| PapayaWhip | FFEFD5 | 255,239,213 |
-| PeachPuff | FFDAB9 | 255,218,185 |
-| Peru | CD853F | 205,133,63 |
-| Pink | FFC0CB | 255,192,203 |
-| Plum | DDA0DD | 221,160,221 |
-| PowderBlue | B0E0E6 | 176,224,230 |
-| Purple | 800080 | 128,0,128 |
-| Red | FF0000 | 255,0,0 |
-| RosyBrown | BC8F8F | 188,143,143 |
-| RoyalBlue | 4169E1 | 65,105,225 |
-| SaddleBrown | 8B4513 | 139,69,19 |
-| Salmon | FA8072 | 250,128,114 |
-| SandyBrown | F4A460 | 244,164,96 |
-| SeaGreen | 2E8B57 | 46,139,87 |
-| SeaShell | FFF5EE | 255,245,238 |
-| Sienna | A0522D | 160,82,45 |
-| Silver | C0C0C0 | 192,192,192 |
-| SkyBlue | 87CEEB | 135,206,235 |
-| SlateBlue | 6A5ACD | 106,90,205 |
-| SlateGray | 708090 | 112,128,144 |
-| SlateGrey | 708090 | 112,128,144 |
-| Snow | FFFAFA | 255,250,250 |
-| SpringGreen | 00FF7F | 0,255,127 |
-| SteelBlue | 4682B4 | 70,130,180 |
-| Tan | D2B48C | 210,180,140 |
-| Teal | 008080 | 0,128,128 |
-| Thistle | D8BFD8 | 216,191,216 |
-| Tomato | FF6347 | 255,99,71 |
-| Turquoise | 40E0D0 | 64,224,208 |
-| Violet | EE82EE | 238,130,238 |
-| Wheat | F5DEB3 | 245,222,179 |
-| White | FFFFFF | 255,255,255 |
-| WhiteSmoke | F5F5F5 | 245,245,245 |
-| Yellow | FFFF00 | 255,255,0 |
-| YellowGreen | 9ACD32 | 154,205,50 |
-===== Entitások =====
-  * ő = 337
-  * Ő = 336
-  * ű = 369
-  * Ű = 368
-Így használjuk
-  &#336;
-===== Az oldal nyelve =====
-<code html>
-<meta http-equiv="Content-Language" content="hu" />
-</code>

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon