Tekstitason elementit

Tekstitason elementit 

Tarkastellaan seuraavaksi yleisimpiä tekstitason elementtejä. Tekstitason elementit sijaitsevat aina jonkin lohkotason elementin sisällä. Tekstitason elementtien sisällä voi olla muita tekstitason elementtejä, mutta ei lohkotason elementtejä.

Rivinvaihto

Rivinvaihtoelementtiä <br/> käytetään silloin, kun halutaan tekstin jatkuvan heti seuraavalta riviltä ilman kappalejakoa. Rivinvaihtoa käytetään siis sellaisen tekstin keskellä, jonka rakenne on jo merkitty jollain lohkotason elementillä (esim. tekstikappale, lista, taulukko).

Esimerkki. Seuraavassa on merkitty yhteystiedot kahdelle riville:

Maija Meikäläinen
maija.meikalanen(at)osoite.fi

<p>Maija Meikäläinen<br/>
maija.meikalainen(at)osoite.fi</p> 

Huom! Rivinvaihtoelementtejä ei saa käyttää useita peräkkäin. Jos kahden tekstirivin välille halutaan luoda lisää tilaa, niin sitä ei tehdä rivinvaihtoelementillä, vaan jakamalla tekstit omiin kappaleisiinsa ja määrittämällä CSS-tyyleillä niiden välimatkan.

Tehtävä

• Kokeile rivinvaihtoelementtiä aiemmissa harjoitustehtävissä tekemääsi index.html-tiedostoon vaikkapa lisäämällä sille yhteystietosi.

Hyperlinkki

Hyperlinkki mahdollistaa siirtymisen:

• toiselle verkkosivulle - ulkoinen linkki
• saman sivuston toiselle verkkosivulle - sisäinen linkki
• saman verkkosivun toiseen kohtaan
• sähköpostiosoitteeseen eli avata sähköpostiohjelman

Hyperlinkki tarvitsee aina välttämättä kaksi asiaa:

1. itse linkin eli klikattavan elementin ja
2. linkin kohteen eli verkko-osoitteen.

Linkkinä toimii yleisimmin tekstiä, mutta linkki voi olla myös kuva tai kuvan osa. Tämä teksti tai muu elementti suljetaan oman hyperlinkkielementtinsä a sisälle. 

Elementillä a on pakollisena attribuuttina href, jonka arvoksi tulee puolestaan linkin kohde,

Esim.

<p>Tutkimushankkeen yhteistyökumppanina on Jyväskylän kaupunki, 
jonka kotisivut löytyvät osoitteesta <a href=”http://www.jyvaskyla.fi/”>http://www.jyvaskyla.fi/</a>.</p>

TAI

<p>Tutkimushankkeen yhteistyökumppanina on <a href=”http://www.jyvaskyla.fi/”>Jyväskylän kaupunki</a>.</p>

Ensimmäisessä vaihtoehdossa verkko-osoite on näkyvissä myös itse tekstissä, toisessa esimerkikssä linkki on tehty suoraan aiheen mukaiseen fraasiin.

Hyperlinkkien ulkoasu eroaa muusta tekstistä yleensä oletusarvoisesti niin, että hyperlinkit on kirjoitettu sinisellä tekstillä ja alleviivattu. Kun linkkiä on käytetty, sen väri muuttuu violetiksi. Nämä ovat oletusvärejä, joita voi muokata CSS-tyylikielellä.

Hyperlinkki toiselle verkkosivustolle

Kun luodaan hyperlinkkiä toisen sivuston verkkosivulle, niin osoitteen tulee olla täydellinen aina http:stä lähtien.

Esim.

VÄÄRIN:

<p>Tutkimushankkeen yhteistyökumppanina on <a href=”www.jyvaskyla.fi/”>Jyväskylän kaupunki</a>.</p>

OIKEIN:

<p>Tutkimushankkeen yhteistyökumppanina on <a href=”http://www.jyvaskyla.fi/”>Jyväskylän kaupunki</a>.</p>

Tehtävä

1. Luo index.html-tiedostosta linkki yliopiston verkkosivuille.

• Luo etusivulle tekstiä, jossa kerrot sivuston taustan, esim. Tämä harjoitussivusto on tehty Jyväskylän yliopistossa WWW-sisällöntuotannon kurssin harjoitustyönä.
  
• Valitse tekstistä se osa (esim. Jyväskylän yliopistossa), josta haluat luoda linkin ja lisää sen ympärille tarvittava koodi. Voit myös käyttää tarkoitukseen sopivaa työkalua: HTML-Kitissä Objects-välilehdeltä hyperlinkkityökalu (anchor) (kolmas vasemmalta) ja Amayassa oikean reunan työkaluvalikosta löytyvä Link-työkalu.
• Anna attribuutin href arvoksi verkko-osoite, johon haluat linkin vievän.
• Tarkista linkin toimivuus testaamalla linkin toimivuutta WWW-selaimessa.

2. Tee toinen linkki vielä kurssin verkkosivustoltasi kotisivulle osoitteeseen https://www.jyu.fi/hum/opiskelu-ohjeet/tutorial/opintojaksot/htkp315

Hyperlinkki saman verkkosivuston toiselle sivulle

Kun luodaan hyperlinkki saman verkkosivuston toisille sivuille, viittauksessa ei tarvitse käyttää sivun koko verkko-osoitetta, vaan linkkiä laadittaessa kirjataan ainoastaan kohdetiedoston sijainti suhteessa parhaillaan työstettävään tiedostoon.

Jos sivustoon kuuluu paljon sivuja, järjestetään ne usein kansioihin. Jos kohdetiedosto sijaitsee samassa kansiossa kuin työstettävä tiedosto, niin viittaukseksi riittää kohdetiedoston nimi.

Esim. Linkki etusivulta (index-tiedostosta) samassa kansiossa sijaitsevaan cv-tiedostoon

<a href="cv.html">CV</a>

Jos kohdetiedosto sijaitsee eri kansiossa kuin työstettävä tiedosto, on viittaus hieman pidempi. Liikuttaessa kansiorakenteessa alaspäin linkissä on mainittava kansion nimi.

Esim. Linkki etusivulta (index-tiedostosta) kirjoitukset-kansiossa sijaitsevaan tietoyhteiskunta.html-artikkeliin.

<a href="kirjoitukset/tietoyhteiskunta.html">linkkiteksti</a>

Liikuttaessa kansiorakenteessa ylöspäin mukaan tulee sitä osoittava merkintä ../

Esim. Linkki edellisen esimerkin tietoyhteiskunta-artikkelista etusivulle.

<a href="../index.html"'>linkkiteksti</a>

Kaksi askelta ylöspäin merkittäisiin puolestaan ../../ jne.

Tehtävä

• Lisää index.html-sivun navigaatiolistasta linkki virusinfo.html-tiedostoon.
• Testaa linkin toimintaa. 
• Lisää samalla tavalla linkki virusinfo,html-sivulta index.html-sivulle.

Hyperlinkki saman sivun toiseen kohtaan

Hyperlinkit voivat johtaa mihin tahansa saman sivun elementteihin, esimerkiksi kuviin tai tekstikappaleisiin. Paljon tekstiä sisältävillä sivuilla linkit ovat nopea tapa siirtyä haluttuun kohtaan sivulla sen sijaan, että kävijä joutuisi ”rullailemaan” sivua etsiessään haluamaansa.

Samalle sivulle johtavaa linkkiä laadittaessa

1. lisätään kohde-elementtiin yksilöivä tunniste id-attribuutin avulla JA
2. luodaan hyperlinkki a-elementin avulla

Id-attribuutin arvo on samalla linkin kohde. Ainoa erotus on, että href-attribuutin arvoon lisätään eteen vielä #-merkki.

Esim. Sivulle on luotu linkki tekstistä alempana sivulla olevaan väliotsikkoon.

<p>Työn ohella ehdin myös tutustua Pariisin <a href="#eiffel">museoihin ja nähtävyyksiin.</a></p>

…

<h2 id="eiffel">Eiffel-torni ja Louvre</h2>

Tehtävä

• Luo dokumentin loppuun tekstikappale, jonka sisältönä on esim. Takaisin alkuun.
• Luo tekstistä hyperlinkki, jonka kohde on esim. alku.
• Lisää dokumentin ensimmäiseen elementtiin attribuutti id ja sille arvo alku.

Hyperlinkkien yhdistäminen

Ulkoiseen tai sisäiseen linkkiin voidaan yhdistää linkki sivun tiettyyn kohtaan.

Esim.. Luodaan linkki oman verkkosivuston etusivulta saman sivuston CV:n kohtaan Artikkelit. CV-sivulla on otsikon elementtiin lisätty attribuutti id seuraavasti:

<h2 id="artik">Artikkelit</h2>

Etusivulla puolestaan on teksti muodossa:

<p>
Olen kirjoittanut <a href="cv.html#artik>artikkeleita</a> aiheesta.
</p>

Jos itse sivuston osoite olisi http://www.maijameikalainen.net, niin sille voisi luoda linkin kokonaan toiselta sivustolta muodossa:

<p>
Olen kirjoittanut <a href="http://www.maijameikalainen.net/cv.html#artik>artikkeleita</a> aiheesta.
</p>

Sähköpostilinkki

Hyperlinkki sähköpostiosoitteeseen mahdollistaa sen, että linkkiä klikkaamalla avautuu sähköpostiohjelmassa uusi viesti kyseiseen sähköpostiosoitteeseen.

Esim.

<p>
Sähköpostiosoite: <a href="mailto:etunimi.sukunimi@jyu.fi">etunimi.sukunimi@jyu.fi</a>
</p>

TAI

<p>
Ota yhteyttä <a href="mailto:etunimi.sukunimi@jyu.fi">sähköpostitse</a>.
</p>

Sähköpostilinkit ovat sikäli ongelmallisia, että roskapostirobotit keräävät verkkosivuilta sähköpostiosoitteita roskapostin lähettämistä varten. Halutessasi voit pyrkiä välttämään roskapostirobotteja muotoilemalla itse sähköpostiosoitetta niin, että @-merkin korvaa esim. (a) ja href-attribuutin sisältö on esim. muodossa etunimi.sukunimi@_POISTATAMA_jyu.fi.

Title-attribuutti

Linkkiin voidaan lisätä myös aputeksti, joka tulee esille hiiren osoittimen viereen, kun osoitin viedään linkin päälle. Tämä tapahtuu lisäämällä a-elementille attribuutti title ja sen arvoksi haluttu aputeksti.  

Esim.

Hanketta koordinoi <a href="https://www.jyu.fi/hum" title="Humanistinen tiedekunta">humanistinen tiedekunta</a>.

Huom! Title-attribuuttia voi käyttää muidenkin html-elementtien kanssa.

Tehtävä

Lisää johonkin aiemmin lisäämääsi hyperlinkkiin title-attribuutti ja sille jokin arvo. Testaa sen toimintaa.

Kuva

Kun verkkosivuille lisätään kuvia, lisätään sinne oikeastaan linkki kuvatiedostoon. Kun verkkosivu julkaistaan eli viedään verkkosivutilaan, viedään sinne erikseen html-tiedosto ja sillä näyttäytyvät kuvatiedostot.

Kuvelementillä img on kaksi pakollista attribuuttia: src ja alt.

• Src (source) viittaa kuvan sijaintiin.

• Attribuutti alt (alternative) antaa kuvalle sanallisen selityksen. Tämä palvelee tekstipohjaisten selainten ja ruudunlukulaitteen käyttäjiä, jotka eivät näe itse kuvaa. Teksti näkyy selaimessa myös, jos kuvat eivät lataudu hitaan verkkoyhteyden vuoksi.

Esim.

<img src="eiffel.jpg" alt="Eiffel-torni" />

Kuva voi sijaita joko samalla palvelimella tai jollain toisella verkkosivustolla.

1. Jos verkkosivulla oleva kuva sijaitsee jollakin toisella verkkosivustolla, src-attribuutin arvoksi tulee kuvan täydellinen verkko-osoite (vrt. hyperlinkki toiselle verkkosivustolle).
2. Jos verkkosivulla oleva kuva sijaitsee samalla palvelimella, src-attribuutin arvoksi tulee polku kuvatiedostoon (vrt. hyperlinkki saman sivuston toiselle sivulle).

Yleensä kuvatiedostoja on sivustolla käytössä useita. Kuville kannattaakin luoda oma kansionsa, jotta verkkosivuston kansiorakenne pysyy selkeänä.

Tehtävä

• Luo tähän asti luodut tiedostot sisältävään kansioon toinen kansio nimeltään kuvat.
• Mene osoitteeseen http://users.jyu.fi/~tatjana/htkp315, ja tallenna siellä oleva kuvatiedosto kone.jpg äsken luomaasi kansioon.

Lisää virusinfo.html-tiedostoon tekstin lomaan jonkin tekstikappaleen alkuun kuvaelementti, jonka kohteena on äsken tallennettu kuva.

• Noudata kuvan sijainnin merkinnässä samaa logiikkaa kuin hyperlinkeissä. Olennaista on siis se, missä kuva sijaitsee suhteessa virusinfo.html-tiedostoon.
• Tarkista HTML-Kitin esikatselusta, että kuva on näkyvissä oikealla paikallaan.
• Anna alt-attribuutille jokin kuvaava arvo.

Kuvan sijoittelua muokataan siistimmäksi myöhemmin CSS-tyylikielen avulla.

Kuvan linkittäminen muualta verkosta

Verkkosivulle on mahdollista linkittää myös kuva, joka sijaitsee aivan toisella verkkosivustolla. Kuvan käytössä on tietysti noudatettava normaalia tekijänoikeuslakia, mutta myös kuvan sisältävän sivuston omistajalta on syytä pyytää lupa. Linkki voi nimittäin hidastaa alkuperäisen kuvan sisältävän sivuston toimintaa. Muualla sijaitsevan kuvan lisääminen verkkosivuun toimii muuten samoin kuin äsken, mutta src-attribuutin arvona on koko verkko-osoite, esim.

<img src="http://users.jyu.fi/~tatjana/htkp315/kone.jpg" alt="Kannettava tietokone" />

Kuva hyperlinkkinä

Myös kuvasta voi muodostaa hyperlinkin. Tällöin hyperlinkin aloitus- ja lopetuselementtien välissä on tekstin sijaan kuvaelementti img.

Esim.

<a href="https://www.jyu.fi">
 <img src="jylogo.jpg" alt="Jyväskylän yliopisto" />
</a> 

Materiaalin on laatinut Tanja Välisalo.