Harjoitustyö 4
Harjoitustyö 4:n ohje
Harjoitellaan linkkien tekoa sekä kuvien liittämistä taulukkoon
MALLI
<A HREF="http://www.yle.fi" >ylen kotisivut </A>
<A HREF="http://www.iltalehti.fi" target="_new" >iltalehden kotisivut </A>
target="_new" -optiolla saadaan linkki avatumaan uuteen välilehteen!
-----------------------------------------------------------------------------------
LINKIN VÄRIN VAIHTO
lisää BODY-osaan
LINK="#rrggbb" VLINK="#rrggbb"
link= linkin väri ennen klikkausta, vlink=klikatun linkin väri.
esim <BODY BGCOLOR="green" LINK="red" VLINK="yellow">
-----------------------------------------------------------------------------------
KUVA LINKKINÄ -> <A>-tägien välin teksti korvataan kuvalla (IMG SRC)
<A HREF="http://www.forssa.fi" target="_new"> <img src="bansku.jpg" border="1" width="100" height="100"> </A>
-----------------------------------------------------------------------------------
♥
1) Tee sivu, jolla on linkkilista suosikkisivuillesi. Tallenna nimellä HTA.html
Linkkejä on oltava vähintään 7.
2) Tallenna ja palauta peda.nettiin
-----------------------------------------------------------------------------------
♥♥
3) Vaihda edellisten linkkien väri ylläopetetulla tavalla
4) Tee toinen sivu (avaa uusi gedit-tiedosto). Tallenna nimellä HTB.html
Tee tiedostoon RIVI PIENIÄ kuvia, joita klikkaamalla pääsee kyseisen kuva-aiheen sivulle. (esim banaanin kuvaa klikkaamalla pääsee banaanin wikipediasivulle tai auton kuvaa klikkaamalla pääsee ko. automerkin kotisivulle)
Kuvia on oltava vähintään 5 . Linkit voivat olla samoille sivuille kuin edellisetkin linkit.
MUISTA KUVIEN TEKIJÄNOIKEUDET!
Pääset helpommalla, kun et tallenna kuvia vaan käytät kuvien URL-osoitetta
MALLI
<A HREF="https://fi.wikipedia.org/wiki/Pizza"> <IMG SRC="https://peda.net/forssa/perusopetus/kuhala/oppiaineet2/tietotekniikka/multimedia22/harjoitusty%C3%B6t/harjoitust%C3%B6ist%C3%A4/pizza-png"> </A>
5) Vaihda lopuksi ainakin molempien sivujen taustaväri. Linkitä lopuksi nämä kaksi tiedostoa. Muotoile halutessasi sivua myös muuten.
MALLI
<A HREF="HTB.html" >Tästä toiselle sivulle </A>
<A HREF="HTA.html" >Tästä takaisin linkkisivulle</A>
6) Tallenna ja palauta peda.nettiin
-----------------------------------------------------------------------------------
♥♥♥
7) Tee kolmas sivu (Avaa uusi gedit-tiedosto). Tallenna numellä HBC.html.
Tee tälle sivulle TABLE-tagin avulla 4*4 taulukko, jossa jokaisessa ruudussa eli solussa on jonkin sosiaalisen median tunnettu logo (wikipedia, twitter, fb,instagram, blogger, pinterest, youtube, jne...)
Tee kuvista linkit, kyseisen sosiaalisen median aloitussivulle.
MALLI
<TABLE BORDER="5">
<TR> <TD><A HREF="https://fi.wikipedia.org/wiki/Australia"> <IMG SRC="australia.png" height="100"></A></TD> <TD><A HREF="https://fi.wikipedia.org/wiki/iran"> <IMG SRC="iran.png" height="100"></A></TD> </TR>
<TR> <TD><A HREF="https://fi.wikipedia.org/wiki/japani"> <IMG SRC="japani.png" height="100"></A></TD> <TD><A HREF="https://fi.wikipedia.org/wiki/tuvalu"> <IMG SRC="tuvalu.png" height="100"></A></TD> </TR>
</TABLE>
MALLI
<A HREF="http://www.yle.fi" >ylen kotisivut </A>
<A HREF="http://www.iltalehti.fi" target="_new" >iltalehden kotisivut </A>
target="_new" -optiolla saadaan linkki avatumaan uuteen välilehteen!
-----------------------------------------------------------------------------------
LINKIN VÄRIN VAIHTO
lisää BODY-osaan
LINK="#rrggbb" VLINK="#rrggbb"
link= linkin väri ennen klikkausta, vlink=klikatun linkin väri.
esim <BODY BGCOLOR="green" LINK="red" VLINK="yellow">
-----------------------------------------------------------------------------------
KUVA LINKKINÄ -> <A>-tägien välin teksti korvataan kuvalla (IMG SRC)
<A HREF="http://www.forssa.fi" target="_new"> <img src="bansku.jpg" border="1" width="100" height="100"> </A>
-----------------------------------------------------------------------------------
♥
1) Tee sivu, jolla on linkkilista suosikkisivuillesi. Tallenna nimellä HTA.html
Linkkejä on oltava vähintään 7.
2) Tallenna ja palauta peda.nettiin
-----------------------------------------------------------------------------------
♥♥
3) Vaihda edellisten linkkien väri ylläopetetulla tavalla
4) Tee toinen sivu (avaa uusi gedit-tiedosto). Tallenna nimellä HTB.html
Tee tiedostoon RIVI PIENIÄ kuvia, joita klikkaamalla pääsee kyseisen kuva-aiheen sivulle. (esim banaanin kuvaa klikkaamalla pääsee banaanin wikipediasivulle tai auton kuvaa klikkaamalla pääsee ko. automerkin kotisivulle)
Kuvia on oltava vähintään 5 . Linkit voivat olla samoille sivuille kuin edellisetkin linkit.
MUISTA KUVIEN TEKIJÄNOIKEUDET!
Pääset helpommalla, kun et tallenna kuvia vaan käytät kuvien URL-osoitetta
MALLI
<A HREF="https://fi.wikipedia.org/wiki/Pizza"> <IMG SRC="https://peda.net/forssa/perusopetus/kuhala/oppiaineet2/tietotekniikka/multimedia22/harjoitusty%C3%B6t/harjoitust%C3%B6ist%C3%A4/pizza-png"> </A>
5) Vaihda lopuksi ainakin molempien sivujen taustaväri. Linkitä lopuksi nämä kaksi tiedostoa. Muotoile halutessasi sivua myös muuten.
MALLI
<A HREF="HTB.html" >Tästä toiselle sivulle </A>
<A HREF="HTA.html" >Tästä takaisin linkkisivulle</A>
6) Tallenna ja palauta peda.nettiin
-----------------------------------------------------------------------------------
♥♥♥
7) Tee kolmas sivu (Avaa uusi gedit-tiedosto). Tallenna numellä HBC.html.
Tee tälle sivulle TABLE-tagin avulla 4*4 taulukko, jossa jokaisessa ruudussa eli solussa on jonkin sosiaalisen median tunnettu logo (wikipedia, twitter, fb,instagram, blogger, pinterest, youtube, jne...)
Tee kuvista linkit, kyseisen sosiaalisen median aloitussivulle.
MALLI
<TABLE BORDER="5">
<TR> <TD><A HREF="https://fi.wikipedia.org/wiki/Australia"> <IMG SRC="australia.png" height="100"></A></TD> <TD><A HREF="https://fi.wikipedia.org/wiki/iran"> <IMG SRC="iran.png" height="100"></A></TD> </TR>
<TR> <TD><A HREF="https://fi.wikipedia.org/wiki/japani"> <IMG SRC="japani.png" height="100"></A></TD> <TD><A HREF="https://fi.wikipedia.org/wiki/tuvalu"> <IMG SRC="tuvalu.png" height="100"></A></TD> </TR>
</TABLE>