XHTML&CSS: lingid

xhtmlLink on nii legendaarse konsoolimängu peategelane, kui ka Interneti ja veebilehtede kõige olulisem osa. Ilma linkideta Internet ega ükski veebileht  ei saaks toimida. Lingi ülesandeks on viia kasutaja sellele vajutades mõnele teisele leheküljele või teha midagi muud silmapaistvat.

XHTML

Lingi loomine

Selleks, et muuta mõni tekst, pilt või mõni muu element lingiks, tuleb see element ümbritseda <a> (anchor) märgenditega. Lingi algmärgendisse lisatakse atribuut “href” mille väärtuseks tuleb lisada aadress,  kuhu link viib. Aadress peab olema jutumärkide vahel. See mis jääb lingi märgendite vahele, on veebisirvijas nähtav. Element linkmuutub lingiks, mis viib ühele või teisele veebilehele.

Iga korralik veebileht koosneb rohkemast kui ühest leheküljest. Selleks, et lisada uus veebilehekülg tuleb tekstiredaktoris luua uus .html laiendiga dokument. See dokument peab asuma samas kaustas, kus asub veebidokument, milles asub viide. Ühesõnaga veebilehe kõik osad peavad olema ühes kaustas. Selleks, et viidata teisele leheküljele peab “href” atribuudiks väärtuseks määrama “lehekülje pealkiri.html”.

Link, mis viitab veebilehe teisele osale

ulinkOletame, et teie ühel veebilehel on väga palju infot, sealhulgas teksti, ning  kasutaja ei viitsi kogu teie veebilehel olevat läbi vaadata. Sellise olukorra puhul on lahenduseks linkidest sisukorra loomine, mille lingi vajutamisel satub kasutaja sama lehekülje  mõnesse ossa. Sellise lingi loomiseks lisame viidatav element lingi märgendite vahele, kuid seekord tuleb atribuudiks panna “name” ja selle väärtuseks teile sobiv nimi. Seejärel loome mõnes teises veebilehe kohas sisukorra. Sisukorra elemendid tuleb paigutada lingi märgendite vahele. Atribuudiks peab olema “href” ja selle väärtuseks peab olema viidatava elemendi atribuudi väärtus, mille ees on “trellid” Ehk siis see peaks välja nägema nii: href = “#atribuudiväärtus”.

E-posti link

Lingile vajutades avaneb e-kirja saatmise aken. Sellise lingi loomiseks on vaja lingi märgendi atribuudi “href” ja selle väärtuseks “mailto:e-maili aadress”. Sellist linki ei soovitata kasutada, kuna esiteks, kasutavad seda väga vähesed ja emailteiseks, selle kasutamiseks on vaja vastavate e-posti klient-programmide olemasolu.

Jutumull

Jutumull ilmub mõne elemendi juurde, kui hiirekursor asub elemendi kohal. Selleks, et jutumull tekiks, on lingi märgendiks lisada atribuut “title” ja selle väärtuseks tekst, mis peaks jutumullis ilmuma. Atribuudi väärtus peab olema markusjutumärkide vahel.

CSS

Linkide kujundamine võib tunduda lihtsana, kuna tegemist on pealtnäha niivõrd lihtsa elemendiga: märgendid, ühe atribuudiga ja ükskõik millise väärtusega. Tegelikult on lingil 4 erinevat seisundit: kasutamata link, kasutatud link, kursori hoidmine lingi kohal ja lingi kinnihoidmine.

  • linkcssKasutamata Stiililehte lisame lingi märgendi “a” seejärel kooloni ning seejärel “link”. Looksulgude vahele lisame omaduseks värvi ja selle väärtuseks meile sobiva värvi. Veel võib kasutada omaduseks allajoonimist. Selle tarvis kirjutame atribuudiks: “text-decoration” ja väärtuseks “underline” või “none”.
  • Kasutatud Ka seekord lisame märgendi “a” ning kooloni järel “visited” (külastatud). Looksulgude vahele lisame samad omadused, mis kasutamata lingi puhul.
  • Kursori üleviimine Me võime mõjutada ka seda, kuidas käitub link siis, kui hiirekursor läheb üle lingi, kuid sellele ei vajutata. Seekord on märgendiks stiililehes “a: hover” ning omaduseks võib lisada taustavärvi ja tekstivärvi muutust ja allajoonimist.
  • Lingi kinnihoidmine Kui me vajutame lingile, kuid ei võta sõrme vasakult hiireklahvilt, võib ka link omal viisil käituda. Selle määramiseks lisame stiililehte märgendi “a: active” ja looksulgude vahele lisage need omadused, mida tahate muuta. Tehke selle puhul midagi lihtsat.
Advertisements

2 thoughts on “XHTML&CSS: lingid

  1. Tere,
    Veebilehe teisele osale viitava lingi asjus, kas seal ei peaks väärtuses index.html# , või misiganes veebilehe nimi on, ka ees olema? Muidu hakkab otsima paragrahvi nimetust veebilehe kaustast lihtsalt.

    Ja selles jutumulli osas tuleb kasutada title, mitte name.
    Ning üldjuhul on ikka vasak hiireklahv see, millelt me sõrme ei tohi ära võtta, kui lingile vajutame, et saada active link.

    Aga muidu tundub päris tore õpetus ja mäluvärskendus. Vaatan kindlasti ka edasi ja teisi õpetusi.

Kirjuta kommentaar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Muuda )

Twitter picture

You are commenting using your Twitter account. Log Out / Muuda )

Facebook photo

You are commenting using your Facebook account. Log Out / Muuda )

Google+ photo

You are commenting using your Google+ account. Log Out / Muuda )

Connecting to %s