Verkkosivujen peruskäsitteet HTML ja CSS yksinkertaistettuna.

1. HTML:n ABC
HTML-MERKKAUSKIELEN ABC. YKSINKERTAISTETTU
KUVAUS SIITÄ MITÄ HTML ON JA MILTÄ SE NÄYTTÄÄ

2. Näiden kalvojen tarkoitus
Nämä kalvot on tarkoitettu esitiedoiksi Corellia Helsinki Oy:n HTML
peruskursseille saapuville ja miksei yleistiedoksi muillekin
Tarkoitus on nopeuttaa kurssilla varsinaiseen asiaan pääsemistä
Mitä käsittelen näillä kalvoilla
◦
◦
◦
◦
Mistä osista verkkosivu koostuu
Verkkosivun rakennuspalikat – HTML elementit
Sivun rakenne
Mistä sivun ulkoasu tulee
Pääasiallisena tarkoituksena on vain selvittää peruskäsitteet ennen kurssille
tuloa

3. Mitä HTML on?
HTML on yksinkertainen tapa
kuvata määrämuotoisesti sisältö,
jota selain näyttää
HTML:n avulla selaimelle
kerrotaan
◦ Ohjeita siitä miten sen tulisi
saamaansa sisältöä käsitellä
◦ Mitä sisältöä sen tulisi näyttää
käyttäjälle

4. Elementti
Elementti on HTML:n ’rakennuspalikka’
◦ Ne on määritetty spesifikaatiossa ja jokaisella elementillä on oma tehtävänsä, jonka selaimet
ymmärtävät
Elementtejä on moneen eri tarkoitukseen mm:
◦
◦
◦
◦
Ohjeiden antamiseksi selaimelle
Tietojen ryhmittämiseksi
Taulukoiden tai lomakkeiden tekemiseksi
Tekstitasoisten tietojen määrittämiseksi
HTML5 määrityksessä on hieman toistasataa elementtiä. Ne kyllä oppii nopeasti
eikä kaikkia (ihan oikeasti) tarvitse muistaa

5. Elementin rakenne

6. Tagi
Tagi on siis se < ja > merkeillä rajattu kokonaisuus, jossa näiden merkkien välissä
on elementin nimi (tyyppi)
Elementtejä ovat esimerkiksi
◦
◦
◦
◦
◦
◦
<table> = kuten arvaat, taulukko
<ul> = ’unordered list’ eli yleiskielellä ns. ’pallukkalista’
<li> = list item eli listan rivi vaikkapa yllä mainitussa <ul> listasssa
<h1> = otsikkoteksti (h1 on tärkein, h6 on viimeinen alaotsikkotaso)
<img> = kuva
<video> = video

7. Joskus on pelkkä alku tag
Joskus elementillä ei ole erillistä
lopettavaa tagia vaan koko elementin
sisältö on ilmaistu aloittavassa tagissa
<img src=”kuva.jpg” alt=”kuva
kauniista ihmisestä”>
Tällaisessa tagissa sivulle tuotava sisältö
on ilmaistu attribuutilla
◦ src=”kuva.jpg” tarkoittaa, että selain näyttää
sivullä tässä kohtaa kuvan, jonka tiedostonimi
on kuva.jpg
◦ alt=”kuva kauniista ihmisestä” tarkoitus on
kertoa mitä siinä oleva sisältö esittää ellei
kuvaa voi nähdä

8. Sisäkkäiset elementit
Elementit voivat olla sisäkkäisiä
◦ Muistathan edeltä esimerkin <ul> =
lista ja <li> = listan rivi elementti

9. Elementtien välinen hierarkia
Selain rakentaa aina verkkosivusta hierarkisen rakenteen, jossa elementit ovat
peräkkäin ja/tai sisäkkäin
Tätä hierarkista rakennetta kutsutaan Document Object Model –käsitteellä.
Tuttavallisemmin DOM
Tämä on tärkeä ymmärtää kun myöhemmin miettii esimerkiksi elementtien
muotoiluja tai vaikkapa suunnittelee eri näkymiä eri kokoisille näytöille

10. Hierarkia, DOM

11. Elementtien tyyppi: lohko vai in-line
Toiset elementit ovat sellaisia, että ne sijoittuvat aina ’omalle rivilleen’
Tällaisia ovat mm. otsikot kuten <h1> tai <h2> ja vaikkapa tavalliset
tekstikappaleet <p>
Toiset elementit voivat olla rinnakkain kuten vaikkapa <img> elementit
◦ Kuvia menee sivulle rinnakkain niin monta kuin mahtuu ja kun ei enää mahdu, niin seuraava
aloittaa uuden ’rivin’
Tätä käytöstä voidaan muuttaa tyylisäännöillä

12. Block vs. In-Line elementit

13. HTML on sivun sisältöä
HTML siis antaa selaimelle ohjeita siitä mitä sen tulee tehdä kuten
◦ Ladata erillisiä tyylitiedostoja
◦ Ladata ja suorittaa JavaScript tiedostoja
◦ Mitä laitetaan selaimen otsikoksi välilehdelle
Näiden lisäksi HTML merkkauksella sivulle lisätään kaikki käyttäjälle näytettävä
sisältö kuten
◦ Teksti
◦ Kuvat
◦ Videot

14. Sivun rakenne
DOCTYPE kertoo selaimelle, että
kyseessä on html –tiedosto
head –osiossa on ohjeita
selaimelle
body –osiossa on käyttäjälle
näytettävä sisältö
Ja kaikki tämä on sijoitettu html juurielementin sisään

15. HTML on sisältö, CSS on ulkoasu
Se miltä sisältö näyttää selaimessa,
on määritetty CSS –tyylitiedostossa
– Aina
◦ Silloinkin kun et ole itse määritellyt
tyylejä!
Selaimilla on oma sisäänrakennettu
tyylitiedostonsa, jossa määritetään
miltä otsikot näyttävät ja mitä
kirjasintyyppiä käytetään jne.

16. Ulkoasu: CSS tyylit
Jos halutaan vaikuttaa siihen miltä verkkosivu näyttää tarvitaan CSS tyylejä. Ja
miksi ei haluttaisi vaikuttaa – tietenkin halutaan…
CSS tyylit voidaan kirjoittaa html –tiedostoon mutta yleensä on parempi, että ne
kirjoitetaan erilliseen tiedostoon
Tämä ’tyylitiedosto’ voidaan sitten linkittää useaan html -tiedostoon ja näin
yhdellä tyylimäärittelyllä voidaan hoitaa monta monta verkkosivua
Tällainen linkki laitetaan html –sivun <head> osioon

17. Ulkoasu: Omat tyylit

18. Ulkoasu: Omat tyylit
Tyylisäännöillä voidaan vaikutetaan kaikkeen miltä verkkosivu näyttää
selaimessa
◦
◦
◦
◦
◦
Miten se toimii eri kokoisilla näytöillä
Mitä värejä käytetään missäkin
Marginaalit, reunukset ym.
Elementtien (sivun osien) sijoittuminen näytöllä eli sivun asemointi (layout)
Ja paljon paljon muuta

19. Kertaus
HTML merkkausta käytetään sivun sisällön ja rakenteen määrittämiseksi
◦ Osa tiedoista on tarkoitettu vain selaimelle ja osa sivua lukevalle olennolle, yleensä ihmiselle
Kaikki ulkoasuun vaikuttava tehdään CSS koodilla tyylitiedostoissa, jotka
linkitetään html –tiedostoihin
Selaimet rakentavat html –tiedostosta sivun lukijalle näytettäväksi
◦ Ellei tyylejä ole määritelty käyttää selain omia oletuksiaan siitä miltä sivu näyttää
Jos sivulla pitäisi olla toiminnallisuutta tehtäisiin se JavaScript ohjelmoinnilla
(mutta siitä en ole maininnut mitään tässä esityksessä)

20. Tästä eteenpäin
Nyt kun tiedät mitä HTML tarkoittaa, miltä se näyttää sekä tiedät, että ulkoasu
määritetään tyylitiedostoilla ja miltä CSS säännöt näyttävät, tiedät mistä
verkkosivut rakennetaan
Näiden kalvojen opeilla ei vielä ryhdytä web-koodariksi mutta tästä on hyvä
jatkaa kurssilla
Tervetuloa
http://store.corellia.fi/web/web-suunnittelu/html-ja-css-abc-viestinnanammattilaisille.html

21. Kiitos
Kysymyksiä, ajatuksia, toiveita, kommentteja
Corellia Helsinki Oy
◦
◦
◦
◦
◦
◦
Vilhonkatu 5A, 00100 Helsinki
Kari Selovuo, Advisor, ACI, ACP
kari@corellia.fi
040 1565 040
http://fi.linkedin.com/in/kariselovuo/
@KariSelovuo