Cara Membuat CSS HTML Berikut Contoh

Tugas Pemograan Web 1 (CSS)

Diajukan untuk Memenuhi salah satu mata kuliah Praktikum Pemograman Web 1

Dosen Pengampu: Rio Andriyat, M.Kom

Disusun Oleh :
   
      Cecep Pauji Ramadhan
    20160910077
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018






MODUL IV
CSS(Casecading Style Sheet)





A. Pre Test
     Membuat Tampilan Seperti Dibawah Ini :

     

    Syntax :

     

<title> Image Transparency </title>

<h1> Image Transparency </h1>

<style>

div.img{ //Penulisan Css Inline Style Sheet

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"> //Embedded Style Sheet (Eksternal dan Internal)

<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> //memanggil atau hyperlink pada file lain 

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

B. Tugas 
     Membuat Tampilan/Design Web Seperti Dibawah Ini.


Syntax :

  

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

Catatan : syntax diatas hanya memanggil sebuah file yang akan membentuk desain web seperti                       diatas, membuat desai web seperti diatas menggunakan file css lalu kita tinggal melakukan pemanggilan file css nya saja.

Syntax File CSS pada desain web diatas :
            *{
            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;
}

Juni 29, 2018 | |

 

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Cari Blog Ini
Diberdayakan oleh Blogger.