Suntuubi-palvelussa käytetään evästeitä. Palvelua käyttämällä hyväksyt evästeiden käytön. Lue lisää. OK
jes

Kalenteri sivuille

Kävijälaskuri

QR-koodi generaattori

Google hakukone sivulle

tyylikäs teksti generaattori(ascii)

 

 

html koodit

sivun

peruskoodit

<html>

<head>

<title> otsikko </title>

<body>

sisältö

</body>

</head>

</html>

 

Väri taustalle

<BODY BGCOLOR=" laita tähän värin nimi tai numero koodi">    

kuva taustalle <BODY BACKGROUND="kuvan tiedostonimi">

 

keskitetty otsikko <center> tässä on keskitetty otsikko</center>

 

paksua tekstiä <B>hoi hoi</B>
viinoa tekstiä <I>hoi hoi vielä kerran</I>
yliviivaus <S>yliviivattua juttua </S>

 

Rivinvaihto <br />
Kappalejako <p> Tekstii </p>

 

liikkuva teksti <font face="Verdana" size="1" color="aseta tähän väri"><b><marquee direction="tähän suunta(left/right/up/down)">Tähä Teksti joka liikkuu</marquee></b></font>
varjo tekstille <span style="font-weight: bold; text-shadow: 3px 3px 0px #888888;">Tekstillä on varjo</span>

 

Kuvalinkki <a href="kohteen_osoite_tahan"><img src="kuvan_osoite_tahan" alt="" /></a>

kopioinnin esto.

ei toimi kaikilla selaimilla(firefox,IE).

<script language='' JavaScript''>
function click()
{if (event.button==2)alert(' piratismin vastainen lause tähän kohtaan');}
document.onmousedown=click;
</script>
linkki tavallisena tekstinä <a href="kohteen_osoite_tahan">Linkin teksti tähän </a>

sähköpostin lähetys linkki

(toimii asennetulla sähköpostiohjelmalla)

<a href=mailto:tähänosoite@example.com?Subject=Aihe-postille target="_top">
Send Mail</a>

 

äänentoisto ohjaus nappuloilla <audio controls>
  <source src="äänitiedoston-nimi.ogg" type="audio/ogg">
  <source src="äänitiedoston nimi.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 

videontoisto automaattisesti

(näppäile controls autoplayn tilalle niin toisto on manuaalinen)

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>


 

Kuva muutettavalla koolla <img src="kuvan osoite"> a"tiedote kun kuva ei lataudu" width"leveys pixeleinä" height"korkeus pixeleinä" </img>
Kuva vaihtuu kun hiiri menee päälle

<img src="ensimmäisen kuvan osoite" onmouseover="this.src='toisen kuvan osoite'" onmouseout="this.src='ensimmäisen kuvan osoite'" /></a>

kuva läpinäkyväksi hiirella

(muuta opacity kohdan arvoja vaikuttaaksesi efektiin)

<style>

img {
    opacity: 1.0;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 0.4;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="kuva1.jpg" width="150" height="113" alt="kuva">
<img src="kuva2.jpg" width="150" height="113" alt="kuva">

 

 

 

Kuvaesitelmä (manuaalinen nuoliklikkaus mukana)  


 

<div class="w3-content" style="max-width:800px;position:relative">

<img class="mySlides" src="kuva 1" style="width:100%">
<img class="mySlides" src="kuva 2 osoite tähän" style="width:100%">
 

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>

</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

 

Kuva jaettuna klikattaviin alueisiin

(huom kordinaatit on x,y,leveys,pituus)

<img src="jokukuva.gif" alt="wow" usemap="#wowmap" style="width:145px;height:126px;">

<map name="wowmap">
  <area shape="rect" coords="0,0,82,126" alt="alue1" href="osoite.htm">
  <area shape="circle" coords="90,58,3" alt="alue2" href="osoite-alue2.htm">
  <area shape="circle" coords="124,58,8" alt="alue3" href="osoite-alue3.htm">
</map>

esimerkki 2         oikealla sama koodina

PlanetsIkkuna Mercury Venus

<p><img alt="Planets" src="http://kopioi.suntuubi.com/datafiles/userfiles/Image/behmola.bmp" style="width: 320px; height: 240px;" usemap="#planetmap" /><map name="planetmap"><area alt="Ikkuna" coords="20,38,92,100" href="http://www.bing.com/search?q=ikkuna&amp;src=IE-TopResult&amp;FORM=IE11TR&amp;&#10;conversationid=" shape="rect" /> <area alt="Mercury" coords="239,100,50" href="http://www.kirja.fi/" shape="circle" /> <area alt="Venus" coords="34,208,20" href="https://fi.wikipedia.org/wiki/Ankka" shape="circle" /></map></p>

 


©2017 kopioitavaa - suntuubi.com