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 j...
Mitä HTML on?
HTML on yksinkertainen tapa
kuvata määrämuotoisesti sisältö,
jota selain näyttää
HTML:n avulla selaimelle
ke...
Elementti
Elementti on HTML:n ’rakennuspalikka’
◦ Ne on määritetty spesifikaatiossa ja jokaisella elementillä on oma tehtä...
Elementin rakenne
Tagi
Tagi on siis se < ja > merkeillä rajattu kokonaisuus, jossa näiden merkkien välissä
on elementin nimi (tyyppi)
Elemen...
Joskus on pelkkä alku tag
Joskus elementillä ei ole erillistä
lopettavaa tagia vaan koko elementin
sisältö on ilmaistu alo...
Sisäkkäiset elementit
Elementit voivat olla sisäkkäisiä
◦ Muistathan edeltä esimerkin <ul> =
lista ja <li> = listan rivi e...
Elementtien välinen hierarkia
Selain rakentaa aina verkkosivusta hierarkisen rakenteen, jossa elementit ovat
peräkkäin ja/...
Hierarkia, DOM
Elementtien tyyppi: lohko vai in-line
Toiset elementit ovat sellaisia, että ne sijoittuvat aina ’omalle rivilleen’
Tällais...
Block vs. In-Line elementit
HTML on sivun sisältöä
HTML siis antaa selaimelle ohjeita siitä mitä sen tulee tehdä kuten
◦ Ladata erillisiä tyylitiedost...
Sivun rakenne
DOCTYPE kertoo selaimelle, että
kyseessä on html –tiedosto

head –osiossa on ohjeita
selaimelle
body –osioss...
HTML on sisältö, CSS on ulkoasu
Se miltä sisältö näyttää selaimessa,
on määritetty CSS –tyylitiedostossa
– Aina
◦ Silloink...
Ulkoasu: CSS tyylit
Jos halutaan vaikuttaa siihen miltä verkkosivu näyttää tarvitaan CSS tyylejä. Ja
miksi ei haluttaisi v...
Ulkoasu: Omat tyylit
Ulkoasu: Omat tyylit
Tyylisäännöillä voidaan vaikutetaan kaikkeen miltä verkkosivu näyttää
selaimessa
◦
◦
◦
◦
◦

Miten se ...
Kertaus
HTML merkkausta käytetään sivun sisällön ja rakenteen määrittämiseksi
◦ Osa tiedoista on tarkoitettu vain selaimel...
Tästä eteenpäin
Nyt kun tiedät mitä HTML tarkoittaa, miltä se näyttää sekä tiedät, että ulkoasu
määritetään tyylitiedostoi...
Kiitos
Kysymyksiä, ajatuksia, toiveita, kommentteja

Corellia Helsinki Oy
◦
◦
◦
◦
◦
◦

Vilhonkatu 5A, 00100 Helsinki
Kari ...
Upcoming SlideShare
Loading in …5
×

Html aapinen

760 views

Published on

Verkkosivujen peruskäsitteet HTML ja CSS yksinkertaistettuna.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
760
On SlideShare
0
From Embeds
0
Number of Embeds
274
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html aapinen

  1. 1. HTML:n ABC HTML-MERKKAUSKIELEN ABC. YKSINKERTAISTETTU KUVAUS SIITÄ MITÄ HTML ON JA MILTÄ SE NÄYTTÄÄ
  2. 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. 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. 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. 5. Elementin rakenne
  6. 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. 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. 8. Sisäkkäiset elementit Elementit voivat olla sisäkkäisiä ◦ Muistathan edeltä esimerkin <ul> = lista ja <li> = listan rivi elementti
  9. 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. 10. Hierarkia, DOM
  11. 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. 12. Block vs. In-Line elementit
  13. 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. 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. 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. 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. 17. Ulkoasu: Omat tyylit
  18. 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. 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. 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. 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

×