Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu. Sen jälkeen tuodaan elementit ja muotoillaan tekstit css-tyylein. Lopuksi tarkistetaan tiedostot validaattorilla.
Ohje: 1. Tehdään uusi sivusto. Aloita työ viemällä HTML5_harjoitus-kansio omaan kansioosi (esim. Viestipot/Oma kansio/verkkojulkaiseminen) Älä tee sivustoa toisen sivuston sisään. Tee uusi sivusto: Site/New Site. Uusi ikkuna avautuu. Nimeä sivusto ja valitse sille tekemäsi kansio (kuvassa eri nimi ja polku). Näet sivuston avaamalla Window/Files (kuva alla, eri nimi, eri tiedostot).
2. Tehdään uusi sivu komennolla File/New. Valitse kuvan mukaan HTML ilman muotoiluja ja esim. HTML5-yhteensopivuus. 3. Tallenna sivu nimellä index.html. Komento: File/Save. 4. Harjoitellaan Koodi-näkymän käyttöä ja kirjoitetaan title ja otsikko. Mene koodinäkymään. Saat sen valittua tiedostoikkunasta nimen alta (kuva alla). Design-näkymässä näkisit ulkoasun ja Split-näkymässä molemmat näkymät. Kirjoita title-elementtiin sivun nimeksi xx:n kotisivu (xx oma nimesi). Harjoitellaan vielä koodin tekemistä: kirjoita <body>-tagin jälkeen <h1>tervetuloa xx:n sivuille!!</h1> (xx oma nimesi). Huomaa, että Dreamweaver auttaa sinua, se ehdottaa viimeisen <-merkin jälkeen sinulle eri vaihtoehtoja.
5. Harjoitellaan Design-näkymän käyttöä ja kirjoitetaan lisää tekstiä. Paina kursoria niin, että se on otsikon (h1) alla. Kirjoita teksti Olen xx. ja paina Enter. Kirjoita Tässä pari suosikkilinkkiäni:. Jos tekstit ovat suuret (h1), valitse tekstit ja Properties-paneelin HTML-välilehdeltä Format: Paragraph. Se tekee teksteistä kappaletekstejä (kuva seuraavalla sivulla). 6. Linkit: kirjoita seuraaville riveille kahden mielestäsi kiinnostavan sivuston nimet (paina välillä Enter). Maalaa ylempi rivi ja kirjoita ylemmän sivuston etusivun osoite kokonaisuudessaan (http://www.xx.xx). Properties-paneelin HTML-välilehden Link-osaan (paikka näkyy yllä olevassa kuvassa). Teksti muuttuu siniseksi ja alleviivatuksi. Tee sama toiselle riville. 7. Tehdään vaakalinja ja lisäkappale. Mene koodinäkymään ja kirjoita linkkien jälkeen elementti <hr>. Tee uusi kappale elementillä <p>tässä rentoutuskuva:</p> Bodyn alun pitäisi näyttää tältä (hr ja p lihavoitu): <body> <h1>tervetuloa xx:n sivuille!</h1> <p> Olen xx. </p> <p>tässä pari suosikkilinkkiäni: </p> <a href="http://www.xxx.xx">xxxx</a> <p><a href="http://www.xx.xx">xxxx </a> </p> <hr> <p>tässä rentoutuskuva:</p> 8. Tuodaan kuva. Mene Design-näkymään ja valitse komento Insert/Image. Ohjelma avaa uuden ikkunan, jossa on oikea kansio valittuna. Valitse kuva joki.jpg. Uusi ikkuna aukeaa. Kirjoita Alt-teksti AlterateText-kohtaan, esim joki. 9. Tehdään uusi vaakalinja ja viimeinen rivi. Mene taas koodinäkymään ja kirjoita <hr>elementti.kirjoita koodiin <p> Päivitetty xx.xx.xxxx </p>. Työn pitäisi näyttää samalta, kuin etusivulla.
Koodin pitäisi näyttää tältä. Tarkasta html-sivu validaattorilla: http://validator.w3.org Tehdään css-tyyli otsikolle koodinäkymässä. 1. Muotoillaan otsikko erillisessä css-tiedostossa. Valitse otsikkoteksti Tervetuloa ja varmuuden vuoksi<h1> tag selectorista työikkunan alalaidasta. Tämä valitsee varmasti koko elementin. Avaa CSS:paneeli Window/CSS Styles. Klikkaa paneelin oikeassa alakulmassa olevaa New Style -painiketta (paperi, jonka päällä plusmerkki). Tämän jälkeen saat näytölle New CSS Rule -ikkunan:
2. Muotoillaan otsikko h1 (kuva edellisellä sivulla). Valitse Selector Type-listassa olevista vaihtoehdoista kolmas (Tag). Tag:illa voit valita HTML-tagin, johon haluat tyylin liittää. Selector Name-kohdassa valitse tagi ylin otsikkotaso <h1>. Klikkaa OKpainiketta hyväksyäksesi valinnat. Valitse Define in -kohdassa uusi tyyli uuteen CSStiedostoon (New Style Sheet). 3. Tallennetaan css. Ohjelma kysyy minne haluat tallentaa tyylitiedoston. Valitse sivustosi kansio ja nimeä tiedosto. Muista kirjoittaa tiedostonimeen loppupääte.css. 4. Muokataan tyyliä. Seuraavaksi avautuu Style definition ikkuna. Siellä voit muokata valitsemaasi elementtiä. Otsikkoriviltä näet määriteltävän elementin (kuva alla). Apply-näppäintä painamalla muutokset näkyvät sivulla. Hyväksy painamalla ok. (huom. esimerkissä Font-size on kuvasta poiketen x-large). 5. Muokkaa p-elementti. Valitse yksi leipäteksti ja avaa sama tyylinmuokkausikkuna. Tekstityyppi sama Arial ja koko Small, väri musta.css-koodi näyttää tältä (voit katsella source coden vierestä tyylit.css: h1 { } p { } font-family: Arial, Helvetica, sans-serif; font-size: x-large; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: small; Tekstityyppien tulisi olla muuttunut. Tarkasta css-tiedosto validaattorilla: http://jigsaw.w3.org/css-validator/