Taigi susidomėjai tinklalapių kūrimu? Sveikinu, atsidūrei tinkamoje vietoje! Kodėl? Na, turėtum žinoti, jog visi tinklalapiai „pastatyti“ remiantis tam tikrais standartais. Be abejonės turi būti kažkoks būdas apibrėžti tinklalapio struktūrą remiantis nustatytomis taisyklėmis ir tuo pačiu suteikiant kūrėjui galimybę sukurti unikalaus išdėstymo puslapius. Dėl šios priežasties buvo įvesta HTML kalba (HTML angl. „Hyper text Markup Language“ arba lietuviškai „Hiperteksto žymėjimo kalba“).

Šiame straipsnyje išsiaiškinsime, kaip veikia HTML interneto naršyklėse, susipažinsime su pagrindine sintakse (pagrindinėmis žymėmis arba gairėmis). Vizualiais pavyzdžiais pasistengsime išsiaiškinti HTML kodo struktūrą ir jo taikymą tinklalapių kūrimui.

HTML failai, jų interpretavimas naršyklėje

Pradėkime nuo HTML failų (kodo) interpretavimo naršyklėje. Kas įvyksta, kai įvedame į adreso laukelį tinklalapio adresą? Paprastai sakant, siunčiame HTTP užklausą į serverį, kuriame yra patalpinti HTML failai. Jeigu esate domėjęsi tinklalapių kūrimu plačiau, žinote, jog galima kreiptis ne tik į HTML failus, tačiau į tai šį kartą nekreipkime dėmesio. Taigi nurodydami puslapio adresą kreipiamės į tam tikrą HTML failą siųsdami HTTP užklausą. Serveris gali į užklausą atsakyti labai įvairiai. Pavyzdžiui, jeigu nurodytas failas serveryje neegzistuoja, gausime atsaką, kad tokio puslapio nėra („Page not found“) arba, kitaip sakant, 404 klaidos pranešimą. Taip pat galime gauti pranešimą, kad prieiti prie failo negalima, nes neturite tam reikiamų teisių (privilegijų). Tačiau paprastai tikimės gauti realų rezultatą — puslapio vaizdą.

Parsiųsti duomenys naršyklėje yra analizuojami ir apdorojami. Tad pagal esantį kodą HTML faile naršyklė bando atvaizduoti elementus puslapyje. Čia skiriu ypatingą dėmesį žodžiui bando, nes puslapio elementai bus atvaizduojami tik tada, jeigu naršyklė atpažins jai iš anksto žinomą HTML sintaksę. Tad, galima sakyti, turi būti „dvipusis susitarimas“ tarp tinklalapio kūrėjo ir naršyklės. Kitaip tariant, HTML kodo struktūra turi būti tiksliai apibrėžta, laikantis sutartų taisyklių ir normų.

Dažniausiai vykdomi papildomi kreipimąsi į serverį failų parsiuntimui (paveikslėliams, JavaScript, CSS failams ir pan.). Žemiau matome paprastą schemą, rodančią, kaip vyksta puslapio atvaizdavimo procesas.

Keletas patarimų prieš pradedant

Prieš supažindindamas jus su HTML sintakse, norėčiau duoti patarimų, kurie gali ateityje sutaupyti jums laiko ir nervinių ląstelių.

Griežtas normų ir taisyklių laikymąsis

Tinklalapių kūrime ir apskritai kompiuterių srityje svarbu tikslumas, tad patariu rašyti struktūriškai, kruopščiai ir atsakingai. Pavyzdžiui, jeigu nurodyta, kad tam tikras elementas privalo turėti pradžios ir pabaigos žymes (gaires), taip ir darykite, net jeigu naršyklėje viskas atrodys gerai.

Tvarka bus!

Na, ji bus, jei tik to patys norėsite. Tačiau užtikrinu, kad rašydami tvarkingą HTML kodą lengviau suprasite visą puslapio struktūrą ir galėsite nesudėtingai jį redaguoti ateityje. Kadangi mes dar nežinome, kaip atrodo HTML kodas, nieko konkrečiau negalime aptarti, bet tai išnagrinėsime kiek vėliau.

Terminai

Pradžiai apibrėžkime keletą terminų, kuriuos naudosime šiame straipsnyje, kad išvengtume nesusipratimų.

Žymė. Anglų kalboje, kai kalbama apie HTML, žymės vadinamos „(html) tags“. Tai yra žodžiai arba turmpiniai, pagal kuriuos identifikuojami elementai. Kitas vartotinas alternatyvus žodis — gairė. Tad „tags“ vadinsime žymėmis arba gairėmis. Žemiau pateikti keli žymių pavyzdžiai.

Atributai. Kaip sužinosime vėliau, žymės gali turėti atributus. Paprastai sakant, su atributais nurodome papildomą informaciją apie elementą. Pažvelkime į pavyzdį.

<img src="paveikslelio_adresas.png" alt="" />

Iš aukščiau pateikto kodo matome, jog žymė <img/> turi 2 atributus: src ir alt. Po kol kas nesirūpinkite, ką šie atributai reiškia. Čia svarbiausia išsiaiškinti, kaip jie atrodo HTML kode.

Pirminis kodas. Anksčiau išsiaiškinome, kad naršyklė apdoroja parsiųstą HTML kodą ir atvaizduoja puslapį. Iš tiesų galime bet kada peržiūrėti atvaizduojamo puslapio kodą, kuris tokiu atveju vadinamas pirminiu kodu (angl. „source code“). Pavyzdžiui, Mozilla Firefox naršyklėje puslapio pirminį kodą galite peržiūrėti pasirinkę iš programos meniu juostos View » Page Source (Ctrl + U).

Paskutinė pastaba prieš pradedant

Iš tiesų mes laikysimės XHTML 1.0 standarto, kadangi jis šiuo metu yra populiariausias. Neapsigaukite, XHTML yra tas pats HTML, tik apibrėžus XHTML standartą laikomės šiek tiek griežtesnių taisyklių. Nenoriu išsiplėsti šia tema, tačiau galite apie XHTML paskaityti Vikipedijoje.

Notepad++

Taigi nuo ko pradėsime? Kodo rašymui reikės tekstinio redaktoriaus (angl. „text editor“). Teoriškai titkų ir standartinė „Windows“ užrašinė („notepad“), tačiau joje nespalvojamas kodas. Tad patariu atsisiųsti nemokamą tekstinį redaktorių Notepad++. Atsidarę programą, iš karto galėsite rašyti kodą. Tik prieš tai nepamirškite nurodyti koduotės, kad būtų tinkamai atvaizduojami lietuviški raštmenys. Tai padaryti galite pasirinkę „Encoding » Encode in UTF-8 without BOM“.

Pagrindinės HTML žymės

Visada kurdami naują HTML puslapį turime naudoti keletą pagrindinių žymių. Žemiau pateiksiu pirmąjį tikrą HTML kodo pavyzdį.

<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Reikia atkreipti dėmesį, kad html žymių vieta kode turi didelę reikšmę. Pavyzdžiui, kiekviena žymė turi turėti jai atitinkamą pabaigos žymę. Taip apibrėžiame, kur prasideda ir kur baigiasi HTML elementai. Taigi <html> žymė privalo turėti savo porininkę — pabaigos žymę </html>, <head> — </head> ir t. t.

Taip pat pastebėjote, kad žymės yra atidaromos ir uždaromos tam tikra tvarka. Pavyzdžiui, jeigu parašėme <html> žymę, o po to <head>, tai negalime po to pirma parašyti </html> žymę ir tik tada </head>. Manau, kad žemiau pateikta schema padės suprasti, kokia tvarka rašomos HTML žymės.

Anksčiau straipsnyje minėjau, kad remsimės XHTML 1.0 standartu, tad iš tiesų būtina HTML kodo pradžioje nurodyti, kokį „doctype“ naudosime.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Tokiu principu iš karto nurodome, kokį standartą naudosime.

Puslapio pavadinimas

Kiekvienas puslapis turi savo pavadinimą, kurį matome arba naršyklės kortelėje (angl. „tab“), arba lango viršuje. Jį nurodyti galime tarp <title> </title> žymių.

<title>Mano puslapio pavadinimas</title>

Žinoma, nepamirškite, kad title žymės turi būti tarp <head> </head>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Mano puslapio pavadinimas</title>
</head>
<body>

</body>
</html>

Beje, čia svarbu paminėti, kad naršyklėje matysite tik tą turinį, kuris yra pateiktas tarp <body> </body> žymių. „Head“ sritis nėra atvaizduojama, tačiau iš jos imama informacija apie tai, kaip atvaizduoti puslapį. Pavyzdžiui, tarp <head> </head> žymių galite nurodyti puslapio pavadinimą, įtraukti pakopinių stilių failus arba CSS aprašus (CSS), nurodyti koduotę ir pan.

Koduotės nurodymas

Jeigu nenurodysite HTML kode koduotės, didelė tikimybė, jog lietuviški raštmenys nebus atvaizduojami naršyklėje. Tam, kad visi simboliai būtų atvaizduojami korektiškai, pravartu naudoti UTF-8 (Unicode) koduotę. Ją nurodyti reikia „head“ srityje.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Apžvelgėme HTML sintaksę ir pagrindines (bazines) žymes, tad dabar galime susipažinti su specifinėmis žymėmis (elementais). Nuo čia turėsime omenyje, kad kodo pavyzdžiai yra tarp <body> </body> žymių (kitų, nors ir būtinų žymių, pavyzdžiuose nematysime, kad sutaupytume vietos, tačiau jūs išbandydami pavyzdžius patys ir tikrindami rezultatą naršyklėje jų nepamirškite: <html>, <head> ir t. t.).

Paragrafai (pastraipos)

Tarkime, kad turime tokį fragmentą html faile:

<body>
	Pirmoji pastraipa.

	Antroji pastraipa.
</body>

Kaip manote, ką naršyklė turėtų atvaizduoti? Iš kodo atrodo, jog turėtų būti atvaizduota pirmoji eilutė, tada tarpas ir antroji eilutė. Deja, iš tikrųjų viskas būtų atvaizduojama vienoje eilutėje.

<p>Pirmoji pastraipa.</p>

<p>Antroji pastraipa.</p>

Naršyklėje matytume tą patį rezultatą net jeigu parašytume taip:

<p>Pirmoji pastraipa.</p><p>Antroji pastraipa.</p>

Paryškintas, sumažintas, pasvyrusis ir pabrauktas tekstas

Kartais norėdami kaip nors išskirti žodį ar teksto dalį, galime jį paryškinti, pabraukti, sumažinti arba padaryti pasviru. Kiekvienam variantui turime atskiras HTML žymes.

Paryškinimas

Nagrinėdami kitų puslapių HTML kodą galite pamatyti, kad tekstas paršyškinamas su <b> </b> žymėmis, tačiau pagal XHTML 1.0 standartą naudojamos „strong“ žymės.

<p>Norėčiau paršykinti <strong>šiuos žodžius</strong>.</p>

Pasviras tekstas

Kaip ir su paryškinimu, kitur galite pastebėti, kad pasviras tekstas yra tarp <i> </i> žymių, tačiau pagal XHTML 1.0 turime naudoti <em> </em> žymes.

Štai mano <em>pasviras tekstas</em>

Pabraukimas

Pabraukime <u>teksto dalį</u>

Sumažintas tekstas

Normalus tekstas tampa <small>mažesniu</small>

Nauja eilutė

Naujos eilutės sudarymui naudojama <br /> žymė. Atkreipkite dėmesį, kad ši žymė kiek kitokia negu anksčiau matytos. Paprastai visi elementai turi pradžios ir pabaigos žymę, tačiau naujos eilutės elementas — tik vieną. Todėl galime tokią žymę vadinti vienetine.

Tekstas staiga persikėlė <br /> į kitą eilutę.

Antraštės (headings)

Tarkime, kad puslapyje pateiktas straipsnis ir norime jam priskirti pavadinimą (antraštę). Žinome, kad pavadinimą reikia kažkaip išskirti. Tam galime panaudoti antraščių žymes (angl. „headings“).

Gali kilti klausimas, kodėl tiek daug skirtingų žymių antraštėms. Įsivaizduokite, kad tinklalapyje yra rubrikos: naujienos ir straipsniai. Naujienų rubrikoje turėtų būti išryškintas žodis „Naujienos“, o straipsnių — „Straipsniai“. Šioms antraštėms panaudojame h1 žymes. Tiek naujienų, tiek straipsnių rubrikoje yra įrašai (atitinkamai naujienos arba straipsniai), tad kiekvieno įrašo antraštei galime panaudoti h2 žymes. Taigi naudodami žymes nuo h1 iki h6 galime hierarchiškai apibrėžti pavadinimus.

Nepamirškite, kad tekstas, esantis tarp <h1> </h1> žymių yra pats didžiausias, o tarp <h6> </h6> — pats mažiausias. Taip pat nesugalvokite naudoti h7, h8 ir pan. žymių, nes jos iš tikrųjų neegzistuoja. Tad galite rinktis tarp h1 ir h6 žymių antraštėms nurodyti.

<h1>Straipsniai</h1>

<h2>Pirmasis straipsnis</h2>

<p>Straipsnio dalis</p>

<h3>Pirmo straipsnio sub-antraštė</h3>

<p>Likusi straipsnio dalis</p>

<!-- ... -->

<h2>Antras straipsnis</h2>

<p>Straipsnio turinys</p>

Sąrašai

Sąrašams sudaryti naudojama kiek sudėtingesnė HTML struktūra, tačiau panagrinėję keletą pavyzdžių turėtume suprasti, kaip jie sudaromi.

Sąrašai gali būti dviejų rūšių: sunumeruoti ir nesunumeruoti.

Nesunumeruotas sąrašas

<h2>Pirkinių sąrašas:</h2>

<ul>

	<li>Obuoliai</li>
	<li>Apelsinai</li>
	<li>Pienas</li>
	<li>Vynas</li>

</ul>

Apibrėžti nesunumeruotam sąrašui naudojame <ul> </ul> žymes. Kiekvienas atskiras sąrašo elementas nurodomas tarp <li> </li> žymių. Kadangi sąrašas nenumeruojamas, prie kiekvieno punkto bus pridėtas juodas skrituliukas.

Sunumeruotas sąrašas

<h2>Keturi metų laikai:</h2>

<ol>

	<li>Pavasaris</li>
	<li>Vasara</li>
	<li>Ruduo</li>
	<li>Žiema</li>

</ol>

Kai norime, jog kiekvienas punktas turėtų savo numerį, naudojame <ol> </ol> žymes. Pačių punktų žymės šiuo atveju nesikeičia.

Kelių lygių sąrašas

Sąrašas gali būti labiau komplikuotas, jeigu to reikia.

<h2>Ką jau išmokome</h2>

<ul>
	<li>Pagrindinės žymės</li>
	<li>Puslapio pavadinimas</li>
	<li>Teksto pagražinimai</li>
	<ol>
		<li>Paryškinimas</li>
		<li>Sumažinimas</li>
		<li>Kursyvas</li>
		<li>Pabraukimas</li>
	</ol>
	<li>Antraštės</li>
</ul>

Taip galima kurti neriboto „gylio“ sąrašą, ir nesvarbu, ką naudosime: ar ul, ar ol tipą.

Nuorodos

Norėdami sukurti nuorodą puslapyje, naudojame <a> </a> žymes. Tačiau vien tokio užrašymo nuorodoms sukurti neužtenka — tam turime į žymę įvesti atributą href. Panagrinėkime žemiau pateiktą pavyzdį.

<a href="adresas_iki_puslapio">nuorodos pavadinimas</a>

Matome, kad nuorodos pavadinimas nurodomas tarp žymių, o adresas iki nurodyto puslapio — atribute href.

Galime paprastai išbandyti nuorodų veikimą. Pirmiausia sukurkime 2 tuščius failus: pirmas.html ir antras.html ir patalpinkime juos tame pačiame aplankale (direktorijoje). Atsidarykite pirmąjį html failą su tekstiniu redaktoriumi, surašykite pagrindines (būtinas) HTML žymes ir tarp <body> </body> žymių sukurkite nuorodą, kuri rodytų į antrąjį failą.

<a href="antras.html">Spauskite šią nuorodą, jei norite eiti į antrąjį puslapį</a>

Išsaugokite pakeitimus ir atsidarykite antrąjį failą (antras.html). Ten taip pat nurodykite tas pačias žymes, tik šį kartą sukurkite nuorodą, rodančią į pirmąjį puslapį.

<a href="pirmas.html">Grįžkime į pirmąjį puslapį</a>

Dabar atsidarykite pirmąjį failą naršyklėje ir paspauskite ant nuorodos. Jeigu viską padarėte teisingai, naršyklė turėtų perkelti į kitą puslapį — antras.html. Antrajame puslapyje paspaudę ant nuorodos grįšite į pirmąjį puslapį, kadangi nuoroda būtent ten ir rodo.

Taip pat galite sukurti nuorodas, rodančias ne tik į jūsų puslapius.

<a href="http://www.e-grafika.lt">Nuoroda</a>

Nuorodos atidarymas naujame lange (kortelėje).

Turbūt pastebėjote, kad kartais paspaudus ant nuorodos atidaromas naujas naršyklės langas (arba kortelė). Norėdami, kad jūsų nuorodos taip pat atsidarytų atskirame lange, turite priskirti dar vieną atributą — target, ir jam nurodyti reikšmę „_blank“.

<a href="http://www.e-grafika.lt" target="_blank">E-grafika.lt</a>

Pastaba: nepamirškite, kad kartais nuorodų atidarymas atskirame lange gali erzinti lankytojus, tad elkitės atsakingai!

Paveiksliukai

Paveiksliuko įterpimui naudojama „img“ žymė. Kaip ir naujos eilutės žymė, paveikslėlio žymė yra vienetinė. Tai reiškia, kad šis elementas neturi atskiros uždarymo žymės.

<img src="mano_paveiksliukas.png" alt="Mano paveiksliukas" />

Kaip matote, paveikslėlio adresas nurodomas atribute src. Taip pat pastebėjote, jog nurodėme dar vieną atributą — alt. Pagal XHTML 1.0 standartą, alt atributas paveikslėlio žymėje yra būtinas. Kodėl jo reikia? Visų pirma, tai paieškos sistemoms padeda lengviau suprasti, apie ką paveiksliukas. Be to, jeigu dėl kažkokių priežasčių neužkraunamas paveiksliukas, vietoj jo rodomas alt atribute esantis tekstas.

Kartais pravartu nurodyti paveikslėlio plotį ir aukštį, kad esant didesniam paveikslėliui nebūtų iškraipytas puslapio vaizdas. Plotį ir aukštį nurodome atitinkamai su width ir height atributais.

<img src="pav.png" width="150" height="100" alt="Pav" />

Dimensijų reikšmės nurodomos pikseliais (taškais).

Lentelės

Lentelei sudaryti reikalingos trys pagrindinės žymių poros: <table></table>, <tr></tr>, <td></td>.

Table — lentelės apibrėžtinumas; tr — lentelės eilutė; td — lentelės stulpelis. Žemiau pateiktas paprastas pavyzdys

<table>
	<tr>
		<td>1 eilutė, 1 stulpelis</td>
		<td>1 eilutė, 2 stulpelis</td>
		<td>1 eilutė, 3 stulpelis</td>
	</tr>
	<tr>
		<td>2 eilutė, 1 stulpelis</td>
		<td>2 eilutė, 2 stulpelis</td>
		<td>2 eilutė, 3 stulpelis</td>
	</tr>
</table>

Žymė „table“ gali turėti tokius pagrindinius atributus: cellspacing — tarpai tarp laukelio ir lentelės, kitaip tariant, leidžia keisti lentelės kraštinių dydžius; cellpadding — tarpai laukelio viduje; border — kraštinių dydis; width — ilgis.

width galioja ir td žymėms:

<table cellspacing="4" cellpadding="5" border="1" width="70%">
	<tr>
		<td width="30%">1 eilutė, 1 stulpelis</td>
		<td width="70%">1 eilutė, 2 stulpelis</td>
	</tr>
	<tr>
		<td>2 eilutė, 1 stulpelis</td>
		<td>2 eilutė, 2 stulpelis</td>
	</tr>
</table>

Taip pat galime padaryti ir neriboto lygio lentelių išdėstymą:

<table>
	<tr>
		<td>1 lentelė, 1 eilutė, 1 stulpelis</td>
		<td>
			<table>
				<tr>
					<td>2 lentelė, 1 eilutė, 1 stulpelis</td>
					<td>2 lentelė, 2 eilutė, 1 stulpelis</td>

				</tr>
			</table>
		</td>
		<td>1 eilutė, 3 stulpelis</td>
	</tr>
	<tr>
		<td>2 eilutė, 1 stulpelis</td>
		<td>2 eilutė, 2 stulpelis</td>
		<td>2 eilutė, 3 stulpelis</td>
	</tr>
</table>

Formos

Formos naudojamos norint perduodi duomenis iš HTML į vykdomąjį skriptą (pvz.: PHP). Pagrindinės formų žymės: form, input, textarea, select ir option.

Form elementas apibrėžia, koks metodas ir į kokį vykdomą failą bus perduodami duomenys.

<form action="vykdomasis_failas.php" method="post">

	<!-- ... -->

</form>

Metodo (angl. „method“) tipaas gali būti get ar post, tačiau apie tai reikėtų žinoti tik tiems, kurie moka apdoroti duomenis su PHP ar kita programavimo kalba.

Apžvelkime, kokie elementai gali sudaryti formą.

Input

• <input type="text" /> — teksto laukas;
• <input type="password" /> — laukas slaptažodžiui, vedami simboliai bus rodomi kaip žvaigždutės;
• <input type="checkbox" /> — laukas varnelės uždėjimui.
  
  Jei norime, kad pagal užkraunant puslapiui būtų pažymėta varnelė, nurodome checked atributą: <input type="checkbox" checked="checked" />;
• <input type="radio" /> — veikia panašiai kaip checkbox'as, tačiau leidžiama pažymėti tik vieną lauką iš kelių pateiktų. Taip pat galioja checked atributas;
• <input type="file" /> — skirtas failų įkėlimui;
• <input type="image" /> — parodo koordinates, kur vartotojas paspaudė. Reikalingas src atributas, kurio reikšmė nurodoma kaip ir img žymės;
• <input type="submit" /> — vykdymo mygtukas. Paspaudus šį mygtuką, bus suaktyvuota forma ir nusiųsti duomenys skriptui.
  
  Norėdami suteikti savo tekstą ant mygtuko, turime nurodyti value atributą, pvz.: <input type="submit" value="Siųsti" />;
• <input type="button" /> — mygtukas, tačiau jis veikia tik su papildomu kodu (dažniausiai naudojama JavaScript funkcijai atlikti);
• <input type="reset" /> — grąžina laukus į pradines būsenas;
• <input type="hidden" /> — paslėptas laukas. Jame nurodyta reikšmė yra nematoma puslapyje, tačiau ją galima siųsti vykdomui skriptui.

Išskleidžiamas sąrašas

Išskleidžiamo sąrašo formai sukurti naudojamos select ir option žymės.

<select>
	<option value="1">pirmas</option>
	<option value="2">antras</option>
</select>

Option žymėje būtina nurodyti value atributą ir jo reikšmę, nes vykdomui skriptui bus perduodama ne tas kas tarp <option></option> žymių, o tas kas nurodyta value atribute.

Jeigu norime, kad užkrovus puslapį būtų pažymėtas "antras", tai reikia nurodyti selected atributą: <option value="2" selected="selected">antras</option>.

<select>
	<option value="1">pirmas</option>
	<option value="2" selected="selected">antras</option>
</select>

Tekstinis laukas (textarea)

Su textarea galime sukurti teksto lauką (pvz.: komentarui įrašyti). Atributų cols ir rows pagalba galime nurodyti atitinkamai stulpelių ir eilučių skaičių arba, kitaip sakant, lauko dimensijas.

<textarea cols="40" rows="7">Mano komentaras</textarea>

Taigi pabaigai sukurkime paprastą formą su lentelės ir formos elementais.

<form action="send.php" method="post">

  <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
      <td width="30%">Vardas:</td>
      <td width="40%"><input type="text" name="vardas" /></td>
    </tr>
    <tr>
      <td>Pavardė:</td>
      <td><input type="text" name="pavarde" /></td>
    </tr>
    <tr>
      <td>Miestas:</td>
      <td>
        <select name="miestas">
        <option value="kaunas">Kaunas</option>
        <option value="siauliai">Šiauliai</option>
        <option value="vilnius" selected="selected">Vilnius</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Gauti naujienas?</td>
      <td>
        <input type="radio" name="nauj" value="Y" /> Taip
        <input type="radio" name="nauj" value="N" /> Ne
      </td>
    </tr>
  </table>

  <br /><br />

  <input type="submit" name="siusti" value="Siųsti" />

</form>

Tikriausiai iškils klausimas: kam reikalingas name atributas? Atsakymas — kad vykdomas skriptas suprastų, kokia reikšmė perduodama iš formos, nes jis reikšmę atpažįstą pagal formos name atributą.

Apibendrinimas

Susipažinome su pagrindine HTML sintakse, žymėmis ir reikalingiausiais naudojamais HTML elementais. Tačiau tai ne viskas, kas sudaro HTML — yra kur kas daugiau elementų, atributų ir išimčių, bet nepamirškime, kad čia buvo tik supažindinimas su HTML kalba. Sėkmės!