15. Html-kieleen tutustumista
HTML
Html (hyper text markup language) on nettisivujen kieli. Selain esim. Chrome tai Firefox kääntää html-koodin käyttäjän katsottavaksi ja selattavaksi, eli siihen muotoon, jossa sivuja useimmiten katsotaan. Nettisivuja voidaan tehdä kirjoittamalla suoraan html ja css-koodia. Toinen tapa luoda sivuja on käyttää editoria, jossa sivu kootaan erilaisista laatikoista ja elementeistä, esim. otsikkolaatikko, valikko. Vaikka nettisivujen tekemiseen käyttäisi editoria, on silti hyvä ymmärtää jotain html-kielestä.
Kaikkien nettisivujen pohjalla olevan html-kielen saa näkyviin myös selaimen kautta. Valitse sitä varten selaimen valikosta Näytä lähdekoodi tai paina Ctrl + U. Kokeile lähdekoodin näkymistä muutamalla sivulla. Lähdekoodi, eli html-versio sivusta on yllättävän pitkä verrattuna sivun varsinaiseen sisältöön. Koodi on suurimmaksi osaksi ns. tägejä, eli kulmasulkeiden väliin kirjoitettuja määrittelyitä. Joskus sivun varsinaista sisältöä on vaikea löytää html koodin joukosta.
Esim. sivulla oleva otsikko, jossa lukee Karhu, merkataan näin <h1> Karhu </h1>
<h1> tarkoittaa, että seuraavaksi tulee otsikko-kokoisena eli isona näytettävää tekstiä.
</h1> tarkoittaa, että tähän loppui otsikkokokoinen teksti. / on aina lopetusmerkki kaikissa html-tägeissä.
Lue enemmän html asiaa Petri Jämsenin sivuilta. Katso läpi HTML5 otsikon alta sivut 1-4 (esittely, editorit, perusteiden esimerkit ja elementit)
Kokeile html:n ymmärtämistä ja kielen muokkaamista W3Schools-sivustolla. W3Schools on erittäin laaja ja luotettava sivusto, jonka avulla voi opiskella nettisivujen tekemiseen tarvittavia kieliä ja myös monia ohjelmointikieliä. Tässä tutustumisvaiheessa käyttökelpoisimpia ovat sivuilla olevat esimerkit "Try it yourself" vihreät laatikot. Alla kuvaselitys laatikoiden toiminnasta. Selaile läpi html-osion neljä ekaa sivua Introduction, Editors, Basic ja Elements. Kokeile kaikkia Try it yourself -laatikoita. Aiheet ovat samat kuin Jämsenin sivustolla.
Ota vielä ruudunkaappauskuva tai kännykuva jostakin ikkunasta, jonka tekstejä ja tägejä olet muokannut ja palauta se alla olevaan laatikkoon.
Kaikkien nettisivujen pohjalla olevan html-kielen saa näkyviin myös selaimen kautta. Valitse sitä varten selaimen valikosta Näytä lähdekoodi tai paina Ctrl + U. Kokeile lähdekoodin näkymistä muutamalla sivulla. Lähdekoodi, eli html-versio sivusta on yllättävän pitkä verrattuna sivun varsinaiseen sisältöön. Koodi on suurimmaksi osaksi ns. tägejä, eli kulmasulkeiden väliin kirjoitettuja määrittelyitä. Joskus sivun varsinaista sisältöä on vaikea löytää html koodin joukosta.
Esim. sivulla oleva otsikko, jossa lukee Karhu, merkataan näin <h1> Karhu </h1>
<h1> tarkoittaa, että seuraavaksi tulee otsikko-kokoisena eli isona näytettävää tekstiä.
</h1> tarkoittaa, että tähän loppui otsikkokokoinen teksti. / on aina lopetusmerkki kaikissa html-tägeissä.
Lue enemmän html asiaa Petri Jämsenin sivuilta. Katso läpi HTML5 otsikon alta sivut 1-4 (esittely, editorit, perusteiden esimerkit ja elementit)
Kokeile html:n ymmärtämistä ja kielen muokkaamista W3Schools-sivustolla. W3Schools on erittäin laaja ja luotettava sivusto, jonka avulla voi opiskella nettisivujen tekemiseen tarvittavia kieliä ja myös monia ohjelmointikieliä. Tässä tutustumisvaiheessa käyttökelpoisimpia ovat sivuilla olevat esimerkit "Try it yourself" vihreät laatikot. Alla kuvaselitys laatikoiden toiminnasta. Selaile läpi html-osion neljä ekaa sivua Introduction, Editors, Basic ja Elements. Kokeile kaikkia Try it yourself -laatikoita. Aiheet ovat samat kuin Jämsenin sivustolla.
Ota vielä ruudunkaappauskuva tai kännykuva jostakin ikkunasta, jonka tekstejä ja tägejä olet muokannut ja palauta se alla olevaan laatikkoon.
Palauta w3schools kuva
Sinulla ei ole tarvittavia oikeuksia lähettää mitään.