Pieni perusopas html, html5 sekä css3 tyylillä tekemiseen

Valikot ylhäällä vihreänä ja aika piilossa, hivuta hiiruasi ihan ylös.

Taustan valinta: Vaalea » Tumma »

Oppimisen vuoksi koodini

koodin kopiointi sallittua sekä oppimisenkin vuoksi suositeltavaa.

HTML - merkkikielen rakenne

Alku saattaa tuntua vaikealta mutta takaan että opit kaiken tarvittavan saadaksesi aikaan julkaistavan näköisen sivun.
Olen julkaissut sivuja n 19 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ö. Määreet 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 Saa enää käyttää !

Peruskoodit

Html-dokumentti eli nettisivu koostuu muutamasta perusosasta: header, meta, 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
	Välilyönti, lisää tilaa seuraavaan sanaan.
<h1></h1>	Ylimmän tason otsikon aloittava ja lopettava koodi. Otsikkotasoja on kaikkiaan kuusi ( h1 – h6 ).
	Kaikki perusmerkit

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. Linkki ei aina vie sinne mitä lupaa joten AINA VAROVAISENA NETISSÄ !

Voit ladata ja laittaa linkkejä joista löytyy: elokuvia, iframe-elokuvia ja tiedostoja, liikkuvia ja liikkumattomia kuvia
^{(ico,img,png,gif,jpg,jpeg,webp,tiff,piff,ani,bmp,cur,pbm,ym)} ,PowerPoint esityksiä, text ja Word dokumentteja, pdf documentteja, ~~Flash,~~ suoritettavia: mm. exe tiedostoja joissa voi piillä vaara! ja pahimpina 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 kun hiiri on 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 (ankkuri) ja sen tärkeimmät määreet ovat name (sivun sisäinen ankkuri) ja href (kohdedokumentin URL).

Linkki tyylitiedostoon jota sivu noudattaa. Aseta <head> osioon.

<a href="http://www.sivustot.net/css/style.css">Eräs tyylitiedostoni
Tutki tyyyliä ja varsinkin suurenmoista ohjelmaa tarkasti jakamallani ja jo vaikeasti saatavilla olavaan. TopStyle5 ilmaisohjelma Megan pilvestäni.
Lataus 100% turvallinen!

Linkki toiselle www-sivulle

<a href="http://www.sivustot.net/e/">Eräs sivuni</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öpostiohjelmasi jos olet käyttöjärjestelmäsi siten säätänyt.

Erikoismerkit

Jotta erikoismerkit näkyisivät oikein kaikissa selaimissa, kirjoitetaan ne käyttäen seuraavassa taulukossa olevia koodeja:

Merkki	Koodi
<	<
>	>
&	&
"	"
å	å
ä	ä
ö	ö
Å	Å
Ä	Ä
Ö	Ö
©	©
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> joita näkyy tällä vaalealla sivulla vihreänä kappaleiden välissä.

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 jossa käytän pallukoina kuvia:

Käyttöjärjestelmiä ovat esim.

DOS
UNIX
Windows
Linux

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ä tai kuvia:

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 myynti</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, Z-index 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ä:

Korkeus ja leveysmääritykset ( esim width: 962px; height: 212px; tai prosentteina)
Position määritykset ( static, relative, absolute, fixed )
z - index määritykset eli tason arvo jolla päällekkäiset divit näkyvät ( 1- esim. 10000 )
Taustavärit ( esim. background-color: #4BFFBF" )
layerin id numeroinnit ( 1- n )
Visbility ( visible, hidden ) tai display (tällä on useampi tarke)

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. Vierityspalkkien värittäjä EI toimi enään VBSCRIPT in takia

Sen sijaan näpytä headiin vaikka alla oleva tyylilisä jolla voit ilahduttaa Brave, Chrome, Safari ja Opera selainten käyttäjiä! EI toimi: IE, Firefox selaimilla!
PS. me vanhemmat ihmiset emme välttämättä pidä ylikapeista harmahkoista vierityspalkeista joten käytä harkiten!

<style>
/* Leveys. HOKS 1. HUOMAA SUURI KOKO! MUUTA HALUAMAKSESI */
::-webkit-scrollbar {width: 30px;}

/* Nauha */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 8px;}
 
/* Käsittely */
::-webkit-scrollbar-thumb {background: #ff0000; border-radius: 8px; }

/* Hiiripäällä */
::-webkit-scrollbar-thumb:hover {background: #b30000; }
</style>

TAI luo CSS koodi joka toimii myös EDGELLÄ muttei FIREFOXILLA ja voit värittää vierityspalkkiasi millaiseksi haluat:

<style>
html {--scrollbarBG: #CFD8DC; --thumbBG: #90A4AE; }
body::-webkit-scrollbar {width: 11px; }
body {scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); }
body::-webkit-scrollbar-track {background: var(--scrollbarBG);}
body::-webkit-scrollbar-thumb {background-color: var(--thumbBG); border-radius: 6px;
  border: 3px solid var(--scrollbarBG);}

html {background: lightgrey; overflow: hidden; }
body {height: 100vh; background: whitesmoke; overflow-y: auto; max-width: 310px; margin: 0 auto; padding: 2rem;
font: 100%/1.4 serif; border: 1px solid rgba(0, 0, 0, 0.25) }
p {margin: 0 0 1.5em; }
* {box-sizing: border-box;}
</style>

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">

<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>

</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¹⁾ 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ää 306 kuvan Ankkoja esitys / by Kaj Stenvall.

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ä:

/*Tyhjennä lomake-tarkistus*/

function Tyhjennys(form)
{
var tyhj=form.value;

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

}

/*Lomakkeen kenttien varsinainen tarkistus*/

function Laheta(form)
{

var Etunimi=form.Etunimi.value;

if(Etunimi.length<2)
{
alert("Et antanut etunimeäsi!");
form.Etunimi.focus();
return false;
}

var Sukunimi=form.Sukunimi.value;

if(Sukunimi.length<3)
{
alert("Et antanut sukunimeäsi!");
form.Sukunimi.focus();
return false;
}

if(form.Email.value.indexOf('@', 0) == -1)
{
alert("Et antanut sähköpostiosoitettasi
tai se on virheellinen!");
form.Email.focus();
return false;
}

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;
}

/*Radio-painikkeiden tarkistus*/

var intVastaus=-1;

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

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

if(intVastaus==-1){
alert("Et valinnut vastataanko palautteeseesi!");
return false;
}

/*Varmistus-koodin tarkistus*/

var koodi=form.koodi.value;

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

}

/*Tekstikentän pit. tarkist. ja näyttäminen*/

function Tarkistamerkit(form) 
{
var maxpituus=1000;

var Teksti=form.Teksti.value;

var Merkkejayhteensa=Teksti.length;

form.Merkkejajaljella.value =
maxpituus - Merkkejayhteensa;

}

Sivu päivitetty: 15.06.2022 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(); ?>

Irtoteksti ( < -- Klikkaa sinisestä linkistä uuteen välilehteen. Tutki tekstiä ja tyyliä, kopioi koodi ja laita hauska efekti sivuillesi :=)

Pomppiva aaltoileva teksti ( < -- Klikkaa sinisestä linkistä uuteen välilehteen. Tutki ja kopioi koodi ja laita hauska efekti sivuillesi. Muista tyyli jolla saat: värit, varjon, fontin ym. :=)

Väriä vaihtava teksti esimerkki

css KOODI
@keyframes color-change {
  0% {color: blue;}
  10% {color: #8e44ad;}
  20% {color: #1abc9c;}
  30% {color: #d35400;}
  40% {color: blue;}
  50% {color: #34495e;}
  60% {color: blue;}
  70% {color: #2980b9;}
  80% {color: #f1c40f;}
  90% {color: #2980b9;}
  100% {color: pink;} }
@-webkit-keyframes color-change {
  0% {color: blue;}
  10% {color: #8e44ad;}
  20% {color: #1abc9c;}
  30% {color: #d35400;}
  40% {color: blue;}
  50% {color: #34495e;}
  60% {color: blue;}
  70% {color: #2980b9;}
  80% {color: #f1c40f;}
  90% {color: #2980b9;}
  100% {color: pink;} }
#jokutxt {animation: color-change 20s;
animation-iteration-count: infinite;
font-family: Calibri, Verdana, Arial,
sans-serif; font-weight:600;
font-size:18pt; font-style:italic;
margin: 20px 0% 0% 1%;
text-decoration:none;}
<div id="jokutxt">
LINKEISTÄ LÖYDÄT MIELENKIINTOISIA SIVUJA.
TUTUSTU RAUHASSA ! </div>

TÄMÄ TEKSTI VAIHTAA VÄRIÄ 10 KERTAA AJASSA 20 SEKUNTTIA. VOIT ITSE MÄÄRÄTÄ: VÄRIT, AJAN, FONTIN YM.

Kuvien teko sivuille ilman kuvia

<![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 !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 vaalean version tyylitiedosto

@font-face {
  font-family: 'icomoon';
  src: url("../../fonts/icomoon/icomoon.eot");
  src: url("../../fonts/icomoon/icomoon.eot") format("embedded-opentype"), url("../../fonts/icomoon/icomoon.ttf") format("truetype"), url("../../fonts/icomoon/icomoon.woff") format("woff"), url("../fonts/icomoon/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;}
  
body {margin: 20px 10px 20px 10px;
	font-size: 1em;
	font-family: verdana, arial, times new roman, sans-serif;
	position: relative;
}

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

/*Alla sivun tausta ja tekstinväri muunnosnapit*/
#default, #default a:hover { padding: 3px; color: white; text-decoration: none; background-color: #929292; border: solid #cbcbcb 2px 2px 0px 0px; -moz-border-radius: .5em;
border-radius: .5em;}
#Tumma, #Tumma a:hover { padding: 3px; color: white; text-decoration: none; background-color: #929292; border: solid #cbcbcb 2px 2px 0px 0px; -moz-border-radius: .5em; border-radius: .5em;}

.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;}

pre {background-color: #f5f5dc; color: blue; -moz-border-radius: .8em; border-radius: .8em;
padding: 8px;}

textarea, input{background-color: #f5f5dc; color: blue;
border: 1px; -moz-border-radius: .8em; border-radius: .8em;
padding: 8px;}
	
 /* tabletit & älyttomat kannyt*/
@media screen and (max-width: 959px){
body { max-width: 99.5%;}
.scrollToTop {position: fixed; width:30px; height:30px; background: whiteSmoke; color: #444;
bottom:40px; right:5px; display:none; background: url('up_sm.png') no-repeat 0px 0px;} /* PIENEMPI NUOLI */
.c4 { /*kuvat ja kertomus, keskelle*/ max-width: auto; height: auto; padding: 2px !important; font-size: 1.06em; clear: both;}
.yliv, pre, table {
	max-width: 500px;                      /* specify width  */
	white-space: pre-wrap;                 /* CSS3 browsers  */
	white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
	white-space: -pre-wrap;                /* Opera 4 thru 6 */
	white-space: -o-pre-wrap;              /* Opera 7 and up */
	word-wrap: break-word;                 /* IE 5.5+ and up */
	/* overflow-x: auto; */                /* Firefox 2 only */
	/* width: 99%; */		       /* only if needed */ }
	textarea, input{max-width: 90%;
background-color: #f5f5dc; color: blue;
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 {
	max-width: 35&;                        /* specify width  */
	white-space: pre-wrap;                 /* CSS3 browsers  */
	white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
	white-space: -pre-wrap;                /* Opera 4 thru 6 */
	white-space: -o-pre-wrap;              /* Opera 7 and up */
	word-wrap: break-word;                 /* IE 5.5+ and up */
	/* overflow-x: auto; */                /* Firefox 2 only */
	/* width: 99%; */		       /* only if needed */
	border: 1px dotted;
	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;}

#img18  {display:inline-block; vertical-align:middle; border: 0px; -moz-border-radius: .5em; border-radius: .5em; margin: 0px auto 0px 5px !important;}

#img19 {text-decoration: none !important; border: 0px; -moz-border-radius: .5em; border-radius: .5em;
margin: -10px auto 0px 0px !important;}

p::first-letter {text-transform: uppercase;
  font-size: 118%; 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 12px 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.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; }

.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;
}

.r {color: #f00;}
#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: 1.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: 60px;}

.rotate:hover {
     -webkit-animation: rotate 3s linear infinite;
}

@-moz-keyframes rotate {
    from{-webkit-transform: rotate(0deg); }
    to  {-webkit-transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
    from{-webkit-transform: rotate(0deg); }
    to  {-webkit-transform: rotate(360deg); }
}

.social {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  width: 100%;
  outline: none;
  text-decoration: none;
}

.social li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.social li a {
  font-size: 33px;
  display: table;
  width: 45px;
  height: 45px;
  margin: 0px;
  outline: none;
  text-decoration: none;
}

.social li a i {margin: auto; /*Ikonin Keskitys */
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.social li a:hover, .social li a:active, .social li a:focus {
  text-decoration: none;
  border-bottom: none;
}

.social li a.social-box {
  background: #0000ff;
  color: #fff;
}

.social li a.social-circle {
  background: #0000ff;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.social li a:hover {
  background: #393e46 !important;
}

.social.social-box a {
  background: #0000ff;
  color: #fff;
  filter:drop-shadow(6px 6px 8px gray);
}

.social.social-circle a {
  background: #0000ff;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  filter:drop-shadow(6px 6px 8px gray);
}

HTML5-

HTML 5 on uusin standardi html stä (v.2012). Julkaistiin virallisesti 28. lokakuuta 2014.
Html5 ssa muotoilun perusvälineenä CSS ja merkittävänä parannuksena uusien tekniikoidensa ansiosta voidaan tehdä hyvin erilaisilla laitteilla toimiviksi.
Tämä on niiden keskeinen etu kilpailussa eri laitteille (mm. älypuhelimille ja tableteille) kehitettyjen ns. natiivien sovellusten kanssa.
Se on suunniteltu järjestelmäriippumattomaksi, joten sinun ei tarvitse ajaa jotain tiettyä käyttöjärjestelmää.

Katso esimerkki yhdestä tekemästäni html5 kategorian sivusta.

Muutoksena esim se että 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ä tyypitys tai lopetustageja kuten strict tyyleillä on käytettävä: <link rel="stylesheet" href="tyyli.css" type=text/css />
2. Älä tyypitä ulkoisia css, inc, php, javascipt tiedostoja. Oikea merkintä esim: .js lle <script src="styleswitcher.js">

Taustanvärin vaihtimen scripti. Kätevä tietyissä valaistus olosuhteissa. Voit tutustua tummaan näkymään sivun yläosasta.

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ä:

Canvas elementillä toteutetut liikkumattomat tai liikkuvat animaatiot, piirrokset, taustat, taustakuvat.
Paremmin toimiva vuorovaikutus lomakkeilla, formeilla, iframeilla.
Laatikoiden reunojen, taulukoiden, kuvien, iframen reunojen pyöristyksiä, pyöreitä ja soikeita kuvia ja iframeja.
HTML5 muistissa tehtävä siirto, unohda evästeet.
Tiedon lisääminen metatietoon erilaisella, paremmalla tavalla.
Liikkuvia, pysyviä tai jotain käskyä seuraavia; neliöitä, pallloja, kuutioita, soikioita, epäkkäitä, mitä tahansa 2 tai 3 ulotteisia muotoja.
Selainpohjaisia piirtämistoimenpiteitä.
Documenttioliomallipohjainen ( DOM ) ajattelu otettava ohjenuoraksi ja lakkaa ajattelemasta html mallia.
Sovellustasi voi käyttää offlinessä.
Liikkuvia tai paikallaanpysyviä; palloja, kuutioita, valikoita, textiä.
Tiedon ja palvelujen tarjonta käyttäjän sijainnin mukaan.
Videoiden ja äänen upottaminen sekä niiden upottaminen sivujen muuhun toiminnallisuuteen.
HTML5 on laaja keskeneräinen ja vielä kauan muuttuva keskeneräinen standardi.
Mielikuvitushan se suurin este sitten on kun html5 , js ja css3 n ihmeelliseen maailmaan viitsii kunnolla tutustua ja jo osaakin sitä jonninverran...
Linkki lisätietoon: http://www.w3schools.com/html/html5_new_elements.asp

HTML5 Uusia elementtejä, tageja ja lisätietoa:

<video> ja <audio> multimedialle. Molemmat tarjoavat API n joten sivujen laatijat voivat scriptata oman käyttöliittymän, on myös tapa liipaista käyttöliittymä käyttäjän selaimen tai sijainin mukaan. <source> elementtejä käytetään yhdessä näiden kanssa, jos on olemassa useita erityyppisiä mediavirtoja saatavilla.
<track> tarjoaa textiraitoja <video> elementtiin.
<embedd> käytetään plugin hakemiseen esim videolle.
<markk> textin esim alleviivaus tai värjäys, merkitys toisessa yhteydessä.
<progress> tehtävän ajo, kuten lataus tai kun suoritetaan sarja erillisiä tehtäviä.
<meter> mittaus esim levyn käyttö.
<time> päiväys ja/tai kellonaika.
WHATWG HTML <data>, sisällön selvennös, koneellisesti luettava arvo.
WHATWG HTML <dialog> näyttää valintaikkunan.
<ruby>, <rt>, ja <rp> ruby merkinnät.
<bdi> span teksti, joka eristetty ympäristöstään tekstin muotoilulla.
<wbr> rivinvaihto mahdollisuus.
<canvas> luo dynamista grafiikkaa lennosta kuviin ja peleihin.
<command> luo komennon johon käyttäjä voi vedota.
<details> lisätietoja tai tarkastuksia, jotka käyttäjä voi saada käyttöönsä.
<summary> yhteenveto, legenda tai otsikko.

<datalist> yhdessä uuden <list> kanssa <input> tekee valintaboxin:

<input list="browsers"> <datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>

<keygen> ohjaus avainparin luontiin. MALLI
<output> joitain ulostulon scriptejä.
Kaikki uudet tagit

<input> elementin <type> atribuuttien uudet arvot:

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

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

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.

Sivun taustavärin jatkuva vaihtuminen | Katso malli

Jos haluat että sivusi taustaväri vaihtuu portaattomasti ja lineaarisesti niin laita styleen keyframella taustaa vaihtava koodi:

body {-webkit-animation: colorchange 25s infinite; animation: colorchange 25s infinite;}
@-webkit-keyframes colorchange {0% {background: #7fa83c;}
25% {background: #e6ebef;}
50% {background: #1c87c9;}
75% {background: #26201c;}
100% {background: #d0e2bc;}}
@keyframes colorchange {0% {background: #7fa83c;}
25% {background: #e6ebef;}
50% {background: #1c87c9;}
75% {background: #26201c;}
100% {background: #d0e2bc;}}

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 älykännykkään + muita neuvoja .... kun ehdin.....

Lisätietoa -> hiiri harmaan laatikon / otsikon päälle vasemmalle niin näet pikaselostuksen sisällöstä.

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

Html Tagit Suomeksi	Html Tagit (Voit myös tulostaa sivun)
HTML5 tietoutta:	Html5 Sovellusalustana
Css tietoutta	Css - Tehokas Hallinta
Perusohjeita:	10 käskyä
CSS popup ikkuna:	Katso myös lähdekoodi!
Metadata:	Metatietoa
Tekstimuotoja:	Tekstimerkistöjä
Johdatus html-kieleen:	Html - opas
Html-Opas:	Opas/
Koodarin miljoonalaatikko	https://codepen.io/
CSS menu esimerkki 1	Css menu
CSS menuja. 200 erilaista	"200 Css menua
CSS1 ja CSS2:	Tietoa CSS stä
CSS3	CSS 3 tietoa
CSS3 Esimerkkejä	CSS Esimerkkejä
CSS - Tricks	CSS Trikkejä
CSS animaatio työkaluja:	CSS Animaatio TK.
CSS animaatioita:	CSS Animaatioita
Java Scriptejä:	JS. Dynamicdrive
Java Scriptejä:	JS. Scriptit
Java Scipt opastusta:	w3schools .js tietoa
jquery piirtäminen:	Jquery draws
Ilmaisia Fontteja:	1001 free fonts
Maksullisia Fontteja:	Fontpool
Ilmaisia leikekuvia:	Open clipart
+G WebDewelopers:	Plus google
MSDN Library	Msdn microsoft
M$ Visual Studio	Visual Studio kirjasto
Evästeistä:	Evästeistä
Javan päivitys	Java päivitys
CMD komentorivi koodeja	Cmd komennot
Komentorivityökaluja	Vähemmän Cmd komentoja

Tehty ensimmäisen kerran 03.01.04
Updated: 15.06.22 at more mobile friendly
455456 sivunlatausta 29.8.05 lähtien
Kun haluat lisätietoa:

Klikkaa alta @ mailia