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 27

Assalamualaikum Warahmatullahi Wabarakatuh Halo teman-teman gimana kabarnya? semoga sehat selalu ya... . Pada sesi kali ini kita akan memasuki materi database . Kita akan menggunakan Mysql sebagai DBMS (Database Management System) yang singkatnya merupakan software yang digunakan untuk membuat basis data. Kenapa kita menggunakan Mysql ? padalah masih banyak DBMS yang lain?. Alasannya yaitu karena Mysql ini Open Source~~. Materi kali ini kita akan mencoba membuat database dan hal pertama yang harus dilakukan karena kita menggunakan Mysql adalah menginstall XAMPP, karena kita sudah menginstallnya dan bagi yang belum menginstallnya silahkan install terlebih dahulu dan jika sudah terinstall kalian nyalakan XAMPP seperti berikut: Nyalakan Mysql dan Apache. Maka jika sudah maka teman-teman ketik di URL Web Browser masing-masing seperti ini : localhost/phpmyadmin . Maka akan tampil halaman seperti berikut: phpmyadmin. Phpmyadmin merupakan perangkat lunak yang dibuat dengan bahas

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 27

Haikal PG - XI RPL 1 - PWPB Sesi 12