Amit a HTML-ről feltétlenül tudni kell

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.

Helyesírás:

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

Egy HTML oldal felépítése

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

Egy alap HTML oldal elkészítése

Pl.:

<html>

      <head>

            <title>Az oldal címe</title>

      </head>

      <body>

            Ez az első oldalam!

      </body>

</html>

Speciális elemek a fejrészben

DOCTYPE:

 Pl.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

megadja az oldal formátumát, HTML verziószámát stb.

META:

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

Regisztrálás a keresőkben

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 legfontosabb tulajdonságai

Body

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

Színek megadása

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

Mértékegységek

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

Métrékegység fajták

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.

Szövegek formázása és tagolása

Bekezdések

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.

Igazítás (align)

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és (br)

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.

Változatlan forma (pre)

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>

Bekezdés nélküli formázás (div)

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>

Betűjellemzők megadása

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>

Dokumentumszintek (címsor stílusok)

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

Elválasztó vonal (hr)

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

Listák: (tetszőleges mélységig egymásba ágyazhatók)

Számozatlan (ul)

(rendezetlen) lista (unordered list):

Pl.

<ul>

      <li>Ausztria

      <li>Szlovákia

      <li>Ukrajna

      <li>Románia

</ul>

Kimenet:

·   Ausztria

·   Szlovákia

·   Ukrajna

·   Románia

Számozott (ol)

(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

Könyvtárlista (dir)

<dir>

      <li>első tag

      <li>második tag

      <li>harmadik tag

      <li>negyedik tag

</dir>

Menülista (menu)

<menu>

      <li>első menü

      <li>második menü

</menu>

Leíró lista (dl)

(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

Hivatkozások, linkek: az oldalakon belüli, illetve az oldalak közötti kapcsolatok létrehozására használhatók.

Távoli link

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

E-mail link:

A leírással kapcsolatos véleményed

<A HREF="mailto:nev@email.cim.hu">írd</A> meg!

A hivatkozásokban használható protokollok:

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élpontja:

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>

 

Képek elhelyezése az oldalon

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>

A képformátumokról általánosan:

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.

Minigrafikák:

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.

Táblázatok

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

Táblázatok egymásba ágyazása

A táblázatok tetszőleges mértékig egymásba ágyazhatók. Pl.:

<table>

      <th>…</th>

      <tr>

            <td>

                  <table>…</table>

            <td>

      </tr>

</table>

Keretek

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>

Űrlapok

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.

Az űrlap létrehozása

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.

Űrlapelemek az oldalon

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.

Szövegmező:

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

Jelszómező:

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

Szövegdoboz (hosszabb szövegeknek)

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.

Rejtett mező:

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

Jelölőnégyzet

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

Rádiógombok

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

Gomb

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

Fájlmező

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

Menü

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>