Osaatko tehdä ?

Tässä pari linkkiä miten se tehdään. Harjoittele vaikka Wordin asiakirjassa. Kerran kun oppii, niin se on lähes joka paikassa samanlainen.

office.microsoft.com/fi-fi/w...91035.aspx

office.microsoft.com/fi-fi/p...91035.aspx

Käytettäesssä ohjelmointikieltä (esim. HTML, php, perl) on niillä oma tapansa suorittaa asia.

  Ilmoita asiaton vastaus

On hieman hebreaa minulle joten pysyttelinkin näissä taidoissa mitkä olen oppinut ja hyväksi sekä toimiviksi itselleni havainnut.

  Ilmoita asiaton vastaus

Alussa html-kieli on vaikeaa, mutta on tarkoitus tutustua yleisimpiin XHTML-elementteihin
ja niiden käyttämiseen WWW-dokumenteissa. Lisäksi kokeillaan dokumentin muotoilua
CSS:llä ja aloitetaan pienen sivuston tekeminen. Demotehtävät voi tehdä millä
tahansa editorilla, esimerkiksi HTML-Kit-editorilla,
Amaya-editorilla ja cc.joensuu.fi/~marttila/html/
vaikka Windowsin Notepadilla. Mallivideoissa käytetään HTML-Kit-editoria.
Yleisimmät käytettävät elementit esimerkkien kera
löydät erillisestä
dokumentista tai luento 1:en materiaalista.

Alkuvalmistelut

Kotikoneelle kannattaa ladata joku aiemmin mainituista editoreista.
Lataaminen onnistuu aiemmin mainituilta editorien esittelysivuilta. Luennoilla
esimerkit näytetään yleensä HTML-Kit-editorilla.

Mozilla Firefox -selaimeen
kannattaa asentaa hyödyllisiä lisätyökaluja; ainakin Web Developer ja FireBug.

Web Developer -asennus:


1. Mene Web
Developer -laajennoksen asennussivulle.

2. Napauta sivulta Add to Firefox ja sen jälkeen Install Now esiin tulevasta ikkunasta.

3. Käynnistä Mozilla Firefox uudelleen.

4. Työkalupalkin saa näkyviin valinnalla View | Toolbars | Web
Developer Toolbar.


FireBug-asennus:


1. Mene FireBug-laajennoksen
asennussivulle.

2. Napauta sivulta Add to Firefox ja sen jälkeen Install Now esiin tulevasta ikkunasta.

3. Käynnistä Mozilla Firefox uudelleen.

4. Laajennokseen pääset käsiksi valinnalla Tools | FireBug | ...



Sivuston rakenne


Hakemistorakenne

Luodaan kuvitteellinen kotisivusto Nanonano-nimiselle henkilölle. Sivuille halutaan seuraavia osioita:

Tai ota minulle yhteys, niin teen inulle sivustoon, Valmispaikka on onntopohja.ja temal.fi

* Etusivu, joka sisältää lyhyen kuvauksen henkilöstä, yhteystiedot ja valokuvan.

* Artikkelisivu, johon henkilö voi kirjoittaa dokumentteja yleisesti kiinnostavista aiheista.

* Opiskelusivut, joilta löytyy henkilön lukujärjestys, tiedot suoritetuista kursseista ja kurssien harjoitustyöt.

* Töihin liittyvät sivut, jonne sijoitetaan mm. henkilön CV ja työtehtäviin liittyviä kiinnostuksen kohteita.

* Harrastussivut, joista löytyy tietoa henkilön erilaisista harrastuksista.

* Kuvagalleriasivut, johon sijoitetaan digikameralla otettuja tai skannattuja valokuvia.

* Linkkisivu, jonne sijoitetaan suosikkilinkit ja linkit kaverien sivustoille.

* Vieraskirjasivu, johon kävijät saavat käydä laittamassa kommenttejaan.

* Navigointi sivuista toisille niin, että sivulta toiselle liikkuminen on helppoa.



Jätetään sivuston toiminnallisuuden toteuttaminen myöhempään vaiheeseen ja aloitetaan
sivuston hakemistorakenteen suunnittelulla. Koska sivuja (.html-tiedostoja)
tulee olemaan useita ja erilaisten sivujen määrä saattaa vielä jatkossakin kasvaa, on hyvä
tehdä sivustolle oma hakemistorakenne. Kutakin sivua kohden on järkevä luoda oma
hakemistonsa. Tämä helpottaa sivuun liittyvien tiedostojen arkistointia ja yksinkertaistaa
WWW-osoitteita.

HUOM! Demo-ohjeissa oletetaan, että ne tehdään Agoran mikroluokissa, jolloin tiedostot voidaan siirtää
suoraan Resurssienhallinnan kautta. Jos tehtäviä tekee kotikoneelta, siirtoon täytyy käyttää
SSH-ohjelmaa, jonka käyttöä WWW-sivujen julkaisussa ohjeistetaan esimerkiksi Tietotekniikan opettajan työvälineitä
-kurssin demossa 1.

Hakemistorakenteen luonti


* Avaa Windows Explorer (suom. Resurssienhallinta) ja luo ylläolevaa kuvaa vastaava hakemistorakenne
W:-asemalle. Jos et löydä omaa W:-asemaa, niin tee tarvittavat alkutoimenpiteet,
joihin löytyy ohjeistus Tietotekniikan opettajan työvälineitä
-kurssin demosta 1.

* HUOM! Jos et alkutoimenpiteiden jälkeenkään löydä W:-asemaa, voit kokeilla muuttaa salasanasi
salasana.jyu.fi-palvelussa. Se on auttanut ongelmaan useimmilla.
Salasanan muuttamisen jälkeen koneelta täytyy kirjautua ulos ja sen jälkeen kirjautua uudelleen sisälle,
jotta W:-asema tulee näkyviin.


Sivujen rakenne

Lisätään suunnitelman mukaiset tekstit sekä kuvat useammalle sivulle ja muokataan sivujen rakenne kuntoon.
Avaa suunnitelma omaan ikkunaan.

Käynnistä haluamasi editori.

Etusivu

Tehdään ensimmäisenä sivuston etusivu, jonne tulevat seuraavat asiat:


1. Aloita uusi dokumentti ja tallenna se W:-aseman
www-hakemistoon nimellä index.html.

2. Avaa selaimeen luennolla 1 esitetty
XHTML-dokumentin pohja selitteineen. Tutki mitä eri osia pohjassa on. Kopioi pohja
dokumentin alkuun (poista editorin oletuksena antamat tekstit).

3. Laita title-elementin sisällöksi Nanonano. Hakukoneet löytävät parhaiten
title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.

4. Lisää sivulle pääotsikko (h1).
Kirjoita otsikkoon myös Nanonano.

5. Kirjoita lyhyt parin lauseen kuvaus siitä, mitä Nanonano harrastaa ja opiskelee.
Käytä p-elementtiä.

6. Laita väliotsikoksi (h2) Yhteystiedot ja kirjoita

Lisää yhteystietojen perään uusi kappale (p) ja sijoita siihen
valokuva (img).

<img src="kuva.png" alt="Antti Ekonoja luennoi CSS-tyylisivuista" title="Luento 2" />



* src-ominaisuus. Ominaisuus määrittää näytettävän kuvan osoitteen tai pelkän nimen,
jos kuva sijaitsee samassa hakemistossa dokumentin kanssa.

* alt-ominaisuus. Attribuutti kertoo kuvan sisällön niille, jotka eivät lataa kuvia tai joiden selain ei osaa näyttää kuvia.

* title-ominaisuus. Ominaisuus kertoo kuvan otsikon, joka voidaan näyttää vihjetekstinä vietäessä hiiri kuvan päälle.



8. Kirjoita vielä dokumentin loppuun tiedot sivun ylläpitäjästä ja sivun päivitysajankohdasta
seuraavan esimerkin mukaan:

<address>
<a title="Sivun ylläpitäjä" href="users.jyu.fi/~käyttäjätunnus...">
Matti Meikäläinen</a>
(<a title="Sivun ylläpitäjän sähköpostiosoite" href="mailto:[email protected]">
[email protected]</a>)
<strong>2010-01-08 13:08</strong>
</address>



* href-ominaisuus. Ominaisuus määrittää linkin osoitteen.

* title-ominaisuus. Ominaisuus kertoo linkin otsikon, joka voidaan
näyttää vihjetekstinä vietäessä hiiri linkin päälle.



9. Tallenna dokumenttisi W:-aseman www-hakemistoon index.html-nimelle.
index.html on useimmissa www-palvelimissa (Apache) oletustiedosto, joka palautetaan
pyydettäessä tiettyä hakemistoa. Esimerkkikuva havainnollistaa millä
WWW-osoitteilla esimerkiksi people.cc.jyu.fi-palvelimelle (ei enää käytössä) sijoitettuihin
tiedostoihin viitataan (peoplessa www-kansio on oletuskansio, johon WWW-tiedostot laitetaan):

Hakemistorakenne peoplessa ja vastaavat WWW-osoitteet


10. Testaa sivun toimivuus jollakin selaimella. Avaa sivu suoraan W:-asemalta
valinnalla File | Open.

11. Valitse Web Developer -työkalupalkista Tools | Validate
Local HTML. Tällä valinnalla saat tarkistettua, että
dokumenttisi on XHTML-standardin "kieliopin" mukaista.
Koodin pitäisi olla virheetöntä, jos olet noudattanut demo-ohjeita tarkasti.

12. W-asemalle tallennetut sivut näkyvät myös
Internetiin. Tarkista löydätkö sivusi osoitteesta:

users.jyu.fi/~tunnus/www/

missä tunnus on Tietohallintokeskuksen käyttäjätunnuksesi. Kokeile sivun toimintaa yo. WWW-osoitteesta.


Opiskelut


1. Aloita uusi XHTML-dokumentti (samalla tavalla kuin pääsivukin) ja tallenna dokumentti
W:\www\opiskelu\-kansioon index.html-nimellä. Ole tarkkana, että
tallennat oikeaan kansioon. Älä tallenna vahingossa aiemmin tekemäsi dokumentin päälle.

2. Keksi opiskeluihin liittyvälle dokumentille body-osaan järkevä pääotsikko
(h1) ja head-osaan sopiva title (esim. Opiskelu
tai Opiskelu - Nanonano, sivua parhaiten kuvaava sana ensin).

3. Lisää dokumentiin toisen tason (h2) otsikko Viikkolukujärjestys.

4. Kirjoita dokumenttiin esimerkin mukainen viikkolukujärjestys taulukkomuodossa. Taulukkojen
määrittelyn voit kerrata erillisestä
ohjeesta esimerkkien avulla.

  Ilmoita asiaton vastaus

En osaa, on Onttopohjan heiniä.

  Ilmoita asiaton vastaus