PWEB4 - Membuat Laman Registrasi
TUGAS 3 - Pemrograman Web
Membuat Laman registrasi dengan Tag Form beserta validasinya
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
Source Code :
1. Home
2. Registrasi
3. CSS
4. Link Halaman : link
Membuat Laman registrasi dengan Tag Form beserta validasinya
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
Source Code :
1. Home
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tampilan dengan HTML dan CSS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="header">
<div class="jarak">
<h2 align="center">Tech in Asia</h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#">CATEGORIES</a></li>
<li><a href="#">MARKETS</a></li>
<li><a href="#">WRITERS</a></li>
<li><a href="regis.html">REGISTRATION</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>How to run a product team, according to a VP of product</h3>
<p><img width="20%" src="tech1.jpg" alt="foto"></p>
<p>Lessons on collaboration, culture, recruiting, and alignment. <button class="btn">Read More..</button>
</p>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<h3>In brief: Careem buys Indian bus app Commut, merges assets with rival Shuttl</h3>
<p><img width="20%" src="tech3.jpg" alt="foto"></p>
<p>The Emirati ride-hailing firm is itself said to be enganged in takeover talks with uber. <button class="btn">Read More..</button>
</p>
</div>
</div>
<div class="border">
<div class="jarak">
<h3>Honestbee raised around $46m since series A. Its biggest backer is one of Korea's chaebols</h3>
<p><img width="20%" src="tech2.jpg" alt="foto"></p>
<p>Honestbee's biggest shareholder is LS Corp, which made US$8.5 billion in revenue in 2017. <button class="btn">Read More..</button>
</p>
</div>
</div>
<!-- end blog -->
</div>
<!-- kiri -->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h3>Latest Jobs</h3>
<hr/>
<h5><a href="#" class="undercor">Senior NodeJs Developer</a><br/>2359media<br/>SGD 5.5k-6.5k</h5>
<p><h5><a href="#" class="undercor">Sales Representative</a><br/>Avani<br/>IDR 5M-6M</h5></p>
<p><h5><a href="#" class="undercor">Content Writer</a><br/>ADX Asia<br/>IDR 6M-10M</h5></p>
<p><h5><a href="#" class="undercor">UI/UX Designer</a><br/>2359media<br/>SGD 2.3k-3.5k</h5></p>
<p><h5><a href="#" class="undercor">Sales Executive</a><br/>HReasily<br/>THB 15k-40k</h5></p>
<p><h5><a href="#" class="undercor">Sales Support Executive</a><br/>HReasily<br/>THB 15k-40k</h5></p>
<p><h5><a href="#" class="undercor">Java Backend Developer</a><br/>2359media<br/>SGD 3.5k-5.5k</h5></p>
<p><h5><a href="#" class="undercor">Senior UX Designer</a><br/>OnlinePajak<br/>IDR 18M-30M</h5></p>
<p><h5><a href="#" class="undercor">Social Media Specialist</a><br/>UrbanIndo<br/>IDR 6M-9M</h5></p>
<p><h5><a href="#" class="undercor">Senior Software Developer</a><br/>OnlinePajak<br/>IDR 13M-20M</h5></p>
</div>
</div>
<!--kanan -->
</div>
</div>
<div class="footer">
<div class="jarak">
<p align="center">Copyright 2018</p>
</div>
</div>
</body>
</html>
2. Registrasi
<!DOCTYPE html>
<html>
<head>
<title>Registrasi</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="header">
<div class="jarak">
<h2><p align="center">Tech in Asia</p></h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<div class="menu">
<ul>
<li><a href="#">CATEGORIES</a></li>
<li><a href="#">MARKETS</a></li>
<li><a href="#">WRITERS</a></li>
<li><a href="regis.html">REGISTRATION</a></li>
</ul>
</div>
<div class="content">
<h3 align="center">REGISTRASI</h3>
<hr/>
<br/>
<br/>
<br/>
<form>
<table width="650" height="679" align="center">
<tr>
<td width="272">Nama Lengkap</td>
<td width="343"><input type="text" name="nama" placeholder="Enter Your Name" maxlength="50" required/></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text" placeholder="Nama Jalan, Nomor, Kota" name="address" required/></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" placeholder="Enter Email" name="email" required/></td>
</tr>
<tr>
<td>Nomor HP</td>
<td><input type="text" placeholder="Enter Your Phone Number" name="phone" min="10" max="12" required/></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input type="text" name="gender" list="gender"/>
<datalist id="gender">
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</datalist>
</td>
</tr>
<tr>
<td>Berita Favorit</td>
<td><input type="text" name="berita" list="berita"/>
<datalist id="berita">
<option value="Opini"></option>
<option value="Olahraga"></option>
<option value="Ekonomi"></option>
<option value="Teknologi"></option>
<option value="Lainnya"></option>
</datalist>
</td>
<tr>
<td>
<label for="pass"><b>Password</b></label></td>
<td>
<input type="password" placeholder="Enter Password" name="pass" required></td>
</tr>
<tr>
<td align="right"><button type="button" onclick="document.getElementById('signup').style.display='none'" id="cancel"><a href="home_regis.html">Home</a></button>
</td>
<td align="center"> <button type="submit" id="submit">Sign Up</button></td>
</tr>
</table>
</form>
</div>
<div class="footer">
<div class="jarak">
<p align="center">Copyright 2018</p>
</div>
</div>
</body>
</html>
3. CSS
body {
background: #f3f3f3;
color: #333;
width: 100%;
font-family: sans-serif;
margin: 0 auto;
}
h2 {
align-content: center;
}
.header {
width: 90%;
margin: auto;
height: 120px;
line-height: 120px;
background: #D5D5D5;
color: #000000;
}
.content {
width: 90%;
margin: auto;
height: 890px;
padding: 0.1px;
background: #FFFFFF;
color: #333;
}
.kiri {
width: 70%;
float: left;
margin: auto;
background: #FFFFFF;
height: 550px;
}
.kanan {
width: 30%;
float: left;
margin: auto;
background: #FFFFFF;
color: #333;
height: 550px;
}
.border {
background-color:white;
border:4px;
margin-top: 1pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
}
.undecor{
text-decoration: none;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
.footer{
width: 90%;
margin: auto;
height: 40px;
line-height: 40px;
background: #D5D5D5;
color: #000000;
}
a {
color: white;
text-decoration: none;
}
.menu{
background-color: #D5D5D5;
color: black;
height: 50px;
line-height: 50px;
align-content: center;
width: 90%;
margin: 0 auto;
padding:0;
}
button[id="submit"]
{
height: 36px;
width: 81px;
color: white;
background-color:#61DF63;
}
button[id="cancel"]{
height: 36px;
width: 81px;
color: white;
background-color: #B71C1C;
}
.jarak{
padding: 0 2pc;
}
.menu ul{
list-style: none;
}
.menu ul li a{
float: left;
width: 25%;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
}
.menu ul li a:hover {
background-color: #74C599
display:block;
}
4. Link Halaman : link
Comments
Post a Comment