XHTML elemendid
Allikas: Tartu Descartes'i Lütseum
Mis on XHTML, element ja atribuut?
- XHTML
XHTML on lühend sõnadest Extensible HyperText Markup Language (eesti keeles: laiendatud hüpeteksti märkimise keel). XHTML on veebilehtede koostamise aluseks olev standard.
- Element
HTML ja XHTML puhul on element see osa koodist, mis jääb võrgulehitseja poolt näitamata ning mis kannab edasi informatsiooni lehe struktuuri kohta.
Elemendid koosnevad tavaliselt kahest "sildist" - <element> ja </element>. Esimene silt avab elemendi ja teine sulgeb selle. Mõned elemendid koosnevad ainult ühest elemendist, näiteks br, mis koosneb ainult ühest sildist - <br />.
- Atribuut
HTML- ja XHTML-märgistuskeeles nimetatakse atribuudiks elemendi omadust, mõnedel elementidel on mitu atribuuti. Näiteks veebilehe valmistaja saab HTML’i abil muuta fondi atribuute, näiteks tähemärkide suurust ja värvi, andes neile erinevaid väärtusi. XHTML atribuut koosneb tühikust, atribuudi nimest, võrdusmärgist ja jutumärkide või ülakomade vahele kirjutatud atribuudi väärtusest. Näiteks elemendile <a> saab lisada atribuuti href, millega saab täpsustada veebilehe aadressi, mis avaneks lingile klikkimisel:
<a href="http://www.tdl.ee"> TDL </a>.
XHTML elemendid
<!-- ... -->
Elementi kasutatakse kommentaari kirjutamiseks koodi. Veebibrauser ignoreerib seda, mis on "<!--" ja "-->" märgendite vahel kirjas. Tavaliselt kasutatakse seda, et seletada enda koodi, mis on hiljem kasulik teistele ning endale.
Näiteks:
<!-- Siin oleks kommentaar. Kommentaare tavaliselt näeb ainult koodis --> See on tavaline tekst.
Tulemus:
See on tavaline tekst.
<!DOCTYPE>
Element <!doctype> annab veebibrauserile info, mis XHTML tüüpi lehekülg on, et brauser saaks lehte korrektselt kuvada. Element <!doctype> peab olema esimene element XHTML dokumendis, enne <html> elementi.
On olemas kolm XHTML tüüpi:
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
See on kõige rangem dokumenditüüp. Kõiki XHTML elemente ja atribuute võib kasutada, va. need, mis on mõeldud kujundamiseks, näiteks font ja frameset elemendid.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Kõiki XHTML elemente ja atribuute saab kasutada, va. frameset elementi.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Kõiki XHTML elemente ja atribuute saab kasutada.
<a>
Elementi <a> kasutatakse, et luua link teisele veebilehele kasutades atribuuti href. Saab ka luua järjehoidja samal lehel olevale kohale kasutades atribuuti name, selle jaoks peab olema kaks <a> elementi, ühel atribuut href ja teisel name, mille väärtused mõlemal peavad olema samad, ainult et href-i väärtusel on “#“ ees.
<abbr>
Element <abbr> võimaldab seletada lühendit, kasutades atribuuti title. See, mis on pandud title-i väärtuseks, tuleb ekraanile, kui hoida hiirekursorit elemendi poolt määratud tekstil.
Näiteks:
<abbr title="Härra"> Hr. </abbr>
Tulemus:
Hr.
Kui hoida hiirekursor "Hr." üle, tuleb ette "Härra".
<acronym>
Element <acronym> võimaldab seletada akronüümi, kasutades atribuuti title . See, mis on pandud title-i väärtuseks, tuleb ekraanile, kui hoida hiirekursorit elemendi poolt määratletud tekstil. Näiteks:
<acronym title="Eesti Keele Instituut"> EKI </acronym>
Kui veebilehel hoida hiirekursor "EKI" üle, tuleb ette "Eesti Keele Instituut".
<address>
Element <address> eristab dokumendi omaniku või autori kontaktandmed muust tekstist kaldkirjaga. Tavaliselt lisatakse elementi <address> dokumendi päisesse või jalusesse. Tekst, mis on elemendi <address> märgendite vahel, kuvatakse brauserites kaldkirjas.
<area>
Element <area> määratleb mingit ala map-pildi sees. Map-pilt on pilt veebilehel klikitavate aladega. Vastavale kohale klikkimisel, mis on elemendi <area> poolt määratletud, võib näiteks uus pilt avaneda. Elementi <area> tuleb kasutada koos elemendiga <map>.
<b>
Element <b> muudab teksti paksuks.
Näiteks:
<b>Tekst!</b>
Tulemus:
Tekst!
<base>
Element <base> määratleb aadressi, mis on aluseks kõikide linkide jaoks sellel veebilehel. Aadressi määramiseks tuleb kasutada atribuuti href. Element <base> peab olema elemendi <head> märgendite vahel. Näiteks, kui elemendi <base> poolt määratletud veebileht oleks "http://www.google.com", saaks lehte "http://www.google.com/page.html" linkida ka nii, kui atribuudi href väärtuseks panna elemendil <a> ainult "page.html".
Kui vaikimisi lehekülg oleks "http://www.google.com", oleks koodis see kirjutatud nii:
<head> <base href="http://www.google.com/" /> </head>
<bdo>
Element <bdo> määrab teksti suuna atribuutiga dir, mille väärtuseks võivad olla ltr või rtl. "rtl", right to left, tähendab paremalt vasakule ja "ltr", left to right, tähendab vasakult paremale.
<big>
Element <big> muudab teksti suuremaks.
<blockquote>
Element <blockquote> eristab tekstist pikka tsitaati. Veebibrauser lisab tühja ruumi element <blockquote> ümber.
<body>
Body element määratleb lehekülje "keha". Lehekülje keha sisaldab kogu HTML lehe sisu, nagu näiteks teksti, hüperlinke, pilte, nimekirju jne.
<br>
Element <br> lisab teksti reavahetuse.
Näiteks:
See lause paistab suures aknas lugedes ühe pika lausena,<br /> siit algab uus rida.
Tulemus:
See lause paistab suures aknas lugedes ühe pika lausena,
siit algab uus rida.
<button>
Element <button> lisab vajutatava nuppu. Elemendiga <button> peab kasutama atribuuti type, millega saab määrata selle nuppu tüüpi – button, reset või submit. Submit tüüp nuppud lubavad kasutajal saata andmeid, reset tüüpi tühistavad täidetud lahtrid, button tüüpi nupud ei tee iseenesest midagi, käivitatava tegevuse määrab atribuut event.
<caption>
Element <caption> määratleb tabeli pealkirja. Peab sisestama kohe pärast elemendi <table> algust. Ühe tabeli kohta saab kasutada ainult üht pealkirja.
<center>
Element <center> paigutab teksti lehe keskele.
<col>
Element <col> määratleb atribuudi väärtused ühele või rohkematele tulpadele tabelis. Seda elementi saab kasutada ainult elemendi <table> või <colgroup> sees.
<colgroup>
Elementi <colgroup> kasutatakse tulpade grupeerimiseks, et saaks lihtsamini tulpade vormindust muuta. Elementi <colgroup> saab kasutada ainult elemendis <table>.
<dd>
Elementi <dd> kasutatakse definitsioonide loendis olevate terminite kirjeldamiseks. Element <dd> peab olema elementide <dl> ja <dd> vahel. Elemendi <dd> märgendite vahele võib lisada pilte, linke, tsitaate jne.
<del>
Element <del> määratleb kustutatud sisu. Sisu elemendis <del> kuvatakse mahakriipsutatud tekstina.
Näiteks:
Homme lähen <del>koju</del> tööle!
Tulemus:
Homme lähenkojutööle!
<div>
Element <div> määratleb sektsiooni XHTML dokumendis. Selle abil saab vormindada tervet määratletud sektsiooni, selle asemel, et igat elementi eraldi vormindada.
<dl>
Elementi <dl> kasutatakse, et luua definitsioonidega nimekiri. See on nimekiri, kus iga nimekirjas oleva termini taga on kirjas selle definitsioon. Elemendis <dl> peavad olema elemendid <dt> ja <dd>.
<dt>
Element <dt> määratleb terminid definitsioonide loendis. Element <dt> peab olema elemendis <dl>.
<fieldset>
Elementi <fieldset> kasutatakse, et grupeerida elemendid vormis. Element <fieldset> ümbritseb grupeeritud vormiosa kastiga.
<font>
Elemendiga <font> saab muuta teksti värvi (atribuut color), suurust (atribuut size) ja fonti (atribuut face).
Näiteks:
<font color="red" size="4" face="verdana">See peaks olema suur ja punast värvi.</font>
Tulemus:
See tekst on suur ja punast värvi.
<form>
Elementi <form> kasutatakse, et luua vorm, mis võtab vastu kasutaja poolt veebilehele sisestatud infot. Vorm võib sisaldada tekstivälju, märkeruute, nuppe jms. Vorme kasutatakse selleks, et edastada andmeid serverisse.
<frame>
Element <frame> määratleb ühe raami elemendis <frameset>. Igal raamil võivad olla erinevad omadused, nt kas raamil on serv ja raami nimi. Atribuut src määrab raamis kuvatava lehekülje.
<frameset>
Element <frameset> täpsustab lehe kujundust, kui kasutusel on raamid. Tulpade ja ridade arvu ning suuruse muutmiseks peab kasutama atribuute cols ja rows. Nende sisu saab muuta elemendiga <frame>.
<h1> kuni <h6>
XHTML-is on 6 pealkirjaelementi - <h1> kuni <h6>. Need elemendid muudavad teksti suurust. <h1> on suurim pealkiri ja <h6> on väikseim.
<head>
Element <head> määratleb veebilehekülje päiseosa, mis võib sisaldab päiseelemente - <base>, <link>, <meta>, <script>, <style>, ja <title>. Kõik need elemendid annavad infot veebilehe kohta.
<hr>
Element <hr> kuvab veebilehel horisontaalse joone. Joone kõrgust saab muuta atribuudiga size ning pikkust atribuudiga width.
<html>
Element <html> ütleb veebibrauserile, et tegu on HTML dokumendiga. Element <html> peab olema üks esimestest elementidest XHTML veebilehtedes.
<i>
Element <i> muudab teksti kaldkirjaks.
Näiteks:
<i>Tekst</i>
Tulemus:
Tekst
<iframe>
Elemendiga <iframe> saab lisada veebilehele raami, kus kuvatakse mõni muu dokument või veebileht.
<img>
Element <img> lisab pildi veebilehele. Pildifaili asukoha näitamiseks peab kasutama atribuuti src.
<input>
Elemendiga <input> saab sõltuvalt atribuudi type väärtusest luua erinevaid vormielemente – tekstlahtreid (väärtuseks peab olema text), märkeruute (väärtuseks checkbox), raadionuppe (väärtuseks radio), nuppe (väärtuseks button), parooli lahtreid (väärtuseks password), faili lehitsejaid (väärtuseks file), pilte (väärtuseks image) ja edastusnuppe (väärtuseks submit).
<ins>
Element <ins> määratleb teksti, mis on lisatud lehele. Tekst, mis on elemendi <ins> märgendite vahel, kuvatakse veebibrauserites allakriipsutatuna.
Näiteks:
Tavaline tekst,<ins> sisestatud tekst</ins>!
Tulemus:
Tavaline tekst, sisestatud tekst!
<label>
Elementi <label> kasutatakse koos elemendiga <input>. See muudab teksti nii, et sellele klikkimisega valitakse ka vastava elemendi <input> poolt määratletud valik. Elemendi <label> atribuudi for väärtus peab olema võrdne elemendi <input> atribuut id väärtusega, see seob mõlemad elemendid kokku.
<legend>
Elemendiga <legend> saab pealkirja lisada elemendi <fieldset> poolt grupeeritud elementide vormile.
<li>
Element <li> määratleb loetelus oleva lõigu. Seda elementi kasutatakse elementides <ol> ja <ul>.
<link>
Element <link> seob kokku veebilehekülje ja ühe välise dokumendi atribuuti href kasutades. Näiteks saab sellega muuta, mil viisil lehekülg on kuvatud, kui href-i väärtuseks panna stiililehe asukoht.
<map>
Element <map> määratleb map-pildi. Map-pilt on pilt klikitavate aladega. Elemendi <map> atribuut name peab olema sama väärtusega nagu elemendi <img> atribuudi usemap väärtus, aga usemap väärtusel peab "#" ees olema, et luua side mõlema elemendi vahel. Elemendiga <img> saab valida pildi ja element <map> muudab selle map-pildiks, kui nende usemap ja map väärtused on samad.
<meta>
Element <meta> sisaldab andmeid veebilehe kohta ja neid andmeid ei näidata veebilehel. Elementi <meta> kasutatakse enamasti lehe kirjeldamiseks atribuutide name ja content abil. Atribuudi content väärtus sõltub name väärtusest, näiteks kui name väärtus on "author", peab content väärtuseks olema autori nimi.
Name väärtuseks on võimalik panna: author (lehe autori nimi), description (lehe lühikirjeldus), keywords (võtmesõnad otsingumootorite jaoks), generator (tarkvara nimi, millega leht tehti juhul kui leht on automaatselt genereeritud), date (loomiskuupäev), revised (viimase muudatuse kuupäev), robots (käsud otsingumootorite indekseerimisrobotitele.)
Element <meta> läheb alati elemendi <head> sisse. Elemendi poolt edastatud andmeid saavad kasutada veebibrauserid, otsingumootorid ja muud veebiteenused.
<noframe>
Elementi <noframe> kasutatakse veebibrauserite jaoks, mis ei näita raame. Selles elemendis võivad olla kõik elemendid, mis võivad olla elemendis <body>. Tavaliselt kasutatakse elementi selleks, et teatada kasutajatele, et raamide toetus on lehe kuvamiseks vajalik. Element <noframe> peab olema elemendis <frameset>.
<noscipt>
Elementi <noscipt> kasutatakse alternatiivse sisu andmiseks kasutajatele, kelle brauseris pole skriptid lubatud. Selles elemendis võivad olla kõik elemendid, mis võivad olla elemendis <body>. Elemendis <noscipt> sisu näidatakse ainult siis, kui skriptid pole lubatud.
<ol>
Element <ol> loob nummerdatud loendi.
<option>
Elemendiga <option> saab lisada valikuid rippmenüüsse. Element <option> peab sisalduma elemendis <select>.
<optgroup>
Elementi <optgroup> kasutatakse, et grupeerida valikud valikuteloetelus, lisades rippmenüüsse selle grupi nime rasvaselt. Grupi nime määramiseks peab kasutama atribuuti label.
<p>
Elementi <p> kasutatakse lõigu tähistamiseks. Element <p> lisab automaatselt tühja rea enne ja pärast lõiku.
<pre>
Element <pre> esitab lihtteksti muutmata kujul. XHTML ignoreerib tühikuid (kui neid on rohkem kui üks) ja reavahetusi tekstis, aga elemendi <pre> märgendite vahel olevas tekstis säilitatakse need.
Näiteks:
<pre> Võin seda vormistada nii kuidas tahan. </pre> Seda teksti aga mitte.
Tulemus:
Võin seda vormistada nii kuidas tahan. Seda teksti aga mitte.
<q>
Element <q> määratleb lühikest tsitaati. Veebibrauser automaatselt lisab jutumärgid tsitaadi ümber.
<s> / <strike>
Element <s> tähistab läbikriipsutatud teksti. <s> asemel võib kasutada ka <strike>.
Näiteks:
Tulen <s>täna</s> homme koju!
Tulemus:
Tulentänahomme koju!
<script>
Element <script> määratleb skripti või võib osutada välisele skript failile kasutades atribuuti src. Skripti tüübi täpsustamiseks peab kasutama atribuuti type.
<select>
Element <select> loob rippmenüü. Valikute lisamiseks menüüsse tuleb kasutada elementi <option>.
<small>
Element <small> muudab teksti väiksemaks.
<span>
Element <span> iseenesest ei tee midagi, aga see võimaldab muuta elemendi poolt määratletud teksti esitust. Näiteks saab atribuudi <style> abil määratleda, kuidas see muudaks teksti vormingut elemendi <span> märgendite vahel.
<style>
Elementi <style> kasutatakse lehekülje kujunduse kirjeldamiseks. Selle elemendiga määratletakse elementide kujundused terve lehekülje ulastuses. Elemendiga <style> peab kasutama atribuuti type, mille väärtuseks peab olema "text/css". Element <style> peab olema elemendi <head> sees.
<sub>
Element <sub> paigutab teksti ümbritsevast tekstist madalamale.
Näiteks:
H<sub>2</sub>O.
Tulemus:
H2O.
<sup>
Element <sup> paigutab teksti ümbritsevast tekstist kõrgemale.
Näiteks:
Ta sündis aastal 1550.<sup>[1]</sup>
Tulemus:
Ta sündis aastal 1550.[1]
<table>
Element <table> loob tabeli. Ridade ja lahtrite lisamiseks peab kasutama elemente <<nowiki>tr> ja <td>, mis mõlemad peavad olema elemendis <table</nowiki>>.
<tbody> & <thead> & <tfoot>
Element <tbody> grupeerib kokku põhiosa sisu tabelis, element <thead> grupeerib päise sisu tabelis ja <tfoot> grupeerib jaluse sisu tabelis. Neid elemente peaks kasutama koos ja nad kõik käivad elemendi <table> sisse, aga <tfoot> peaks olema enne elementi <tbody>. Elemendi <<nowiki>style> abil saab muuta, kuidas elementide <tbody>, <thead> ja <tfoot> poolt grupeeritud teksti muudetakse.
<td>
Element <td> määratleb lahtri tabelis. See element peab olema elemendi <tr> sees.
<textarea>
Element <textarea> loob tekstikasti, mille suurust saab muuta rows ja cols atribuutidega.
<th>
Element <th> loob päiselahtri tabelis, <th> erineb elemendist <td> sellega, et tekst selles lahtris on rasvane ja lahtri keskel. See element peab olema elemendi <tr> sees.
<title>
Element <title> määratleb lehekülje pealkirja. Lehe pealkiri on näha veebibrauseri tiitelribal. See element peaks olema iga veebilehe päises.
<tr>
Element <tr> loob uue rea tabelis. Selles elemendis peavad olema elemendid <th> või <td> ning element <tr> ise peab olema elemendis <table>.
<tt>
Element <tt> määratleb telegrammilaadse teksti.
<u>
Element <u> muudab teksti allakriipsutatuks.
Näiteks:
Teksttekst <u>teksttekst</u>!
Tulemus:
Teksttekst teksttekst!
<ul>
Element <ul> loob järjestamata loendi, loendis olevaid objekte tähistatakse elemendiga <li>.
