HTML/CSS – Sivusto

Palautuspäivä: 13.11.2017

Osaamistavoitteet

Kurssilla opiskellaan HTML ja CSS -kielien perusteet. Kurssilla opitaan rakentamaan verkkosivuja käyttäen HTML-elementtejä oikein ja muotoilemaan ulkoasua CSS tyyleillä ja asemoimaan sisältöä sivuille. Opitaan validoimaan koodi ja ymmärtämään validin koodin tuottamisen merkityksen. Osataan toteutetaan sivusto, joka toimii eri päätelaitteilla.

Sisältö

HTML sivun rakenne, rakenteelliset elementit, tekstitason elementit, kuva ja media elementit, lomakkeet, ulkoasun muokkaaminen CSS tyyleillä, responsiivisuus, validointi

Kokonaisuuteen kuuluvat kurssit

  • HTML ja CSS -perusteet

Harjoitustyö

Etätehtävä 1: Megacity html-sivu

Luo word-tiedoston teksteistä kuvaa vastaava sivu. Käytä PDF-ohjeen mukaisia html5 elementtejä ja div:ejä. Luo css-tiedosto, jossa korostat elementtejä värein. Luo CSS-tiedostolle ja kuvielle omat kansiot. Muista validointi! Materiaalit voit ladata  Megacity-base.zip paketista.

Klikkaa viereistä kuvaa nähdäksesi mallikuvan paremmin.

Tehtävä palautetaan 2.10.2017 WordPress tunnille.


Etätehtävä 2: Megacity html-sivu 2

Luo megacity sivulle uusi CSS-tiedosto (style2.css) ja muokaa ulkoasu mallin mukaiseksi. Harjoituksessa opittavat asiat:

– Alustus HTML5-reset
– Kiinteä keskitetty asettelu
– Kiinteät taustakuvat
– CSS Valitsijat (Selectors)

Tehtävää tehdään tunnilla ja viimeistellään kotona.

Megacity-style2-images


Etätehtävä 3: Megacity html-sivu 3

Luo megacity sivulle uusi CSS-tiedosto (style3.css) ja muokaa ulkoasu mallin mukaiseksi. Harjoituksessa opittavat asiat:

– Skaalautuva rakenne
– Relative – Absolute asettelu
– Rinnakkaiset palstat – Float asettelu
– Skaalautuvat kuvat
– Liukuväri

Tehtävää tehdään tunnilla ja viimeistellään kotona.

Megacity-style3


Kurssin päättötehtävä: Megacity html-sivu 4

Luo megacity sivulle uusi CSS-tiedosto (style4.css) ja muokkaa ulkoasu mallin mukaiseksi. Harjoituksessa opittavat asiat:

– Yhteenveto kaikesta opitusta
– Responsiivisuus (mobile, tablet 480px, laptop 840px, desktop 1024px)

Color scheme
Light gray #F8F9FB; Taustat
Burberry #6B7A8F; Tekstit ja footer
Apricot #f7882f; Otsikot ja korostukset

Style4-images

 

Kurssiin liittyvät ohjeet ja tiedostot

HTML / CSS ohjeita: w3schools.com

Validator: validator.w3.org/

14.9.2017 tuntiharjoitus: 14-09-17-Tunnilla.zip

Kaikki kurssin sivut ja CSS tiedostot: MAT17-HTML-perusteet

Tehtävän palautus

Vain päättötehtävä palautetaan kommenttikentään. Muut etätehtävät palautetaan tunnille.

Päättötehtävä palautetaan kirjoittamalla kommenttikentään palauttajan nimi sekä linkki sivustolle.

Esim. <a href=”http://www.munharjoitus.com”>Jannan harjoitustyö</a>

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *