Oldalszerkezet
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Az oldal címe</title>
<!--//
A fejlécbe kerülnek a kiegészítő információk (kulcsszavak, a szerző, ...),
és a megjelenést befolyásoló adatok (karakterkódolás, stílus definíciók)
//-->
</head>
<body>
... Az oldal tartalma ide kerül ...
</body>
</html>
HTML elemek
Bekezdések
<h1>Ez egy cím</h1>
<h2>Ez egy alcím</h2>
<h3>Ez egy alalcím</h3>
<p>Ez egy bekezdés</p>
<p>Ez egy bekezdés<br>sortöréssel</p>
<p>A bekezdés után elválasztó vonal</p><hr>
Hivatkozások
<img src="kep.jpg" alt="képet beszúrni így kell">
<a href="masik.html">Hivatkozás a masik.html állományra</a>
<a href="http://valahol.hu">Hivatkozás teljes URL-el</a>
<!--// Stíluslap csatolása //-->
<link rel="StyleSheet" href="base.css" type="text/css" media="screen,print"/>
<!--// JavaScript kód csatolása //-->
<script src="base.js" type="text/javascript">
Általános blokk elemek
<span>Inline (karakter szintű) blokk</span>
<div>Bekezdés szintű blokk</div>
Felsorolás, számozás
Felsorolás
<ul>
<li>A felsorolás első pontja</li>
<li>A felsorolás második pontja</li>
<li>A felsorolás harmadik pontja</li>
</ul>
Számozott lista
<ol>
<li>A számozott lista első pontja</li>
<li>A számozott lista második pontja</li>
<li>A számozott lista harmadik pontja</li>
</ol>
Összetett, többszintű lista
<ol>
<li>A többszintű lista első pontja
<ul>
<li>Az első pont első alpontja</li>
<li>Az első pont második alpontja</li>
</ul>
</li>
<li>A többszintű lista második pontja
<ul>
<li>Az második pont első alpontja</li>
</ul>
</li>
<li>A többszintű lista harmadik pontja
<ul>
<li>Az harmadik pont első alpontja</li>
<li>Az harmadik pont második alpontja</li>
<li>Az harmadik pont harmadik alpontja</li>
</ul>
</li>
</ol>
Táblázat
<table>
<tr><th>Egyszerű táblázat fejlécének első cellája</th><th>és második cellája</th></tr>
<tr><td>A második sor első adat cellája</td><td>és második adat-cellája</td></tr>
<tr><td>A harmadik sor első adat cellája</td><td>és második adat-cellája</td></tr>
</table>
Cellák összevonása
<td colspan="3">Ez egy három oszlop széles cella</td>
<td rowspan="2">Ez egy két sor magas cella</td>
Összetett példa
<table>
<thead>
<tr><th>A fejléc első cellája</th></tr>
</thead>
<tfoot>
<tr><th>A lábléc alul fog megjelenni!</td></tr>
</tfoot>
<tbody>
<tr><td>A táblázat törzse - lehet belőle több is!</td></tr>
</tbody>
</table>
Javascript csatolasa
<style type="text/css">
@import url(style.css);
</style>
<script src="javascript.js" type="text/javascript"></script>
------------
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<! -- End Conditional Style -->
<script type="text/javascript" src="motiongallery.js">
</script>
HTML bejegyzésbe ezt gondoltam:
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"&g t;<img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>
</div>
</div>
---------
Űrlapok - Űrlap elemek. Az <input> tag.
Az űrlap elemeinek többségét az <input> tag segítségével lehet létrehozni. Nincs záró tagja.
Legfontosabb attribútumai, amelyek minden elem-típushoz hozzárendelhetőek:
type: Az űrlapelem típusát adja meg. A HTML 4.01 szabványban megengedett értékei: text, password, checkbox, radio, file, hidden, submit, reset, button, image. A HTML 5 szabványban jelentősen növelték az elemtípusok számát, de az új elemeket jelenleg (2013-ban) a böngészők még nem támogatják teljes mértékben.
name: Az elem neve. Az űrlap adatait feldolgozó program ez alapján tudja azonosítani a felhasználó által bevitt adatokat.
value: Az űrlapelem kezdeti értéke. Kötelező megadni, ha a type attribútum értéke radio vagy checkbox, egyébként használata opcionális.
id, class, style: általános attribútumok
Egysoros szövegmező
Példa:
Felhasználó név:
<input type="text" name="username" size="35" maxlength ="50">
Ami így jelenik meg:
Felhasználó név:
A példában szereplő attribútumok jelentése:
size: A szövegmező szélességét adja meg a látható karakterek számában. Ez többnyire csak egy becsült érték, mivel a legtöbb betűtípus esetén a különböző karaktereknek a szélessége is eltér egymástól. Például az m betű több helyet foglal el mint az i betű, kivéve ha monospace betű típust választunk.
maxlength: A beírható karakterek maximális száma. Az alapérték a végtelen.
Ha a maxlength értéke nagyobb, mint a size attribútum értéke, akkor a felhasználónak lehetősége van arra, hogy több karaktert írjon a szövegmezőbe, mint ami abban egyszerre látszódhat. Ez általában nem okoz problémát, mert a kurzort a billentyűzeten lévő nyilakkal mozgatva a felhasználó el tudja érni a beírt szöveg minden részét.
Jelszó mező
Példa:
Jelszó:
<input type="password" name="userpassword" size="20"
maxlength="15"> (maximum 15 karakter)
Ami így jelenik meg:
Jelszó:
(maximum 15 karakter)
Az attribútumok használata megegyezik az egysoros szövegmezőnél leírtakkal.
A jelszó mezőben a beírt karakterek pont vagy csillag formájában jelennek meg, de a "titkosítás" csak a képernyőre vonatkozik. Az űrlap elküldésekor a jelszó is egyszerű szöveges adatként kerül továbbításra.
Jelölő négyzet
HTML űrlapokon jelölő négyzetek alkalmazásával érhetjük el azt, hogy a weblap látogatója az előre felkínált lehetőségek közül tetszőleges számú opciót kiválaszthasson.
Példa:
Nyelvtudás:
<input type="checkbox" name="lang1" value="hu"
checked>magyar<br>
<input type="checkbox" name="lang2" value="en">angol<br>
<input type="checkbox" name="lang3" value="de">német<br>
<input type="checkbox" name="lang4" value="other">egyéb<br>
Ezt a kódot a böngészők így jelenítik meg:
Nyelvtudás:
magyar
angol
német
egyéb
Ha a checked attribútum meg van adva, akkor a böngészők a négyzetet kiválasztott állapotban jelenítik meg.
Rádió gombok
A rádió gombok is arra szolgálnak, hogy a weblap készítője által definiált lehetőségek közül a felhasználók választhassanak. Az azonos name attribútummal rendelkező rádió gombok alkotnak egy csoportot. Egy csoporton belül csak egyetlen egy gomb lehet bekapcsolt állapotban.
Példa:
Legmagasabb iskolai végzettség:
<input type="radio" name="education"
value="elementary">alapfokú<br>
<input type="radio" name="education" value="secondary"
checked>középfokú<br>
<input type="radio" name="education"
value="higher">felsőfokú<br>
Ami a következőképpen jelenik meg:
Legmagasabb iskolai végzettség:
alapfokú
középfokú
felsőfokú
A különböző böngészők eltérő módon viselkednek akkor, ha egy csoporton belül egyik gomb sincs checked állapotban megadva a forráskódban. (Megjelenítéskor vagy az első gombot kapcsolják be vagy pedig egyiket sem.) Ezért a HTML szabvány ajánlása szerint a weblap fejlesztőjének gondoskodnia kell arról, hogy az egyik gomb alapértelmezés szerint bekapcsolt állapotban legyen.
Fájl csatolása
Példa:
Csatolt fájl:
<input type="file" name="attachment" size="40">
Ami a böngészőben ilyen beviteli mezőt eredményez:
Csatolt fájl:
A size attribútum itt is a beviteli mező szélességét adja meg a látható karakterek számában.
Ha az űrlap csatolt fájlt tartalmaz, akkor a form elem method attribútumának „post”, az enctype attribútumának pedig "multipart/form-data" értéket kell adni.
Rejtett űrlap mező
A rejtett űrlap mező lehetőséget ad arra, hogy az elküldött űrlap olyan adatot is tartalmazzon, amelyet a szerver generált. Az oldal látogatói ezeket az információkat nem látják és nem is tudják módosítani. A rejtett mezők egyik felhasználási területe a felhasználói aktivitás követése.
Példa:
<input type="hidden" name="user_id" value="456789">
Megjegyzés: A rejtett űrlap mező tartalma nem jelenik meg a képernyőn, de ettől az még nem számít titkosított adatnak. Az információ megszerzéséhez elég elolvasni a HTML kódot. (Jobb egérgomb kattintás az oldal fölött és a „Forrás megtekintése” menüpont kiválasztásával a böngésző megjeleníti a forráskódot.)
Űrlap elküldése
Általában egy weboldalon azért készítünk űrlapot, hogy a látogatók elküldhessék az általuk beírt információkat. Ehhez biztosítani kell számukra egy „Küldés” vagy más hasonló feliratú gombot, amire kattintva a böngésző továbbítja az adatokat a szerver felé.
Példa:
<input type="submit" value="Űrlap küldése">
Ez egy ilyen gombot eredményez a képernyőn:
Egy űrlap több küldés gombot is tartalmazhat.
Adatok törlése
Egy űrlapon belül „Reset” gomb is definiálható, ami törli a felhasználók által bevitt adatokat. A gombra kattintva az űrlap mezők visszaállnak az oldal HTML kódjában megadott alapértékekre. A szabvány nem ír elő kötelező viselkedésmódot arra az esetre, amikor egy mezőre nincs kezdőérték megadva. (Ilyenkor a böngésző programok törlik a mezőben lévő adatot, de az sem ellentétes a szabvánnyal, ha megmarad a felhasználó által utoljára beírt információ.)
Példa:
<input type="reset" value="Adatok törlése">
Ami a következőképpen jelenik meg:
Nyomógomb
Olyan nyomógomb is létrehozható az <input> tag segítségével, amelyhez a HTML szabvány közvetlenül nem rendel funkciót. Az ilyen gombokat általában JavaScript programok indítására használják.
Példa:
<input type="button" value="Számítás indítása"
onclick="sum_calculator();">
2 + 2 = <span id="sum_result">?</span>
Ennek megjelenítése:
2 + 2 = ?
A gombra kattintva lefut a sum_calculator nevű JavaScript programocska, ami kiírja a gomb mellett látható nem túl bonyolult számítási feladat eredményét.
Küldés gomb fényképpel
Egy űrlap úgy is elkészíthető, hogy a weboldal látogatói a küldés gomb helyett egy képre kattintva továbbíthassák a beírt adatokat. Ilyen módon egyedi kinézetű küldés gombot készíthetünk, illetve térképszerű választási lehetőséget is biztosíthatunk a felhasználók számára.
Példa:
Válassza ki az Önhöz legközelebbi márkakereskedésünket:
<input type="image" name="hungary_map" src="hungary.gif"
alt="Magyarország térkép a viszonteladóinkkal">
----------
Jegyzet;
http://burcsi.hu/_inf/adattar/5webdoku/x_egyszeruen.pdf
Nincsenek megjegyzések:
Megjegyzés küldése