HTML-kielen perusteet Osa 1 Vilho Kemppainen 21.09.2005.

Esitys aiheesta: "HTML-kielen perusteet Osa 1 Vilho Kemppainen 21.09.2005."— Esityksen transkriptio:

1 HTML-kielen perusteet Osa 1 Vilho Kemppainen 21.09.2005

2 Mitä on HTML?  HTML = HyperText Markup Language  Rakenteisen tekstin merkkauskieli.  Laiteympäristöstä ja käyttöjärjestelmästä riippumaton kieli (ainakin pitäisi olla  ).  Ollut käytössä vuodesta 1990 alkaen.

3 Määritelmiä  HTML-dokumentti  WWW-sivu  Internet-selain

4 Määritelmiä  HTML-dokumentti: Dokumentti, joka sisältää HTML-kielen muotoilukomentoja ja joka muodostaa siten ohjeet Internet-selaimessa esitettävien WWW-sivujen loogiseen tai fyysiseen muotoiluun. Tiedostopääte on.htm tai.html.

5 Määritelmiä  WWW-sivu: Muodostuu HTML-dokumentin ohjeiden mukaan muotoilluista taulukoista, lomakkeista, linjoista, tekstistä sekä linkitetyistä multimediadokumenteista kuten kuvista, äänistä videoista yms. WWW-dokumenttia ei ole olemassa!

6 Määritelmiä  Internet-selain: Synonyymeja ovat WWW-selain ja asiakasohjelma. Ohjelmia, jotka muotoilevat WWW-sivun HTML- dokumentin ohjeiden mukaan.

7 Mitä työvälineitä tarvitaan?  Tekstieditori Puhtaan ASCII-tekstin kirjoittamiseen tarkoitettu ohjelma. esim. Windowsin Muistio.  Internet-selain Editorilla kirjoitetun HTML-koodin testaamiseen. Toimiiko sivusi kuten suunnittelit? Esim. Internet Explorer.

8 HTML-koodin rakenne 1 Kaikki HTML-koodi sijoitetaan seuraavanlaisen ns. tagi-parin väliin: (alkumerkki) …koodia… (loppumerkki)

9 HTML-koodin rakenne 2 Dokumentin otsikko-osa sijoitetaan HEAD-osioon: (alkumerkki) …tietoa tästä HTML-dokumentista… (loppumerkki)

10 HTML-koodin rakenne 3 HEAD-osioon laitetaan myös dokumentin otsikko (joka näkyy selaimessa sivun otsikkona): Vilhon kotisivu

11 HTML-koodin rakenne 4 Varsinainen WWW-sivun näkyvä sisältö tulee BODY-osioon: (alkumerkki) …koodia… (loppumerkki)

12 HTML-dokumentin päärakenne …Otsikko… …koodia…

13 Loogiset otsikkotasot Pääotsikko Ylin alaotsikko Alempi otsikko Alaotsikko Alin otsikkotaso

14 Kappalejako  HTML-tekstissä olevat rivinvaihdot eivät vaikuta kappalejakoon.  Tekstikappaleet tulee erottaa toisistaan P-elementillä. …ensimmäinen kappale… …viimeinen kappale…

15 Keskitys ja tasaus Tagiparin väliin jäävä teksti ja kuvat keskitetään ikkunan keskelle. Vastaavasti tasataan oikealle tai vasemmalle tageilla: …oikealle tasattavaa… …vasemmalle tasattavaa…

16 Yleistä työskentelytavoista  Pidä tekstieditori ja Internet-selain avoinna yhtäaikaa.  Kun olet tehnyt tekstieditorissa muutoksen koodiin, tallenna tiedosto (sulkematta sitä).  Internet-selaimessa paina Päivitä- painiketta, jolloin äsken tallettamasi muutokset tulevat voimaan.