Project 1 Desain Web

Project 1
Desain Web Dasar
Disusun untuk memenuhi tugas
Mata Kuliah : Desain Web Dasar
Disusun Oleh :
Nama : OPIANA
Nim : 41200155
Kelas : TI-2020-C-P/Kip(B6)
PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
IKMI CIREBON
2021
1. Halaman Login
<!DOCTYPE HTML>
<html>
<head>
<title>Halaman Login</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<label>Username</label><br>
<input id="name" type="text"><br>
<label>Password</label><br>
<input id="name" type="password"><br>
<button type="login" ><a href="Halaman web.html">Login</a></button>
<p><font color="#F8F8FF" size="2"> Don't have an account ?</font></p>
<h5><a href="signup.html"><font color="red" size="3">Sign Up</font></h5>
</form>
1
</div>
</body>
</html>
2. Halaman Form Utama (Form KTP)
<!DOCTYPE HTML>
<html>
<head>
<title>Formulir Pengajuan KTP</title>
</head>
<body>
<div class="header">
<div class="header-logo">KTP</div>
<div class="header-list">
<ul>
<li><a href="Halaman web.html">Home</li>
<li><a href="#">Layanan</li>
<li><a href="#">Hubungi Kami</li>
<li><a href="#">About</li>
</ul>
<ul class="login" type="submit"><a href="login.html"> Login</a></ul>
</div>
</div>
2
<div class="main-right">
<div id="navigasiA">
<h3>MENU DASHBOARD</h3>
<ul> </ul>
<ul>
<li><a href="#">1.SEJARAH </a></li>
<li> </li>
<li><a href="#">2.VISI & MISI </a></li>
<li> </li>
<li><a href="#">3.TUJUAN </a></li>
<li> </li>
<li><a href="#">4.ORGANISASI </a></li>
<li> </li>
<li><a href="#">5.FASILITAS </a></li>
<li> </li>
<li><a href="#">6.KEUNGGULAN </a></li>
</ul>
</div>
<div id="navigasiB">
<h3>Menu Informasi</h3>
<ul>
<li><a href="#">1.Ktp </a></li>
<li> </li>
<li><a href="#">2.Akta </a></li>
<li> </li>
<li><a href="#">3.KK </a></li>
<li> </li>
<li><a href="#">4.Sertifikat </a></li>
<li> </li>
<li><a href="#">5.Tentang</a></li>
</ul>
</div>
</div>
<div class="main-left">
<div id="form">
<table align="center" border="0" cellpadding="2" cellspacing="2" height="256">
<form>
<tr>
<th align="height:30px;" width="40%" colspan="2" bgcolor="#4169E1">
<font color="#FFFFFF" size="5">
FORM PENDAFTARAN E-KTP</font></th>
</tr>
<tr>
<td>   </td>
</tr>
<tr>
<td width="" height="">Nomor Pendaftaran</td>
<td>
3
<input size="4" type="text" maxlength="4">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" placeholder="Nama Lengkap"></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td><input name="Tempat" type="text" placeholder="Tempat Lahir"
>
<input name="Tanggal Lahir" type="date" ></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td><input name="Pekerjaan" type="text" size="30" placeholder="Pekerjaan"></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Status Pernikahan</td>
<td><input type="checkbox" name="Status" value="menikah" >Menikah
<input type="checkbox" name="hobi"
value="Belum Menikah">Belum Menikah <input type="checkbox"
name="status" value="janda">Janda <input type="checkbox"
name="status" value="duda">Duda</td>
</tr>
<tr>
<td>
</td>
4
</tr>
<tr>
<td>Alamat</td>
<td><textarea cols="40" row="5" name="Alamat" placeholder="Alamat
Lengkap"></textarea></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Agama</td>
<td><select name="Agama" size="1">
<option>Islam</option>
<option>Kristen</option>
<option>Khatolik</option>
<option>Hindu</option>
<option>Budha</option>
</select></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" placeholder="Masukkan Email"</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Provinsi</td>
<td>
<select name="Provinsi">
<option>Sulawesi Selatan</option>
<option>Papua</option>
<option>Jawa Barat</option>
<option>Kalimantan Timur</option>
<option>NTB</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
</tr>
5
<tr>
<td>Kota</td>
<td><input name="Kota" type="text" size="20"
placeholder="Kota">
<input name="Kec" type="text" size="20" placeholder="Kecamatan"></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input name="Jenis Kelamin" type="radio">Pria
<input name="Jenis Kelamin" type="radio">Wanita</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Tanggal Pendaftaran</td>
<td><input type="text" name="text"size="20"
placeholder="Tanggal">
<input name="text" type="text" size="20" placeholder="Bulan"></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td></td>
<td><button id="daftar" type="submit" value="Daftar" ><a href="Halaman
web.html">Daftar</a></button>   <input id="reset" type="reset"
value="cancel"> </td>
</tr>
</form>
</table>
</div>
</div>
<div class="main"></div>
<div class="footer">
<div class="footer-logo">KTP</div>
<div class="footer-list">
<ul>
<li><a href="#"> About</li>
<li><a href="#"> Karier</li>
<li><a href="#"> Hubungi Kami</li>>
</ul>
6
</div>
<h5 align="left">Copyright © 2021 by Opiana</h5>
</div>
</body>
</html>
3. Halaman WEB
<!DOCTYPE html>
<html>
<head>
<title>Halaman WEB</title>
</head>
<body>
<div class="header">
<div class="header-logo">KTP</div>
<div class="header-list">
<ul>
<li><a href="Halaman web.html">Home</li>
<li><a href="form ktp.html">Layanan</li>
<li><a href="#">Hubungi Kami</li>
<li><a href="#">About</li>
</ul>
<ul class="login" type="submit"><a href="login.html"> Login</a></ul>
</div>
</div>
<div class="main-right">
7
<div id="navigasiA">
<h3>MENU DASHBOARD</h3>
<ul> </ul>
<ul>
<li><a href="#">1.SEJARAH </a></li>
<li> </li>
<li><a href="#">2.VISI & MISI </a></li>
<li> </li>
<li><a href="#">3.TUJUAN </a></li>
<li> </li>
<li><a href="#">4.ORGANISASI </a></li>
<li> </li>
<li><a href="#">5.FASILITAS </a></li>
<li> </li>
<li><a href="#">6.KEUNGGULAN </a></li>
</ul>
</div>
<div id="navigasiB">
<h3>Menu Layanan</h3>
<ul>
<li><a href="#">1.Ktp </a></li>
<li> </li>
<li><a href="#">2.Akta </a></li>
<li> </li>
<li><a href="#">3.KK </a></li>
<li> </li>
<li><a href="#">4.Sertifikat </a></li>
<li> </li>
<li><a href="#">5.Tentang</a></li>
</ul>
</div>
</div>
<div id="isi">
<img src="Gbr/ktp.png" class="gambar" width="200" height="150"/>
<p> Nama saya Opiana Nim 41200155 dari kelas TI-2020-C-P, sekarang saya
sedang mencoba belajar desain web pada mata kuliah desain web dasar di kampus STMIK
IKMI Cirebon.<br>
</p>
<p>
Kartu Tanda Penduduk (KTP) adalah identitas resmi seorang
penduduk sebagai bukti diri yang diterbitkan oleh instansi pelaksana yang berlaku di seluruh
wilayah Negara Kesatuan Republik Indonesia. Kartu ini wajib dimiliki Warga Negara
Indonesia (WNI) dan Warga Negara Asing (WNA) yang memiliki Izin Tinggal Tetap (ITAP) yang
sudah berumur 17 tahun atau sudah pernah kawin atau telah kawin. Anak dari orang tua
WNA yang memiliki ITAP dan sudah berumur 17 tahun juga wajib memilki KTP. KTP bagi WNI
berlaku selama lima tahun dan tanggal berakhirnya disesuaikan dengan tanggal dan bulan
kelahiran yang bersangkutan. KTP bagi WNA berlaku sesuai dengan masa Izin Tinggal Tetap.
8
Khusus warga yang telah berusia 60 tahun dan ke atas, mendapat KTP seumur hidup yang
tidak perlu diperpanjang setiap lima tahun sekali. Sejak tahun 2011, KTP non elektronik telah
digantikan dengan KTP elektronik.
</p>
<div class="contents">

<h3 class="section-title">Layanan</h3>
<div class="contents-item">
<img width="150" height="200" src="Gbr/re.png">
<p><a href="form ktp.html">Form KTP</a></p>
</div>
<img width="150" height="200" src="Gbr/mi.png">
<p>Form Akta</p>
</div>
<img width="150" height="200" src="Gbr/do.png">
<p>Form KK</p>
</div>
<img width="150" height="200" src="Gbr/fa.png">
<p>Form Sertifikat</p>
</div>
</div>
</div>
<div class="isi"></div>
<div class="footer">
<div class="footer-logo">KTP</div>
<div class="footer-list">
<ul>
<li><a href="#"> About</li>
<li><a href="#"> Karier</li>
<li><a href="#"> Hubungi Kami</li>
</ul>
</div>
<h5 align="left">Copyright © 2021 by Opiana</h5>
</div>
</body>
</html>
4. Style Css
*{
margin: 0;
padding: 0;
outline: 0;
9
font-family: 'Open Sans', sans-serif;
body{
height: 100vh;
background-image: url('Gbr/Celestiais.jpg');
background-color: black;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
/* halaman Login & SignUp*/
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 20px 25px;
width: 300px;
border-radius: 0.40em;
background-color: rgba(0,0,0,.7);
box-shadow: 0 0 10px rgba(255,255,255,.3);
.container h1{
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
10
border-bottom: 4px solid #2979ff;
.container label{
text-align: left;
color: #90caf9;
.container form input{
width: calc(100% - 20px);
padding: 8px 10px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
.container form button{
width: 100%;
padding: 5px 0;
border: none;
background-color:#2979ff;
font-size: 18px;
color: #fafafa;
.container h5{
padding: 5px 0;
border: none;
font-size: 10px;
margin:2px;
a{
11
color:#FFFFFF;
text-decoration: none;
a:hover {
color: yellow;
text-decoration: underline;
p{
margin-top: 10px;
/*halaman Form & WEB */
.header {
background-color: #663399;
color: #fff;
height: 90px;
margin: 20px;
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
.header-list li {
float: left;
padding: 33px 20px;
li {
list-style: none;
12
}
.login {
float: right;
padding: 33px 20px;
#isi {
width: 900px;
height: 530px;
margin-left: 20px;
margin-top: 6px;
margin-bottom: 10px
border: 1px solid; #000;
color: white;
padding: 10px;
.contents {
height: 2px;
border-bottom: 2px solid #dee7ec;
.contents-item {
float: left;
.gambar {
float: left;
13
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
.main {
padding: 310px 20px;
/* side navigasi*/
.main-right {
float: right;
#navigasiA{
width: 250px;
height: 240px;
margin: 40px;
margin-top: 6px;
color: blue;
padding: 10px;
#navigasiB {
width: 250px;
height: 200px;
margin: 40px;
14
color: red;
padding: 10px ;
/*form*/
.main-left {
float: left;
#form {
margin-top: 6px;
margin-left: 20px;
padding: 10px 20px;
width: 850px;
height: 90% ;
float: left;
table {
color: white;
input {
color :white;
textarea {
color: white;
15
select {
color: white;
#daftar{
background: #1E90FF;
#reset {
color: red;
.footer {
background-color: #2f5167;
color: #fff;
height: 100px;
padding: 10px;
margin: 20px;
.footer-logo {
float: left;
font-size: 32px;
padding-left: 20px;
.footer-list {
float: right;
.footer-list li {
16
padding-bottom: 20px;
padding-right: 40px;
h5{
padding-top: 70px;
17

Project 1 Desain Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project 1 Desain Web

Uploaded by

Copyright:

Available Formats

Project 1

Desain Web Dasar

Disusun untuk memenuhi tugas

Mata Kuliah : Desain Web Dasar

PROGRAM STUDI TEKNIK INFORMATIKA

2. Halaman Form Utama (Form KTP)

/* halaman Login & SignUp*/

padding: 20px 25px;

box-shadow: 0 0 10px rgba(255,255,255,.3);

.container form input{

width: calc(100% - 20px);

padding: 8px 10px;

border-bottom: 2px solid #2979ff;

.container form button{

/*halaman Form & WEB */

box-shadow: 0 0 15px rgba(255,255,255,.3);

padding: 20px 40px;

padding: 33px 20px;

padding: 33px 20px;

box-shadow: 0 0 10px rgba(255,255,255,.3);

border: 1px solid; #000;

border-bottom: 2px solid #dee7ec;

padding: 310px 20px;

box-shadow: 0 0 10px rgba(255,255,255,.3);

border: 1px solid; #000;

box-shadow: 0 0 10px rgba(255,255,255,.3);

padding: 10px 20px;

box-shadow: 0 0 10px rgba(255,255,255,.3);

box-shadow: 0 0 15px rgba(255,255,255,.3);

You might also like

/halaman Form & WEB /