Erinevus lehekülje "HTML" redaktsioonide vahel

Allikas: Kuutõrvaja
(Uus lehekülg: '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 teist...')
 
(→‎A [ankur])
50. rida: 50. rida:
 
== Elemendid ==
 
== Elemendid ==
  
−
=== A [ankur] ===
+
== A ==
  
−
Elementi kasutatakse viidete loomiseks.
+
A e. ankur. Kasutatakse viidete loomiseks.
  
 
Atribuut <font color='blue'>HREF</font> määrab viite sihi.  
 
Atribuut <font color='blue'>HREF</font> määrab viite sihi.  
85. rida: 85. rida:
 
<a href="#jutt">
 
<a href="#jutt">
 
</source>
 
</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).

Redaktsioon: 24. jaanuar 2011, kell 13:13

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

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">

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="blue">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).

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