Teisipäev, 29. mai 2018

Tutvumine InObot haridusroboti programmeerimisega

InO-Bot on robot, mida saab nutiseadmega programmeerida. Programmeerimiseks mõeldud äpp meenutab Scratchi - tuleb lihtsalt õiged plokid järjekorda panna.

Juhend roboti töölepanekuks ja tahvliga ühendamiseks

Programmeerimiseks ava Ino-bot äpp ja ühenda robotiga (vajalik bluetooth ühendus).
Proovi saada robot mööda liikuma ja pöörama.

Esmaspäev, 21. mai 2018

HTML - stiilid, värvid ja tabelid

HTML dokumenti saab lisada ka värve. Värvide puhul on olemas rida selliseid, mida HTML koodi lugev veebilehitseja suudab mõista sõna järgi (red, blue, green, yellow, pink, brown, gray, gold, violet jms), enamuste teiste toonide puhul tuleb värv sisestada vastava koodiga (vt lõik allpool).

Värvide lisamine HTML lehele toimub sildi (tag) sees käsuga style.
Näiteks tausta värvimiseks tuleb <body> sildi sisse lisada style=background-color:azure

<body style="background-color:azure">             azure on siin värvi nimetus

RGB värvikoodid:
Värvide nimed, mida toetavad kõik veebilehitsejad: http://www.w3schools.com/tags/ref_colornames.asp
Teksti värvi muutmiseks tuleb style-silt kirjutada kas peatüki <p> või pealkirja <h1> sildi sisse.
Näiteks pealkirja H1 punaseks värvimiseks tuleb HTML-i muuta järgmiselt:

<h1 style="color:red">PEALKIRI</h1>

Ülesanne 1
Muuda eelmisel tunnil alustatud html-dokumenti nii, et selle taust oleks värviline (vali värvikoodide alt heledam värv) ning suur pealkiri oleks samuti värviline (vali taustavärviga sobiv toon).

PS. Teksti kirjastiili muutmiseks tuleb kasutada stiili font-family ning siis lisada kirjastiil. Kõiki kirjastiile ei ole veebilehitsejad võimelised kuvama. Veebiturvalisi stiile saad näha siit: http://www.w3schools.com/cssref/css_websafe_fonts.asp
Pealkirja kirjastiili (font) muutmine stiili Comic Sans MS tuleb lisada:
<h1 style="font-family:Comic Sans MS">
Juhul kui pealkirjale on juba lisatud näiteks värvistiil, siis saab järgmise stiili eelmise alla lisada nii:
 <h1 style="color:red; font-family:Comic Sans MS">


Kopeeri eelmisel tunnid loodud html-dokumenti <body> ... </body> siltide vahele järgmine kood (võib selle kopeerida siit lehelt).

 <table style="width:100%; text-align:left" border=1>
  <tr style="text-align:center">
      <th style="color:red; background-color:yellow">Eesnimi</th>
      <th>Perenimi</th>
      <th>Klass</th>
  </tr>
  <tr>
    <td>Mari</td>
    <td>Maarikas</td>
    <td>2b</td>
  </tr>
</table>


Salvesta dokument (jälgi, et selle faililaiend oleks html) ning ava veebilehitsejaga!

Ülesanne 2
Uuri lisatud koodi. Millised sildid tähistavad veerge, millised ridu?
Lisa tabelisse 1 rida, milles kuvatakse sinu nimi ja klass.
Lisa tabelisse 1 veerg, milles kuvatakse sinu vanus (Mari Maasika vanuse võid välja mõelda).
Täienda tabelit nii, et selle esimene rida (päiserida) kuvatakse värvilisel taustal ning päiserea test oleks samuti värviline.
Edasijõudnutele - värvi tabeli teised read samuti ära, nii et need oleksid päisereast erinevat värvi! Samuti võid värvide tabelit nii, et kaks kõrvutiolevat lahtrit poleks sama värvi! Näiteks selline:

Salvesta fail oma võrgukettal olevasse kausta ning pane talle nimeks teine.html


Kahoot HTML-i kordamiseks