Dokumendis võib olla kuni kuue taseme pealkirju (märgendid <h1></h1>...<h6></h6>).

Kõrgema taseme pealkiri on märgendite <h1></h1> vahel, seda kuvatakse kõige suurema kirjaga. Madalaima taseme pealkiri on <h6></h6> märgendites ja see kuvatakse kõige väiksema kirjaga. Atribuudi align abil võib pealkirju joondada vasakule, paremale ja keskele.

Lõigu loomiseks kasutatakse märgendeid <p></p>. Iga lõik eraldatakse brauseris eelmisest tühja reaga. Lõiku saab joondada vasakule, paremale, keskele ja rööpselt. Lõigu vormindamisel tuleb meeles pidada järgmist:

• reavahetuse sümbol (Enter-klahvi vajutus) ei oma koodis mingit tähtsust, kui rida on vaja vahetada, peab kasutama märgendit <br />;
• kõiki sümboleid ei ole võimalik korrektselt kuvada, see on seotud erinevate kodeerimissüsteemidega (näiteks, ä tähe kuvamiseks tuleb kasutada erisümbolit);
• teksti ridade kuvamisel arvestatakse tühja ruumiga, millele tekst paigutatakse (näiteks jätkab brauser teksti järgmises reas, kui see brauseri aknasse või tabelisse ei mahu).

Tekstis võib kasutada ka jäika vormindamist. Seda tehakse juhul, kui lõigulõpud, tühikud ja tabulatsioon on kindlalt paigas. Märgenditeks on <pre></pre>. Kogu tekst väljastatakse fikseeritud laiusega kirjas. Sellise vormingu põhipuuduseks on see, et teksti ei tõsteta järgmisele reale isegi siis, kui ta aknasse ei mahu. Selle asemel tekib horisontaalne kerimisriba, mis raskendab lehe jälgimist.

Tsitaatide vorming toimub märgendiga <blocknote></blocknote>. See märgend tekitab taande vasakust lehe servast ning eraldab tsitaadi muust tekstist tühja reaga alt ja ülevalt.

Joonte loomiseks teksti osade vahele kasutatakse märgendit <hr />. Erinevate atribuutide abiga saab muuta joone paksust ja laiust, värvi ja joondust.

Loetelusid võib olla mitut liiki:

• tärnitud (järjestamata) - märgendid <ul></ul>;
• nummerdatud (järjestatud) - märgendid <ol></ol>;
  • loetelu elementide loomiseks kasutatakse märgendeid <li></li>;
• definitsioonide loetelu - kasutatakse märgendeid <dl></dl>, <dt></dt> ja <dd></dd>.

Tabelandmete väljastamiseks võib veebilehel kasutada tabeleid. HTMLs on tabelitel veel üks funktsioon: tabeli abil võib paigutada elemente ekraanil erinevatesse kohtadesse, kasutades selleks tabeli lahtreid. Tänapäeval sellist meetodit ei soovitata enam kasutada, kuna parem on seda teha CSS stiililehtede abil.

Tabeli loomiseks on märgend <table></table>. Tabel ise koosneb ridadest ja lahtritest, read luuakse märgenditega <tr></tr>, lahtrid märgendiga <td></td>. Esimest tabeli rida kasutatakse tavaliselt päisena, seal asuvad veergude pealkirjad. Esimese rea lahtrite märkimiseks võib kasutada märgendeid <th></th>.

Teksti vormindamine

Peale dokumendi struktuuri loomist võib asuda teksti vormindamisele. Soovitav on kõik kirja vormingud korraldada stiilide abil (CSS). HTML lubab samuti teksti kujundada, kuigi võimalusi on siin vähem. HTML kasutab kahte vormingu viisi: füüsilist (vormindatud teksti väljanägemine on täpselt määratud) ja loogilist (märgendite abil määratakse tekst, mis peab muust tekstist erinema, teksti kuvamine sõltub brauseri määrangutest).

Füüsilise vormingu märgendid:

• <b></b> (poolpaks kiri)
• <i></i> (kaldkiri)
• <tt></tt> (fikseeritud laiusega kiri)
• <u></u> (allatõmmatud)
• <strike></strike> (mahatõmmatud).

Loogilise vormingu märgendid:

• <em></em> (tavaliselt kuvatakse kaldkirjana)
• <strong></strong> (tavaliselt kuvatakse poolpaksuna)
• <cite></cite> (tsitaatide rõhutamine, kaldkiri)
• <ins></ins> (lehe uuendamisel näidatakse teksti, mida enne ei olnud, allatõmmatud)
• <del></del> (mahatõmbamine)
• <acronym></acronym> (lühendite eristamine)

Erisümbolid ja kommentaarid:

HTMLi kood	Sümbol
 	jäik tühik, mis on alati kuvatud
"	"
&lt;	<
&gt;	>
&amp;	&
&laquo;	«
&raquo;	»
&Auml;	Ä
&auml;	ä
&Ouml;	Ö
&ouml;	ö
&Uuml;	Ü
&uuml;	ü
&Otilde;	Õ
&otilde	õ

 

Koodi loetavuse ja redigeerimise lihtsustamiseks on soovitav lisada kommentaare. Samuti, kui olete teinud uuendusi, ei tasu vana varianti kohe kustutada. Jätke see kommentaarina sisse, nii saate alati tulla vana versiooni juurde tagasi.

<!--kommentaar-->

Piltide lisamine

Veebilehed on tavalised tekstifailid, millesse ei saa integreerida teisi objekte. Pildi lisamiseks tuleb viitamisel näidata pildi faili nimi ja asukoht ning brauser kuvab pildi veebilehe sees.

Pildile viitamiseks on märgend <img />. Seda märgendit kasutatakse alati atribuutidega. Pildi faili nime ja asukoha näitamiseks on atribuut src (<img src="failinimi.gif">).

Pilti saab lehel joondada kahel viisil: sarnaselt teksti osale lõigu sees, näidates selle vertikaalset joondamist rea suhtes, või nagu eraldi lõiku, näidates horisontaaljoondamist. Kasutatakse atribuuti align. Rea sees saab joondada rea ülemise servaga (top), alumise servaga (bottom) või keskkohaga (middle). Kui joondada pilti eraldi lõiguna, on atribuudi väärtused left (vasak serv) või right (parem serv). Tsentreerida pilti ei saa.

Hüperlingid (viidad)

„Ülemaailmse ämblikuvõrgu" töö ei oleks viitadeta võimalik. Hüperlingid asuvad veebilehtedel ja ühendavad omavahel nii erinevaid lehti kui ka saite. Kusjuures saidid võivad asuda serverites, mis paiknevad üksteisest sadade tuhandete kilomeetrite kaugusel. Lingi loomiseks kasutatakse märgendit <a></a>. Nagu pildi märgendil, on viida märgendil kohustuslik atribuut, mis näitab faili nime ja asukohta (<a href="teekond">).

Viitasid on kolme liiki:

• välised - viitavad välisressurssidele, mis antud saidile ei kuulu
  (<a href="http://www.eucip.com">);
• sisemised - viidad saidi piires (<a href="folder/file.html">);
• viidad ühe lehe piires - võimaldavad liikuda ühest dokumendi osast teise, lahkumata lehelt; viita näidatakse <a href="#ankru-nimi">, kus ankru-nimi on märgistatud koht veebilehel, mida märgistatakse nii: <a name="ankru-nimi">.

Hüperlingi kuvamiseks võib kasutada nii teksti kui pilti. Näiteks viit <a href="pealeht.htm"><img src="logo.jpg" /></a> kuvab brauseri aknas pildi failist logo.jpg, klikkides viidal jõuate failile pealeht.htm.

Vormid

Vormi abil luuakse andmete edastamise võimalusi. Vormidesse sisestatud andmete töötlust teostatakse skriptide või spetsiaalsete rakenduste abil, mis tavaliselt asuvad serveris. Sisestatuid andmeid võib saata e-postiga, näiteks lehe autorile.

Vorm luuakse märgendite <form></form> abil. Ühel lehel võib olla ka mitu vormi. Selleks, et vormi andmeid saaks töödelda, näidatakse atribuudi action väärtusega, milline rakendus käivitada, ja atribuudi method väärtusega, millise meetodiga andmeid töödelda. Atribuut method võib omada väärtust GET või POST.

Andmete saatmiseks e-postiga kasutatakse meetodit POST ja kogu märgendi kirjapilt võib olla, näiteks, selline:

<form method=post action="mailto:address@server.com">.

Juhtelementide loomiseks kasutatakse märgendeid <input />, <textarea></textarea>, <select></select>.

Märgendi <input /> abil luuakse vormi juhtelemente, nende tüübi määramiseks on atribuut type.

Atribuudi type väärtused:

• Tekstiväljad
  • text - tekstikast;
  • hidden -varjatud tekst;
  • password - parooli väli (sisestatud andmed näidatakse tärnidega).
• Valikud
  • checkbox - valikkast;
  • radio - raadionupp.
• Nupud
  • submit - sisestamise kinnitus;
  • reset - katkestamine, väljade puhastamine;
  • file - failivaliku akna kuvamine;
  • image - graafiline nupp;
  • button - lihtne nupp.

Märgend <textarea></textarea> lubab luua tekstipiirkonna mitmerealise teksti sisestamiseks. Kui kogu tekst aknasse ei mahu, tekib kerimisriba.

Näiteks: <textarea name="textarea" cols="25" rows="4"></textarea>

Märgend <select></select> - Selle märgendi abil luuakse menüütüüpi juhtelement. Iga menüü element luuakse märgendiga <option></option>. Menüüst saab valida ühe või mitu väärtust. Menüü liigi määrab atribuut size. Kui selle väärtus on 1, kuvatakse hüpikmenüü. Kui atribuudi väärtus on ühest suurem, kuid elementide arvust väiksem, tekib kerimisriba.

Näide:
<select name="list" size=3>
<option value="element 1" selected=selected> rida 1</option>
<option value=" element 2"> rida 2</option>
<option value=" element 3"> rida 3</option>
</select>