HTML-kielen perusteet Osa 1 Vilho Kemppainen

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.

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

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.

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!

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

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.

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

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

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

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

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

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

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

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…

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.