Steampunk - Varjot ja fonttityyppi, index.html tiedosto

Itse nimetty CSS-ohje ja varjo kuville sekä painikkeille

INFO - CSS-ohjeista ja niiden käyttämisestä

CSS-OHJE KOLME TAPAA KÄYTTÄÄ
  • CSS-ohjeet erillisessä tai useammassa tiedostossa, esim omastyle.css
    • kun www-sivun ulkoasua toteutetaan on CSS-ohjeet HTML-koodauksen alussa, vasta lopuksi CSS-ohjeet tallennetaan omaksi tiedostokseen. CSS-ohjeet siis poistetaan HTML-koodauksen alusta.
    • CSS-muotoilut erillisessä tiedostossa lyhentää HTML-koodauksesta koodirivejä
    • tarvitsee head-elementtiin link-elementin jossa tieto CSS-tiedoston nimestä (ja sijainnista), esimerkkejä:
      <link rel="stylesheet" type="text/css" href="office_style.css">
      <link href="prism.css" rel="stylesheet" />
  • CSS-ohjeet HTML-koodauksen alussa head-elementissä sijaitsevassa style-elementissä, käytetään yhden www-sivun yksityiskohdan muotoiluun tai kehiteltäessä ja muotoiltaessa www-sivupohjaa, esimerkki:
    <style>
   .laatikko1 {
     background-color: #FFFFFF;
     width: 75%;
     border: 1px solid green;
     padding: 15px;
     margin: 15px;
     box-shadow: 7px 7px 5px grey;
   }
</style>
  • CSS-ohje tai -ohjeet muotoiltavassa HTML-elementissä, esimerkki teksi-elementti ja tekstin väri:
    <p style="color: RGB(0,255,255)"> Väri RGB-koodina </p>


CSS-OHJEISTA JÁ NIMEÄMISESTÄ:
  • CSS-ohjeelle voidaan antaa itse keksitty nimi, älä käytä ohjeen nimessä Ä,Ö tai Å kirjaimia.
  • Yhtä HTML-elementtiä voidaan muotoilla usealla CSS-ohjeella jos CSS-ohjeilla on kyseinen HTML-elementt muotoitavissa.
    Esimerkiksi tekstiä muotoillaan tekstin muotoiluun tarkoitetuilla CSS-ohjeilla (katso laatikko1-niminen CSS-muotoilu yläpuolella).
  • Esimerkki, tekstille tarkoitettuja CSS-ohjeita ja niiden käyttäminen p-elementille,

    CSS-ohjeita: 
    <style>
 .vari1 {
   color: syan;
 }
 .vari2 {
   color:purple;
 }
 .koko1 {
   font-size:120%;
 }
</style>
    Ja p-elementti johon liitetty kaksi CSS-ohjetta: 
       
 <p class="vari2 koko1"> TEKSTI JOLLE CSS-OHJEITA </p>

Tehtävä 1. Varjon lisääminen kuvaan ja vähän muuallekin

Tehtävässä lisätään aluksi varjo kuvalle. Varjon voi lisätä myös laatikon muotoisena esitettäville elementeille, div:lle.

1. Varjon CSS-ohje:

Varjo kuvalle

2. Lisätään sama varjo menu-osan painikkeille sekä sen alapuolella olevalle aside-osalle.


Varjo Menulle ja asidelle

3. Kikkaillaan varjolla vielä menu-painikkeissa. Tehdään painikkeille eri värinen varjo kun hiiren osoitin on painikkeen kohdalla eli tehdä hover-väri:


Tehtävä 2. Fontin eli tekstityypin linkittäminen Googlen palvelusta

1. Mene selaimella www-osoitteeseen: https://fonts.google.com/.

Tilanne www-sivulla, header-osan otsikko keskitetty, koko sivuston fontti vaihdettu, varjoja laitettu ja menu-osassa hover-varjo:
Ylä- ja ala-osan värit laitettu

Tehtävä 3. Lisätään aside-osaan kuva

5. Kokeillaan kuvan sijoittamista aside-osaan:



TEHTÄVÄ 4. CSS-MUOTOILUT OMAKSI TIEDOSTOKSI

Tässä kohtaa on hyvä tarkistaa onko kaikki tehdyssä www-sivussa halutulla tavalla, onko värit halutut, onko navigoinnissa värit sopivat ja onko tekstin fonttityyppi sekä koko sopiva.
Eli tarkistetaan onko index.html sivu halutun näköinen. Tarkoituksena on tehdä www-sivusto jossa on neljä sivua ja kaikilla sivuilla on yhteinen CSS-ohje erillisessä tiedostossa.

1. Kopioidaan HTML-koodauksen alusta style-elementin sisällä olevat CSS-muotoiluohjeet, ei kopioida style-elementin "tageja": 

  <link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
  <style>
   * {
     box-sizing: border-box;
   }
   body{
     background-color: RGB(250,245,220);
   }
   img {
     width: 100%;
     height: auto;
   }
   .varjo{
     box-shadow: 10px 10px 5px grey;
   }
   .row:after {
     content: "";
     clear: both;
     display: table;
   }
   [class*="col-"] {
     float: left;
     padding: 15px;
     width: 100%;
   }
   @media only screen and (min-width: 600px) {
     .col-s-1 {width: 8.33%;}
     .col-s-2 {width: 16.66%;}
     .col-s-3 {width: 25%;}
     .col-s-4 {width: 33.33%;}
     .col-s-5 {width: 41.66%;}
     .col-s-6 {width: 50%;}
     .col-s-7 {width: 58.33%;}
     .col-s-8 {width: 66.66%;}
     .col-s-9 {width: 75%;}
     .col-s-10 {width: 83.33%;}
     .col-s-11 {width: 91.66%;}
     .col-s-12 {width: 100%;}
   }
   @media only screen and (min-width: 768px) {
     .col-1 {width: 8.33%;}
     .col-2 {width: 16.66%;}
     .col-3 {width: 25%;}
     .col-4 {width: 33.33%;}
     .col-5 {width: 41.66%;}
     .col-6 {width: 50%;}
     .col-7 {width: 58.33%;}
     .col-8 {width: 66.66%;}
     .col-9 {width: 75%;}
     .col-10 {width: 83.33%;}
     .col-11 {width: 91.66%;}
     .col-12 {width: 100%;}
   }
   html {
     
	 font-family: 'Spirax', cursive;
   }
   .header {
     background-color: RGB(100,63,0);
     color: #ffffff;
     padding: 15px;
	 text-align:center;
   }
   .menu ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   .menu li {
     padding: 8px;
     margin-bottom: 7px;
     background-color :RGB(119,105,44);
     color: #ffffff;
     box-shadow: 10px 10px 5px grey;
   }
   .menu li:hover {
     background-color: RGB(222,209,157);
	 box-shadow: 10px 10px 5px orange;
   }
   a:link {		   /* linkki sivun avautuessa */
     color: white;
	 text-decoration: none;
   }
   a:visited {        /* linkki jota käytetty */
     color: white;
	 text-decoration: none;
   }
   a:hover {          /* linkki kun hiiren osoitin kohdalla */
     color: black;
	 font-size: 110%;
   }
   a:active {         /* linkki kun hiiren valinta-painiketta painetaan */
     color: orange;
	 text-decoration: underline;
   } 
   .aside {
     background-color: RGB(119,105,44);
     padding: 15px;
     color: #ffffff;
     text-align: center;
     font-size: 14px;
     box-shadow: 10px 10px 5px grey;
   }
   .footer {
     background-color: RGB(100,63,0);
     color: #ffffff;
     text-align: center;
     font-size: 12px;
     padding: 15px;
   }
  </style>
 <head>
2. Avaa Notepad++ uusi tiedosto (New tai Uusi), liitä kopioimasi CSS-ohjeet ja Tallenna style.css nimellä. Tarkista että tallentamasi tiedosto on todellakin style-niminen CSS-tiedosto !
Huomaa, mustalla fontilla olleeseen CSS-ohjeeseen tuli väriäkin.

3. Palaa Notepad++ ohjelmassa index-tiedostoon.
4. Lisää <!- - merkit style-elementin alkumerkin eteen:
Poista käytöstä alku

ja style-lopetusmerkin jälkeen - -> merkit.
Poista käytöstä loppu

5. Huomaa, vaihtuiko style-elementin välissä CSS-ohjeet vihreiksi ja ulkopuolella olevissa pysyi värejä ?
6. Tallenna index-tiedosto ja päivitä selain. Kaikki on kunnossa jos "sivu hajosi", kuva alla. Sivu 'hajosi'

7. Lisätään head-elementtiin linkki kohdassa 2 tehtyyn style.css tiedostoon, tee tyhjä rivi kuvan kohtaan HTML-koodauksen alkuun:
Sivu 'hajosi'

8. Kirjoita alla oleva linkki tyhjälle riville:
  <link href="style.css" rel="stylesheet">
9. Tallenna index.html tiedosto, Päivitä selain ja tarkista palautuko sivu ennalleen.
10. Jos www-sivu näkyy ja toimii selaimessa halutulla tavalla, voidaan index.html tiedoston style-elementistä poistaa kaikki muotoiluohjeet, mutta kannattaa jättää käytöstä poistettu style-elementti "tyhjänä" seuraavia vaiheita odottamaan, kuva alla.
Sivu 'hajosi'

TEHTÄVÄ 5. TEHDÄÄN SIVUSTO

Seuraavaksi tehdään index-tiedostoa käyttäen www-sivusto, jokaiselle sivulle vaihdetaan head-osaan teksti ja testataan www-sivuston toimivuus.

1. Avaa se kansio jonne olet tallentanut index.html tiedoston, kuva alla.
Sivu 'hajosi'

2. Kopioi index.html tiedosto ja liitä kolme kertaa kopioimasi, kuva alla. Saatiin kolme index-tiedoston kopiota.
Sivu 'hajosi'

3. Vaihdetaan kopioitujen tiedostojen nimiksi sivu1.html, sivu2.html ja sivu3.html, kuva:
Sivu 'hajosi'

4. Avaa sivu1.html, sivu2.html ja sivu3.html tiedostot Notepad++ ohjelmaan ja vaihda tiedostoissa header-osassa olevat h1-tekstit vastaamaan menu-tekstejä seuraavasti: 

   Tiedoston    header-teksti:
   sivu1.html - Joki
   sivu2.html - Metsä
   sivu3.html - Kaupunki
5. Talleta tiedostot, päivitä selain ja testaa vaihtuuko www-sivut menu-painikkeista, huomaa otsikkojen vaihtuminen.



Seuraavissa vaiheissa muokataan sivujen sisältöä, tehdään hyvin yksinkertainen kuva-galleria ja upotetaan ww-sivulle video.

Design and edit player