A HTML a HyperText Markup Language (hiperszöveg leírónyelv) rövidítése. Az a nyelv, amelynek segítségével weboldalakat lehet létrehozni. Szabványosítását egy független szervezet, a World Wide Web Consortium (W3C) végzi.
A W3C az interneten elérhető a http://www.w3c.org címen.
A nyelv 1997-ben jelent meg.
Egy HTML-oldal folyamatos ASCII-szöveget tartalmaz, amelyet az oldal tartalma és a megjelenítéséhez szükséges elemek vegyesen alkotnak. Az oldal végső formája a böngészőben jelenik meg (alakul ki), mert az értelmezi ezeket a megjelenítést szabályozó elemeket.
Ezek az elemek a tag-ek (ejtsd: “tegek"). A tag-eket tulajdonságokkal lehet ellátni, ezek az attribútumok. Formailag a tag-eket az attribútumaikkal együtt hegyes zárójelek közé < > kell írni, pl. <HR>. A tag-ek többsége két részből áll: egy nyitótag-ből pl. <HTML> és egy zárótag-ből pl. </HTML>, amelyek között a formázandó, megjelenítendő stb. tartalmi rész van (az, amire a tag vonatkozik, ill. amit megjelenít). A tag-eket egymásba lehet ágyazni.
kis- és nagybetű nem megkülönböztetett,
szövegtagolás: a forráskódban található ismételt szóközöket és sortöréseket nem veszi figyelembe a böngésző. (Csak egy szóközt fog megjeleníteni, mindegy, hogy mennyi szerepel a forrásban).
<HTML> .. </HTML> meghatározza a HTML dokumentumot. Az oldal teljes egésze e tag-ben van.
<HEAD> .. </HEAD> megadja a HTML dokumentum fejrészét. A fejrészben olyan ún. metainformációk találhatók (ld. később), amelyek az oldal készítőjére, formátumára, stb. vonatkoznak és nem fognak megjelenni a böngészőben. Egyetlen kivétel a <TITLE> .. </TITLE>, ami az oldal címét adja meg és a böngésző címsorában jelenik meg.
<BODY> .. </BODY> az oldal törzse. Az oldalon megjelenő alkotórészeket ide kell beágyazni.
Pl.:
<html>
<head>
<title>Az oldal címe</title>
</head>
<body>
Ez az első oldalam!
</body>
</html>
Pl.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
megadja az oldal formátumát, HTML verziószámát stb.
olyan oldalelemek, amelyek az oldal leírását, besorolását segítik, készítőjét azonosítják, stb. Nem jelennek meg a böngészőben (csak forráskód nézetben látszanak).
formátuma:
<META
NAME="név"
VALUE="érték"
LANG="használt nyelv
megadasa"
CONTENT="dok. tartalmara
utal"
HTTP-EQUIV="http valtozatra
utal">
Példák:
Az oldal szerzője nevét és e-mail címét így adhatja meg:
<META NAME="AUTHOR" CONTENT="szerző neve">
<LINK REV="MADE" HREF="mailto: nev@email.cím">
Ha az oldalt regisztráljuk a keresőkben, a keresők az itt megadott kulcsszavak alapján fogják indexelni az oldalt (nem érdemes 25-nél több kulcsszót megadni). Ez elviekben azt jelenti, hogyha valaki a keresőbe beírja pl. a Dreamweaver szót (és ezt mi kulcsszóként megadtuk a frissen regisztrált oldalunkon), akkor a kereső találatainak listájában meg fog jelenni oldalunk a látogatónak. Pl.
<META name="keywords" content="Dreamweaver, HTML, CSS, JavaScript, webfejlesztés, webtervezés">
az előző helyett inkább angolul ugyanezt:
<META name="keywords" content="Dreamweaver, HTML, CSS, JavaScript, webdeveloping, webdesign">
vagy másképp:
<META name="keywords" lang="hu" content=" Dreamweaver, HTML, CSS, JavaScript, webfejlesztés, webtervezés ">
<META name="keywords" lang="en" content=" Dreamweaver, HTML, CSS, JavaScript, webdeveloping, webdesign">
A keresés eredményének listájában a keresők a kulcsszó és az oldalak elérési útjai mellett azok rövid leírását is megjelenítik. Ehhez a description metaelemmel el kell helyeznünk oldalunk leírását (néhány mondatos ismertetését) a regisztrált oldal forrásában. Pl.
<META name="description" content="Dreamweaver leírás, HTML, CSS, JavaScript segédletek, cikkek a webfejlesztés, webtervezés témákban.">
Az oldal kódolási formátumának megadása
Erre a böngészőknek van szüksége, hogy a megfelelő kódtáblát használják az oldalak dekódolásakor, megjelenítésekor. Pl.
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
Az iso8859-2 a magyar karakterkészlet beállítását jelenti.
Az iso8859-1 a latin1 karakterkészlet beállítását jelenti.
Az oldal tartalmának frissítése megadott idő lejárta után, illetve automatikus átirányítás létrehozása:
<META http-equiv="Refresh" content="5, url=http://valahol.az.interneten.hu/">
(arra utasítja a böngészőt, hogy cserélje le 3 mp múlva a látott oldalt az általunk megadottra
<META http-equiv="Expires" content="Tue, 10 Apr 2001 12:00:00 GMT">
(megadhatjuk, hogy mikor veszti érvényét a dokumentum, ez most 2001 ápr. 12-ét déli 12 órát jelent, a greenwich-i idő szerint, vagyis Magyarországon 13 órát).
Az oldal megjelenítendő tartalma a <BODY> és a </BODY> tag-ek között szerepel. Az oldal tulajdonságai, mint pl. háttérkép vagy háttérszín, hivatkozások, bet színe, margótávolságok stb. a <BODY> attribútumai.
Margók, háttérszín, háttérkép, linkek színének megadása:
<BODY
TOPMARGIN="felső margótávolság,
LEFTMARGIN="bal margótávolság,
BACKGROUND="háttérképfájl elérési
útja és neve"
BGCOLOR="háttérszín"
TEXT="betűszínkód"
LINK="hivatkozások színe"
ALINK="aktív linkek színe"
VLINK="látogatott linkek színe">
pl.
<body bgcolor="black" text="#CCCCCC" link="#33FF00" vlink="#33CC66" alink="#FFFFFF">
A színek megadás történhet angol nevükkel (pl. black), vagy RGB-értékükkel (pl. #000000, ami szintén a feketét jelenti).
RGB érték, RGB színkód
A színek három alapszín (csatorna): Red (vörös), Green (zöld), Blue (kék) keverékéből állíthatók elő az RGB színrendszerben. (Ezt a színrendszert használják a számítógépek a minitorai)
A színkód egy 6 jegyű hexadecimális szám, ami azt fejezi ki, hogy melyik alapszínből mennyi kell. Például: #A1D354 azt jelenit, hogy a Vörös:A1, Zöld:D3, Kék:54 értékkel szerepel ebben a keverékben.
Pl:
#000000: Fekete
(nincsenek színek)
#FFFFFF: Fehér (minden alapszín maximális értékkel szerepel)
#0000FF: Kék (csak a kék színcsatorna van beállítva maximális értékkel)
Webtűrő színek
Az RGB színkóddal 16 777 215 féle szín keverhető ki. Ezek közül azonban a böngészők csak 216-ot tudnak megjeleníteni. Ezeket nevezzük webtűrő színeknek. A webtűrő színek a 00, 33, 66, 99, CC és FF hexadecimális számok kombinációjából állíthatók elő:
Példák webtűrő színekre:
#003399 #CCFF99
Betűméretek, hosszak, képméretek stb. megadásakor sokféle mértékegységet használhatunk. Alapvetően három mértékegység létezik: az abszolút a relatív és az eszköz függő.
Abszolút
Azt jelenti, hogy az pontosan akkorában fog megjelenni. Ilyen a pt (pont) 1pt=0,374mm.
Relatív
Valaminek hányszorosa, vagy hány százaléka. Például egy betű méret esetén:
1.2em: az alap betűkészlet m betű szélességének 1,2-szerese
1.2ex: az alap betűkészlet x betű magasságának 1,2-szerese
80%: az alap betűkészlet magasságának 80%-a
Eszköz függő
A méret attól függ, hogy az milyen felbontású eszközön fog megjelenni. Ilyen mértékegység a px (pixel). 20px méret az 20 képpont magasságot jelent a képernyőn. Az, hogy ez milyen magas, az attól függ, hogy a képernyőnek mekkora a felbontása.
Például egy 72dpi (72 képpont inchenként) felbontású képernyőn 20px az 24,5/72*20=6,8mm magas lesz. (egy képpont magassága: 24,5/72, 20 képpontté 20-szor ennyi).
px: (pixel) hány képpont (mérete eszköz függő). pl.: 20px. Alkalmazás: betűk, margók, képek, különböző objektumok méretezése.
pt: pont. A betűk szabványos mértékegysége. (mérete abszolút) pl: 12pt. Alkalmazás: betűk méretezése.
ex: 1.5ex azt jelenti, hogy az alap betűkészlet x betű magasságának 1,5 szöröse. (mérete relatív) Alkalmazás: betűk méretezése.
em: 1.5em azt jelenti, hogy az alap betűkészlet m betű szélességének 1,5 szöröse. Alkalmazás: betűk méretezése. szöröse. (mérete relatív) Alkalmazás: betűk méretezése.
%: 150% Betűk esetén az alap betűkészlet magasságának a 150%-a. Egy kép esetén mondjuk width="150%" a kép szélessége az eredeti szélesség 150%-a lesz. Egy vonal esetén: width="80%" azt jelenti, hogy a böngésző a keret szélességének 80%-át fogja kitölteni. (mérete relatív)
egy szám: A betűméret egy –7 és +7 közötti skálán állítható be. A böngészők által megjelenített alapértelmezett betűméret a 3-as, a nagyobb, vagy pozítív előjeles szám ennél nagyobb, a kisebb vagy negatív előjeles szám pedig kisebb méretet eredményez.
Bekezdések létrehozása: a kívánt bekezdést az oldal törzsrészében, a <p> és </p> tag-ek közé írjuk.
Ha vízszintesen igazítani szeretnénk a bekezdést, használjuk az ALIGN attribútumot. Pl.
<p align="left"> Ez itt egy egész bekezdés balra igazítva.</p>
<p align="right"> Ez itt egy egész bekezdés jobbra igazítva.</p>
<P align="center"> Ez itt egy egész bekezdés középre igazítva.</p>
<p align=" justify"> Ez itt egy egész bekezdés sorkizárt.</p>
Sortörések: mivel a HTML forráskódban a begépelt szóközök és végejelek (vagyis ha az Entert leütjük) figyelmen kívül maradnak, egy sortörést a <br> tag segítségével helyezhetünk el az oldalon.
Pl.
ketté töri<br>a sort.
Ha azt szeretnénk, hogy a begépelt szöveg változatlan formában, vagyis a szóközökkel Enterekkel együtt jelenjen meg, helyezzük el a <pre> és a </pre> tag-ek (jelentése: preformatted, vagyis előformázott) között.
Pl.
<Pre>
Ez itt egy
előformázott szövegrész lesz. Csak rövid
szövegrészeknél használjuk.
</pre>
Ha sordobás nélküli formázást szeretnénk, pl. hosszabb szövegekre, használjuk a <DIV> tag-et (az ALIGN attribútummal együtt is):
<div align="center">
Ezt is középre igazítottuk, de nem követi sordobás.
</div>
Font
A <font> tag segítségével megadhatjuk a betűcsaládot (egy konkrét betűtípus használata nem szerencsés, mert nem biztos, hogy a látogató gépén is telepítve van az adott fontkészlet), betűméretet, betűszínt. Formátuma:
<font face="betűtípus" color="színkód" size="szám">
szöveg
</font>
Pl.
<font face="Verdana, Arial, Helvetica, sans-serif" color="green" size="4">
Egy kicsit nagyobb betűs szöveg, ami Verdana (vagy Arial, vagy Helvetica, vagy egyéb talnélküli) betűtípussal jelenik meg, ha az telepítve van, zöld színben.
</font>
Betűméret
A betűméret egy –7 és +7 közötti skálán állítható be. A böngészők által megjelenített alapértelmezett betűméret a 3-as, a nagyobb, vagy pozítív előjeles szám ennél nagyobb, a kisebb vagy negatív előjeles szám pedig kisebb méretet eredményez.
A betűméret megadható mértékegységgel is: pl. 12px, 12pt, 12em, 12%
Karakterformázások
Ezek is mindig a nyitó és zárótag-ek közötti részekre vonatkoznak.
<b>félkövér betűformátumot eredményez</b>
<i>dőltbetűs formátumot eredményez</i>
<u>aláhúzott formátumot eredményez. vigyázat! megtévesztő lehet a gyakori használata, hiszen általában a hivatkozásokat szokták aláhúzni.</u>
<s>áthúzott (strikethrough)formátumot eredményez</s>
<tt>fixpontos betűket eredményez. ilyen pl. a courier betűcsalád, vagy az írógépek betűi.</tt>
<em>kiemeli a szöveget, megfelelel a dőltbetűs írásmódnak.</em>
<cite>idézetekre használható.</cite>
<var>változónevet jelölhetünk vele.</var>
<strong>ez is egy kiemelési lehetőség, megfelel a félkövér betűs írásnak.</strong>
<code>forráskódok írásánál használjuk.</code>
<kbd>billentyűfelirat jelzése</kbd>
<bq>idézet megjelenítése</bq>
<big>nagyméretű betűformátumot eredményez</big>
<small>kisméretű betűformátumot eredményez</small>
<sub>alsóindexet eredményez, pl. kémiai képleteknél használható.</sub>
<sup>felsőindexet eredményez, pl. négyzetszámok, egyenletek írásánál lehet használni.</sup>
<blink>villogó szöveget eredményez. vigyázat! ez idegesítő lehet hosszú távon! csak netscape alatt működik.</blink>
<h1>legfelső szintű címsor</h1>
<h2>második szinű alcímsor</h2>
<h3>harmadik szintű alcímsor</h3>
<h4>negyedik szintű alcímsor</h4>
<h5>ötödik szintű alcímsor</h5>
<h6>hatodik szintű alcímsor</h6>
<HR> vízszintes elválasztóvonal az oldalon
Használata:
<hr
align="left|right|center"
noshade size="szám" (vastagság)
width="szám" > (vonal
hossz)
Pl.
<hr align="center" width="80%">
<hr><img src="1.gif" width="100%" height="2">
<hr><img src="2.gif" width="2" height="100%">
(rendezetlen) lista (unordered list):
Pl.
<ul>
<li>Ausztria
<li>Szlovákia
<li>Ukrajna
<li>Románia
</ul>
Kimenet:
· Ausztria
· Szlovákia
· Ukrajna
· Románia
(rendezett) lista (ordered list):
<ol
start="2"(kezdősorszám)
title="lista"
type="A(nagybetűk)|a(kisbetűk)|I(nagy
római számok)|i(kis római számok)|1(arab számok)">
<li>1. Listaelem
<li>2. Listaelem
</ol>
Pl.:
1. helyezett
2. helyezett
3. helyezett
<dir>
<li>első tag
<li>második tag
<li>harmadik tag
<li>negyedik tag
</dir>
<menu>
<li>első menü
<li>második menü
</menu>
(a leírás tördelése automatikusan történik)
<dl compact(tömör formához!)>
<lh>ez a leíró lista fejléce</lh>
<dt>első sor, pl. egy fogalom neve</dt>
<dd>az első sorhoz tartozó leírás, a fogalom magyarázata.</dd>
<dt>második sor, pl. a következő megmagyarázandó fogalom neve</dt>
<dd>a második sorhoz tartozó leírás</dd>
</dl>
Hivatkozások, linkek: az oldalakon belüli, illetve az oldalak közötti kapcsolatok létrehozására használhatók.
<A HREF=http://www.valahol.hu/index.html>
ez egy távoli hivatkozásra ugrik
</A>
<A HREF=http://www.valahol.hu/index.html#horgony>
ez egy távoli hivatkozás konkrét részére ugrik
</A>
…
<A NAME="horgony">ideugrott</A>
A leírással kapcsolatos véleményed
<A HREF="mailto:nev@email.cim.hu">írd</A> meg!
Protokoll://számítógép:port/elérési-út/konkrét-dokumentum
(http, ftp, mailto, file, gopher, news, telnet)
pl: http://www.macromedia.com
A hivatkozások célját a TARGET attribútummal lehet megadni.
Lehetséges értékei:
_blank: új böngészőablakba tölti be a hivatkozott fájlt.
_self: az aktuális ablakba tölti be a hivatkozott fájlt, ez az alapértelmezett.
_top: a legfelső ablakba tölti be a hivatkozott fájlt (ennek pl. a kereteknél van értelme, ld. később)
_parent: a szülőablakba tölti be a hivatkozott fájlt (ez is keretes oldalaknál használható értelmesen, ld. ott)
<A HREF="http://www.valahol.hu/index.html#horgony" target="_blank">
ez egy távoli hivatkozás konkrét részére ugrik
</A>
Fontosabb képtulajdonságok
<img
align="igazítás"
src="elérési_út/fájlnév.kit"
hspace="vízsz.távolság a
szövegtől"
vspace="függ. távolság a szövegtől
"
width="szélessége"
height="magassága"
alt="helyettesítő, ismertető
szöveg">
Pl.:
<img src="logo.jpg" width="200" height="40" alt="LOGO" align="right">
<img src="logo.jpg" width="80%" alt="LOGO" align="right">
Kép használata hivatkozásként:
<a href="index2.html">
<img src="belepes.jpg" width="200" height="300" align="middle" border="0" alt="Belépés">
</a>
Gif
Graphic Interchange Format, 256 szín, veszteségesen tömörít; főleg kisebb és kevés színű, vonalas ábrákhoz haszn., transzparens, interlaced és animált gifek
Jpeg
Joint Photographic Experts Group, 16m szín, veszteséges töm. alkalmas színátmenetes képek, fényképek tárolására, a tömörítés mértékének növelésével a fileméret csökken, de a minőség romlik, a progresszív jpg az interlaced gifhez hasonlóan töltődik le
Png
Poretable Networks Graphic, a gifhez hasonló, képes színátmenetes képek tárolására is, kifejezetten a webes szempontokat vették figyelembe létrehozásakor, egyre jobban terjed. Veszteségmentesen tömörített, lehet átlátszó háttér.
1x1 pixeles képek, melyekkel tetszőleges nagyságú üres helyeket hagyhatunk az oldalon (pl. egyes szavak vagy nagyobb képek között), a kép attribútumainak változtatásával.
<TABLE> … </TABLE>
<CAPTION ALIGN="left|right|center">A táblázat címe [a táblázat felett jelenik meg]</CAPTION>
<TH> oszlopfejléc
<TR> a táblázat egy sora, amely a következő <tr>-ig ill. a táblázat végéig tart.
<TD> a táblázat egy cellája, amely a következő <td>-ig ill. a táblázat végéig tart.
</TH>, </TR>, </TD> zárótag-ek.
<TABLE BORDER="szám"[a keret szélessége] ALIGN="hely" [tábla igazítása jobbra, balra, középre]
NOWRAP [a cellák szövegének tördelését tiltja le] CELLPADDING="szám" [cella adatai és falai közötti távolság pixelben] CELLSPACING="szám" [cellák közötti távolság pixelben] BGCOLOR="színkód" [a táblázat háttérszínét határozza meg]>
A táblázat oszlopfejlécei nem csak a legfelső oszlopban szerepelhetnek, hanem a táblázatban bárhol (pl. sorok címeként is).
Mind az oszlopfejekben, mind a cellákban használhatók a következő formázási opciók:
COLSPAN="szám": Egyesít több egymással szomszédos cellát - vízszintesen.
ROWSPAN="szám": Egyesít több egymás alatti cellát - függőlegesen.
ALIGN="hely": Igazítja a cellák tartalmát - vízszintesen. Lehetséges értékei: left, center, right, justify, decimal.
VALIGN="hely": Igazítja a cellák tartalmát - függőlegesen. Lehetséges értékei: top, middle, bottom, baseline.
Egy kétsrors táblázat, aminek a felső sorában egy logo van.
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="39" background="kep.jpg">
<img src="logo.jpg" width="200" height="40" alt="LOGO" align="right">
</td>
</tr>
<tr bgcolor="#000000">
<td height="30">
Ide kerül a menü egyszer majd.
</td>
</tr>
</table>
A táblázatok tetszőleges mértékig egymásba ágyazhatók. Pl.:
<table>
<th>…</th>
<tr>
<td>
<table>…</table>
<td>
</tr>
</table>
Egyetlen böngészőablakban több HTML dokumentum is megjeleníthető a keretcsoportok, vagyis a <FRAMESET> és </FRAMESET> valamint a szorosan kapcsolódó keret, vagyis <FRAME> tag használatával. A <FRAMESET ROWS="oszlopszélességek"> tag-gel osztható fel a képernyő függőlegesen, a <FRAMESET COLS="sormagasságok"> segítségével pedig vízszintesen. Az oszlop- és sorértékek megadhatók képpontban ill. százalékosan (egymástól vesszővel elválasztva), a maradék képernyőterületre pedig a * helyettesítő karakter használatával lehet hivatkozni. Mivel egyszerre csak vízszintesen, vagy csak függőlegesen osztható fel a képernyő, ezért ha mindkét irányban osztott böngészőablak létrehozásához a <FRAMESET> elemeket egymásba kell ágyazni! Tehát például egy függőleges felosztáson belül kell vízszintesen elválasztott részekre tagolni egy oszlopot. A fenti módon definiált területekre a <FRAME SRC="forrás"> tölti be a megadott teljes HTML fájlt, vagy annak egy maghatározott részét.
A keretek tulajdonságainak részletesebb megadása:
<FRAME NAME="egyedinév" SRC="forrás" TARGET="ide-tölti-be-a tartalmat" SCROLLING="érték" MARGINWIDTH="szám" MARGINHEIGHT="szám"> és jelentésük:
Az adott keretnek egyedi nevet a NAME segítségével adhatunk. Ha készítünk egy hivatkozást az egyik keretben, és szeretnénk, hogy a másik keretben jelenjen meg a hivatkozott dokumentum, a keret egyedi nevével hivatkozhatunk rá, pl. az <A HREF="forras.htm" TARGET="_masik_keret"> segítségével.
A TARGET értéke megadja, hogy a link hová mutasson: pl. a keret nevének megadásával a célfájl az adott nevű keretben fog megjelenni. Értéke természetesen lehet _top is, de ez feloldja a keretes struktúrát (!). A TARGET=_parent a “szülőkeretbe" fogja betölteni a hivatkozott oldalt. A TARGET=_blank segítségével az oldal tartalma új böngészőablakban jeleníthető meg. A TARGET=_self is működik a keretek esetében, ez az aktuális keretbe tölti az új oldalt.
SCROLLING: a yes, no és az auto értékeket veheti fel. A keretek jobboldalán és alján a gördítősávok akkor jelennek meg automatikusan, de csak ha syükség van rájuk, ha a tartalom nem fér el a keretben, és a SCROLLING=auto-t állítottuk be. A yes értékkel a böngészők mindig megjelenítik a gördítősávokat, akkor is, ha egyébként nem lenne rájuk szükség. A no beállításával a gördítősávok sosem jelennek, meg, ez bizonyos esetekben a tartalomvesztéssel járhat.
MARGINWIDTH és MARGINHEIGHT: a kereten belüli margók szélességét szabályozza képpontban.
A <FRAMESET>..<FRAMESET> tag-nek meg kell előznie a <BODY> tag-gel kijelölt dokumentumtörzset! A<NOFRAMES> tag segítségével lehet jelezni a dokumentum azon részének kezdetét, amelyet akkor kell a böngészőnek megjelenítenie csak, ha nem ismeri a kereteket. Ez a <NOFRAMES>-szel kezdődő rész tartalmazhatja a <BODY> és a </BODY> tag-eket, a keretcsoport dokumentumában.
Pl.
<html>
<head>
</head>
<frameset cols="75,*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="NO" noresize src="bal.html">
<frameset rows="85,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="felso.html" >
<frame name="mainFrame" src="kezdolap.html">
</frameset>
</frameset>
<noframes>
<body>
Ide kerül az a tartalom, ami a kereteket nem ismerő böngészőkben fog megjelenni, mint kezdőoldal.
</body>
</noframes>
</html>
A HTML dokumentumban kérdőíveket, vagyis űrlapokat is elhelyezhetünk, melyek feldolgozásához, ellenőrzéséhez külön programot kell írni. Az űrlapok segítségével látogatóink hírlevelet vagy terméket rendelhetnek meg, szavazhatnak, stb.
A <FORM METHOD="mód" ACTION="elérési_út/fájlnév.kit"> és a </FORM> tag adja meg a kitöltendő űrlapot.
Az attribútumokat célszerű mindig megadni, mert az ACTION határozza meg a feldolgozást végző program elérési útját, a METHOD pedig a kitöltött űrlap továbbítási módját. A METHOD lehetséges értékei: GET - az URL-ben, POST – külön adatcsomagban küldi el a kitöltöttt űrlapadatokat. Az alapértelmezés a GET, ami bizonyos veszélyeket rejt magában, mivel túl hosszúra nyúlhat az URL és megjelennek benne a begépelt adatok. A POST a biztonságosabb mód.
Az <INPUT NAME="név" TYPE="típus" ALIGN="hely"> segítségével meghatározható egy kitöltendő űrlapmező.
A NAME természetesen a mezőnév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. A TYPE pedig az adattípus, melyet vár a beviteli mező az ALIGN pedig az igazítás mértékét adja meg.
<input type="text" name="nev1" size="5" maxlength="10" value="Kezdőérték">
A SIZE meghatározza a beviteli mező szélességét, a MAXLENGTH="érték" pedig a bevihető maximális szöveghosszt. A Value-nek megadott szöveg megjelenik a szövegmezőben az űrlap letöltődésekor.
<input type="password" name="nev2" size="5" maxlength="10">
A jelszómező is szövegmező, de a begépelt karakterek nem jelennek meg bevitelkor, csak a helyettesítő csillagok.
Hosszabb szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság sorokban" COLS="szélesség karakterben" VALUE="szöveg">… </TEXTAREA>, amely egy beviteli ablakot nyit a COLS-ban megadott szélességben és a ROWS-ban megadott sorban. A VALUE az alapértelmezésként megjelenítendő szöveget adja meg.
<input type="hidden" name="nev3">
A rejtett mező nem jelenik meg az oldalon, ezt használják pl. az internetes áruházakban a bevásárlókosár aktuális állapotának nyilvántartására.
<input type="checkbox" name="nev4" value="checkbox" checked>
A jelölőnégyzetek a többszörös választást valósítják meg (több is kiválasztható egyszerre), a VALUE alatti értéket veszi fel, ha bekapcsolt állapotú. A checked paraméter megadásával alapértelmezetten bekapcsolt állapotú jelölőnégyzetek jelennek meg az űrlap letöltődésekor.
<input type="radio" name="nev5" value="radiobutton" checked>
A rádiógombokkal az egyszeres választást lehet megvalósítani (egyszerre csak egyet lehet kiválasztani). Az összetartozó rádiógombok nevük azonos, és a value értékükben térnek el egymástól. A checked paraméter megadásával alapértelmezetten bekapcsolt állapotú rádiógomb jelenik meg az űrlap letöltődésekor.
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset">
<input type="button" name="Button" value="Button">
SUBMIT – adattovábbító, küldés gomb, RESET – inicializáló, a begépelt adatokat kitörlő gomb, BUTTON - egyéb nyomógomb. A Value agombok feliratát adja meg. A SUBMIT gomb lenyomásának hatására küldi el az űrlapadatokat a kérdőív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezőket.
<input type="file" name="file">
A látogató fájlt küldhet, amelyet a megjelenő tallózás (Browse) gomb segítségével kereshet meg.
Egy kérdésre adandó válasz egyszerű - menüből történő - kiválasztását teszi lehetővé a kérdőíven a <SELECT NAME="név" SIZE="sor">…</SELECT> által létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> tag-gel adhatjuk meg. A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a választható menüpontok. Megadásával gördíthető menüt kapunk, elhagyása esetén, ún. legördülő menüből lehet választani. A MULTIPLE megadása esetén több menüpont is kijelölhető egyszerre. Az <OPTION SELECTED> formájú tag adja meg az alapértelmezett választást!
Pl.
Kérjük adja meg az adatait:
<FORM METHOD="post" ACTION="program.pl">
<P>
Vezetékneve:
<INPUT NAME="vezeteknev" TYPE="text" VALUE="Kovács" SIZE="25" MAXLENGTH="30">
Keresztneve:
<INPUT NAME="keresztnev" TYPE="text" MAXLENGTH="50">
Férfi: <INPUT NAME="neme" TYPE="radio" CHECKED>
Nő: <INPUT NAME="neme" TYPE="radio">
Kora: <INPUT NAME="kor" TYPE="range" SIZE="2" MIN="10" MAX="60">
<P>
Ezt az operációs rendszert használja:
Windows95/98: <INPUT NAME="erdek" TYPE="checkbox" CHECKED>
WindowsNT/2000: <INPUT NAME="erdek" TYPE="checkbox">
LINUX: <INPUT NAME="erdek" TYPE="checkbox">
OS/2: <INPUT NAME="erdek" TYPE="checkbox">
<P>
<TEXTAREA NAME="egyeb" COLS="40" ROWS="4">Irja ide véleményét a használt rendszerről:</TEXTAREA>
<P>
Foglakozása:
<SELECT NAME="foglakozas">
<OPTION>diák
<OPTION>tanár
<OPTION SELECTED>nyugdíjas
<OPTION>egyik sem
</SELECT>
<P>
Csatolandó fájl(ok):
<BR>
<INPUT NAME="fajl" TYPE="file">
<P>
<input type="reset" value="Alapértelmezés" name="reset">
<INPUT TYPE="submit" VALUE="Elküldés">
</FORM>