15. HTML kuvathttps://peda.net/id/3386ede095d2018-08-02T00:45:25+03:00https://peda.net/:static/535/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>
HTML ruudun lukijathttps://peda.net/id/338ec27295d2016-05-11T12:06:50+03:00<p>Ruudun lukija on ohjelma joka lukee sokeille mitä ruudussa lukee.<br/>
<br/>
Ruudun lukija ovat käteviä eritysesti sokeille, melkein sokeille sekä oppimisvaikeuksista kärsiville.</p>
<table class="lamp">
<tbody>
<tr><th><img src="http://www.w3schools.com/images/lamp.jpg" alt="Note"/></th>
<td><strong>Ruudun lukija osaa lukea alt</strong> atribuutin.</td>
</tr>
</tbody>
</table>2018-08-02T00:45:25+03:00Esimerkkihttps://peda.net/id/338f8bf895d2016-05-11T12:02:37+03:00<p><span><</span>!DOCTYPE<span> html</span><span>></span></p>
<div class="w3-code notranslate htmlHigh"><span><span><</span>html<span>></span></span><br/>
<span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>h2<span>>Uskomaton vuorimaisema</span></span><span><span><</span>/h2<span>></span></span><br/>
<span><span><</span>img<span> src<span>="pic_mountain.jpg"</span> alt<span>="Mountain View"</span> style<span>="width:304px;height:228px;"</span></span><span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span><br/>
<span><span><</span>/html<span>><br/>
<br/>
Aina muista tarkentaa kuvan korkeus ja leveys. <br/>
<br/>
</span></span></div>
<div class="w3-code notranslate htmlHigh">
<h2>HTML kuvan kirjoitus</h2>
<p>HTML kielessä, kuvat määritellään <strong><img></strong> tagilla.</p>
<p><img> tagi on tyhjä se sisältää vain atribuutteja, ja ei ole lopetus tagia.</p>
<p>src atribuutti määrittelee www:n (nettiosoitteen) kuvalle:</p>
<div class="w3-example">
<div class="w3-code notranslate htmlHigh"><span><span><</span>img<span> src<span>="<em>url</em>"</span> alt<span>="<em>some_text</em>"</span></span><span>></span></span></div>
</div>
<h2>alt Atribuutti</h2>
<p>alt atribuutti määrittää vaihtoehtoisen tekstin kuvalle, jos kuvaa ei voida jostain syystä näyttää.</p>
<p>alt atribuutti tarjoaa vaihtoehtoisen informaation kuvalle jos käyttäjä ei voikkaan jostain syystä katsoa kuvaa (hitaan internet yhteyden takia errori virhe src atribuutissa).</p>
<p>Jos selain ei löydä kuvaa, se näyttää vaihtoehtoisen tekstin:</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>img<span> src<span>="wrongname.gif"</span> alt<span>="HTML5 Ikoni"</span> style<span>="width:128px;height:128px;"</span></span><span>></span></span></div>
</div>
<p>Alt atribuutti vaaditaan. Se ei näy täydellisesti ilman sitä</p>
<span><span><br/>
</span></span></div>
2018-08-02T00:45:25+03:00