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 36

Assalamualaikum Warahmatullahi Wabarokatuh Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas tentang OOP (Object Oriented Programming) pada php. OOP merupakan konsep/metode programming berorientasi pada objek. Jadi didalam OOP semua digambarkan sebagai objek yang di representasikan. Terdiri dari 3 struktur diantaranya : Class, property, dan method/function. Ok kita langsung saja ke materinya. Coba teman-teman buat sebuah file bernama dan berekstensi seperti ini : HewanPeliharaan.php nah disini kita akan membuat struktur class yang dimana hewan ini memiliki 3 property diantaranya nama, jenis, dan makanan. Untuk lebih jelasnya seperti ini: nama = $nama; $this->jenis = $jenis; $this->makanan = $makanan; } } Tag phpnya tidak perlu ditutup karena ini merupakan class dan kita tidak akan menambahkan code seperti html/js disini. __construct merupakan function yang ada di php, construct ini merupakan bagian code yang akan pertama...

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 36

Haikal PG - XI RPL 1 - PWPB Sesi 25

Haikal PG - XI RPL 1 - PWPB Sesi 7