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.

Ø  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.

Ø  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

Ø  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