SchoolBlog: Pertemuan keduabelas

Assalamualaikum Sadayana

Berjumpa lagi dengan saya Syahrul Ramadhan. Dipostingan kali ini saya akan membahas tentang CSS on Form. Langsung aja diliat yah...

1. Ini kodingan sederhana html dengan java didalamnya. Jadi si kodingan javanya tuh ada di dalem tag body htmlnya, seperti di bawah ini:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 ubhstyle</title>
  </head>
  <body>
    <h1 id="id1">
My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
    click me!</button>
  </body>
</html>

ini hasilnya:

4. Membuat variable di html dgn javascript:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 JS Var</title>
  </head>
  <body>
    <h1>
JavaScript Variable</h1>
<p>
pada contoh ini x, y, & z adalah variable</p>
<p id="demo">
</p>
<script>
      var x = 5;
      var y = 6;
      var z = x + y;
      document.getElementById("demo").innerHTML = z;
    </script>
  </body>
</html>

ini hasilnya:

5. Yang ini sama seperti yang nomor 3, bedanya hanya sedikit. Silahkan kalian cari sendri bedanya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 </title>
  </head>
  <body>
    <h1>
Javascript Variable contoh 2</h1>
<p id="demo">
</p>
<script type="text/javascript">
      var price1 = 5;
      var price2 = 6;
      var total = price1 + price2;
      document.getElementById("demo").innerHTML = "Totalnya adalah: "+ total;
      document.getElementById("demo").innerHTML = "Totalnya adalah: "+ total;
    </script>
  </body>
</html>

ini hasilnya:

6. Ini merupakan java script dengan type data, tapi dalam bentuk file html yaa..

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 JS Type data</title>
  </head>
  <body>
    <h1>
JavaScript Variable dengan type data</h1>
<p>
Deklarasi string harus disertai tanda kutip</p>
<p>
Deklarasi angka tidak perlu disertai kutip</p>
<p>
Cobalah dgn tanda komentar //</p>
<p id="demo">
</p>
<script type="text/javascript">
      var pi = 3,14;
      var person = "john doe";
      var answer = 'yes I am!';
      //document.getElementById("demo").innerHTML = pi;
      document.getElementById("demo").innerHTML = person;
      //document.getElementById("demo").innerHTML = answer;
    </script>
  </body>
</html>

ini hasilnya:

7. Ini tugas akhir saya di pertemuan ke 12 ini dengan kodingan html, js, dan css yang terpisah.

ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R Aritmatika</title>
    <link href="tugasakhir12.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <h1 align="center">
Macam-Macam Operasi Aritmatika</h1>
<table width="50%" align="center">
<tr>
        <td align="center">Operasi</td>
        <td align="center">Hasil</td>
      </tr>
<tr>
        <td class="duar">Penjumlahan</td>
        <td><p id="Penjumlahan" class="gol">
Penjumlahan</p>
</td>
      </tr>
<tr>
        <td class="duar">Pengurangan</td>
        <td><p id="Pengurangan" class="gol">
Pengurangan</p>
</td>
      </tr>
<tr>
        <td class="duar">Perkalian</td>
        <td><p id="Perkalian" class="gol">
Perkalian</p>
</td>
      </tr>
<tr>
        <td class="duar">Pembagian</td>
        <td><p id="Pembagian" class="gol">
Pembagian</p>
</td>
      </tr>
<tr>
        <td class="duar">Persen</td>
        <td><p id="Persen" class="gol">
Persen</p>
</td>
      </tr>
<script src="aritmatika.js">
      </script>
    </table>
</body>
</html>

ini kodingan java scriptnya:

var a = 100;
var b = 10;
var c = a + b;
var d = a - b;
var e = a * b;
var f = a / b;
var g = a % b;

document.getElementById('Penjumlahan').innerHTML = c;
document.getElementById('Pengurangan').innerHTML = d;
document.getElementById('Perkalian').innerHTML = e;
document.getElementById('Pembagian').innerHTML = f;
document.getElementById('Persen').innerHTML = g;

ini kodingan cssnya:

h1{
  font-family: monospace;
  margin-top: 50px;
}
table{
  margin-top: 60px;
  border-radius: 20px;
  border: 2px solid;
  background-color: salmon;
  width: 900px;
  height: 450px;
}
tr td{
  border: 1px solid;
  border-radius: 10px;
  background-color: lightblue;
  width: 50%;
}
.gol{
  text-align: center;
}
body{
  background-color: pink;
}
.bim{
  font-weight: bold;
  color: silver;
  text-align: center;
}

ini hasilnya:

Cukup segitu untuk postingan kali ini, semoga bermanfaat.

Wassalamualaikum Wr. Wb.

SchoolBlog

inlinecss

Senin, 02 September 2019

Pertemuan keduabelas

Tidak ada komentar:

Posting Komentar