https://peda.net/id/313c93e6137 2016-05-06T14:18:00+03:00 https://peda.net/:static/533/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/6c75e970137 2016-05-06T14:30:51+03:00 <p>Paikallinen linkki (linkki saman sivun siosällä) kirjoitetaan ilman url alkua.</p> <div class="w3-example"> <h3>Example</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;html_images.html&quot;&gt;Sivun</span></span></span> kuvat<span><span><span>&lt;</span>/a<span>&gt;<br/> <br/> </span></span></span> <h2>HTML Linkit - Värimaailma</h2> <p>Kun liikutat hiiren linkin ylle, kaksi asiaa yleensä tapahtuu:</p> <ul> <li>Hiiren kursori muuttuu pieneksi kädeksi</li> <li>Linkkitekstin väri muuttuu</li> </ul> <p>Oletuksena, linkit näkyvät tällä tavalla (kaikissa selaimissa):</p> <ul> <li>Ei vierailtu linki on alleviivattu ja sininen</li> <li>Vierailtu linkki on alleviivattu ja violetti</li> <li>Aktiivinen linkki on alleviivattu ja punainen</li> </ul> <p>Voit vaihtaa perusvärejä , käyttämällä eri tyylejä:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate cssHigh"><span>&lt;style&gt;<br/> a:link <span><span>{</span>color<span><span>:</span>green<span>;</span></span> background-color<span><span>:</span>transparent<span>;</span></span> text-decoration<span><span>:</span>none<span>}</span></span></span><br/> a:visited <span><span>{</span>color<span><span>:</span>pink<span>;</span></span> background-color<span><span>:</span>transparent<span>;</span></span> text-decoration<span><span>:</span>none<span>}</span></span></span><br/> a:hover <span><span>{</span>color<span><span>:</span>red<span>;</span></span> background-color<span><span>:</span>transparent<span>;</span></span> text-decoration<span><span>:</span>underline<span>}</span></span></span><br/> a:active <span><span>{</span>color<span><span>:</span>yellow<span>;</span></span> background-color<span><span>:</span>transparent<span>;</span></span> text-decoration<span><span>:</span>underline<span>}</span></span></span><br/> &lt;/style&gt;</span></div> </div> <span><span><br/> </span></span></div> </div> 2016-05-06T14:26:49+03:00 https://peda.net/id/13c80cec138 2016-05-06T14:45:49+03:00 <p><strong>target</strong> atribuutti määrittää missä/miten linkki aukaistaan.</p> <p>Esimerkki avaa linkitetyn dokumentin uudessa selaimen ikkunassa tai välilehdessä:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;<a href="http://www.konnevesi.fi/" rel="nofollow ugc noopener">http://www.konnevesi.fi/</a>&quot;</span> target<span>=&quot;_blank&quot;</span></span><span>&gt;Vieraile sivuillamme</span></span><span><span>&lt;</span>/a<span>&gt;</span></span></div> </div> <table class="w3-table-all notranslate"> <tbody> <tr><th>Kohde arvo</th><th>Kuvaus</th></tr> <tr> <td>_blank</td> <td>Avaa <span>linkitetyn dokumentin uudessa ikkunassa tai välilehdessä</span></td> </tr> <tr> <td>_self</td> <td>Avaa <span>linkitetyn dokumentin</span> samassa välilehdessä </td> </tr> <tr> <td>_parent</td> <td>Avaa <span>linkitetyn dokumentin</span> samalle sivulle</td> </tr> <tr> <td>_top</td> <td>Avaa linkitetyn dokumentin samalle sivulle</td> </tr> <tr> <td><em>framename</em></td> <td>Avaa nimetyssä kehyksessä</td> </tr> </tbody> </table> <p>Jos nettisivusi on lukittu yhteen frameen, voit käyttää=&quot;_top&quot; jotta pääset siitä ulos:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;<a href="http://www.konnevesi.fi/" rel="nofollow ugc noopener">http://www.konnevesi.fi/</a>&quot;</span> target<span>=&quot;_top&quot;</span></span><span>&gt;Konnevesi</span></span><span><span>&lt;</span>/a<span>&gt;</span></span></div> </div> 2016-05-06T14:45:48+03:00 https://peda.net/id/1ec35da2137 2016-05-06T14:24:57+03:00 <p>Linkkejä löytyy miltei jokaiselta nettisivulta. Linkit päästävät kävijät sivuilta toiselle.</p> <h2>HTML Linkit - ns. Hyperlinkit</h2> <p>HTML linkit ovat hyperlinkkejä.</p> <p>Hyperlinkki on kuva tai teksti jota voi klikata, ja hypätä seuraavalle sivulle / dokumenttiin.</p> <h2>HTML Linkit - Syntaxi</h2> <p>HTML koodissa, linkit määritellään <strong>&lt;a&gt;</strong> tagilla:</p> <div class="w3-example"> <div class="w3-code notranslate htmlHigh"><span>&lt;a href<span>=&quot;<em>url</em>&quot;</span>&gt;<em>linkitys teksti</em></span><span><span><span>&lt;</span>/a<span>&gt;<br/> </span></span></span> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;http://www. konnevesi .fi&quot;</span></span><span>&gt;Vieraile sivuillamme</span></span><span><span>&lt;</span>/a<span>&gt;</span></span></div> <p><strong>href</strong> atribuutti määrittää määränpää osoitteen (<a href="http://www.konnevesi.fi)" rel="nofollow ugc noopener">http://www.konnevesi.fi)</a></p> <p><strong>linkki teksti</strong> on näkyvä osa (Vieraile sivuillamme).</p> <p>Linkki tekstiä klikatessasi, pääset määrättyyn osoitteeseen.</p> <table class="lamp"> <tbody> <tr><th><img src="http://www.w3schools.com/images/lamp.jpg" alt="Note"/></th> <td>Linkkitekstin ei ole pakko olla tekstiä. Se voi olla HTML kuva tai HTML elementti.</td> </tr> </tbody> </table> <br/> <span><span><br/> </span></span></div> </div> 2016-05-06T14:24:38+03:00 https://peda.net/id/2346c978138 2016-05-06T14:53:24+03:00 <p>On yleistä käyttää kuvia linkkeinä:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;index.html&quot;</span></span><span>&gt;</span></span><br/> <span><span>&lt;</span>img<span> src<span>=&quot;smiley.gif&quot;</span> alt<span>=&quot;HTML ohje&quot;</span> style<span>=&quot;width:42px;height:42px;border:0&quot;</span></span><span>&gt;</span></span><br/> <span><span>&lt;</span>/a<span>&gt;</span></span></div> </div> <table class="lamp"> <tbody> <tr><th><img src="http://www.w3schools.com/images/lamp.jpg" alt="Note"/></th> <td>border:0 on lisätty estämään IE9 (ja aikaisemmat) näyttämästä reunusta kuvan ympärillä.</td> </tr> </tbody> </table> <h2>HTML Linkit - Tee kirjainmerkkejä</h2> <p>HTML kirjainmerkit auttavat kävijää liikkumaan nettisivullasi haluttuun osaan.</p> <p>Ne ovat erittäin käteviä jos nettisivullasi on paljon tekstiä.</p> <p>Tehdäksesi kirjainmerkin, tee kirjainmerkki ensin, sitten vasta linkitys.<br/> <br/> Kun linkkiä klikataan, sivu skrollautuu automaattisesti haluttuun kohtaan.</p> <h2>Esimerkki</h2> <p>Ensin tee kirjainmerkki jossa on id atribuutti:</p> <div class="w3-example"> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>h2<span> id<span>=&quot;tips&quot;</span></span><span>&gt;Hyviä ohjeita osio</span></span><span><span>&lt;</span>/h2<span>&gt;</span></span></div> </div> <p>Sitten, lisää linkki kirjainmerkkiin (&quot;Hyviä ohjeita osio&quot;), samalle sivulle:</p> <div class="w3-example"> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;#tips&quot;</span></span><span>&gt;Mene kohtaan Hyviä ohjeita osio</span></span><span><span>&lt;</span>/a<span>&gt;</span></span></div> </div> <p>Tai, lisää linkki kirjainmerkkiin (&quot;Hyviä ohjeita osio&quot;), toiselta sivulta:</p> <div class="w3-example"> <h3>Esimerkki</h3> <div class="w3-code notranslate htmlHigh"><span><span>&lt;</span>a<span> href<span>=&quot;html_tips.html#tips&quot;</span></span><span>&gt;Mene kohtaan Hyviä ohjeita osio</span></span><span><span>&lt;</span>/a<span>&gt;</span></span></div> </div> 2016-05-06T14:53:24+03:00