Pieni perusopas html-sivun tekemiseen

Valikot ylhäällä vihreänä ja aika piilossa, hivuta hitaasti hiiruasi sinne ylöspäin.

Kun haluat kehitysehdotuksia: esim html5 canvas asiasi tarkennuksiin Klikkaa palautelomakkeelle ja kirjoita asiasi.
Oppimisen vuoksi koodin kopiointi sallittu ja erittäin suositeltavaa.

HTML-kielen rakenne

Alku saattaa tuntua vaikealta mutta takaan että opit kaiken tarvittavan saadaksesi aikaan julkaistavan näköisen sivun.

WWW-sivut kirjoitetaan HTML-kielellä (HTML = HyperText Markup Language). html-kielinen dokumentti tallennetaan tekstimuodossa (ns. ASCII-muoto). Tiedoston voi tallentaa haluamallaan nimellä, mutta

Tarkentimen pitää olla joko: htm, html, wml, xml, xhtml, php, asp tai asm pääte

Pääsivu tallennetaan nimellä: index.htm, index.html, index.shtml, index.php, index.php3, index.php4, index.wml, index.xhtml, index.xhml, index.asp, index.asm, default.html, default.htm, default.shtml, default.php, default.php3, default.php4, default.wml, default.xhtml tai default.xml. jotka ajavat toisilla palvelimilla saman asian kuin index etuliitteiset alut ... riippuen myös palvelimesi tukemista: php / cgi/.htaccess/ ym toiminnallisuuksista ja mahdollisuuksista.

(Huomaa, että edellämainitut ja kaikki tiedostonimet pitää kirjoittaa aina pienellä fontilla.)

Etusivusinimi: index.html on erillainen nimi kuin index.HTML, INDEX.html, InDeX.hTmL tai INDEX.HTML + muut variaatiot, eikä mitään väärin nimettyä etusivua tai muutakaan sivua löydy selaimellasi vaikka sen palvelimellesi olet erilaisella nimellä kun sitä haet, tallentanutkin )

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 absoluuttisesti ja ehdottomasti oikeinkirjoitetun osoitteen ....

html-kieli sisältää joukon koodeja (=tageja), joiden avulla kuvataan sivun rakenne. Koodit kirjoitetaan < ja > -merkkien väliin. Monet koodit esiintyvät pareittain (aloittava koodi ja vastaava lopettava koodi).

Käytä aina pieniä kirjaimia tageja ja 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" määre="arvo"> ks esim 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ä).

Lopettava koodi on muotoa: </koodi> huomaa koodin lopettava / vinoviiva ...

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

Käytä silloin AINA </p> tagia !

Peruskoodit

html-dokumentti koostuu kahdesta perusosasta: otsikko-osa ja varsinainen runko-osa.

<html>   ja   </html>     Sivun aloittava ja lopettava koodi.

<head> ja    </head>     Otsikko-osan aloittava ja lopettava koodi.

<title> ja    </title>     Selaimen ikkunassa näkyvän otsikon aloittava ja lopettava koodi.

<body>   ja   </body>     Varsinaisen rungon aloittava ja lopettava koodi.

<p> ja </p> Uusi kappale aloitetaan koodilla <p> ja lopetetaan koodilla </p>.

Jos kappaletta ei lopeteta, niin kappale loppuu, kun seuraava alkaa. Vastaa ms offisen enteriä ja open officen samaa.

<br> ja </br>Rivinvaihto

<h1> ja </h1> Ylimmän tason otsikon aloittava ja lopettava koodi. Otsikkotasoja on kaikkiaan kuusi (h1 – h6).

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

sovelluskerros	HTTP, SMTP, POP, IMAP, FTP, IRC, Telnet, SIP, RTSP, RTP, SNMP ...
kuljetuskerros	TCP, UDP, SCTP, DCCP (tukena: DNS, OSPF, BGP)
verkkokerros	IP, ARP, DHCP, ICMP, IGMP IPv6, IPsec, Mobile IPv6, SSM...

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

ftp://kayttäjanimi:salasana@palvelin.net ja jos kokeilit linkkiä huomasit että mistä tahansa kirjoituksesta voidaan luoda linkki minne tahansa tiedostoon tai sivulle. Joten linkki ei aina 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 nykyään pääse muualle kuin ilmoitukseen: Sivua ei voi näyttää
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 aukeamistyylit

http://netikka.net/herala/ target="_blank"	aukeaa uuteen ikkunaan www nkin puuttuessa	<ilman www tunnusta>
http://www.netikka.net/herala/ target="_top"	aukeaa saman selaimen samaan ikkunaan	<target="_top">
http://www.netikka.net/herala/ target="_parent"	aukeaa ja korvaa sivun kehyksettömään ikkunaan	<target="_parent">
http://www.netikka.net/herala/ target="_blank"	aukeaa uuteen ikkunaan	<target="_blank">
http://www.netikka.net/herala/ target="_self"	aukeaa samaan selaimeen	<target="_self">

koska on kyse sivusta ilman kehyksiä sen on auettava joko:

uuteen: samaan ikkunaan: _top tai kokonaan uuteen: _blank tai korvaa sivu: _parent ikkunaan tai samaan selaimen kehykseen: _self.

Tutustu asiaan kurkkaamalla ylläolevien kohtien koodeihin.
"_self" ja "ilman tunnusta" avaavat siihen kehykseen mistä niitä kutsuttiin.

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

<img src = "kuvan url" alt tai title="teksti, joka näytetään kuvassa">

esim. jos valokuvani on tallennettu tiedostoon omakuva.jpg samaan hakemistoon kuin index.html-tiedosto, niin lisään sen kotisivulle koodilla:
<img src = "omakuva.jpg" alt="Oma kuvani parin vuoden takaa">

Kuvat pitää tallentaa joko jpg tai gif muodossa. Kuvan tarkkuuden pitäisi olla enintään 72 dpi - 150 dpi eli 72-150 pistettä tuumalle.

Määreillä width ja height voit määritellä kuvan koon pikseleinä niin kuva aukeaa nopeammin:

Kuva linkistä:

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

Linkki kuvasta:

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

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

Jolloin se aukeaa uuteen ikkunaan.
Kiitokset Leo ;=)

Linkit

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

Linkki toiselle www-sivulle

<a href="http://www.netikka.net/herala/">Kotisivulleni</a>

Linkit saman tekstin sisällä

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.

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

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

Sähköpostilinkki

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

Erikoismerkit

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

Merkki	Koodi
<	<
>	>
&	&
"	"
å	å
ä	ä
ö	ö
Å	Å
Ä	Ä
Ö	Ö
©	©
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>

Pakollinen rivinvaihto: <br>

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

Luettelo kirjoitetaan HTML-kielellä seuraavasti:

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

Käyttöjärjestelmiä ovat esim.

1 DOS
2 UNIX
3 Windows
4 Linux

Luettelo kirjoitetaan HTML-kielellä seuraavasti:

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

Taulukot

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

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

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

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

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

</body>
</html>

1 malli

Diveistä ja layereista

Div / layer esimerkistä näet z-indexin merkityksen käytännössä. Divisioona esimerkissä on 5 eri diviä vaikka näet ne neljänä, 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 oheisella generoinnilla joka toimii valitettavasti vain IE selaimilla

Vierityspalkkien värittäjä

Musiikin tai elokuvan lisääminen sivuille

Kun haluat että musiikki alkaa soimaan heti sivun auetessa käytä alla olevaa koodia joka laittaa sivullesi nappulan josta musan saa myös suljettua.

Koodi:

<EMBED autostart="false" width="127" height="26" src="http://sivustot.net/Pekka/fractals/Lapset_1.wmv">

Tässä kyseessä on musiikkivideoesitys. Muista ladata musiikkitiedosto ja laittaa tarkka osoite kansioon jossa musiikki sijaitsee...

Olen säätänyt alla olevan nappulan toimimaan siten että autostart ei toimi jottei musiikki häiritse opiskeluasi....
Ei toimi Firefoxissa ilman liitännäistä.

1.wmv

Linkki video esitykseen

Elokuvan lisääminen sivuille

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

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ää erästä aika hyvää ohjelmaa nimeltään SimpleCam

Ota huomioon että SimpleCam vie rajusti prosessorin resursseja ja että toimiakseen oikein prosessori pitää olla ~vajaa tai yli 3GHz/32/64/ pentti tai amd nopeus/väylän leveysluokkaa oleva tehoydin.

[double/{LÄHI tulevaisuuden:quatro/heksa/quinty/ ja minne asti päästäneenkään) ydin luokan prosessoreille nykypäivän kamera sovellukset ehkä ovat kevyempiä ja siten vähemmän resursseja (aikaa/tehoa) 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 ollaan SimpleCamin kanssa varovaisia. Nuukana miehenä ja cpu tani ( P4, 3.2GHz ) säästääkseni käytän SimpleCam ohjelmaa ainoastaan pyynnöstä.

Olen tehnyt siitä manuaalin tapaista ja sen löydät klikkaamalla tätä simple.php linkkiä

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

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 sekä nopea verkkoyhteys että viitseliäisyyttä noin 3 minuutin verran säätää simpleCam ohjelmaa sieppaamaan streaming 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ä........

Lomakkeen tarkistus JavaScriptillä

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

/*Huomautus, 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 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;

}

Sivua päivitetty viimeksi Scripti
Voit kopioida yllä esitetyn lomakkeen tarkistus-skriptin kokonaisuudessaan alla olevasta tekstikentästä:

/*Päivitetty viimeksi*/

var muokattu = new Date(document.lastModified);
var kuukausi = muokattu.getMonth() + 1;
var vuosi = muokattu.getFullYear();
var paiva = muokattu.getDate();
var tunnit = muokattu.getHours();
var minuutit = muokattu.getMinutes();

/* Lisätään minuuttien ja tuntien eteen 0, 
 * jos ne ovat alle 10 (esim. klo 12:1 --> 12:01) 
 */

if (minuutit < 10) {
minuutit = "0" + minuutit;
}

if (tunnit < 10) {
tunnit = "0" + tunnit;
}

/* Määritellään viikonpäivien nimet vastaamaan numeroita */
 
var viikonpaiva = muokattu.getDay();
var viikonpaiva_pitka;

if (viikonpaiva == 1) {
viikonpaiva_pitka = "Maanantai";
} else if (viikonpaiva == 2) {
viikonpaiva_pitka = "Tiistai";
} else if (viikonpaiva == 3) {
viikonpaiva_pitka = "Keskiviikko";
} else if (viikonpaiva == 4) {
viikonpaiva_pitka = "Torstai";
} else if (viikonpaiva == 5) {
viikonpaiva_pitka = "Perjantai";
} else if (viikonpaiva == 6) {
viikonpaiva_pitka = "Lauantai";
} else if (viikonpaiva == 7) {
viikonpaiva_pitka = "Sunnuntai";
}

/* Tulostetaan tiedot ruudulle. */

document.write("<b>Sivua päivitetty viimeksi: </b>" + viikonpaiva_pitka + "na " + paiva + "." + kuukausi + "." + vuosi + " kello " + tunnit + ":" + minuutit);

//--></script>

Tai php llä:
Sivu päivitetty: 24.12.2011

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

Html sivun koodin saat näkyviin:

Mozilla Firefox;   hiiren oikealla... Show page source/Näytä sivun lähdekoodi
Crome;   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 eritellään enteri:iä painamalla esim.
käyttäjätunnus1:salasana käyttäjätunnus2:salasana

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(); ?>

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

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 suoraan koneellesi linkistä:
ilmainen TopStyle Lite 3.1. css tyylinteko-ohjelma ja katso sillä eräiden sivujeni style.css tiedostoa

Opettele käyttämään ohjelmaa ja sinulle aukeaa aivan oma ajanjaksosi tyylien ihmeellisestä maailmasta.
Hyvä opas Css n ja alkaa layereista: Petteri Perälä

Periytyminen ja valitsimet ... Valitsimet - syntaksi

Jos CSS-kieltä haluaa hyödyntää tehokkaammin ja monipuolisemmin, täytyy perehtyä nk. valitsinten hyödyntämiseen. Alla esitellään ensiksi kaikkien käytössä olevien valitsinten syntaksi, seuraavaksi tarkastelemme valitsinten toimivuutta eri selaimilla.

CSS1 ja CSS2 määrittelyn mukaiset valitsimet
Syntaksi	Tyyppi	Kuvaus
*	Universaali valitsin	Tyylisääntö kohdistuu kaikkiin elementteihin
E	Tyyppivalitsin	Tyylisääntö kohdistuu elementtiin E
E F	Jälkeläisvalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin F, jotka ovat elementin E jälkeläisiä (sisällä)
E>F	Lapsivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin F, joiden vanhempana on elementti E
E,F	Ryhmittäjä	Tyylisääntö kohdistuu elementteihin E ja F
E+F	Sisarusvalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin F, joita edeltää elementti E
E.a	Luokkavalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joiden class-attribuutilla on arvo a
E#a	Luokkavalitsin	Tyylisääntö kohdistuu elementtiin E, jonka id-attribuutilla on arvo a
E[a]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a (attribuutin nimestä ja arvosta riippumatta)
E[a="b"]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a ja attribuutin arvo on yhtä kuin b
E[a~="b"]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a (välilyönnillä erotettu arvojoukko) ja attribuutin arvo on yhtä kuin b.
E[a\|="b"]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a ja arvojoukko alkaa merkkijonolla b
E:after	Pseudoelementti	Elementtiä E seuraa sisältö, joka ilmoitetaan ominaisuudella content.
E:before	Pseudoelementti	Elementtiä E edeltää sisältö, joka ilmoitetaan ominaisuudella content.
E:first-letter	Pseudoelementti	Tyylisääntö kohdistuu elementin E ensimmäiseen kirjaimeen
E:first-line	Pseudoelementti	Tyylisääntö kohdistuu elementin E ensimmäiseen riviin
E:first-child	Pseudoluokka	Tyylisääntö kohdistuu elementin E ensimmäiseen jälkeläiseen (elementin sisällä)
E:link	Pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat vierailemattomia linkkejä. Vain a-elementti
E:visited	Pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat vierailtuja linkkejä. Vain a-elementti
E:lang(a)	Pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla lang-attribuutin arvo on a
E:focus	Dynaaminen pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on fokus (esim. lomakekenttä)
E:hover	Dynaaminen pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, joiden päällä hiiri on. IE6 ja vanhemmat: vain a-elementti
E:active	Dynaaminen pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat aktiivisia (esim. maalattu hiirellä)

Työn alla oleva CSS 3 määrittely lähes kaksinkertaistaa valitsinten lukumäärän. Monet selaimet, esim. Opera 9, sisältävät kokeellisen tuen osalle CSS 3 valitsimia.

Valitsinten toimivuus eri selaimilla

elementtivalitsin (E)
ryhmittelyvalitsin (E,F)
class-attribuuttivalitsin (E.a)
ID-attribuuttivalitsin (E#a)
Linkkeihin liittyvät pseudoluokat

Huom! ao. taulukossa "Ei toimi "(punainen ruksi) tarkoittaa, että valitsin ei toimi ollenkaan tai sen toiminnassa on huomattavia virheitä. "Toimii" (vihreä ruksi) tarkoittaa, että valitsin toimii virheettä tai sen toiminnassa on vähäisiä, lähinnä syntaksin tulkintaan liittyviä virheitä. Pseudoluokissa :active ja :hover tarkastelun lähtökohtana on ollut toimivuus vain linkki-elementillä a, muilla elementeillä tuki voi olla puutteellinen (etenkin IE6 ja vanhemmat).

Internet Explorerin markkinaosuus keväällä 2007: noin 70% selainmarkkinoista. IE6 on edelleen hallitseva selain noin 50% osuudella, IE7 noin 15% osuus. Gecko-pohjaisten selainten markkinaosuus keväällä 2007: noin 28% selainmarkkinoista. Firefox on hallitseva selain noin 25% osuudella, Safarin osuus noin 2%. Opera-pohjaisten selainten markkinaosuus keväällä 2007: noin 2% selainmarkkinoista. Opera 9.x on hallitseva versio. Operan markkinaosuus on todennäköisesti jonkun verran isompi, sillä jotkin sen versiot tunnistavat itsensä mm. IE:nä.

Internet Explorer						Gecko-pohjaiset selaimet ja muut					Opera
Ominaisuus	IE 4	IE 5	IE 5.5	IE 6	IE 7	NS 4.x	NS 6.x	FF 1.0	FF 2.x	Safari	Opera 5	Opera 6	Opera 7	Opera 8	Opera 9
*
E
E F
E,F
E > F
E + F
E.a
E#a
E [a]
E[a="b"]
E[a~="b"]
E[a\|="b"]
E:after
E:before
E:first-letter
E:first-line
E:first-child
E:lang(a)
E:link
E:visited
E:active
E:hover
E:focus

Ristisanatehtävä sivuillesi

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

Tulossa

Seuraavaksi tulossa php ja cgi palvelinohjelmointi ...

Puheen generoiminen tekstistä...

Esimerkkinä: Puhuva tyttö

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

Lisätietoa

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

Yleisohjeita:	http://www.netikka.net/herala/10_kaskya.htm
Metadata:	http://www.netikka.net/herala/meta.htm
Tekstimuotoja:	http://www.netikka.net/herala/tekstimerkistoja.htm
Johdatus html-kieleen:	http://www.helsinki.fi/atk/www/ohjeet/html.html
Hyvä perusopas:	Petri Vuorenmaa
HTML, CSS ja JavaScript:	http://koti.mbnet.fi/~merkka/
Tietoa fonteista:	http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml
Fontteja koneellesi:	http://www.fontit.net/parhaimmat.html
Lisää Fontteja:	http://www.fontpool.com/
Opas MM Dreamveawer ohjelmalle:	http://www.helsinki.fi/atk/oppaat/dreamweaver/
Flashin alkeet:	http://www.huikuri.com/flash/?pid=35
Pikku kuvia:	http://office.microsoft.com/clipart/default.aspx?lc=fi-fi&cag=1
FrontPage:	http://web01.microsoft.se/tips/fi/showtip.asp?tip=9314
CSS1 ja XHTML:	http://myy.helia.fi/~vanvu/html/html.html
CSS1 ja CSS2:	http://koti.mbnet.fi/petepe/petepeweb.htm
JavaScript:	http://www.jsmadeeasy.com/about.htm
VAP:	http://msdn.microsoft.com/library/?url=/library/
Evästeet:	http://www.cgi101.com/book/ch17/
.NET Development:	http://msdn.microsoft.com/library/default.asp
Web Development:	http://msdn.microsoft.com/library/default.asp
Javan päivitys	http://www.sivustot.net/java_paiv.php
Komentorivityökaluja	http://sivustot.net/Pekka/opas/komrivtyka.php

Tehty 03.01.04
Päivitetty viimeksi: 24-12-11
8443 sivun latausta 29.8.05 lähtien