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

Näiden kalvojen tarkoitusNä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

ElementtiElementti 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

Elementin rakenne

TagiTagi 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 tagJoskus elementillä ei ole erillistä lopettavaa tagia vaan koko elementin sisältö on ilmaistu aloittavassa tagissa

<img src=”kuva.jpg” alt=”kuvakauniista 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ä

Sisäkkäiset elementitElementit voivat olla sisäkkäisiä◦ Muistathan edeltä esimerkin <ul> =

lista ja <li> = listan rivi elementti

Elementtien välinen hierarkiaSelain 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

Hierarkia, DOM

Elementtien tyyppi: lohko vai in-lineToiset 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ä

Block vs. In-Line elementit

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 rakenneDOCTYPE 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 ulkoasuSe 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 tyylitJos 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

Ulkoasu: Omat tyylitTyylisää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

KertausHTML 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äinNyt 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-viestinnan-ammattilaisille.html

KiitosKysymyksiä, 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