SchoolBlog: Pertemuan Kesebelas

Assalamuailikum Wr. Wb.
Alhamdulillah saya Syahrul masih bisa memposting lagi, untuk postingan kali ini saya akan memperdalam kembali pembelajaran mengenai css. Langsung mulai aja ya..

Yang pertama ini saya mulai dengan kodingan untuk sebuah form dengan css ext
Ini kodigan htmlnya;

textarea{
  color: blue;
  background-color: yellow;
  font-family: Calibri;
}
body{
  background-color: Hotpink;
  color: Orange;
  font-family: Consolas;
}

Ini hasilnya:

Yang ketiga ini sama juga seperti yang kesatu dan kedua yaitu tentang form.

Ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Setting on form</title>
    <link href="extCssonForm3.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <form name="form1" method="post">
      <table>
<tr>
          <td width="58">Nama</td>
          <td width="230">: <input type="text" name="nama" value="">
        </tr>
<tr>
          <td width="58">Alamat</td>
          <td width="230">: <input type="text" name="alamat" value=""></td>
        </tr>
</body>
</html>

Ini kodingan cssnya:

input{
  color: blue;
  background: yellow;
  border-color: red;
  border-bottom-color: purple;
  border-top: 0px solid;
  border-bottom: 2px dotted;
  border-left: 0px solid;
  border-right: 0px solid;
  font-family: impact;
  font-size: 16px;
}

Ini hasilnya:

Yang keempat ini tentang form juga tapi dengan button, di postingan yang sebelumnya sudah saya jelaskan button itu apa, jadi tidak perlu saya jelaskan kembali yah.

Ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 on form tombol</title>
    <link href="extCssonbutton.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <form name="form1" method="post">
      <table>
<tr>
          <td width="58">Nama</td>
          <td width="230">: <input type="text" name="nama" value="">
        </tr>
<tr>
          <td width="58">Alamat</td>
          <td width="230">: <input type="text" name="alamat" value=""></td>
        </tr>
<tr>
          <td></td>
          <td><input class="button" type="submit" name="submit" value="simpen">
            <input class="button" type="submit" name="submit2" value="submit"></td>
        </tr>
</table>
</body>
</html>

Ini kodingan cssnya:

input.button{
  color: salmon;
  background: skyblue;
  border-color: lightgrey;
  border-bottom-color: purple;
  border-top: 1px dotted;
  border-bottom: 2px dotted;
  border-left: 1px dotted;
  border-right: 1px dotted;
  font-family: consolas;
  font-size: 18px;
}

Ini hasilnya:

Yang kelima ini sama tentang form dengan button tapi menggunakan hover.

Ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 form tombol hover</title>
    <link href="extCssonbuttonHover.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <form name="form1" method="post">
      <table>
<tr>
          <td width="58">Nama</td>
          <td width="230">: <input type="text" name="nama" value="">
        </tr>
<tr>
          <td width="58">Alamat</td>
          <td width="230">: <input type="text" name="alamat" value=""></td>
        </tr>
<tr>
          <td></td>
          <td><input class="button" type="submit" name="submit" value="simpen">
            <input class="button" type="submit" name="submit2" value="submit"><br></br>
          <a href="extCssonbutton.html" class="linknya">Kembali</a></td>
        </tr>
</table>
</form>
</body>
</html>

Ini kodingan cssnya:

input.button{
  color: coral;
  background: indianred;
  border: 2px outset khaki;
  font-family: Calibri, times, serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
input.button:hover{
  color: coral;
  background: lightsteelblue;
  border: 2px outset green;
  font-family: Cambria, times, serif;
  font-size: 14px;
  font-weight: bold;
}
body{
  background-color: Hotpink;
}
a.linknya{
  background-image: url(gambar/kalong.gif);
  text-decoration: none;
  font-family: impact;
}
a.linknya:hover{
  background-image: url(gambar/kalong.gif);
  color: coral;
  text-decoration: none;
  font-family: arial;
}

Ini hasilnya:

Untuk yang keenam ini tentang form dgn button juga tpi ada tag radionya juga.

Ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Radio button</title>
    <link href="extCssonRadioButton.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <form name="form1" class="f1" action="" method="post">
      <table bordercolor="salmon">
<tr width="120">
          <td width="58">Kelamin</td>
          <td width="150">: <input type="radio" name="radiobutton" class="rb1" value="">
          Pria</td>
        </tr>
<tr>
          <td width="58"> </td>
          <td width="150" class="Kl">: <input type="radio" name="radiobutton" value="radiobutton" class="rb2">
          Wanita</td>
        </tr>
</table>
</form>
</body>
</html>

Ini kodingan cssnya:

input.rb1{
  color: black;
  background: dodgerblue;
  border-color: lime;
  font-family: verdana;
  font-size: 12px;
}
input.rb2{
  color: red;
  background: coral;
  border-color: yellow;
  font-family: verdana;
  font-size: 12px;
}
td{
  color: midnightblue;
  background: bisque;
  border-color: yellow;
  font-family: verdana;
  font-size: 12px;
}
form.f1{
  background: sienna;
  width: 13%;
}

Ini hasilnya:

Nah ini yang terakhir alias tugas akhir saya di petemuan ke11 ini

Ini kdingan htmlya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 LastTaks 11</title>
    <link href="TugasAkhirPert11.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <fieldset>
      <legend id="satu"><b>Formulir Pendaftaran Anggota Perpustakaan</b></legend>
      <form name="textarea" method="post">
        <table class="dua" width="200px">
<tr>
            <td width="2000px">Nama</td>
            <td>: <input type="text" name="nama" value="" width=""></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td width="2000px">TTL</td>
            <td>: <input type="text" name="ttl" value=""></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td width="2000px">Alamat</td>
            <td>: <input type="text" name="alamat" value=""></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td width="2000px">Kelamin</td>
            <td>: <input type="radio" name="radiobutton" value="radiobutton">Pria</td>
            <td></td>
            <td><input type="radio" name="radiobutton" value="radiobutton">Wanita</td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td width="2000px">Kelas</td>
            <td>:
              <select name="Tanggal">
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
              </select>
              <select name="Bulan">
                <option value="Januari">Januari</option>
                <option value="Februari">Februari</option>
                <option value="Maret">Maret</option>
                <option value="April">April</option>
                <option value="Mei">Mei</option>
                <option value="Juni">Juni</option>
                <option value="Juli">Juli</option>
                <option value="Augustus">Augustus</option>
                <option value="September">September</option>
                <option value="Oktober">Oktober</option>
                <option value="November">November</option>
                <option value="Desember">Desember</option>
              </select>
              <select name="Tahun">
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
              </select></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td width="2000px">NIS</td>
            <td>: <input type="text" name="nis" value=""></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
          </tr>
<tr>
            <td></td>
            <td><input class="button" type="button" name="submit" value="Save">
            <input class="button" type="button" name="submit1" value="Cancel">
          <a href="TugasAkhir.html" class="linknya">GO!</a></td>
          </tr>
</table>
</form>
</fieldset>
</body>
</html>

Ini kodingan cssnya:

fieldset{
  border: dashed;
  border-color: red;
  background-color: salmon;
  width: 500px;
}
legend{
  color: pink;
  font-family: elephant;
}
table{
  font-family: fantasy;
}
input.button{
  color: coral;
  background: indianred;
  border: 2px outset khaki;
  font-family: Calibri, times, serif;
  font-size: 14px;
  font-weight: bold;
  width: auto;
}
input.button:hover{
  color: coral;
  background: lightsteelblue;
  border: 2px outset green;
  font-family: Cambria, times, serif;
  font-size: 14px;
  font-weight: bold;
}
body{
  background-color: Orange;
}
a.linknya{
  background-image: url(gambar/kalong.gif);
  text-decoration: none;
  font-family: impact;
}
a.linknya:hover{
  background-image: url(gambar/kalong.gif);
  color: coral;
  text-decoration: none;
  font-family: arial;
}

Ini hasilnya:

Akhirnya sudah sampi di penghujung postingan kali ini. Semoga bermanfaat. Maap bila ada kesalahan penulisan
Wassalamualaikum Wr. Wb.

SchoolBlog

inlinecss

Jumat, 30 Agustus 2019

Pertemuan Kesebelas

Tidak ada komentar:

Posting Komentar