HTML & CSS aloittelijoille

HTML & CSS aloittelijoille (Osa 01): Ensimmäinen silmäys HTML:iin, CSS:iin ja muihin.

Kaikki oppaan videot

Hypertekstimuotoilukieli on WWW:n koti- ja työkieli. Tämän kielen ensimmäinen versio julkaistiin vuonna 1992. Siitä lähtien HTML:llä on ollut lukuisia muokkauksia ja se on nyt versiossa 5. (Vaikka versiota 5 ei ole vielä virallisesti hyväksytty standardiksi, sitä tuetaan jo melko hyvin nykyisissä selaimissa).

HTML on ns. merkintäkieli, jonka avulla sisältöä voidaan järjestellä. Sisällön muotoilusta vastaavat tyylitiedostot. Näistä lisää jäljempänä.

HTML:n jatkokehityksestä vastaa World Wide Web Consortium (lyhyemmin W3C).

Käykää säännöllisesti W3C:n verkkosivuilla pysyäksenne ajan tasalla web-alueen nykyisistä kehityssuunnista.

Kun tutustut HTML:ään, yksi kysymys on erityisen tärkeä: Minkä version minun pitäisi valita? Voitte varmasti kuvitella, että kieli kuten HTML päivitetään jatkuvasti. Uusia elementtejä lisätään, vanhoja poistetaan.

Tässä tärkeimmät HTML:n kieliversiot ja virstanpylväät:

• HTML (marraskuu 1992): Se oli ensimmäinen versio. Painopiste oli yksinomaan tekstiasiakirjoilla.

• HTML 2.0 (marraskuu 1995): Nyt on mukana myös kuvia ja lomakkeita koskevia elementtejä.

• HTML 4.0 (joulukuu 1997): Tyyliarkit, kehykset ja skriptit otetaan käyttöön.

• XHTML 1.0 (tammikuu 2000): Kyseessä on HTML 4.0:n uudelleenmuotoilu XML:n avulla.

• HTML5 (huhtikuu 2009): Kyseessä on yhä luonnosvaiheessa oleva versio, eli se ei ole vielä virallinen standardi.

Tulevissa opetuksissa keskitytään HTML5:een. HTML5:n avulla HTML-maailmassa tapahtuu lopultakin edistysaskel. Uusi määrittely tarjoaa useita mielenkiintoisia uudistuksia, kuten huomattavasti mukavammat lomakkeet, edistymisindikaattorit, piirtoelementit ja parannettu asiakirjarakenne. Lisäksi uuden standardin avulla videoita voidaan upottaa verkkosivuille ilman lisäosia, ja siinä on raahaa ja pudota -liitäntä.

Ensimmäinen ehdotus HTML5:stä julkaistiin jo vuonna 2004 Web Hypertext Application Technology Working Groupin (WHATWG) toimesta nimellä Web Applications 1.0.

Vaikka HTML5:ää ei ole vielä julkaistu virallisena standardina, selaimet ovat jo sisällyttäneet useita HTML5-toimintoja tuotteisiinsa. Tämä ei ole yllättävää, sillä WHATWG on mm. selainten valmistajien, kuten Applen, Mozillan ja Ooperan, liittouma. WHATWG perustettiin suoraan reaktiona WWW-konsortion (W3C) hitaaseen web-standardien kehitykseen.

On syytä miettiä, mikä sai selainten valmistajat kehittämään oman HTML-standardin. Tähän asti HTML:n kehitys on ollut tiukasti W3C:n käsissä. Selainten valmistajien näkökulmasta ongelmat alkoivat siitä, kun W3C muutti HTML 4.01:n ilman merkittäviä sisältömuutoksia XHTML 1:ksi. W3C alun perin halusi vakiinnuttaa XHTML 1:llä ensimmäisen askeleen XML-pohjaiseen verkkoon. Lopullisena tavoitteena oli XHTML 2. Juuri tämä W3C:n keskittyminen XML:ään ärsytti selainten valmistajia. Heidän näkökulmastaan XML-lähestymistapa on käytännössä epäkäytännöllinen eikä heijasta käyttäjien todellisia toiveita. (W3C näkee asian tietysti toisin).

Vuodesta 2007 lähtien W3C ja WHATWG ovat yhdessä kehittäneet HTML5-spesifikaatiota ja työskennelleet sen parissa. Ajankohtaisia kehityksiä koskien HTML5:ttä löytyy osoitteesta http://www.w3.org/TR/html5/.

Tulevissa opetuksissa keskitytään edelleenkin HTML5:een.

CSS:n muotoiluun

Olette varmasti käyttäneet dokumenttipohjia Wordissa tai muissa tekstinkäsittelyohjelmissa. Esimerkiksi valitessanne rivin voitte valita muotoilupohjan.

Dokumenttipohjien muotoilupohjan mukaisesti näkyy sitten otsikko. Pohjan vaihtuessa myös otsikon ulkonäkö muuttuu.

Mikä sitten on yhteydessä Wordiin HTML:ssä? Myös HTML-dokumenteille on olemassa muotoilupohjia. Nämä pohjat voidaan määrittää CSS:llä (Leveillään tyylitiedostoilla). CSS:n avulla voidaan esimerkiksi määrittää, että pääotsikot (h1) näkyvät 22 pikselin kokoisina vihreällä Arial-fontilla.

Tyylitiedostot mahdollistavat tiukan erottelun rakenteen ja ulkoasun välillä. Dokumenttien rakenteen määrittely tapahtuu HTML:llä, kun taas ulkonäön määrittelee CSS.

Tarvitsemanne

Tulevissa opetuksissa tutustutte vaiheittain HTML:ään ja CSS:ään. Jotta voitte toteuttaa itse verkkosivuja HTML:n ja CSS:n perusteella, ette tarvitse monimutkaista ohjelmistoa. Yksinkertaisimmillaan voitte käyttää Windows-käyttöjärjestelmässä vakio-ohjelmaa.

Se ei ehkä ole kovin mukava, mutta riittää alkuun. Jos haluat hieman mukavampaa, sinun kannattaa harkita "oikeaa" HTML-editoria. Yksi klassikoista on tietysti Dreamweaver.

Tämä editori ei kuitenkaan ole ilmainen.

HTML & CSS aloittelijoille (Osa 01): Ensimmäinen katsaus HTML:iin, CSS:ään ja muihin.

Sen sijaan yksityiskäyttäjille ilmainen vaihtoehto on phase5 (http://www.phase5.info/). Jos siis haluat käyttää editoria yksityistarkoituksiin, tässä on hyvä ja ilmainen työkalu käytettävissäsi.

HTML & CSS aloittelijoille (Osa 01): Ensimmäinen katsaus HTML:iin, CSS:ään ja muihin.



Lisäksi editorin lisäksi sinun tulisi asentaa tärkeimmät selaimet sivustojen testaamista varten. Selaimet nimittäin tulkkaavat HTML:ää ja CSS:ää joskus aika omaperäisesti. Tästä syystä perusteellinen sivustojen testaaminen eri selaimilla on velvollisuus. Sinun tulisi asentaa vähintään Internet Explorer, Google Chrome ja Mozilla Firefox. Ihanteellisesti testaat kuitenkin sivustoa myös Operan selaimella ja tabletilla / älypuhelimella.