Tuesday, August 30, 2016
Tutorial Coding Cara Membuat Script Html CSS Sederhana tapi Menarik menggunakan Notepad
Tutorial Coding Cara Membuat Script Html CSS Sederhana tapi Menarik menggunakan Notepad
Kali ini saya akan membuat sebuah tampilan web sederhana menggunakan html dan css menggunakan Notepad++.
Berikut tampilan html sederhana :
Pada gambar diatas, Saya menggunakkan elemen css box-shadow, border-radius dan :hover pada div panel.
Berikut script html nya :
<html lang="id">Atau juga bisa memodifikasinya sendiri. Silahkan download saja script nya pada link dibawah ini.
<head>
<title>Biodata Saya</title>
<style>
body{
color:#000;
background-color:#fff;
font-size:1.2em;
margin:auto;
padding:0;
}
.panel{
color:#000;
background-color:#add8e6;
text-align:center;
padding:18px;
margin:6px auto;
max-width:50%;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
box-shadow:0 2px 4px #888;
}
.panel:hover{
box-shadow:0 2px 8px #00008b;
}
</style>
</head>
<body>
<div class="panel"><b>BIODATA</b></div>
<div class="panel">
<p>
<img src="img.png" height="150" width="150"/>
</p>
<p align="center">
<table>
<tr><td><b>Nama Lengkap</b></td><td>: Syahrul Adiguna Kurniawan</td></tr>
<tr><td><b>NIM</b></td><td>: 14090018</td></td></tr>
<tr><td><b>Kelas</b></td><td>: 4A</td></td></tr>
<tr><td><b>Alamat</b></td><td>: Jl. Mawar No.04 Perumnas Gandasuli Brebes</td></td></tr>
<tr><td><b>Jenis Kelamin</b></td><td>: Laki-laki</td></td></tr>
<tr><td><b>E-Mail</b></td><td>: syahrulzzadie@gmail.com</td></td></tr>
<tr><td><b>Prodi</b></td><td>: D4-INFORMATIKA</td></td></tr>
</table>
</p>
</div>
</body>
</html>
Terimakasih atas kunjungan anda. Semoga Bermanfaat. :-)
