Pieni perusopas html, html5 sekä css3 tyylillä tekemiseen Päivitetty: 16.06.17
Valikot ylhäälläujon vihreänä ja aika piilossa, hivuta hitaasti hiiruasi sinne ylöspäin.
Oppimisen vuoksi koodini kopiointion 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
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ä.
<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
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}
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)
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.
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:
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
Luettelot voivat olla järjestämättömiä tai järjestettyjä.
Tässä on esimerkki järjestämättömästä luettelosta:
Käyttöjärjestelmiä ovat esim.
DOS
UNIX
Windows
Linux
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>
Tässä 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)
Div / layer 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; )
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 )
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 toimi ainoastaan IE6 selaimilla.
Html5 sallii yksinkertaisen videon liittämiskoodin joka toimii kaikilla uusimmilla selaimilla.
<video width="800" height="600" controls>
<source src="https://www.dropbox.com/s/lxbkzvgskcimmxg/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. wanhoille selaimille.
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
<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.
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ä.
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 alla olevan kuvan päälle.
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*/
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;
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: 16.06.2017
Ja Php koodi:
<?php
echo "<b>Sivu päivitetty:</b> " . date ("d-m-y", getlastmod());
?>
Itse olen siirtynyt käyttämään lisäksi Captcha suojausta emailissa. Captcha = Completely Automated Public Turing test to tell Computers and Humans Apart.
Lataa 147kt captcha.zip ilmaiseksi pilvestäni, ja saat aloittaa sen säätämisen myös omille sivuillesi. Olen Suomentanut ja säätänyt kriittiset tiedostot joten sinun työsi on jo helpompaa.
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:
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ö
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: salattusivu ja salasanasi: munsalainensanani, muotoon:
salattusivu:$1$K9BEyTQ2$BEkEDzvYBXcGGbb9DnTcI. ] KOKEILE:
.passwd salasana generointi
( < -- Klikkaa sinisestä linkistä uuteen ikkunaan ) ja muista polku.php n koodi:
<?php echo getcwd(); ?>
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:
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ä:
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...
<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.
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.
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:
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.
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:
Toinen esimerkki
