�ݺ�ߣ

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

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

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

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

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

Joskus on pelkkä alku tag
Joskus elementillä ei ole erillistä
lopettavaa tagia vaan koko elementin
sisältö on ilmaistu aloittavassa tagissa

<img src=/slideshow/html-aapinen/29246584/”kuva.jpg” alt=”kuva
kauniista ihmisestä”>
Tällaisessa tagissa sivulle tuotava sisältö
on ilmaistu attribuutilla

◦ src=/slideshow/html-aapinen/29246584/”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ä

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

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

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ä

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

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

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.

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

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

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ä)

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

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

�ݺ�ߣ

Html aapinen

More Related Content

Html aapinen