Nyt tutustumme HTML-koodaukseen, eli toisinsanoen kirjoitamme yksinkertaisen nettisivun käyttäen html-koodausta.
Opettaja näyttää perusteita taululla aluksi ja sen jälkeen on tarkoitus itsenäisesti koodata html-sivu. Jotta tämä tapahtuisi koulunomaisesti asetetaan tehtävälle jotain vaatimuksia, niitä seuraavassa:
- oma sivuotsikko (head)
- oma taustaväri tai taustakuva
- ainakin kolme linkkiä
- ainakin kaksi kuvaa
- jonkin tekstinosan muotoilua muuksikin kuin perustekstiksi (esim. otsikko)
- lista tai taulukko
Toimi seuraavasti:
- Avaa notepad/muistio kirjoita sivukoodisi.
- Tallenna (jo keskeneräinenkin teksti välillä) "kaikki tiedostot" vaihtoehdolla tiedostosi nimellä "omanimiHTML.html".
- Pääset katselemaan keskeneräistä sivuasi selaimen "avaa tiedosto"-toiminnolla (muista päivittää näkymä muutosten jälkeen).
- Kun olet tyytyväinen sivuusi, tallenna tiedostot. Kaikkien html-tiedostojen ja niihin liittyvien kuvien yms. kannattaa olla samassa "omat tiedostot"-kansion alikansiossa, jonka nimi on vaikka "omanimiHTML"
- Ota sivustasi näytönkaappauskuva(print screen-napilla) ja lataa se blogiisi saatetekstin kera (mitä meni pieleen, mitä pitäisi lisätä jne.
Hyödyllisiä linkkejä:
Älä hätäile, pyri hyvään työhön!
Kirjoittaja on poistanut tämän kommentin.
VastaaPoistaHei vaan!
VastaaPoistaValitettavasti jouduin tosiaan jäämään sairasta tytärtäni hoitamaan kotiin.
Aihe on tällä kertaa hieman haastavampi enkä tiedä kuka sijaisenani toimii. Siksi olisi hyvä tilaisuus nyt hoitaa kaksi ensimmäistä työtä palautetuksi. Ja sitten alkaa tutustua seuraavaan aiheesee (lukemalla blogissa oleva tehtävänanto hyvin).
Olen jakanut teille kaikille (joiden google-tunnus minulla on) tämän tehtävässä mainitsemani testisivun html-tiedoston. Katselkaa sitä ja sen rakennetta. Muutamia lisäohjeita:
- Käyttäkää muistiota kirjoittamiseen, ei wordpadiä.
- Muistakaa tallentaa tiedostonne nimellä omanimiHTML.html ja tallentaessa vaihtaa "tekstitiedosto txt" asetuksen tilalle vaihtoehto "kaikki tiedostot".
- HTML-koodissa täytyy aina muistaa aloittava ja lopettava tägi
- Tuolla blogissa linkkinä olevalla html-opassivulla on hyviä neuvoja, lueskelkaa sitä.
- Älkää panikoiko, jatketaan tätä ensi viikolla ja kerron sitten lisää.
... JatQ...
VastaaPoistaKun olet saanut yhden sivun nyt tehtyä, niin suunnittele kolmen sivun kokonaisuus jostakin aiheesta niin, että saat "pääsivulta" jotakin kohdetta klikkaamalla auki toisen selainikkunan, jossa näytät "sivun2".
Sivu 3 puolestaan aukeaa pääsivulta samaan ikkunaan, jossa pääsivua selataan, mutta sieltä johtaa myös linkki takaisin pääsivulle.
Kokeile myös erilaisia taustoja joka sivulla. Googlettamalla löytyy taustagrafiikoita.
Jokaisella sivulla olisi oltava pari kuvaa ja tekstiäkin, linkkejä myös omien sivujen ulkopuolelle.
Kokeile edelleen käyttää kuvia linkkeinä ja ellet jo ensimmäisellä sivulla kokeillut tehdä linkkinä toimivaa kuvaa, joka vaihtuu sen mukaan, onko hiiren osoitin päällä vai ei, tee se nyt.
Mieti onko linkki parempi avata uudessa ikkunassa vai samassa ikkunassa?
Huomasin että joku idiootti on hakkeroinut ja tuhonnut tuon html-opassivuston. Tässä muutama lisää...
http://users8.jabry.com/mikaves/html/
http://people.uta.fi/~la19672/htmlopas/htmlopas.htm
http://www.sivut.org/html/
http://www.htmlhelp.com/reference/html40/olist.html