Pieni perusopas html, html5 sekä css3 tyylillä tekemiseen Updated at more mobile friendly: 26.03.20

 

Valikot ylhäällä ujon vihreänä ja aika piilossa, hivuta hitaasti hiiruasi sinne ylöspäin.
Oppimisen vuoksi koodini kopiointi  on sallittua sekä tässä tapauksessa erittäin suositeltavaa.
HOKS ! 23.11.2013 Muutamat sivun tarjoamat scriptit eivät ole enään aktuelleja koska toimivat vain IE6 selaimilla joita ei käytetä. / EI Saa enää käyttää !

HTML - merkkikielen rakenne


Alku saattaa tuntua vaikealta mutta takaan että opit kaiken tarvittavan saadaksesi aikaan julkaistavan näköisen sivun.
Olen julkaissut sivuja n 15 vuoden ajan joten sinun kannattanee tutustua pikku perusoppaaseeni.

WWW-sivut kirjoitetaan HTML-merkeillä (HTML = HyperText Markup Language). Html n avulla esitetään sivun rakenne ja sisältö = teksti ja kuvat.
Sivun muoto, koko, värit, fontin, kuvien koot ja paikat kuvataan sivuun liitetyllä tai upotetulla CSS tiedostolla (CSS = Cascading Style Sheets – tyyliohjeiden yhteisvaikutus, periytyvyys ja kumoutuminen määrättyjen sääntöjen mukaan)

Html tiedosto kirjoitetaan tekstinä esim Notepad++ lla tai jollakin WYSIWYGS editorilla mieluummin UTF-8 (ei-BOM) tai ei niin suositeltavassa ANSI tiedostomuodossa.

Tiedoston voi tallentaa haluamallaan nimellä, mutta tiedostotarkentimen pitää olla joko htm, html, tai php. Pääsivu tallennetaan nimellä: index.htm tai index.html

(Huomaa, että kaikki tiedostonimet pitää kirjoittaa aina pienellä fontilla.) Älä käytä tiedostojen nimissä äätä tai öötä.

Etusivusi nimi index.html on erillainen nimi kuin index.HTML, INDEX.html, InDeX.hTmL tai INDEX.HTML + muut variaatiot, eikä väärällä nimellä etsittyä sivua löydy selaimellasi vaikka sen palvelimellesi olet (eri nimellä) tallentanut.

Tiedostonimi on erittäin tärkeä asia aloittelijalle kuin myös veteraaneille. Ole sen vuoksi erittäin tarkkana tiedostojen nimeämis-asioissa.
Sama pätee muissakin sivujesi nimissä koska mm. linkit vaativat aina absoluuttisen ehdottomasti oikeinkirjoitetun osoitteen ....

Html-merkkaus sisältää joukon symboleja (=tageja), joiden avulla kuvataan sivun rakenne ja sisältö. Merkit kirjoitetaan < ja /> - eli väkästen väliin. Tagit esiintyvät aina pareittain (tagin aloitus < sekä lopetus /> merkki).

HOKS huomaa koodin lopettava /> vinoviiva+väkänen . . . ja käytä aina pieniä kirjaimia tageja ja niiden määreitä tehdessäsi.

Aloittava koodi on muotoa:  <koodi> esim: font, image, table, ym. ja kun koodilla on määreitä, niin se on muotoa:

<koodi määre="arvo" määre="arvo" määre="arvo" > ks. esimerkki alla

<font face="Verdana" size="4" color="#0099ff"> Kokeile !

Jos koodilla on useita määreitä ne erotetaan toisistaan välilyönneillä esim. kuvanlisäyskoodilla img on määreet:
'lähde'=src, 'vaihtoehtoinen teksti'=alt, 'nimi'=title, 'leveys'=width ja 'korkeus'=height (img-koodilla on myös muita määreitä).

Kappaleen lopettavaa </p> tagia ei tarvitse käyttää jos: linkkejä ei ole sillä kaikki selaimet osaavat aloittaa uuden kappaleen <p>tagista.
Jos linkkejä on ja käytät css koodia, värjää toisilla selaimilla ennen uutta kappaletta kirjoituksesi hassun näköiseksi, käytä silloin AINA </p> tagia ! Ainakin 2000 luvun alussa . . . ( tekijän huomautus v. 2010 )

HOKS ! 23.11.2013 Muutamat sivun tarjoamat scriptit eivät ole enään aktuelleja koska toimivat vain IE6 selaimilla joita ei käytetä.

EI Saisi enää käyttää !

Peruskoodit

Html-dokumentti koostuu kahdesta perusosasta: header otsikko-osasta ja varsinaisesta runko-osasta, body stä .

<html></html>  Sivun aloittava ja lopettava koodi joka osoittaa selaimelle että kyse on html tiedosto.
<head></head>  Header-osan aloittava ja lopettava koodi jonne laitetaan mm. title, metatagit, css ja javascript tiedostojen linkit.
<title></title> Selaimen ikkunassa näkyvän otsikon aloittava ja lopettava koodi.
<body></body> Varsinaisen sivurungon aloittava ja lopettava koodi.
<p></p> Kappale. Aloitus ja lopetus.
Jos kappaletta ei lopeteta, niin kappale loppuu, kun seuraava alkaa. Vastaa ms-offisen, open sekä libreofficen enteriä.
<div></div> Divisioona jota voidaan muotoilla kovin kiehtovasti.
<br></br> Sitova rivinvaihto
&nbsp; Välilyönti, lisää tilaa seuraavaan sanaan.
<h1></h1> Ylimmän tason otsikon aloittava ja lopettava koodi. Otsikkotasoja on kaikkiaan kuusi ( h1 – h6 ).
Muut perusmerkit Löytyvät etsimällä netin syövereistä.

esimerkki perus sivusta:

<html>
<head>
<title>Minun Ekat Kotisivuni </title>
</head>
<body>
<h1> Tämä on pääotsikko </h1>
<p> ja sitten alkaa varsinainen kappale, joka tässä on hyvin lyhyt. </p>
</body>
</html>
 Katso tulos Toinen esimerkki         Paras esimerkki

URL = Uniform Resource Locater , linkkien oivallisuudesta ja petollisuudesta


Kotisivulla eri "resursseihin" (esim. html-sivu, pdf-tiedosto, powerpoint-esitys, elokuva, scripti tai muu tiedosto ovat resursseja) viitataan osoitteella, jota kutsutaan nimellä URL. URL on resurssin sijainnin kertova merkkijono.

URL:n yleinen muoto on:
osoite jossa menetelmä (eli protokolla) on se tapa, jota käytetään resurssin tavoittamiseksi ja osoite kertoo resurssin sijainnin.

Esimerkkejä siirto menetelmistä:

  •  HTTP
 HyperText Transfer Protocol (hyperteksti siirto protokolla)
  •  FTP
 File Transfer Protocol (tiedosto siirto protokolla)
  •  MAILTO
 Pop & Imap Protocol (+ muut sähköposti protokollat)
  •  FILE
 tapa jolla viitataan omassa tietokoneessa olevaan tiedostoon
  •  SSH
 Secure Shell (turvattu tiedonsiirto protokolla)
  •  HTTPS
 HyperText Transfer Protocol Secure (HTTP-protokollan suojattu versio)
  •  IRC
 Instant Messenger (Internetin pikaviestipalvelu)


 

TCP/IP-protokollia ... (keskimmäiset kolme kerrosta){lainaus wikipediasta}
 
sovelluskerros HTTP, SMTP, POP, IMAP, FTP, IRC, Telnet, SIP, RTSP, RTP, SNMP ...
kuljetuskerros TCP, UDP, SCTP, DCCP (tukena: DNS, OSPF, BGP)
verkkokerros IP, ARP, DHCP, ICMP, IGMP IPv6, IPsec, Mobile IPv6, SSM...



Osoite voi olla suhteellinen tai absoluuttinen. Osoitteen täydellinen rakenne ftp tiedoston siirrolla selainta käyttäen on seuraava:

ftp://kayttäjanimi:salasana@palvelin.net ja jos kokeilit linkkiä huomasit että mistä tahansa kirjoituksesta voidaan luoda linkki minne tahansa tiedostoon tai sivulle. Joten linkki ei vie sinne mitä lupaa !

Voit ladata ja laittaa linkkejä joista löytyy: elokuvia, liikkuvia ja liikkumattomia kuvia,(ico,img,png,gif,jpg,tiff, piff,ani,bmp,cur,pbm,ym) ,PowerPoint esityksiä, text ja Word dokumentteja, pdf documentteja, Flash, VIRUKSIA JA TROIJALAISIA ym. verkossa esiintyviä tiedostomuotoja.

Usein ilmoitetaan vain tietokoneen tai palvelimen IP nro (voidaan ilmoittaa nimenä tai IP-numerona) Kokeile antaa selaimellasi IP numero 85.157.66.199 huomaat ettet pääse muualle kuin ilmoitukseen: Sivua ei voi näyttää/ei löydy koska numero on NAT in, palomuurin ja (harvoin) vaihtuvan DHCP n takaa. Jos tiedät jonkin firman kiinteän IP numeron sinne pääset antamalla selaimellesi IP n muotoa (3 tai 4kpl  2-3 numeron ryhmää pisteellä erotettuna)

Tavalliset sivun aukeamis paikat/kohdat

http://sivustot.net/e/ target="_blank" aukeaa uuteen välilehteen. <ilman www tunnusta>
http://www.sivustot.net/e/ target="_top" aukeaa saman selaimen samaan ikkunaan <target="_top">
http://www.sivustot.net/e/ target="_parent" korvaa sivun kehyksettömään ikkunaan <target="_parent">
http://www.sivustot.net/e/ target="_self" aukeaa samaan välilehteen <target="_self">


koska on kyse sivusta ilman kehyksiä sen on auettava joko:
uuteen: samaan ikkunaan: _top tai kokonaan uuteen: _blank tai korvaa sivun: _parent ikkunaan tai samaan selaimen kehykseen: _self.

Kuvien lisääminen linkeistä ja linkkien lisääminen kuvista


<img src = "kuvan osoite", height="kuvan korkeus", width="kuvan leveys" alt="Vaihtoehtoinen merkintä", title="teksti joka näytetään kuvan päällä">

esim. jos kuva on osoitteessa: palvelimeni osoite/public_html/images/ekakuva.jpg, niin lisään sen kotisivulle koodilla:
<img src="palvelimeni osoite/public_html/images/ekakuva.jpg", height="xxx", width="xxx"  alt="kuvani vuosien takaa">

Kuvat pitää tallentaa joko jpg, png tai gif muodossa. Kuvan tarkkuuden pitäisi olla nettisivuille noin 72 dpi - 150 dpi eli 72-150 pistettä tuumalle.

Määreillä width ja height määritellään kuvan koon pikseleinä jolloin kuva aukeaa nopeammin:

Kuva linkistä: 

<a href="../images/naama3.png" target="_blank">kuva</a>   josta aukeaa kuva uuteen ikkunaan.

Linkki kuvasta:

Asetin kuvasta linkin perhos-sivuille määreellä:

<a href="http://www.saunalahti.fi/leok/perhospaasi.htm" target="_blank"><img border="0" src="../images/Butterfly.GIF" align="top" width="109" height="109" title="P E R H O S I A"></a>

Jolloin se aukeaa uuteen ikkunaan.
Kiitokset Leo ;=)

Linkit


Linkit lisätään koodilla a ja sen tärkeimmät määreet ovat name ja href.

 

Linkki toiselle www-sivulle

<a href="http://www.sivustot.net/e/">Kotisivulleni</a>

 

Linkit saman teksti ym sivun sisällä ( sama pätee myös mm. OpenOffice, Calc, MS Word, ym. )

Ensin nimetään se kohta tekstistä, johon halutaan hypätä jostakin muualta, esim tässä tapauksessa sivun alkuun kirjoitetaan:
<a name=”alku”></a>

Tässä nimi alku on laitettu heti bodyn jälkeen. Jos nyt jostakin kohdasta (tätä kohtaa kutsutaan ns. ankkuriksi) halutaan hypätä kohtaan alku, niin kirjoitetaan:
<a href=”#alku”>Alkuun</a> jossa # kutsuu saman sivun sisällön ankkuria: alku.

Voit tietysti laittaa ankkurin minne tahansa kohtaan sivullesi tai muille sivuillesi ja pääset kätevästi tällä määreellä hyppäämään valitsemaasi ankkuripaikkaan.

Linkki toiseen HTML-tekstiin samalla palvelimella

Edellä olevassa määreessä HREF lainausmerkkien sisälle kirjoitetaan tiedoston, johon hypätään, url eli osoite ja tässä tapauksessa ei tarvita koko osoitetta.

Esim 1:<a href=”../Bluetooth/” target="_blank">Bluetooth</a>
Peruutan siis ensin tästä kansiosta pois ja avaan toisesta kansiosta alkusivun  ../ määreellä.
Huomaa, että tässä tapauksessa ei kirjoiteta #-merkkiä ja aukeaa uusi välilehti.


Esim 2: <a href=”../../oppaat/piir.php” target="_blank">RAKENNUSTEN SäHKöPIIRUSTUSTEN PIIRROSMERKIT</a>
Peruutan siis kaksi kansiota taaksepäin ja avaan sivun piir.php ../../ määreellä.


Sähköpostilinkki

<a href="mailto:etun.sukun@joku">Postia osoitteeseen etu.sukun@joku</a>
jolloin selaimesi aukaisee sähköpostiohjelman koneeseesi.

Erikoismerkit




Jotta erikoismerkit näkyisivät oikein kaikissa selaimissa, kirjoitetaan ne käyttäen seuraavassa taulukossa olevia koodeja:
 
Merkki
Koodi
< &lt;
> &gt;
& &amp;
" &quot;
å  &aring;
ä  &auml;
ö &ouml;
Å &Aring;
Ä &Auml;
Ö &Ouml;
© &copy;
Lisää Erikoismerkit
Merkit

Loogisia muotoilukoodeja

Tekstiä korostetaan koodiparilla <em> ja </em>. Korostettu teksti näytetään usein kursiivina.

Tekstiä korostetaan voimakkaasti koodiparilla <strong> ja </strong>. Korostettu teksti näytetään usein lihavoituna.

Sitaatit ja nimet yms. merkitään koodiparilla <cite> ja </cite>. Teksti näytetään usein kursiivina.

Koodiparia  <kbd> ja </kbd> käytetään ohjeissa sellaisen tekstin merkitsemiseen, jonka käyttäjä kirjoittaa näppäimistöltä.

Ohjelmakoodi lisätään koodiparilla <code> ja </code>

Fyysisiä muotoilukoodeja

Lihavointi:  <b>   ja </b>
Kursivointi:  <i>   ja </i>
Alleviivaus:  <u>   ja </u>

Muita koodeja

Erottava vaakaviiva: <hr>

Luettelot OL ja UL


Luettelot voivat olla järjestämättömiä (ul) tai järjestettyjä (ol). Lisätietoa

Tässä on esimerkki järjestämättömästä luettelosta:

Käyttöjärjestelmiä ovat esim. Huomaa että ohjaan css llä luettelomerkeiksi pallukan kuvat. Järjestämätön luettelo kirjoitetaan HTML-kielellä seuraavasti:

Käyttöjärjestelmiä ovat esim.
<ul>
<li>DOS</li>
<li>UNIX</li>
<li>Windows</li>
<li>Linux</li>
</ul>


Alla on sama luettelo järjestettynä eli ol li laskee ja ul li käyttää ympyröitä:

Käyttöjärjestelmiä ovat esim.

1 DOS
2 UNIX
3 Windows
4 Linux


Järjestetty luettelo kirjoitetaan HTML-kielellä seuraavasti:

Käyttöjärjestelmiä ovat esim.
<ol>
<li>DOS</li>
<li>UNIX</li>
<li>Windows</li>
<li>Linux</li>
</ol>

Taulukot

Taulukko aloitetaan koodilla <table> ja lopetetaan vastaavaan lopetuskoodiin. Taulukko muodostuu otsikosta ja riveistä. Rivit jakautuvat edelleen soluihin. Taulukon voi tulostaa ilman kehyksiä tai kehysten kanssa. Jos haluat taulukkoosi kehyksen, niin aloita taulukko rivillä:
 <table border="1">

Jos haluat taulukkoosi otsikon,. niin kirjoita taulukon aloitusrivin alapuolelle CAPTION-koodi. Kukin rivi aloitetaan tr-koodilla ja lopetetaan vastaavaan lopetuskoodiin. Solut aloitetaan td- tai th-koodilla ja lopetetaan vastaavaan lopetuskoodiin. th-solu on otsikkosolu ja td-solu normaali datasolu. Solu voi olla useita rivejä korkea (tämä ilmoitetaan määreellä ROWSPAN) tai useita sarakkeita leveä (tämä ilmoitetaan määreellä COLSPAN).

esim.  Tässä html-dokumentti, joka näyttää alla näkyvän taulukon:
(koodi kirjasta Rolf Staflin: HTML-ohjelmointi, Pagina 1996)


<html>
<head>
<title> Taulukkoesimerkki</title>
</head>
<body>

<table border="1" width="300">
<caption align ="bottom">Keburzzan myynt</caption>
 <tr>
  <td rowspan="2" colspan="2">
  </td>
  <th colspan="3">
        Ruoka
  </th>
 </tr>
<tr>
  <th>
        Kebab
  </th>
  <th>
        Burger
  </th>
  <th>
        Pizza
  </th>
 </tr>
 <tr>
  <th rowspan="2">Ajankohta</th>
  <th>
      Lounas
  </th>
  <td>14</td>
  <td>50</td>
  <td>27</td>
 </tr>
 <tr>
  <th>
      Ilta
  </th>
  <td>32</td>
  <td>34</td>
  <td>67</td>
 </tr>
<tr>
  </table>

</body>
</html>

1 malli

Div ja Span


Div esimerkistä näet z-indexin merkityksen käytännössä. Divisioona esimerkissä on 5 eri diviä vaikka näet vain neljä, yhden divin taustaväriasetuksen ollessa pois ja näinollen piilotettuna.
Tehtävä: Etsi piilotettu div lähdekoodin avulla. Divisioona esimerkki väritettynä

Muista antaa diveille css tiedostossa tai sivusi sisällä:
Span

Span-elementti on tekstitason elementti, jonka sisällä voi olla toisia tekstitason elementtejä ja tekstisisältöä. Sen avulla voidaan esimerkiksi osia tekstistä määrittää tyyliltään muusta dokumentista poikkeavaksi. Elementillä voidaan muokata lauseita ja sanojakin pienempiä osia.
Koodi:

Äidilläni on <span style="color:blue">siniset</span> silmät.

Tulos:

Äidilläni on siniset silmät.

Vierityspalkin värien muuttaminen

Kun haluat muuttaa vierityspalkin värejä kokeile katsella eri vaihtoehtoja alla olevalla generoinnilla.
23.11.2013 Ei enään aktuelli ! koska toimii ainoastaan IE6 selaimilla. Ei toimi enään

Vierityspalkkien värittäjä

Väripaletti josta voit kopioida hexakoodin

Valitse väri laittamalla kursorin vilkkumaan tekstilaatikkoon liikuttamalla hiirtä ja kun väri on oikea: Ctrl+A ja Ctrl+C

Väripaletti

Elokuvan lisääminen sivuille versio 1.

Html5 sallii yksinkertaisen videon liittämiskoodin joka toimii kaikilla selaimilla.

<video width="800" height="600" controls>
<source src="https://www.dropbox.com/s/gl40dd9uklpvelz/tuulee.mp4?raw=1" type="video/mp4>
Selaimesi ei tue video tagia.<video>


Yllä 8s videonpätkä tuulisesta päivästä yllä olevaa koodia seuraten.

Elokuvan lisääminen sivuille versio 2. ( koodille Ei tarvetta enää )

Jos haluat (erittäin toivottavaa on ettet halua) että musiikki alkaa soimaan heti sivun auetessa käytä alla olevaa koodia joka laittaa sivullesi nappulan josta musan saa myös suljettua ! Käytä aina autostart="false" määrettä.
Koodi:
<embed autostart="false" width="127" height="26" src="http://sivustot.net/Pekka/fractals/Lapset_1.wmv">

Liikkuva kuva ja musiikki: MediaPlayerilla katsottava elokuvan ja sen musiikin yhdistelmä. Lisää MUSAA 

OBJECT id='mediaPlayer'  classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' 
codebase='http://activex.microsoft.com/activex/controls/mplayer/en 
/nsmp2inf.cab#Version=5,1,52,701' 
standby='Loading Microsoft Windows Media Player  components...type='application/x-oleobject' 
param name='fileName'  value="http://sivustot.net/Pekka/fractals/Lapset_1.wmv" 
param name='animationatStart' value='true' 
param name='transparentatStart' value='true' 
param name='autoStart' value="false" 
param name='showControls' value="true" 
param name='loop' value="false" 
EMBED type='application/x-mplayer2' 
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' 
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' 
bgcolor='darkblue' showcontrols="false" showtracker='-1' 
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="640"  height="480" 
src="http://sivustot.net/Pekka/fractals/Lapset_1.wmv" 
autostart="false" designtimesp='5311' loop="false" 
OBJECT

Liikkuva kuva ja musiikki

<object id='mediaPlayer' width="640" height="480" 
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en
/nsmp2inf.cab#
Version=5,1,52,701'standby='Loading Microsoft Windows Media Player components...'
type='application/x-oleobject'>
<param name='fileName' value="http://sivustot.net/Pekka/fractals/Lapset_1.wmv">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="false">
<param name='showControls' value="true">
<param name='loop' value="false">
<embed type='application/x-mplayer2'pluginspage='http://microsoft.
com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="false" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="640" height="480"
src="http://sivustot.net/Pekka/fractals/Lapset_1.wmv" autostart="false"designtimesp='5311' loop="false">
</embed>
</object>

  Liikkuva kuva ja musiikki ulkoiselle playerille. Omistan oikeudet näihinkin kuviin !

Elokuvan lisääminen sivuille, versio 3. ( koodille Ei tarvetta enää )

1) Väkerrä html koodi jolla katselet elokuvaasi esim MediaPlayerilla :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- #BeginEditable "doctitle" -->
<title>Oma Videoni</title>
</head>
<body bgcolor="#000000" topmargin="0"><p align=center><font face=verdana color="black" size=2>VIDEONI , Odota n. 3 minuuttia kunnes alkaa soimaan ja klikkaa kuva isoksi</font><br>
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="mp_1084669460" width="500" height="500"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Autosize" value="0">
<param name="AutoStart" value="0">
<param name="Balance" value="0">
<param name="BufferingTime" value="3">
<param name="ClickToPlay" value="1">
<param name="DisplaySize" value="4">
<param name="EnableContextMenu" value="0">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<param name="Filename" value="..\media\omavideo.asx">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="ShowControls" value="-1">
<param name="ShowAudioControls" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowGotoBar" value="-1">
<param name="ShowPositionControls" value="-1">
<param name="ShowStatusBar" value="-1">
<param name="ShowTracker" value="-1">
<param name="VideoBorderColor" value="0">
<param name="VideoBorderWidth" value="0">
<param name="Volume" value="-295">
<param name="AudioStream" value="-1">
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="BaseURL" value>
<param name="CaptioningID" value>
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="1">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="TransparentAtStart" value="0">
<param name="VideoBorder3D" value="0">
<param name="WindowlessVideo" value="0">
<EMBED TYPE="application/x-mplayer2"
PLUGINSPAGE="http://microsoft.com/windows/mediaplayer/en/download/"
ID=MediaPlayer
Name="mp_610425313"
Width="500"
Height="500"
Src="../media/omavideo.asx"
AutoSize="0"
AutoStart="0"
ClickToPlay="0"
DisplaySize="4"
EnableContextMenu="1"
EnableFullScreenControls="1"
EnableTracker="1"
Mute="0"
PlayCount="1"
ShowControls="1"
ShowAudioControls="1"
ShowDisplay="1"
ShowGotoBar="1"
ShowPositionControls="1"
ShowStatusBar="1"
ShowTracker="1"
>
</EMBED>
</object>
<!-- #EndEditable -->
</p>
</body>
</html> TALLENNA TäMä TIEDOSTO PALVELIMELLESI 2) Tee asx päätteinen tiedosto:

<ASX version = "3.0">
<title>Oma videoni</title>
<Entry>
<Ref href = "..\media\omavideo.avi" />
</Entry>
</ASX>
3) Tallenna tekemäsi elokuva omavideo.avi samoin kuin tekemäsi omavideo.asx palvelimellesi tekemääsi kansioon. esim: media

4) Tallenna tekemäsi htm 1) sivu palvelimellesi tässä esimerkissä nimellä Omavideo.html

5) Tee linkki joltakin sivultasi tiedostoon Omavideo.html

6) Muuta tausta mustaksi, äänentaso (max=600), playerin käynnistys, koko ym. parametrit mieleiseksesi

7) Siis Punaisella merkatut muutat omille asetuksillesi ja tiedostonimillesi.

8) Avaa sivu Omavideo.html selaimella, anna tiedoston lataantua; katsele esim windows mediaplayerilla tai muulla, kuuntele ja nauti.

Web Kamera sivullesi. SimpleCam ohjelmaa ei ole saatavilla.

Kun haluat sivullesi automaattisesti päivittyviä kuvia sinulla pitää olla joku web kamera ja esim sen mukana tulevalla softalla lataat ftp protokollan avulla kuvia nettiin web kamera sivullesi.

Kannattaa opetella itse käyttämään omia maksullisia tai ilmaisia ohjelmiansa joten en niihin puutu sen enempää tässä yhteydessä.

Jos haluat Streaming eli virtaavaa reaaliaikaista liikkuvaa kuvaa sivullesi voit käyttää vaikka YAWCAM tai Webcam 7.

Eräs edesmennyt, hyvintoimiva ohjelma oli SimpleCam.

Ota huomioon että SimpleCam vei rajusti prosessorin resursseja ja että sinulla sekä katselijallasi prosessorin piti olla yli 2,8GHz että streamisi näkyy hänelle. Eli harvat näkivät !

[double/{LäHI tulevaisuuden:quatro/heksa/quinty/ ja minne asti päästäneenkään) ydin luokan prosessoreille nykypäivän kamera sovellukset ovat suhteellisesti kevyempiä ja vähemmän resursseja kuluttavia.

Tarkkaile siis tehtävänhallinnasta prosessorisi suoritinkäyttö % a ettei kokeilu tule turhan kalliiksi.

Minua ainakin alkoi hirvittämään kun cpu-tuuletin alkoi nostamaan kierroksia ja huuti hetken kuin hinaaja ;=)

Suoritin käyttö hipoilee sataa prosenttia kameralta streamingkuvaa nettiin lähettäessäni, joten olin SimpleCamin kanssa varovainen. Nuukana miehenä ja (wanhan koneeni) cpu tani ( 3.2GHz ) säästääkseni käytin SimpleCam ohjelmaa ainoastaan pyynnöstä.

Manuaalin tapainen klikkaamalla simple.php. 23.11.2013 Ei enään aktuelli ! koska toimi ainoastaan IE6 selaimilla.

Reaaliaikainen: Televisiokuva, DVD elokuva, VHS-nauha tms elokuva sivuillesi


Ei enään aktuelli ! koska toimi ainoastaan IE6 selaimilla.
Jos haluat laittaa esim reaaliaikaista Televisio, DVD elokuvaa, VHS-nauhaa tai jostain muusta lähteestä tulevaa liikkuvaa kuvaa sivuillesi sinulla pitää olla jokin ohjelma (esim PVR Plus) jolla saat DVD-VHS-TV elokuvasi suorana koneellesi,

Johdot ja liittimet on oltava asialliset: kuvalle composite tai S-video sekä äänelle RCAx2 liittimet joilla yhdistät esim DVD-laitteesi tietokoneeseen USB-2 tai FireWire liittimen avulla.
Käyttöjärjestelmänäsi voisi olla ehkä XP-Proff,Vista tai win7 sekä nopea verkkoyhteys, WebCam ohjelma streamaamaan lähetystä muualtakin kuin webkamerastasi.

Katso mallia sivultani: http://www.sivustot.net/WebCam/suora/

saat streaminkanavan koneelleni. Ja jos mitään ei näy niin streaminglähetys ei vaan ole kytkettynä nettiin täältä päästä........
HOKS ! 23.11.2013 Muutamat sivun tarjoamat scriptit eivät ole enään aktuelleja koska toimivat vain IE6 selaimilla joita ei käytetä.

Kuvan vaihtaminen JavaScriptillä

swap.js vaihtaa kuvan toiseksi lennosta kun hiiri on kuvan päällä. ks mallia: http://sivustot.net/phweb/mopeti/

Vaihdettavan kuvan kohtaan tagit: 

<img id=img1 onmouseover="swapImg(1,0,'img1','images/2.jpg')" onmouseout="swapImg(0,0,'img1','images/1.jpg')" 
alt="" width="640" height="480" src="images/1.jpg">

Laita <head> osioon tai linkitä mieluummin <head><script src="swap.js"></script>. Kun teet swap.js tiedostoa ei saa käyttää <script></script> tageja


<head><script>
function preloadImgs() {
var d=document,a=arguments; if(!d.imgs) d.imgs=new Array();
for(var i=0; i<a.length; i++) { d.imgs[i]=new Image; d.imgs[i].src=a[i]; }
}
 
function swapImg() {
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
 
function getObjectByID(id,o) {
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=getObjectByID(id,els[n]); if(el) return el; } }
return null;
}</script>
<head/>
Huomaa että koodilla on esilatausominaisuus jonka otat käyttöön:
<body onload="preloadImgs('images/2.jpg','images/4.jpg')">
eli esilataat vain ne kuvat jotka eivät ole heti näkyvillä.


Kokeile. Hiiri mopetin kuvan päälle.

Automaattinen Kuvaesitys

Tallenna koko koodi: tästä ja katso miltä näyttää Ankkojen esitys

Lomakkeen tarkistus JavaScriptillä


Kokeile toimiiko lomakkeen tarkistus myös IE11 - 12 - Edge selaimilla. Jos toimii, lähetä emailia minulle.


Lomakkeen tarkistus-skripti Skriptin selitys
/*Tyhjennä lomake-tarkistus*/
function Tyhjennys(form)
{
var tyhj=form.value;

if (!confirm("Haluatko varmasti tyhjentää kaikki kentät?"))
{
return false
}

}		 Tämä skripti tekee seuraavaa:
Kun lomake resetoidaan, eli painetaan lomakkeen tyhjennä painiketta, selain varmistaa halutaanko kaikki lomakkeen kentät varmasti tyhjentää. Avautuvasta ikkunasta voi valita "OK", jolloin kentät tyhjennetään tai "Cancel", jolloin kenttiä ei luonnollisesti tyhjennetä.
/*Lomakkeen kenttien varsinainen tarkistus*/
function Laheta(form)
{ 		Tämä skripti aloittaa toiminnon, jolla tarkistetaan, mitä lomakkeen kenttiä on täytetty ja mitä ei.
var Etunimi=form.Etunimi.value;

if(Etunimi.length<2)
{
alert("Et antanut etunimeäsi!");
form.Etunimi.focus();
return false;
} 		Tämä tarkistaa lomakkeestasi Etunimi-nimisen tekstikentän ja jos kenttään on kirjoitettu vähemmän kuin kaksi merkkiä, ilmoittaa selain "Et antanut etunimeäsi!" ja tekstikursori siirtyy automaattisesti Etunimi-nimiseen lomakkeen kenttään.

Lomake lähetetään vasta, kun Etunimi-kenttään on kirjoitettu vähintään kaksi merkkiä.
var Sukunimi=form.Sukunimi.value;

if(Sukunimi.length<3)
{
alert("Et antanut sukunimeäsi!");
form.Sukunimi.focus();
return false;
}		 Tämä tarkistaa lomakkeestasi Sukunimi-nimisen tekstikentän ja jos kenttään on kirjoitettu vähemmän kuin kolme merkkiä, ilmoittaa selain "Et antanut sukunimeäsi!" ja tekstikursori siirtyy automaattisesti Sukunimi-nimiseen lomakkeen kenttään. Lomake lähetetään vasta, kun Sukunimi-kenttään on kirjoitettu vähintään kolme merkkiä.
if(form.Email.value.indexOf('@', 0) == -1)
{
alert("Et antanut sähköpostiosoitettasi tai se on virheellinen!");
form.Email.focus();
return false;
}		 Tämä tarkistaa, että Email-nimisessä tekstikentässä on @-merkki. Jos merkkiä ei kentässä ole, lomaketta ei lähetetä ja selain ilmoittaa "Et antanut sähköpostiosoitettasi tai se on virheellinen!". Tekstikursori siirtyy automaattisesti Email-nimiseen lomakkeen kenttään.
var Teksti=form.Teksti.value;

if(Teksti.length<10)
{
alert("Et kirjoittanut palautteeseesi mitään tekstiä!
(min. 10 merkkiä)");
form.Teksti.focus();
return false;
}

if(Teksti.length>1000)
{
alert("Palaute-tekstin pituus on rajattu 1000 merkkiin!");
form.Teksti.focus();
return false;
} 		Tämä tarkistaa, että Teksti-nimisen monirivisen lomakkeen kentän pituus on vähintään enemmän kuin 10 merkkiä, mutta vähemmän kuin 1000 merkkiä.
Jos Teksti-kentän pituus on vähemmän kuin 10 merkkiä, selain ilmoittaa lomakkeen lähetyksessä "Et kirjoittanut palautteeseesi mitään tekstiä! (min. 10 merkkiä)".
Jos taas Teksti-kentän merkkien määrä on suurempi kuin 1000 merkkiä, ilmoittaa selain lomaketta lähetettäessä "Palaute-tekstin pituus on rajattu 1000 merkkiin!".
Lomaketta ei lähetetä, jollei Teksti-kentässä ole vähintään 10 merkkiä tai jos sen merkkimäärä on suurempi kuin 1000.
/*Radio-painikkeiden tarkistus*/

var intVastaus=-1;

for (var i=0; i < form.Vastaus.length;i++) {
if (form.Vastaus[i].checked==true) {
intVastaus=i;
}
}

/*Huomautus, jos radio-painikkeita ei ole valittu*/

if(intVastaus==-1){
alert("Et valinnut vastataanko palautteeseesi!");
return false;
}		 Tämä tarkistaa, että Vastaus-niminen "radio-painike" on valittu (radio-painikkeita voi olla useampikin samanniminen, jolloin skripti tarkistaa, että vähintään yksi niistä on valittu).
Jos radio-painiketta ei ole valittu, ei lomaketta lähetetä ja selain ilmoittaa "Et valinnut vastataanko palautteeseesi!".
/*Varmistus-koodin tarkistus*/

var koodi=form.koodi.value;

if(koodi!="292KBX47J6")
{
alert("Et kirjoittanut tarkistus-koodia oikein!");
form.koodi.focus();
return false;
}

}		 Tämä tarkistaa, että koodi-nimiseen teksti-kenttään on kirjoitettu teksti: 292KBX47J6. Jos koodi-nimisen teksti-kentän sisältö on joku muu kuin 292KBX47J6, ei lomaketta lähetetä ja selain ilmoittaa "Et kirjoittanut tarkistus-koodia oikein!".

Tekstikursori siirtyy automaattisesti koodi-nimiseen lomakkeen kenttään.

Huom! JavaScriptissä merkintä: != tarkoittaa erisuuruutta ja merkki == tarkoittaa yhtäsuuruutta.

/*Tekstikentän pituuden tarkistaminen ja näyttäminen*/ function Tarkistamerkit(form)
{
var maxpituus=1000;

var Teksti=form.Teksti.value;

var Merkkejayhteensa=Teksti.length;

form.Merkkejajaljella.value = maxpituus - Merkkejayhteensa;

}		 Tämä funktio tarkistaa, montako merkkiä palautelomakkeen moniriviseen Teksti-kenttään on kirjoitettu ja näyttää sitten jäljellä olevien merkkien määrän Merkkejajaljella-nimisessä yksirivisessä tekstikentässä.
Punaisella korostettu arvo on siis lomakkeen tekijän määrittelemä maksimiarvo moniriviselle Teksti-kentälle. Voit muuttaa sitä, jos haluat. Muista tällöin muuttaa myös maksimiarvo Teksti-kentän pituuden muista tarkistus-ilmoituksista.
Funktio siis lukee Teksti-kentän merkkien määrän aina, kun lomakkeen täyttäjä klikkaa kenttää hiirellä, kirjoittaa siihen tai siirtyy täyttämään lomakkeen muita kenttiä. Merkkejajaljellä-kentässä näkyy siis aina oikea lukema, paljonko merkkejä Teksti-kenttään voi vielä kirjoittaa.


Voit kopioida yllä esitetyn lomakkeen tarkistus-skriptin kokonaisuudessaan alla olevasta tekstikentästä:



Sivu päivitetty: 26.03.2020 Ja Php koodi:
<?php
echo "<b>Sivu päivitetty: " . date ("d-m-y", getlastmod());</b>
?>

Captcha suojaus lomakkeelle roskaposti robottien kiusaksi


Itse olen siirtynyt käyttämään lisäksi Captcha suojausta emailissa. Captcha = Completely Automated Public Turing test to tell Computers and Humans Apart.

Muutamia serverinohjaus koodeja

Nykyistenkin servereiden php5.* koodin ansituki on vieläkin olemattoman huonoa joten voinet joutua kirjoittamaan .htaccess tiedostoon rivit:
suPHP_ConfigPath /home/domainisi/public_html
AddDefaultCharset ISO-8859-1 ja joutunet sen tehdä ainakin siinä tapauksessa jos käytät ANSI koodausta

Jos haluat tehdä yksilölliset virhesivut, kenties ohjauksen etusivulle virheen tapahtuessa niin .htaccess tiedostoon lisätään esim. nämä tiedot:

ErrorDocument 204 204.shtml
ErrorDocument 301 301.shtml
ErrorDocument 400 400.shtml
ErrorDocument 401 401.shtml
ErrorDocument 405 405.shtml
ErrorDocument 406 406.shtml
ErrorDocument 407 407.shtml
ErrorDocument 408 408.shtml
ErrorDocument 409 409.shtml
ErrorDocument 410 410.shtml
ErrorDocument 412 412.shtml
ErrorDocument 415 415.shtml
ErrorDocument 422 422.shtml
ErrorDocument 424 424.shtml
ErrorDocument 500 500.shtml
ErrorDocument 501 501.shtml
ErrorDocument 503 503.shtml
ErrorDocument 504 504.shtml
ErrorDocument 507 507.shtml

Sisältönä esim. palautus etusivulle tai jotain muuta:
shtml tiedoston toiminnallisuus riippuu sen sisällöstä.

Html sivun koodin saat näkyviin:


Mozilla Firefox;   hiiren oikealla... Show page source/Näytä sivun lähdekoodi
Chrome;   hiiren oikealla.... View source/Näytä sivun lähdekoodi
Opera;   Ctrl + F3
K-Meleon;   ylävalikosta... View Page Info> Page Source
IE 8, 7, 6 ja 5;   hiiren oikealla.... View source/Näytä lähdekoodi
Netscape;   View/PageSource.

Sekä tutkimalla näidenkin sivujen koodeja.
php lausekkeita et näe lähdekoodista, ainoastaan sen generoiman koodin ! ! ! ! !  ...

.passwd-suojaus .htacces tiedoston avulla

.htaccess tiedosto on hyödyllinen, koska voit esim. suojata kansioita ja tiedostoja salasanalla, tehdä omat "404 error" virhesivut, uudelleenohjata pyydetty sivu toisaalle, estää/sallia sivusi näkyminen IP:n perusteella yms.

Nyt teemme vain salasana suojaukseen.

.htaccess tiedoston luominen:

Avaa notepad tai muu textieditorisi.

Sinun tulee määritellä seuraavat seikat:

AuthType
AuthName
AuthUserFile
Require

AuthType voi olla joko Basic tai Digest
Käytämme AuthType Basic

AuthName kohtaan voit kirjoittaa mitä haluat näkyvän dialogissa kysyttäessä käyttäjätunnusta ja salasanaa eli se voi helpottaa salasanan muistamisessa tai kertoo kansion sisällöstä.

Esim: AuthName "Members only area" Huom: jos AuthName sisältää useamman kuin yhden sanan, on kaikki sanat laitettava lainausmerkkien sisään. Esim: Authname input_pass on vain yksi sana eikä tarvitse lainausmerkkejä

AuthUserFile kohdassa määritellään polku mistä löytyy käyttäjien tunnukset/salasanat

HUOM. Tämä on ehkä ainoa vaikea kohta tehdessä .htaccess salasana suojausta, ole tarkkana Salasanatiedosto voi sijaita missä kansiossa tahansa kotisivupalvelimellasi. Polku josta salasanatiedosto löytyy EI ole sen tiedoston URL www.sinunsivusi.fi/salattu/.passwd Vaan oikea polku tiedostolle palvelimeltasi katsottuna !

esim. /mbnet/pekansivut/salattu/.passwd tai esim. /home/omatsivut/public_html/salaisuuksia/salattu/.passwd olettavat että salasanat sisältävä tiedosto löytyy kansiosta salattu ja tiedoston nimi olisi .passwd. Todellinen polku serverillä voi olla aivan erilainen kuin 2 mainitsemaani esimerkkiä. Jos et tiedä serveripolkuasi sitä voi kysyä kotisivutilasi tarjoajalta tai cpaneelista (jos sellainen on käytössä). Toki sen voit melko helposti selvittää myös omin päin:

Tee php-tiedosto nimeltään esim polku.php, avaa se ja kirjoita koodi: <?php echo getcwd(); ?>
Tallenna ja lähetä tiedosto polku.php kotisivupalvelimellesi. Käynnistä nettiselaimesi ja avaa polku.php selaimessasi ja scripti näyttää serverin polun, joka sinun tulee kirjoittaa AuthUserFile:een. Jos laitoit .passwd tiedoston jonkun kansion sisään se tulee kertoa, esim yllä käytin kansiota salattu.
Salasana tiedoston nimi voi olla ihan mikä vaan. Useimmissa tutoriaaleissa käytetään pääsääntöisesti nimeä .htpasswd tai jmts mutta kuten sanottu nimellä ei ole väliä, kunhan nimi .htaccess tiedostossa täsmää salasanatiedoston nimen kanssa. Eli muista nimetä tiedosto juuri sillä nimellä minkä kirjoitit AuthUserFile rivin loppuun. Eli esim: AuthUserFile /home/domainini/public_html/salattu/.passwd

Require valid-user

tämä kohta käskee serveriä päästämään vain sallitut käyttäjät käsiksi tiedostoihin/kansioon
Siinä kaikki, eli vain 4 riviä tekstiä.

Malliksi vielä toimivan .htaccess tiedoston sisältö

AuthName "Vain Luotetuille"
AuthType Basic
AuthUserFile /home/domainini/public_html/salattu/.passwd
Require valid-user

Periaatteessa ainoa rivi joka sinun on pakko muuttaa on 3 rivi. Tallenna nimellä .htaccess

.passwd tiedoston luominen

Avaa notepad. Kirjoita käyttäjätunnukset ja salasanat muodossa.

käyttäjätunnus:salasana.

useamman käyttäjän tiedot eri riveille enteri:iä painamalla esim.
käyttäjätunnus1:salasana1
käyttäjätunnus2:salasana2

Tallenna nimellä .passwd

Salasana tulee kirjoittaa salattuna eli kryptattuna. Ohjeet vinkeissä.

.htaccess ja .passwd tiedostojen tekeminen ja tallennus

Tiedostojen nimet palvelimellasi tulee ehdottomasti alkaa pisteellä .htaccess ja .passwd

Kirjoita .htaccess tiedoston sisältö ja valitse tallenna nimellä [Save as] ja anna tiedoston nimi .htaccess. Onneksi olkoon .htaccess tiedosto on luotu. Käytä samaa menetelmää luodessasi .passwd tiedostoa.

Vinkkejä


.htaccess ja .passwd tiedostot ovat piilotiedostoja. Eli kun olet lähettänyt sen kotisivupalvelimellesi, se todennäköisesti "katoaa" eli et näe sitä ollenkaan, tässä tapauksessa säädä FTP ohjelmasi asetuksia niin että se näyttää myös piilotiedostot [hidden files] tai hae ilmainen winscp joka näyttää myös piilotiedostot.

.htaccess tiedoston voit laittaa minne tahansa kotisivuillasi. Sen vaikutus ulottuu joka kansioon ja tiedostoon sen alapuolella. Jos laitat .htaccess tiedoston suoraan kotisivujesi juureen, se vaikuttaa jokaiseen kansioon ja tiedostoon. Jos teet sille oman kansion tai laitat sen esim kansioon salattu, sen vaikutus ulottuu kansioon salattu ja kaikkii sen sisällä oleviin kansioihin sekä tiedostoihin. .htaccess tulee lähettää kotisivuillesi aina ASCII muodossa. Salasana tulee olla kryptattu jottei sitä ulkopuoliset pääsisi käyttämään koska oletetaan nyt niin että olet tehnyt salasana tiedoston .passwd, olet lähettänyt sen kotisivuillesi. JA jos minä tiedän missä kansiossa se sijaitsee voisin vain kirjoittaa selaimeni osoiteriville .passwd tiedoston URL:in ja kas vain salasanasi ei ole salassa vaan minä näkisin ne! Siksi kryptaus on pakollinen toimenpide.
[ kryptaus muuttaa käyttäjätunnuksesi: salattu ja salasanasi: _Salasana123 muotoon:
salattu:$apr1$PQhRJbES$fyc7AjQnaRiW3Q8a/zpJu. ] KOKEILE

.passwd salasana generointi ( < -- Klikkaa sinisestä linkistä uuteen ikkunaan ) ja muista polku.php n koodi: <?php echo getcwd(); ?>

Kuvien teko sivuille ilman kuvia



<!--[if gte vml 1]><v:oval id="_x0000_s1026"
alt="" style='position:absolute;left:256.5pt;top:225pt;width:223.5pt;height:33pt;
z-index:1' fillcolor="#ffc" strokecolor="silver">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center"><font size="1" color="#FF0000"><b>, shtml, wml, xml, xhtml, php, asp, asm, pääte</b></font></td>
</tr>
</table>
</v:textbox>
</v:oval><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:341px;top:299px;width:304px;height:50px'><img
width=304 height=50 src="oikea_files/image001.gif" v:shapes="_x0000_s1026"></span><![endif]></p>

<!--[if gte vml 1]><v:oval
id="_x0000_s1027" alt="" style='position:absolute;left:195.75pt;top:282.75pt;
width:154.5pt;height:28.5pt;z-index:1' fillcolor="#ff9" strokecolor="#969696">
<v:stroke dashstyle="1 1" endcap="round"/>
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center"><font size="1" color="#FF0000"><b>index.htm, index.html</b></font></td>
</tr>
</table>
</v:textbox>
</v:oval><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:260px;top:376px;width:212px;height:44px'><img
width=212 height=44 src="oikea_files/image002.gif" v:shapes="_x0000_s1027"></span><![endif]>

Ja Digitaalikello Javalla, selaimessasi oltava javatuki

Kello javascriptillä canvakseen piirrettynä

Kello CSS llä ilman javascriptiä. Ei toimi oikein!

Tai vastaavasti PHP koodilla pyöreä kellotaulu, joka näyttää oikean ajankin, katso klo_round.php ja klotoka.php

Jos kopioit suoraan koodista kokeillaksesi itse; muista ottaa fonttien värimääritykset pois


<?php
// asetetaan dokumentin tyyppi
header("Content-type: image/png");

// kuvan koko, kuvasta tulee vielä 1px isompi
$halkaisija = 400;
$säde = $halkaisija/2;

// luodaan kuva
$kuva = imagecreate($halkaisija + 1, $halkaisija + 1);

// asetetaan värejä
$tausta = imagecolorallocate($kuva, 255, 255, 255);
$musta = imagecolorallocate($kuva, 0, 0, 0);
$sininen = imagecolorallocate($kuva, 60, 70, 200);

// hankitaan tarkat desimaalilukemat tunneille, minuuteille ja sekunneille
$tunteja = date("g") + (date("i") / 60) + (date("s") / 3600);
$minuutteja = date("i") + (date("s") / 60);
$sekunteja = date("s");

// muunnetaan aika viisarien kulmiksi radiaaneissa
$rad_tunti = 2 * M_PI / 12 * $tunteja - M_PI_2; // 1 tunti = 2 * M_PI rad / 12, nollakohdan korjaus - M_PI / 2 rad (-90 astetta)
$rad_minuutti = 2 * M_PI / 60 * $minuutteja - M_PI_2; // 1 minuutti = 2 * M_PI / 60 rad, nollakohdan korjaus - M_PI / 2 rad (-90 astetta)
$rad_sekunti = 2 * M_PI / 60 * $sekunteja - M_PI_2; // 1 sekunti = 2 * M_PI / 60 rad, nollakohdan korjaus - M_PI / 2 rad (-90 astetta)
// piirretään kellon ympyrä
imageellipse($kuva, $säde, $säde, $halkaisija, $halkaisija, $musta);

// viisareiden pituudet
$viisaripituus_tunti = $säde*0.6;
$viisaripituus_minuutti = $säde*0.8;
$viisaripituus_sekunti = $säde*0.9;

// piirretään viisarit keskipisteestä (200, 200) suuntaan (x2, y2) -> (cos KULMA, sin KULMA) kerrottuna viisarin pituudella
// lisäksi tehdään koordinaatiston korjaus (x2, y2) -> (+200, +200), koska (0,0) on vasemmassa yläkulmassa
imageline($kuva, $säde, $säde, $viisaripituus_tunti * cos($rad_tunti) + $säde, $viisaripituus_tunti * sin($rad_tunti) + $säde, $musta);
imageline($kuva, $säde, $säde, $viisaripituus_minuutti * cos($rad_minuutti) + $säde, $viisaripituus_minuutti * sin($rad_minuutti) + $säde, $musta);
imageline($kuva, $säde, $säde, $viisaripituus_sekunti * cos($rad_sekunti) + $säde, $viisaripituus_sekunti * sin($rad_sekunti) + $säde, $sininen);

// luodaan kuva
imagepng($kuva);

// poistetaan kuva palvelimen muistista
imagedestroy($kuva);
?>

Css-Tyylit

Tallenna aluksi koneellesi linkistä: ilmainen TopStyle Lite 3.10 css tyylinteko-ohjelma ja katso sillä eräiden sivujeni style.css tiedostoa

Opettele käyttämään ohjelmaa ja sinulle aukeaa aivan uusi oma ajanjaksosi tyylien suuremmoisesta voimasta nettisivun teossa. Hyvä opas Css n ja alkaa layereista: Petteri Perälä

Css tyylitiedosto linkitetään html sivulle body osioon määreellä: <link rel="stylesheet" href="style.css"> joka on suositeltavampi tapa. Silloin css tiedostoon ei kirjoiteta <style> </style> tageja.
tai liitetään sivun <head> osioon.

Tämän sivun tyylitiedosto

body {margin: 20px 20px 20px 20px;
	font-size: 11pt;
	font-family: verdana, arial, times new roman, sans-serif;
	position: relative;
}

.c4 {overflow-x:auto; background-color: #fff; max-width: 100%; height: auto; clear: both;}
.yliv {overflow-x:auto;}

.scrollToTop{
	width:60px; 
	height:60px;
	padding:5px; 
	text-align:center;
	background: whiteSmoke;
	font-weight: normal;
	color: #444;
	position:fixed;
	right:0px;
	bottom:30px;
	display:none;
	background: url('up.png') no-repeat 0px 0px;}

table, pre, textarea, input{
overflow-x:auto;
background-color: #f2f2f2;
border: 1px; -moz-border-radius: .8em; border-radius: .8em;
padding: 8px;
}

th {
	font: bold 9pt "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background-color: #CAE8EA;
}

.td1 {
	border: 1px dotted;
	width: 38%;
	font-size: 9pt;
	background-color: #eeeeee;
}

.td2 {
border: 1px dotted;
	font-size: small;
	border-left: 1px dotted #C1DAD7;
	border-right: 1px dotted #C1DAD7;
	border-bottom: 1px dotted #C1DAD7;
	background: #fff;
	color: #4f6b72;
}

img, table img {margin:0px auto; text-align: center; max-width: 100%; height: auto;
 -moz-border-radius: .8em; border-radius: .8em; clear: both;}

#img2, #img2, #img3, #img4, #img5, #img8, #img9, #img10, #img11, #img12, #img13,
 #img14, #img15, #img16, #img17 {
border: 1px; border-color: #ff0000; border-style: dotted;
-moz-border-radius: .8em; border-radius: .8em;}

p::first-letter {text-transform: uppercase;
  font-size: 115%; line-height: 5px !important;}

#herate {
  position: fixed;
  z-index: 97;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  font-size: 0.7em;
}

#palkki {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 98;
  visibility: hidden;
  padding-bottom: 2px;
}

.valikko {
  position: fixed;
  top: 0px;
  z-index: 99;
  visibility: hidden;
  overflow: visible;
}

.juuri {
  position: relative;
  top: 0px;
  z-index: 99;
  padding-bottom: 2px;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
}

.linkki {
  position: relative;
  z-index: 99;
  visibility: hidden;
  border-top: dotted 1px silver;
  padding-left: 1em;
  padding-bottom: 2px;
  text-align: left;
  font-size: 0.8em;
  cursor: pointer;
}

#p1 {	font-size: x-small;}
#codebg {background-color: #e8e8e8; margin: 40px 30px 40px 10px;
font-family: "Courier New", Courier, monospace; font-size: 1em; color: #55711b;
 padding: 5px 30px; -moz-border-radius: 1em; border-radius: 1em;}

.hr{margin: 40px 30px 40px 30px; /*vihreä hr*/
	height: 6px;
	background-color: #C1FFE1;
	-moz-border-radius: 1.6em;
	border-radius: 1.6em;
}

video { max-width: 100%; height: auto; border: 1px;
-moz-border-radius: 1em; border-radius: 1em; clear: both;}

#mediaPlayer { max-width: 100%; height: auto;
overflow-x:auto;
text-align: center;
background-position: center;
margin: 0px auto;}

.malli2
{margin: 2% auto;
width: 300px;
height: 300px;
background-color: #ff0000;
-moz-border-radius: 3em;
border-radius: 3em;}

.img_malli
{ border: 1px;
border-color: #ff0000;
border-style:dotted;
-moz-border-radius: 33em;
border-radius: 33em;}

div#middle {
	background-repeat: repeat-x;
	height : 100%;
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 10px;
	width : 58%;
	color :#404040;
}

.ots {
   font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   color: Black;
   border-right: 1px solid #C1DAD7;
   border-bottom: 1px solid #C1DAD7;
   border-top: 1px solid #C1DAD7;
   letter-spacing: 2px;
   text-align: left;
   padding: 2px 2px 2px 12px;
   width : 58%;
   background: #CAE8EA;
}

.mal {
   font: bold 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   color: Black;
   border-right: 1px solid #C1DAD7;
   border-bottom: 1px solid #C1DAD7;
   border-top: 1px solid #C1DAD7;
   letter-spacing: 2px;
   text-align: left;
   padding: 2px 2px 2px 12px;
   width : 55%;
   background:  ThreedLightShadow;
}

.center { text-align: center; }
#cent {margin: 0px auto;}

h1 {
	font-size: 170%;
	color: #FF3300;
}
h2 {
	font-size: 120%;
	color: #5A5A5A;
	margin-right:20px;
	margin-left: 20px;
	padding: 5px 5px 8px 55px;
	background: #E6E6E6;
	-moz-border-radius: 1.2em;
	border-radius: 1.2em;
}

h3 {font-size: 125%;}
h4 {font-size: 100%;}
h5 {font-size: 80%;}
h6 {font-weight: normal; font-size: 90%; color: #DC143C;
margin:10px; padding:5px 20px; background: #E6E6E6;}
.h6 {font-size: 70%;}

li {
	font-size: 80%;
	background-color: InfoBackground;
	margin-left: -20px;
	padding: 2px;
	list-style-image: url(../images/pearl.gif);
	}
   
border { border-style: outset;}

a:link   { color: Blue; text-decoration: underline; }
a:active { color: Blue; text-decoration: underline; }
a:hover  {	color: Red;	text-decoration: none; border-top: blue solid 1px;
padding-top: 1px; border-bottom: none;}
a:visited   { color: Blue;	text-decoration: none; }

input {
	BORDER-RIGHT: #CECECE 0px solid;
	BORDER-TOP: #CECECE 2px solid;
	background-color: #f9f4e6;
	FONT-SIZE: 11px;
	BORDER-LEFT: #CECECE 2px solid;
	COLOR: #0000FF;
	BORDER-BOTTOM: #CECECE 0px solid;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

textarea{
	BORDER-RIGHT: #CECECE 0px solid;
	BORDER-TOP: #CECECE 2px solid;
	PADDING-LEFT: 4px;
	FONT-SIZE: 13px;
	VERTICAL-ALIGN: middle;
	BORDER-LEFT: #CECECE 2px solid;
	COLOR: Blue;
	PADDING-TOP: 3px;
	BORDER-BOTTOM: #CECECE 0px solid;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	background-color: #f9f4e6;
}

.submit {
	BORDER-RIGHT: #CECECE 1px solid;
	BORDER-TOP: #CECECE 1px solid;
	PADDING-LEFT: 3px;
	FONT-SIZE: 11px;
	VERTICAL-ALIGN: middle;
	BORDER-LEFT: 2px solid Black;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: 2px solid Black;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	background-color: ActiveBorder;
	HEIGHT: 22px;
}
#pun, #pun2, #puna, #punhu, #har, #viol, #vasi, #sin, #teal, #oran {
   font-weight: bold;
}
#pun {
   font-size: 0.9em;
   color: #f00;
}

#pun2 {
   font-size: 0.7em;
   color: #f00;
}

#puna {
   font-size: 1.1em;
   color: #f00;
}

#punhu {
   font-size: 170%;
	color: #FF3300;
}

#rusk {
   font-size: 0.9em;
   color: #800000;
}

#har {
   font-size: 0.7em;
   color: #5a5a5a;
}

#viol {
   font-size: 1em;
   color: #ff00ff;
}

#vasi {
   font-size: 1em;
   color: #00AAAC;
}

#sin {
   font-size: 1em;
   color: #00f;
}

#teal {font-size: 0.9em;
   color: Teal;
}
#oran {
   color: #ff6600;
}

#pun1 {
   font-size: 1em;
   color: #ff1493;
}

#punp {
   font-size: 10px;
   color: #DC143C;
}

#har1 {
   color: #939393;
}

#sini {
   font-size: 1em;
   color: #00f; 
}

#vih {
   color: #008000;
}

#okra {
   color: #ff6600;
}

#smallb { font-weight: lighter; color: #000000; font-size: 8px;}

#small {
   font-size: xx-small;
}
#med {
   font-size: small;
}

div#sisuswrapper ul li{
	width:100%;	
   overflow: hidden;	
}
p.huom {
   clear: both;
   color: #462BE7;
   font-size: 0.8em;
   padding-left: 3em;
}
iframe {width: 315px; height: 340px; border: 0px; clear: both;}
iframe #tiimat {width: 315px; height: 185px; border: 0px; clear: both;}

#footer { border: none; height: 900px;}

HTML5-

HTML 5 on uusin standardi html stä (v.2012) jossa alkuun laitetaan documenttityyliä kuvaava tai paremmikin kuvaamaton tyyli ja kieliosio:
<!DOCTYPE html>
<html lang="fi">
<head>

Kuten huomasit alku on lyhyt, mutta sivun ulkomuodon runsaus ilmenee css tyyleissä, joka onkin se vaativa osuus ja jolla saat melkoisia ihmeitä aikaan verrattuna esim doctype html4 tai/ja entisiin selaimiin !
OPETTELE SIIS VIIMEISTÄÄN TÄSSÄ VAIHEESSA "css-tyylitaituriksi" halutessasi tehdä näyttäviä ja hyvintoimivia websivuja.

Monimuotoisuus ja ulkomuotojen runsaus jonka uusi standardi suosittelee uusimmille selaimille esitettäväksi on yllättävän suuri.

Muutamia yksityiskohtia doctypen jälkeen:
1. Älä käytä lopetustageja kuten strict tyyleillä on käytettävä:  <link rel="stylesheet" href="tyyli.css" type=text/css />
2. Älä tyypitä ulkoisia css, inc tai javascipt tiedostoja. Ks ylös.
3. Opettele css tyylien tekeminen suvereenisti jos haluat tehdä näyttävää jälkeä.

HTML5 lla voit css n ja js n kanssa pelkällä koodilla tehdä:

HTML5 Uusia elementtejä, tageja ja lisätietoa:

<input> elementin <type> atribuuttien uudet arvot:

Nämä html4 elementit on poistettu uudesta html5 stä.


Canvas Esimerkkejä

Pyörivä sylinteri on näyttävä esitys Firefox 20+ sekä IE11 ja pivot eli pystynäytölle. Ei näy heikoilla näytön-ohjaimilla, XP- tai vanhemmilla käyttöjärjestelmillä tai 1-ydin prosessoreilla.




ESIMERKKEJÄ
1. Labyrintti Peli.
2. Html5 Canvas Tutorial.
3. Canvas kurssi.
4. Esimerkkikoodeja.

Css3 vinkkejä

Joskus voit haluta divisi, taulukkosi tai kuvasi reunoja hieman pyöreämmäksi että ne näyttäisivät huolitellummilta sekä muutenkin paremmalta. Väkerrä silloin tyylitiedostoon am. koodi:

css malli
.malli2
{margin: 2% auto;
width: 600px;
height: 600px;
background-color: #ff0000;
-moz-border-radius: 3em;
border-radius: 3em;}

Punainen div.
Katso taulukkomalli: css3_malli2.php

Liikkuvia kuvia CSS llä: css3_malli.php

(Toimii: Firefox 20 / IE 10 llä.
Päiväyksellä 02.01.2013
Esim. IE8, IE9 eivät osaa näyttää css movia ;=)

Ristisanakuva jonka reunoja pyöristetty; 33em;
fontinkoko määreellä jolloin kuva tulee täysin pyöreäksi.

.img_malli, .a img_malli
{ border: 1px;
border-color: #ff0000;
border-style:dotted;
-moz-border-radius: 33em;
border-radius: 33em;}



Sivujesi tyylirakenteesta riippuu mihin tagiin kohdistat divin, taulukon tai kuvien pyöristyksen.

1. Malli. Liikkuva väriä vaihtava pallo kiertelee usean kuvion ympärillä. Yhtään kuvaa tai javascriptiä ei tarvita koska uudet selaimet piirtävät hyvin css tyylit liikkuviksikin kuvioiksi.
2. Toinen malli jossa kuutio putoaa alas samalla pyörähtäen ja väriä vaihtaen.
3. Kolmas malli jossa väriä vaihtava kuutio liikkuu sivulla väriä vaihtaen.

Ristisanatehtävä sivuillesi

Katso helppo ristikko.html ja vaikeampi ristikko2.html jotka on tehty HotPotatoes ohjelmalla.

Tulossa

Katso esimerkkejä: http://www.sivustot.net/phweb/mopeti/retket.php,
php ja cgi palvelinohjelmointia ...

Puheen generoiminen tekstistä... (koneellasi oltava sap generaattori saadaksesi textin puheeksi)

Esimerkkinä: Puhuva tyttö

Tulossa myös JavaScript ja Java ohjelmointia web sivuilla, kuvankäsittely ja piirtäminen eri kuvankäsittely ohjelmilla, liikkuvien gif kuvien tekeminen PaintShop Pro Animation  Shop+ muilla ohjelmilla, omien elokuvien tekeminen ja muuttaminen webbiin sopiviksi, Java ja JavaScript valikot, toiminnalliset interaktiiviset websivut 3g-kännykkään + muita  neuvoja   .... kun ehdin.....

Lisätietoa

Lisätietoa sivunteosta, HTML, CSS-stä, JavaScriptistä, ym löydät esim. osoitteista:



HTML5 tietoutta: Html5 Sovellusalustana.pdf
Css tietoutta v 2006: Css - Tehokas Hallinta.pdf
Yleisohjeita: http://www.sivustot.net/e/10_kaskya.htm
Metadata: http://www.sivustot.net/e/meta.htm
Tekstimuotoja: http://www.sivustot.net/e/tekstimerkistoja.htm
Johdatus html-kieleen: http://www.helsinki.fi/atk/www/ohjeet/html.html
Ilmaisia Fontteja: http://www.1001freefonts.com/
Maksullisia Fontteja: http://www.fontpool.com/
Ilmaisia leikekuvia: https://openclipart.org/
CSS1 ja CSS2: http://koti.mbnet.fi/petepe/petepeweb.htm
CSS3 http://www.w3schools.com/css/default.asp
CSS animaatio työkaluja: http://enbeeone3.com/10-best-css-animation -tools-and-frameworks-for-web-designers/
+G WebDewelopers: https://plus.google.com/communities /114175980151299757659
jquery piirtäminen: http://lcdsantos.github.io/jquery-drawsvg/
JavaScript: http://www.jsmadeeasy.com/about.htm
MSDN Library https://msdn.microsoft.com/en-us/library/ms310241
M$ Visual Studio https://msdn.microsoft.com/en-us/library/ms310241
Evästeistä: http://www.cgi101.com/book/ch17/
Javan päivitys http://www.sivustot.net/java_paiv.php
Komentorivityökaluja http://sivustot.net/Pekka/opas/komrivtyka.php