Oppilaan materiaali

1- Kyselyn tekeminen Formsilla

2021-01-29T08:21:27+02:00

Kirjaudu omilla tunnuksilla osoitteessa office.com
Valitse työkaluvalikosta Forms
Tee kysely, joka täyttää seuraavat ehdot
- Kyselyssä on vähintään yksi kysymys jokaisella alla olevalla kysymystyypillä
  - Valinta
  - Teksti
  - järjestys
  - Likert

2- HTML-dokumentin luominen

2021-01-29T08:59:46+02:00

1. Luo omaan html-kansioosi uusi kansio nimeltä "kysely".
2. Avaa tekstieditori (Atom)
3. Valitse file --> new file
4. Olemme aikaisemmin tehneet yksinkertaisia sivuja, joiden pohjana on käytetty alla olevaa html-sivun rakennetta. Voit kopioida alla olevan pohjan editoriin suoraan.

<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8"/>
<link href="tyylit.css" rel="StyleSheet" type="text/css">
<title>Sivun otsikko</title>
</head>
<body>
SIVULLA NÄKYVÄ SISÄLTÖ TÄHÄN
</body>
</html>

5. Tallenna tiedosto kysely-kansioon nimellä index.html

3 - HTML-dokumentin muokkaaminen

2021-01-29T09:00:25+02:00

1. Lisää sivulle otsikko h1-elementin avulla.
2. Lisää otsikon alapuolelle p-elementti, jonka sisälle kirjoitat tekstiä. Voit tekstissä esitellä lyhyesti tekemäsi kyselyn.
3. Avaa tekemäsi kysely. Valitse tämän jälkeen "Jaa". Kopioi upotus-kohdasta löytyvä teksti

4. Kopioi teksti "<iframe..." html-dokumenttiin kirjoittamasi tekstin alapuolelle.

Haluamme myöhemmin vielä muokata sivuston ulkoasua, joten lisäämme lomakkeen ympärille tunnisteen, jolla voimme viitata siihen tyylitiedostossa.

5. Lisää kopioimasi tekstin ympärille div-elementti, jossa annat tunnisteelle nimen "lomake". Nyt koodin pitäisi näyttää kokonaisuudessaan suunnilleen alla olevan kuvan mukaiselta.

4 - Tyylitiedoston luominen

2021-01-29T09:01:57+02:00

1. Avaa tekstieditori (Atom).
2. Avaa uusi tiedosto file --> new file.
3. Tallenna tiedosto nimellä tyylit.css kysely-kansioon.

5 - tyylitiedoston muokkaaminen

2021-01-29T09:02:28+02:00

1. Lomakkeeseen voidaan viitata tyylitiedostossa kirjoittamalla .lomake ja lisäämällä aaltosulkeisiin halutut muotoilut.

2. Kaikki pääotsikot h1 ja perustekstit p voidaan myös keskittää

3. Sivun käyttämä fontti voidaan vaihtaa muokkaamalla body-elementtiä. Muuta fontiksi esim. Helvetica. Nyt tyylit.css-tiedosto näyttää suunnilleen tältä:

Bonustehtävä - Videon upottaminen omalle sivulle

2021-01-29T09:09:57+02:00

Etsi YouTubesta jokin video, jonka haluat upottaa nettisivullesi.
Löydät upottamiseen käytettävän ifame-koodin "Jaa" näppäimen avulla
Asettele video lomakkeen alapuolelle siten, että se on myös keskitetty keskelle sivua.