HTML

Allikas: Kuutõrvaja

HTML

Hyper Text Markup Language on markeerimiskeel, mida kasutatakse veebi lehtede koostamiseks. HTML'is saab kuvada, pilte, videosid, tekste ja linke teistele lehtedele. HTML ei ole skriptimiskeel ja defineerib vaid objektide asetust (ja mingil määral ka parameetreid) lehel. Dünaamilisuse lisamiseks kasutatakse skriptimiskeeli, näiteks nagu PHP või Ruby on Rails. Populaarsed on ka Flash lahendusi kasutavad lehed.

Standardid

Selleks, et kõik brauserid mõistaksid veebilehte sama moodi, on olemas standardid.

Tänapäeval enimkasutatud:

  • HTML 4.01
  • XHTML 1.0 Strict
  • XHTML 1.0 Transitional
  • XHTML 1.0 Frameset

Paraku on HTML 4.01 juba väljasuremise äärel ja uued lehed kasutavad ohtralt CSS'i, mis tuleks endale kindlasti selgeks teha!

Veebilehe nõuetele vastamist saad kontrollida aadressil: validator.w3.org

Struktuur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <title>Lehe pealkiri</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>

Lehe sisu!

</body>
</html>

HTML elemendid (e. tag'id) asuvad < ja > märkide vahel. Elementide kehtivuse lõpetab märge, mis asub </ ja > vahel. Näiteks elemendi <b> kehtivuse lõpetab märge </b>. Mõned elemendil puudub lõpumärge, nagu näiteks <br>. Selliste puhul tuleb XHTML keeles panna kaldkriips sedasi: <br/>.

HTML 4.01 standard oli palju kirjum ja vabam kui XHTML 1.0. Viimane lubab html elemente defineerida vaid väikeste tähtedega. Samas kasutab viimane elementide kujunduseks suures osas CSS'i (Cascading Style Sheet).

HTML keeles kommentaaride tegemiseks (või koodi välja kommenteerimiseks, et seda lehel ei kuvataks), tuleb kommenteeritav panna <!-- ja --> vahele.

NB! Kommenteeritud kood on lehe lähtekoodis näha!

Tihti sisaldavad elemendid ka atribuute: 

<img src="pilt.jpg" alt="See tekst kuvatakse, kui pildifaili ei leitud" title="Pildi pealkiri">

Elemendid

A

A e. ankur. Kasutatakse viidete loomiseks.

Atribuut HREF määrab viite sihi.

Viide kohalikus serveris asuvale failile: 

<a href="minust.html">Minust</a>

Viide Neti.ee HTML õpetusele: 

<a href="http://www.neti.ee/HTML.html">Neti.ee HTML õpetus</a>

Atribuut TARGET määrab akna, kuhu viide väljastatakse (_blank, _self, _parent, _top, jne..)

Atribuut TITLE määrab viite pealkirja, mida kuvatakse kui hiir liigutada viite peale.

Atribuut NAME teeb vastava tekstilõigu viitena kättesaadavaks.

Näiteks tekstile 

<a name="jutt"> Selles tekstis on mingi jutt!</a>

saaks viidata läbi 

<a href="#jutt">

APPLET

Java programmi lisamiseks veebilehele.

Atribuut CODE määra appleti nime, mis käivitatakse.

Atribuut CODEBASE määrab asukoha kettal, kui applet pole samas kaustas kus veebileht.

Atribuut WIDTH määrab Java akna laiuse pikselites.

Atribuut HEIGHT määra Java akna kõrguse pikselites.

Atribuut ALT määrab alternatiivse teksti, mida kuvatakse kui brauser mingil mõhjusel appletti ei käivitanud.

Atribuut NAME määrab Java programmi nime.

Atribuut ALIGN määrab programmi akna asukoha veebilehel.

Atribuut VSPACE määrab Java akna ja vertikaalse teksti kauguse temast.

Atribuut HSPACE määrab Java akna ja horisontaalse teksti kauguse temast.

Atribuut BORDER määrab Java akna ümber raami. 

<applet code="MyApplet.class" width="100" height="100">
<param name="text" value="Terekest">
<p>Terekest<p>
</applet>

B

Rasvane kiri. 

<b>See tekst on rasvases kirjas</b>

BODY

Element defineerib HTML lehe sisu alguse ja lõpu. Lehe ekraanile kuvatav osa peab olema nende elementide vahel!

BR

Reavahetus. HTML keeles pole tavalisest enteri vajutusest kasu. Reavahetuseks on vaja spetsiaalne HTML element. 

Esimene rida.<br/>
Teine rida.<br/><br/>
Alumine rida.

CENTER

Elemendi alguse ja lõpu vahel olev sisu joondatakse keskele. 

<center>See tekst on rea keskel!</center>

DT, DL, DD

Elemente kasutatakse defineeritud nimekirja loomiseks.

dt - termin dd - seletus 

<dl>
  <dt><b>Termin</b>
    <dd>Seletus!<dt>
</dl>

DIV

Konteiner, mille sisse saab paigutada infot. Konteineri asukoht võib olla lehel nii fikseeritud kui dünaamiline. 

<div>Konteineri sisu</div>

FONT

Atribuut COLOR määrab tekstile värvuse. Värvust saab defineerida nii sõnade kui värvikoodiga. 

Muru on <font color="green">roheline</font> ja taevas on <font color="#00f">sinine</font>.

FORM

Vorme kasutatakse kasutaja poolse sisendi küsimiseks. Kasutatakse logimise akna (kasutajanimi, parool) kui ka registreerimisvormide jms. loomiseks. 

<form>
  <!-- vormi elemendid -->
</form>

Atribuut ACTION määrab pärigu saaja asukohta, milleks on mingi skript (mis info talletab või sellega midagi ette võtab).

Atribuut METHOD määrab päringu tüübi (POST või GET).

POST meetodit kasutatakse, kui postituse sisu peab olema varjatud (login).

GET meetodit kasutatakse, kui postituse sisu peaks peale postitust olema näha.

Oletame, et meil on fail aadressil 

 http://<minuserver>/otsing.html

<form method="get" action="">
  <input type="text" name="otsing" value="mingitekst" />
  <input type="submit" name="otsi" value="Otsi" />
</form>

Peale vormi postitamist on aadressiriba järgmine: 

 http://<minuserver>/otsing.html?otsing=mingitekst&otsi=Otsi

INPUT type="text"

Loob teksti sisestamiseks ühe realise lahti.

Atribuut NAME määrab sisestuskastile nime.

Atribuut MAXLENGTH määrab sisestuskastile maksimaalse tähemärkide arvu.

Atribuut SIZE määrab sisestuskasti pikkuse.

Atribuut VALUE määrab sisestuskasti algväärtuse. 

<form>
  <input type="text" name="otsing" value="mingitekst" />
</form>

INPUT type="password"

Loob parooli sisestamiseks ühe realise lahti.

Atribuut NAME määrab sisestuskastile nime.

Atribuut MAXLENGTH määrab sisestuskastile maksimaalse tähemärkide arvu.

Atribuut SIZE määrab sisestuskasti pikkuse.

Atribuut VALUE määrab sisestuskasti algväärtuse. 

<form>
  <input type="password" name="parool" value="" />
</form>


INPUT type="checkbox"

Kontroll kastike [valitud/mitte valitud].

Atribuut NAME määrab kastikesele nime.

Atribuut VALUE määrab kastikesele väärtuse.

Atribuut CHECKED="CHECKED" määrab kastikese vaikimisi valituks. 

<form>
  <input type="checkbox" name="uudiskiri" checked="checked" />
</form>


INPUT type="radio"

Nupuke. Mitme valiku vahel valimiseks.

Atribuut NAME määrab nupukesele nime.

Atribuut VALUE määrab nupukesele väärtuse.

Atribuut CHECKED="CHECKED" määrab nupukese vaikimisi valituks. 

<form>
  <input type="radio" name="sugu" value="m" />
  <input type="radio" name="sugu" value="n" checked="checked" />
</form>

NB! Kui Nupukeste seast peab olema valitav vaid üks korraga, siis peavad kõik vastavad nupukesed kandma sama nime. Vormi postitamisel saadetakse kaasa lihtsalt erinev väärtus (value).

INPUT type="hidden"

Varjatud väärtuse postitamiseks.

Atribuut NAME määrab elemendi nime.

Atribuut VALUE määrab elemendi väärtuse. 

<form>
  <input type="hidden" name="andmebaasi_id" value="1" />
</form>

INPUT type="file"

Failide üleslaadimiseks. Vormi meetod peab olema POST!

Atribuut ENCTYPE="multipart/form-data" määrab kodeeringu ning on kohustuslik.

Atribuut NAME määrab elemendi nime.

Atribuut SIZE määrab sisestusrea pikkuse.

Atribuut VALUE määrab elemendi väärtuse. 

<form method="post" action="skript_mis_v6tab_postituse_vastu.php" enctype="multipart/form-data">
  <input type="file" name="fail" />
  <input type="submit" name="postita" value="Postita" />
</form>

INPUT type="submit"

Nupp, peale mille vajutamist postitatakse vormi sisu.

Atribuut NAME määrab nupu nime.

Atribuut VALUE määrab nupu väärtuse.

INPUT type="button"

Nupp, millele saab anda funktsiooni.

Atribuut NAME määrab nupu nime.

Atribuut VALUE määrab nupu väärtuse.

Atribuut ONCLICK määrab javascript funktsiooni, mida nupu vajutusel käivitatakse. 

<form>
  <input type="button" name="ole_viisakas" value="Noh" onclick="alert('Tere!');">
</form>

INPUT type="image"

Toimib nagu "submit" nupp, kuid nupuna kasutatakse pilti ja postitatakse ka x ja y koordinaat.

INPUT type="reset"

Tühistab kõik vormis tehtud muudatused.

Atribuut VALUE määrab nupu väärtuse.

SELECT, OPTION

Rippmenüü.

Atribuut SELECTED määrab vaikimisi aktiivse valiku.

Atribuut MULTIPLE lubab valida mitu väärtust.

Atribuut NAME määrab valikule nime.

Atribuut SIZE määrab ära, mitut väärtust korraga näidatakse (select elemendil). 

<form>
<select name="kuu">
  <option value="1">jaanuar</option>
  <option value="2" selected="selected">veebruar</option>
  <option value="3">märts</option>
</select>
</form>

TEXTAREA

Element teksti sisestamiseks, võib koosneda mitmest reast.

Atribuut COLS määrab märkide arvu ühel real ja ühtlasi ka elemendi pikkuse. Atribuut ROWS määrab ridade arvu ja ühtlasi ka elemendi kõrguse. Atribuut NAME määrab elemendi nime. 

<form>
  <textarea name="sisu" cols="40" rows="4">Vaikimisi tekst lahtris.</textarea>
</form>

HEAD

Lehekülje päis. Sisaldab erinevat informatsiooni, mida lehe sees ei kuvata.

HR

Atribuut SIZE määrab joone jämeduse.

Atribuut WIDTH määrab joone pikkuse.

Atribuut ALIGN määrab joone asukoha horisontaalselt (left, right, center).

Atribuut NOSHADE lülitab välja joone varju.

HTML

Veebilehe algus ja lõpp. Igal veebilehel on vaid üks <HTML> ja </HTML>!

I

Kursiivkirjas (kaldkirjas) tekst. 

<i>Kaldkiri</i>

IMG

Pildi lisamiseks veebilehele.

Atribuut ALIGN määrab pildi asukoha veebilehel. Atribuut ALT alternatiivne tekst, juhul kui brauser ei saa pilti kuvada. Atribuut SRC määrab pildi, mida kuvatakse. Atribuut WIDTH määrab pildi laiuse pikselites. Atribuut HEIGHT määrab pildi kõrguse pikselites. Atribuut BORDER määrab pildi raami ja selle paksuse pikselites. Atribuut TITLE määrab pildile pealkirja, mida näidatakse kursori viimisel pildile. 

<img src="Kiisu.jpg" alt="Siin peaks olema kiisu pilt" title="Kiisu!" />

OL, UL, LI

Nimekirjade koostamiseks.

UL - Numerdamata loetelu 

<ul>
  <li>Esimene</li>
  <li>Teine</li>
  <li>Kolmas</li>
</ul>

OL - Numerdatud loetelu 

<ol>
  <li>Esimene</li>
  <li>Teine</li>
  <li>Kolmas</li>
</ol>

META

Läbi META elemendi lisatakse veebilehele täiendavat informatsiooni brauseri tarbeks. See element lisatakse HEAD elementide vahele ja seda ekraanile ei kuvata!

Paneme päisena paika, et tegu on HTML dokumendiga: 

<meta http-equiv="Content-Type" content="text/html" >

Otsingusõnad, mis seda veebi kirjeldavad: 

<meta name="keywords" content="wikipedia, kuutõrvaja, õpetused" >

Mõned otsingumootorid arvestavad veebi sisu kirjeldavat teksti: 

<meta name="description" content="Vabavaralised õpetused nii algajale kui edasijõudnutele." >

Kas lubada otsingusüsteemide robotitel oma lehde indekseerida? 

<meta name="robots" content="all" >

Määrame veebilehe tähestikuks (kooditabeliks) ladina tähestiku: 

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Suuname kasutaja 10 sekundi pärast Neti.ee portaali: 

<meta http-equiv="refresh" content="10; url=http://www.neti.ee/" />

P

Paragraaf. 

<p> Tekstilõik, millele eelneb ja järgneb pisut tühja ruumi. </p>

PRE

Eelnevalt formaaditud tekst. Arvestatakse kõiki tühikuid ja reavahetusi. 


<pre> 
  #######################
  #        Magan        #<--
  #######################  |
             |             |
             |             | EI
             |             |
  #######################  |
  # Äratuskell heliseb? #---
  #######################
             |
             | JAH
             |
  #######################
  #     Ärkan üles      #
  #######################
</pre>

 #######################
 #        Magan        #<--
 #######################  |
            |             |
            |             | EI
            |             |
 #######################  |
 # Äratuskell heliseb? #---
 #######################
            |
            | JAH
            |
 #######################
 #     Ärkan üles      #
 #######################

SCRIPT

JavaScripti lisamiseks lehele.

Atribuut TYPE märab skripti keele.

Atribuut SRC viitab scripti asukohale.

JavaScripti lisamine failina (lisatakse päisesse HEAD elementide vahele): 

<script src="javascripti_fail_kettal.js" type="text/javascript"></script>

JavaScripti lisamine html dokumenti: 

<script type="text/javascript"> 

  alert( "JavaScript käivitatud!" ); // väljastame ekraanile "JavaScript käivitatud!"

</script>

Rohkem juttu JavaScript'ist

STRIKE

Läbi joonitud tekst.

SUB

Alaindeks. 

d = a<sub>n+1</sub> - a<sub>n</sub>

 d = an+1 - an

SUP

Ülaindeks. 

a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

 a2 + b2 = c2

TABLE

Tabelite loomiseks. Tabelid on sisu paigutamise viisideks veebilehel.

Atribuut BORDER määrab tableli äärejoonte jämeduse.

Atribuut CELLPADDING määrab tabeli lahtrite sisu kauguse servadest.

Atribuut CELLSPACING määrab tabeli lahtrite kauguse teineteisest.

Atribuut WIDTH määrab tabeli laiuse.

Atribuut HEIGHT määrab tabeli kõrguse.

Atribuut ALIGN määrab tabeli joondamise. 

<table border="1">
<tr>
  <td>Rida #1, Lahter #1</td>
  <td>Rida #1, Lahter #2</td>
</tr>
</table>
Rida #1, Lahter #1 Rida #1, Lahter #2

TH

Element <TH> määrab tabeli päise (veeru nime).

Atribuut ALIGN määrab teksti asukoha lahtris horisontaalselt (left, right, center).

Atribuut VALIGN määrab teksti asukoha lahtris vertikaalselt (top, middle, bottom, baseline)

Atribuut NOWRAP keelab lahtris oleva teksti poolitamise.

Atribuut COLSPAN ühendab mitu lahtrit (samal real) omavahel kokku.

TR

Element <TR> määrab tabeli rea.

Atribuut ROWSPAN ühendab mitu lahtrit (samas veerus) omavahel kokku.

TD

Element <TD> määrab tabeli lahtri.

Atribuut ALIGN määrab teksti asukoha lahtris horisontaalselt (left, right, center).

Atribuut VALIGN määrab teksti asukoha lahtris vertikaalselt(top, middle, bottom, baseline)

Atribuut NOWRAP keelab lahtris oleva teksti poolitamise.

Atribuut COLSPAN ühendab mitu lahtrit (samal real) omavahel kokku. 

<table cellpadding="5" border="1">
<tr>
  <td colspan="2">1-1</td>
  <td>1-2</td>
  <td>1-3</td>
</tr>
<tr>
  <td>2-1</td>
  <td colspan="2">2-2</td>
  <td>2-3</td>
</tr>
<tr>
  <td>3-1</td>
  <td>3-2</td>
  <td colspan="2">3-3</td>
</tr>
<tr>
  <td colspan="2">4-1</td>
  <td colspan="2">4-2</td>
</tr>
<tr>
  <td>5-1</td>
  <td>5-2</td>
  <td>5-3</td>
  <td>5-4</td>
</tr>
</table>
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
4-1 4-2
5-1 5-2 5-3 5-4

TITLE

Lehekülje pealkiri, kirjutatakse päisesse.

U

Allajoonitud tekst.

Nipid

  • Lingid võivad olla teksti asemel ka pildid. Sellisel puhul tuleb pildi ümber inetu sinine raam, mis peale lingi külastamist lillaks muutub. Selle vastu saab sedasi, kui pildil raam ära keelata:
<img src="minupilt.jpg" alt="kirjeldus" title="pealkiri" border="0" />
  • Kui cellpadding ja cellspacing jätta tabeli juures määramata, siis tegelikult pole nende algväärtused nullid. Seega on alati soovitatav need määrata, isegi siis kui need nulliga võrduma panna.
<table cellpadding="0" cellspacing="0">
<tr>
  <td> lahter </td>
</tr>
</table>

Lingid

http://www.neti.ee/HTML.html

http://w3schools.com/html/default.asp

Pärit leheküljelt "https://kuutorvaja.eenet.ee/w/index.php?title=HTML&oldid=24477"