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

Ongelmia videon katselussa?

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:

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ä):

Muiden selaimien tuloksia laitteittain voi tutkia testin tulossivulta.

Uusia elementtejä, joita HTML5 tuo mukanaan ovat mm. seuraavat:

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:

Esimerkkisivu HTML5:sen lomake-elementeistä - kokeile sivua esim. Google Chromella. Katso käytetyt lomake-elementit sivun lähdekoodista.

Lisätietoa

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;
}

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ä:

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:

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/opetusteknologia/luennot/luento3/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
 2016-11-09 17:44:02
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta