HTML – Annukka Leppänen

2016/06/16

Kategoriat

Websuunnittelu

HTML5 ja CSS3 Osa 10: Pseudo-luokat

Pseudo-luokat (pseudo-class) Osaat jo tehdä linkkejä sivuillesi, mutta niiden oletus-ulkoasu saattaa olla epäsopiva muuhun designiin nähden. Onneksi niitä voi tyylitellä, sillä <a> on tagi siinä missä muutkin. a { color: red; background-color: yellow; } Linkit ovat kuitenkin hieman monimutkaisempia, sillä niillä on […]

2016/05/24

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 Osa 9: Div ja Span

Nämä kaksi ovat hyviä kandidaatteja edellisessä osassa opetelluilla id:llä ja classilla muotoiltaviksi, sillä niillä ei ole mitään ennalta määrättyä tarkoitusta. Ennen HTML5:n uusia rakenne-elementtejä (näistä myöhemmin lisää) käytettiin diviä todella paljon sivun asetteluun, ja sillä on yhä paikkansa, jos et pysty käyttämään jossain […]

2016/04/13

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 8: class ja ID

Luokka eli class ja ID Edellisessä osassa opimme muotoilemaan tekstiä. Ja ottaa säännöt käyttöön esim kappaleessa. Mutta mitä jos haluaisimme tehdä yhden kappaleen, jossa on erilainen ulkoasu kuin sen alla olevassa kappaleessa? Ratkaisuja on parikin, mutta aloitetaan luokalla. Luokan eli classin hyvä puoli […]

2016/02/22

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 7: Tekstin ulkoasu

Tekstin ulkoasu (font-family) Aloitetaan fontista. Asetetaan pääotsikon fontiksi Verdana: h1 { font-family: Verdana, Arial, sans-serif; } Säännöissä kannattaa hyödyntää mahdollisuutta lisätä yksi varafontti, mikäli ekaa vaihtoehtoa ei löydy (tässä siis toivotaan Verdanaa, mutta jos käyttäjän koneelta ei sitä löydy, käy myös Arial) ja […]

2016/01/20

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 6: CSS alkaa

Pääsemme vihdoin CSS:n pariin. Homma käynnistyy esittelyllä ja värien käytöllä. Nyt meillä on HTML:n avulla rakennettuna sivu, jolla kuvia, lomake ja tekstiä. Tulos on aika ”ruma”, koska nykyään sivujen ulkoasua ei enää säädellä erilaisten tagien kautta, vaan käyttämällä Cascading Style Sheetseja, tyylitiedostoja […]

2016/01/04

Julkaisija Annukka Leppänen

Kategoriat

Websuunnittelu

HTML5 ja CSS3 osa 5: Lomake

Tässä osassa tutkitaan lomakkeen tekemisen salat Lomakkeen avulla voit olla yhteydessä käyttäjän kanssa. Voit kerätä sen avulla mm. tietoa tai käyttäjä voi lähettää palautetta tai tilata sinulta jotain. Lomake esitetään <form></form> tagilla. Kaikki lomake elementit, kuten tekstikentät, pudotusvalikot ym sijoitetaan aloittavan ja […]