MODUL VIII, WEB 1

BEKERJA LANJUT DENGAN CSS
 

1.      TUJUAN
Mahasiswa dapat mengatur teks, links, link dengan properti-propertuyang ada dalam CSS
2.      TEORISINGKAT
         CSS atau cascading style sheetsdigunakan dalam kode html untuk menciptakan suatu kumpulan style yang dapatdigunakan untuk memperluas kemampuan html.
         Tag yang digunakan adalah:
         1.      Pasangan …..</style.

         2.      Pasangan

 

         Penulisannya adalah sebagai beriku:

         Nama_taq {property_1: nilai_1;…..;property_n: nilai_n}

 

3.      PRAKTEK

 

Membuat script html praktek81.html

Membuat tampilan animasi sederhana dengan css model link,visited, hover. Dengan memanfaatkan perintah link, sebagaimana biasa adalahperintah untuk melinkkan suatu alamat url agar dapat dituju oleh suatu web jikalink tersebut diklik. Visited artinya ketika telah dikunjungi maka akanberwarna merah sedangkan hover menunjukkan perintah agar pada saat kursostersebut berada diatasnya maka action akan dilakukan sesuai dengan perintahtertulis dalam taq hover.

Di sini ada lima (5) buah css untuk mengatur tampilanlima baris kalimat yang dibuat berbeda. Dibuat demikian agar kita dapat mengetahuibagaimana perbedaan reaksi dari masing-masing perintah dengan memanfaatkan cssdi bawah ini.

Pada tag clas one, adalah menampilkan link denganmenampilkan reaksi dimana pada saat mouse over maka reaksi dari kalimat linkberubah menjadi berwarna biru karena kode #3300CC adalah kode dari warna biruwalaupun pada saat pertama ditampilkan warnanya adalah merah dengan garisbawah/underline (default dari suatu link).

Selanjutnya adalah kelas two, dimana fungsi link diubahmenjadi bepenampilan dengan huruf yang berubah menjadi besar ketika mouseberada diatasnya. Sedangkan pada kelas three penampilan link berubah menjadi berlatar belakang warna hijau. Dan untuklink ke empat atau pada kelas four tipe font berubah menjadi courier new, danyang terakhir pada kelas css five tampilan pada awal link tidak menggunakangaris bawah ketika make over berubah menjadi bergaris bawah dengan perintahtext-decoration: underline. Namun pada kelas kelima ini untuk menghilangkandefault garis bawah pada link kita harus menambahkan pada kelas five.link danfive.visited dengan text-decoration: none. Agar tampilan ketika kelasfive.hover dapat dilihat perbedaannya.

 

a.one:link{color:#ff0000}

a.one:visited{color:#0000ff}

a.one:hover{color:#3300CC}

 

a.two:link{color:#ff0000}

a.two:visited{color:#0000ff}

a.two:hover{font-size:150%}

 

a.three:link{color:#ff0000}

a.three:visited{color:#   0000ff}

a.three:hover{background:#66ff66}

 

a.four:link{color:#ff0000}

a.four:visited{color:#0000ff}

a.four:hover{font-family:monospace}

 

a.five:link{color:#ff0000;text-decoration:none}

a.five:visited{color:#0000ff;text-decoration:none}

a.five:hover{text-decoration:underline;color:blue}

 

 

Arahkankursor pada link untuk melihat perubahannya






Hasil tampilan program:
File praktek kedua beri nama praktek82.html
Praktek ke dua ini cukup banyak penggunaan tag style,yaitu ada 7 (tujuh) selector. Selector ul adalah untuk mengatur tampilan daftarlist tanpa numbering, batas margin 0, jarak tulisan dari sisi-sisi kosong, dan overflow. Selector li digunakan untuk mengatur list agar ditampilkan dalam bentuk listberjajar ke kanan atau ke bawah. Karena menggunakan left atau right maka listtersebut akan diarahkan ke kanan, tetapi ketika kita gunakan center maka akanditampikan berjajar ke bawah. Selector h1 digunakan untuk mengatur besaran fontdengan ukuran 30px dan berwarna merah.
Selain itu ada selector table yang berisi pengaturanboder tabel sebesar 1 pixel dengan warna solid hitam. Dengan selector td yangdigunakan untuk mengatur kolom-kolom pada tabel dikondisikan dengan posisi textberada di tengah (text-align:center) dan menggunakan warna background  biru muda. Selector td.atas adalah turunandari selector td dengan menggunakan text-align sama yaitu center atau textberada di tengah, background-position:center adalah perintah untuk menempatkanbackground agar senantiasa berada di tengah dan background-image menggunakangambar dengan nama file 1.gif, script url digunakan untuk mengatur nama filedan letak forlder file gambar tersebut.
Selectoryang cukup rumit adalah selector a yang didalamnya terdapat bagian a:link,a:visited, a:hover, a:active. Pada a:link, adalah perintah terkiat link ke url,a: visited selalu berpasangan dengan a:link digunakan untuk mengetahui suatulink yang sudah dikunjungi. Selector a:hover terkait tampilan ketika mouse overatau mouse berada di atas link tersebut, dan a:active adalah pasangan agardengan a:hover dan untuk menunjukkan link mana yang aktif.
Demikianlah,penyusunan selector/tag style sudah cukup untuk memformat suatu tampilan webagar cukup menarik. Sehingga dapat diimplementasikan pada web html sebagaimana di bawah ini. Selectorini digunakan untuk membuat tabel dengan latar belakang biru muda. Terdiri dari3 baris dan satu kolom, dapat dilihat dari pasangan tag

dan

, masing-masing berjumlah3 dan 1.

Pada baris bertama diisi dengan tulisan WEBSITEKU denganlatar belakang adalah gambar kelinci bergerak yang diambil dari file 1.gifberbentuk animasi gif karena baris ini menggunakan selector td.atas denganperintah
. Baris kedua berisi daftar list yang disusunmendatar ke kanan karena menggunakan selector td yang didalamnya terdapat tag uldan li {float:left}. Walaupun pada script tampilan tulisan link menggunakanhuruf kecil tetapi karena menggunakan tag text-transform: uppercase untuk mengubah huruf kecil menjadi hurufbesar semua. Warna, letak, jenis font, besarnyadiatur dalam selector a:link, a:visited ini. Sedangkan tampilan ketika mouseover menjadi merah diatur dalam selector a:hover, a:actived.

ul

       {

       list-style-type:none;

       margin:0;

       padding:0;

       overflow:hidden;

       }

 

li

       {float:left;}

 

h1

       {

       font-size: 30px;

       color:#ffffff;

       }

 

table

       {

       border:1px;

       solid:black;

       }

 

td

       {

       text-align:center;

       background-color:#9999FF;

       }

 

td.atas

       {

       text-align:center;

       background-position:center;

       background-image:url(gambar1.jpg);

       }

 

a:link,a:visited

       {

       display:block;

       width:120px;

       font-weight: bold;

       color: #FFFFFF;

       background-color:#9966FF;

       text-align:center;

       padding: 4px;

       text-decoration: none;

       text-transform: uppercase;

       }

 

a:hover,a:active

       {

       background-color:red;

       }

 

      

             

             

      

      

      

                    

WEBSITEKU

             

                    

                        
  • Home
  •                     
  • Profil
  •                     
  • Friends
  •                     
  • Inbox
  •                     

             
Selamat datang di website kami
Copy@right byfm2010

Hasil script:
Memodifikasi file praktek83.html
Berikut ini adalah cara sederhana untuk memodifiksi agartampilan menu link tidak lagi berjajar ke kanan tetapi ke bawah. Kita tidakperlu melakukan banyak perubahan, ada bebrapa cara. Pada kesempatan ini kitaakan coba melakukan perubahan dengan menghilangkan tag li pada tag
    yang fungsinya untuk menampilkan daftar list.

    Cara yang kedua lebih mudah lagi yaitu dengan mengubahperintah pada float: left; menjadi float:center pada selector li juga. Jadikalau cara yang pertama adalah menghilangkan tag li yang berada di dalam bodyhtml tetapi cara yang kedua adalah dengan mengubah statemen li pada tag styleli, sehingga menjadi seperti di bawah ini. Atau mungkin sekaligus denganmenghilangkan selector li.
    li
          {
          float:center;
          }
    Dibawah ini kita mencoba dengan cara yang pertamasekaligus memodifikasinya dengan menambah colom dalam tabel. Sehingga tabelyang tadinya terdiri dari 3 baris 1 kolom berubah menjadi 3 baris 2 kolom.Kemudian kita menghilangkan tanda tag li pada body tag.

    ul

           {

           list-style-type:none;

           margin:0;

           padding:0;

           overflow:hidden;

           }

     

    li

           {

           float:left;

           }

     

    h1

           {

           font-size: 30px;

           color:red;

           }

     

    table

           {

           border:1px;

           solid:black;

           }

     

    td

           {

           text-align:center;

           background-color:#9999FF;

           }

     

    td.atas

           {

           text-align:center;

           background-position:center;

           background-image:url(1.gif);

           }

     

    a:link,a:visited

           {

           display:block;

           width:120px;

           font-weight: bold;

           color: #FFFFFF;

           background-color:#9966FF;

           text-align:center;

           padding: 4px;

           text-decoration: none;

           text-transform: uppercase;

           }

     

    a:hover,a:active

           {

           background-color:#990099;

           }

     

          

                 

                 

                 

                 

          

          

          

                        

    WEBSITEKU

                 

                        

                           Home
                           Profil
                           Friends
                           Inbox
                          

                 

                 
                 
    Selamat datang di website kami
    Copy@right by fm2010

    Hasil script
    TUGAS:
    Membuat tampilan sederhana untuk suatu web denganmenggunakan css. Kita hanya melakukan perubahan pada tugas di atas. Denganmenambahkan beberapa tampilan.

    ul

           {

           list-style-type:none;

           margin:0;

           padding:0;

           overflow:hidden;

           }

     

    li

           {

           float:left;

           }

     

    h1

           {

           font-size: 30px;

           color:red;

           }

     

    table

           {

           border:4px;

           solid:black;

           }

     

    td

           {

           text-align:center;

           background-image:url(back2.jpg);

           }

     

    td.atas

           {

           text-align:center;

           background-position:center;

           background-image:url(back1.jpg);

           }

     

    a:link,a:visited

           {

           display:block;

           width:120px;

           font-weight: bold;

           color: #FFFFFF;

           background-color:#9966FF;

           text-align:center;

           padding: 4px;

           text-decoration: none;

           text-transform: uppercase;

           }

     

    a:hover,a:active

           {

           background-color:#990099;

           }

     

    w

           {

           font-size:20px;

           color:white;

           }

     

          

                 

                 

                 

                 

          

          

          

                        

    BLOODERGROUP

                 

                        

                           Home
                           Profil
                           Comunity
                           Comment
                          

                 

                 
                 
    Selamat datang diwebsite kami

           kami adalah salah satu kelompok darisekian banyak masyarakat yang peduli pada kemanusiaan.
           Dengan memberikan setes darah yang mungkin tidak kita
           butuhkankarena berlebihnya daerah pada tubuh kita jauh lebih bermanfaat apabila dapatdimanfaatkan oleh orang lain.
          
    Copy@right by fm2010

    KESIMPULAN:
  • Dengan css efisiensi penulisan script web page dapat dimaksimalkan, karena dengan banyaknya perulangan penulisan suatu tag dapat diringkas menjadi satu atau beberapa bagian saja yang kita definisikan. Misalnya pada saat kita menuliskan (font size=”12px” color=”blue” face=”arial”> dan itu kita perlukan berulang-ulang karena posisinya berada di dalam suatu tabel. Kita cukup menuliskannya dalam satu selektor saja, misalnya dalam bentuk {font-size:12px color:blue font-family:arial}, sehingga setiap saat yang kita panggil adalah selektor saja.
  • Apabila suatu web sudah disusun dalam bentuk format css maka setiap kita menginginkan untuk modif tampilan cukup file css yang kita modifikasi, tidak perlu kita mengobrak-abrik file html. Inilah yang kemudian banyak disukai oleh programer web karena kemudahan dan efisiensi dalam penggunaan. Dapat kita lihat saat ini banyak development program menggunakan prinsip css seperti joomla dan pada aplikasi banyak digunakan untuk blog-blog gratisan maupun yang berbayar.
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s