MODUL 4 "CSS(Cascading Style Sheet)"

PEMOGRAMAN WEB 1

MODUL 4

“CSS(Cascading Style Sheet)”

NAMA             : REGI PERMANA JAYA

NIM                 : 20160910112

KELAS            : SI-C 2016

UNIVERSITAS KUNINGAN

FAKULTAS ILMU KOMPUTER

2018

Post Test :

1. Buatlah design website menampilkan gambar dengan css seperti dibawah ini :

Skrip :

<title> Image Transparency </title> <h1> Image Transparency </h1> <style> div.img{ margin: 5px; padding: 5px; border: 1px solid #0000ff; height: auto; widht: auto; float: left; text-align: center; } div.img{ display: inline; margin: 5px; border: 1px solid #0000ff; } div.img a:hover img{ border: 1px solid #0000ff; opacity: 0.5; } div.desc{ text-align: center; font-weight: normal; width: 120px; margin: 5px; } </style> <div class="img"> <a target="_blank" href="modul4_2.html"><img src="1.jpg" alt="1" width="110" height="90">Add a description of the image here</a></div> <a target="_blank" href="modul4_3.html"><img src="2.jpg" alt="2" width="110" height="90">Add a description of the image here</a></div> <a target="_blank" href="modul4_4.html"><img src="3.jpg" alt="3" width="110" height="90">Add a description of the image here</a></div> <br> <br> <br> <br> <br><br><br> <p> Note : Arahkan Mouse Ke gambar </p>

Penjelasan :

1. Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
2. div adalah singkatan dari division yaitu sebuah tag html yang di gunakan untuk membuat suatu bagian atau kelompok tertentu untuk mengelompokan suatu file agar lebih mudah saat kita ingin mencarinya. Fungsi utama div adalah suatu element yang di gunakan untuk mengelompokan suatu element atau tag tag agar menjadi suatu group,  meskipun tag / element dalam div itu sendiri. Seperti biasa, untuk membuatnya kita memerlukan media notepad sebagai sofware presentasi dari dhtml agar bisa di jalankan ke dalam suatu halaman browser. Untuk membuatnya kita memerlukan tag dasar dan tag div pada html.

Tugas :

1. Buatlah designWEB dengan menggunakan CSS seperti tampilan berikut ini :

Skrip HTML :

<title> Menu CSS </title> <table border="0" align="center" width="100%"> <tr>             <td width="81%" align="center"><h1>UNIVERSITAS KUNINGAN</h1>             <h2>FAKULTAS ILMU KOMPUTER</h2>             Kampus 1: jln. Raya Tjut Nyak Dien No.36 Kuningan</td> </tr> </table> <hr size="3" color="metalic"> <link rel="stylesheet" type="text/css" href="Tugas.css"> <nav> <ul> <li><a href="Home.html">Home</a></li> <li><a href="News.html">News</a></li> <li><a href="Contact.html">Contacs</a></li> <li><a href="About.html">About</a></li> </ul> </nav>

Skrip CSS :

*{ margin:0;padding:0; } body{ background-color: #fff; font-family:Arial, Helvetica, sans-serif; color: #000; } nav{ margin:aoutp; text-align:center; width:100%; } nav ul ul{ display: none; } nav ul li:hover>ul{ display:block; width:150px; } nav ul{ background: #53bd84; padding:0 20px; list-style: none; position:relative; display:inline-table; width:100%; } nav ul:after{ content:""; clear:both; display:block; } nav ul li{ float:left; } nav ul li a{ display:block; padding:25px; color: #fff; text-decoration: none; } nav ul ul{ background: #53bd84; border-radius: 0px; padding:0; position:absolute; top:100%; } nav ul ul li{ float:none; border-top:1px solid #53bd84; border-bottom: 1px solid #53bd84; position:relative; } nav ul ul li a{ padding: 15px 40px; color: #fff; } nav ul ul li a:hover{ background-color: #666; } nav ul ul ul{ position:absolute; left:100%; top:0; }