Source Code: Materi Latihan Praktikum Web Pertemuan 4

webBeberapa materi latihan praktikum pertemuan 4 ini berkaitan dengan materi latihan praktikum pertemuan 3 sebelumnya. Pada pertemuan ini dibahas tentang CSS (Cascading Style Sheet), bagaimana penerapannya dalam dokumen atau halaman-halaman HTML dan sebagainya. Praktikum pada pertemuan 4 ini terdiri dari 7 latihan, silahkan lihat pada daftar di bawah ini.

Tentang penjelasannya, seharusnya sudah Anda ketahui dan pahami ketika saya menyampaikan materi saat tatap muka 🙂 🙂 tetapi jika masih hal-hal yang mungkin membingungkan atau kurang memahami materi latihan, silahkan sampaikan pada bagian komentar di bawah.

  • Latihan 10, tentang Inline CSS. Silahkan buka source code dari latihan9.html Anda, simpan dengan nama lain (save as) dengan nama latihan10.html kemudian cari bagian berikut:
    
    <tr>
    
    <td>Nama</td>
    
    
    <td><input type="text"></td>
    
    </tr>
    
    
    <tr>
    
    <td>Alamat</td>
    
    
    <td><input type="text"></td>
    
    </tr>
    
    

    Kemudian Anda ketik kode CSS sehingga kode di atas menjadi seperti di bawah ini:

    
    <tr>
    
    <td>Nama</td>
    
    
    <td><input type="text" style="border:1px dotted #ddaa99; background:#dddddd;"></td>
    
    </tr>
    
    
    <tr>
    
    <td>Alamat</td>
    
    
    <td><input type="text" style="border:1px solid #ff9900; background:#eeff88; text-transform:uppercase;"></td>
    
    </tr>
    
    

    setelah diubah, simpan file Anda (latihan10.html) ini dan coba akses file tersebut dan lihat apa yang ditampilkan 🙂

  • Latihan 11, membahasa tentang Embeded CSS. Buka source code latihan9.html Anda dan lakukan save as menjadi latihan11.html, kemudian Anda ubah bagian head dari halaman tersebut sehingga menjadi sebagai berikut:
    <html>
    <head>
    <title>Latihan 11</title>
    
    <style>
    body { background:#dddddd;color:#ff0000; }
    table { border:2px solid #009900; border-radius:10px; }
    input { border:1px dashed #00ff00; color:#0000ff; text-transform:uppercase; padding:10px; margin:5px; }
    </style>
    
    </head>
    <body>
    

    Simpan file Anda dan akses untuk melihat hasilnya (latihan11.html).

  • Latihan 12, merupakan contoh untuk mengimplementasikan External CSS. Terdiri dari 2 buah file yaitu file halaman HTML dan file CSS yang saling terpisah. Untuk file latihan12.html silahkan lihat kode berikut ini:
    <HTML>
    <HEaD>
    <tiTLe>latihan 12</TitLE>
    <link rel="stylesheet" type="text/css" href="cssku.css">
    </hEAd>
    
    <BodY>
    Contoh External CSS
    
    <h1>STMIK Palangkaraya</h1>
    
    
    
    STMIK Palangkaraya, awalnya bernama AMIK Palangkaraya. Dulu beralamat di Jalan Kinibalu No. 120, kini pindah ke Jalan G. Obos No 114, gedung perkuliahannya ada 3 lantai dan halaman yang lebih luas dibanding kampus sebelumnya.
    
    
    </bODy>
    </htmL>
    

    Adapun file CSS untuk latihan di atas adalah sebagai berikut, beri nama file cssku.css:

    body {
       background:#ccc;
       font-family:verdana;
       font-weight:bold;
       font-size:17px;
       color:#0000ff;
    }
    h1 {
       font-family:"trebuchet ms";
       font-size:33px;
       text-decoration:overline;
       color:#ff6600;
       margin-left:40px;
    }
    p {
      border:1px solid #ddffaa;
      padding:20px 0 10px 40px;
      color:#ddaa99;
      text-align:justify;
      background:#e34e34;
    }
    
  • Latihan 13, merupakan contoh untuk penerapan CSS dengan nama selector yang dibuat sendiri atau ditentukan sendiri (tidak menggunakan tag HTML sebagai selector). Latihan ini terdiri dari 2 buah file juga yaitu latihan13.html dan cssmu.css. Berikut adalah kode program untuk file latihan13.html:
    <HTML>
    <HEaD>
    <tiTLe>Latihan 13</TitLE>
    <link rel="stylesheet" type="text/css" href="cssmu.css">
    </hEAd>
    
    <BodY id=umum>
    Contoh External CSS
    
    <h1 class=kepala>STMIK Palangkaraya</h1>
    
    
    
    STMIK Palangkaraya, awalnya bernama AMIK Palangkaraya. Dulu beralamat di Jalan Kinibalu No. 120, kini pindah ke Jalan G. Obos No 114, gedung perkuliahannya ada 3 lantai dan halaman yang lebih luas dibanding kampus sebelumnya.
    
    
    </bODy>
    </htmL>
    

    Sedangkan file cssmu.css adalah sebagai berikut:

    #umum {
       background:#000000;
       font-family:arial;
       font-weight:normal;
       font-size:12px;
       color:#ffffff;
    }
    .kepala {
       font-family:"trebuchet ms";
       font-size:33px;
       text-decoration:underline overline;
       color:#ff0000;
    }
    .terserah {
      border:1px solid #ddffaa;
      padding:10px;
      color:#777;
      text-align:right;
      background:#ddffaa;
    }
    
  • Latihan 14, adalah latihan membuat animasi sederhana menggunakan CSS3. Pada latihan ini ketika dijalankan/diakses, akan tampak sebuah kotak berwarna merah yang apabila mouse diletakkan di atasnya maka kotak tersebut akan membesar dan berputar. Latihan ini menerapkan Embeded CSS, simpan dengan nama latihan14.html.
    <html>
    <head>
    <title>Latihan 14</title>
    
    <style type="text/css">
    div {
    	width:100px;
    	height:100px;
    	background:red;
    	transition:width 2s, height 2s;
    	-moz-transition:width 2s, height 2s, -moz-transform 2s;
    	-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
    	-o-transition:width 2s, height 2s, -o-transform 2s;
    }
    div:hover {
    	width:200px;
    	height:200px;
    	transform:rotate(180deg);
    	-moz-transform:rotate(180deg);
    	-webkit-transform:rotate(180deg);
    	-o-transform:rotate(180deg);
    }
    </style>
    
    </head>
    
    <body>
    
    
    Contoh ini tidak bekerja pada Internet Explorer.
    
    
    <div>Letakkan mouse di sini untuk melihat efek transisinya...</div>
    
    </body>
    </html>
    
  • Latihan 15, adalah latihan menggunakan tag DIV. Ada 2 file dalam latihan ini karena menerapkan External CSS. Silahkan simpan masing-masing kode berikut dengan nama latihan15.html dan cssdiv.css:
    <HTML>
    <HEaD>
    <tiTLe>latihan 15</TitLE>
    <link rel="stylesheet" type="text/css" href="cssdiv.css">
    </hEAd>
    
    <BodY>
    
    <div id=badan>
      Belajar menggunakan DIV
    
    <div class=judulnya>
    	Ini adalah Judul, menggunakan DIV juga
      </div>
    
    
    <div class=isinya>
    	Nah kalau yang ini adalah bagian isi, diatur menggunakan DIV juga, coba perhatikan perbedaannya dengan latihan 12.
      </div>
    
    </div>
    
    </bODy>
    </htmL>
    

    Yang ini untuk cssdiv.css:

    #badan { width:400px; background:#ccc;
       font-weight:bold; padding:10px;
    }
    .judulnya { margin:30px; font-family:arial;
       font-size:15px; background:#555;
       color:#ff6600; text-align:center;
    }
    .isinya { border:1px solid #ddffaa; color:#ddaa99;
      text-align:justify; background:#e34e34; padding:10px;
    }
    
  • Latihan 16, adalah latihan mebuat layout sebuah website sederhana 🙂 menggunakan CSS. File latihan16.html sebagai berikut:
    <html>
    <head>
    <title>Latihan 16</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    <div id=area>
    
    <div id=kepala>
         header
       </div>
    
    
    
    <div id=isi>
         content
       </div>
    
    
    
    <div id=sisi>
         sidebar
       </div>
    
    
    
    <div style="clear:both;"></div>
    
    
    
    <div id=kaki>
         footer
       </div>
    
    </div>
    
    </body>
    </html>
    

    File pengaturan layout berupa kode CSS sebagai berikut, simpan dengan nama style.css:

    #area { width:600px; }
    #kepala {
       width:600px;
       height:150px;
       background:#009900;
       margin-bottom:10px;
    }
    #isi {
       width:400px;
       height:600px; /*hanya contoh*/
       background:#ff0000;
       margin-left:10px;
       float:left;
    }
    #sisi {
       width:190px;
       height:600px; /*hanya contoh*/
       background:#ff8800;
       float:right;
    }
    #kaki {
       width:600px;
       height:40px;
       background:#0000ff;
       margin-top:10px;
    }
    

Oke, saudara-saudara 🙂 pertemuan selanjutnya mulai membahas tentang PHP… silahkan dipelajari dulu sebagai bahan awal untuk memudahkan kita nanti dalam mengerjakan ‘project’ :-). Jika ada pertanyaan atau apapun, silahkan tanyakan kepada saya langsung atau melalui komentar di bawah…

Related Posts

About admin 179 Articles
AmazingLight.info Owner

Be the first to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*