Kotisivut
Harjoitus 1
1. Kirjoita/kopioi Aloitus-osiossa olevat koodit muistioon. Koodin perässä on kommentoitu, mitä kyseinen koodi tekee. <!-- Kommentin voi laittaa oheisten merkkien väliin --> Tutki ja korjaa koodiin alla olevat tiedot haluamallasi tavalla.
2. Tallenna muistio html-päätteellä omaan OneDriveen kansioon, jonka olet jakanut opettajan kanssa.
3. Mene OneDriveen ja avaa tallentamasi tiedosto. Tutki, miltä sivusi näyttää ja tee haluamasi korjaukset.
- Kotisivun nimi (välilehdellä näkyvä teksti)
- Kotisivulle tuleva pääotsikko
- Kotisivulle kirjoittaminen
- Taustan värin muuttaminen
- Tekstin värin muuttaminen
- Listan tekeminen
2. Tallenna muistio html-päätteellä omaan OneDriveen kansioon, jonka olet jakanut opettajan kanssa.
3. Mene OneDriveen ja avaa tallentamasi tiedosto. Tutki, miltä sivusi näyttää ja tee haluamasi korjaukset.
Aloitus
<HTML> <!--html-documentin aloitus-->
<HEAD> <!--koko sivua koskevat määreet aloitus-->
<TITLE>
KP:n sivusto
</TITLE> <!--otsikonlisäyskäskyt-->
KP:n sivusto
</TITLE> <!--otsikonlisäyskäskyt-->
</HEAD> <!--koko sivua koskevat määreet lopetus-->
<BODY BGCOLOR="#BEE3C2" TEXT="navy"> <!--sivun aloitus + sisämääreet taustaväri pinkki, tekstin väri tummansininen-->
<H1>
Kotisivuharjoitus
</H1>
Kotisivuharjoitus
</H1>
Tässä käydään läpi:
<UL> <!--sisennetty luettelo pallukoilla-->
<LI> joka documentissä esiintyvät peruskäskyt
<LI> body-käskys lisämääreet, taustaväri ja tekstin väri
<LI> listan lisääminen
</UL> <!--sisennetty luettelo pallukoilla-->
</BODY> <!--sivun lopetus-->
</HTML> <!--html-documentin lopetus-->
<LI> joka documentissä esiintyvät peruskäskyt
<LI> body-käskys lisämääreet, taustaväri ja tekstin väri
<LI> listan lisääminen
</UL> <!--sisennetty luettelo pallukoilla-->
</BODY> <!--sivun lopetus-->
</HTML> <!--html-documentin lopetus-->
Harjoitus 2
- Kun kotisivun tekemistä jatketaan seuraavan kerran, tallennettu tiedosto avataan painamalla hiiren oikeaa painiketta ja valitaan Avaa sovelluksessa.
- Etsi sovelluksista muistio, jolla voit jatkaa kotisivujen tekemistä.
- Toinen vaihtoehto on avata ensin tietokoneella muistio ja avata tallennettu tiedosto suoraan sitä kautta.
Toisella harjoituskerralla läpikäytävät asiat:
- Kuvan lisääminen
- Kuvan koon muuttaminen
- Taustakuvan lisääminen
- Linkin lisääminen
- Taulukon lisääminen
Kuvan lisääminen
- Kirjoita/kopioi alla oleva koodi muistioosi.
- Etsi kotisivuille haluamasi creative commons-lisensoitu kuva esimerkiksi wikimedia commons-sivustolta ja vaihda alla olevan koodin kuva omaasi (kopioi siis kuvan osoite).
- Vaihda kuvan kokoa, WIDTH- tai HEIGHT- komennolla.
- Kuvan koon voi antaa pikseleinä (px) tai prosentteina (%).
<IMG SRC=https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Six_weeks_old_cat_%28aka%29.jpg/800px-Six_weeks_old_cat_%28aka%29.jpg WIDHT=200px>
<!--kuvan tulee olla tallennettuna samassa kansiossa, jossa itse muistio on tai kopioida kuvan osoite netistä-->
<!--kuvan tulee olla tallennettuna samassa kansiossa, jossa itse muistio on tai kopioida kuvan osoite netistä-->
Linkin lisääminen
Alla olevassa koodissa on kolme erilaista tapaa tehdä linkki.
- Tutki, kuinka linkki näkyy kotisivuilla kullakin tavalla.
- Vaihda linkit haluamallesi sivuille.
<A HREF=https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk >
Linkki atk-sivuille
</A>
<A HREF=https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk >
https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk
</A>
<A HREF=https://peda.net/kotka/perusopetus/langinkosken-koulu/oppiaineet2/atk >
<IMG SRC=https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Six_weeks_old_cat_%28aka%29.jpg/800px-Six_weeks_old_cat_%28aka%29.jpg width=200px>
<!--kuvan tulee olla tallennettuna samassa kansiossa, jossa itse muistio on tai kopioida kuvan osoite netistä-->
</IMG>
</A>
Taustakuvan lisääminen
Ensimmäisessä harjoituksessa opittiin vaihtamaan kotisivun taustaa. Nyt harjoitellaan lisäämään kotisivuille taustakuva.
- Vaihda BODY-käskyssä taustavärin BGCOLOR tilalle taustakuva BACKGROUND=
- Liitä perään haluamasi kuvan osoite.
<BODY BGCOLOR="#BEE3C2" TEXT="navy">
Harjoitus 3
1. Testaa kokeilemalla, mitä seuraavat kirjainyhdistelmät tekevät. Huom! BR ja HR käskyt vaativat vain aloitusmerkit <>, loput eivät vaadi edes aloitusmerkejä.
2. Suurenna jokin koodaamistasi erikoismerkeistä:
3. Etsi ja koodaa aurinko, sateenvarjo, lumiukko ja tähti. Huomaa, että erikoismerkit eivät tarvitse aloitusmerkkejä <>, vaan alkavat aina &#- merkeillä!
4. Kokeile seuraavia muotoilukoodeja kirjoittamaasi tekstiin:
5. Taulukon lisääminen
- BR
- HR
- >
- "
- ♣
- ☺
2. Suurenna jokin koodaamistasi erikoismerkeistä:
- Kirjoita ennen merkkiä <font size=20px> ja lopetus merkin jälkeen </font>.
3. Etsi ja koodaa aurinko, sateenvarjo, lumiukko ja tähti. Huomaa, että erikoismerkit eivät tarvitse aloitusmerkkejä <>, vaan alkavat aina &#- merkeillä!
4. Kokeile seuraavia muotoilukoodeja kirjoittamaasi tekstiin:
- lihavointi <B> ja </B>
- kursivointi <I> ja </I>
- alleviivaus <U> ja </U>
5. Taulukon lisääminen
- Katso oppaan sivulta 62 ohjeet taulukon lisäämisestä ja luo taulukko. Esimerkkitaulukko alla.
- Keskitä taulukko keskelle sivua.
- Laita taulukolle taustakuva tai taustaväri.
- Kokeile vaihtaa taulukon reunojen paksuutta.
| Taulukko | Ensimmäinen sarake |
Toinen sarake |
| Ensimmäinen rivi | ||
| Toinen rivi |
Harjoitus 4
Tekstin viimeistely
- Kirjoita kotisivuillesi haluamaasi tekstiä. Tekstin ulkoasua voit muokata kattavan html oppaan luvussa 3.5. Kirjasimet eli fontit s. 23 olevien ohjeiden avulla.
- Muokkaa tekstiin sopivat fonttikoot, värit ja fontit.
Videon lisääminen
- Lisää kotisivulle video kopioimalla videon upotuskoodi hiiren oikealla painikkeella ja liittämällä se kotisivun body-osioon
Alasivun linkittäminen kotisivulle
- Tee uusi muistio, johon lisäät haluamasi käskyt ja sisällön aivan kuten varsinaiselle kotisivulle.
- Tallenna muistio samaan kansioon, johon olet tallentanut kotisivusi.
- Tee linkki kuten aikaisemminkin, mutta linkin osoitteen tilalle kopioi muistiosi nimi esimerkiksi tokasivu.html
Kotisivun viimeistely
- Lopuksi tutki erilaisia nettisivuja ja pohdi, miten haluat asetella omalle kotisivuillesi luomasi asiat (nyt kuvat, linkin ja teksti ovat kaikki allekain sivuillasi).
- Käytä tuotoksesi asetteluun taulukkokäskyä ja sijoita kuvat, linkit ja tekstit taulokkoon haluamallasi tavalla, jotta sivustosta tulisi mahdollisimman selkeä.
- Halutessasi voit vielä muokata kotisivujasi omatoimisesti html-oppaan avulla.