Haikal PG - XI RPL 1 - PWPB Sesi 11

Assalamualaikum Warahmatullahi Wabarokatuh

Kembali lagi dengan saya di sesi ke-11 ini. Pada kali ini kita akan membahas tentang CSS pada form, dipertemuan sebelumnya kita telah mempelajari CSS pada multimedia. Sekarang kita masuk tutorialnya :

CSS Pada Elemen Form

jenis border
warna border
lebar border
batas form dari sisi layout
dan warna background dari form

extCSSonForm1.html

Pertama kita harus buat file html dan css terlebih dahulu, dan jangan lupa hubungkan dengan tag link. Tampilan yang akan kita buat :

Kita gunakan tag textarea dan tabel untuk membuat tampilan awalnya, buat tampilan awalnya seperti diatas. dan edit textarea tersebut dengan CSS.

extCSSonForm2.html
Kita juga bisa menambahkan background color pada textarea seperti tampilan dibawan ini :

extCSSonForm3.html
Lanjut, kita akan mengedit tag input dengan memberi warna dan border, ini dia tampilannya :

extCSSonbutton.html
Kita juga bisa mengkustom sebuah button :

Buat dengan menggunakan pengkodingan CSS external.

extCSSonbuttonHover.html
kita juga bisa membuat button menjadi hover, hover digunakan untuk tampilan button waktu sebelum mengklik dan sesudah mengklik akan berbeda. Kita juga bisa mengganti cursor menjadi pointer, progress, crosshair dll. Contoh kode, dan tanpilannya :
Coba teman-teman tekan/arahkan cursor ke button 'simpan' dan 'submit' maka jika kalian lihat akan ada perubahan warna dan background. Kita lihat di code css. di selectornya "input.button:hover" dan isinya dibuah warnanya seperti code diatas. Gimana mudah bukan?.

extCSSonRadioButton.html
Teman-teman tau radio button?. Ya radio button digunakan untuk option pemilihan. Misal kita akan memilih gender 'male/female' pada pendaftaran. Contoh tampilanya dan codenya :

QUIZZ 11 bagian 1

Gunakan Tag Legend Dan Fieldset

Code :

QUIZZ 11 bagian 2

Buat 1 page html dan 1 page css
Buat bebas dan sekreatif mungkin.

Contoh yang saya buat :

Contoh

Codenya :
HTML:

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Haikal Putra Gustiansyah</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="ggg.jpg">
 <div id="uni-parent">
 <div id="uni">
  <div id="header">
   <div class="menu">
    
    <ul>
<li class="dropdown"><a href="">Info</a>
      <ul  class="dropdown-item">
<li><a href="">Tentang Kami</a></li>
<br>
<li><a href="">Tentang Web</a></li>
<br>
<li><a href=""> Biodata Diri</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="konten">
   <div class="sub-konten">
    <img src="ggg.jpg" height="100px" width="100px"/><br>
    <input type="text" name=""  maxlength="11">
    
    <input type="submit" name="reset" id="atas">
   </div>
<div class="sub-konten">
    <img src="ggg.jpg" height="100px" width="100px"/>
    <input type="text" name=""  maxlength="11">
    <input type="submit" name="reset" id="atas">
    
   </div>
</div>
</div>
<div id="sidebar">
   <a href="https://www.instagram.com/haikal_pg123/"  class="link"><img src="ggg.jpg" height="50px" width="50px"></a>
   <a href="mailto:haikalg2003@gmail.com"  class="link"><img src="ggg.jpg" height="50px" width="50px"></a>
   <a href=""  class="link"><img src="ggg.jpg" height="50px" width="50px"></a>
  </div>
</div>
</body>
</html>

CSS:

*{
  margin: 0;
  padding: 0;
 }
 body{
  background-size: cover;
 }
 #uni-parent{
  width: 100%;
 }
 #uni{
  width: 800px;
  margin-right: 20px;
  margin: 0 auto;
 }
 #header{
  width: 100%;
  background-color: red;
  opacity: .85;
  color: white;
  height: 40px;
  margin-top: 20px;
  /*border-radius: 20px;*/
  box-shadow: 10px 10px 10px black;
 }
 .menu{
  background-color: red;
  margin-left: 20px;
  height: 40px;
  margin-right: 20px;
  margin-top: 20px;

 }
 .menu ul li{
  
  padding:10px;
 }
 .menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

 }
 .menu ul li{
  float: left;
 }
 .menu li a{
  text-decoration: none;
  display: inline-block;
  color: white;
  text-align: center;
 }
 .menu li a:hover{
  color: black;
 }
 li .dropdown{
  display: inline-block;
 }
 .dropdown:hover .dropdown-item{
  display: block;
 }
 .dropdown-item a:hover{
  color: cyan !important;
 }
 .dropdown-item{
  position: absolute;
  text-align: center;
  display: none;
  background-color: red;
  z-index: 1;
  box-shadow: 10px 10px 10px black;
 }
 .menu ul li ul li a{
  border-bottom: 3px dotted black;
 }
 #konten{
  height: 600px;
  width: 700px;
  margin-left: 50px;
  background-color: lavender;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 10px 10px 10px black;
  border:3px dashed black;
 }
 .sub-konten{
  height: 250px;
  width: 80%;
  background-color: white;
   margin-left: 65px;
   margin-top: 20px;
   border:2px dashed black;
 }
 .sub-konten img{
  margin-left: 240px;
  margin-top: 10px;
  border-radius: 10px;
  border:1px solid black;
  cursor:crosshair;
 }
 .sub-konten input{
  margin-left: 190px;
  border:2px dashed black;
  text-align: center;
  text-transform: uppercase;
  font-family: cursive;
  height: 40px;
 }

 #atas{
  margin-top: 10px;
  background-color: white;
  cursor: pointer;
 }
 #sidebar{
  height: 200px;
  width:100px;
  /*background-color: lavender;*/
  opacity: 0.5;
  /*border:1px dashed black;*/
  float: left;
  top: 0;
  position: fixed;
  margin-top: 100px;
  border-radius: 10px;
 }
 .link img{
  margin-left: 20px;
  margin-top: 10px;
  border-radius: 10px;
 }
 @media screen and (max-width: 600px){
  *{
  margin: 0;
  padding: 0;
 }
 body{
  background-size: cover;
 }
 #uni-parent{
  width: 100%;
 }
 #uni{
  width: 100%;
  margin-right: 20px;
  margin: 0 auto;
  left: 0;
 }
 #header{
  width: 100%;
  background-color: red;
  opacity: .85;
  color: white;
  height: 40px;
  /*margin-top: 20px;*/
  border-radius: 20px;
  box-shadow: 10px 10px 10px black;
 }
 .menu{
  background-color: red;
  /*margin-left: 20px;*/
  height: 40px;
  margin-right: 20px;
  margin-top: 20px;

 }
 .menu ul li{
  
  padding:10px;
 }
 .menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

 }
 .menu ul li{
  float: left;
 }
 .menu li a{
  text-decoration: none;
  display: inline-block;
  color: white;
  text-align: center;
 }
 .menu li a:hover{
  color: black;
 }
 li .dropdown{
  display: inline-block;
 }
 .dropdown:hover .dropdown-item{
  display: block;
 }
 .dropdown-item a:hover{
  color: cyan !important;
 }
 .dropdown-item{
  position: absolute;
  text-align: center;
  display: none;
  background-color: red;
  z-index: 1;
  box-shadow: 10px 10px 10px black;
 }
 .menu ul li ul li a{
  border-bottom: 3px dotted black;
 }
 #konten{
  height: 600px;
  width: 80%;
  /*margin-left: 50px;*/
  background-color: lavender;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 10px 10px 10px black;
  border:3px dashed black;
 }
 .sub-konten{
  height: 250px;
  width: 65%;
  background-color: white;
   /*margin-left: 65px;*/
   margin-top: 20px;
   border:2px dashed black;
 }
 .sub-konten img{
  /*margin-left: 240px;*/
  left: 0;
  margin: 100px;
  position: relative;
  width:50px; 
  height: 50px;
  margin-right: 50px;
  margin-top: 10px;
  margin-bottom: 0;
  border-radius: 10px;
  border:1px solid black;
  cursor:crosshair;
 }
 .sub-konten input{
  /*margin-left: 190px;*/
  height: 20px;
  position: relative;
  margin-top: 70px;
  margin: 10px;
  margin-bottom: 20;
  /*margin-right: 30000000000px;*/
  border:2px dashed black;
  text-align: center;
  text-transform: uppercase;
  font-family: cursive;
  
 }

 #atas{
  margin-top: 10px;
  background-color: white;
  cursor: pointer;
 }
 #sidebar{
  display: none;
 }
 .link img{
  margin-left: 20px;
  margin-top: 10px;
  border-radius: 10px;
 }
 }

Sekian saja pada pertemuan kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh.

Haikal PG - XI RPL 1 - PWPB Sesi 38

Assalamualaikum Warahmatullahi Wabarokatuh Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas tentang overloading. Overloading Overloading di PHP menyediakan cara agar properti dan method dapat dibuat secara dinamis. Entitas dinamis ini diproses melalui method ajaib yang dapat dibangun di class untuk berbagai jenis tindakan. method overloading dipanggil saat berinteraksi dengan properti atau method yang belum dideklarasikan atau tidak terlihat dalam baris program. Sisa dari bagian ini akan menggunakan istilah properti dan method yang tidak dapat diakses untuk merujuk pada kombinasi deklarasi dan visibilitas tersebut. Semua method overloading harus didefinisikan sebagai public. Contoh overloading dengan isset,unset,set, dan get.: data[$name] = $value; } public function __get($name) { echo "Getting".$name."\n"; if (array_key_exists($name, $this->data)) { return $this->data[$name]; } $tra...

Baca selengkapnya

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 11

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 9

Haikal PG - XI RPL 1 - PWPB Sesi 21

Haikal PG - XI RPL 1 - PWPB Sesi 38