JWT 2015 - Johdatus www-tekniikoihin
© Aulikki Hyrskykari, Antti Sand, 2015 - Kopiointi ilman lupaa kielletty.

2. HTML:n ja CSS:n yhteispeli

HTML-merkkauskielen avulla luodaan sivun sisältö ja määritellään sen rakenne. Sivun ulkonäkö määritellään erillisellä tyylitiedostolla (css). Tyylisääntöjä voi kirjoittaa myös HTML-dokumentin sisään, mutta suositeltavampi ja selkeämpi tapa on kirjoittaa tyylisäännöt omaan tiedostoonsa.

Seuraavissa luvuissa (3-4) käydään läpi HTML-merkkauskieltä ja CSS-sääntöjä syntakseineen tarkemmalla tasolla. Katsotaan kuitenkin tässä luvussa ensin läpi yksinkertainen esimerkki siitä, miten HTML ja CSS "pelaavat yhteen" muotoillun www-sivun tuottamisessa.

2.1 Www-sivu selaimen oletusmuotoiluilla

Alla näet esimerkin yksinkertaisesta HTML5 -dokumentista. Kuten HTML-dokumentit yleisemminkin, se koostuu hierarkisesti järjestetyistä elementeistä, jotka määrittävät dokumentin rakenteen.

<!DOCTYPE HTML> 
<html lang="fi">
<!-- - - - - - - - - - - - - - - - - - - - - - otsikko-osa -->
<head>
  <meta charset = "UTF-8" />
  <title>hTML:n ja CSS:n yhteispeli</title>
</head>

<!-- - - - - - - - - - - - - - - - - - - - - - - runko-osa -->
<body>
  <nav>
  <!-- lista, tehdään tästä tyylien avulla menu --------- -->
    <ul class="navipalkki">
      <li><a href="index.html">Etusivu</a></li>
      <li><a href="sivu2.html">Toinen sivu</a></li>
      <li><a href="sivu 3.html">Kolmas sivu</a></li>
      <li><a href="yhteystiedot.html">Yhteystiedot</a></li>
    </ul>
  </nav>

  <!-- Sivun varsinainen sisältö - - - - - - - - - - - -  -->
  <h1>HTML+CSS kokeilu</h1>
  <p>
    Tämä on ensimmäinen kokeiluni siitä miten 
    HTML ja CSS toimivat yhdessä. Aluksi kirjoitetaan
    HTML-dokumenttiin vain sivun sisältö ja sen rakenne.
    Määritellään ulkomuotoon liittyvät seikat sitten
    erikseen CSS-säännöillä.
  </p>

  <img src="img/w3c.png" />
  <h2>Kuvat www-sivulla</h2>
  <p>
    Otetaan tähän mukaan yksi kuvakin, jotta nähdään 
    samantien, miten kuvien liittäminen sivulle tapahtuu.	
  </p>

  <h2>Linkit www-sivulla</h2>
  <p>
    Navigointiosassa on linkkejäkin, vaikka ne eivät 
    nyt johda mihinkään kun noita vastaavia sivuja 
    ei ole luotu.
  </p>

  <!-- On hyvien tapojen mukaista liittää mukaan 
          allekirjoitus ja päiväys - - - - - - - - - - - -  -->
  <footer>
     Aulikki Hyrskykari, luotu 10.3.2012 
    (viimeksi muokattu 8.3.2014) 
  </footer>
</body>
</html>

Dokumentti löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-a.html

Kommentit. Dokumenttiin kannattaa lisätä kommentteja, erityisesti jaottelemaan dokumentin osia toisistaan, jotta haluttu kohta dokumentista on helpompi löytää. Kommentti alkaa merkeillä: <-- ja loppuu merkkeihin: -->. Kommentin sisällä ei saa olla kahta tavuviivamerkkiä peräkkäin.

Dokumenttityyppi. Dokumentin ensimmäinen elementti <!DOCTYPE html> määrittää, että kyseessä on HTML5 -dokumentti, ja sen alla on määritelty, että dokumentin kieli on suomi. Dokumentin juurielementin, <html>-elementin attribuutti lang="fi" kertoo, että dokumentin kieli on suomi. Vaikka kielen ilmoittaminen ei olekaan pakollista, se on suositeltavaa koska erilaiset www-palvelut (esim. hakukoneet, saavutettavuuteen liittyvät apuvälineet) saattavat hyötyä tiedosta.

Dokumentti (<html>-elementti) jakaantuu kahteen osaan: otsikko-osaan (<html>-elementti) ja runko-osaan (<body>-elementti).

Otsikko-osassa <meta charset="UTF-8" />-elementti määrittää dokumentin tallentamisessa käytetyn merkistökoodauksen. ja <title>-elementti määrittää dokumentin nimen. Nimi tulee selaimessa näkyviin sivun (tai välilehden) nimenä.

Runko-ossa on jo edellisen luvun ensimmäisestä esimerkistä tutut kappale <p>-elementti, ja ensimmäisen tason otsikko, <h1>-elementti. Näiden lisäksi tässä esimerkissä on kakkostason otsikkoelementtejä <h2> ja kuvaelementti <img>. Kuvaelementin attribuutti src määrittää hakemistopolun kuvan noutamiseksi.

Lista. Elementin <ul> avulla määritellään lista. Sille on määritelty luokka-attribuutti class="navipalkki", jonka avulla voimme kohdistaa sille CSS-sääntöjä. Haluamme muotoilla listan navigointipainikkeeksi, ja haluamme kohdistaa muotoilun, ei kaikille, vaan vain juuri navipalkki-tyyppisille listoille. <a>-elementin avulla määritellään linkki, <href="osoite">. HTML5 korostaa sisällön semantiikan merkitsemistä. Listaa tullaan käyttämään sivulla navigointiin, joten se on suljettu <nav>-elementiksi. Se on yksi HTML5:n uusista, dokumentin semanttista rakennetta merkkaavista elementeistä.

Alatunniste. Myös <footer>-elementti on yksi uusista HTML5-elementeistä. Esimerkiksi alatunnisteen voisi tietysti tehdä <p>-elementilläkin, mutta <footer>-elementti tarjoaa sivua mahdollisesti lukeville muille www-sovelluksille tarkempaa tietoa elementin roolista.

Dokumentti näkyy selaimen oletustyyleillä, ilman erityisiä tyylimuotoiluja, seuraavalta.

Sivu muotoiltuna CSS-säännöillä

Kun teemme dokumentille CSS-tyylitiedoston, saadaan dokumentti näyttämään, esimerkiksi seuraavalta.

Sivu muotoiltuna CSS-säännöillä

Katsotaan seuraavassa askelettain, millä CCS-säännöillä tämä muotoilu saadaan aikaan.

Takaisin ylös

2.2 Tekstin ja taustan värit

CSS-säännöt on suositeltavaa kirjoittaa omaan CSS-tiedostoonsa ja HTML-dokumentin <head> osaan tulee kirjoittaa elementti, joka kertoo mikä CSS-tiedosto dokumenttiin liitetään.

Annetaan tyylitiedostolle nimi 02-01-html-plus-css-a.css (hieman pitkä, mutta kuvaava; kertoo missä luvussa, monesko esimerkki ja mikä versio esimerkistä). Tallennetaan tämä tyylititiedosto alihakemistoon css (alihakemisto viittaavasta html-dokumentista katsottuna).

Tällöin kirjoitamme html-dokumentin alkuun <head> osaan, rivin:
<link rel="stylesheet" type="text/css" href="css/demotyylit.css" />. Se kertoo selaimen HTML-tulkille, mistä tyylimäärittelyt löytyvät.

CSS-säännöt, joilla määritellään tekstin väriksi sinipunainen ja taustaväriksi vaalea punainen, ovat seuraavanlaiset:

@charset "UTF-8";
/* LISÄTÄÄN TEKSTILLE JA SIVUN TAUSTALLE VÄRIT */
body {    
  color: #ba55d3;
  background-color: #ffefd5;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-b.html. Tyylitiedoston alussa on hyvä määritellä merkistökoodaus @charset "UTF-8"; siltä varalta että esim. kommenteissa käyttää skandinaavisia tai joitain muita erikoismerkkejä.

Takaisin ylös

2.3 Kuvan sijoittelu

Kuvan paikka elementtivirrassa (document flow) on ensimmäisen kappaleen jälkeen ja ennen otsikkoa Kuvat www-sivulla. Koska kuva on noiden molempien elementtien ulkopuolella, se varaa www-sivulta oman rivinsä. Jos se olisi kappaleen tai otsikon sisällä, sitä käsiteltäisiin kuten yhtä merkkiä elementtivirrassa, silloin se kuitenkin suurentaisi tekstin rivivälin oman korkeutensa mukaiseksi.

Kelluttamalla elementtejä voi siirtää horisontaalisessa suunnassa sivun reunaan (vasemmalle tai oikealle). Jos määrittelemme, että kuva asetetaan "kellumaan vasemmalle", kuva siirtyy dokumentin vasempaan reunaan ja sen lisäksi muu dokumentin sisältö kuvan jälkeen kiertää kuvan ympäri. Tässä tapauksessa tämä tekstin kiertyminen kuvan ympärille on säännön ainoa vaikutus, koska kuva oli jo valmiiksi sivun vasemmassa reunassa.

Jotta kuvan ympärille kiertyvä teksti ei olisi ihan kiinni kuvassa, määritellään sille marginaali - yhden kirjasinkorkeuden levyinen marginaali 1em.

/* MÄÄRITELLÄÄN, KUVA "KELLUVAKSI" VASEMPAAN REUNAAN */
img {
  float:left;			
  margin: 1em;			
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-c.html

Takaisin ylös

2.4 Kirjasimet

Sivulla käytettävät kirjasimet (tai paremminkin kirjasinperheet, koska jokainen kirjasin sisältää useampia leikkausia kirjasimesta) voi määritellä elementtikohtaisesti. Määritellään, että dokumentissa käytettävä kirjasinperhe on Georgia. Otsikoissa haluamme kuitenkin käyttää Geneva-kirjasinperhettä.

Koskaan ei voi olla ihan varma osaako selain käyttää määriteltyä kirjasinta, joten alla on annettu useampia vaihtoehtoja. Viimeiseksi kannattaa määritellä ns. geneerinen kirjasinperhe, joka näyttää jonkun saatavilla olevan samantyyppisen kirjasimen (serif, san-serif) mikäli mikään annetuista ei ollut saatavilla.

Huomaa, että Times New Roman on suljettu lainausmerkkeihin, koska nimeen kuuluu välilyöntimerkkejä.

/* RUNGOSSA KÄYTETÄÄN SERIF ja OTSKOISSA SAN-SERIF -KIRJASINTA */
body {    
  font-family: Georgia,"Times New Roman", Times, serif;		
}
h1, h2 {
  font-family: Geneva,Helvetica,Arial,SunSans-Regular,sans-serif;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-d.html

Takaisin ylös

2.5 Listan asemointi navigointipalkiksi

Dokumentin alussa on neljä riviä sisältävä lista, joka toimii sellaisenaankin navigointilistana (vaikka linkit eivät tässä toimikaan, koska vastaavia sivuja ei ole olemassa).

Haluamme tehdä siitä hiukan enemmän verkkosivuilta yleisesti löytyviä navigointipalkkeja muistuttavan. Tästä syystä kiinnitetään lista sivun vasempaan yläkulmaan. Absoluuttinen sijoitus ottaa elementin pois elementtivirrasta ja asettaa sen määrättyyn kohtaan sivulla.

/* LISTALLE ABSOLUUTTINEN SIJOITUS SIVUN VASEMPAAN REUNAAN */
ul.navipalkki {
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em;
}

Kun elementti otetaan pois elementtivirrasta, se piirtyy määrättyyn kohtaan riippumatta siitä onko siinä kohdassa jotain muutakin sivun sisältöä.

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-e.html

Takaisin ylös

2.6 Päällekkäisyyden korjaaminen

Koska navigointipalkki on kiinnitetty absoluuttisella sijoituksella sivun vasempaan reunaan, lisätään rungolle sääntö, joka jättää kaikkien elementtien vasempaan reunaan tyhjää tilaa 11 kirjasinkorkeuden verran.

/* SIIRRETÄÄN KAIKKIA ELEMENTTEJÄ OIKEALLE */
body {    
  padding-left: 11em;
  font-family: Georgia, "Times New Roman", Times, serif;
	.
	.
	.

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-f.html

Takaisin ylös

2.7 Navigointipalkin sijainnin korjailua

Selaimilla on listalle omat oletusmuotoilunsa, kuten esimerkiksi listan rivien eteen piirrettävä alkumerkki (•) ja sen ympärille jätettävät tyhjä tila. Pyydetään, että listan riveillä ei ole alkumerkkiä, ja että sen ympärille ei jätetä automaattisesti tilaa.

ul.navipalkki {
  list-style-type: none;
  padding: 0;
  margin: 0;
      .
      .
      .

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-g.html

Takaisin ylös

2.8 Navigointipainikkeiden muokkaus

Muokataan listan rivit enemmän navigointipainikkeiden näköisiksi määrittämällä listarivin tausta valkoiseksi (bacground-color), jätettämällä ylä- ja alapuolelle tilaa (margin), suurentamalla elementin varaamaa aluetta hiukan (padding) ja piirretään elementin oikeanpuoleinen reunaviiva värillisenä ja vahvennettuna näkyviin (border-right).

ul.navipalkki li {
  background-color: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid #c71585;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-h.html

Takaisin ylös

2.9 Linkkien muotoilu

Tekstien alleviivaukset navigointipainikkeissa näyttävät hassuilta. Alleviivaus johtuu siitä, että selaimet alleviivaavat linkeiksi määritellyt sanat automaattisesti. Poistetaan alleviivaus linkeistä ja määriteltään niiden kirjasin paremmin sivulle sopivaksi.

ul.navipalkki a {
  font-family: Geneva, Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-weight:bold;
  color: #c71585;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-i.html

Takaisin ylös

2.10 Alatunnisteen muotoilu

Muotoillaan vielä <footer>-elementti hiukan selkeämmin alatunnisteenomaisemmaksi. Annetaan sille päätteetön, muuta tekstiä pienempi kirjasin, piirretään ohut pisteviiva sen yläpuolelle, ei kuitenkaan ihan kiinni piirrettyyn pisteviivaan.

footer {
  font-family: sans-serif;
  font-size: 0.8em;
  border-top: thin dotted;
  padding-top: 1em;
  text-align: right;
}

Dokumentti, johon on linkitetty yllä olevat säännöt sisältävä tyylitiedosto löytyy esimerkkisivuilta nimellä 02-01-html-plus-css-j.html

Takaisin ylös