8 HTML lihtsad näited
Selles peatükis on toodud välja mõned lihtsamad näited veebilehtedel enim kasutust leidvatest elementidest. Ärge muretsege kui peatükis on juttu elementidest ja märgenditest, milest te veel midagi ei tea. Lähemalt on kõigist elementidest juttu järgnevates peatükkides.
HTML dokument
Kõik HTML dokumendid peavad algama deklaratsiooniga. HTML5-e puhul näeb deklaratsioon välja järgnev: <!DOCTYPE html>.
HTML dokument ise algab märgendiga <html> lõppeb märgendiga </html>.
HTML dokumendi kasutajale nähtav osa jääb märgendite <body> ja </body> vahele.
Näide:
<!DOCTYPE html> <html> <body> <h1>Esimene pealkiri</h1> <p>Esimene lõik.</p> </body> </html>
Pealkirjad
Pealkirjad defineeritakse HTML-keeles märgenditega <h1> kuni <h6>.
<h1> on seejuures kõige tähtsam pealkiri ning <h6> kõige vähemtähtsam pealkiri.
Näide:
<h1>See on esimese taseme pealkiri</h1> <h2>See on teise taseme pealkiri</h2> <h3>See on kolmanda taseme pealkiri</h3>
Lõigud
Lõigud defineeritakse märgendiga <p>.
Näide:
<p>Mina olen esimene lõik.</p> <p>Mina olen teine lõik.</p>
Lingid
Linke defineeritakse HTML-keeles märgendiga <a> (anchor).
Lingi sihtkoht määratakse atribuudiga href (hypertext reference).
Atribuute kasutatakse elemendi kohta lisateabe andmiseks.
Näide:
<a href="https://ramkool.edu.ee">Rocca al Mare Kool</a>
Pildid
Pilte defineeritakse märgendiga <img>.
Atribuutidena on näites kasutusel src, alt, width ja height.
Näide:
<img src="banaan.jpg" alt="Pilt banaanist" width="100" height="50">
Nupud
Nuppude puhul kasutatakse märgendit <button>.
Näide:
<button>*Kliki mind</button>
Loendid
Loendite defineerimiseks kasutatakse nummerdatud loendi puhul märgendit <ol> (ordered list) ja täpploendi puhul märgendit <ul> (unordered list). Loendi elemente defineeritakse märgenditega <li>.
Näide:
<ul> <li>Banaan</li> <li>Õun</li> <li>Pirn</li> </ul> <ol> <li>Kartul</li> <li>Peet</li> <li>Kaalikas</li> </ol>
