LAPORAN PRAKTIKUM PENGENALAN WEB Modul 8 CSS Lanjut

11
                LAPORAN PRAKTIKUM
PENGENALAN WEB
Modul 8
CSS Lanjut





Disusun Oleh :

HERI PURNAMA
125410101
TI 03


UPT LABORATORIUM
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM
Yogyakarta
2014



CSS Lanjut

1).PEMBAHASAN
LISTING
A.

  pertemuan ke 8
  Ø  Diatas adalah tag yang digunakan untuk memebuat judul pada html
Ø  Tag style type digunakan untuk menunjukkan bahwa itu mengguanakan css
 
img
  {
  width:250px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:0px;
  opacity:0,2;
  }
 
Ø  Tag diatas menunjukkan bahwa nanti gambar yang dimasukkan dalam halaman Web akan diatur secara otomatis ,karena sudah diatur oleh css.Dengan ketentuan:
1.      Mempunyai lebar 250px
2.      Wet kit Border radius 30px
3.      moz border radius 30ox
4.      border radius 0px
5.      opacity 0,2
 
  img:hover
  {
   width:300px;
  -webkit-border-radius:35px;
  -moz-border-radius:35px;
   border-radius:0px;
  }
 
Ø  tag diatas digunakan untuk pengaturan apabila gambar pada halaman Web terkena cursor maka akan memebuat gambar berubah menjadi lebih besar.Ini dapat dilihat dengan ukuran gambar yang berubah dari yang pertama tadi dan juga adanya tag yakni hover.
 
 
-->



  



Ø  Tag diatas digunakan untuk membuat atau memasukkan gambar pada halaman Web yang mana gambar yang akan dimasukkan berjudul “sunset.jpg” dan terlihat dari tag .



Ø  Tampilan dari web diatas
B.

  pertemuan ke 8
Ø  Diatas adalah tag yang digunakan untuk memebuat judul pada html
Ø  Tag style type digunakan untuk menunjukkan bahwa itu mengguanakan css
 
  img
  {
  width:250px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border:7px solid black;
  border-radius:20px;
  opacity:0,2;
  }
Ø  Tag diatas pengaturan gambar yang dimasukkan dalam css yang mana gambar nanti ,mempunyai border yakni “solid black”dengan ukuran 7px.Dan dengan pengaturan lain yakni :
1.       Lebar = 250 px
2.       webkit-border-radius:30px;
3.       -moz-border-radius:30px;
4.         border-radius:20px;
5.       opacity:0,2;
 
 
-->



  



Ø  Tag diatas digunakan untuk membuat atau memasukkan gambar pada halaman Web yang mana gambar yang akan dimasukkan berjudul “sunset.jpg” dan terlihat dari tag .



Ø  Tampilan dari web diatas



















  pertemuan ke 8
  Ø  Diatas adalah tag yang digunakan untuk memebuat judul pada html
Ø  Tag style type digunakan untuk menunjukkan bahwa itu mengguanakan css
 
 
  img
  {
  width:250px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:0px;
  opacity:0,2;
  -moz-transition :all.5s ease-in-out;
  transation: all.5s ease-in-out;
  }
 
Ø  Tag diatas menunjukkan bahwa nanti gambar yang dimasukkan dalam halaman Web akan diatur secara otomatis ,karena sudah diatur oleh css.Dengan ketentuan:
6.      Mempunyai lebar 250px
7.      Wet kit Border radius 30px
8.      moz border radius 30ox
9.      border radius 0px
10. opacity 0,2
        Pengaturan   {-moz-transition :all.5s ease-in-out; transation: all.5s ease-in-out} nantinya akan membuat gambar mempunyai transisi & Tranparansi pada halaman Web nantinya.
 
  img:hover
  {
   width:300px;
  -webkit-border-radius:35px;
  -moz-border-radius:35px;
   border-radius:0px;
  }
 
Ø  tag diatas digunakan untuk pengaturan apabila gambar pada halaman Web terkena cursor maka akan memebuat gambar berubah menjadi lebih besar.Ini dapat dilihat dengan ukuran gambar yang berubah dari yang pertama tadi dan juga adanya tag yakni hover.
 
 
-->



  



Ø  Tag diatas digunakan untuk membuat atau memasukkan gambar pada halaman Web yang mana gambar yang akan dimasukkan berjudul “sunset.jpg” dan terlihat dari tag .



2).TUGAS
         //lab.akakom.ac.id/~heripur10101/Tugas web modul 8

3).KESIMPULAN
a.       Fungsi hover adalah untuk membuat tampilan sebuah Link pada saat Link tersebut disentuh oleh cursor biasanya sebuah text Link akan berubah warna pada saat Link tersebut disentuh oleh cursor.
b.      Hover bisa digunakan untuk fungsi lain seperti pada listing diatas yakni untuk merubah tampilna gambar dari ukuran semula ke ukuran yang lain , bisa untuk membuat ukuran gambar lebih kecil atau lebih besar pada asar cursor menyentuh gambar.

4).LISTING TERLAMPIR






    Blogger Comment
    Facebook Comment

0 komentar:

Post a Comment

Thanks For Your Feedback.