Topic outline

  • HTML

  • Visual Studio

    Voit ladata Visual Studio Community 2019n tai Visual Studio Coden (pienempi). Jos aiot ohjelmoijaksi, kannattaa ladata Visual Studio Communityn.

    • Omat verkkosivut

      Nyt lähdemme tekemään omia verkkosivuja edellisen opetuksen pohjalta. Näitä sivuja voi jatkuvasti kehittää, ja opettelemme jo nyt, miten ne pistetään ihan oikeasti näkyviin kaikille nähtäväksi, eli siis nettiin. On olemassa muutamia TÄYSIN ilmaisia nettisaitteja, jonne voi laittaa omia sivustoja pystyyn ja yksi niistä on epizy.com tai toinen 000webhost. Sinne kun kirjautuu, saa käyttöönsä verkkotunnuksen (minulla esimerkiksi KKTI19A.epizy.com), joka siis näkyy kaikille.

      Tehtävänäsi on nyt edellisen oppien mukaan tehdä esimerkin mukaan (kkti19a.epizy.com / kkti19a.000webhostapp.com) sivusto, jossa on vähintään 4 sivua (etusivu, minusta, harrastukseni, CV). Värit voit valita joko paletton.com:n avulla tai coolors.co:n avulla.

    • Lomakkeet

      Lomakkeiden avulla sivulle saadaan vuorovaikutteisuutta, eli interaktiivisuutta. Lomakkeella voidaan pyytää erilaista tietoa, joka sitten käsitellään eri tavoin, esimerkiksi viedään tietokantaan tai tarkistetaan, onko tieto jo tietokannassa (esim. käyttäjätunnus / salasana).

      Alla on esimerkki perinteisestä taulukosta:

      <form action="/admin/process-form.php" method="POST">lomake
          <p>
              <label>Nimi:</label>
              <br>
              <input type="text" name="nimi">
          </p>
          <p>
               <label>Ikä:</label>
              <br>
              <input type="text" name="ika">
          </p>
          <p>
              <input type="submit" value="Laheta">
          </p>
      </form>

      Eli kuten huomaat, lomake aloitetaan (ja lopetetaan) <form>-komennolla, jonka sisään tulevat sitten kaikki muut komennot. Form komennossa on yleensä myös toiminto, joka halutaan tehdä, kun "lähetä"-painiketta on painettu. Tässä tapauksessa tiedot viedään process-form.php -nimiselle tiedostolle, joka käsittelee tiedot tästä eteenpäin. Tämän lisäksi komennossa on toinen määre, joka kertoo, millä tavalla tiedot viedään, tässä tapauksessa siis Post, toinen vaihtoehto olisi Get, joka toimii hieman eri tavalla, eli liittää lähetettävän osoitteen perään kaikki tiedot, eli ne ovat näkyvissä käyttäjälle:

      /admin/process-form.php?nimi=Mauno&ika=44

      Post ei muokkaa URL:ia, vaan lähettää tiedot pyynnön body-osassa. Kumpaa siis käyttää? Pääsääntö on se, että käytä Post:ia, ellet halua sitten tallentaa esim. ko. URL:ia tietoineen kirjanmerkiksi.

      Huomaat, että tuossa on kaksi lomakkeille ominaista tägi-tyyppiä: <input type="text"....> ja <input type="submit"....>. Näistä ensimmäisellä määritellään tekstikenttä ja on ERITTÄIN tärkeää, että tägille annetaan nimi-määre (name=...), sillä se on se, jonka avulla tieto viedään eteenpäin (Katso Get-esimerkkiä). Eli tyypillinen tekstikenttä on tällainen: <input type="text" name="jokin_jarkeva_nimi">. Näin kerromme, että kyseessä on tekstikenttä ja että sen tiedot tallentuvat "jokin_jarkeva_nimi"-muuttujaan. Painonappi tehdään taas <input type="submit"...> -komennolla, jonka arvoksi (value) voimme antaa sen tiedon, jonka haluamme näkyvän painikkeessa.

      Muita lomaketägejä

      <input type="password" name="salasana"> - tämä ei näytä, mitä kirjoitat, vaan laittaa pisteet siihen tilalle: password

      <input type="hidden" name="piilotettu"> - tätä käytetään sellaiseen tietoon, joka ei näy käyttäjälle, mutta joka haluaan mukaan lähetykseen.

      <textarea rows="5" cols="50" name="osoitetiedot"></textarea> - tätä käytetään silloin, kun halutaan kerätä enemmän tietoa, kuin mitä tekstikenttään mahtuisi. Edellä olen määritellyt, että tämän koko on 5 riviä ja 50 kirjainta leveyssuunnassa. Sekä rivimäärä, että sarakemäärä ovat valinnaisia, eli ei tarvitse laittaa kuin toinen, tosin silloin se yleensä on rivimäärä.

      <input type="radio" name="listat" value="jotain"> - tätä käytetään, kun halutaan isompi joukko valintoja, joista voidaan valita VAIN 1. Jotta tämä onnistuisi, täytyy kaikkien nimeksi laittaa sama arvo, mutta arvoksi (value), jokaiselle eri. Alla esimerkki:

      <label>Mikä HTML tagi luo numeroimattoman listan?</label>lomake3
      <input type="radio" name="mikatagi" value="ol"> ol
      <br>
      <input type="radio" name="mikatagi" value="ul"> ul
      <br>
      <input type="radio" name="mikatagi" value="a"> a

      <input type="checkbox" name="jotakin" value="jotakin"> - tätä käytetään, kun halutaan isompi joukko valintoja, joista voidaan valita 0 - kaikki. Tässäkin nimi pitää olla sama, mutta value eri! Alla taas esimerkki:

      <label>Mitkä ohjelmointikielet ovat web-kehittäjille tärkeitä?</label>checkbocx
      <input type="checkbox" name="webkielet" value="html"> HTML
      <br>
      <input type="checkbox" name="webkielet" value="css"> CSS
      <br>
      <input type="checkbox" name="webkielet" value="javascript"> Javascript

      <select name="jotain"> + <option value="jotain_muuta"> - yhdistelmä. Eli jos haluat tehdä pudotuslistan, tämä on sinun komentosi. Aloitat (ja lopetat) select-komennolla ja kaikki vaihtoehdot kirjoitetaan kuten listassa, mutta tässä ei käytetä <li>-tägiä, vaan <option>-tägiä. Alla taas esimerkki:

      <label>Millä attribuutilla kerrotaan selaimelle, minne mennä, kun hyperlinkkiä on painettu?</label>dropdown
      <select name="mika_attribuutti">
          <option value="src">src</option>
          <option value="url">url</option>
          <option value="link">link</option>
          <option value="href" selected>href</option>
      </select>

      <input type="button" value="paina minua"> - Tavallinen painike, joka ei aiheuta lomakkeen lähettämistä palvelimelle, vaan  tätä käytetään yleensä esimerkiksi JavaScriptien kanssa.

    • Responsiiviset verkkosivut

      Kun haluamme, että sivut muuttuvat resoluution muuttuessa, voimme määritellä CSS:n tekemään muutokset. Se tapahtuu siten, että ensin määrittelemme CSS:n normaalisti ja sitten teemme CSS:ään seuraavanlaiset muutokset (siis vain esimerkki):

      @media(max-width:960px){
      /*Tämän jälkeen määrittelemme, mitä tapahtuu, kun resoluutio on pienempi kuin 960px*/
      section{
      width:80%;
      }
      h1{
      font-size: 33px;
      }
      article, aside{
      float: none;
      width: 100%;
      }
      }

      @media(max-width:568px){
      h1{
      font-size: 22px;
      }
      }

    • Kommentointi ja dokumentointi

      HTML, CSS ja muilla-kielillä on kullakin erilainen tapa erottaa kommenttiosiot, joita ei suoriteta, aktiivisesta koodista. Kommentoinnin tarkoitus on selventää muille kehittäjille mitä koodi tekee ja jäsentää sitä helpommin luettavaksi. Sitä voidaan käyttää myös "kommentoimaan ulos" pätkiä joita ei haluta käyttää, mutta jotka pidetään näkyvillä yhteistä kehitystyötä varten (bugiset koodin pätkät, uudet ominaisuudet tms).

      Kommentointi koodit muodostuvat aina aloittavasta ja päättävästä merkinnäistä joiden välissä voi olla miten pitkästi tahansa merkkejä joita ei käsitellä aktiivisena koodina.

      HTML-koodissa kommentointi tehdään näin:

      <!-- kommentti -->

      CSS-koodissa vastavaa merkintä on:

      /* kommentti */

      Muut ohjelmointikielet, useimmissa sama kuin edellä:

      /* kommentti */

      Esimerkki

      <!-- Tämä on kommentti-->

      <p>Tämä on väliotsikko.</p>

      <!-- Muista laittaa lisäinformaatiota tähän-->

      Kommentit ovat myös oiva tapa testataHTML, koodia koska virhe kohtiin voit kommenteilla laittaa huomautukset.

      <!-- Do not display this at the moment
      <img border="0" src="pic_mountain.jpg" alt="Mountain">
      -->

      Ehdollinen kommentointi

      Voit joskus myös kompastua ehdollisiin kommentteihin HTML koodissasi:

      <!--[if IE 8]>
      .... jotain html kieltä tänne ....
      <![endif]-->

      Vaihtoehtoiset kommentit näkyvät ainoastaan Internet Explorer selaimessa, joten sen käyttöä ei suositella ellei ole pakko.

    • HTML, CSS, JavaScript projekteja niille, jotka ovat jo muista tehtävistä valmiit