CSS 1





LAPORAN PEMOGRAMAN BERBASIS WEB
















                 NAMA : RISKI RAHMAD TULLAH
NIM : 1110651099
                 




PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH JEMBER






1.      Tujuan
         a. Mahaiswa dapat memahami HTML dan CSS 
               b. Mahaiswa mampu mengimplementasikan code CSS, HTML  dan PHP
2.      Dasar Teori
        ( "Cascading Style Sheets" )  adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Sesuai dengan namanya, CSS digunakan untuk mengatur Style atau tampilan dari sebuah website seperti pengaturan font, warna dan bentuk, background, dsb. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
Contoh Dari Penulisan CSS :

<html>
<head>
<title>CSS<title>
<STYLE TYPE="text/css">
...Peletakan aturan aturan Code CSS yang akan muncul pada Body...
</STYLE>
</head>
<body>
........
</body>
</html>

Istilah Pada CSS

Style rule
Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna orange.


Style sheet
Style sheet dapat di-embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector
selector { property1: value; property2:value, . . .}
h1{ color:green; background-color:orange;}

Style sheets terdiri dari dua bagian:
Selector
Biasanya penulisan atau isi Tag Selector adalah tag HTML, tanda sebuah selector “{}” . 

Declaration
Terdiri dari properti dan nilainya.
Masih bingung maksudnya apa?
                Declarator itu satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda. Dipisahkan satu dengan yang lain dengan menggunakan titik-koma.
                Biar lebih jelas dibawah ini adalah contoh pengunaan Selector dan Declaration
warna merah adalah Selector dan warna hijau adalah Declaration
Tugas

  1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)
  2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
  3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI)
  4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman
        
Berikut contoh scrip dengan menggunakan CSS,HTML,PHP :)

<html>
<head>
                        <style type="text/css">
                        table{
                                    border-colapse:colapse;
                                    border:1px solid black;
                                    }
                        #menu{
                                    height:40px;
                                    width:960px;
                                    background:url(bg-nav.jpg) repeat-x;
                                    }
                        #menu table{
                                    border:none;
                                    }
                        #menu a{
                                    color:white;
                                    text-decoration:none;
                                    }
                        #menu a:hover{
                                    background-color:white;
                                    color:black;
                                    }
                        #menu td{
                                    height:40px;
                                    text-align:center;
                                    vertical-align:middle;
                                    color:#fff;
                                    font: bold 14px Candara, Arial, Tahoma;
                                    }
                        #isi{
                                    padding: 10 10 10 10;
                                    }
                        #isi p{
                                    color:black;
                                    text-align:justify;
                                    font: 14px Candara, Arial, Tahoma;
                                    padding-bottom:5px;
                                    }
                        #isi ul{
                                    color:black;
                                    text-align:justify;
                                    font: 14px Candara, Arial, Tahoma;
                                    padding-bottom:5px;
                                    }
                        #isi img{
                                    boder: 1px solid black;
                                    width: 80px;
                                    height: 100px;
                                    }
                        .table-menu{
                                    vertical-align: top;
                                    border-colapse: colapse;
                                    border: 1px solid black;
                                    background-color: #0066cc;
                                    }
                        .footer{
                                    background-color:#0066cc;
                                    }
                        </style>
            </head>
<body>
            <table width="70%" align="center">
            <tr>
            <td colspan=2><h2 align="center" style="color:#4D4D4D; font:bold 25px Candara, Cooper Black, Tahoma;"><marquee>PRODUK MAKANAN & MINUMAN ASLI DARI SUSU SAPI</marquee>
<center><img style=" width: 950px;
height: 200px;  "src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZH2zkjkU01avTNZxu60fR_xqrTO5ZR4YkJxYKVMychuC6fkCe5YuD95APNUu0EyR4l8VGi5uky_mF_T-GZtDe8bPcKJLhS4aPgIUuWVB6p1RQwDVNclWcSGdrMXNYhyphenhyphenqJlYZ1YiQ_mxXn/s760/slide_aras_640x250.jpg"></td>
            </tr>
              <tr>
                 <td colspan=2>
                    <div id="menu">
                       <table width="100%">
                          <tr>
<td align="center"><a href="">Depan</a></td>
   <td align="center"><a href="">Profil</a></td>
 <td align="center"><a href="">Produk</a></td>
       <td align="center"><a href="">Kontak</a></td>
 <td align="center"><a href="">Forum</a></td>
</tr>
</table>
                                  </div>
                                </td>
                              </tr>
                            <tr>
 <td width="70%">
                       <div id="isi">
<h1 style="color:black; font:bold 18px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina. Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat. Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia. Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
<p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain:
<ul>
<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak cepat.</li>
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</p>
</div>
                        </td>
<h1><td width="30%" class="table-menu" align="left" style="color:#4D4D4D; font:bold 16px Candara, Arial, Tahoma;">Post</h1>
<ul>
<li><a href="" style="color:#4D4D4D;">Manfaat Produk</a></li>
<li><a href="" style="color:#4D4D4D;">Ayo Minum Susu</a></li>
<li><a href="" style="color:#4D4D4D;">Produk Olahan Susu</a></li>
</ul>
<p>Pilihan Produk</p>
<ul>
<li><a href="" style="color:#4D4D4D;">Susu Bubuk</a></li>
<li><a href="" style="color:#4D4D4D;">Permen Susu Murni</a></li>
<li><a href="" style="color:#4D4D4D;">Keju dari Susu Murni</a></li>
</ul>
<a href="" style="color:white;">Developed by Riski</a>
<p><center><font face="MV Boli">rsi.ct1enje61@gmail.com</br></p></font>
CopyRight 2013</center>
</td>
</tr>
                        <tr>
<td colspan=2 height=50 class="footer"><p style="color:white; font:bold 12px candara, arial, tahoma; text-align:center;">www.sususapi.unmuhjember.ac.id</p>
</td>
                                    </tr>
                        </table>
            </body>
</html>


Berikut Adalah tampilan dari code diatas : :)


1. kede berikut digunakan untuk membuat tulisan sama pada isi dari Web diatas dan mengatur jenis fon     ukuran fon, warna dan lain-lain. (pada perintah soal no 1).


2. code dibawah ini adalah code dimana untuk membuat text menjali Link ketika text tersebut d tunjuk atau ketika kursor mengarah pada text maka text tersebut akan berubah warna dan background. (seperti pada soal no 2).

3. code selanjutnya ini merupakan kode untuk menampilkan text pada Tabel menu (Post) dimana kita dapat mengatur posisi warna besar, kecil ukuran dan warna pada text-nya serta dapat melakukan link disaat kita telah mengisi daftar pada post "Manfaat Produk" dan seterusnya



4. selanjutnya kode tersebut digunakan untuk menampilkan text pada Heder halaman Web tersebut  dengan memanfaatkan kode CSS dan memanfaatkan salah satu sintax HTML didalamnya yaitu MARQUEE serta kita juga dapat mengatur besar kecilnya text serta warna dan font yang akan kita gunakan..






                    SEMOGA BERMANFAAT
            Salam New bieThe Next Generation Code :)



Komentar

Posting Komentar

Postingan populer dari blog ini

Install SDK Android, Enclipse dan AVD

Gambar
Lama g posting karna ane sok sibuk  hehehehehehe J   OK Langsung Aja dag. kali ini ane akan membahas tentang langkah install SDK Android, Enclipse dan AVD meskipun harus nyobak berkali-kali karna dapat kendala install SDK Meneger minta d update dan minim internet L .                         Lah kok jadi curhat :D hehehehe  Langsung kita start aja step by step cara install SDK Android, Enclipse dan AVD-nya 1.    a. Download dulu aplikasinya di http://developer.android.com/sdk/      b.  JDK ( Java SDK) dapat di download di http://www.oracle.com/technetwork/java/javase/downloads/index.html Sambil nungu downloadnya selesai sediakan kopi ama cemilanya J 2.    Install SDK Meneger  yang telah di download Keterangan :           ...
Baca selengkapnya

Sejarah Linux Debian

Gambar
  Debian adalah  sistem operasi   bebas yang dikembangkan secara terbuka oleh banyak programer sukarela(pengembang Debian) yang tergabung dalam Proyek Debian. Sistem operasi Debian adalah gabungan dari perangkat lunak yang dikembangkan dengan lisensi   GNU , dan utamanya menggunakan kernel Linux, sehingga populer dengan nama Debian GNU/Linux. Sistem operasi Debian yang menggunakan kernel Linux merupakan salah satu distro Linux yang populer dengan kestabilannya. Debian pertama kali diperkenalkan oleh   I an Murdock , seorang mahasiswa dari   Universitas Purdue ,   Amerika Serikat , pada tanggal   16 Agustus 1993 . Nama Debian berasal dari kombinasi nama Ian dengan mantan-kekasihnya Debra Lynn: Deb dan Ian. Awalnya, Murdock memulainya dengan memodifikasi distribusi SLS (Softlanding Linux System). Namun, ia tidak puas dengan SLS yang telah dimodifikasi olehnya sehingga ia berpendapat bahwa lebih baik membangun sistem (distribusi Linux) dari nol...
Baca selengkapnya

Routing Statik dan Dinamis

Gambar
Pada Dasarnya jaringan adalah bagaimana kita menghubungakan komputer satu dengan komputerlain dengan tetap memperhatikan beberapa faktor, diantaranya : a.        Keamanan lalulintas data b.      Biaya pembuatan suatu jaringan c.       Troubel shuting dan main tenance d.      Efisiensi jaringan Pada suatu jaringan, komputer pasti memiliki suatu alamat IP. IP inilah yang mengidentifikasikan suatu jaringan/network. Sedangkan dalam suatu jaringan/network pasti terdapat bantak client yang pastinya ingin terhubung dengan client yanglain msekalipun client tersebut berada dalam jaringan/network yang berbeda. Cara mengenalkan network satu dengan network yanglain ini yang dinamakan sebagai routing, routing pada dasarnya dibagi menjadi 2 yaitu routing satatis dan routing dinamis. kali ini saya coba mendefinisikan perbedaan kedua routing tersebut meski pada dasarnya per...
Baca selengkapnya