XHTML atribuudid

Autor: Margo Munner | Kuupäev: 01.09.2007

XHTML atribuutide olemusest ning kõige sagedasemad rakendused.

Siinkohal oleme saanud hakkama võrdlemisi lihtsalt, kuid igal XHTML elemendil võib kasutada ka tervet seeriat atribuute, mis teevad selle dokumendi juba oluliselt keerukamaks. Tegelikult esines atribuute ka varasemas juhendis, kuid nüüd tuleb neile rohkem tähelepanu pöörata.

Mis on XHTML atribuut?
XHTML atribuut on elemendile lisatav osa, mis kirjeldab elemendi olemust või seotust mõne teise objektiga (ntx elemendi, dokumendi või stiiliga).

HTML arengul XHTML suunal on toimunud oluline atribuutide vähendamise kampaania. Selles seisnebki XHTMLi kui puhtama märkimiskeele olemus. Siiski on palju atribuute näiteks XHTML 1.0 Transitional keeles. Praegu jätkame aga XHTML 1.0 Strict keele õppimist ning rakendame juba elemente koos atribuutidega.

Link (element: a)

Retooriline küsimus: mis oleks internet ilma linkideta? Nüüd rakendamegi dokumendi juures elementi a (tuleneb ingl. k. sõnast anchor) koos selle olulisema atribuudiga - href.

<?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>Link</title>
</head>
<body>

<a href="http://www.interneti.info/">Interneti.info avalehele</a>

</body>
</html>

Selline võiks olla üks võimalik lahendus, kuidas linkida dokument interneti.info võrgukeskkonna avalehega. Nagu näed, tuleb aadress kirjutada kujul href="aadress_ise". Siinkohal on href atribuudiks, ning jutumärkide vahel olev osa on atribuudi väärtus. Enne suuremahulist linkidega tegelemist loe kindlasti läbi linkide kohta käiv artikkel.

Pilt (element: img)

Pildi lisamine oma www-dokumendile on üks võimalusi kasutada nii illustreerivat materjali kui ka lihtsalt lehte ilusamaks teha. Tuleme tagasi vana hea "Lorem ipsum" lehe juurde, lisame tekstile autori pildi ning teeme pildist lingi, millel klõpsates avaneb omakorda suurem pilt.

<?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>
<a href="cicero.jpg">
  <img src="cicero_v.jpg" alt="Cicero" width="81" height="120" />
</a>
<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>

See nüüd tähendab seda, et meil peab olema serveris nimetatud aadressilt kättesaadavad need kaks faili: Cicero_v.jpg ning Cicero.jpg. Täpsemini piltide (ning teiste failide) linkimisest loe vastavast artiklist. Samuti loe kindlasti läbi ka artikkel piltide kohta.

Jaotis (element: div)

Element div on kõige olulisem element www-dokumendi edaspidise ülesehituse ning disainimise juures. Tegemist võiks olla eesti keeles ploki või jaotisega (ingl. k. division). Element võimaldab koondada mingi hulga sisu ja XHTML elemente gruppidesse ning seejärel neid lehel lihtsalt paigutada ning stiliseerida. Praegu võib kõik see, mis allpool järgneb, olla veidikene segane, kuid juba järgmises juhendis tuleb juttu CSS-stiliseerimisest ning siis osutuvad järgmised muudatused meie XHTML dokumendis üliolulisteks.

<?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>"Lorem ipsum" teksti tutvustav dokument</title>
<link rel="STYLESHEET" type="text/css" media="all" href="lorem_ipsum_stiilid.css" />
</head>
<body>

<div id="leht">
  <div id="pais">
  </div>
  <div id="keskosa">
    <div id="vasak_menuu">
      <ul>
        <li><a href="#" class="aktiivne">Mis on Lorem ipsum?</a></li>
        <li><a href="#">Ajalugu</a></li>
        <li><a href="#">Kogu tekst</a></li>
        <li><a href="#">Tõlgitud tekst</a></li>
        <li><a href="#">Näited</a></li>
        <li><a href="#">Viited</a></li>
      </ul>
    </div>
    <div id="sisuosa">

    <h1>"Lorem ipsum" teksti tutvustav dokument</h1>
    
    <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>
    <p>Rohkem infot Lorem Ipsum'i kohta leiab järgnevatelt
    aadressidelt:</p>
    <ul>
      <li><a href="http://www.lipsum.com/">lipsum.com/</a></li>
      <li><a href="http://en.wikipedia.org/wiki/Lorem_Ipsum">Wikipedia artikkel</a></li>
    </ul>
    
    <h2>"Lorem ipsum" esimesed lõigud?</h2>

    <div class="artiklisisene_pilt">
      <a href="cicero.jpg"><img src="cicero_v.jpg" alt="Cicero" width="81" height="120" /></a>
      <p>Pealkiri: Cicero<br />
      Allikas: Wikipedia.org</p>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris convallis dapibus orci. Vestibulum
    id tellus scelerisque est aliquet dignissim. Ut accumsan. Sed porttitor enim in pede. Vestibulum ut quam a 
    dolor tempus accumsan. Nulla adipiscing. Sed interdum rutrum tortor. Sed felis quam, lacinia sit amet, 
    ultrices id, hendrerit vel, diam. Praesent et enim. Suspendisse ultrices, metus et hendrerit nonummy, nisl 
    pede auctor dui, ac vestibulum justo risus ac nulla. Vestibulum gravida sem et sapien. Donec sollicitudin. 
    Donec convallis posuere quam.</p>

    <h2>Donec et lacus ac massa congue fermentum</h2>

    <p>Mauris pharetra tempus leo. Fusce mollis. Aliquam erat volutpat. Curabitur quis arcu. Aenean vitae 
    est. Sed imperdiet eleifend est. Maecenas turpis lectus, tristique at, laoreet et, pellentesque ac, felis. 
    Nulla quis dui. Sed metus diam, feugiat vel, laoreet et, sodales eu, turpis. Curabitur in massa et sem 
    viverra auctor. Suspendisse aliquam ultrices pede. Nullam risus nibh, ullamcorper non, consequat a, rhoncus 
    vitae, eros. Suspendisse scelerisque nisl in tortor. Curabitur iaculis.</p>

    <h2>Ut scelerisque mi iaculis est</h2>

    <p>Phasellus nisi lacus, auctor non, tincidunt in, egestas ut, metus. Sed feugiat fringilla urna. 
    Aenean dignissim. Aenean iaculis, dolor ut pellentesque bibendum, massa mi aliquam orci, sed consequat 
    odio lorem a tellus. Nullam pede massa, congue non, nonummy ut, vehicula sit amet, pede. Donec eget nunc. 
    Mauris ut nibh ut mi semper dapibus. Morbi hendrerit sem accumsan enim. Ut ut odio. Morbi consequat tortor 
    eget mi. Donec vitae justo vel dolor sagittis faucibus. Cras ipsum leo, molestie eu, laoreet eu, dapibus 
    id, diam. Nullam erat leo, dapibus quis, vestibulum vitae, ultrices ac, dui. Nam auctor quam eu erat. 
    Phasellus tortor nunc, faucibus ac, tristique sit amet, cursus quis, massa. Sed lectus risus, eleifend 
    sagittis, fringilla ut, molestie eget, nulla. Nam dapibus felis id pede. Maecenas scelerisque lacinia 
    dolor.</p>

    <h2>Fusce eleifend luctus augue</h2>

    <p>Duis auctor purus vel quam. Ut tincidunt aliquet mauris. Praesent ligula. Ut sed turpis. Ut eu 
    ante. Pellentesque enim. Duis laoreet. Proin ornare, ante eget placerat lacinia, nisl pede egestas diam, 
    vel facilisis urna pede eu eros. Vestibulum vel eros. Praesent mattis. Maecenas urna nisl, rhoncus vitae, 
    varius id, convallis vel, velit. Maecenas sit amet turpis. Maecenas id arcu. Pellentesque vitae eros in 
    felis suscipit rutrum. Aliquam nunc velit, vulputate a, viverra faucibus, nonummy ac, nulla. In justo 
    sapien, lobortis egestas, cursus sed, vestibulum in, lorem. Nulla facilisi.</p>

    <h2>Mauris id lorem et tellus tincidunt porttitor</h2>

    <p>Nulla vehicula. Integer felis tortor, suscipit sit amet, ultricies quis, dictum nec, mauris. 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer 
    nulla. Cras facilisis, leo et placerat fermentum, magna erat tincidunt tellus, ut tristique metus urna 
    eget purus. Suspendisse rhoncus felis dignissim orci. Integer sed arcu lacinia dui vehicula tristique. 
    Maecenas volutpat, arcu ac elementum suscipit, urna mauris sagittis justo, vitae egestas lorem sem at 
    lectus. Nam in eros.</p>

    <h2>Aliquam in libero et odio mattis interdum</h2>

    <p>Vestibulum suscipit ligula non libero. Morbi diam nibh, porttitor at, imperdiet sed, lobortis 
    lobortis, diam. Ut adipiscing imperdiet tortor. Nulla accumsan, risus vitae euismod commodo, orci risus 
    dignissim nisi, at nonummy lacus arcu iaculis diam. Nunc magna leo, consequat aliquam, egestas non, 
    interdum in, lorem. Praesent ornare mattis felis. Vivamus volutpat interdum nunc. Sed vel ante quis eros 
    faucibus tempor. Suspendisse euismod ante at pede. Pellentesque et neque. Fusce auctor pede. Duis a massa. 
    Mauris et felis. Cras malesuada cursus lorem. Aliquam urna. Maecenas non ante ac tellus euismod fringilla.</p>

    <h2>Mauris tincidunt gravida lorem</h2>

    <p>Cras et nibh ut mauris feugiat consectetuer. Morbi venenatis tristique eros. Duis posuere, 
    nibh nec iaculis hendrerit, nisl ipsum elementum felis, et venenatis tortor nunc vel augue. Ut nonummy 
    posuere nulla. Aliquam at justo. Phasellus nibh. Etiam eleifend pharetra diam. Nulla facilisi. Etiam 
    mauris metus, faucibus at, tempor sit amet, tincidunt nec, odio.</p>

    </div>
  </div>
  <div id="jalus">
  See on minu leht. Tänan lugemast!
  </div>
</div>

</body>
</html>

Mis me tegime? Me tegime kokku kolm plokki ning tegime ühe nimekirja. Plokkidele määrasime ühel juhul identifikaatori ning kahel korral klassi. Identifikaatorid ja klassid lähevad rakendusse seoses CSS-iga.

Vahekokkuvõte

Siinkohal peatame korraks XHTML elementidega tegelemise ning proovime rakendada CSS-stiile. See ei tähenda siiski, et kõik, mis vaja XHTMList teada, on nüüdseks selgitatud. Edasi tegeleme XHTMLi elementide ja atribuutidega juba kesktaseme juhendites.

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