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
- tiep161_s16_l3.wmv video, 155M
- tiep161_s16_l3.mp4 video, H.264-pakkaus, 99M
- tiep161_s16_l3.mp3 pelkkä ääni, 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.4/mod/mod_include.html
- http://www.mit.jyu.fi/opiskelu/seminaarit/ohjelmistotekniikka/cgi/#Heading13
HTML5
HTML5 on syksyllä 2014 suosituksen aseman saanut kuvauskieli WWW-sivujen rakentamiseen. Se on korvannut vanhentuneen HTML4:sen sekä XHTML:n. HTML5-kielessä pyritään yhdistämään HTML:n ja XHTML:n hyvät puolet. Myös ensimmäinen virallinen päivitys HTML5-kieleen sai äskettäin (1.11.2016) suosituksen aseman: HTML 5.1
Suosituimpien selainten (Internet Explorer, Firefox, Opera, Safari, Chrome) uusimmissa versioissa HTML5-tuki on jo erittäin hyvällä tasolla.
Selaimien HTML5-testin tuloksia (max. 555 pistettä):
- Tietokoneen (Windows 7 -käyttöjärjestelmällä) selaimia:
- Google Chrome 54: 499
- Opera 41: 496
- Firefox 49: 465
- Internet Explorer 11: 302
- Muiden laitteiden selaimia:
- iPad Air 2:sen Safari: 391
- iPad Air 2:sen Chrome 54: 391
- Lumia 920:n Internet Explorer 11: 311
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. 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
- 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.
Lisätietoa
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) -suositukset
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) -dokumentti (tällä hetkellä kehitettävä versio)
Käyttäjien kommentit