BonnieR
26.04.2007, 20:58
Html - Opas
Tässä oppaassa opit Html-kielen alkeita. Tähän puuhaan sopii mainiosti
Muistio (Notepad). Html-kieli toimii erilaisten "Tagien" avulla esim. <html> </html>
Jos tagissa on / se tarkoittaa että se lopettaa jonkun aikaisemmin kirjoitetun tagin
Esim.
Aloitus tagi -----> <title> Html - Opas </title> <---- Lopetus tagi
Tageja:
<html> </html> Aloittaa ja lopettaa html-osan Dokumentissä.
<head></head> Näiden tagien sisään tulee dokumentin alkuosa.
<title> </title> Otsikko joka tulee yläpaneeliin Web-Selaimessa (Otsikko tulee tagien väliin). Itse suosin paria Tabulaattorin painamista Titleä ennen.(Menee keskemmälle)
<body></body> Kaikki jotka haluat muiden näkevän tulevat näiden tagien väliin.
(www.esimerkki.net) Linkki. Linkki teksti tulee kirjoittaa <a href> tagin ja </a> tagien väliin.
Esimerkki kuva.jpg Kuva.
Rivinvaihto
No siinä oli muutama.
1.Avaa muistio ja laita Dokumentin alkuun <html> ja loppuun </html>. Seuraavaksi
lisää <html> tagin alle <head> ja parin rivin päähän siitä </head> tagi.
Lisää <head> tagien "väliin" <title> ja </title> tagit näiden tagien väliin tulee siis otsikko.
Sitten laitetaan </head> tagin perään <body> ja siitä ~10 riviä alaspäin </body> tagi.
Oppaan lopussa on mallia. Tässä vaiheessa kannattaa tallentaa. Mene
Tiedosto -> Tallenna Nimellä ja sieltä vaihda tallennusmuoton kaikki tiedostot
ja tiedosto nimen perään .html esim. Html - Sivut.html. Kannattaa tehdä sivuille oma kansio jonnekkin.
Jatkossa voi tallentaa painamalla Ctrl + S. Jos haluat vaihtaa taustavärin se tapahtuu seuraavasti:
Lisää <body> tagiin bgcolor="Väri". "Väri" sanan tilalle luonnollisesti englannin kielinen väri esim.
<body bgcolor="Black">. Jos haluat lisätä taustakuvan se on hieman erilainen juttu.
Lataa kuva tietokoneellesi -> siirrä se kansioon johon tallensit sivusi -> <body backround="kuvasinimi.jpg>
HUOM!! Tiedostopääte pitää olla tagissa ja kuvan tulee olla samassa kansiossa missä sivusikin ovat!!!
2. Noniin sitten itse sivun rakenteluun. Ensinnäki Fontti kokoa voit vaihtaa tagilla
<font size = 1-7></font>(Oletus = 3) Kyseisellä fontti koolla kirjoitetuksi haluttava teksti pitää sijoittaa
<font> ja </font> tagien väliin. Html kieli ei hyväksy useampia välilyönnin painalluksia vaan vain yhden.
Tästä syystä välille on oma merkki ja jos tarve vaatii tekstin/kuvan/linkin voi keskittää tageilla <center> TEKSTI </center>
Sitten sinne font tagien väliin jotain liirum laarumia ja tallenna sivusi. Mene kansioon johon tallensit
sivut ja avaa ne. Wolaa! Sinun pitäisi nähdä teksti jonka kirjoitit ja mahdollisesti taustakuva/väri, jos asetit sellaisen.
Jos teet muutoksia sivuusi kun ne ovat auki Web-selaimessasi tallenna Dokumentti ja päivitä selain (ainakin Internet Explorerissa pikanäppäin on F5)
3.Linkkien lisäys. Tämä tapahtuu ja ( ) tagien avulla
Esim. Psp-Plaza (http://tonzaraj.arkku.net/phpBB3/index.php) Ette muuten ikinä arvaa mikä sivu on kyseessä ; ).
Linkki teksti kuten jo aiemmin mainitsinkin tulee sijoittaa ja ( ) tagien väliin. Ja osoitteen alkuun pitää laittaa http://
muuten ei toimi.
Jos haluat tehdä linkin toiselle omalle sivullesi se onnistuu laittamalla nettiosoitteen sijaan sivusi nimi.
Sivun pitää olla samassa kansiossa sen sivun kanssa johon se linkki tulee. Eli jos sinulla on työpöydällä kansio "Omat Sivut" jossa on sivut joille linkki tulee,
(tässä tapauksessa uskoisin että sivut joita olet neuvojeni mukaan tehnyt) lisää sivu sinne (sivu jonka haluat linkittää). Ööö... Tulikohan epäselvä :oops:
Suosittelen tekemään "Takaisin" linkin josta pääsee Sivu-sivuilta takaisin Pää-sivulle.
4.Kuvien Lisäys. Tapahtuu tagilla . Lainausmerkkien väliin kuvan nimi päätteineen.
Kuvan pitää olla samassa kansiossa sivujen kanssa. Esim Jeppe.jpg. Itselläni tuli semmoinen onghelma notta
.jpeg kuva ei toiminut jos laittoi kuvan psp.jpeg muodossa Dokumenttiin vaan se piti laittaa psp.jpg muodossa.
5. Taulukkojen teko. Taulukkojen avulla saat esim. Kuvan ja tekstin vierekkäin. Taulukko alkaa tagilla <table> ja loppuu tagilla </table>.
Table tagin alle tulee <tr> tagi ja sen alle <td> ja sen lopetus tagi näiden kahden tagin väliin tulee tekstiä/kuvia/linkkejä jne.
Samanlainen rivi tulee tämän alle ja siinä sama juttu. sen jälkeen tulee </tr> eli lopetus tagi. Tuossa ala puolella
on kuvan alle tuleva taulukko johon voi merkitä vaikka Tekijän oikeudet :wink:. Copyright merkki muuten tulee tällä kirjainyhdistelmällä: ©
<table>
<tr>
<td>tämä on kuva oikeassa reunassa</td>
<td>Kuvan viereen tuleva teksti</td>
</tr>
<tr>
<td>Tämä on kuvan alle tuleva teksti</td>
<td>Tämä on kuvan alle oikealle tuleva paikka</td>
</tr>
</table>
6.Tässä omasta mielestäni aika kätevä juttu. Saat sivun reunaan "palkin" jossa on vaikkapa linkkejä toisille sivuille.
sivu alkaa normaalisti, mutta sitten onkin semmoinen jäynä tehty että Body tagit korvataan <frameset> tagilla ja sen lopetus tagilla.
Alla olevassa mallissa cols="15%,*" tarkoittaa prosentti lukua jonka toinen palkeista peittää.
Frame name on tagi joka määrittelee palkin nimen. "Vasen" on ensin joten se on vasemmassa reunassa ja src=" " tarkoittaa kohdetta joka siinä palkissa näytetään
esim. Linkki sivu, jossa on linkkejä toisille sivuille.
<html>
<head>
<title></title>
</head>
<frameset cols="15%,*">
<frame name="Vasen" src="">
<frame name="Oikea" src="">
</frameset>
7.Listat. Listojen avulla on kätevää ja helppoa esittää - listoja. Määrittelylistaa voi käyttää varsinaisen tarkoituksensa ohella myös aikaansaamaan sisennys.
Ranskalaisilla viivoilla merkittyjä listoja saat tehtyä helposti komennoilla UL ja LI. Aloita lista komennolla <UL>, lopeta se komennolla [/list] ja merkitse jokainen listan osa komennolla <LI>.
Tällä tavalla:
<UL>
<LI>24 l olutta
<LI>2 l viiniä
<LI>1 l väkeviä
<LI>200 savuketta
[/list]
8.Sivujen nettiin laitto. Onnistuu helposti esim.Freewebsillä http://www.freewebs.com. Sieltä vain teet uuden käyttäjän ja valitset, että käytät Html-kieltä etkä
valmiita freewebs juttuja. Jos sinulla on jo käyttäjä sen voi "Downgradea" Html-kieleen optionsin kautta.
Malli:
<html>
<head>
<title>Html - Opas!</title>
</head>
<body>
Tähän siis tulee itse sivu!!! Tähän osuuteen lisätään kuvat, linkit ja kaikki muut sen sellaiset!!!
Psp-Plaza (http://tonzaraj.arkku.net/phpBB3/index.php) <----Linkki psp-plazaan!
Psp.jpg < ---- kuva!
</body>
</html>
Toivottavasti joku pääsee tämän avulla jyvälle Html-kielestä ja tosiaan netistä löytyy varmasti kymmeniä Html-oppaita.
Toivotaan myös että pahemmilta virheiltä on vältytty. : D
Ja toivomuksia saa esittää. Voin siis täydennellä tätä jälkeen päin.
(c) BonnieR
Tässä oppaassa opit Html-kielen alkeita. Tähän puuhaan sopii mainiosti
Muistio (Notepad). Html-kieli toimii erilaisten "Tagien" avulla esim. <html> </html>
Jos tagissa on / se tarkoittaa että se lopettaa jonkun aikaisemmin kirjoitetun tagin
Esim.
Aloitus tagi -----> <title> Html - Opas </title> <---- Lopetus tagi
Tageja:
<html> </html> Aloittaa ja lopettaa html-osan Dokumentissä.
<head></head> Näiden tagien sisään tulee dokumentin alkuosa.
<title> </title> Otsikko joka tulee yläpaneeliin Web-Selaimessa (Otsikko tulee tagien väliin). Itse suosin paria Tabulaattorin painamista Titleä ennen.(Menee keskemmälle)
<body></body> Kaikki jotka haluat muiden näkevän tulevat näiden tagien väliin.
(www.esimerkki.net) Linkki. Linkki teksti tulee kirjoittaa <a href> tagin ja </a> tagien väliin.
Esimerkki kuva.jpg Kuva.
Rivinvaihto
No siinä oli muutama.
1.Avaa muistio ja laita Dokumentin alkuun <html> ja loppuun </html>. Seuraavaksi
lisää <html> tagin alle <head> ja parin rivin päähän siitä </head> tagi.
Lisää <head> tagien "väliin" <title> ja </title> tagit näiden tagien väliin tulee siis otsikko.
Sitten laitetaan </head> tagin perään <body> ja siitä ~10 riviä alaspäin </body> tagi.
Oppaan lopussa on mallia. Tässä vaiheessa kannattaa tallentaa. Mene
Tiedosto -> Tallenna Nimellä ja sieltä vaihda tallennusmuoton kaikki tiedostot
ja tiedosto nimen perään .html esim. Html - Sivut.html. Kannattaa tehdä sivuille oma kansio jonnekkin.
Jatkossa voi tallentaa painamalla Ctrl + S. Jos haluat vaihtaa taustavärin se tapahtuu seuraavasti:
Lisää <body> tagiin bgcolor="Väri". "Väri" sanan tilalle luonnollisesti englannin kielinen väri esim.
<body bgcolor="Black">. Jos haluat lisätä taustakuvan se on hieman erilainen juttu.
Lataa kuva tietokoneellesi -> siirrä se kansioon johon tallensit sivusi -> <body backround="kuvasinimi.jpg>
HUOM!! Tiedostopääte pitää olla tagissa ja kuvan tulee olla samassa kansiossa missä sivusikin ovat!!!
2. Noniin sitten itse sivun rakenteluun. Ensinnäki Fontti kokoa voit vaihtaa tagilla
<font size = 1-7></font>(Oletus = 3) Kyseisellä fontti koolla kirjoitetuksi haluttava teksti pitää sijoittaa
<font> ja </font> tagien väliin. Html kieli ei hyväksy useampia välilyönnin painalluksia vaan vain yhden.
Tästä syystä välille on oma merkki ja jos tarve vaatii tekstin/kuvan/linkin voi keskittää tageilla <center> TEKSTI </center>
Sitten sinne font tagien väliin jotain liirum laarumia ja tallenna sivusi. Mene kansioon johon tallensit
sivut ja avaa ne. Wolaa! Sinun pitäisi nähdä teksti jonka kirjoitit ja mahdollisesti taustakuva/väri, jos asetit sellaisen.
Jos teet muutoksia sivuusi kun ne ovat auki Web-selaimessasi tallenna Dokumentti ja päivitä selain (ainakin Internet Explorerissa pikanäppäin on F5)
3.Linkkien lisäys. Tämä tapahtuu ja ( ) tagien avulla
Esim. Psp-Plaza (http://tonzaraj.arkku.net/phpBB3/index.php) Ette muuten ikinä arvaa mikä sivu on kyseessä ; ).
Linkki teksti kuten jo aiemmin mainitsinkin tulee sijoittaa ja ( ) tagien väliin. Ja osoitteen alkuun pitää laittaa http://
muuten ei toimi.
Jos haluat tehdä linkin toiselle omalle sivullesi se onnistuu laittamalla nettiosoitteen sijaan sivusi nimi.
Sivun pitää olla samassa kansiossa sen sivun kanssa johon se linkki tulee. Eli jos sinulla on työpöydällä kansio "Omat Sivut" jossa on sivut joille linkki tulee,
(tässä tapauksessa uskoisin että sivut joita olet neuvojeni mukaan tehnyt) lisää sivu sinne (sivu jonka haluat linkittää). Ööö... Tulikohan epäselvä :oops:
Suosittelen tekemään "Takaisin" linkin josta pääsee Sivu-sivuilta takaisin Pää-sivulle.
4.Kuvien Lisäys. Tapahtuu tagilla . Lainausmerkkien väliin kuvan nimi päätteineen.
Kuvan pitää olla samassa kansiossa sivujen kanssa. Esim Jeppe.jpg. Itselläni tuli semmoinen onghelma notta
.jpeg kuva ei toiminut jos laittoi kuvan psp.jpeg muodossa Dokumenttiin vaan se piti laittaa psp.jpg muodossa.
5. Taulukkojen teko. Taulukkojen avulla saat esim. Kuvan ja tekstin vierekkäin. Taulukko alkaa tagilla <table> ja loppuu tagilla </table>.
Table tagin alle tulee <tr> tagi ja sen alle <td> ja sen lopetus tagi näiden kahden tagin väliin tulee tekstiä/kuvia/linkkejä jne.
Samanlainen rivi tulee tämän alle ja siinä sama juttu. sen jälkeen tulee </tr> eli lopetus tagi. Tuossa ala puolella
on kuvan alle tuleva taulukko johon voi merkitä vaikka Tekijän oikeudet :wink:. Copyright merkki muuten tulee tällä kirjainyhdistelmällä: ©
<table>
<tr>
<td>tämä on kuva oikeassa reunassa</td>
<td>Kuvan viereen tuleva teksti</td>
</tr>
<tr>
<td>Tämä on kuvan alle tuleva teksti</td>
<td>Tämä on kuvan alle oikealle tuleva paikka</td>
</tr>
</table>
6.Tässä omasta mielestäni aika kätevä juttu. Saat sivun reunaan "palkin" jossa on vaikkapa linkkejä toisille sivuille.
sivu alkaa normaalisti, mutta sitten onkin semmoinen jäynä tehty että Body tagit korvataan <frameset> tagilla ja sen lopetus tagilla.
Alla olevassa mallissa cols="15%,*" tarkoittaa prosentti lukua jonka toinen palkeista peittää.
Frame name on tagi joka määrittelee palkin nimen. "Vasen" on ensin joten se on vasemmassa reunassa ja src=" " tarkoittaa kohdetta joka siinä palkissa näytetään
esim. Linkki sivu, jossa on linkkejä toisille sivuille.
<html>
<head>
<title></title>
</head>
<frameset cols="15%,*">
<frame name="Vasen" src="">
<frame name="Oikea" src="">
</frameset>
7.Listat. Listojen avulla on kätevää ja helppoa esittää - listoja. Määrittelylistaa voi käyttää varsinaisen tarkoituksensa ohella myös aikaansaamaan sisennys.
Ranskalaisilla viivoilla merkittyjä listoja saat tehtyä helposti komennoilla UL ja LI. Aloita lista komennolla <UL>, lopeta se komennolla [/list] ja merkitse jokainen listan osa komennolla <LI>.
Tällä tavalla:
<UL>
<LI>24 l olutta
<LI>2 l viiniä
<LI>1 l väkeviä
<LI>200 savuketta
[/list]
8.Sivujen nettiin laitto. Onnistuu helposti esim.Freewebsillä http://www.freewebs.com. Sieltä vain teet uuden käyttäjän ja valitset, että käytät Html-kieltä etkä
valmiita freewebs juttuja. Jos sinulla on jo käyttäjä sen voi "Downgradea" Html-kieleen optionsin kautta.
Malli:
<html>
<head>
<title>Html - Opas!</title>
</head>
<body>
Tähän siis tulee itse sivu!!! Tähän osuuteen lisätään kuvat, linkit ja kaikki muut sen sellaiset!!!
Psp-Plaza (http://tonzaraj.arkku.net/phpBB3/index.php) <----Linkki psp-plazaan!
Psp.jpg < ---- kuva!
</body>
</html>
Toivottavasti joku pääsee tämän avulla jyvälle Html-kielestä ja tosiaan netistä löytyy varmasti kymmeniä Html-oppaita.
Toivotaan myös että pahemmilta virheiltä on vältytty. : D
Ja toivomuksia saa esittää. Voin siis täydennellä tätä jälkeen päin.
(c) BonnieR