SchoolBlog: Agustus 2019

Jumat, 30 Agustus 2019

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.

Minggu, 25 Agustus 2019

Pertemuan kesepuluh

Assalamualikum temen temen
Di postingan kali ini saya akan membahas tentang CSS pada tabel. Tanpa basa basi lagi langsung aja temen temen lihat di bawah ini.

Ini kodingan Emb Image CSS

  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Css pada img</title>
    <style type="text/css">
      img.aku{
        margin-top  : 10px;
        float       : left;
        clear       : both;
        width       : 200px;
        height      : 200px;
      }
      img.monyet{
        margin-top  : 5px;
        float       : right;
        clear       : both;
        width       : 200px;
        height      : 200px;
        border      : solid;
        border-color:
      }
      img.donut{
        margin-top  : 10px;
        float       : right;
        clear       : both;
        width       : 200px;
        height      : 200px;
      }
    </style>
  </head>
  <body>
    <h1>
Contoh embedded css pada gambar</h1>
<br></br>
    <img class="aku" src="pic/gambarku.jpg" alt=""><br></br>
    <img class="monyet" src="pic/monkey.jpeg" alt=""><br></br>
    <img class="donut" src="pic/donat.jpeg" alt="">
  </body>
</html>

ini hasilnya

Ini kodingan Ext Image Css
ini htmlnya

img#hati{
  margin-top: 10px;
  float: left;
  clear: both;
}
img#acak{
  margin-top: 5px;
  float: right;
  clear: both;
  border: dotted;
  border-color: salmon;
}
img#sultan{
  margin-top: 10px;
  float: right;
  clear: both;
}

ini hasilnya

Ini kodingan Css inline

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI Rpl3 Css BgImage</title>
  </head>
  <body style="background-image: url(pic/fire.jpeg)">
    <h1 style="color:gold;">
hello world!</h1>
<p align="center" style="color:green; font-family:Impact; font-size:24px;
    background-color:Yellow;">
Hallo dunia, ini adalah contoh penggunaan inline!</p>
</body>
</html>

ini hasilnya

Ini kodingan CSS Emb Image

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Css ExtImg</title>
    <style type="text/css">
      #penting{
        font-family:impact;
        font-size:30pt;
        color:bisque;
        text-shadow:2 2 2 red;
        background-image:url(pic/fire.jpeg);
        height:600px;
        width:800px;
      }
    </style>
  </head>
  <body>
    <div id="penting">
      sebenernya, background gambar ini width dan heightnya 300 dam 200 px. tapi
      karena pada css tertulis 800 dan 600 px, maka terjadilah tampilan seperti ini.
    </div>
</body>
</html>

ini hasilnya

ini kodingan penempatan gambar

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Css Placement</title>
    <style type="text/css">
      #bariskepala{
        background-image:url(pic/fire.jpeg);
        background-repeat:repeat-x;
        background-position:left top;
        padding-top:68px;
        margin-bottom:50px;
        color:green;
      }
      #barisduakepala{
        background-image:url(pic/abstrak.jpg);
        background-repeat:no-repeat;
        background-position:right top;
        padding-top:68px;
      }
    </style>
  </head>
  <body>
    <div id="bariskepala">
Sekarang css banyak dilibatkan dalam dokumen web kegunaanya
      adalah untuk mengformat dokumen. sebagai contoh, warna latarbelakang bisa diatur
      melalui css
    </div>
<div id="barisduakepala">
Namun tentu saja kegunaan css jauh lebih banyak dari pada
      hamya dilibatkan dalam dokumen web.kegunaanya adalah untuk mengormat dokumen.
    </div>
</body>
</html>

ini hasilnya

Ini kodingan CSS Emb video

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 testing video</title>
  </head>
  <body>
    <h1 style="color:orangered; text-align:center; font-family:consolas;">
Ini video
    favorit ku</h1>
<video controls="controls" style="display:block; margin:0 auto; width:400px;
    height:500px;">
      <source src="vid/selena gomes.mp4" type="video/mp4">
      your browser does not support the video tag.
    </video>
  </body>
</html>

ini hasilnya

Ini kodingan CSS Emb Video Youtube

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 testing YT</title>
    <style type="text/css">
      .videowrapper{
        position:relative;
        padding-bottom:56.25%;/*16:9*/
        padding-top:25px;
        height:0;
      }
      .videowrapper iframe{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div class="videowrapper">
      <!-- copy & pasted from YouTube -->
      <iframe src="https://www.youtube.com/embed/watch?v=VTIDPC_yvX8" width="560" height="349"
      frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

ini hasilnya

Ini kodingan CSS Emb table

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 border collapse</title>
    <style>
      table{
        border-collapse:collapse;
      }
      table, td, th{
        border:1px solid LawnGreen;
      }
    </style>
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
      </tr>
</table>
</body>
</html>

ini hasilnya

Ini kodingan CSS Ext table1
ini kodingan htmlnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 table with css</title>
    <link href="ExtTable1.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama Belakang</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
      </tr>
</table>
</body>
</html>

ini kodingan cssnya

table,th{
  border: 2px solid Orchid;
  font-family: impact;
  color: violet;
}
td{
  border: 1px solid hotpink;
  font-family: arial narrow;
  color: Orchid;
}

ini hasilnya

Ini kodingan CSS ext table2
ini kodingan html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 table kedua</title>
    <link href="ExtTable2.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama</th>
        <th>Alamat</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
        <td>Jl. Simpang Mencester No.32</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
        <td>Jl. Dimana Hatiku No.372</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
        <td>Jl. Senang Sekali No.0</td>
      </tr>
</table>
</body>
</html>

ini kodingan cssnya

table,th,td{
  border-top: 2px solid red;
  border-right: 2px groove Yellow;
  border-left: 2px dashed Green;
  border-bottom: 2px dotted Pink;
}
table{
  width: 100%;
}
th{
  height: 50px;
  background-color: MediumPurple;
  color: mintcream;
  font-family: consolas;
}

ini hasilnya

Ini kodingan CSS Ext table3

ini kodingan htmlnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Table ketiga</title>
    <link href="ExtTable3.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <table>
<tr>
        <th>Nama Depan</th>
        <th>Nama</th>
        <th>Negara</th>
      </tr>
<tr>
        <td>Itilia</td>
        <td>Cokil</td>
        <td>Italia</td>
      </tr>
<tr>
        <td>Vagipa</td>
        <td>Loli</td>
        <td>Francis</td>
      </tr>
<tr>
        <td>Mayang</td>
        <td>Soro</td>
        <td>Senegal</td>
      </tr>
</table>
</body>
</html>

ini kodingan cssnya

table,td,th{
  border: 1px solid salmon;
}
td{
  background-color: LawnGreen;
  color: green;
  text-align: right;
  height: 30px;
  vertical-align: middle;
  padding-right: 10px;
}
th{
  background-color: red;
  color: mintcream;
  text-align: right;
  height: 50px;
  vertical-align: bottom;
  padding:15px;
}

ini hasilnya

Ini kodingan terakhir sekaligus tugas di pertemuan kali ini

ini kodingan htmlnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 tugas akhir</title>
    <link href="TugasPertemuan10.css" rel="stylesheet" href="text/css">
  </head>
  <body bgcolor="red">
    <table>
<tr>
        <th colspan="2">Pendaftaran Acara PORAK SMAN 1004 Bandung</th>
        <th colspan="2"><img src="pic/kalong.gif" alt="" width="32px" height="32px" style="float:center;">
        </th>
      </tr>
<tr>
        <td id="a">No</td>
        <td id="a">Nama</td>
        <td id="a">Kelas</td>
        <td id="a">XI-MIPA</td>
      </tr>
<tr>
        <td id="b">1</td>
        <td id="c">M Jesus Sengoku</td>
        <td id="c" rowspan="6" colspan="2"><img src="pic/rich.png" width="450" height="250" alt=""></td>
      </tr>
<tr>
        <td id="b">2</td>
        <td id="c">Asep Van Kagomoto</td>
      </tr>
<tr>
        <td id="b">3</td>
        <td id="c">Aisyah Kim</td>
      </tr>
<tr>
        <td id="b">4</td>
        <td id="c">Joe Utum</td>
      </tr>
<tr>
        <td id="b">5</td>
        <td id="c">Mikel Bin Abu Sufyan</td>
      </tr>
<tr>
        <td id="b">6</td>
        <td id="c">Yosep Bakery</td>
      </tr>
</table>
</body>
</html>

ini kodingan cssnya

table,th,td{
  border-top: 2px solid salmon;
  border-right: 2px groove hotpink;
  border-left: 2px dashed silver;
  border-bottom: 2px dotted gold;
}
table{
  border: 2px dashed skyblue;
}
th{
  height: 50px;
  background-color: MediumPurple;
  color: silver;
  font-family: cursive;
}
td,a{
  background-color: MediumPurple;
  color: silver;
  font-style: normal;
}
td,b{
  background-color: hotpink;
  text-align: center;
}
td,c{
  background-color: hotpink;
}

ini hasilnya

NOTE: jangan lupa untuk mensatu folder kan dokumen css dan htmlnya buat yang external, dan juga file gambar nyaa.

Terima kasih sudah melihat postingan saya kali ini, semoga bermanfaat.

Wassalamualiakum Wr. Wb.

Pertemuan kesembilan

Assalamualaikum
Seperti biasa sepertinya saya akan memposting seminggu dua postingan, di postingan kali ini saya akan membahas tentang css pada html. Cukup aja basa basinya ya, langsung liat aja materinya cekidot..

Untuk yang pertama ini saya membuat css nya langsung di dalam kodingan ato bersama dengan kodingan htmlnya gtu, jadi langsung bersatu dengan kodingan htmlnya gtu.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Embedded css</title>
  <style type="text/css">
    #BhsIndo{
      background-color: ghost;
      border: solid;
      padding: 5px;
      font-family: Raleway;
    }
    .kotak{
      text-shadow: 5px 5px 5px yellow;
    }
    #BasaSunda{
      background-color: salmon;
      border: dashed;
      padding: 5px;
      font-family: consolas;
    }
    #English{
      background-color: goldenrod;
      border: double;
      padding: 3px;
      font-family: Impact;
    }
  </style>
  </head>
  <body>
      <div id="BhsIndo" class="kotak">
        Selamat Datang!
      </div>
<div id="BasaSunda">
        Wilujeng Sumping!
      </div>
<div id="English" class="kotak">
        Welcome!
      </div>
</body>
</html>

ini hasilnya

Yang ini kodingan nya hampir sama kaya yang sebelumnya yaitu pengkodingan css di dalam kodingan html, yang membedakan dgn kodingan sebelimnya cma isi bodynya aja.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Embedded css2</title>
  <style type="text/css">
    input#tombol{
      color: Aqua;
      background: salmon;
      border: 2px outset #bbd16d;
      font-size: 14px;
      font: bold;
    }
    .username{
      color: blue;
      background: aqua;
      size: 12px;
    }
  </style>
  </head>
  <body>
      <p>
<form name="Login">
        <label for="username" class="username">username</label>
        <input type="text" name="" value=""></input>
      </p>
<p>
<label for="password">Password</label>
        <input type="password" name="" value=""></input>
      </p>
<p>
<input id="tombol" type="submit" name="" value="Login"></input>
      </p>
</form>
</body>
</html>

ini hasilnya, kaya yang buat masuk platfrom gtu kan?

Nah kalo yang satu ini baru, jadi saya bikin dulu kodingan htmlnya trs buat kodingan css nya untuk menyeting tampilan htmlnya, kalo udah bikin cssnya masuken deh si name file css ke kodingan html di tag <link>. Biar lebih jelas langsung liat aja oke

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 External css</title>
    <link href="external.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <div id="BhsIndo" class="kotak">
      Selamat siang!
    </div>
<div id="Japanese" class="kotak">
      Konnichiwa
    </div>
<div id="English">
      Good Afternoon
    </div>
</body>
</html>

ini kodingan css nya, jdi intnya ini tuh css external ya

.kotak{
  border: solid;
  padding: 5px;
}
#BhsIndo{
  width: 400px;
  height: 100px;
  float: left;
  background-color: papayaWhip;
  font-family: consolas;
}
#Japanese{
  width: 400px;
  height: 100px;
  float: left;
  background-color: Thistle;
  font-family: Impact;
}
#English{
  width: 400px;
  height: 100px;
  float: left;
  background-color: Lightcyan;
  font-family: Arial;
}

ini hasilnya

Kalo ini sama kaya yang tdi, yaitu embeded ato kita sepakatin aja dgn sebutan internal css oke. mangga langsung diliat aja.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Emb macam" heading</title>
    <style type="text/css">
      body,p{
        color:fuchsia:
      }
      h1{
        color:coral;
      }
      p.ex{
        color:rgb(0,0,255);
      }
    </style>
  </head>
  <body>
    <h1>
this one heading</h1>
<p>
this paragph create by fuchsia color.
    default text-color didefinisikan pada body selector.</p>
<p class="ex">
this is paragph with class="ex". and blue text color</p>
</body>
</html>

ini hasilnya

yang ini merupakan tambahan terbaru ini cssnya external nii

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 ext css</title>
    <link href="extformatkarakter.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <p>
Setting space for abjad</p>
<h4>
this is header 4</h4>
</body>
</html>

ini kodingan external cssnya

p{
  letter-spacing: 0.5cm;
  color: DarkSeaGreen;
}
h4{
  letter-spacing: -2px;
  color: coral;
}

ini hasilnya

Ini kodingan tentang dekorasi menggunakana css, dengan menggunakan tag css "text-decoration:"

sok biar lebih jelas liat kodingannya

ini kodingan htmlnya:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 decoration for css</title>
    <link href="exttextdecoandspace.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <em>overline</em>
    <h2>
h2 Line-through</h2>
<h3>
h3 underline</h3>
<p>
<a href="http://instagram.com">
    Klik here, now not blue underline</a></p>
<p class="duasenti">
besar nilai space bisa ditentukan dlm satuan cm dan px.
      yang ini hasil cm(centi meter)</p>
<p class="limapiksel">
ini hasil yang px(pixel)</p>
</body>
</html>

ini kodingan cssnya:

em{
  text-decoration: overline;
  color: salmon;
}
h2{
  text-decoration: line-through;
}
h3{
  text-decoration: underline;
}
a{
  text-decoration: none;
  color: LawnGreen;
}
p.duasenti{
  word-spacing: 2cm
}
p.limapiksel{
  word-spacing: 5px;
}

ini hasilnya

Ini kodingan css internal dengan tag css text indent, align, dan text transform yang fungsinya bisa kalianliat sendiri di screen shotan hasilnya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Format Text</title>
    <style type="text/css">
      p{ text-indent: 2cm;
         text-align: justify;
           }
      p#kanan {text-align: right; color: chartreuse;}
      p.besar {text-transform: uppercase;}
      p.kecil {text-transform: lowercase;}
      p.kapital {text-transform: capitalize;}
    </style>
  </head>
  <body>
    <p>
With Text Indent
    Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan
  dari pengguna, untuk selanjutnya diolah menggunakan bahasa pemrograman web.</p>
<p id="kanan">
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan
  dari pengguna, untuk selanjutnya diolah menggunakan bahasa pemrograman web.</p>
<p class="besar">
pengubahan jadi huruf besar (kapital)</p>
<p class="kecil">
PENGUbahan JAdi HURUF KECil</p>
<p class="kapital">
huruf kapital di detiap awal kata</p>
</body>
</html>

ini hasil ssan nya

Ini kodingan yang terakhir, sekaligus tugas yang diberikan oleh guru pwpb yaitu ibu hana. jdi di tugas ini saya disuruh membuat biografi seseorang dengan desain htmlnya oleh css gtu. saya mengguna kan css external
ini kodingan html nya

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>M Syahrul R XI-Rpl3 Biografi</title>
    <link href="fortaksnine.css" rel="stylesheet" href="text/css">
  </head>
  <body>
    <h1>
biografi singkat emma watson</h1>
<br></br>
    <p>
Ia terkenal dalam perannya sebagai Hermoine Granger dalam film Harry Potter.
      Bernama lengkap Emma Charlotte Duerre Watson atau biasa di panggil Emma Watson
      lahir di Paris, Perancis, 15 April 1990 adalah anak dari pasangan pengacara
      Chris dan Jacqueline Watson yang sekarang telah bercerai. Ia mempunyai adik
      laki-laki bernama Alex. Dia menghabiskan tahun-tahun awalnya di Paris, Perancis,
      dan Oxford, Inggris. Semasa sekolahnya, Watson mengikuti Dragon School, sebuah
      sekolah persiapan swasta, hingga Juni 2003. Pengalaman beraktingnya sangat sedikit,
      sebelum membintangi Film Harry Potter, Selain sekolah, aktivitasnya antara lain
      menulis sebuah puisi, ia pernah mengikuti sebuah kompetisi puisi.</p>
<img src="emma watson.jpg" height="150" width="250" alt="">
  </body>
</html>

ini kodingan cssnya;

body{
  background-color: brown;
}
h1{
  text-align: center;
  text-transform: capitalize;
  font-family:cursive;
  color: gold;
}
p{
  text-align: left;
  font-family:cursive;
  color: silver;
}

dan inilah hasilnya

Note: file dokumen css external harus satu folder dgn file dokumen htmlnya ya

Terima kasih sudah mau melihat blog saya yang banyak kekurangan ini, semoga bermanfaat bagi kalian.
Wassalamualaikum Wr. Wb.

Minggu, 18 Agustus 2019

Pertemuan kedelapan

Assalamualaikum para pembaca setiaku
Untuk postingan kali ini aga berbeda karna saya mulai berinovasi dalam bentuk tampilan untuk postingan bloggernya. Dan dipostingan kali ini saya akan membahas tentan text area.
silahkan di simak!

1. Text area

Untuk membuat text area kalian bisa menggunakan tag <textarea> dan silahkan di lihat contoh kodingan dan hasilnya dengan mengklik kalimat berwarna biru di bawah ini.

klik untuk melihat kodingan text area

Sangat sederhana bukan, saya yakin kalian masih menganggapnya gampang, tpi jangan berhenti disitu silahkan lanjutkan membaca untuk meneruskan ke jenjang selanjutnya.

2. Text area cols

Maksud dari text area cols itu, si colsnya ini tuh adalah atribut dari text area itu sendiri, fungsinya untuk kelebaran text areanya. agar lebih jelas bisa dilihat dgn mengklik kalimat berwarna biru di bawah.

.contoh kodingang text area menggunakan cols

Masih dapat dgn mudah di pahami kan.

3. Text area read only

Maksudnya adalah isi dari text areanya itu ga bisa di ubah user, tpi bisa kalo di salin doang mah.

biar lebih jelas silahkan bisa di coba dengan mengklik kalimat berwarna biru di bawah ini.

klik aja

Nah, ga bisa kalian ubah kan, itulah fungsi atribut 'readonly'

4. Text area read disabled

Artinya berarti si tulisan yang ada di dalem text areanya cuma bisa kita baca aja, ga bisa disalin apalagi di ubah. kalo ga percaya liat aja sendiri.

liat disini

Benerkan, ga bisa kalian apa apain selain kalian baca. dan itu lah fungsinya.

5. Text area password

Tag area ini lah yang biasa digunakan untuk membuat kolom untuk mengisi password, dengan tagnya yaitu <input type="password"> seperti itu. Agar lebih jelas bisa di lihat di link di bawah.

link nya

Sangat mudah bukan

6. Text area hidden

Entahlah apa fungsinya ini, tapi ini akan sangat berguna buat kalian yang ga mau kelihatan privasi saat mengisi data atau apapun yang tdk ingin kalian perlihatkan kpd orang lain. langsung aja liat contoh nya di bawah ini

hidden1

hidden2

Simple tpi sangat bermanfaat.

7. Upload file

Fungsinya untuk mempermudah menguload file, karena hanya dengan satu kali klik kalian langsung memilih file ang akan di upload. lihat kodingan dan hasilnya di link di bawah.

uploadfile

Sangat membantu dan mempermudah iya kan.

8. Button

Di tag button ini ada beberapa atribut, yang pertama ada radio button dan yang kedua ada checkbox button. Untuk melihat apa perbedaannya kalian bisa lihat di link di bawah ini, silahkan cari tau sendiri apa perbedaanya.

radio

checkbox

Perbedaannya jika yang radioa kita plih dengan menghitamkan yang buletnya, klo yang checkbox kalian mencentang tanda kotaknya

9. Option value dan data list

Untuk memilih option dan list yang akan di buat dengan tag <option> dan <datalist> agar lebih lihat contohnya di link di bawah ini.

option&datalist

entah lah yang jelas itu akan berguna untuk tugas akhir.

10. Tugas akhir pertemuan 8

Cukup sulit dan memakan waktu, karna emg sedikit lebih panjang dari yang lain, tapi saya bangga bisa sampai sejauh ini. silahkan dilihat untuk refrensi yang lebih luas tentang penggunaan text area.

tugas akhir 8

Terimakasih telah melihat lihat ato baca baca. Semoga bermanfaat bagi kalian. Maaf jika ada penulisan yang salah, karna saya hanya manusia biasa yang tak luput dari kesalahan.

Sekali lagi terima kasih dan minta maaf
Wassalamualaikum Wr.Wb.

Pertemuan Ketujuh

Assalamualaikum temen-temen

Kembali lagi bersama saya syahrul ramadhana. Dipostingan kali ini saya akan membahas tentang bagaimana cara menginput audio dan video di html. Kalo udah kepo langsung liat aja di bawah ini

1. Input tampilan audio

Kalian dapat menginput audio dengan menggunakan tag <audio controls>, masukan name file audionya di tag <source> , tpi jangan lupa untuk satukan fili audio dan html dalam satu folder.

Ini hasil dari kodingan input tampilan audio. *ps: jika audio tidak dapat diputar kalian bisa setting di explorernya ato ga ganti apk explorernya.

2. Audionya auto play

Jika kalian ingin pemutar musiknya auto play kalian bisa menggunakan tag <embed> dan masukan nama filenya di dalam tag embednya kek gtu. dan selalu ingat untuk satu folder kan file audio dengan html.

Ini ss-an dari hasil kodingan auto play. dan jelas lagunya tiba tiba ngeplay sendiri, saya juga kaget tiba tiba ngeplay kek gtu. walaupun kagetnya pura-pura biar rame doang.

3. Tampilan Video

Nah kalo ini hampir sama kaya yang tampilan audio, yang membedakannya cuma tag awalnya aja, yaitu <video controls>. kesananya mah sama, harus satu folder juga.

ini ss-an hasilnya. sekadar info aja bahwa ini lagu favorit saya di dalam sebuah video. jika kalian kepo bisa langsung komen aja di bawah.

4. Tampilan Video dgn Thumnail

kalo ini hampir ga keliatan ada tag yang berbeda dengan kodingan tampilan video yang tadi. Tapi jika kalian lebih teliti kalian bisa melihat perbedaannya ada atribut 'poster' di dalam tag video. ayo lihat lebih jelas kawan

ini hasilnya, bisa di liat kan kalo video ini ada fotonya dulu, beda sama yang tdi. Padahal saya masukin video yang sama lhoo.

5. Tampilan Flash

kalo di tampilan flash ini saya agak bingung awalnya, tpi dengan sedikit usaha, saya menjadi bisa. dengan tag embed dan masukan typefile swf. kalian bisa langsung melihat hasilnya seperti gambar di bawah

ini hasilnya, kalian bisa memilih apa yang ingin kalian lihat, lalu tinggal tekan dan nikmati deh

6. Tugas akhir pertemuan 7

ini tugas akhir saya, dgn menggunakan kemampuan seadanya dan banyak bantuan teman akhirnya saya bisa menyelesaikannya, meskipun tidak sempurna

ini hasil dari tugas saya semoga bermaanfaat bagi kalian yang membaca.
selalu ingan jika kalian ingin menginput file. selalu satu folder kan filenya dengan file html kalian.

Terima kasih telah memlihat-lihat semoga bermanfaat. selamat mencoba!
Wassalamualaikum Wr. Wb

Minggu, 11 Agustus 2019

Pertemuan keenam

Assalamualaikum Wr. Wb.

Alhamdulilah saya masih hidup, jadi bisa kembali memposting blog about prmrograman web. Kali ini saya akan memposting kodingan html tentang index. langsung aja mangga di lihat.

yang pertama ini kodingan top index

dan ini hasilnya

ini yang kedua, kodingan bottom index

dan ini hasilnya

yang ketiga ini kodingan left index

ini hasil left index

yang keempat adalah kodingan tentang layoutsplit

dan ini hasil layoutsplit

dan ini yang terakhir kodingan membuat index, dan saya memilih membuat biodata index

dan ini hasilnya...

Cukup segitu dulu aja untung postingan kali ini, semoga bermanfaat. saya akhiri dengan pantun teman saya
pak topik beli blewah
wabilahi topik walhidayah, wasalamualaikum wr. wb

inlinecss

Jumat, 30 Agustus 2019

Pertemuan Kesebelas

Minggu, 25 Agustus 2019

Pertemuan kesepuluh

Pertemuan kesembilan

Minggu, 18 Agustus 2019

Pertemuan kedelapan

Assalamualaikum para pembaca setiakuUntuk postingan kali ini aga berbeda karna saya mulai berinovasi dalam bentuk tampilan untuk postingan bloggernya. Dan dipostingan kali ini saya akan membahas tentan text area.silahkan di simak!

Terimakasih telah melihat lihat ato baca baca. Semoga bermanfaat bagi kalian. Maaf jika ada penulisan yang salah, karna saya hanya manusia biasa yang tak luput dari kesalahan.

Sekali lagi terima kasih dan minta maafWassalamualaikum Wr.Wb.

Pertemuan Ketujuh

Minggu, 11 Agustus 2019

Pertemuan keenam

Assalamualaikum para pembaca setiaku
Untuk postingan kali ini aga berbeda karna saya mulai berinovasi dalam bentuk tampilan untuk postingan bloggernya. Dan dipostingan kali ini saya akan membahas tentan text area.
silahkan di simak!

Sekali lagi terima kasih dan minta maaf
Wassalamualaikum Wr.Wb.