Oppilaan materiaali
1- Kyselyn tekeminen Formsilla
- 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
- Kyselyssä on vähintään yksi kysymys jokaisella alla olevalla kysymystyypillä
2- HTML-dokumentin luominen
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
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
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.
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
1. Avaa tekstieditori (Atom).
2. Avaa uusi tiedosto file --> new file.
3. Tallenna tiedosto nimellä tyylit.css kysely-kansioon.
2. Avaa uusi tiedosto file --> new file.
3. Tallenna tiedosto nimellä tyylit.css kysely-kansioon.
5 - tyylitiedoston muokkaaminen
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ä:
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
- 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.