Alku saattaa tuntua vaikealta mutta takaan että opit kaiken tarvittavan saadaksesi aikaan julkaistavan näköisen sivun.
Olen julkaissut tuhansia sivuja useita vuosia ennen kosketusnäytöllisten kännyjen ilmaantumisen 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 käyttää! Älä käytä mitään Internet Exploreria enää!
<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
Esimerkkejä siirto menetelmistä:
|
HyperText Transfer Protocol (hyperteksti siirto protokolla) |
|
File Transfer Protocol (tiedosto siirto protokolla) |
|
Pop & Imap Protocol (+ muut sähköposti protokollat) |
|
tapa jolla viitataan omassa tietokoneessa olevaan tiedostoon |
|
Secure Shell (turvattu tiedonsiirto protokolla) |
|
HyperText Transfer Protocol Secure (HTTP-protokollan suojattu versio) |
|
Instant Messenger (Internetin pikaviestipalvelu) |
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... |
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"> |
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.
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ä.
|
|
< | < |
> | > |
& | & |
" | " |
å | å |
ä | ä |
ö | ö |
Å | Å |
Ä | Ä |
Ö | Ö |
© | © |
Lisää | Erikoismerkit Merkit |
Koodi:
Äidilläni on <span style="color:blue">siniset</span> silmät.
Tulos:Äidilläni on siniset silmät.
<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>
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="https://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="https://sivustot.net/Pekka/fractals/Lapset_1.wmv" autostart="false" designtimesp='5311' loop="false" OBJECT
<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="https://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="https://sivustot.net/Pekka/fractals/Lapset_1.wmv" autostart="false"designtimesp='5311' loop="false"> </embed>
</object>
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.
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.
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.
Tallenna koko koodi: tästä ja katso miltä näyttää 306 kuvan Ankkoja esitys / by Kaj Stenvall.
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. |
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ä.
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/kansioonMalliksi 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 luominenAvaa notepad tai 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 tallennusTiedostojen 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ä
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"> </div>
Vektorigrafiikka on tietokonegrafiikkaa, joka perustuu koordinaatistoon sidottuihin objekteihin, kuten suoriin, monikulmioihin eli polygoneihin, ympyröihin, kaariin jne. Objektien muodot ja ominaisuudet esitetään koordinaatein sekä matemaattisin funktioin.
Tämä mahdollistaa sen, että vektorigrafiikalla luodun kuvan kokoa voidaan muuttaa (skaalata) ilman, että kuvasta tulee rakeinen kuten bittikarttakuvasta suurennettaessa,
sekä sen, että kuvan muotoa voidaan muuttaa: esimerkiksi kiertää (rotaatio) koordinaatistossa.
Vektorigrafiikka esimerkki: Kädet jotka piirretään yhdellä viivalla. Tutki kadet.html sivun svg sekä draw.css koodia niin pääset paremmin jyvälle 😛
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 {max-width: 99%; 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: 5px; color:#000; text-decoration: none; background-color: #f5f5dc; border: solid #cbcbcb 2px 2px 0px 0px; -moz-border-radius: .5em; border-radius: .5em;} #Tumma, #Tumma a:hover { padding: 5px; color: white; text-decoration: none; background-color: #000; border: solid #cbcbcb 2px 2px 0px 0px; -moz-border-radius: .4em; border-radius: .4em;} .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, table {background-color: #f5f5dc; color: blue; -moz-border-radius: .8em; border-radius: .8em; max-width: 98%; /* 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: 98%; background-color: #f5f5dc; color: blue; border: 1px; -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: 98%; /* 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 {width: 50%; padding: 7px; /* 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: 10pt; background-color: #eeeeee; } .td2 {width: 50%; padding: 7px; 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; font-size: 10pt; background-color: #e1e1e1; } .td3 {width: 70%; padding: 7px; 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; font-size: 10pt; background-color: #e1e1e1; } 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: 1% auto; 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, #000 ; 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-color: #ffecec; } .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; } 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;} /* tabletit & älyttomat kannyt SIIS PIENET NÄYTÖT ALKAVAT */ @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: 99%; height: auto; padding: 1px !important; font-size: 1.06em;} .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: 96%; background-color: #f5f5dc; color: blue; border: 1px; -moz-border-radius: .8em; border-radius: .8em; padding: 8px; BORDER-RIGHT: #CECECE 0px solid; BORDER-TOP: #CECECE 2px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; VERTICAL-ALIGN: middle; BORDER-LEFT: #CECECE 2px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #CECECE 0px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; } } th { font: bold 9pt "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #fff; 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: #444444; } .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: #444444; } .td2 { border: 1px dotted; font-size: small; border-left: 1px dotted #C1DAD7; border-right: 1px dotted #C1DAD7; border-bottom: 1px dotted #C1DAD7; background-color: #444444; color: #fff; } .td3 {width: 96%; padding: 7px; 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; font-size: 10pt; background-color: #e1e1e1; }} /* PIENET NÄYTÖT LOPPUVAT */ .rotate:hover { animation: rotate 3s linear infinite; } @-moz-keyframes rotate { from{-moz-transform: rotate(0deg); } to {-moz-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); } /*Sivutyyli loppuu*/
HTML5 Uusia elementtejä, tageja ja lisätietoa:
<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
<input> elementin <type> atribuuttien uudet arvot:
Nämä html4 elementit on poistettu uudesta html5 stä.
ESIMERKKEJÄ
1. Labyrintti Peli.
2. Html5 Canvas Tutorial.
3. Canvas kurssi.
4. Esimerkkikoodeja.
CSS malli |
---|
.malli2 {margin: 2% auto; width: 600px; height: 600px; background-color: #ff0000; -moz-border-radius: 3em; border-radius: 3em;}
Punainen div. |
Ristisanakuva jonka reunoja pyöristetty; 33em; fontinkoko määreellä jolloin kuva tulee täysin pyöreäksi. |
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/ |
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. |
-Canvas -.js -CSS esimerkki: |
Lentäviä esineitä Canvaksen päällä |
CSS animaatio: |
|
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 |