HyperText Markup Language

HTML, eli HyperText Markup Language on helpoin tapa tai ainakin yksi helpoimmista tavoista opetella ohjelmoimaan. Sinun tarvitsee opetella vain kourallinen komentoja ja saat aikaiseksi jo valmista jälkeä. Tosin saadaksesi aikaiseksi näyttävää jälkeä, sinun tulee opetella tämän lisäksi toinenkin ohjelmointikieli, eli CSS (Cascade Stylesheet), jonka avulla pystyt muotoilemaan HTML-sivun aivan sellaiseksi, kuin haluat.

Periaatteessa et tarvitse mitään eritystä ohjelmaa HTML:n kirjoittamiseen, mutta on hyvä muistaa, että ohjelman pitää tallentaa teksti puhtaana tekstinä, joten Wordin tai muiden tekstinkäsittelyohjelmien käyttäminen voi olla hankalaa, sillä jos vahingossa tallentaa niiden oletusformaatissa (esim. Wordissä: docx), tulee mukaan paljon sellaista, jota emme halua mukaan. Siksi on hyvä käyttää sellaista ohjelmaa, joka tallentaa vain puhdasta tekstiä. Tällainen on Windowsissa esim. NotePad. Tosin, jos haluat hieman lisää tehoja mukaan, kuten täydentävät tekstit ja erottavat värit, silloin kannattaa ladata esimerkiksi Notepad++ tai vaikkapa Atom.

Mutta pidemmittä puheitta. lähdetään tekemään koodia.

<!DOCTYPE html>
<html>
<head>
<title>Ensimmäinen HTML-sivuni</title>
</head>
<body>
<h1>Tervetuloa sivuilleni</h1>
<p>Tämä on ensimmäinen HTML-sivuni, jonka olen koskaan rakentanut</p>
</html>

Yllä näet esimerkin täydellisestä HTML-sivusta, jota lähdemme pala palalta katselemaan, mitä se pitää sisällään ja miten se rakentuu.

<!DOCTYPE html> pitää olla ensimmäisenä komentona ja se kertoo, että kyseessä on HTML5-sivu. Se myös kertoo, minkälaista dokumenttia on odotettavissa (html). Tämä on sinänsä tärkeää, sillä HTML ei ole ainoa dokumentti, joka on kirjoitettu samankaltaisella kielellä. On olemassa mm. XML(eXtensible Markup Language), jonka avulla kuvataan tietoa tiedosta, DHTML (Dynamic HTML), joka on yleisnimitys eri tekniikoille, joilla lisätään staattiseen HTML rakenteeseen toiminnallisuutta. Sitten on XHTML (eXtensible Hypertext Markup Language) – HTML:stä kehitetty www-sivujen merkintäkieli, joka täyttää XML:n muotovaatimukset sekä VRML (Virtual Reality Modeling Language) – Tiedostomuoto, jolla esitetään kolmiulotteista (3D) interaktiivista vektorigrafiikkaa. VRML on suunnattu erityisesti Web käyttöön. Lisäksi on vielä SGML (Standard Generalized Markup Landuage) – Metakieli, jonka avulla voidaan määritellä dokumenttien merkintäkieliä. SGML pohjautuu IBM:n Generalized Markup Languageen ( GML).

Tämän jälkeen kerrotaan, että aloitetaan html-dokumentti (<html>). Huomaa, että aivan dokumentin lopussa on tämän vastinpari (</html>), eli lähes kaikki html-tägit (eli html-komennot, jotka merkitään kulmasulkujen väliin) vaativat vastinparin. Ja nämä vastinparit eivät saa mennä ristikkäin, eli esimerkiksi ei näin: <h1><p></h1></p>, vaan näin: <h1><p></p></h1>. Jos nimittäin lopetamme h1:en ennenkuin p:n, silloin p ei enää osaa loppua (periaatteessa), koska ei enää löydä vastipariaan.

Katso siis tarkkaan takaisin tuohon esimerkkiin ja huomaat, että kaikki ovat siististi sisäkkäin ja kaikilla, paitsi <DOCTYPE> -komennolla on oma vastinparinsa.

 Seuraavaksi tulee kokonainen osio:

<head>
<title>Ensimmäinen HTML-sivuni</title>
</head>

 Tuo <head>-osio pitää sisällään paljon sellaista, mitä ei tule varsinaiselle sivulle. Sinne laitetaan linkit, jos meillä sellaisia on esimerkiksi CSS-tyylitiedostoihin tai javascript-osioihin, sinne voidaan kirjoittaa metatietoja (tietoa, jota emme halua sivulle, mutta haluamme, että se silti on sivuston mukana, esimerkiksi sivuston luojan tiedot) sekä siellä on <title>-osio, jonka sisältö näkyy selaimen välilehden otsikossa.

 Tämän jälkeen meillä alkaa varsinainen www-sivu ts. sen sisältö <body>-komennolla ja jatkuu niin pitkälle, kunnes sen vastinpari </body> tulee vastaan. Tänne siis kirjoitetaan, linkitetään ja sijoitetaan kaikki se, mitä haluamme näyttää sivulla.

 <h1> – Otsikkotägi, näitä meillä on kaikkiaan kuusi, <h1>, <h2> … <h6>, siten, että <h1> on kirjasinkooltaan kaikkein suurin ja <h6> kaikkein pienin. Toisaalta tämä on vain oletus, koska CSS-muotoilulla voimme muokata tätä oletusta ihan millaiseksi itse haluamme.

 <p> – Kappaletägi. Kun kirjoitamme tekstiä HTML:ssä, aloitamme kappaleen tällä merkillä ja lopetamme vastaavasti tämän vastinkappaleeseen, jotta HTML tietää, että tässä on kappale. Muutoin HTML kirjoittaisi kaiken yhteen putkeen.

 Kun HTML tiedoston on kirjoittanut jollakin ohjelmalla, se pitää tietenkin tallentaa, että sitä voi katsella selaimella. Tiedosto pitää tallentaa .html-päätteellä (tai .htm), jotta selain ymmärtää, että kyseessä on HTML-tiedosto. Nyt jos kyseessä on jokin tekstinkäsittelyohjelma, on muistettava muuttaa tiedostomuoto, esim. Wordissä “Www-sivu, suodatettu”, ennenkuin tallentaa, jolloin Word-tallentaa .html-muodossa. Notepad++:ssa voi valita “Hyper Text Markup language file” ja Atom:ssa kirjoittaa vain nimen perään .html.

Viimeksi muutettu: tiistai, 28. huhtikuuta 2020, 05:46