HTML & CSS -tehtävät

Tehtävä 1 (Ensimmäinen oma HTML-sivu) linkki teoriaan

  1. Tee omiin tiedostoihisi uusi kansio nimellä "Nettisivut".
  2. Avaa jokin tekstieditori (Muistio, Notepad tms.) ja naputtele tai kopioi siihen alla oleva HTML-merkkaus (kehyksen sisällä).
    <html>
    <head>
    <title>Tämä näkyy selaimen yläpalkissa</title>
    </head>
    <body>
    <h1>Eka oma sivu</h1>
    <p>Tämä on ensimmäinen kappale.</p>
    </body>
    </html>
    
  3. Tallenna tiedosto nimellä "ekaomasivu.html" Nettisivut-kansioon. Tallennuksesta on ohje kuva alla. Huomaa lainausmerkit!
    html_tallennusohje (44K)
  4. Etsi sitten tiedosto resurssienhallinnan kautta ja klikkaa sitä, jolloin sivun pitäisi avautua oletusselaimessa suunnilleen seuraavan kuvan näköisenä:

    ekaomasivu (29K) Kuva 1

    Onneksi olkoon! Olet juuri luonut ihka oikean HTML-sivun! Kokeile vielä muuttaa tekstejä ja testaa tulokset.


Tehtävä 2 (linkit) linkki teoriaan

  1. Tee Muistiolla kansioon "Nettisivut" uusi HTML-sivu nimeltä "tokaomasivu.html". Kirjoita sivulle ainakin sellainen otsikko, jotta sivu erottuu muista.
  2. Luo kansioon "Nettisivut" kaksi uutta kansiota nimillä "kuvat" ja "kokeilut".
  3. Tee Muistiolla kansioon "kokeilut" uusi HTML-sivu nimeltä "kokeilu1.html" ja kirjoita sinne jotakin sisältöä.
  4. Linkitä sivut niin, että jokaisesta sivusta on linkki kahteen muuhun (omaan) sivuun.
  5. Testaa sivujen toimivuus huolellisesti eri selaimilla (jos mahdollista)!

Tehtävä 3 (kuvan lisääminen) linkki teoriaan

Huom! Voit alkaa käyttää HTML-Kit -editoria html-koodin kirjoittamiseen tästä eteenpäin!
  1. Piirrä Paint-ohjelmalla kolme erilaista kuvaa (vaikka eläimiä). Tallenna kaikki gif-muodossa kansioon "kuvat". (Vihje: jos haluat esimerkiksi muokata kuvaa tarkemmin tai asettaa jonkin värin läpinäkyväksi, avaa kuva Microsoft Photo Editorissa tai Adobe PhotoShopissa ja muokkaa siellä.
  2. Lisää jokaiseen kolmeen HTML-sivuun ainakin yksi kuva img-elementin avulla.
  3. Halutessasi voit lisätä sivuille myös oikeita valokuvia (jpg-muodossa). Saat myös ottaa kuvia kännykällä ja siirtää ne koneelle bluetooth-yhteyden avulla (jos koneessasi on BlueTooth-yhteys). Muista, että kenenkään toisen ihmisen kuvaa ei saa käyttää ilman lupaa!!
  4. Testaa sivujen toimivuus huolellisesti eri selaimilla (jos mahdollista)!

Tehtävä 4 (taulukon tekeminen) linkki teoriaan

a) Luo "Nettisivut"-kansioon uusi html-sivu nimeltä taulukot.html. Huom! Saat käyttää HTML-Kit -editoria.
b) Linkitä sivu ainakin "ekaomasivuun" ja kirjoita ensimmäisen tason (h1) otsikoksi "Taulukkotehtävien ratkaisuja"
c) Tee sivulle viereinen taulukko:
Tässä taulukossa on vain yksi solu!
d) Tee sivulle viereinen taulukko:
Tehtävä 4d
Puhelinmuistio
NroNimiPuhelin
1Kalle123
2Pelle234
3  
4  
5  
e) Tee taulukko, jossa on kaksi riviä. Alempaan sijoita jokin kuva (voit piirtää tai ottaa kuvan) ja ylempään kuvateksti. Lopputulos voisi näyttää viereiseltä:
Vino hymy
html_taulukko1 (2K)

Tehtävä 5 (Eka CSS-tyyliohje) linkki teoriaan

  1. Avaa Muistiolla uusi tekstitiedosto ja kopioi siihen seuraava tyylikoodi:
    h1 {text-align: center; color: green;}
    body {font-size: 120%}
    
  2. Tallenna tiedosto "Nettisivut"-kansioon nimellä "tyyliohje.css" (tallennus samoin kuin ekaomasivun tapauksessa).
  3. Lisää "ekaomasivu.html"-tiedostoon tyyliohjeen osoite (alla).
    <link rel="stylesheet" type="text/css" href="tyyliohje.css" />
    
    Kirjoita osoite samaan paikkaan head-osaan kuin mallissa (punaisella).
  4. Avaa sivu uudestaan selaimeen ja tarkista, toimiko tyyliohje, kuten oli tarkoitus (otsikko vihreällä fontilla keskellä sivua ja teksti vähän isompaa).
  5. Testaa tyyliohjetta muuttamalla lukuja yms. ja katsomalla, miten muutos näkyy selaimessa. Tallenna aina tyyliohje samalle nimelle, niin saat muutokset näkyviin päivittämällä selaimessa auki olevaa html-sivua.

Tehtävä 6 (CSS: reunoja yms.) linkki teoriaan

  1. Tee nettisivut-kansioon uusi html-sivu (kopioi vaikka jokin entinen sivu) ja anna sille nimeksi css_teht6_reunat.html
  2. Kopioi alla olevan ruudun koodi tekemällesi sivulle (poista mahdollinen entinen sisältö)
  3. Tarkastele, miltä sivu näyttää selaimessa
  4. Muuta ruutu2-elementin css-koodia niin, että koodi eroaa kaikissa kohdissa ruutu1-koodista.
  5. Katso muutokset selaimella.
<html>
<head>
<title>CSS-tehtävä</title>

<style type="text/css">

#ruutu1 {
  background-color: #cee;
  color: blue;
  padding: 5px;
  margin: 5px;
  border-bottom: 1px solid black;
  border-left: 1px double black;
  border-top: 4px dashed red;
  border-right: 1px dotted black;
}
#ruutu2 {
  background-color: #cee;
  color: blue;
  padding: 5px;
  margin: 5px;
  border-bottom: 1px solid black;
  border-left: 1px double black;
  border-top: 4px dashed red;
  border-right: 1px dotted black;
}
	
</style>

</head>

<body>
<div id="ruutu1">Tämä on 1. ruutu</div>
<div id="ruutu2">Tämä on sitten tietty 2. ruutu</div>
</body>

</html>

Tehtävä 7 (CSS-asemointi; absoluuttinen ja mitat pikseleinä) linkki teoriaan

  1. Kopioi ruudussa oleva merkkaus kokonaan uuteen documenttiin ja tallenna se vaikka nimellä cssesim1.html. Sivun pitäisi avautua samannäköisenä kuin kuvassa 1.
  2. Tee sitten tyyleihin sellaiset muutokset, että sivu näyttää samalta kuin kuvassa 2. (Vihje: sanan top vastakohta on bottom)
  3. Toteuta sitten ainakin yhden oman sivun asemointi käyttäen absoluuttista CSS-asemointia.
Kuva 1
cssasemointiesim1 (14K)
Kuva 2
cssasemointiesim1b (14K)