Lehekülje HTML lähteteksti vaatamine

HTML

'''H'''yper '''T'''ext '''M'''arkup '''L'''anguage 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 

Veebilehe nõuetele vastamist saad kontrollida aadressil: [http://validator.w3.org/ validator.w3.org]

= Struktuur =

<source lang="html4strict">
<!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>
</source>

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

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 ('''C'''ascading '''S'''tyle '''S'''heet).

HTML keeles kommentaaride tegemiseks (või koodi välja kommenteerimiseks, et seda lehel ei kuvataks), tuleb kommenteeritav panna '''&lt;!--''' ja '''--&gt;''' vahele. 

<font color='red'>NB!</font> Kommenteeritud kood on lehe lähtekoodis näha!

Tihti sisaldavad elemendid ka atribuute:

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

= Elemendid =

== A ==

A e. ankur. Kasutatakse viidete loomiseks.

Atribuut <font color='blue'>HREF</font> määrab viite sihi. 

Viide kohalikus serveris asuvale failile:

<source lang="html4strict">
<a href="minust.html">Minust</a>
</source>

Viide Neti.ee HTML õpetusele:

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

Atribuut <font color='blue'>TARGET</font> määrab akna, kuhu viide väljastatakse (_blank, _self, _parent, _top, jne..)

Atribuut <font color='blue'>TITLE</font> määrab viite pealkirja, mida kuvatakse kui hiir liigutada viite peale.

Atribuut <font color='blue'>NAME</font> teeb vastava tekstilõigu viitena kättesaadavaks.

Näiteks tekstile

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

saaks viidata läbi

<source lang="html4strict">
<a href="#jutt">
</source>

== B ==

Rasvane kiri.

<source lang="html4strict">
<b>See tekst on rasvases kirjas</b>
</source>

== 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.

<source lang="html4strict">
Esimene rida.<br/>
Teine rida.<br/><br/>
Alumine rida.
</source>

== CENTER ==

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

<source lang="html4strict">
<center>See tekst on rea keskel!</center>
</source>

== DT, DL, DD ==

Elemente kasutatakse defineeritud nimekirja loomiseks.

'''dt''' - termin
'''dd''' - seletus

<source lang="html4strict">
<dl>
  <dt><b>Termin</b>
    <dd>Seletus!<dt>
</dl>
</source>

== DIV ==

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

<source lang="html4strict">
<div>Konteineri sisu</div>
</source>

== FONT ==

Atribuut <font color='blue'>COLOR</font> määrab tekstile värvuse. Värvust saab defineerida nii sõnade kui värvikoodiga.

<source lang="html4strict">
Muru on <font color="green">roheline</font> ja taevas on <font color="blue">sinine</font>.
</source>

== FORM ==

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

<source lang="html4strict">
<form>
  <!-- vormi elemendid -->
</form>
</source>

Atribuut <font color="blue">ACTION</font> määrab pärigu saaja asukohta, milleks on mingi skript (mis info talletab või sellega midagi ette võtab).

Atribuut <font color="blue">METHOD</font> 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

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

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 <font color="blue">NAME</font> määrab sisestuskastile nime.

Atribuut <font color="blue">MAXLENGTH</font> määrab sisestuskastile maksimaalse tähemärkide arvu.

Atribuut <font color="blue">SIZE</font> määrab sisestuskasti pikkuse.

Atribuut <font color="blue">VALUE</font> määrab sisestuskasti algväärtuse.

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

=== INPUT type="password" ===

Loob parooli sisestamiseks ühe realise lahti.

Atribuut <font color="blue">NAME</font> määrab sisestuskastile nime.

Atribuut <font color="blue">MAXLENGTH</font> määrab sisestuskastile maksimaalse tähemärkide arvu.

Atribuut <font color="blue">SIZE</font> määrab sisestuskasti pikkuse.

Atribuut <font color="blue">VALUE</font> määrab sisestuskasti algväärtuse.

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


=== INPUT type="checkbox" ===

Kontroll kastike [valitud/mitte valitud]. 

Atribuut <font color="blue">NAME</font> määrab kastikesele nime.

Atribuut <font color="blue">VALUE</font> määrab kastikesele väärtuse.

Atribuut <font color="blue">CHECKED="CHECKED"</font> määrab kastikese vaikimisi valituks.

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


=== INPUT type="radio" ===

Nupuke. Mitme valiku vahel valimiseks.

Atribuut <font color="blue">NAME</font> määrab nupukesele nime.

Atribuut <font color="blue">VALUE</font> määrab nupukesele väärtuse.

Atribuut <font color="blue">CHECKED="CHECKED"</font> määrab nupukese vaikimisi valituks.

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

<font color="red">NB!</font> 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 <font color="blue">NAME</font> määrab elemendi nime.

Atribuut <font color="blue">VALUE</font> määrab elemendi väärtuse.

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

=== INPUT type="file" ===

Failide üleslaadimiseks. Vormi meetod peab olema POST!

Atribuut <font color="blue">ENCTYPE="multipart/form-data"</font> määrab kodeeringu ning on kohustuslik.

Atribuut <font color="blue">NAME</font> määrab elemendi nime.

Atribuut <font color="blue">SIZE</font> määrab sisestusrea pikkuse.

Atribuut <font color="blue">VALUE</font> määrab elemendi väärtuse.

<source lang="html4strict">
<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>
</source>

=== INPUT type="submit" ===

Nupp, peale mille vajutamist postitatakse vormi sisu.

Atribuut <font color="blue">NAME</font> määrab mupu nime.

Atribuut <font color="blue">VALUE</font> määrab nupu väärtuse.

=== INPUT type="button" ===

Nupp, millele saab anda funktsiooni.

Atribuut <font color="blue">NAME</font> määrab mupu nime.

Atribuut <font color="blue">VALUE</font> määrab nupu väärtuse.

Atribuut <font color="blue">ONCLICK</font> määrab javascript funktsiooni, mida nupu vajutusel käivitatakse.

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

=== 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 <font color="blue">VALUE</font> määrab nupu väärtuse.

=== SELECT, OPTION ===

Rippmenüü.

Atribuut <font color="blue">SELECTED</font> määrab vaikimisi aktiivse valiku.

Atribuut <font color="blue">MULTIPLE</font> lubab valida mitu väärtust.

Atribuut <font color="blue">NAME</font> määrab valikule nime.

Atribuut <font color="blue">SIZE</font> määrab ära, mitut väärtust korraga näidatakse (select elemendil).

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

=== OL, UL, LI ===

Nimekirjade koostamiseks.

=== 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:

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

Otsingusõnad, mis seda veebi kirjeldavad:

<source lang="html4strict">
<meta name="keywords" content="wikipedia, kuutõrvaja, õpetused" >
</source>

Mõned otsingumootorid arvestavad veebi sisu kirjeldavat teksti:

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

Kas lubada otsingusüsteemide robotitel oma lehde indekseerida?

<source lang="html4strict">
<meta name="robots" content="all" >
</source>

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

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

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

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

== SCRIPT ==

JavaScripti lisamiseks lehele.

Atribuut <font color="blue">TYPE</font> märab skripti keele.

Atribuut <font color="blue">SRC</font> viitab scripti asukohale.

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

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

JavaScripti lisamine html dokumenti:

<source lang="html4strict">
<script type="text/javascript"> 

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

</script>
</source>

== SUB ==

Alaindeks.

<source lang="html4strict">
d = a<sub>n+1</sub> - a<sub>n</sub>
</source>

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

== SUP ==

Ülaindeks.

<source lang="html4strict">
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</source>

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