Salasanasuojaus, SSI, HTML5 ja CSS - Luento 3
Luennon aiheina ovat salasanasuojaus, SSI, HTML5 sekä ulkoasun luominen sivustolle CSS:llä (tärkeimmät CSS-ominaisuudet).
Luentotaltiointi
- opetusteknologia3_14.wmv 139M
- opetusteknologia3_14.mp4 H.264-pakkaus, 80M
- opetusteknologia3_14.mp3 11M
Salasanasuojaus
.htaccess on Apache-WWW-palvelimissa käytetty tiedosto, jolla voidaan muuttaa palvelimen asetuksia. .htaccess-tiedoston avulla voidaan toteuttaa mm. salasanasuojaus.
Huomaa, että .htaccess-tiedostossa yksi määritys on aina yhdellä rivillä. Komennon ja parametrien välit erotellaan aina välilyönneillä.
Sijoita suojattavassa kansiossa olevaan .htaccess-tiedostoon rivit:
AuthUserFile /foobar/tunnus/html/hidden/.users AuthGroupFile /dev/null AuthName ByPassword AuthType Basic <Limit GET> require valid-user </Limit>
AuthUserFile-kohtaan annettava polku on oltava WWW-palvelimella toimiva ja sen on osoitettava salasanatiedostoon. Oikean polun alun voi tarkistaa jalava.cc.jyu.fi-koneessa (tai halava.cc.jyu.fi) kirjoittamalla siellä echo $HOME.
[anjoekon@jalava ~]$ echo $HOME /nashome1/anjoekon
Saatuun polkuun pitää vielä lisätä html- ja hidden-kansiot. Esim.
/nashome1/anjoekon/html/hidden/.users
Salasanan ja käyttäjätunnuksen voi luoda jalavassa/halavassa komennolla htpasswd. Jos .users-tiedosto luodaan ensimmäistä kertaa tai tyhjennetään niin rivin on oltava muotoa:
htpasswd -c .users tunnus
Muut tunnukset saa luotua jatkossa komennolla:
htpasswd .users tunnus
Komennon antamisen jälkeen kysytään luodulle tunnukselle laitettava salasana.
Tämän salasanasuojauksen heikkous on se, ettei varsinaista uloskirjautumista pysty toteuttamaan. Uloskirjautuminen tapahtuu siis vasta suljettaessa selain. Uloskirjautumisen toteuttamiseen tarvitaan WWW-ohjelmointia, esim. PHP:tä.
Huomaa, että salasanasuojaus on vain kevyt suojausmenetelmä. Salasanat liikkuvat verkossa lähes salaamattomina ja osaava pystyy poimimaan ne verkkoliikenteestä. Toiset WWW-palvelimen käyttäjät saattavat pystyä myös tutkimaan WWW-hakemistojasi, vaikka niitä ei selaimella saisikaan näkyville.
SSI (Server Side Includes)
SSI-komennot ovat HTML-dokumenttiin upotettuja käskyjä, joilla voidaan tulostaa muuttujien arvoja tai suorittaa ohjelmia.
IT-palveluiden WWW-palvelimessa SSI-komentoja sisältävien tiedostojen
pääte pitää olla .shtml
.
Palvelinta voi käskeä tulkitsemaan SSI-komennot mistä tahansa tiedostoista määräämällä:
AddType text/html .paate AddHandler server-parsed .paate
SSI-esimerkkejä
Kertoo dokumentin muutosajankohdan:
<!--#echo var="LAST_MODIFIED"-->
Päivämäärän esitystapaa voidaan muuttaa SSI-komennolla:
<!--#config timefmt="%Y-%m-%e %T"-->
(eri tulostusformaatteja päivämäärälle)
Lisää tähän kohtaan dokumenttia tiedoston linkit.ssi sisällön:
<!--#include virtual="linkit.ssi"-->
Liitettävään tiedostoon voidaan viitata myös puoliabsoluuttisella viitteellä:
<!--#include virtual="/~omatunnus/hakemistoni/address.include"-->
SSI:llä voidaan määrätä vakiomerkkijono, jota tulostetaan useampaan paikkaan dokumenttia:
<!--#set var="title" value="Opetusteknologia"-->
<!--#set var="css" value="/~omatunnus/hakemistosi/malli.css"-->
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="title" -->">
<link href="<!--#echo var="css" -->" rel="stylesheet" type="text/css" title="Tyylipohja" />
</head>
<body>
<h1><!--#echo var="title" --></h1>
Vakiomuuttujat voi keskittää vaikkapa yhteen tiedostoon.
Lisätietoja SSI:stä löytyy osoitteista:
- http://httpd.apache.org/docs/2.2/mod/mod_include.html
- http://www.mit.jyu.fi/opiskelu/seminaarit/ohjelmistotekniikka/cgi/#Heading13
HTML5
HTML5 on kehitteillä oleva kuvauskieli WWW-sivujen rakentamiseen. Se tulee korvaamaan vanhentuneen HTML4:sen sekä XHTML:n. HTML5-kielessä pyritään yhdistämään HTML:n ja XHTML:n hyvät puolet.
Tällä hetkellä (maaliskuu 2014) HTML5 on Candidate Recommendation -vaiheessa. Suosituksen asema vahvistunee loppuvuoden 2014 aikana, mutta HTML5:sta voi toki alkaa käyttää jo heti kun selaimista löytyy riittävästi tukea, eli käytännössä jo nyt.
Uusimmissa selaimissa (Internet Explorer 11, Firefox 28, Opera 20, Safari 7, Chrome 33) HTML5-tuki alkaa olla jo erittäin hyvällä tasolla.
Selaimien HTML5-testin tuloksia (max. 555 pistettä):
- Tietokoneen selaimia:
- Google Chrome 33: 505
- Opera 20: 496
- Firefox 28: 448
- Internet Explorer 11: 369
- Safari 5: 260 (Windows-versio, jota ei ole päivitetty vuoden 2012 jälkeen)
- Muiden laitteiden selaimia:
- iPad 2:n Safari: 412
- iPad 2:n Chrome: 412
- Lumia 920:n Internet Explorer 10: 328
- Nokia E6:n oma selain: 252
Muiden selaimien tuloksia laitteittain voi tutkia testin tulossivulta.
Uusia elementtejä, joita HTML5 tuo mukanaan ovat mm. seuraavat:
- article
- canvas
- figure
- header
- nav
- section
- footer
- audio
- video
Esimerkkisivu - kokeile sivua esim. Google Chromella. Katso käytetyt HTML5-elementit sivun lähdekoodista.
HTML5 tuo paljon uutta myös lomakkeisiin, katso esim. seuraava materiaali:
- Dive Into HTML5 - A Form of Madness: selitystä uusista HTML5:sen lomakeominaisuuksista esimerkkien kera
Esimerkkisivu HTML5:sen lomake-elementeistä - kokeile sivua esim. Google Chromella tai Operalla. Katso käytetyt lomake-elementit sivun lähdekoodista.
Lisätietoa
- http://appro.mit.jyu.fi/doc/html5/
- HTML5 - Wikipedia
- HTML5 differences from HTML4
- Dive Into HTML5
- Esimerkkejä HTML5-sivuista
- The HTML5 test - testaa selaimen HTML5 tuki
CSS-tyylit
Tyylien määrittäminen
Perusperiaate on muuttaa olemassa olevien HTML-elementtien ominaisuuksia. Oletuksena tyylin nimi on siis sama kuin sen HTML-elementin nimi, jonka ulkoasuominaisuuksia halutaan muokata. Jokaisella muutettavalla ominaisuudella on tietty nimi.
tyylinimi {
ominaisuus: arvo;
}
CSS 1:n ominaisuuksista löytyy dokumentti osoitteesta:
http://appro.mit.jyu.fi/doc/css/
Esim. määritellään body
-elementin tekstin väriksi musta ja taustaväriksi valkoinen:
body {
color: black;
background-color: white;
}
Esim. määritellään kaikille otsikkotasoille sama fontti, väri ja alaviiva:
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;
color: blue;
border-bottom: 1px solid black;
}
- Samat ominaisuudet voidaan laittaa monille eri elementeille erottelemalla elementit pilkuilla.
- Vaihtoehtoiset ominaisuudet luetellaan pilkuilla.
- Jos ominaisuuteen voidaan määrittää useita arvoja, niin ne on eroteltava välilyönnillä.
- CSS-määritykset luetaan käyttöön kirjoitusjärjestyksessä, jolloin voi olla merkitystä missä järjestyksessä tyylisääntöjä kirjoittaa. Jos samalle elementille on määritetty tyylimääritykset CSS-tiedostossa kahteen kertaan, käytetään siis myöhemmin tiedostossa tulevia tyylimäärityksiä.
Myös CSS 2:n ominaisuuksista on oma dokumenttinsa.
Perintä
Dokumenttipuun elementit perivät esim. tekstin värin äitielementiltään:
<h1><strong>CSS</strong> on iso juttu.</h1>
strong-elementti saa saman tekstin värin kuin mikä h1-elementillä on, ellei väriä ole strong-elementille erikseen määrätty. Aivan kaikki ominaisuudet eivät kuitenkaan periydy.
Mittayksiköt
Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em
-yksikköinä.
em
suhteutetaan aina oletusfontin kokoon.
px
(pikseli) -yksikköä voi käyttää pienten (alle 5 px) reunusten ja marginaalien
määrittelyssä sekä kuville tarkoitettujen lohkojen leveyksissä ja korkeuksissa, mutta sitä ei
suositella käytettäväksi kirjasimen koon määrittämiseen.
p {
font-size: 120%;
}
h1 {
margin-top: 1em;
}
h2 {
border: 1px solid black;
}
Muita CSS:n tuntemia yksiköitä ovat ex, in, cm, mm, pt ja pc. Näitä tarvitaan kuitenkin äärimmäisen harvoin ja ex-yksikköä lukuunottamatta ne ovat hyödyllisiä vain, jos käytetyn median fyysinen koko on tiedossa.
Sivuilla käytettävät värit
Värien määrittämisessä on käytössä useita tapoja. Yksi tapa on käyttää prosentteja:
p {
background-color: rgb(100%, 100%, 100%); /* valkoinen */
}
Perusvärit voidaan myös kirjoittaa suoraan nimillä:
p {
background-color: blue; /* sininen */
}
Yksi käytetty tapa on antaa värit RGB-arvoina:
p {
background-color: #FF0000; /* punainen */
}
Linkkejä värien määrittämisestä:
- ColorZilla-laajennus
- Color Scheme Designer 3
- HTMLHelp, "RGB Color Values"
- Gernot Metze, "Color Tables"
Tyylien valitsimet (engl. selectors)
Luokat (class) valitsimina
class
-attribuutin avulla voidaan HTML-elementti määrätä käyttämään
tiettyä tyyliä. Esim.
<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus</p>
Vastaavat tyylimääritykset
p {
background-color: white;
color: green;
text-align: center;
}
p.varoitus {
background-color: white;
color: red;
}
Edellisen valitsimen yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.
.varoitus {
background-color: white;
color: red;
}
Elementin yhteyteen määritelty valitsin on "vahvempi" kuin yleistetty valitsin. Siispä alla olevilla tyylimäärityksillä tekstikappaleen väriksi tulisi punainen, vaikka yleistetty valitsin tulee tyylitiedostossa vasta elementin yhteyteen määritetyn valitsimen jälkeen.
p {
background-color: white;
color: green;
text-align: center;
}
p.varoitus {
background-color: white;
color: red;
}
.varoitus {
background-color: white;
color: blue;
}
Tyylien valitsimien yhteydessä perintä tarkoittaa sitä, että voit luoda luokkia (class) jokaisesta elementistä. Kaikki luokat perivät joitakin ominaisuuksia peruselementiltä (paitsi, jos uusia arvoja määritetään vanhojen tilalle tai ominaisuus ei ole perittävissä).
Esimerkki tyylin aliluokan käytöstä
Tunnisteet (id) valitsimina
id
-attribuutin avulla voidaan HTML-elementti määrätä käyttämään
tiettyä tyyliä. Esim.
<p>Normaalitekstiä kappaleellinen</p>
<p id="varoitus">varoitus</p>
Vastaavat tyylimääritykset
p {
background-color: white;
color: green;
text-align: center;
}
p#varoitus {
background-color: white;
color: red;
}
Tunnistetta käytettäessä täytyy huomata se, että samassa HTML-tiedostossa ei voi olla samaa tunnistetta (id) usealla HTML-elementillä. Näin ollen lähes aina luokan (class) käyttö on suositeltavampaa.
Asiayhteyden mukaan määräytyvät tyylit
Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.
p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:
p strong {
background-color: white;
color: red;
}
Esimerkki asiayhteyden mukaan määräytyvästä tyylistä
Näennäisluokat (pseudoluokat)
Näennäisluokat ovat tyylien erikoistapauksia, joilla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan, onko linkki vierailtu vai ei.
a:link { /* vierailematon linkki */
color: blue;
background-color: transparent;
}
a:visited { /* vierailtu linkki */
color: purple;
background-color: transparent;
}
a:active { /* aktiivinen linkki */
color: red;
background-color: transparent;
}
a:hover { /* kohdistettu linkki */
color: blue;
background-color: grey;
}
Esimerkki näennäisluokkien käytöstä
Laatikkomalli (engl. box model)
CSS:n laatikkomalli määrittää jokaisen elementin laatikoksi, jolla on marginaali, raja, täyte ja sisältö.
Sivulla olevien elementtien rajat saat näkyviin esimerkiksi asentamalla Firefoxiin Web Developer -pluginin. Laatikkomallin saa näkyviin Web Developerissa valinnalla Outline | Outline Block Level Elements.
Elementin koko
Peruskorkeuden määrittää aina sisällön viemä korkeus!
Esim. olkoon div-elementille annettu height: 100%;
ja div on suoraan bodyn sisällä.
Tällöin div-elementin korkeus on 100 % vanhempielementin eli bodyn koosta.
Bodyn korkeus määräytyy sen sisältämän sisällön mukaan, eli jos tekstiä on vähän,
niin div:in korkeus jää pieneksi, eikä esim. koko ruudun korkeudelle.
Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle
Display-ominaisuus
display-ominaisuudella voidaan muuttaa esimerkiksi tekstikappaleen näkymiseen liittyviä ominaisuuksia. Tekstikappaleesta voidaan tehdä visuaalisesti osa toista tekstikappaletta tai sen näkyminen voidaan estää kokonaan. display-ominaisuudelle voidaan asettaa mm. seuraavia arvoja:
- block-arvolla elementti käyttäytyy lohkotason elementin tavoin.
- inline-arvolla elementti käyttäytyy tekstitason (inline) elementin tavoin.
- list-item-arvolla elementti käyttäytyy lista-alkion tavoin.
- none-arvolla elementin sisältöä ei näytetä ollenkaan ja elementti ei vaikuta mitenkään ympäröiviin elementteihin.
Käyttäjien kommentit