XHTML elemendid

Autor: Margo Munner | Kuupäev: 29.06.2008 | Kommentaarid (5)

Selles juhendis kasutame kõige olulisemaid XHTML elemente ning koostame juba asjalikuma dokumendi.

Tiitel (element: title)

Täiendame eelmises juhendis toodud baas-faili vedikene sisuga. Esimesena lisame lehele tiitli. Lehekülje tiitel kirjutatakse päiseosale (head).

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>See on XHTML õppimise esimene näiteleht</title>
</head>
<body>

</body>
</html>

Salvesta see fail ning ava võrgulehitsega (Internet Explorer, Mozilla Firefox, Opera, Safari, Konqueror). Sisestatud tiitel on "See on XHTML õppimise esimene näiteleht" ning seda näeb võrgulehitseja ülemises paremas nurgas. Ära kunagi unusta tiitlit! Kui viid oma www-lehe internetiavarustesse, peab see koht ütlema ka midagi reaalset just selle dokumendi sisu kohta. Ära jäta seda kohta tühjaks ega kirjuta siia väärtuseks "Untitled", "index.html", "New Document" või muud samavõrd ebamäärast! Just tiitel on see, mida näeb kasutaja esimesena, kui leiab mõne otsingumootori abil Sinu koostatud www-dokumendi.

Pealkirjad (elemendid: h1, h2, h3, h4, h5, h6)

Pealkiri ehk elementideseeria h1 kuni h6 on mõeldud dokumendi korrektseks struktrueerimiseks. Element <h1>vahel olev informatsioon</h1> peaks teooria järgi olema lehekülje kõige olulisem pealkiri (ingl. k. "heading"). Seda võiks ühe dokumendi raames esineda vaid ühel korral. Edasised alampealkirjad seega juba näiteks <h2></h2> või <h6></h6> võivad esineda mitu korda. Teeme ühe näite. Pealkirjad tuleb kirjutada juba lehe body-osas. Tegemist on juba lehe reaalse sisuga, mida näitab võrgulehitseja oma peamises aknas.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>See on XHTML õppimise esimene näiteleht</title>
</head>
<body>

<h1>See on "Lorem ipsum" teksti tutvustav jutt</h1>
<h2>"Lorem ipsum" teksti esimesed lõigud</h2>
<h2>Mis on "Lorem ipsum" tekst?</h2>

</body>
</html>

Kui salvestad faili ning vaatad seda võrgulehitsejaga, näed, et sisestatud tekst paikneb selliselt, et iga pealkirja järel on reavahe ning h1-elemendi sees olev tekst on suurem, kui h2 elemendi sees olev tekst.

Lõik (e. paragraaf; element: p)

Ilmselt ei ole vaja pikalt selgitada lõigu olemust tekstitöötlusel. Tegemist on siis ühtsesse plokki kirjutatud tekstiga ning selle kõige korrektsemaks kuvamiseks XHTML abil kasutatakse elementi p. Lisame äsjasisestatud pealkirjadele veidikene ka teksti ning seda just lõikude näol.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>See on XHTML õppimise esimene näiteleht</title>
</head>
<body>

<h1>See on "Lorem ipsum" teksti tutvustav jutt</h1>
<p>Sellelt lehelt leiate veidikene informatsiooni "Lorem ipsum" teksti olemuse kohta.</p>
<h2>"Lorem ipsum" teksti esimesed lõigud</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eget enim non odio 
tempus sollicitudin. Proin eu nisl. Aliquam iaculis justo at lorem. Ut elit enim, ullamcorper nec, 
elementum a, dictum non, orci. Aenean dapibus egestas mi. Integer ac arcu. Morbi porttitor augue 
ut sem. Pellentesque non metus luctus nisi iaculis pellentesque. Phasellus orci sem, convallis quis, 
gravida gravida, volutpat ac, magna. Curabitur hendrerit, tellus vitae tempus mollis, justo lacus 
dapibus ipsum, ac iaculis nisl lorem at erat. Nunc velit. Donec in orci. Nulla in purus. In ac felis. 
Vivamus consectetuer laoreet mi. Aenean rhoncus mattis tellus. Donec lacinia augue sit amet arcu.
Pellentesque ornare convallis elit.</p>
<p>Cras vitae pede sed purus nonummy varius. Suspendisse potenti. Ut cursus fringilla dolor. 
Maecenas id neque. Maecenas tincidunt est. Pellentesque vel sem eu purus aliquet tempus. Praesent 
orci. Aliquam condimentum metus ut lorem. Suspendisse potenti. Ut leo lacus, imperdiet vitae, 
accumsan eu, accumsan a, nisi. Integer justo. Vestibulum at risus eu elit sagittis ornare.</p>
<p>Donec erat. Morbi varius. Cras tortor. Curabitur faucibus sagittis libero. Morbi vehicula 
malesuada erat. Pellentesque sed ligula. Suspendisse commodo accumsan ligula. Suspendisse sem. 
Duis non nisi. Phasellus accumsan ante sit amet neque. Praesent ullamcorper. Donec tempor. 
Pellentesque pulvinar, velit id facilisis laoreet, nisl lacus pretium metus, at pulvinar lacus velit 
ac est. Donec consectetuer sem ac odio. Donec a ligula. Donec purus libero, feugiat non, ornare in, 
aliquet vitae, velit. Nulla purus tellus, sagittis nec, mollis ut, rhoncus et, velit. Aenean 
ullamcorper. In ut eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
ac turpis egestas.</p>
<h2>Mis on "Lorem ipsum" tekst?</h2>
<p>Lorem Ipsum on n.ö. ajutine tekst, mida on kasutatakse siis, kui midagi
muud pole (veel) dokumenti kirjutada.</p>

</body>
</html>

Loendid (elemendid: ol, ul, li)

Loendid ehk nimekirjad (ingl. k. list) on mõeldud millegi järjestikku kuuluva kuvamiseks. Näiteks seeria puuviljadest. Jätame veidikeseks kõrvale varemkoostatud dokumendi ning teeme paar näidet loendite kohta.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et" lang="et">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Loendid XHTML-is (näiteleht)</title>
</head>
<body>

<h3>Puuviljad:<h3>
<ul>
  <li>õun;</li>
  <li>pirn;</li>
  <li>ploom;</li>
  <li>kirss;</li>
  <li>apelsin.</li>
</ul>

<h3>Minu lemmikpuuviljade edetabel:<h3>
<ol>
  <li>apelsin;</li>
  <li>pirn;</li>
  <li>kirss;</li>
</ol>

</body>
</html>

Kahte eri tüüpi loendid. Esimesel juhul on tegemist loendiga, millele lehitseja lisab ette loenditunnused, teisel puhul aga juba nummerdab loendis olevad objektid. See oli väike kõrvalepõige, järgmises juhendis tegutseme taas "Lorem ipsum" dokumendi koostamisega ning kasutame loendivõimalust teistsuguses kontekstis.

Kommentaarid, arvamused, küsimused

Postitaja nimi:

Kommentaari pealkiri:

Kommentaari sisu:

Kontrollküsimus (loe selgitust kõrvalt)!

Vasta küsimusele: Mis värvi on taevas siis, kui seal ühtegi pilve ei ole?

Teadmiseks kommenteerijale!

Edukaks postitamiseks tuleb täita kõik väljad. Maksimaalne sisuosa pikkus on 10'000 tähemärki, teistel väljadel 200 tähemärki!

Kommentaari sisuosas saab kasutada HTML koodi, kuid seda mitte tekstitöötluseks, vaid näitliku materjali sisestamiseks. Kõik, mis asub <nende märkide vahel> kuvatakse kommentaarilehel nähtava tekstina ning märgid ise tõlgitakse erimärkideks!

Kontrollküsimus on mõeldud kuritahtlike robotite takistamiseks. Palun vasta esitatud küsimusele eesti keeles läbivalt väikeste tähtedega, nimetavas käändes ning võimalikult konkreetselt!

NB! RSS-lugemistarkvara abil kommentaare postitada ei saa!

© Margo Munner | Sisukaart