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 19

Assalamualaikum Warahmatullahi Wabarokatuh Kita akan melanjutkan materi tentang web dinamis. Apa saja yang akan kita pelajari? Pengenalan PHP Aturan umum PHP Scripting Variable Tipe Data Komentar Operator Membuat Aplikasi Sederhana Variable Scope (Lingkup Variabel) Pengelompokkan Tipe Data Boolean String Studi Kasus Hal yang harus dipersiapkan: XAMPP yang sudah diinstal kita akan menggunakan web server apache yang telah di bundle dalam aplikasi XAMPP ini Notepad++, Vs Code, Sublime atau apapun text editor favorit kalian. Pengenalan PHP PHP adalah bahasa pemrograman yang didesain khusus untuk membuat halaman web. PHP adalah singkatan dari Hypertext Preprocessor. Awalya, PHP adalah singkatan dari Personal Home Page yang pertamkali diciptakan oleh Rasmus Lerdorf PHP diciptakan pertama kali untuk keperluan mencatat jumlah pengunjung himepage nya. Perkembangan php saat ini dapat dilihat pada www.php.net PHP adalah salah satu bahasa server-side yang pali

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 19

Haikal PG - XI RPL 1 - PWPB Sesi 12

Haikal PG - XI RPL 1 - PWPB Sesi 14